карточки при наличии привилегии предлагают запросить создание квиза

package.json

@@ -16,7 +16,7 @@
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
-        "@frontend/kitui": "^1.0.85",
+        "@frontend/kitui": "^1.0.86",
         "@mui/icons-material": "^5.10.14",
         "@mui/material": "^5.10.14",
         "@mui/x-date-pickers": "^7.13.0",

src/index.tsx

@@ -36,6 +36,8 @@ import {
   setUser,
   setUserAccount,
   useUserStore,
+  OriginalUserSquizAccount,
+  setQuizUserAccount
 } from "./stores/user";
 import TariffConstructor from "./pages/TariffConstructor/TariffConstructor";
 import {
@@ -57,10 +59,8 @@ import OutdatedLink from "@root/pages/auth/OutdatedLink";
 import { verify } from "./pages/AccountSettings/helper";
 import AfterPay from "./pages/AfterPay";
 import { PageNotFound } from "./pages/PageNotFound";
-import { setSiteReadyPayCart, useNotEnoughMoneyAmount } from "@stores/notEnoughMoneyAmount"
+import { useNotEnoughMoneyAmount } from "@stores/notEnoughMoneyAmount"
 import { usePipeSubscriber } from "./utils/hooks/usePipeSubscriber";
-import moment from "moment";
-import { payCart } from "./api/cart";
 import { useAfterPay } from "./utils/hooks/useAutoPay";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 
@@ -70,10 +70,7 @@ const localeText =
   ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
 const App = () => {
   const location = useLocation();
-  const user = useUserStore(state => state.user);
-  const userAccount = useUserStore(state => state.userAccount);
   const userId = useUserStore(state => state.userId);
-  const siteReadyPayCart = useNotEnoughMoneyAmount(state => state.siteReadyPayCart);
   const navigate = useNavigate();
   useUserFetcher({
     url: process.env.REACT_APP_DOMAIN + `/user/${userId}`,
@@ -104,6 +101,21 @@ const App = () => {
     },
   });
 
+  useUserAccountFetcher<OriginalUserSquizAccount>({
+    url: `${process.env.REACT_APP_DOMAIN}/squiz/account/get`,
+    userId,
+    onNewUserAccount: setQuizUserAccount,
+    onError: (error) => {
+      const errorMessage = getMessageFromFetchError(error);
+      if (errorMessage) {
+        enqueueSnackbar(errorMessage);
+        clearUserData();
+        clearAuthToken();
+        navigate("/signin");
+      }
+    },
+  });
+
   usePipeSubscriber()
 
   verify(userId);

src/pages/Tariffs/ModalRequestCreate.tsx

@@ -94,7 +94,11 @@ export const ModalRequestCreate = ({
     if (isSending) return (
         <Modal
             open={open}
-            onClose={onClose}
+            onClose={() => {
+                onClose()
+                setIsSending(false)
+            }}
+            
         >
             <Box sx={{
                 position: 'absolute' as 'absolute',
@@ -171,7 +175,7 @@ export const ModalRequestCreate = ({
                             sx={{
                                 fontSize: "18px",
                                 padding: "20px",
-                                color: "#F2F3F7",
+                                color: "rgb(154, 154, 175)",
                                 borderRadius: "10px 10px 0 0"
                             }}
                         >
@@ -277,6 +281,13 @@ export const ModalRequestCreate = ({
                                         ampm={false}
                                         value={values.time}
                                         views={['hours', 'minutes']} format="hh:mm"
+                                        sx={{
+                                            border: "#c4c4c4 1px solid",
+                                            borderRadius: "4px",
+                                            "& .MuiInputBase-root": {
+                                                display: "flex"
+                                            }
+                                        }}
                                     />
 
                                 </Box>
@@ -292,6 +303,8 @@ export const ModalRequestCreate = ({
                                         disabled={isSubmitting}
                                         sx={{
                                             py: "12px",
+                                            bgcolor: "rgb(126, 42, 234)",
+                                            borderRadius: "8px",
                                             "&:hover": {
                                                 backgroundColor: "#581CA7",
                                             },

src/pages/Tariffs/TariffCard.tsx

@@ -15,11 +15,12 @@ interface Props {
     text?: string;
   };
   price?: ReactNode;
+  sendRequestToCreate?: () => void;
 }
 
-export default function TariffCard({ icon, headerText, text, sx, price, buttonProps, discount }: Props) {
+export default function TariffCard({ icon, headerText, text, sx, price, buttonProps, discount, sendRequestToCreate }: Props) {
-    const theme = useTheme();
+  const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
   return (
     <Box
       sx={{
@@ -79,20 +80,20 @@ export default function TariffCard({ icon, headerText, text, sx, price, buttonPr
           </Box>
         )}
       </Box>
-       {/* <Tooltip title={<Typography>{headerText}</Typography>} placement="top"> */}
+      {/* <Tooltip title={<Typography>{headerText}</Typography>} placement="top"> */}
-        <Typography
+      <Typography
-          variant="h5"
+        variant="h5"
-          sx={{
+        sx={{
-            mt: "14px",
+          mt: "14px",
-            mb: "10px",
+          mb: "10px",
-            textOverflow: "ellipsis",
+          textOverflow: "ellipsis",
-            overflow: "hidden",
+          overflow: "hidden",
-            whiteSpace: "nowrap",
+          whiteSpace: "nowrap",
-            width: "100%",
+          width: "100%",
-          }}
+        }}
-        >
+      >
-          {headerText}
+        {headerText}
-        </Typography>
+      </Typography>
       {/* </Tooltip>
       <Tooltip
         title={text.map((line, index) => (
@@ -100,29 +101,47 @@ export default function TariffCard({ icon, headerText, text, sx, price, buttonPr
         ))}
         placement="top"
       > */}
-        <Box
+      <Box
-          sx={{
+        sx={{
-            width: "100%",
+          width: "100%",
-            mb: "auto",
+          mb: "auto",
-          }}
+        }}
-        >
+      >
-            <Typography sx={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+        <Typography sx={{ overflow: "hidden", textOverflow: "ellipsis" }}>
-              {text}
+          {text}
-            </Typography>
+        </Typography>
-        </Box>
+      </Box>
       {/* </Tooltip> */}
-      {buttonProps && (
+      <Box
-        <Button
+
-          onClick={buttonProps.onClick}
+        sx={{
-          variant="pena-outlined-purple"
+          display: "flex",
-          sx={{
+          width: "100%",
-            mt: "10px",
+          alignItems: "center",
-            ...buttonProps.sx,
+        }}>
-          }}
+        {buttonProps && (
-        >
+          <Button
-          {buttonProps.text}
+            onClick={buttonProps.onClick}
-        </Button>
+            variant="pena-outlined-purple"
-      )}
+            sx={{
+              mt: "10px",
+              ...buttonProps.sx,
+            }}
+          >
+            {buttonProps.text}
+          </Button>
+        )}
+        {Boolean(sendRequestToCreate) && (
+          <Button
+            sx={{
+              ml: "30px"
+            }}
+            onClick={sendRequestToCreate}
+          >
+            Запросить
+          </Button>
+        )}
+      </Box>
     </Box>
   );
 }

src/pages/Tariffs/TariffsPage.tsx

@@ -51,7 +51,8 @@ function TariffPage() {
   const purchasesAmount =
     useUserStore((state) => state.userAccount?.wallet.spent) ?? 0;
   const userId = useUserStore((state) => state.user?._id) ?? "";
-  const userPrivilegies = useUserStore(store => store);
+  const userPrivilegies = useUserStore(store => store.quizUserAccount?.privileges);
+  console.log(userPrivilegies)//quizManual.amount > 0
   const discounts = useDiscounts(userId);
   const isUserNko =
     useUserStore((state) => state.userAccount?.status) === "nko";
@@ -89,6 +90,7 @@ function TariffPage() {
     filteredTariffs: Tariff[],
     addFreeTariff = false
   ) => {
+    const isCC = userPrivilegies?.quizManual?.amount !== undefined && userPrivilegies?.quizManual?.amount > 0
     const tariffElements = filteredTariffs
       .filter((tariff) => tariff.privileges.length > 0)
       .map((tariff, index) => {
@@ -98,7 +100,7 @@ function TariffPage() {
           purchasesAmount,
           currentTariffs ?? [],
           isUserNko,
-          userId
+          userId,
         );
 
         return (
@@ -127,6 +129,7 @@ function TariffPage() {
               text: "Выбрать",
               onClick: () => handleTariffItemClick(tariff._id),
             }}
+            sendRequestToCreate={() => setIsRequestCreate(true)}
             headerText={tariff.name}
             text={tariff.description || ""}
             price={

src/stores/user.ts

@@ -16,6 +16,14 @@ import { patchCurrency, deleteCart, patchCart } from "@root/api/cart"
 import { User, UserAccount, UserName, getInitials, patchUserAccount } from "@frontend/kitui"
 import { cancelPayCartProcess, setNotEnoughMoneyAmount, setSiteReadyPayCart, useNotEnoughMoneyAmount } from "./notEnoughMoneyAmount";
 
+type Privilege = {
+	amount: number;
+	created_at: string;
+	id: string;
+	privilege_id: string;
+	privilege_name: string;
+  };
+
 interface UserStore {
 	userId: string | null;
 	user: User | null;
@@ -29,8 +37,19 @@ interface UserStore {
 	documentsUrl: UserDocumentsUrl;
 	comment: string;
 	initials: string;
+	quizUserAccount: OriginalUserSquizAccount | null;
 }
 
+
+export type OriginalUserSquizAccount = {
+	created_at: string;
+	deleted: boolean;
+	email: string;
+	id: string;
+	privileges: Record<string, Privilege>;
+	privilege_name: string;
+  };
+
 const defaultFieldValues = {
 	value: "",
 	error: null,
@@ -58,6 +77,7 @@ const initialState: UserStore = {
 	userId: null,
 	user: null,
 	userAccount: null,
+	quizUserAccount: null,
 	settingsFields: { ...defaultFields },
 	verificationStatus: VerificationStatus.NOT_VERIFICATED,
 	verificationType: "juridical",
@@ -151,6 +171,8 @@ export const setUserAccount = (user: UserAccount) =>
 		}
 	)
 
+export const setQuizUserAccount = (quizUserAccount: OriginalUserSquizAccount) => useUserStore.setState({ quizUserAccount });
+
 export const setNewNames = (name: UserName) =>
 	useUserStore.setState(
 		produce<UserStore>((state) => {

yarn.lock

@@ -1633,10 +1633,10 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
   integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
 
-"@frontend/kitui@^1.0.85":
+"@frontend/kitui@^1.0.86":
-  version "1.0.85"
+  version "1.0.86"
-  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.85.tgz#1a384c9ff3314175c1ba3d35d0979da7026a21ab"
+  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.86.tgz#03a56b99403b62810134f3d7da01ea3fc8cc4f7f"
-  integrity sha1-GjhMn/MxQXXBuj010JedpwJqIas=
+  integrity sha1-A6VrmUA7YoEBNPPX2gHqP8jMT38=
   dependencies:
     immer "^10.0.2"
     reconnecting-eventsource "^1.6.2"