125 lines
4.1 KiB
JavaScript
125 lines
4.1 KiB
JavaScript
import React, { useState } from "react";
|
|
import ButtonSecondary from "../Input/ButtonSecondary";
|
|
import Divider from "@material-ui/core/Divider";
|
|
import axios from "axios";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { notification, refreshUserData } from "../../actions";
|
|
import { backend } from "../../config.js";
|
|
import { showBackdrop, hideBackdrop } from "../../actions/toggles";
|
|
import PaymentDialog from "../Dialogs/PaymentDialog";
|
|
import { openInNewTab, formatDateBasic } from "../../Services.js";
|
|
|
|
export default function EditRestaurantSubscription(props) {
|
|
const { subscriptionActive, subscriptionDue } = props.restaurant;
|
|
const initialState = {
|
|
transactionId: "",
|
|
open: false,
|
|
};
|
|
const [state, setState] = useState(initialState);
|
|
const userData = useSelector((state) => state.data.userData);
|
|
const token = userData.jwt;
|
|
const dispatch = useDispatch();
|
|
|
|
const handleActivateSubscription = (type) => {
|
|
const data = {
|
|
restaurantId: props.restaurant._id,
|
|
userData: {
|
|
firstname: userData.firstname,
|
|
lastname: userData.lastname,
|
|
userId: userData.userId,
|
|
userEmail: userData.userEmail,
|
|
NIP: userData.billing.NIP,
|
|
adress: userData.billing.adress,
|
|
companyName: userData.billing.companyName,
|
|
},
|
|
type: type,
|
|
};
|
|
dispatch(showBackdrop());
|
|
axios({
|
|
method: "POST",
|
|
url: backend + "/restaurant/subscription",
|
|
data: data,
|
|
headers: {
|
|
"x-auth-token": token,
|
|
},
|
|
})
|
|
.then((response) => {
|
|
dispatch(hideBackdrop());
|
|
if (response.status === 200) {
|
|
setState({ ...state, open: true });
|
|
} else {
|
|
dispatch(notification("Wystąpił błąd, spróbuj ponownie.", "error"));
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
dispatch(hideBackdrop());
|
|
dispatch(notification("Wystąpił błąd, spróbuj ponownie.", "error"));
|
|
});
|
|
};
|
|
|
|
const onCancel = () => {
|
|
setState({ ...state, open: false });
|
|
};
|
|
|
|
const onAccept = () => {
|
|
dispatch(refreshUserData(token));
|
|
openInNewTab("https://secure.przelewy24.pl/trnRequest/0");
|
|
};
|
|
|
|
return (
|
|
<div className="editSubscription-tab">
|
|
<PaymentDialog open={state.open} cancel={onCancel} accept={onAccept} />
|
|
<div className="subscription-text">
|
|
<h3>Subskrypcja</h3>
|
|
{subscriptionActive ? (
|
|
<h5>Aktywna do: {formatDateBasic(subscriptionDue)}</h5>
|
|
) : (
|
|
<h5>Nieaktywna</h5>
|
|
)}
|
|
</div>
|
|
{!subscriptionActive && (
|
|
<div>
|
|
<div className="subscription-cards">
|
|
<div className="subscription-card">
|
|
<h1>1 rok</h1>
|
|
<Divider style={{ width: "100%" }} />
|
|
<h2>
|
|
<strike>600zł</strike> 500zł (netto)
|
|
</h2>
|
|
<p>Aktywuj subskrypcję na 12 miesięcy i zapłać mniej.</p>
|
|
<Divider style={{ width: "100%" }} />
|
|
<ButtonSecondary
|
|
text="Aktywuj"
|
|
onClick={() => handleActivateSubscription(12)}
|
|
/>
|
|
</div>
|
|
<div className="subscription-card">
|
|
<h1>1 miesiąc</h1>
|
|
<Divider style={{ width: "100%" }} />
|
|
<h2>50zł (netto)</h2>
|
|
<p>Aktywuj subskrypcję na jeden miesiąc.</p>
|
|
<Divider style={{ width: "100%" }} />
|
|
<ButtonSecondary
|
|
text="Aktywuj"
|
|
onClick={() => handleActivateSubscription(1)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Aktywuj subskrypcję, aby Twoja restauracja była widoczna. Na tydzień
|
|
przed końcem subskrypcji wyślemy Ci email z możliwością opłacenia
|
|
subskrypcji na kolejny okres.
|
|
</p>
|
|
</div>
|
|
)}
|
|
{subscriptionActive && (
|
|
<p>
|
|
Subskrypcja jest aktywna - Twoja restauracja jest dostępna do
|
|
przeglądania dla użytkowników. Jeżeli chcesz żeby restauracja była
|
|
niewidoczna, przejdź do zakładki "Informacje"
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|