diff --git a/src/api/integration.ts b/src/api/integration.ts index beba27fb..46af0b05 100644 --- a/src/api/integration.ts +++ b/src/api/integration.ts @@ -23,9 +23,7 @@ export type AccountResponse = { driveURL: string; }; -export const getAccount = async (): Promise< - [AccountResponse | null, string?] -> => { +export const getAccount = async (): Promise<[AccountResponse | null, string?]> => { try { const response = await makeRequest({ method: "GET", @@ -95,10 +93,7 @@ export type TagsResponse = { items: Tag[]; }; -export const getTags = async ({ - page, - size, -}: PaginationRequest): Promise<[TagsResponse | null, string?]> => { +export const getTags = async ({ page, size }: PaginationRequest): Promise<[TagsResponse | null, string?]> => { try { const tagsResponse = await makeRequest({ method: "GET", @@ -133,10 +128,7 @@ export type UsersResponse = { items: User[]; }; -export const getUsers = async ({ - page, - size, -}: PaginationRequest): Promise<[UsersResponse | null, string?]> => { +export const getUsers = async ({ page, size }: PaginationRequest): Promise<[UsersResponse | null, string?]> => { try { const usersResponse = await makeRequest({ method: "GET", @@ -171,14 +163,9 @@ export const getSteps = async ({ page, size, pipelineId, -}: PaginationRequest & { pipelineId: number }): Promise< - [StepsResponse | null, string?] -> => { +}: PaginationRequest & { pipelineId: number }): Promise<[StepsResponse | null, string?]> => { try { - const stepsResponse = await makeRequest< - PaginationRequest & { pipelineId: number }, - StepsResponse - >({ + const stepsResponse = await makeRequest({ method: "GET", url: `${API_URL}/steps?page=${page}&size=${size}&pipelineID=${pipelineId}`, }); @@ -206,15 +193,9 @@ export type PipelinesResponse = { items: Pipeline[]; }; -export const getPipelines = async ({ - page, - size, -}: PaginationRequest): Promise<[PipelinesResponse | null, string?]> => { +export const getPipelines = async ({ page, size }: PaginationRequest): Promise<[PipelinesResponse | null, string?]> => { try { - const pipelinesResponse = await makeRequest< - PaginationRequest, - PipelinesResponse - >({ + const pipelinesResponse = await makeRequest({ method: "GET", url: `${API_URL}/pipelines?page=${page}&size=${size}`, }); @@ -226,7 +207,7 @@ export const getPipelines = async ({ }; //получение настроек интеграции -export type QuestionID = Record +export type QuestionID = Record; export type IntegrationRules = { PipelineID: number; @@ -238,13 +219,11 @@ export type IntegrationRules = { Contact: number[] | null; Company: number[] | null; Customer: number[] | null; - } + }; }; -export type FieldsRule = Record, null | [{QuestionID: QuestionID;}]> +export type FieldsRule = Record, null | [{ QuestionID: QuestionID }]>; -export const getIntegrationRules = async ( - quizID: string, -): Promise<[IntegrationRules | null, string?]> => { +export const getIntegrationRules = async (quizID: string): Promise<[IntegrationRules | null, string?]> => { try { const settingsResponse = await makeRequest({ method: "GET", @@ -275,7 +254,7 @@ export type IntegrationRulesUpdate = { export const setIntegrationRules = async ( quizID: string, - settings: IntegrationRulesUpdate, + settings: IntegrationRulesUpdate ): Promise<[string | null, string?]> => { try { const updateResponse = await makeRequest({ @@ -291,7 +270,7 @@ export const setIntegrationRules = async ( }; export const updateIntegrationRules = async ( quizID: string, - settings: IntegrationRulesUpdate, + settings: IntegrationRulesUpdate ): Promise<[string | null, string?]> => { try { const updateResponse = await makeRequest({ @@ -326,13 +305,10 @@ export type CustomFieldsResponse = { }; export const getCustomFields = async ( - pagination: PaginationRequest, + pagination: PaginationRequest ): Promise<[CustomFieldsResponse | null, string?]> => { try { - const fieldsResponse = await makeRequest< - PaginationRequest, - CustomFieldsResponse - >({ + const fieldsResponse = await makeRequest({ method: "GET", url: `${API_URL}/fields?page=${pagination.page}&size=${pagination.size}`, }); @@ -356,4 +332,4 @@ export const removeAmoAccount = async (): Promise<[void | null, string?]> => { const [error] = parseAxiosError(nativeError); return [null, `Не удалось отвязать аккаунт. ${error}`]; } -}; \ No newline at end of file +}; diff --git a/src/components/CustomRadioGroup/CustomRadioGroup.tsx b/src/components/CustomRadioGroup/CustomRadioGroup.tsx index 3de16dd3..63aa90bc 100644 --- a/src/components/CustomRadioGroup/CustomRadioGroup.tsx +++ b/src/components/CustomRadioGroup/CustomRadioGroup.tsx @@ -1,18 +1,9 @@ import * as React from "react"; import { FC, useMemo } from "react"; import CheckboxIcon from "@icons/Checkbox"; -import { - SelectChangeEvent, - Typography, - useTheme, - Box, - FormControlLabel, - RadioGroup, - Radio, -} from "@mui/material"; +import { SelectChangeEvent, Typography, useTheme, Box, FormControlLabel, RadioGroup, Radio } from "@mui/material"; import { MinifiedData, TagKeys } from "@/pages/IntegrationsPage/IntegrationsModal/types"; - type CustomRadioGroupProps = { items: MinifiedData[] | []; selectedItemId?: string | null; @@ -32,18 +23,19 @@ export const CustomRadioGroup: FC = ({ const currentItem = useMemo(() => { if (selectedItemId !== null && selectedItemId.length > 0) { - return items.find(item => item.id === selectedItemId) || null + return items.find((item) => item.id === selectedItemId) || null; } return null; - }, [selectedItemId, items]) + }, [selectedItemId, items]); const filteredItems = useMemo(() => { - let newArray = items - if (activeScope !== undefined) newArray =newArray.filter(item => { - return item.entity === activeScope - }) - return newArray - }, items) + let newArray = items; + if (activeScope !== undefined) + newArray = newArray.filter((item) => { + return item.entity === activeScope; + }); + return newArray; + }, items); const onScroll = React.useCallback((e: React.UIEvent) => { const scrollHeight = e.currentTarget.scrollHeight; @@ -56,10 +48,9 @@ export const CustomRadioGroup: FC = ({ } }, []); - const formControlLabels = useMemo(() => { if (filteredItems.length !== 0) { - return filteredItems.map(item => + return filteredItems.map((item) => ( = ({ borderRadius: "12px", margin: 0, backgroundColor: - currentItem?.id === item.id - ? theme.palette.background.default - : theme.palette.common.white, + currentItem?.id === item.id ? theme.palette.background.default : theme.palette.common.white, "&.MuiFormControlLabel-root > .MuiTypography-root": { width: "200px", overflow: "hidden", - textOverflow: "ellipsis" - } - + textOverflow: "ellipsis", + }, }} value={item.id} control={ @@ -97,7 +85,7 @@ export const CustomRadioGroup: FC = ({ label={item.title} labelPlacement={"start"} /> - ) + )); } return ( void; }; -export const CustomSelect: FC = ({ - items, - selectedItemId, - setSelectedItem, - handleScroll, -}) => { +export const CustomSelect: FC = ({ items, selectedItemId, setSelectedItem, handleScroll }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); @@ -48,9 +33,7 @@ export const CustomSelect: FC = ({ } }, []); - const currentItem = useMemo(() => ( - items.find(item => item.id === selectedItemId) || null - ), [selectedItemId, items]) + const currentItem = useMemo(() => items.find((item) => item.id === selectedItemId) || null, [selectedItemId, items]); const menuItems = useMemo(() => { if (items.length !== 0) { @@ -78,9 +61,7 @@ export const CustomSelect: FC = ({ @@ -89,9 +70,7 @@ export const CustomSelect: FC = ({ = ({ )); } return ( - + нет данных ); @@ -118,10 +101,7 @@ export const CustomSelect: FC = ({ width: "100%", height: "56px", padding: "5px", - color: - currentItem === null - ? theme.palette.grey2.main - : theme.palette.brightPurple.main, + color: currentItem === null ? theme.palette.grey2.main : theme.palette.brightPurple.main, border: `2px solid ${theme.palette.common.white}`, borderRadius: "30px", background: "#EFF0F5", @@ -129,7 +109,9 @@ export const CustomSelect: FC = ({ alignItems: "center", cursor: "pointer", }} - onClick={() => {if (ref.current !== null) ref.current?.click()}} + onClick={() => { + if (ref.current !== null) ref.current?.click(); + }} > = ({ paddingTop: "50px", marginTop: "-50px", borderRadius: "28px", - }, }, }} sx={{ - display: "block", - "& .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input": { - display: "none" - }, - "& .MuiSelect-icon":{ - display: "none" - }, - "& .MuiOutlinedInput-notchedOutline": { - border: 0 - }, - "& .MuiMenu-root.MuiModal-root": { - zIndex: 0 - } - + display: "block", + "& .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input": { + display: "none", + }, + "& .MuiSelect-icon": { + display: "none", + }, + "& .MuiOutlinedInput-notchedOutline": { + border: 0, + }, + "& .MuiMenu-root.MuiModal-root": { + zIndex: 0, + }, }} onChange={({ target }: SelectChangeEvent) => setSelectedItem(target.value)} onClick={toggleOpened} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoAccountInfo/AmoAccountInfo.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoAccountInfo/AmoAccountInfo.tsx index 8b6a5b6e..3fe60eb8 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoAccountInfo/AmoAccountInfo.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoAccountInfo/AmoAccountInfo.tsx @@ -8,10 +8,7 @@ type AmoAccountInfoProps = { accountInfo: AccountResponse; }; -export const AmoAccountInfo: FC = ({ - handleNextStep, - accountInfo, -}) => { +export const AmoAccountInfo: FC = ({ handleNextStep, accountInfo }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); @@ -24,9 +21,7 @@ export const AmoAccountInfo: FC = ({ }} > - - {title}: - + {title}: {value || "нет данных"} @@ -43,12 +38,15 @@ export const AmoAccountInfo: FC = ({ }} > - - {title}: - + {title}: - {link} + + {link} + ); diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx index d9bc87b2..ebe06dae 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx @@ -1,12 +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 } from "@mui/material"; import { useQuestions } from "@/stores/questions/hooks"; import { redirect } from "react-router-dom"; import { enqueueSnackbar } from "notistack"; @@ -24,13 +17,26 @@ import { AmoQuestions } from "./AmoQuestions/AmoQuestions"; import { AmoModalTitle } from "./AmoModalTitle/AmoModalTitle"; import { AmoSettingsBlock } from "./SettingsBlock/AmoSettingsBlock"; import { AmoAccountInfo } from "./AmoAccountInfo/AmoAccountInfo"; -import { AccountResponse, FieldsRule, IntegrationRules, Pipeline, Step, User, getAccount, getIntegrationRules, getPipelines, getSteps, getTags, getUsers, setIntegrationRules, updateIntegrationRules } from "@api/integration"; +import { + AccountResponse, + FieldsRule, + IntegrationRules, + Pipeline, + Step, + User, + getAccount, + getIntegrationRules, + getPipelines, + getSteps, + getTags, + getUsers, + setIntegrationRules, + updateIntegrationRules, +} from "@api/integration"; import type { QuestionID } from "@api/integration"; import { useAmoIntegration } from "./useAmoIntegration"; import { QuestionKeys, TagKeys, TagQuestionHC } from "./types"; - - type IntegrationsModalProps = { isModalOpen: boolean; handleCloseModal: () => void; @@ -38,14 +44,7 @@ type IntegrationsModalProps = { quizID: number | undefined; }; - - -export const AmoCRMModal: FC = ({ - isModalOpen, - handleCloseModal, - companyName, - quizID, -}) => { +export const AmoCRMModal: FC = ({ isModalOpen, handleCloseModal, companyName, quizID }) => { //Если нет контекста квиза, то и делать на этой страничке нечего if (quizID === undefined) { redirect("/list"); @@ -57,16 +56,16 @@ export const AmoCRMModal: FC = ({ const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const { questions } = useQuestions(); - const minifiedQuestions = useMemo(() => questions - .filter((q) => - q.type !== "result" - && q.type !== null - ) - .map(({ backendId, title }) => ({ - id: backendId.toString() as string, - title - })), [questions]) - + const minifiedQuestions = useMemo( + () => + questions + .filter((q) => q.type !== "result" && q.type !== null) + .map(({ backendId, title }) => ({ + id: backendId.toString() as string, + title, + })), + [questions] + ); const [step, setStep] = useState(0); const [isSettingsBlock, setIsSettingsBlock] = useState(false); @@ -100,54 +99,54 @@ export const AmoCRMModal: FC = ({ quizID, isModalOpen, isTryRemoveAccount, - }) + }); - const handleAddTagQuestion = useCallback((scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => { - if (!scope || !id) return; + const handleAddTagQuestion = useCallback( + (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => { + if (!scope || !id) return; - if (type === "tag") { - setSelectedTags((prevState) => ({ - ...prevState, - [scope]: [...prevState[scope as TagKeys], id], - })); - } + if (type === "tag") { + setSelectedTags((prevState) => ({ + ...prevState, + [scope]: [...prevState[scope as TagKeys], id], + })); + } - if (type === "question") { - setSelectedQuestions((prevState) => ({ - ...prevState, - [scope]: [...prevState[scope as QuestionKeys], id], - })); - } - }, [setSelectedQuestions, setSelectedTags]); + if (type === "question") { + setSelectedQuestions((prevState) => ({ + ...prevState, + [scope]: [...prevState[scope as QuestionKeys], id], + })); + } + }, + [setSelectedQuestions, setSelectedTags] + ); const handleDeleteTagQuestion = useCallback(() => { if (openDelete === null || !openDelete.scope || !openDelete.id || !openDelete.type) return; if (openDelete.type === "tag") { let newArray = selectedTags[openDelete.scope]; - const index = newArray.indexOf(openDelete.id) - if (index !== -1) - newArray.splice(index, 1); + const index = newArray.indexOf(openDelete.id); + if (index !== -1) newArray.splice(index, 1); setSelectedTags((prevState) => ({ ...prevState, - [openDelete.scope]: newArray + [openDelete.scope]: newArray, })); } if (openDelete.type === "question") { let newArray = selectedQuestions[openDelete.scope as QuestionKeys]; - const index = newArray.indexOf(openDelete.id) - if (index !== -1) - newArray.splice(index, 1); + const index = newArray.indexOf(openDelete.id); + if (index !== -1) newArray.splice(index, 1); setSelectedQuestions((prevState) => ({ ...prevState, - [openDelete.scope]: newArray + [openDelete.scope]: newArray, })); } - setOpenDelete(null) + setOpenDelete(null); }, [openDelete]); - const handleNextStep = () => { setStep((prevState) => prevState + 1); }; @@ -155,45 +154,44 @@ export const AmoCRMModal: FC = ({ setStep((prevState) => prevState - 1); }; const handleSave = () => { - - if (quizID === undefined) return - if (selectedPipeline === null) return enqueueSnackbar("Выберите воронку") - if (selectedPipeline === null) return enqueueSnackbar("Выберите этап воронки") + if (quizID === undefined) return; + if (selectedPipeline === null) return enqueueSnackbar("Выберите воронку"); + if (selectedPipeline === null) return enqueueSnackbar("Выберите этап воронки"); const body = { PipelineID: Number(selectedPipeline), StepID: Number(selectedPipelineStep), PerformerID: Number(selectedDealUser), // FieldsRule: questionsBackend, - TagsToAdd: selectedTags - } - - const FieldsRule = { - Company: [{ "QuestionID": {} }], - Lead: [{ "QuestionID": {} }], - Customer: [{ "QuestionID": {} }], + TagsToAdd: selectedTags, }; - console.log("selectedQuestions") - console.log(selectedQuestions) + const FieldsRule = { + Company: [{ QuestionID: {} }], + Lead: [{ QuestionID: {} }], + Customer: [{ QuestionID: {} }], + }; + + console.log("selectedQuestions"); + console.log(selectedQuestions); for (let key in FieldsRule) { - console.log("current key ", key) + console.log("current key ", key); selectedQuestions[key as QuestionKeys].forEach((id) => { - FieldsRule[key as QuestionKeys][0].QuestionID[id] = 0 - }) + FieldsRule[key as QuestionKeys][0].QuestionID[id] = 0; + }); } for (let key in body.TagsToAdd) { - body.TagsToAdd[key as TagKeys] = body.TagsToAdd[key as TagKeys].map(id => Number(id)) + body.TagsToAdd[key as TagKeys] = body.TagsToAdd[key as TagKeys].map((id) => Number(id)); } - body.FieldsRule = FieldsRule + body.FieldsRule = FieldsRule; - console.log("На отправку") - console.log(body) + console.log("На отправку"); + console.log(body); if (firstRules) { - setIntegrationRules(quizID.toString(), body) + setIntegrationRules(quizID.toString(), body); } else { - updateIntegrationRules(quizID.toString(), body) + updateIntegrationRules(quizID.toString(), body); } handleCloseModal(); @@ -202,9 +200,7 @@ export const AmoCRMModal: FC = ({ const steps = useMemo( () => [ { - title: accountInfo - ? "Информация об аккаунте" - : "Авторизация в аккаунте", + title: accountInfo ? "Информация об аккаунте" : "Авторизация в аккаунте", isSettingsAvailable: false, component: accountInfo ? ( = ({ users={arrayOfUsers} selectedDealUser={selectedDealUser} selectedStep={selectedPipelineStep} - steps={arrayOfPipelinesSteps} setSelectedDealPerformer={setSelectedDealPerformer} setSelectedStep={setSelectedPipelineStep} - handlePrevStep={handlePrevStep} handleNextStep={handleNextStep} /> @@ -270,7 +264,7 @@ export const AmoCRMModal: FC = ({ tagsItems={arrayOfTags} selectedTags={selectedTags} openDelete={setOpenDelete} - handleScroll={() => { }} + handleScroll={() => {}} handleAddTag={handleAddTagQuestion} handlePrevStep={handlePrevStep} handleNextStep={handleNextStep} @@ -307,7 +301,7 @@ export const AmoCRMModal: FC = ({ arrayOfUsers, minifiedQuestions, arrayOfTags, - ], + ] ); const stepTitles = steps.map((step) => step.title); @@ -354,9 +348,7 @@ export const AmoCRMModal: FC = ({ top: "15px", }} > - + = ({ setStep={setStep} startRemoveAccount={() => setIsTryRemoveAccount(true)} /> - {openDelete !== null ? - ( - setOpenDelete(null)} - deleteItem={handleDeleteTagQuestion} - /> - ) - : - (<> - {isTryRemoveAccount && ( - setIsTryRemoveAccount(false)} - /> - )} + {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 || "нет данных"} + 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} /> @@ -407,8 +395,8 @@ export const AmoCRMModal: FC = ({ {!isSettingsBlock && !isTryRemoveAccount && ( {steps[step].component} )} - ) - } + + )} ); diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoLogin/AmoLogin.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoLogin/AmoLogin.tsx index 7e9bafa0..7772f82a 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoLogin/AmoLogin.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoLogin/AmoLogin.tsx @@ -130,9 +130,8 @@ export const AmoLogin: FC = ({ handleNextStep }) => { lineHeight: "1", }} > - После нажатия на кнопку - "Подключить", вас переадресует на страницу - подключения интеграции в ваш аккаунт AmoCRM. Пожалуйста, согласитесь - на всё, что мы предлагаем, иначе чуда не случится. + После нажатия на кнопку - "Подключить", вас переадресует на страницу подключения интеграции в ваш аккаунт + AmoCRM. Пожалуйста, согласитесь на всё, что мы предлагаем, иначе чуда не случится. diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoModalTitle/AmoModalTitle.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoModalTitle/AmoModalTitle.tsx index 5e31fe85..c429ad37 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoModalTitle/AmoModalTitle.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoModalTitle/AmoModalTitle.tsx @@ -19,7 +19,7 @@ export const AmoModalTitle: FC = ({ setIsSettingsBlock, isSettingsBlock, setStep, - startRemoveAccount + startRemoveAccount, }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); @@ -27,7 +27,7 @@ export const AmoModalTitle: FC = ({ const handleClick = useCallback(async () => { if (isSettingsBlock) { startRemoveAccount(); - setIsSettingsBlock(false) + setIsSettingsBlock(false); setStep(0); return; } diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/AmoQuestions.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/AmoQuestions.tsx index c105d919..61c701c6 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/AmoQuestions.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/AmoQuestions.tsx @@ -1,7 +1,4 @@ -import { - FC, - useState, -} from "react"; +import { FC, useState } from "react"; import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView"; import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView"; import { Box } from "@mui/material"; @@ -27,24 +24,24 @@ export const AmoQuestions: FC = ({ handleAddQuestion, handlePrevStep, handleNextStep, - openDelete + openDelete, }) => { const [isSelection, setIsSelection] = useState(false); const [activeScope, setActiveScope] = useState(null); const [selectedQuestion, setSelectedQuestion] = useState(null); const handleAdd = () => { - if (activeScope === null || selectedQuestion === null) return - setActiveScope(null) - handleAddQuestion(activeScope, selectedQuestion, "question") - } - const handleDelete = (id: string, scope:QuestionKeys) => { + if (activeScope === null || selectedQuestion === null) return; + setActiveScope(null); + handleAddQuestion(activeScope, selectedQuestion, "question"); + }; + const handleDelete = (id: string, scope: QuestionKeys) => { openDelete({ id, scope, - type: "question" - }) - } + type: "question", + }); + }; return ( = ({ ) : ( // Табличка = ({ fieldName, fieldValue, deleteH display: "flex", alignItems: "center", flexDirection: "column", - justifyContent: "space-between" + justifyContent: "space-between", }} > = ({ fieldName, fieldValue, deleteH diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/Item.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/Item.tsx index 12a92e25..dd7e748c 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/Item.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/Item.tsx @@ -11,13 +11,7 @@ type ItemProps = { data: SelectedTags | SelectedQuestions; deleteHC: (id: string, scope: QuestionKeys | TagKeys) => void; }; -export const Item: FC = ({ - items, - title, - onAddBtnClick, - data, - deleteHC -}) => { +export const Item: FC = ({ items, title, onAddBtnClick, data, deleteHC }) => { const theme = useTheme(); const titleDictionary = { @@ -28,7 +22,7 @@ export const Item: FC = ({ }; const translatedTitle = titleDictionary[title]; - const selectedOptions = data[title] + const selectedOptions = data[title]; return ( = ({ height: "40px", }} > - - {translatedTitle} - + {translatedTitle} {selectedOptions && selectedOptions.map((id, index) => ( e.id === id)?.title || id} + fieldName={items.find((e) => e.id === id)?.title || id} deleteHC={() => deleteHC(selectedOptions[index], title)} /> ))} diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx index e4be49e3..231bf759 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/ItemDetailsView/ItemDetailsView.tsx @@ -13,7 +13,7 @@ type ItemDetailsViewProps = { handleLargeBtn: () => void; selectedQuestions: SelectedQuestions; setActiveScope: (value: QuestionKeys | null) => void; - deleteHC: (id: string, scope:QuestionKeys) => void; + deleteHC: (id: string, scope: QuestionKeys) => void; }; export const ItemDetailsView: FC = ({ @@ -51,7 +51,7 @@ export const ItemDetailsView: FC = ({ flexWrap: "wrap", justifyContent: "start", }} - > + > {selectedQuestions && Object.keys(selectedQuestions).map((item) => ( void; - close: () => void; + deleteItem: () => void; + close: () => void; } -export const AmoDeleteTagQuestion: FC = ({ - close, - deleteItem, -}) => { - const theme = useTheme(); +export const AmoDeleteTagQuestion: FC = ({ close, deleteItem }) => { + const theme = useTheme(); - return ( - + Вы хотите удалить элемент? + + - - - - ) -} \ No newline at end of file + отмена + + + + + ); +}; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoTags/AmoTags.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoTags/AmoTags.tsx index 2c213fc8..14b5e969 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoTags/AmoTags.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoTags/AmoTags.tsx @@ -1,13 +1,9 @@ -import { - FC, - useState, -} from "react"; +import { FC, useState } from "react"; import { Box } from "@mui/material"; import { ItemsSelectionView } from "../AmoQuestions/ItemsSelectionView/ItemsSelectionView"; import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView"; import { MinifiedData, QuestionKeys, SelectedTags, TagKeys, TagQuestionHC } from "../types"; - type Props = { tagsItems: MinifiedData[] | []; selectedTags: SelectedTags; @@ -32,17 +28,17 @@ export const AmoTags: FC = ({ const [selectedTag, setSelectedTag] = useState(null); const handleAdd = () => { - if (activeScope === null || selectedTag === null) return - setActiveScope(null) - handleAddTag(activeScope, selectedTag, "tag") - } + if (activeScope === null || selectedTag === null) return; + setActiveScope(null); + handleAddTag(activeScope, selectedTag, "tag"); + }; const handleDelete = (id: string, scope: TagKeys) => { openDelete({ id, scope, - type: "tag" - }) - } + type: "tag", + }); + }; return ( void; setActiveScope: (value: TagKeys | null) => void; selectedTags: SelectedTags; - deleteHC: (id: string, scope:TagKeys) => void; + deleteHC: (id: string, scope: TagKeys) => void; }; export const TagsDetailsView: FC = ({ @@ -56,11 +56,7 @@ export const TagsDetailsView: FC = ({ alignItems: "center", }} > - - Результат - + Результат void; selectedPipeline: string | null; setSelectedPipeline: (value: string | null) => void; - }; export const Pipelines: FC = ({ diff --git a/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx b/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx index 12b7a07f..ee1614be 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx @@ -64,9 +64,7 @@ export const SettingItem: FC = ({ ); } if (step === 4) { - const isFilled = Object.values(selectedTags).some( - (array) => array.length > 0, - ); + const isFilled = Object.values(selectedTags).some((array) => array.length > 0); const status = isFilled ? "Заполнено" : "Не заполнено"; return ( @@ -96,9 +94,7 @@ export const SettingItem: FC = ({ ); } if (step === 5) { - const isFilled = Object.values(selectedQuestions).some( - (array) => array.length > 0, - ); + const isFilled = Object.values(selectedQuestions).some((array) => array.length > 0); const status = isFilled ? "Заполнено" : "Не заполнено"; return ( diff --git a/src/pages/IntegrationsPage/IntegrationsModal/types.ts b/src/pages/IntegrationsPage/IntegrationsModal/types.ts index 32be71e8..feaf1fef 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/types.ts +++ b/src/pages/IntegrationsPage/IntegrationsModal/types.ts @@ -12,7 +12,7 @@ export type MinifiedData = { }; export type TagQuestionHC = { - scope: QuestionKeys | TagKeys, - id: string, - type: "question" | "tag" -}; \ No newline at end of file + scope: QuestionKeys | TagKeys; + id: string; + type: "question" | "tag"; +}; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts b/src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts index 4efab264..2abf63fa 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts +++ b/src/pages/IntegrationsPage/IntegrationsModal/useAmoIntegration.ts @@ -1,256 +1,250 @@ import { useEffect, useState } from "react"; import { enqueueSnackbar } from "notistack"; -import type { - TagKeys, - SelectedTags, - QuestionKeys, - SelectedQuestions, - MinifiedData, -} from "./types"; +import type { TagKeys, SelectedTags, QuestionKeys, SelectedQuestions, MinifiedData } from "./types"; import { - AccountResponse, - getIntegrationRules, - getPipelines, - getSteps, - getTags, - getUsers, - getAccount, - FieldsRule, + AccountResponse, + getIntegrationRules, + getPipelines, + getSteps, + getTags, + getUsers, + getAccount, + FieldsRule, } from "@/api/integration"; const SIZE = 75; interface Props { - isModalOpen: boolean; - isTryRemoveAccount: boolean; - quizID: number; + isModalOpen: boolean; + isTryRemoveAccount: boolean; + quizID: number; } -export const useAmoIntegration = ({ - isModalOpen, - isTryRemoveAccount, - quizID, -}: Props) => { - const [isloadingPage, setIsLoadingPage] = useState(true); - const [firstRules, setFirstRules] = useState(false); - const [accountInfo, setAccountInfo] = useState(null); +export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID }: Props) => { + const [isloadingPage, setIsLoadingPage] = useState(true); + const [firstRules, setFirstRules] = useState(false); + const [accountInfo, setAccountInfo] = useState(null); - const [arrayOfPipelines, setArrayOfPipelines] = useState([]); - const [arrayOfPipelinesSteps, setArrayOfPipelinesSteps] = useState([]); - const [arrayOfUsers, setArrayOfUsers] = useState([]); - const [arrayOfTags, setArrayOfTags] = useState([]); + const [arrayOfPipelines, setArrayOfPipelines] = useState([]); + const [arrayOfPipelinesSteps, setArrayOfPipelinesSteps] = useState([]); + const [arrayOfUsers, setArrayOfUsers] = useState([]); + const [arrayOfTags, setArrayOfTags] = useState([]); - const [selectedPipeline, setSelectedPipeline] = useState(null); - const [selectedPipelineStep, setSelectedPipelineStep] = useState(null); - const [selectedDealUser, setSelectedDealPerformer] = useState(null); + const [selectedPipeline, setSelectedPipeline] = useState(null); + const [selectedPipelineStep, setSelectedPipelineStep] = useState(null); + const [selectedDealUser, setSelectedDealPerformer] = useState(null); - const [questionsBackend, setQuestionsBackend] = useState({} as FieldsRule); - const [selectedTags, setSelectedTags] = useState({ + const [questionsBackend, setQuestionsBackend] = useState({} as FieldsRule); + const [selectedTags, setSelectedTags] = useState({ + Lead: [], + Contact: [], + Company: [], + Customer: [], + }); + const [selectedQuestions, setSelectedQuestions] = useState({ + Lead: [], + Company: [], + Customer: [], + }); + + const [pageOfPipelines, setPageOfPipelines] = useState(1); + const [pageOfPipelinesSteps, setPageOfPipelinesSteps] = useState(1); + const [pageOfUsers, setPageOfUsers] = useState(1); + const [pageOfTags, setPageOfTags] = useState(1); + + useEffect(() => { + if (isModalOpen && !isTryRemoveAccount) { + const fetchAccountRules = async () => { + setIsLoadingPage(true); + const [account, accountError] = await getAccount(); + + if (accountError) { + if (!accountError.includes("Not Found")) enqueueSnackbar(accountError); + setAccountInfo(null); + } + if (account) { + setAccountInfo(account); + } + const [settingsResponse, rulesError] = await getIntegrationRules(quizID.toString()); + + if (rulesError) { + if (rulesError === "first") setFirstRules(true); + if (!rulesError.includes("Not Found") && !rulesError.includes("first")) enqueueSnackbar(rulesError); + } + if (settingsResponse) { + if (settingsResponse.PipelineID) setSelectedPipeline(settingsResponse.PipelineID.toString()); + if (settingsResponse.StepID) setSelectedPipelineStep(settingsResponse.StepID.toString()); + if (settingsResponse.PerformerID) setSelectedDealPerformer(settingsResponse.PerformerID.toString()); + + if (Boolean(settingsResponse.FieldsRule) && Object.keys(settingsResponse?.FieldsRule).length > 0) { + const gottenQuestions = { ...selectedQuestions }; + setQuestionsBackend(settingsResponse.FieldsRule); + + for (let key in settingsResponse.FieldsRule) { + if ( + settingsResponse.FieldsRule[key as QuestionKeys] !== null && + Array.isArray(settingsResponse.FieldsRule[key as QuestionKeys]) + ) { + const gottenList = settingsResponse.FieldsRule[key as QuestionKeys]; + + if (gottenList !== null) gottenQuestions[key as QuestionKeys] = Object.keys(gottenList[0].QuestionID); + } + } + setSelectedQuestions(gottenQuestions); + } + + if (Boolean(settingsResponse.TagsToAdd) && Object.keys(settingsResponse.TagsToAdd).length > 0) { + const gottenTags = { ...selectedTags }; + + for (let key in settingsResponse.TagsToAdd) { + const gottenList = settingsResponse.TagsToAdd[key as TagKeys]; + if (gottenList !== null && Array.isArray(gottenList)) { + gottenTags[key as TagKeys] = gottenList.map((e) => e.toString()); + } + } + setSelectedTags(gottenTags); + } + setFirstRules(false); + } + setIsLoadingPage(false); + }; + + fetchAccountRules(); + } else { + //Вот по-хорошему компонент должен размонтироваться и стереть всё. Но это будет сделано позже + setArrayOfPipelines([]); + setArrayOfPipelinesSteps([]); + setArrayOfUsers([]); + setArrayOfTags([]); + setSelectedPipeline(null); + setSelectedPipelineStep(null); + setSelectedDealPerformer(null); + setQuestionsBackend({} as FieldsRule); + setSelectedTags({ Lead: [], Contact: [], Company: [], Customer: [], - }); - const [selectedQuestions, setSelectedQuestions] = useState({ + }); + setSelectedQuestions({ Lead: [], Company: [], Customer: [], + }); + setPageOfPipelines(1); + setPageOfPipelinesSteps(1); + setPageOfUsers(1); + setPageOfTags(1); + } + }, [isModalOpen, isTryRemoveAccount]); + + useEffect(() => { + getPipelines({ + page: pageOfPipelines, + size: SIZE, + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedPipelines: MinifiedData[] = []; + + response.items.forEach((step) => { + minifiedPipelines.push({ + id: step.AmoID.toString(), + title: step.Name, + }); + }); + setArrayOfPipelines((prevItems) => [...prevItems, ...minifiedPipelines]); + setPageOfPipelinesSteps(1); + } }); + }, [pageOfPipelines]); + useEffect(() => { + const oldData = pageOfPipelinesSteps === 1 ? [] : arrayOfPipelinesSteps; + if (selectedPipeline !== null) + getSteps({ + page: pageOfPipelinesSteps, + size: SIZE, + pipelineId: Number(selectedPipeline), + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedSteps: MinifiedData[] = []; - const [pageOfPipelines, setPageOfPipelines] = useState(1); - const [pageOfPipelinesSteps, setPageOfPipelinesSteps] = useState(1); - const [pageOfUsers, setPageOfUsers] = useState(1); - const [pageOfTags, setPageOfTags] = useState(1); - - useEffect(() => { - if (isModalOpen && !isTryRemoveAccount) { - const fetchAccountRules = async () => { - setIsLoadingPage(true) - const [account, accountError] = await getAccount(); - - if (accountError) { - if (!accountError.includes("Not Found")) enqueueSnackbar(accountError) - setAccountInfo(null); - } - if (account) { - setAccountInfo(account); - } - const [settingsResponse, rulesError] = await getIntegrationRules(quizID.toString()); - - if (rulesError) { - if (rulesError === "first") setFirstRules(true); - if (!rulesError.includes("Not Found") && !rulesError.includes("first")) enqueueSnackbar(rulesError); - } - if (settingsResponse) { - if (settingsResponse.PipelineID) setSelectedPipeline(settingsResponse.PipelineID.toString()) - if (settingsResponse.StepID) setSelectedPipelineStep(settingsResponse.StepID.toString()) - if (settingsResponse.PerformerID) setSelectedDealPerformer(settingsResponse.PerformerID.toString()) - - if (Boolean(settingsResponse.FieldsRule) && - Object.keys(settingsResponse?.FieldsRule).length > 0) { - const gottenQuestions = { ...selectedQuestions } - setQuestionsBackend(settingsResponse.FieldsRule) - - for (let key in settingsResponse.FieldsRule) { - if (settingsResponse.FieldsRule[key as QuestionKeys] !== null && Array.isArray(settingsResponse.FieldsRule[key as QuestionKeys])) { - - const gottenList = settingsResponse.FieldsRule[key as QuestionKeys] - - if (gottenList !== null) - gottenQuestions[key as QuestionKeys] = Object.keys(gottenList[0].QuestionID) - } - } - setSelectedQuestions(gottenQuestions) - } - - if (Boolean(settingsResponse.TagsToAdd) && - Object.keys(settingsResponse.TagsToAdd).length > 0) { - const gottenTags = { ...selectedTags } - - for (let key in settingsResponse.TagsToAdd) { - const gottenList = settingsResponse.TagsToAdd[key as TagKeys] - if (gottenList !== null && Array.isArray(gottenList)) { - gottenTags[key as TagKeys] = gottenList.map(e => e.toString()) - } - } - setSelectedTags(gottenTags) - } - setFirstRules(false); - } - setIsLoadingPage(false) - }; - - fetchAccountRules(); - } else { - //Вот по-хорошему компонент должен размонтироваться и стереть всё. Но это будет сделано позже - setArrayOfPipelines([]); - setArrayOfPipelinesSteps([]); - setArrayOfUsers([]); - setArrayOfTags([]); - setSelectedPipeline(null); - setSelectedPipelineStep(null); - setSelectedDealPerformer(null); - setQuestionsBackend({} as FieldsRule); - setSelectedTags({ - Lead: [], - Contact: [], - Company: [], - Customer: [], + response.items.forEach((step) => { + minifiedSteps.push({ + id: step.AmoID.toString(), + title: step.Name, }); - setSelectedQuestions({ - Lead: [], - Company: [], - Customer: [], - }); - setPageOfPipelines(1); - setPageOfPipelinesSteps(1); - setPageOfUsers(1); - setPageOfTags(1); + }); + setArrayOfPipelinesSteps([...oldData, ...minifiedSteps]); } - }, [isModalOpen, isTryRemoveAccount]); + }); + }, [selectedPipeline, pageOfPipelinesSteps]); + useEffect(() => { + getUsers({ + page: pageOfUsers, + size: SIZE, + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedUsers: MinifiedData[] = []; - useEffect(() => { - getPipelines({ - page: pageOfPipelines, - size: SIZE, - }).then(([response]) => { - if (response && response.items !== null) { - const minifiedPipelines: MinifiedData[] = [] - - response.items.forEach((step) => { - minifiedPipelines.push({ - id: step.AmoID.toString(), - title: step.Name - }) - }) - setArrayOfPipelines((prevItems) => [...prevItems, ...minifiedPipelines]); - setPageOfPipelinesSteps(1) - } - }) - }, [pageOfPipelines]) - useEffect(() => { - const oldData = pageOfPipelinesSteps === 1 ? [] : arrayOfPipelinesSteps - if (selectedPipeline !== null) - getSteps({ - page: pageOfPipelinesSteps, - size: SIZE, - pipelineId: Number(selectedPipeline), - }).then(([response]) => { - if (response && response.items !== null) { - const minifiedSteps: MinifiedData[] = [] - - response.items.forEach((step) => { - minifiedSteps.push({ - id: step.AmoID.toString(), - title: step.Name - }) - }) - setArrayOfPipelinesSteps([...oldData, ...minifiedSteps]); - } - }); - }, [selectedPipeline, pageOfPipelinesSteps]) - useEffect(() => { - getUsers({ - page: pageOfUsers, - size: SIZE, - }).then(([response]) => { - if (response && response.items !== null) { - const minifiedUsers: MinifiedData[] = [] - - response.items.forEach((step) => { - minifiedUsers.push({ - id: step.amoUserID.toString(), - title: step.name - }) - }) - setArrayOfUsers((prevItems) => [...prevItems, ...minifiedUsers]); - } + response.items.forEach((step) => { + minifiedUsers.push({ + id: step.amoUserID.toString(), + title: step.name, + }); }); - }, [pageOfUsers]) - useEffect(() => { - getTags({ - page: pageOfTags, - size: SIZE, - }).then(([response]) => { - if (response && response.items !== null) { - const minifiedTags: MinifiedData[] = [] + setArrayOfUsers((prevItems) => [...prevItems, ...minifiedUsers]); + } + }); + }, [pageOfUsers]); + useEffect(() => { + getTags({ + page: pageOfTags, + size: SIZE, + }).then(([response]) => { + if (response && response.items !== null) { + const minifiedTags: MinifiedData[] = []; - response.items.forEach((step) => { - minifiedTags.push({ - id: step.AmoID.toString(), - title: step.Name, - entity: step.Entity === "leads" ? "Lead" : - step.Entity === "contacts" ? "Contact" : - step.Entity === "companies" ? "Company" : "Customer" - }) - }) - setArrayOfTags((prevItems) => [...prevItems, ...minifiedTags]); - } + response.items.forEach((step) => { + minifiedTags.push({ + id: step.AmoID.toString(), + title: step.Name, + entity: + step.Entity === "leads" + ? "Lead" + : step.Entity === "contacts" + ? "Contact" + : step.Entity === "companies" + ? "Company" + : "Customer", + }); }); - }, [pageOfTags]) + setArrayOfTags((prevItems) => [...prevItems, ...minifiedTags]); + } + }); + }, [pageOfTags]); - return ({ - isloadingPage, - firstRules, - accountInfo, - arrayOfPipelines, - arrayOfPipelinesSteps, - arrayOfUsers, - arrayOfTags, - selectedPipeline, - setSelectedPipeline, - selectedPipelineStep, - setSelectedPipelineStep, - selectedDealUser, - setSelectedDealPerformer, - questionsBackend, - selectedTags, - setSelectedTags, - selectedQuestions, - setSelectedQuestions, - setPageOfPipelines, - setPageOfPipelinesSteps, - setPageOfUsers, - setPageOfTags, - }) -} \ No newline at end of file + return { + isloadingPage, + firstRules, + accountInfo, + arrayOfPipelines, + arrayOfPipelinesSteps, + arrayOfUsers, + arrayOfTags, + selectedPipeline, + setSelectedPipeline, + selectedPipelineStep, + setSelectedPipelineStep, + selectedDealUser, + setSelectedDealPerformer, + questionsBackend, + selectedTags, + setSelectedTags, + selectedQuestions, + setSelectedQuestions, + setPageOfPipelines, + setPageOfPipelinesSteps, + setPageOfUsers, + setPageOfTags, + }; +}; diff --git a/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx b/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx index 9a4d61aa..88390845 100644 --- a/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx +++ b/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx @@ -11,13 +11,13 @@ import { useCurrentQuiz } from "@/stores/quizes/hooks"; const AnalyticsModal = lazy(() => import("./AnalyticsModal/AnalyticsModal").then((module) => ({ default: module.AnalyticsModal, - })), + })) ); const AmoCRMModal = lazy(() => import("../IntegrationsModal/AmoCRMModal").then((module) => ({ default: module.AmoCRMModal, - })), + })) ); type PartnersBoardProps = { diff --git a/src/pages/Questions/PageOptions/PageOptions.tsx b/src/pages/Questions/PageOptions/PageOptions.tsx index 654e0ce6..79914353 100644 --- a/src/pages/Questions/PageOptions/PageOptions.tsx +++ b/src/pages/Questions/PageOptions/PageOptions.tsx @@ -58,7 +58,7 @@ export default function PageOptions({ disableInput, question }: Props) { diff --git a/src/pages/Questions/UploadVideoModal.tsx b/src/pages/Questions/UploadVideoModal.tsx index 0adb6d0a..374c86f2 100644 --- a/src/pages/Questions/UploadVideoModal.tsx +++ b/src/pages/Questions/UploadVideoModal.tsx @@ -1,16 +1,8 @@ -import { - Box, - Button, - ButtonBase, - Modal, - Typography, - useTheme, -} from "@mui/material"; -import SelectableButton from "@ui_kit/SelectableButton"; +import { Box, Button, ButtonBase, Dialog, Typography, useTheme } from "@mui/material"; import CustomTextField from "@ui_kit/CustomTextField"; +import SelectableButton from "@ui_kit/SelectableButton"; import { useState } from "react"; import UploadIcon from "../../assets/icons/UploadIcon"; - import type { DragEvent } from "react"; type BackgroundTypeModal = "linkVideo" | "ownVideo"; @@ -18,18 +10,12 @@ type BackgroundTypeModal = "linkVideo" | "ownVideo"; type HelpQuestionsProps = { open: boolean; onClose: () => void; - video: string; + video: string | null; onUpload: (number: string) => void; }; -export const UploadVideoModal = ({ - open, - onClose, - video, - onUpload, -}: HelpQuestionsProps) => { - const [backgroundTypeModal, setBackgroundTypeModal] = - useState("linkVideo"); +export default function UploadVideoModal({ open, onClose, video, onUpload }: HelpQuestionsProps) { + const [backgroundTypeModal, setBackgroundTypeModal] = useState("linkVideo"); const theme = useTheme(); const handleDrop = (event: DragEvent) => { @@ -42,118 +28,102 @@ export const UploadVideoModal = ({ }; return ( - - + - + Видео можно вставить с любого хостинга: YouTube, Vimeo или загрузить собственное + + - - - setBackgroundTypeModal("linkVideo")} - sx={{ maxWidth: "170px", padding: "10px" }} - > - Ссылка на видео - - setBackgroundTypeModal("ownVideo")} - sx={{ maxWidth: "170px", padding: "10px" }} - > - Загрузить свое - - - {backgroundTypeModal === "linkVideo" ? ( - - - Ссылка на видео - - onUpload(target.value || " ")} - /> - - ) : ( - - - Загрузите видео - - - { - if (target.files?.length) { - onUpload(URL.createObjectURL(target.files[0] || " ")); - } - }} - hidden - accept="video/*" - multiple - type="file" - /> - ) => - event.preventDefault() - } - onDrop={handleDrop} - sx={{ - width: "580px", - padding: "33px 33px 33px 50px", - display: "flex", - alignItems: "center", - backgroundColor: theme.palette.background.default, - border: `1px solid ${theme.palette.grey2.main}`, - borderRadius: "8px", - gap: "50px", - }} - > - - - - Добавить видео - - - Принимает .mp4 и .mov формат — максимум 100мб - - - - - - )} + Готово + - + + setBackgroundTypeModal("linkVideo")} + sx={{ maxWidth: "170px", padding: "10px" }} + > + Ссылка на видео + + setBackgroundTypeModal("ownVideo")} + sx={{ maxWidth: "170px", padding: "10px" }} + > + Загрузить свое + + + {backgroundTypeModal === "linkVideo" ? ( + + Ссылка на видео + onUpload(target.value || " ")} + /> + + ) : ( + + Загрузите видео + + { + if (target.files?.length) { + onUpload(URL.createObjectURL(target.files[0] || " ")); + } + }} + hidden + accept="video/*" + multiple + type="file" + /> + ) => event.preventDefault()} + onDrop={handleDrop} + sx={{ + width: "580px", + padding: "33px 33px 33px 50px", + display: "flex", + alignItems: "center", + backgroundColor: theme.palette.background.default, + border: `1px solid ${theme.palette.grey2.main}`, + borderRadius: "8px", + gap: "50px", + }} + > + + + Добавить видео + Принимает .mp4 и .mov формат — максимум 100мб + + + + + )} + ); -}; +} diff --git a/src/pages/Questions/helpQuestions.tsx b/src/pages/Questions/helpQuestions.tsx index ede9b174..c811bccf 100644 --- a/src/pages/Questions/helpQuestions.tsx +++ b/src/pages/Questions/helpQuestions.tsx @@ -5,7 +5,7 @@ import SelectableButton from "@ui_kit/SelectableButton"; import UploadBox from "@ui_kit/UploadBox"; import { memo, useState } from "react"; import UploadIcon from "../../assets/icons/UploadIcon"; -import { UploadVideoModal } from "./UploadVideoModal"; +import UploadVideoModal from "./UploadVideoModal"; type BackgroundType = "text" | "video"; @@ -15,11 +15,7 @@ type HelpQuestionsProps = { hintText: string; }; -const HelpQuestions = memo(function ({ - questionId, - hintVideo, - hintText, -}) { +const HelpQuestions = memo(function ({ questionId, hintVideo, hintText }) { const [open, setOpen] = useState(false); const [backgroundType, setBackgroundType] = useState("text"); @@ -71,15 +67,17 @@ const HelpQuestions = memo(function ({ ) : ( - - Загрузите видео - + Загрузите видео setOpen(true)} sx={{ justifyContent: "flex-start" }} > {hintVideo ? ( -