Merge branch 'dev' into 'staging'

Dev

See merge request frontend/squiz!346

src/api/integration.ts

@@ -1,6 +1,7 @@
 import { QuestionKeys } from "@/pages/IntegrationsPage/IntegrationsModal/types";
 import { makeRequest } from "@api/makeRequest";
 import { parseAxiosError } from "@utils/parse-error";
+import useSWR from "swr";
 
 export type PaginationRequest = {
   page: number;
@@ -21,6 +22,7 @@ export type AccountResponse = {
   subdomain: string;
   country: string;
   driveURL: string;
+  stale: boolean;
 };
 
 export const getAccount = async (): Promise<[AccountResponse | null, string?]> => {
@@ -37,6 +39,16 @@ export const getAccount = async (): Promise<[AccountResponse | null, string?]> =
   }
 };
 
+export function useAmoAccount() {
+  return useSWR("amoAccount", () =>
+    makeRequest<void, AccountResponse>({
+      method: "GET",
+      url: `${API_URL}/account`,
+      useToken: true,
+    })
+  );
+}
+
 // подключить Amo
 
 export const connectAmo = async (): Promise<[string | null, string?]> => {

src/pages/IntegrationsPage/IntegrationsModal/AmoAccountInfo/AmoAccountInfo.tsx

@@ -44,6 +44,7 @@ export const AmoAccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accoun
         <a
           target="_blank"
           href={link}
+          style={{wordBreak: "break-word"}}
         >
           {link}
         </a>

src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useEffect, useMemo, useState } from "react";
-import { Dialog, IconButton, Typography, useMediaQuery, useTheme, Box } from "@mui/material";
+import {Dialog, IconButton, Typography, useMediaQuery, useTheme, Box, Skeleton} from "@mui/material";
 import { useQuestions } from "@/stores/questions/hooks";
 import { redirect } from "react-router-dom";
 import { enqueueSnackbar } from "notistack";
@@ -73,7 +73,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({ isModalOpen, handleClo
   const [openDelete, setOpenDelete] = useState<TagQuestionHC | null>(null);
 
   const {
-    isloadingPage,
+    isLoadingPage,
     firstRules,
     accountInfo,
     arrayOfPipelines,
@@ -360,6 +360,15 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({ isModalOpen, handleClo
           flexGrow: 1,
         }}
       >
+        {isLoadingPage ?
+            <Skeleton
+                sx={{
+                  width: "100%",
+                  height: "100%",
+                  transform: "none",
+                }}
+            /> :
+            <>
               <AmoModalTitle
                   step={step}
                   steps={steps}
@@ -397,6 +406,10 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({ isModalOpen, handleClo
                     )}
                   </>
               )}
+            </>
+        }
+
+
       </Box>
     </Dialog>
   );

src/pages/IntegrationsPage/IntegrationsModal/AmoTokenExpiredDialog.tsx

@@ -0,0 +1,113 @@
+import { connectAmo } from "@/api/integration";
+import CustomCheckbox from "@/ui_kit/CustomCheckbox";
+import { Box, Button, Dialog, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { useState } from "react";
+
+const HIDE_DIALOG_EXPIRATION_PERIOD = 24 * 60 * 60 * 1000;
+
+interface Props {
+  initialOpen: boolean;
+}
+
+export default function AmoTokenExpiredDialog({ initialOpen }: Props) {
+  const theme = useTheme();
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(() => {
+    const hideExpirationTime = Number(localStorage.getItem("hideAmoTokenExpiredDialogExpirationTime"));
+    if (hideExpirationTime && hideExpirationTime > Date.now()) return false;
+
+    return initialOpen;
+  });
+  const [isHideDialogForADayChecked, setIsHideDialogForADayChecked] = useState<boolean>(false);
+
+  const onAmoClick = async () => {
+    const [url, error] = await connectAmo();
+    if (url && !error) {
+      window.open(url, "_blank");
+    }
+  };
+
+  function handleDialogClose() {
+    if (isHideDialogForADayChecked) {
+      const expirationDate = Date.now() + HIDE_DIALOG_EXPIRATION_PERIOD;
+      localStorage.setItem("hideAmoTokenExpiredDialogExpirationTime", expirationDate.toString());
+    }
+
+    setIsDialogOpen(false);
+  }
+
+  return (
+    <Dialog
+      open={isDialogOpen}
+      onClose={handleDialogClose}
+      PaperProps={{
+        sx: {
+          borderRadius: "12px",
+          maxWidth: "620px",
+        },
+      }}
+    >
+      <Box
+        sx={{
+          p: "20px",
+          backgroundColor: "#F2F3F7",
+        }}
+      >
+        <Typography
+          color="#4D4D4D"
+          fontSize="24px"
+          fontWeight="medium"
+        >
+          Ваш amo-токен не работает
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          p: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "30px",
+        }}
+      >
+        <Typography color="#4D4D4D">
+          Amo отозвал ваш токен. Зайдите заново в свой аккаунт, чтобы вам снова начали приходить сделки.
+        </Typography>
+        <Box
+          sx={{
+            display: "flex",
+            gap: "10px",
+            [theme.breakpoints.down("sm")]: {
+              flexDirection: "column-reverse",
+            },
+          }}
+        >
+          <Button
+            variant="outlined"
+            onClick={handleDialogClose}
+            sx={{
+              flex: "1 0 0",
+              borderColor: "#9A9AAF",
+            }}
+          >
+            Позже
+          </Button>
+          <Button
+            variant="contained"
+            onClick={onAmoClick}
+            sx={{
+              flex: "1 0 0",
+            }}
+          >
+            Перелогиниться
+          </Button>
+        </Box>
+        <CustomCheckbox
+          label={"Не показывать сутки"}
+          checked={isHideDialogForADayChecked}
+          handleChange={({ target }) => {
+            setIsHideDialogForADayChecked(target.checked);
+          }}
+        />
+      </Box>
+    </Dialog>
+  );
+}

src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts

@@ -21,7 +21,7 @@ interface Props {
 }
 
 export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID }: Props) => {
-  const [isloadingPage, setIsLoadingPage] = useState<boolean>(true);
+  const [isLoadingPage, setIsLoadingPage] = useState<boolean>(true);
   const [firstRules, setFirstRules] = useState<boolean>(false);
   const [accountInfo, setAccountInfo] = useState<AccountResponse | null>(null);
 
@@ -224,7 +224,7 @@ export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID }: P
   }, [pageOfTags]);
 
   return {
-    isloadingPage,
+    isLoadingPage,
     firstRules,
     accountInfo,
     arrayOfPipelines,

src/pages/startPage/EditPage.tsx

@@ -21,6 +21,8 @@ import { AnyTypedQuizQuestion } from "@frontend/squzanswerer";
 import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate";
 import { ConfirmLeaveModal } from "./ConfirmLeaveModal";
 import { checkQuestionHint } from "@utils/checkQuestionHint";
+import AmoTokenExpiredDialog from "../IntegrationsPage/IntegrationsModal/AmoTokenExpiredDialog";
+import { useAmoAccount } from "@/api/integration";
 
 interface Props {
   openBranchingPage: boolean;
@@ -41,6 +43,7 @@ export default function EditPage({
   setScrollDown,
 }: Props) {
   const quiz = useCurrentQuiz();
+  const { data: amoAccount } = useAmoAccount();
   const { editQuizId } = useQuizStore();
   const { questions } = useQuestionsStore();
   const { showConfirmLeaveModal, nextStep } = useUiTools();
@@ -105,6 +108,7 @@ export default function EditPage({
 
   return (
     <>
+      {amoAccount && <AmoTokenExpiredDialog initialOpen={amoAccount.stale} />}
       <Box
         sx={{
           display: isMobile ? "block" : "flex",