SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

амо 5-6 шаги поменяны местами, добавлено удаление аккаунта, убраны юзеры

Browse Source
This commit is contained in:
Nastya 2024-06-04 03:08:24 +03:00
parent c8f33e8e69
commit 25f055cb8e
15 changed files with 212 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/integration.ts
View File

@ -256,7 +256,7 @@ export const getIntegrationRules = async (
method: "GET",
url: `${API_URL}/rules/${quizID}`,
});
return [settingsResponse];
return [settingsResponse || null];
} catch (nativeError) {
const [error] = parseAxiosError(nativeError);
return [null, `Не удалось получить настройки интеграции. ${error}`];
@ -331,3 +331,18 @@ export const getCustomFields = async (
return [null, `Не удалось получить список кастомных полей. ${error}`];
}
};
//Отвязать аккаунт амо от публикации
export const removeAmoAccount = async (): Promise<[void | null, string?]> => {
try {
await makeRequest<void>({
method: "DELETE",
url: `${API_URL}/delete`,
});
return [null, ""];
} catch (nativeError) {
const [error] = parseAxiosError(nativeError);
return [null, `Не удалось отвязать аккаунт. ${error}`];
}
};

4
src/model/questionTypes/shared.ts
View File

@ -96,6 +96,10 @@ export type AnyTypedQuizQuestion =
| QuizQuestionRating
| QuizQuestionResult;
export type AllTypesQuestion =
| AnyTypedQuizQuestion
| UntypedQuizQuestion;
type FilterQuestionsWithVariants<T> = T extends {
content: { variants: QuestionVariant[] };
}

83
src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx
View File

@ -8,24 +8,29 @@ import {
import React, { FC, useEffect, useMemo, useState } from "react";
import Box from "@mui/material/Box";
import CloseIcon from "@mui/icons-material/Close";
import { AmoRemoveAccount } from "./AmoRemoveAccount/AmoRemoveAccount";
import { AmoLogin } from "./AmoLogin/AmoLogin";
import { AmoStep2 } from "./AmoStep2/AmoStep2";
import { AmoStep3 } from "./AmoStep3/AmoStep3";
import { AmoStep4 } from "./AmoStep4/AmoStep4";
import { AmoStep6 } from "./IntegrationStep6/AmoStep6";
import { AmoStep7 } from "./IntegrationStep7/AmoStep7";
import { AmoModalTitle } from "./AmoModalTitle/AmoModalTitle";
import { AmoSettingsBlock } from "./SettingsBlock/AmoSettingsBlock";
import { AmoStep7 } from "./IntegrationStep7/AmoStep7";
import { AmoAccountInfo } from "./AmoAccountInfo/AmoAccountInfo";
import { AccountResponse, getAccount } from "@api/integration";
import { AccountResponse, IntegrationRules, getAccount, getIntegrationRules } from "@api/integration";
import { useQuestions } from "@/stores/questions/hooks";
import { redirect } from "react-router-dom";
import { enqueueSnackbar } from "notistack";
export type TitleKeys = "contacts" | "company" | "deal" | "users" | "buyers";
export type TitleKeys = "contacts" | "company" | "deal" | "buyers";
export type TQuestionEntity = Record<TitleKeys, string[] | []>;
type IntegrationsModalProps = {
isModalOpen: boolean;
handleCloseModal: () => void;
companyName: string | null;
quizID: number | undefined;
};
export type TagKeys = "contact" | "company" | "deal" | "buyer";
@ -35,15 +40,20 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
isModalOpen,
handleCloseModal,
companyName,
quizID,
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const { questions } = useQuestions();
const [step, setStep] = useState<number>(0);
const [isSettingsBlock, setIsSettingsBlock] = useState<boolean>(false);
const [isRemoveAccount, setIsRemoveAccount] = useState<boolean>(false);
const [accountInfo, setAccountInfo] = useState<AccountResponse | null>(null);
const [integrationRules, setIntegrationRules] = useState<IntegrationRules | null>(null);
const [selectedPipelinePerformer, setSelectedPipelinePerformer] = useState<
string | null
>(null);
@ -56,10 +66,9 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
string | null
>(null);
const [questionEntity, setQuestionEntity] = useState<TQuestionEntity>({
deal: [],
contacts: [],
company: [],
deal: [],
users: [],
buyers: [],
});
const [tags, setTags] = useState<TTags>({
@ -68,21 +77,38 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
company: [],
buyer: [],
});
console.log(accountInfo)
console.log(questionEntity)
console.log(tags)
useEffect(() => {
if (isModalOpen) {
if (isModalOpen && quizID !== undefined && !isRemoveAccount) {
const fetchAccount = async () => {
const [account, error] = await getAccount();
if (account && !error) {
setAccountInfo(account);
} else {
if (error) {
enqueueSnackbar(error)
setAccountInfo(null);
}
};
fetchAccount();
if (account) {
setAccountInfo(account);
}
}, [isModalOpen]);
};
const fetchRules = async () => {
const [settingsResponse, error] = await getIntegrationRules(quizID.toString());
if (error) {
enqueueSnackbar(error)
setIntegrationRules(null);
}
if (settingsResponse) {
setIntegrationRules(settingsResponse);
}
};
fetchAccount();
fetchRules();
}
}, [isModalOpen, isRemoveAccount]);
const handleNextStep = () => {
setStep((prevState) => prevState + 1);
@ -152,26 +178,27 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
),
},
{
title: "Соотнесение вопросов и сущностей",
title: "Добавление тегов",
isSettingsAvailable: true,
component: (
<AmoStep6
questionEntity={questionEntity}
setQuestionEntity={setQuestionEntity}
tags={tags}
handlePrevStep={handlePrevStep}
handleNextStep={handleNextStep}
setTags={setTags}
/>
),
},
{
title: "Добавление тегов",
title: "Соотнесение вопросов и сущностей",
isSettingsAvailable: true,
component: (
<AmoStep7
handleSmallBtn={handlePrevStep}
handleLargeBtn={handleSave}
tags={tags}
setTags={setTags}
questionEntity={questionEntity}
setQuestionEntity={setQuestionEntity}
handlePrevStep={handlePrevStep}
handleNextStep={handleSave}
questions={questions}
/>
),
},
@ -190,6 +217,9 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
const stepTitles = steps.map((step) => step.title);
//Если нет контекста квиза, то и делать на этой страничке нечего
if (quizID === undefined) redirect("/list")
return (
<Dialog
open={isModalOpen}
@ -252,8 +282,14 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
isSettingsBlock={isSettingsBlock}
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
startRemoveAccount={() => setIsRemoveAccount(true)}
/>
{isSettingsBlock ? (
{isRemoveAccount && (
<AmoRemoveAccount
stopThisPage={() => setIsRemoveAccount(false)}
/>
)}
{isSettingsBlock && (
<Box sx={{ flexGrow: 1, width: "100%" }}>
<AmoSettingsBlock
stepTitles={stepTitles}
@ -268,7 +304,8 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
tags={tags}
/>
</Box>
) : (
)}
{!isSettingsBlock && !isRemoveAccount && (
<Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
)}
</Box>

8
src/pages/IntegrationsPage/IntegrationsModal/AmoModalTitle/AmoModalTitle.tsx
View File

@ -10,6 +10,7 @@ type AmoModalTitleProps = {
isSettingsBlock?: boolean;
setIsSettingsBlock: (value: boolean) => void;
setStep: (value: number) => void;
startRemoveAccount: () => void;
};
export const AmoModalTitle: FC<AmoModalTitleProps> = ({
@ -18,13 +19,16 @@ export const AmoModalTitle: FC<AmoModalTitleProps> = ({
setIsSettingsBlock,
isSettingsBlock,
setStep,
startRemoveAccount
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const handleClick = useCallback(() => {
console.log(isSettingsBlock)
const handleClick = useCallback(async () => {
if (isSettingsBlock) {
setIsSettingsBlock(false);
startRemoveAccount();
setIsSettingsBlock(false)
setStep(0);
return;
}

61
src/pages/IntegrationsPage/IntegrationsModal/AmoRemoveAccount/AmoRemoveAccount.tsx Normal file
View File

@ -0,0 +1,61 @@
import { FC } from "react"
import { Button, Typography, useTheme, Box } from "@mui/material"
import { removeAmoAccount } from "@/api/integration";
import { enqueueSnackbar } from "notistack";
interface Props {
stopThisPage: () => void;
}
export const AmoRemoveAccount: FC<Props> = ({
stopThisPage,
}: Props) => {
const theme = useTheme();
const removeAccount = async () => {
const [, error] = await removeAmoAccount()
if (error) {
enqueueSnackbar(error)
} else {
stopThisPage()
}
};
return (
<Box
sx={{
mt: "30px"
}}
>
<Typography textAlign="center">
Вы хотите сменить аккаунт?
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-evenly",
flexWrap: "wrap",
margin: "30px auto",
}}
>
<Button
variant="contained"
sx={{
width: "150px",
}}
onClick={stopThisPage}
>отмена</Button>
<Button
variant="contained"
sx={{
width: "150px",
}}
onClick={removeAccount}
>сменить</Button>
</Box>
</Box >
)
}

40
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/AmoStep6.tsx
View File

@ -7,23 +7,24 @@ import {
useMemo,
useState,
} from "react";
import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView";
import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView";
import { TitleKeys, TQuestionEntity } from "../AmoCRMModal";
import Box from "@mui/material/Box";
type AmoStep6Props = {
handlePrevStep: () => void;
import { TagKeys, TTags } from "../AmoCRMModal";
import Box from "@mui/material/Box";
import { ItemsSelectionView } from "../IntegrationStep7/ItemsSelectionView/ItemsSelectionView";
import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView";
type Props = {
handleNextStep: () => void;
questionEntity: TQuestionEntity;
setQuestionEntity: Dispatch<SetStateAction<TQuestionEntity>>;
handlePrevStep: () => void;
tags: TTags;
setTags: Dispatch<SetStateAction<TTags>>;
};
export const AmoStep6: FC<AmoStep6Props> = ({
handlePrevStep,
export const AmoStep6: FC<Props> = ({
handleNextStep,
questionEntity,
setQuestionEntity,
handlePrevStep,
tags,
setTags,
}) => {
const theme = useTheme();
const [isSelection, setIsSelection] = useState<boolean>(false);
@ -33,14 +34,14 @@ export const AmoStep6: FC<AmoStep6Props> = ({
const handleAdd = useCallback(() => {
if (!activeItem || !selectedValue) return;
setQuestionEntity((prevState) => ({
setTags((prevState) => ({
...prevState,
[activeItem]: [...prevState[activeItem as TitleKeys], selectedValue],
[activeItem]: [...prevState[activeItem as TagKeys], selectedValue],
}));
}, [activeItem, setQuestionEntity, selectedValue]);
}, [activeItem, setTags, selectedValue]);
const items = useMemo(
() => ["Город", "Имя", "Фамилия", "Отчество", "Контрагент"],
() => ["#тег с результатом 1", "#еще один тег с результатом 2", "#тег"],
[],
);
@ -58,6 +59,7 @@ export const AmoStep6: FC<AmoStep6Props> = ({
items={items}
selectedValue={selectedValue}
setSelectedValue={setSelectedValue}
type={"typeTags"}
onSmallBtnClick={() => {
setActiveItem(null);
setIsSelection(false);
@ -69,11 +71,11 @@ export const AmoStep6: FC<AmoStep6Props> = ({
}}
/>
) : (
<ItemDetailsView
<TagsDetailsView
setIsSelection={setIsSelection}
handleNextStep={handleNextStep}
handlePrevStep={handlePrevStep}
questionEntity={questionEntity}
handleNextStep={handleNextStep}
tags={tags}
setActiveItem={setActiveItem}
/>
)}

15
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/TagsDetailsView/TagsDetailsView.tsx → src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/TagsDetailsView/TagsDetailsView.tsx
View File

@ -2,19 +2,19 @@ import { Box, Typography, useTheme } from "@mui/material";
import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
import { FC } from "react";
import { TagKeys, TTags } from "../../AmoCRMModal";
import { Item } from "../../IntegrationStep6/Item/Item";
import { Item } from "../../IntegrationStep7/Item/Item";
type TagsDetailsViewProps = {
setIsSelection: (value: boolean) => void;
handleSmallBtn: () => void;
handleLargeBtn: () => void;
handlePrevStep: () => void;
handleNextStep: () => void;
tags: TTags;
setActiveItem: (value: string | null) => void;
};
export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
handleSmallBtn,
handleLargeBtn,
handlePrevStep,
handleNextStep,
tags,
setActiveItem,
setIsSelection,
@ -89,9 +89,8 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
}}
>
<StepButtonsBlock
onSmallBtnClick={handleSmallBtn}
onLargeBtnClick={handleLargeBtn}
largeBtnText={"Сохранить"}
onSmallBtnClick={handlePrevStep}
onLargeBtnClick={handleNextStep}
/>
</Box>
</Box>

48
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/AmoStep7.tsx
View File

@ -7,24 +7,26 @@ import {
useMemo,
useState,
} from "react";
import { TagKeys, TTags } from "../AmoCRMModal";
import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView";
import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView";
import { TitleKeys, TQuestionEntity } from "../AmoCRMModal";
import Box from "@mui/material/Box";
import { ItemsSelectionView } from "../IntegrationStep6/ItemsSelectionView/ItemsSelectionView";
import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView";
import type { AllTypesQuestion } from "@model/questionTypes/shared"
type AmoStep7Props = {
handleSmallBtn: () => void;
handleLargeBtn: () => void;
tags: TTags;
setTags: Dispatch<SetStateAction<TTags>>;
type Props = {
handlePrevStep: () => void;
handleNextStep: () => void;
questionEntity: TQuestionEntity;
setQuestionEntity: Dispatch<SetStateAction<TQuestionEntity>>;
questions: AllTypesQuestion[];
};
export const AmoStep7: FC<AmoStep7Props> = ({
handleSmallBtn,
handleLargeBtn,
tags,
setTags,
export const AmoStep7: FC<Props> = ({
handlePrevStep,
handleNextStep,
questionEntity,
setQuestionEntity,
questions,
}) => {
const theme = useTheme();
const [isSelection, setIsSelection] = useState<boolean>(false);
@ -34,14 +36,14 @@ export const AmoStep7: FC<AmoStep7Props> = ({
const handleAdd = useCallback(() => {
if (!activeItem || !selectedValue) return;
setTags((prevState) => ({
setQuestionEntity((prevState) => ({
...prevState,
[activeItem]: [...prevState[activeItem as TagKeys], selectedValue],
[activeItem]: [...prevState[activeItem as TitleKeys], selectedValue],
}));
}, [activeItem, setTags, selectedValue]);
}, [activeItem, setQuestionEntity, selectedValue]);
const items = useMemo(
() => ["#тег с результатом 1", "#еще один тег с результатом 2", "#тег"],
() => ["Город", "Имя", "Фамилия", "Отчество", "Контрагент"],
[],
);
@ -59,7 +61,6 @@ export const AmoStep7: FC<AmoStep7Props> = ({
items={items}
selectedValue={selectedValue}
setSelectedValue={setSelectedValue}
type={"typeTags"}
onSmallBtnClick={() => {
setActiveItem(null);
setIsSelection(false);
@ -69,13 +70,14 @@ export const AmoStep7: FC<AmoStep7Props> = ({
setActiveItem(null);
setIsSelection(false);
}}
questions={questions}
/>
) : (
<TagsDetailsView
<ItemDetailsView
setIsSelection={setIsSelection}
handleLargeBtn={handleLargeBtn}
handleSmallBtn={handleSmallBtn}
tags={tags}
handleLargeBtn={handleNextStep}
handleSmallBtn={handlePrevStep}
questionEntity={questionEntity}
setActiveItem={setActiveItem}
/>
)}

0
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/AnswerItem/AnswerItem.tsx → src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/Item/AnswerItem/AnswerItem.tsx
View File

0
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/IconBtnAdd/IconBtnAdd.tsx → src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/Item/IconBtnAdd/IconBtnAdd.tsx
View File

0
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/Item.tsx → src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/Item/Item.tsx
View File

15
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/ItemDetailsView/ItemDetailsView.tsx → src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/ItemDetailsView/ItemDetailsView.tsx
View File

@ -4,19 +4,19 @@ import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
import { FC } from "react";
import { TQuestionEntity } from "../../AmoCRMModal";
type TitleKeys = "contacts" | "company" | "deal" | "users" | "buyers";
type TitleKeys = "contacts" | "company" | "deal" | "buyers";
type ItemDetailsViewProps = {
setIsSelection: (value: boolean) => void;
handlePrevStep: () => void;
handleNextStep: () => void;
handleSmallBtn: () => void;
handleLargeBtn: () => void;
questionEntity: TQuestionEntity;
setActiveItem: (value: string | null) => void;
};
export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
handlePrevStep,
handleNextStep,
handleSmallBtn,
handleLargeBtn,
questionEntity,
setActiveItem,
setIsSelection,
@ -69,8 +69,9 @@ export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
}}
>
<StepButtonsBlock
onSmallBtnClick={handlePrevStep}
onLargeBtnClick={handleNextStep}
onSmallBtnClick={handleSmallBtn}
onLargeBtnClick={handleLargeBtn}
largeBtnText={"Сохранить"}
/>
</Box>
</Box>

1
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/ItemsSelectionView/ItemsSelectionView.tsx → src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/ItemsSelectionView/ItemsSelectionView.tsx
View File

@ -2,6 +2,7 @@ import { Box } from "@mui/material";
import { CustomRadioGroup } from "../../../../../components/CustomRadioGroup/CustomRadioGroup";
import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
import { FC } from "react";
import { AllTypesQuestion } from "@/model/questionTypes/shared";
type ItemsSelectionViewProps = {
type?: string;

4
src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx
View File

@ -6,6 +6,7 @@ import { YandexMetricaLogo } from "../mocks/YandexMetricaLogo";
import { VKPixelLogo } from "../mocks/VKPixelLogo";
import { QuizMetricType } from "@model/quizSettings";
import { AmoCRMLogo } from "../mocks/AmoCRMLogo";
import { useCurrentQuiz } from "@/stores/quizes/hooks";
const AnalyticsModal = lazy(() =>
import("./AnalyticsModal/AnalyticsModal").then((module) => ({
@ -43,6 +44,8 @@ export const PartnersBoard: FC<PartnersBoardProps> = ({
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const quiz = useCurrentQuiz();
return (
<Box
sx={{
@ -125,6 +128,7 @@ export const PartnersBoard: FC<PartnersBoardProps> = ({
isModalOpen={isAmoCrmModalOpen}
handleCloseModal={handleCloseAmoSRMModal}
companyName={companyName}
quizID={quiz?.backendId}
/>
</Suspense>
)}

2
src/utils/parse-error.ts
View File

@ -25,7 +25,7 @@ const translateMessage: Record<string, string> = {
export const parseAxiosError = (nativeError: unknown): [string, number?] => {
const error = nativeError as AxiosError;
console.log(error)
if (process.env.NODE_ENV !== "production") console.error(error);
if (error.message === "Failed to fetch") return ["Ошибка сети"];