diff --git a/src/assets/icons/logo/Postback.tsx b/src/assets/icons/logo/Postback.tsx
new file mode 100644
index 00000000..23956784
--- /dev/null
+++ b/src/assets/icons/logo/Postback.tsx
@@ -0,0 +1,15 @@
+import { Box, SxProps } from "@mui/material";
+
+export default (sx: SxProps) => (
+
+
+
+);
\ No newline at end of file
diff --git a/src/assets/icons/logo/PostbackPC.tsx b/src/assets/icons/logo/PostbackPC.tsx
new file mode 100644
index 00000000..1dff7213
--- /dev/null
+++ b/src/assets/icons/logo/PostbackPC.tsx
@@ -0,0 +1,19 @@
+import { Box, SxProps } from "@mui/material";
+
+export default (sx: SxProps) => (
+
+
+
+
+
+);
\ No newline at end of file
diff --git a/src/assets/icons/logo/zapier.png b/src/assets/icons/logo/zapier.png
new file mode 100644
index 00000000..53f20b39
Binary files /dev/null and b/src/assets/icons/logo/zapier.png differ
diff --git a/src/model/quizSettings.ts b/src/model/quizSettings.ts
index 50050301..f04e8151 100644
--- a/src/model/quizSettings.ts
+++ b/src/model/quizSettings.ts
@@ -69,6 +69,8 @@ export type QuizTheme =
export enum QuizMetricType {
yandex = "yandexMetricsNumber",
vk = "vkMetricsNumber",
+ zapier = "zapierIntegration",
+ postback = "postbackIntegration",
}
export type FormContactFieldName = "name" | "email" | "phone" | "text" | "address";
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Postback/index.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Postback/index.tsx
new file mode 100644
index 00000000..3b7af294
--- /dev/null
+++ b/src/pages/IntegrationsPage/IntegrationsModal/Postback/index.tsx
@@ -0,0 +1,75 @@
+import { FC } from "react";
+import { Dialog, IconButton, Typography, useMediaQuery, useTheme, Box } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Quiz } from "@/model/quiz/quiz";
+
+type PostbackModalProps = {
+ isModalOpen: boolean;
+ handleCloseModal: () => void;
+ companyName: string | null;
+ quiz: Quiz;
+};
+
+export const PostbackModal: FC = ({
+ isModalOpen,
+ handleCloseModal,
+ companyName,
+ quiz
+}) => {
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(600));
+ const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/Zapier/index.tsx b/src/pages/IntegrationsPage/IntegrationsModal/Zapier/index.tsx
new file mode 100644
index 00000000..39483a96
--- /dev/null
+++ b/src/pages/IntegrationsPage/IntegrationsModal/Zapier/index.tsx
@@ -0,0 +1,75 @@
+import { FC } from "react";
+import { Dialog, IconButton, Typography, useMediaQuery, useTheme, Box } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Quiz } from "@/model/quiz/quiz";
+
+type ZapierModalProps = {
+ isModalOpen: boolean;
+ handleCloseModal: () => void;
+ companyName: string | null;
+ quiz: Quiz;
+};
+
+export const ZapierModal: FC = ({
+ isModalOpen,
+ handleCloseModal,
+ companyName,
+ quiz
+}) => {
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(600));
+ const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/src/pages/IntegrationsPage/IntegrationsPage.tsx b/src/pages/IntegrationsPage/IntegrationsPage.tsx
index b74e3650..ce2af29a 100644
--- a/src/pages/IntegrationsPage/IntegrationsPage.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsPage.tsx
@@ -27,6 +27,8 @@ export const IntegrationsPage = ({
>(null);
const [isAmoCrmModalOpen, setIsAmoCrmModalOpen] = useState(false);
+ const [isZapierModalOpen, setIsZapierModalOpen] = useState(false);
+ const [isPostbackModalOpen, setIsPostbackModalOpen] = useState(false);
useEffect(() => {
if (editQuizId === null) navigate("/list");
@@ -44,6 +46,12 @@ export const IntegrationsPage = ({
const handleCloseAmoSRMModal = () => {
setIsAmoCrmModalOpen(false);
};
+ const handleCloseZapierModal = () => {
+ setIsZapierModalOpen(false);
+ };
+ const handleClosePostbackModal = () => {
+ setIsPostbackModalOpen(false);
+ };
return (
<>
@@ -60,7 +68,7 @@ export const IntegrationsPage = ({
>
Интеграции
@@ -73,6 +81,12 @@ export const IntegrationsPage = ({
setIsAmoCrmModalOpen={setIsAmoCrmModalOpen}
isAmoCrmModalOpen={isAmoCrmModalOpen}
handleCloseAmoSRMModal={handleCloseAmoSRMModal}
+ setIsZapierModalOpen={setIsZapierModalOpen}
+ isZapierModalOpen={isZapierModalOpen}
+ handleCloseZapierModal={handleCloseZapierModal}
+ setIsPostbackModalOpen={setIsPostbackModalOpen}
+ isPostbackModalOpen={isPostbackModalOpen}
+ handleClosePostbackModal={handleClosePostbackModal}
/>
diff --git a/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx b/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx
index 6612b444..6cb28b6d 100644
--- a/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx
+++ b/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx
@@ -1,13 +1,13 @@
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
import React, { FC, lazy, Suspense } from "react";
-import { ServiceButton } from "./ServiceButton/ServiceButton";
+import { ServiceButton } from "./buttons/ServiceButton";
+import { ZapierButton } from "./buttons/ZapierButton";
+import { PostbackButton } from "./buttons/PostbackButton";
import { YandexMetricaLogo } from "../mocks/YandexMetricaLogo";
-// import AnalyticsModal from "./AnalyticsModal/AnalyticsModal";
import { VKPixelLogo } from "../mocks/VKPixelLogo";
import { QuizMetricType } from "@model/quizSettings";
import { AmoCRMLogo } from "../mocks/AmoCRMLogo";
import { useCurrentQuiz } from "@/stores/quizes/hooks";
-import { useUserStore } from "@/stores/user";
const AnalyticsModal = lazy(() =>
import("./AnalyticsModal/AnalyticsModal").then((module) => ({
@@ -21,6 +21,18 @@ const AmoCRMModal = lazy(() =>
}))
);
+const ZapierModal = lazy(() =>
+ import("../IntegrationsModal/Zapier").then((module) => ({
+ default: module.ZapierModal,
+ }))
+);
+
+const PostbackModal = lazy(() =>
+ import("../IntegrationsModal/Postback").then((module) => ({
+ default: module.PostbackModal,
+ }))
+);
+
type PartnersBoardProps = {
setIsModalOpen: (value: boolean) => void;
companyName: keyof typeof QuizMetricType | null;
@@ -30,6 +42,12 @@ type PartnersBoardProps = {
setIsAmoCrmModalOpen: (value: boolean) => void;
isAmoCrmModalOpen: boolean;
handleCloseAmoSRMModal: () => void;
+ setIsZapierModalOpen: (value: boolean) => void;
+ isZapierModalOpen: boolean;
+ handleCloseZapierModal: () => void;
+ setIsPostbackModalOpen: (value: boolean) => void;
+ isPostbackModalOpen: boolean;
+ handleClosePostbackModal: () => void;
};
export const PartnersBoard: FC = ({
@@ -41,13 +59,31 @@ export const PartnersBoard: FC = ({
setIsAmoCrmModalOpen,
isAmoCrmModalOpen,
handleCloseAmoSRMModal,
+ setIsZapierModalOpen,
+ isZapierModalOpen,
+ handleCloseZapierModal,
+ setIsPostbackModalOpen,
+ isPostbackModalOpen,
+ handleClosePostbackModal,
}) => {
const theme = useTheme();
- const isMobile = useMediaQuery(theme.breakpoints.down(600));
-
const quiz = useCurrentQuiz();
- const user = useUserStore();
+ const sectionTitleStyles = {
+ textAlign: { xs: "start", sm: "start", md: "start" } as const,
+ lineHeight: "1",
+ marginBottom: "12px",
+ marginTop: "20px",
+ color: theme.palette.grey3.main,
+ fontSize: "18px",
+ };
+
+ const containerStyles = {
+ display: "flex",
+ flexWrap: "wrap",
+ justifyContent: { xs: "start", sm: "start", md: "start" },
+ gap: { xs: "15px", md: "20px" },
+ };
return (
= ({
}}
>
- <>
-
- CRM
-
-
- }
- setIsModalOpen={setIsAmoCrmModalOpen}
- setCompanyName={setCompanyName}
- name={"amoCRM"}
- />
-
-
+ CRM
+
+
+ }
+ setIsModalOpen={setIsAmoCrmModalOpen}
+ setCompanyName={setCompanyName}
+ name={"amoCRM"}
+ />
+
+
+
Аналитика
-
+
}
setIsModalOpen={setIsModalOpen}
@@ -114,9 +129,24 @@ export const PartnersBoard: FC = ({
name={"vk"}
setIsModalOpen={setIsModalOpen}
setCompanyName={setCompanyName}
- >
+ />
+
+
+
+ Автоматизация
+
+
+
+
+
{companyName && (
= ({
isModalOpen={isAmoCrmModalOpen}
handleCloseModal={handleCloseAmoSRMModal}
companyName={companyName}
- quiz={quiz}
+ quiz={quiz!}
+ />
+
+ )}
+ {companyName && isZapierModalOpen && (
+
+
+
+ )}
+ {companyName && isPostbackModalOpen && (
+
+
)}
diff --git a/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx b/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx
deleted file mode 100644
index 4773e19f..00000000
--- a/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Box, Typography, useTheme } from "@mui/material";
-import { FC } from "react";
-import { QuizMetricType } from "@model/quizSettings";
-
-type PartnerItemProps = {
- setIsModalOpen: (value: boolean) => void;
- setCompanyName: (value: keyof typeof QuizMetricType) => void;
- logo?: JSX.Element;
- title?: string;
- name: string;
-};
-
-export const ServiceButton: FC = ({
- setIsModalOpen,
- logo,
- title,
- name,
- setCompanyName,
-}) => {
- const theme = useTheme();
-
- const handleClick = () => {
- setCompanyName(name as keyof typeof QuizMetricType);
- setIsModalOpen(true);
- };
-
- return (
- <>
-
- {logo && logo}
-
- {title && title}
-
-
-
- );
-};
diff --git a/src/pages/IntegrationsPage/PartnersBoard/buttons/IntegrationButton.tsx b/src/pages/IntegrationsPage/PartnersBoard/buttons/IntegrationButton.tsx
new file mode 100644
index 00000000..fe22cfd0
--- /dev/null
+++ b/src/pages/IntegrationsPage/PartnersBoard/buttons/IntegrationButton.tsx
@@ -0,0 +1,53 @@
+import { Box } from "@mui/material";
+import { FC, useState, ReactNode } from "react";
+
+type IntegrationButtonProps = {
+ children: ReactNode;
+ onClick: () => void;
+ padding?: string;
+};
+
+export const IntegrationButton: FC = ({
+ children,
+ onClick,
+ padding = "0 20px",
+}) => {
+ const [isPressed, setIsPressed] = useState(false);
+
+ const handleMouseDown = () => setIsPressed(true);
+ const handleMouseUp = () => setIsPressed(false);
+ const handleMouseLeave = () => setIsPressed(false);
+
+ return (
+
+ {children}
+
+ );
+};
\ No newline at end of file
diff --git a/src/pages/IntegrationsPage/PartnersBoard/buttons/PostbackButton.tsx b/src/pages/IntegrationsPage/PartnersBoard/buttons/PostbackButton.tsx
new file mode 100644
index 00000000..faf90d05
--- /dev/null
+++ b/src/pages/IntegrationsPage/PartnersBoard/buttons/PostbackButton.tsx
@@ -0,0 +1,32 @@
+import { Box } from "@mui/material";
+import { FC } from "react";
+import { QuizMetricType } from "@model/quizSettings";
+import PostbackDefault from "@/assets/icons/logo/Postback";
+import PostbackPC from "@/assets/icons/logo/PostbackPC";
+import { IntegrationButton } from "./IntegrationButton";
+
+type PostbackButtonProps = {
+ setIsModalOpen: (value: boolean) => void;
+ setCompanyName: (value: keyof typeof QuizMetricType) => void;
+};
+
+export const PostbackButton: FC = ({
+ setIsModalOpen,
+ setCompanyName,
+}) => {
+ const handleClick = () => {
+ setCompanyName("postback" as keyof typeof QuizMetricType);
+ setIsModalOpen(true);
+ };
+
+ return (
+
+ <>
+ {/* Иконка монитора */}
+
+ {/* Текст Postback */}
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/pages/IntegrationsPage/PartnersBoard/buttons/ServiceButton.tsx b/src/pages/IntegrationsPage/PartnersBoard/buttons/ServiceButton.tsx
new file mode 100644
index 00000000..88a92fce
--- /dev/null
+++ b/src/pages/IntegrationsPage/PartnersBoard/buttons/ServiceButton.tsx
@@ -0,0 +1,40 @@
+import { Typography } from "@mui/material";
+import { FC } from "react";
+import { QuizMetricType } from "@model/quizSettings";
+import { IntegrationButton } from "./IntegrationButton";
+
+type PartnerItemProps = {
+ setIsModalOpen: (value: boolean) => void;
+ setCompanyName: (value: keyof typeof QuizMetricType) => void;
+ logo?: JSX.Element;
+ title?: string;
+ name: string;
+};
+
+export const ServiceButton: FC = ({
+ setIsModalOpen,
+ logo,
+ title,
+ name,
+ setCompanyName,
+}) => {
+ const handleClick = () => {
+ setCompanyName(name as keyof typeof QuizMetricType);
+ setIsModalOpen(true);
+ };
+
+ return (
+
+ {logo && logo}
+
+ {title && title}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/pages/IntegrationsPage/PartnersBoard/buttons/ZapierButton.tsx b/src/pages/IntegrationsPage/PartnersBoard/buttons/ZapierButton.tsx
new file mode 100644
index 00000000..8abcc70a
--- /dev/null
+++ b/src/pages/IntegrationsPage/PartnersBoard/buttons/ZapierButton.tsx
@@ -0,0 +1,35 @@
+import { Box } from "@mui/material";
+import { FC } from "react";
+import { QuizMetricType } from "@model/quizSettings";
+import zapierLogo from "@/assets/icons/logo/zapier.png";
+import { IntegrationButton } from "./IntegrationButton";
+
+type ZapierButtonProps = {
+ setIsModalOpen: (value: boolean) => void;
+ setCompanyName: (value: keyof typeof QuizMetricType) => void;
+};
+
+export const ZapierButton: FC = ({
+ setIsModalOpen,
+ setCompanyName,
+}) => {
+ const handleClick = () => {
+ setCompanyName("zapier" as keyof typeof QuizMetricType);
+ setIsModalOpen(true);
+ };
+
+ return (
+
+
+
+ );
+};
\ No newline at end of file