скелетон для модалки амо

This commit is contained in:
Tamara 2024-06-24 19:20:22 +03:00
parent fdef102baf
commit ce39371fe5
2 changed files with 52 additions and 39 deletions

@ -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,43 +360,56 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({ isModalOpen, handleClo
flexGrow: 1,
}}
>
<AmoModalTitle
step={step}
steps={steps}
isSettingsBlock={isSettingsBlock}
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
startRemoveAccount={() => setIsTryRemoveAccount(true)}
/>
{openDelete !== null ? (
<AmoDeleteTagQuestion
close={() => setOpenDelete(null)}
deleteItem={handleDeleteTagQuestion}
/>
) : (
<>
{isTryRemoveAccount && <AmoRemoveAccount stopThisPage={() => setIsTryRemoveAccount(false)} />}
{isSettingsBlock && (
<Box sx={{ flexGrow: 1, width: "100%" }}>
<AmoSettingsBlock
stepTitles={stepTitles}
{isLoadingPage ?
<Skeleton
sx={{
width: "100%",
height: "100%",
transform: "none",
}}
/> :
<>
<AmoModalTitle
step={step}
steps={steps}
isSettingsBlock={isSettingsBlock}
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
selectedDealUser={arrayOfUsers.find((u) => u.id === selectedDealUser)?.title || "не указан"}
selectedFunnel={arrayOfPipelines.find((p) => p.id === selectedPipeline)?.title || "нет данных"}
selectedStage={
arrayOfPipelinesSteps.find((s) => s.id === selectedPipelineStep)?.title || "нет данных"
}
selectedQuestions={selectedQuestions}
selectedTags={selectedTags}
/>
</Box>
)}
{!isSettingsBlock && !isTryRemoveAccount && (
<Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
)}
</>
)}
startRemoveAccount={() => setIsTryRemoveAccount(true)}
/>
{openDelete !== null ? (
<AmoDeleteTagQuestion
close={() => setOpenDelete(null)}
deleteItem={handleDeleteTagQuestion}
/>
) : (
<>
{isTryRemoveAccount && <AmoRemoveAccount stopThisPage={() => setIsTryRemoveAccount(false)} />}
{isSettingsBlock && (
<Box sx={{ flexGrow: 1, width: "100%" }}>
<AmoSettingsBlock
stepTitles={stepTitles}
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
selectedDealUser={arrayOfUsers.find((u) => u.id === selectedDealUser)?.title || "не указан"}
selectedFunnel={arrayOfPipelines.find((p) => p.id === selectedPipeline)?.title || "нет данных"}
selectedStage={
arrayOfPipelinesSteps.find((s) => s.id === selectedPipelineStep)?.title || "нет данных"
}
selectedQuestions={selectedQuestions}
selectedTags={selectedTags}
/>
</Box>
)}
{!isSettingsBlock && !isTryRemoveAccount && (
<Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
)}
</>
)}
</>
}
</Box>
</Dialog>
);

@ -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,