страница тарифов красивее, умеет возвращать на лист и реактивно показывает баланс
This commit is contained in:
parent
f907fdd006
commit
55c4b26834
@ -1,22 +1,32 @@
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import { makeRequest } from "@frontend/kitui";
|
||||
import { useEffect, useState } from "react";
|
||||
import type { GetTariffsResponse } from "@model/tariff";
|
||||
import { clearAuthToken } from "@frontend/kitui";
|
||||
import { logout } from "@api/auth";
|
||||
import ArrowDown from "../../assets/icons/ArrowDownIcon";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Modal,
|
||||
Paper,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
IconButton
|
||||
} from "@mui/material";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { Tariff, getMessageFromFetchError } from "@frontend/kitui";
|
||||
import { withErrorBoundary } from "react-error-boundary";
|
||||
import { createTariffElements } from "./tariffsUtils/createTariffElements";
|
||||
import HeaderFull from "@ui_kit/Header/HeaderFull";
|
||||
import Logotip from "../../pages/Landing/images/icons/QuizLogo";
|
||||
import { LogoutButton } from "@ui_kit/LogoutButton";
|
||||
import { clearUserData } from "@root/user";
|
||||
import ArrowLeft from "@icons/questionsPage/arrowLeft";
|
||||
import { currencyFormatter } from "./tariffsUtils/currencyFormatter";
|
||||
|
||||
function TariffPage() {
|
||||
const theme = useTheme();
|
||||
@ -29,6 +39,7 @@ function TariffPage() {
|
||||
const [discounts, setDiscounts] = useState();
|
||||
const [cartTariffMap, setCartTariffMap] = useState();
|
||||
const [openModal, setOpenModal] = useState({});
|
||||
const [cash, setCash] = useState("0");
|
||||
|
||||
useEffect(() => {
|
||||
const get = async () => {
|
||||
@ -47,6 +58,8 @@ function TariffPage() {
|
||||
setUser(user);
|
||||
setTariffs(tariffs);
|
||||
setDiscounts(discounts.Discounts);
|
||||
let c = currencyFormatter.format(Number(user.wallet.cash) / 100)
|
||||
setCash(c)
|
||||
};
|
||||
get();
|
||||
}, []);
|
||||
@ -68,10 +81,13 @@ function TariffPage() {
|
||||
//Если нам хватает денежек - покупаем тариф
|
||||
if (price <= user.wallet.cash) {
|
||||
try {
|
||||
await makeRequest({
|
||||
const data = await makeRequest({
|
||||
method: "POST",
|
||||
url: "https://suiz.pena.digital/customer/cart/pay",
|
||||
url: "https://squiz.pena.digital/customer/cart/pay",
|
||||
});
|
||||
setCash(currencyFormatter.format(Number(data.wallet.cash) / 100))
|
||||
enqueueSnackbar("Тариф успешно приобретён");
|
||||
|
||||
} catch (e) {
|
||||
enqueueSnackbar("Произошла ошибка. Попробуйте позже");
|
||||
}
|
||||
@ -82,8 +98,7 @@ function TariffPage() {
|
||||
// history.pushState({}, null, "https://hub.pena.digital/wallet?action=squizpay");
|
||||
|
||||
var link = document.createElement("a");
|
||||
link.href = `https://hub.pena.digital/payment?action=squizpay&dif=${
|
||||
(price - Number(user.wallet.cash)) * 100
|
||||
link.href = `https://hub.pena.digital/payment?action=squizpay&dif=${(price - Number(user.wallet.cash)) * 100
|
||||
}`;
|
||||
document.body.appendChild(link);
|
||||
// link.click();
|
||||
@ -100,18 +115,71 @@ function TariffPage() {
|
||||
);
|
||||
});
|
||||
|
||||
async function handleLogoutClick() {
|
||||
const [, logoutError] = await logout();
|
||||
|
||||
if (logoutError) {
|
||||
return enqueueSnackbar(logoutError);
|
||||
}
|
||||
|
||||
clearAuthToken();
|
||||
clearUserData();
|
||||
navigate("/");
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<HeaderFull />
|
||||
<Container
|
||||
component="nav"
|
||||
disableGutters
|
||||
maxWidth={false}
|
||||
sx={{
|
||||
px: "16px",
|
||||
display: "flex",
|
||||
height: "80px",
|
||||
alignItems: "center",
|
||||
gap: isTablet ? "20px" : "60px",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
bgcolor: "white",
|
||||
borderBottom: "1px solid #E3E3E3",
|
||||
}}
|
||||
>
|
||||
<Link to="/">
|
||||
<Logotip width={124} />
|
||||
</Link>
|
||||
<IconButton onClick={() => navigate("/list")}>
|
||||
<ArrowLeft color="black" />
|
||||
</IconButton>
|
||||
<Box sx={{ display: "flex", ml: "auto" }}>
|
||||
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
lineHeight: "14px",
|
||||
color: "gray",
|
||||
}}
|
||||
>
|
||||
Мой баланс
|
||||
</Typography>
|
||||
<Typography variant="body2" color={"#7e2aea"}>
|
||||
{cash}
|
||||
</Typography>
|
||||
</Box>
|
||||
<LogoutButton
|
||||
onClick={handleLogoutClick}
|
||||
sx={{
|
||||
ml: "20px",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Container>
|
||||
<Box
|
||||
sx={{
|
||||
justifyContent: "left",
|
||||
mt: "40px",
|
||||
mb: "30px",
|
||||
display: "grid",
|
||||
gap: "40px",
|
||||
gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${
|
||||
isTablet ? "436px" : "360px"
|
||||
p: "20px",
|
||||
gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${isTablet ? "436px" : "360px"
|
||||
}))`,
|
||||
}}
|
||||
>
|
||||
@ -163,7 +231,7 @@ export const Tariffs = withErrorBoundary(TariffPage, {
|
||||
Ошибка загрузки тарифов
|
||||
</Typography>
|
||||
),
|
||||
onError: () => {},
|
||||
onError: () => { },
|
||||
});
|
||||
|
||||
const LoadingPage = () => (
|
||||
@ -183,6 +251,7 @@ const LoadingPage = () => (
|
||||
|
||||
export const inCart = () => {
|
||||
let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]");
|
||||
if (Array.isArray(saveCart)) {
|
||||
saveCart.forEach(async (id: string) => {
|
||||
try {
|
||||
await makeRequest({
|
||||
@ -199,6 +268,9 @@ export const inCart = () => {
|
||||
console.log("Я не смог добавить тариф в корзину :( " + id);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
localStorage.setItem("saveCart", "[]")
|
||||
}
|
||||
};
|
||||
const outCart = (cart: string[]) => {
|
||||
//Сделаем муторно и подольше, зато при прерывании сессии данные потеряются минимально
|
||||
@ -206,7 +278,7 @@ const outCart = (cart: string[]) => {
|
||||
try {
|
||||
await makeRequest({
|
||||
method: "DELETE",
|
||||
url: `https://suiz.pena.digital/customer/cart?id=${id}`,
|
||||
url: `https://squiz.pena.digital/customer/cart?id=${id}`,
|
||||
});
|
||||
let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]");
|
||||
saveCart = saveCart.push(id);
|
||||
|
||||
@ -50,7 +50,7 @@ export default function QuizCard({
|
||||
try {
|
||||
await makeRequest({
|
||||
method: "POST",
|
||||
url: "https://suiz.pena.digital/customer/cart/pay",
|
||||
url: "https://squiz.pena.digital/customer/cart/pay",
|
||||
});
|
||||
inCart();
|
||||
} catch (e) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user