From f1abade62bb9ade6e89c0e17f008cddff6bf9f53 Mon Sep 17 00:00:00 2001 From: Tamara Date: Thu, 4 Jan 2024 01:55:01 +0300 Subject: [PATCH] =?UTF-8?q?=D1=83=D0=B1=D1=80=D0=B0=D0=BB=D0=B0=20=D1=83?= =?UTF-8?q?=D0=B4=D0=B2=D0=BE=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=88=D0=B0=D0=BF?= =?UTF-8?q?=D0=BA=D0=B8=20=D0=B8=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0?= =?UTF-8?q?=D1=80=D0=B0(=D0=BD=D1=83=D0=B6=D0=BD=D0=B0=20=D0=B4=D0=BE?= =?UTF-8?q?=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 41 ++- src/pages/DesignPage/DesignPage.tsx | 12 +- src/pages/Tariffs/Tariffs.tsx | 347 +++++++++--------- .../tariffsUtils/createTariffElements.tsx | 3 +- src/pages/main.tsx | 181 ++++++++- src/pages/startPage/EditPage.tsx | 204 +++++----- src/pages/startPage/Header.tsx | 12 +- 7 files changed, 496 insertions(+), 304 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 2b2460fe..09a95a93 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -101,20 +101,41 @@ export function useUserAccountFetcher({ dayjs.locale("ru"); const routeslink = [ - { path: "/list", page: , header: false, sidebar: false }, { - path: "/questions/:quizId", - page: , + path: "/list", + page: , + header: false, + sidebar: false, + footer: false, + }, + { + path: "/tariffs", + page: , + header: true, + sidebar: false, + footer: false, + }, + { + path: "/edit", + page: , header: true, sidebar: true, + footer: true, + }, + { + path: "/view", + page: , + header: false, + sidebar: false, + footer: false, + }, + { + path: "/design", + page: , + header: true, + sidebar: true, + footer: true, }, - { path: "/contacts", page: , header: true, sidebar: true }, - { path: "/result", page: , header: true, sidebar: true }, - { path: "/settings", page: , header: true, sidebar: true }, - { path: "/tariffs", page: , header: true, sidebar: false }, - { path: "/edit", page: , header: true, sidebar: true }, - { path: "/view", page: , header: false, sidebar: false }, - { path: "/design", page: , header: true, sidebar: true }, ] as const; export default function App() { diff --git a/src/pages/DesignPage/DesignPage.tsx b/src/pages/DesignPage/DesignPage.tsx index d35b5c51..94c5f547 100644 --- a/src/pages/DesignPage/DesignPage.tsx +++ b/src/pages/DesignPage/DesignPage.tsx @@ -82,13 +82,13 @@ export const DesignPage = () => { ); return ( <> -
+ {/*
*/} - {isMobile ? ( - - ) : ( - - )} + {/*{isMobile ? (*/} + {/* */} + {/*) : (*/} + {/* */} + {/*)}*/} {createPortal(, document.body)} diff --git a/src/pages/Tariffs/Tariffs.tsx b/src/pages/Tariffs/Tariffs.tsx index 44f2d77a..b1c20050 100644 --- a/src/pages/Tariffs/Tariffs.tsx +++ b/src/pages/Tariffs/Tariffs.tsx @@ -4,13 +4,13 @@ import { useEffect, useState } from "react"; import type { GetTariffsResponse } from "@model/tariff"; import { - Box, - Button, - Modal, - Paper, - Typography, - useMediaQuery, - useTheme, + Box, + Button, + Modal, + Paper, + Typography, + useMediaQuery, + useTheme, } from "@mui/material"; import { enqueueSnackbar } from "notistack"; import { Tariff, getMessageFromFetchError } from "@frontend/kitui"; @@ -18,184 +18,191 @@ import { withErrorBoundary } from "react-error-boundary"; import { createTariffElements } from "./tariffsUtils/createTariffElements"; function TariffPage() { - const theme = useTheme(); - const isTablet = useMediaQuery(theme.breakpoints.down(1000)); - const location = useLocation(); - const navigate = useNavigate(); + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const location = useLocation(); + const navigate = useNavigate(); - const [tariffs, setTariffs] = useState(); - const [user, setUser] = useState(); - const [discounts, setDiscounts] = useState(); - const [cartTariffMap, setCartTariffMap] = useState(); - const [openModal, setOpenModal] = useState({}); + const [tariffs, setTariffs] = useState(); + const [user, setUser] = useState(); + const [discounts, setDiscounts] = useState(); + const [cartTariffMap, setCartTariffMap] = useState(); + const [openModal, setOpenModal] = useState({}); - useEffect(() => { - const get = async () => { - const user = await makeRequest({ - method: "GET", - url: "https://squiz.pena.digital/customer/account", - }); - const tariffs = await makeRequest({ - method: "GET", - url: "https://squiz.pena.digital/strator/tariff?page=1&limit=100", - }); - const discounts = await makeRequest({ - method: "GET", - url: "https://squiz.pena.digital/price/discounts", - }); - setUser(user); - setTariffs(tariffs); - setDiscounts(discounts.Discounts); - }; - get(); - }, []); - - if (!user || !tariffs || !discounts) return ; - - console.log("user ", user); - console.log("tariffs ", tariffs); - console.log("discounts ", discounts); - - const openModalHC = (tariffInfo: any) => setOpenModal(tariffInfo); - const tryBuy = async ({ id, price }: { id: string, price: number }) => { - openModalHC({}) - //Если в корзине что-то было - выкладываем содержимое и запоминаем чо там лежало - if (user.cart.length > 0) { - outCart(user.cart) - } - //Если нам хватает денежек - покупаем тариф - if (price <= user.wallet.cash) { - try { - await makeRequest({ - method: "POST", - url: "https://suiz.pena.digital/customer/cart/pay" - }) - } catch (e) { - enqueueSnackbar("Произошла ошибка. Попробуйте позже") - } - //Развращаем товары в корзину - inCart() - } else { - //Деняк не хватило - navigate("https://hub.pena.digital/wallet?action=squizpay") - } + useEffect(() => { + const get = async () => { + const user = await makeRequest({ + method: "GET", + url: "https://squiz.pena.digital/customer/account", + }); + const tariffs = await makeRequest({ + method: "GET", + url: "https://squiz.pena.digital/strator/tariff?page=1&limit=100", + }); + const discounts = await makeRequest({ + method: "GET", + url: "https://squiz.pena.digital/price/discounts", + }); + setUser(user); + setTariffs(tariffs); + setDiscounts(discounts.Discounts); }; + get(); + }, []); - const purchasesAmount = user?.wallet.purchasesAmount ?? 0; - const isUserNko = user?.status === "nko"; - const filteredTariffs = tariffs.tariffs.filter((tariff) => { - return ( - tariff.privileges[0].serviceKey === "squiz" && - !tariff.isDeleted && - !tariff.isCustom - ); - }); + if (!user || !tariffs || !discounts) return ; + console.log("user ", user); + console.log("tariffs ", tariffs); + console.log("discounts ", discounts); + + const openModalHC = (tariffInfo: any) => setOpenModal(tariffInfo); + const tryBuy = async ({ id, price }: { id: string; price: number }) => { + openModalHC({}); + //Если в корзине что-то было - выкладываем содержимое и запоминаем чо там лежало + if (user.cart.length > 0) { + outCart(user.cart); + } + //Если нам хватает денежек - покупаем тариф + if (price <= user.wallet.cash) { + try { + await makeRequest({ + method: "POST", + url: "https://suiz.pena.digital/customer/cart/pay", + }); + } catch (e) { + enqueueSnackbar("Произошла ошибка. Попробуйте позже"); + } + //Развращаем товары в корзину + inCart(); + } else { + //Деняк не хватило + navigate("https://hub.pena.digital/wallet?action=squizpay"); + } + }; + + const purchasesAmount = user?.wallet.purchasesAmount ?? 0; + const isUserNko = user?.status === "nko"; + const filteredTariffs = tariffs.tariffs.filter((tariff) => { return ( - <> - - {createTariffElements( - filteredTariffs, - true, - user, - discounts, - openModalHC, - )} - - 0} - onClose={() => setOpenModal({})} - > - - - Вы подтверждаете платёж в сумму {openModal.price} ₽ - - - - - + tariff.privileges[0].serviceKey === "squiz" && + !tariff.isDeleted && + !tariff.isCustom ); + }); + + return ( + <> + + {createTariffElements( + filteredTariffs, + true, + user, + discounts, + openModalHC, + )} + + 0} + onClose={() => setOpenModal({})} + > + + + Вы подтверждаете платёж в сумму {openModal.price} ₽ + + + + + + ); } export default withErrorBoundary(TariffPage, { - fallback: ( - - Ошибка загрузки тарифов - - ), - onError: () => { }, + fallback: ( + + Ошибка загрузки тарифов + + ), + onError: () => {}, }); const LoadingPage = () => ( - - - {"Подождите, пожалуйста, идёт загрузка :)"} - - + + + {"Подождите, пожалуйста, идёт загрузка :)"} + + ); const inCart = () => { - let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]") - saveCart.forEach(async (id: string) => { - try { - await makeRequest({ - method: "PATCH", - url: `https://hub.pena.digital/customer/cart?id=${id}` - }) + let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]"); + saveCart.forEach(async (id: string) => { + try { + await makeRequest({ + method: "PATCH", + url: `https://hub.pena.digital/customer/cart?id=${id}`, + }); - let index = saveCart.indexOf('green'); - if (index !== -1) { - saveCart.splice(index, 1); - } - localStorage.setItem("saveCart", JSON.stringify(saveCart)) - } catch (e) { - console.log("Я не смог добавить тариф в корзину :( " + id) - } - }) -} + let index = saveCart.indexOf("green"); + if (index !== -1) { + saveCart.splice(index, 1); + } + localStorage.setItem("saveCart", JSON.stringify(saveCart)); + } catch (e) { + console.log("Я не смог добавить тариф в корзину :( " + id); + } + }); +}; const outCart = (cart: string[]) => { - //Сделаем муторно и подольше, зато при прерывании сессии данные потеряются минимально - cart.forEach(async (id: string) => { - try { - await makeRequest({ - method: "DELETE", - url: `https://suiz.pena.digital/customer/cart?id=${id}` - }) - let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]") - saveCart = saveCart.push(id) - localStorage.setItem("saveCart", JSON.stringify(saveCart)) - } catch (e) { - console.log("Я не смог удалить из корзины тариф :(") - } - }) -} - - + //Сделаем муторно и подольше, зато при прерывании сессии данные потеряются минимально + cart.forEach(async (id: string) => { + try { + await makeRequest({ + method: "DELETE", + url: `https://suiz.pena.digital/customer/cart?id=${id}`, + }); + let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]"); + saveCart = saveCart.push(id); + localStorage.setItem("saveCart", JSON.stringify(saveCart)); + } catch (e) { + console.log("Я не смог удалить из корзины тариф :("); + } + }); +}; diff --git a/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx b/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx index 4d5ff78d..f552bb85 100644 --- a/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx +++ b/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx @@ -46,7 +46,8 @@ export const createTariffElements = ( } buttonProps={{ text: "Выбрать", - onClick: () => onclick({id: tariff._id, price: priceBeforeDiscounts / 100}), + onClick: () => + onclick({ id: tariff._id, price: priceBeforeDiscounts / 100 }), }} headerText={tariff.name} text={tariff.privileges.map((p) => `${p.name} - ${p.amount}`)} diff --git a/src/pages/main.tsx b/src/pages/main.tsx index 311a6e8f..0aee0fe8 100755 --- a/src/pages/main.tsx +++ b/src/pages/main.tsx @@ -1,39 +1,202 @@ -import Header from "@ui_kit/Header/Header"; +import { Header } from "../../src/pages/startPage/Header"; import Sidebar from "@ui_kit/Sidebar"; import Box from "@mui/material/Box"; import { useTheme, useMediaQuery } from "@mui/material"; import HeaderFull from "@ui_kit/Header/HeaderFull"; +import { useState } from "react"; +import { SidebarMobile } from "./startPage/Sidebar/SidebarMobile"; +import { setShowConfirmLeaveModal } from "@root/uiTools/actions"; +import { setCurrentStep } from "@root/quizes/actions"; +import { useQuizStore } from "@root/quizes/store"; +import { SmallSwitchQuestionListGraph } from "@ui_kit/Toolbars/SmallSwitchQuestionListGraph"; +import { PanelSwitchQuestionListGraph } from "@ui_kit/Toolbars/PanelSwitchQuestionListGraph"; +import { ButtonTestPublication } from "@ui_kit/Toolbars/ButtonTestPublication"; +import { ButtonRecallQuiz } from "@ui_kit/Toolbars/ButtonRecallQuiz"; +import { Link } from "react-router-dom"; +import { LinkSimple } from "@icons/LinkSimple"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions"; +import { useQuestionsStore } from "@root/questions/store"; interface Props { sidebar: boolean; header?: boolean; + footer?: boolean; page: JSX.Element; } -export default function Main({ sidebar, header, page }: Props) { +export default function Main({ sidebar, header, footer, page }: Props) { const theme = useTheme(); + const quiz = useCurrentQuiz(); + const quizConfig = quiz?.config; + const { questions } = useQuestionsStore(); + const currentStep = useQuizStore((state) => state.currentStep); const isMobile = useMediaQuery(theme.breakpoints.down(600)); + const isMobileSm = useMediaQuery(theme.breakpoints.down(370)); + const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100)); + const isLinkButton = useMediaQuery(theme.breakpoints.down(708)); + const [mobileSidebar, setMobileSidebar] = useState(false); + const [nextStep, setNextStep] = useState(0); + const [openBranchingPage, setOpenBranchingPage] = useState(false); + const openBranchingPageHC = () => { + if (!openBranchingPage) { + deleteTimeoutedQuestions(questions, quiz); + } + setOpenBranchingPage((old) => !old); + }; + const isConditionMet = + [1].includes(currentStep) && quizConfig.type !== "form"; + + const changePage = (index: number) => { + if (currentStep === 2) { + setNextStep(index); + setShowConfirmLeaveModal(true); + + return; + } + + setCurrentStep(index); + }; return ( <> - {header ?
: } + {header ?
: } - {sidebar ? : <>} + {sidebar ? ( + <> + {isMobile ? ( + + ) : ( + + )} + + ) : ( + <> + )} - {page} + + {page} + + {footer ? ( + + {isConditionMet && + (isBranchingLogic ? ( + + ) : ( + + ))} + {/* Кнопка тестового просмотра */} + + {/* Кнопка отозвать */} + + {/* Ссылка */} + {quiz?.status === "start" && + (!isLinkButton ? ( + + https://hbpn.link/{quiz.qid} + + ) : ( + + + + ))} + {/* Маленькая кнопка ссылки */} + {isMobile && quiz?.status === "start" && ( + + + + )} + + ) : ( + <> + )} diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index ff8649ca..b5fe6a2d 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -157,7 +157,7 @@ export default function EditPage() { return ( <> -
+ {/*
*/} - {isMobile ? ( - - ) : ( - - )} + {/*{isMobile ? (*/} + {/* */} + {/*) : (*/} + {/* */} + {/*)}*/} - - {isConditionMet && - (isBranchingLogic ? ( - - ) : ( - - ))} - {/* Кнопка тестового просмотра */} - - {/* Кнопка отозвать */} - - {/* Ссылка */} - {quiz?.status === "start" && - (!isLinkButton ? ( - - https://hbpn.link/{quiz.qid} - - ) : ( - - - - ))} - {/* Маленькая кнопка ссылки */} - {isMobile && quiz?.status === "start" && ( - - - - )} - + {/**/} + {/* {isConditionMet &&*/} + {/* (isBranchingLogic ? (*/} + {/* */} + {/* ) : (*/} + {/* */} + {/* ))}*/} + {/* /!* Кнопка тестового просмотра *!/*/} + {/* */} + {/* /!* Кнопка отозвать *!/*/} + {/* */} + {/* /!* Ссылка *!/*/} + {/* {quiz?.status === "start" &&*/} + {/* (!isLinkButton ? (*/} + {/* */} + {/* https://hbpn.link/{quiz.qid}*/} + {/* */} + {/* ) : (*/} + {/* */} + {/* */} + {/* */} + {/* ))}*/} + {/* /!* Маленькая кнопка ссылки *!/*/} + {/* {isMobile && quiz?.status === "start" && (*/} + {/* */} + {/* */} + {/* */} + {/* )}*/} + {/**/} diff --git a/src/pages/startPage/Header.tsx b/src/pages/startPage/Header.tsx index 4789ba97..6100d001 100644 --- a/src/pages/startPage/Header.tsx +++ b/src/pages/startPage/Header.tsx @@ -80,12 +80,12 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => { - updateQuiz(quiz.id, (quiz) => { - quiz.name = e.target.value; - }) - } + // value={quiz.name} + // onChange={(e) => + // updateQuiz(quiz.id, (quiz) => { + // quiz.name = e.target.value; + // }) + // } fullWidth id="project-name" placeholder="Название проекта окно"