From fdef102baf1abf37a9cd7f3cf4d862150ed26a25 Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Mon, 24 Jun 2024 18:11:07 +0300
Subject: [PATCH] show dialog on amo token expiration

---
 src/api/integration.ts                        |  12 ++
 .../AmoTokenExpiredDialog.tsx                 | 113 ++++++++++++++++++
 src/pages/startPage/EditPage.tsx              |   4 +
 3 files changed, 129 insertions(+)
 create mode 100644 src/pages/IntegrationsPage/IntegrationsModal/AmoTokenExpiredDialog.tsx

diff --git a/src/api/integration.ts b/src/api/integration.ts
index 46af0b05..c2e982ef 100644
--- a/src/api/integration.ts
+++ b/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?]> => {
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoTokenExpiredDialog.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoTokenExpiredDialog.tsx
new file mode 100644
index 00000000..f1f2801d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx
index b288dd61..57169e8d 100755
--- a/src/pages/startPage/EditPage.tsx
+++ b/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",