Merge branch 'dev' into 'staging'

Dev

See merge request frontend/squiz!362

src/pages/Tariffs/ModalRequestCreate.tsx

@@ -8,6 +8,7 @@ import { sendContactFormRequest } from "@/api/tariff"
 import { TimePicker } from "@mui/x-date-pickers"
 import moment, { Moment } from "moment"
 import { enqueueSnackbar } from "notistack"
+import { useState } from "react"
 
 interface Props {
     open: boolean
@@ -88,8 +89,60 @@ export const ModalRequestCreate = ({
 }: Props) => {
     const theme = useTheme()
     const isMobile = useMediaQuery(theme.breakpoints.down(650));
+    const [isSending, setIsSending] = useState(false)
 
+    if (isSending) return (
+        <Modal
+            open={open}
+            onClose={onClose}
+        >
+            <Box sx={{
+                position: 'absolute' as 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                bgcolor: 'background.paper',
+                boxShadow: 24,
+                width: isMobile ? "343px" : "418px",
+                borderRadius: "10px",
+                p: "50px"
+            }}>
+                <Typography
+                    sx={{
+                        fontSize: "24px",
+                        fontWeight: 500,
+                        lineHeight: "28.44px",
+                        textAlign: "center"
+                    }}
+                >Спасибо за заявку!</Typography>
+                <Typography
+                    sx={{
+                        fontSize: "18px",
+                        lineHeight: "21.33px",
+                        color: "#4D4D4D",
+                        m: "5px 0 30px 0"
 
+                    }}
+                >С вами свяжутся в течение 24 часов</Typography>
+                <Button
+                    variant="contained"
+                    fullWidth
+                    onClick={onClose}
+                    sx={{
+                        py: "12px",
+                        "&:hover": {
+                            backgroundColor: "#581CA7",
+                        },
+                        "&:active": {
+                            color: "white",
+                            backgroundColor: "black",
+                        },
+                    }}
+                >Ок</Button>
+
+            </Box>
+        </Modal>
+    )
     return (
         <Modal
             open={open}
@@ -159,11 +212,11 @@ export const ModalRequestCreate = ({
                             console.log(resp)
                             if (resp[0]?.status === 200) {
                                 enqueueSnackbar("Запрос успешно отправлен")
-                                onClose()
+                                setIsSending(true)
-                            } 
+                            }
                             if (resp[1]) {
                                 enqueueSnackbar(resp[1])
-                            } 
+                            }
                         }}
                     >
                         {({ values, isSubmitting, setFieldValue }) => (<>

src/pages/Tariffs/NavSelect.tsx

@@ -0,0 +1,97 @@
+import { Box, Select, Typography, MenuItem } from "@mui/material"
+import SimpleArrowDown from "@ui_kit/SimpleArrowDown";
+import { useRef, useState } from "react";
+
+interface Props {
+    selectedItem: TypePages;
+    setSelectedItem: (a: TypePages) => void;
+}
+export const NavSelect = ({
+    selectedItem,
+    setSelectedItem,
+}: Props) => {
+    const ref = useRef<HTMLDivElement | null>(null)
+    const [opened, setOpened] = useState<boolean>(false)
+    return (
+        <Box>
+            <Box
+                sx={{
+                    width: "300px",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    position: "relative",
+                    m: "25px",
+                }}
+                onClick={() => setOpened((isOpened) => !isOpened)}
+            >
+                <Select
+                    ref={ref}
+                    value={selectedItem}
+                    onChange={({ target }) => setSelectedItem(target.value)}
+                    MenuProps={{ disablePortal: true }}
+                    open={opened}
+                    sx={{
+                        width: "300px",
+                        "& .MuiOutlinedInput-notchedOutline": {
+                            border: "none"
+                        },
+                        '& .MuiInputBase-input': {
+                            fontSize: "18px",
+                            fontWeight: 500,
+                            lineHeight: "20px",
+
+                            borderRadius: "28px",
+                            position: 'relative',
+                            backgroundColor: "#EFF0F5",
+                            border: "2px solid white",
+                            padding: '10px 10px 10px 20px',
+                            color: "#7E2AEA",
+                            zIndex: 2,
+                            "&:forus": {
+                                borderRadius: "28px",
+                            },
+                            "&:focus-visible": {
+                                borderRadius: "28px",
+                            }
+                        },
+                        "& .MuiPaper-root.MuiMenu-paper": {
+                            paddingTop: "50px",
+                            marginTop: "-50px",
+                            borderRadius: "28px",
+                            border: "2px solid #ffffff",
+                        },
+                        "& .MuiPopover-root": {
+                            zIndex: 1
+                        },
+                        "& .MuiSvgIcon-root": {
+                            display: "none"
+                        }
+                    }}
+                >
+                    <MenuItem value="count">Тарифы на время</MenuItem>
+                    <MenuItem value="day">Тарифы на объем</MenuItem>
+                    <MenuItem value="dop">Доп. услуги</MenuItem>
+                    <MenuItem value="hide" sx={{ ml: "15px" }}>Убрать логотип “PenaQuiz”</MenuItem>
+                    <MenuItem value="create" sx={{ ml: "15px" }}>Создать квиз на заказ</MenuItem>
+                </Select >
+                <Box
+                    sx={{
+                        width: "36px",
+                        height: "36px",
+                        bgcolor: "white",
+                        borderRadius: "30px",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        position: "absolute",
+                        right: "10px",
+                        zIndex: 2,
+                        transform: opened ? "rotate(180deg)" : "none"
+                    }}
+                >
+                    <SimpleArrowDown />
+                </Box>
+            </Box>
+        </Box>
+    )
+}

src/pages/Tariffs/Tariffs.tsx

@@ -12,9 +12,11 @@ import {
   IconButton,
   Modal,
   Paper,
+  Select,
   Typography,
   useMediaQuery,
   useTheme,
+  MenuItem,
 } from "@mui/material";
 import { clearQuizData } from "@root/quizes/store";
 import { cleanAuthTicketData } from "@root/ticket";
@@ -41,6 +43,7 @@ import type { Discount } from "@model/discounts";
 import { Other } from "./pages/Other";
 import { ModalRequestCreate } from "./ModalRequestCreate";
 import { cancelCC, useCC } from "@/stores/cc";
+import { NavSelect } from "./NavSelect";
 
 const StepperText: Record<string, string> = {
   day: "Тарифы на время",
@@ -152,7 +155,7 @@ function TariffPage() {
         let cashDif = Number(payError.split(":")[1]);
         var link = document.createElement("a");
         link.href = `https://${isTestServer ? "s" : ""}hub.pena.digital/quizpayment?action=squizpay&dif=${cashDif}&data=${token}&userid=${userId}`;
-        if (cc) link.href = link.href + "cc=true"//после покупки тарифа и возвращения будем знать что надо открыть модалку
+        if (cc) link.href = link.href + "&&cc=true"//после покупки тарифа и возвращения будем знать что надо открыть модалку
         document.body.appendChild(link);
         link.click();
         return;
@@ -294,13 +297,21 @@ function TariffPage() {
           onPromocodeApply={handleApplyPromocode}
         />
       </Box>
-      <Tabs
+      {isMobile ?
-        names={Object.values(StepperText)}
+        <NavSelect
-        items={Object.keys(StepperText)}
+          selectedItem={selectedItem}
-        selectedItem={selectedItem}
+          setSelectedItem={setSelectedItem}
-        setSelectedItem={setSelectedItem}
+        />
-        toDop={() => setSelectedItem("dop")}
+        :
-      />
+        <Tabs
+          names={Object.values(StepperText)}
+          items={Object.keys(StepperText)}
+          selectedItem={selectedItem}
+          setSelectedItem={setSelectedItem}
+          toDop={() => setSelectedItem("dop")}
+        />
+      }
+
 
       <Box
         sx={{