From fdef102baf1abf37a9cd7f3cf4d862150ed26a25 Mon Sep 17 00:00:00 2001 From: nflnkr Date: Mon, 24 Jun 2024 18:11:07 +0300 Subject: [PATCH 1/3] 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({ + 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(() => { + const hideExpirationTime = Number(localStorage.getItem("hideAmoTokenExpiredDialogExpirationTime")); + if (hideExpirationTime && hideExpirationTime > Date.now()) return false; + + return initialOpen; + }); + const [isHideDialogForADayChecked, setIsHideDialogForADayChecked] = useState(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 ( + + + + Ваш amo-токен не работает + + + + + Amo отозвал ваш токен. Зайдите заново в свой аккаунт, чтобы вам снова начали приходить сделки. + + + + + + { + setIsHideDialogForADayChecked(target.checked); + }} + /> + + + ); +} 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 && } Date: Mon, 24 Jun 2024 19:20:22 +0300 Subject: [PATCH 2/3] =?UTF-8?q?=D1=81=D0=BA=D0=B5=D0=BB=D0=B5=D1=82=D0=BE?= =?UTF-8?q?=D0=BD=20=D0=B4=D0=BB=D1=8F=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB?= =?UTF-8?q?=D0=BA=D0=B8=20=D0=B0=D0=BC=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../IntegrationsModal/AmoCRMModal.tsx | 87 +++++++++++-------- .../IntegrationsModal/useAmoIntegration.ts | 4 +- 2 files changed, 52 insertions(+), 39 deletions(-) diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx index ebe06dae..4b120218 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx +++ b/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 = ({ isModalOpen, handleClo const [openDelete, setOpenDelete] = useState(null); const { - isloadingPage, + isLoadingPage, firstRules, accountInfo, arrayOfPipelines, @@ -360,43 +360,56 @@ export const AmoCRMModal: FC = ({ isModalOpen, handleClo flexGrow: 1, }} > - setIsTryRemoveAccount(true)} - /> - {openDelete !== null ? ( - setOpenDelete(null)} - deleteItem={handleDeleteTagQuestion} - /> - ) : ( - <> - {isTryRemoveAccount && setIsTryRemoveAccount(false)} />} - {isSettingsBlock && ( - - : + <> + u.id === selectedDealUser)?.title || "не указан"} - selectedFunnel={arrayOfPipelines.find((p) => p.id === selectedPipeline)?.title || "нет данных"} - selectedStage={ - arrayOfPipelinesSteps.find((s) => s.id === selectedPipelineStep)?.title || "нет данных" - } - selectedQuestions={selectedQuestions} - selectedTags={selectedTags} - /> - - )} - {!isSettingsBlock && !isTryRemoveAccount && ( - {steps[step].component} - )} - - )} + startRemoveAccount={() => setIsTryRemoveAccount(true)} + /> + {openDelete !== null ? ( + setOpenDelete(null)} + deleteItem={handleDeleteTagQuestion} + /> + ) : ( + <> + {isTryRemoveAccount && setIsTryRemoveAccount(false)} />} + {isSettingsBlock && ( + + u.id === selectedDealUser)?.title || "не указан"} + selectedFunnel={arrayOfPipelines.find((p) => p.id === selectedPipeline)?.title || "нет данных"} + selectedStage={ + arrayOfPipelinesSteps.find((s) => s.id === selectedPipelineStep)?.title || "нет данных" + } + selectedQuestions={selectedQuestions} + selectedTags={selectedTags} + /> + + )} + {!isSettingsBlock && !isTryRemoveAccount && ( + {steps[step].component} + )} + + )} + + } + + ); diff --git a/src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts b/src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts index 2abf63fa..33340c31 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts +++ b/src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts @@ -21,7 +21,7 @@ interface Props { } export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID }: Props) => { - const [isloadingPage, setIsLoadingPage] = useState(true); + const [isLoadingPage, setIsLoadingPage] = useState(true); const [firstRules, setFirstRules] = useState(false); const [accountInfo, setAccountInfo] = useState(null); @@ -224,7 +224,7 @@ export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID }: P }, [pageOfTags]); return { - isloadingPage, + isLoadingPage, firstRules, accountInfo, arrayOfPipelines, From 55ebc8a76809932cae64d7e713d1b6f6d7028638 Mon Sep 17 00:00:00 2001 From: Tamara Date: Mon, 24 Jun 2024 19:43:31 +0300 Subject: [PATCH 3/3] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BD=D0=BE=D1=81?= =?UTF-8?q?=20=D1=81=D1=81=D1=8B=D0=BB=D0=BE=D0=BA=20=D0=B2=20=D0=B0=D0=BC?= =?UTF-8?q?=D0=BE=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D0=BA=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../IntegrationsModal/AmoAccountInfo/AmoAccountInfo.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoAccountInfo/AmoAccountInfo.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoAccountInfo/AmoAccountInfo.tsx index 3fe60eb8..501dc275 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoAccountInfo/AmoAccountInfo.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoAccountInfo/AmoAccountInfo.tsx @@ -44,6 +44,7 @@ export const AmoAccountInfo: FC = ({ handleNextStep, accoun {link}