From 129b7c0c497a45a964f28c0f54bb52f62d32512b Mon Sep 17 00:00:00 2001 From: nflnkr Date: Tue, 30 Apr 2024 20:05:44 +0300 Subject: [PATCH 1/4] refactor quiz install page extract components replace png images with svg components --- src/assets/AutoOpen.png | Bin 1298 -> 0 bytes src/assets/Bunner.png | Bin 1108 -> 0 bytes src/assets/InBodySite.png | Bin 1222 -> 0 bytes src/assets/OnButton.png | Bin 1425 -> 0 bytes src/assets/Widget.png | Bin 1225 -> 0 bytes src/assets/icons/questionsPage/arrowLeft.tsx | 2 +- src/pages/InstallQuiz/InstallQuiz.tsx | 466 +----------------- .../InstallationStepButton.tsx | 31 ++ .../QuizInstallationCard.tsx | 207 ++++++++ .../previewIcons/BannerWidgetPreview.tsx | 49 ++ .../previewIcons/ButtonWidgetPreview.tsx | 50 ++ .../previewIcons/ContainerWidgetPreview.tsx | 50 ++ .../previewIcons/PopupWidgetPreview.tsx | 54 ++ .../previewIcons/SideWidgetPreview.tsx | 50 ++ src/pages/InstallQuiz/QuizLinkCard.tsx | 209 ++++++++ 15 files changed, 707 insertions(+), 461 deletions(-) delete mode 100644 src/assets/AutoOpen.png delete mode 100644 src/assets/Bunner.png delete mode 100644 src/assets/InBodySite.png delete mode 100644 src/assets/OnButton.png delete mode 100644 src/assets/Widget.png create mode 100644 src/pages/InstallQuiz/QuizInstallationCard/InstallationStepButton.tsx create mode 100644 src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx create mode 100644 src/pages/InstallQuiz/QuizInstallationCard/previewIcons/BannerWidgetPreview.tsx create mode 100644 src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ButtonWidgetPreview.tsx create mode 100644 src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ContainerWidgetPreview.tsx create mode 100644 src/pages/InstallQuiz/QuizInstallationCard/previewIcons/PopupWidgetPreview.tsx create mode 100644 src/pages/InstallQuiz/QuizInstallationCard/previewIcons/SideWidgetPreview.tsx create mode 100644 src/pages/InstallQuiz/QuizLinkCard.tsx diff --git a/src/assets/AutoOpen.png b/src/assets/AutoOpen.png deleted file mode 100644 index 3ec88409d63d4f49ef4b77290255d7c8ae117800..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1298 zcmeAS@N?(olHy`uVBq!ia0vp^XMnhkgAGVde3<$JNO2Z;L>4nJa0`PlBg3pY55jgR3=A9lx&I`x0=dgQT^vIy7~kGL?=O=obNu7`GyfVyk0b?I zG`v)rmg}+Vfum>js$=t>@~_}^&-*36rCfOL!?iQyzNpCcy3LkbbJaUqwO99OZ1QZ5 z2(OI|Z#M0Ix4BG!EAz*ccB7a3;!mcPecSowVP*QWN;TmdX6NS4wg}J)y|*?@H`}4v zQ)N}S_tGO*FJ63jXmRqvW5VKI8zcT&a5P@NdB~(93|?OVM= zm6?Twnd4giNxT1Vw3$Ctygv9v{+%(y?cH{zo9pff_?%jS zJjlS*#0b*G!6qPpDN+5&@BgdjuCu<=-+nuv&1RF!UM+mBS|_*qV6{Q`z8}Z+=ErZm zx^xxe@1<*vw=4{nd~JU-#jbL%YVpFDKPfXKHoO;0*ZTIg-TSNM%gNgl#Qy74|1Um} zx6`uncht$6k77I<71ph*4>pP4!)jc6GX7|T|K;gP5H5Jh z@j!RRvS|kzEV8n`nw#%symc)0?lYM4pYNc;yf(koGvfINOZHFu^y@f-{GB;D zufJ>$@t@^>asKX_x}(7GWqTvOeVJU9esc5Sv(F}9Pnh#>vhUaPU%tD}{=GKmz~!cXxSjJt^__-vuJeg_41dm>e*8Vx{?7G}z^v+2%RAYR z{k?ei(nCk(>lLIPC|+;MUbHMg?{?(()W5Bb8#i|5NZe{w*zjiIy6JBU{QG4yst-1} zJ-+riuhVGi`RL5GPm(MjuG7oQxh!q=-!<4)nB`z5v%x&Co9uZvh5l}MtDVWe-i$eI oDkHO0&uz=H*@@E5oqxDRE#3al@9o$REW#K(UHx3vIVCg!0Q@-_n*aa+ diff --git a/src/assets/Bunner.png b/src/assets/Bunner.png deleted file mode 100644 index bd06b3172e5a694d58f605cbc0b2db0c746070fb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1108 zcmeAS@N?(olHy`uVBq!ia0vp^XMnhkgAGVde3<$JNO2Z;L>4nJa0`PlBg3pY55jgR3=A9lx&I`xGB7Z|^mK6ysbGA2=U~1_D8uoO=9_bwn~qgA zFstcxEHFr@Prtpbzm=FTaQ0@R$?JnW$(A)g623q7zo*~MC#$pJzHP;a z_@7Uo$KOuQuh}za-rTv7D{pu1%6qnYRR^nCW^~4E33>U~>()(Mf4exey7Xnqske`h z_fO@wvk6U@a%XSx`a658*ZcVGi|X53S#th)`Qu}~(NB-bZ)bZr<>ba)akJ&#a8D5q z&KH$XJ*@xg!prY|(^js0H}CBGYainF-L;g{Il1a(nStfcsK&se&+G36KQ?RFJLmq| zM1!}<({?fJR+DhMwzB+wU6xJhqTS0spHE(Mpu@`WN0WTj(+9tbCn~#dw-c|q`184< zgj>|^&08Y zJ^EBqz2^1C`>&YUU&+h!{{jlSUN#ZG{dlqa-}|p`-kdr0VCVZ)tNzs#OnoVq;C$O9 zH1s)J{`6%<9T$6RXVzzSdH2g_?02#ptlMs47q>4X zKe|nQ)myu-PqK_}NWSnFzma}x?&C7!oMH{<|ICVRp8|U0RlWcV0R~T3KbLh*2~7YU CiNC7= diff --git a/src/assets/InBodySite.png b/src/assets/InBodySite.png deleted file mode 100644 index 83e66d5dec0bd409f9245a61cc969f03dc88d6bd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1222 zcmeAS@N?(olHy`uVBq!ia0vp^XMnhkgAGVde3<$JNO2Z;L>4nJa0`PlBg3pY55jgR3=A9lx&I`x0=dziE{-7;jBoGy`^SXJw12#BS>7hHk}c+f ziRni(!vo9G3KqUw@{3JjU&EmSN4)ox1XT&lP5bt)5$z|5{mjYe|*b){`f< zSL-L-u&Mge|F_V7^W3@ik8{J^inq%9>d&atd49fs+5Eb13wwKer3~K4+5fv<_w(oV zinFguXUE3Gy!c`9pfzQD{}+5aTW64b z`SQz^z4Jrr_2vEhPOHw$J~F$rb32cO%J=P?mA@M{T$Zt4S!eJuT`Zr$uP4D^!@52H z?@j#ua^;thy0muOG9p+YNNJmspxUCjatQhEb@56b)VFOEr-l_ErgHuhfO@yZ zg^#W~GDTPF%y{5M;HynEM{Ed}Qp zWHxTPls9EM@AE%DF7WuVPctm)a+k65e#P|>MwO{%!zhb?L^=B?86JW8!;OXk;vd$@?2>@y4>+1jj diff --git a/src/assets/OnButton.png b/src/assets/OnButton.png deleted file mode 100644 index e44a91ad8365ed3f2dc457ab1978e8d256fc459e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1425 zcmeAS@N?(olHy`uVBq!ia0vp^XMnhkgAGVde3<$JNO2Z;L>4nJa0`PlBg3pY55jgR3=A9lx&I`xGBB{JdAc};R4~51yU|}dT;{;X`_{=KT%84> z54~1iabD##OGEeNg);5T{|!lB`4!@X45z;HHE6L-bW&nIcO@_F&80=_V!cA8JVZ{u zyP&wlODA+oP|y3X_blC50*>&86pY`RwJ>~CnlAkbmdrv*+rYyBR%!$!v z^2r-l-IO<5Sw^mSD{H))KStyH{M**YW^ghF7 z?&>wEn~Qcv=v-ko7hu_z(j&mVp*#Da>BO_&T6){=l%1C}-<@IPvmtNO z&mSvu^6aL@yxTITR(<}jABk($+D_VfU;gMrk9F!Cvlf5c*Dy!AGQ1)0l3n0!z50?k zH@8Dqj`6Rq)qP*q_gHnNWGVa3JCcmMPB!=6@;?uC`<>NV)}E`$F}&D1di|}tuS#ONRV5cV z7&II@H|fpq_jLjc>$eH_Y`xgSU@^h);Fjt;oX>uJUGK&8z@fW)s*1$ALREhInAU_Ys%y7t6gg)Cr8fv`*>|N)B2@$hiiWS zd;D=l{Q|AP&wetecgVbtm~-*T_YHwRpS7NSb+)_SpJUI|EQ8D9^Y8HWtnAp@Tx8U` zwqTwQ_ns+H2JcihUGwV{&w1(g=eXm8xgkwE3ll%DvhF;htoHBmgK6`b)-Mt2=?qVP zw6NmmP7~4m0**Zw3k}xZe0n4PhWynBFZbA1Cx|Tv(y| zBj7==$+|?hqxlODNbfOW3-C~$G3!Te=!4$A=8e}X>JGWobM3kKlSlZ*{G;g;SAvb5 znX^si{?0Ys{cF~q&3jVGy4l@|Z`qbvtKBE+cJ;5B!V>41Iz1=PcE61MnQr$rHzd=< z|1a6L)~32X6* zZ|(~D`R@B!k0vdYvoAb9r1(p&&Zbxm_JQ*E+=AL8nr1Lkmj>mt#zE1Rqi%7-ucXyvu{o7n2ROr32O6Ihv z`R*Ntn}4%MU%YXtTa)8MtmW*f`FB#ie{&XJ@ZUQl_tD(O6W{%}wzS_lxA8X5ZCS6| a|67;m&AimTz7JS}GI+ZBxvXNT diff --git a/src/assets/Widget.png b/src/assets/Widget.png deleted file mode 100644 index c3f3e2639013a0ca253b535a9e71f4bdfc1c9aa9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1225 zcmeAS@N?(olHy`uVBq!ia0vp^XMnhkgAGVde3<$JNO2Z;L>4nJa0`PlBg3pY55jgR3=A9lx&I`x0=aRXE{-7;jBjsl%!>|{IsWm#<@G+PpnyXY zR%r>XYni0u%E!E6;vsI8M~q(6!e(a7XL!!ZHF;@?$BYC=J!$SG#@U>w^iB9S)4HIY}ncA+cMItucSTCGPC`g z_nlwD)PLTe^m<#L-2C_ND`tybjCt>RnRl7^>7(6`x1Qhs zy=U3gRcH0}^|#i_e6TZ_W1Pg;*Qt9%ZPit;wU;;U{%9*6K3!$w-qqpjZ>Z0YGftTB z=Kt>--@eP=zH;Su+0(t=OZ(>^KX*>~_Rr6Of_=WBd(OW)y0hWznSJ>O6kgT_RzI_! zwfW}FsLaRDuU1d%S3iDq+L^15&tAD=&BimSefP`G-x3ZpfpXkx|IR$(J+M=dhwa){ zetU~Td+T8B(m$agJQ4xMN5yL%t^N4!z0&3BasOgJlpc>~J(#fI=;XC^%cIv@uS@b~ zy@ay;_(y#k=uTJCJieeu-(yR@pr6gAG9pC+s~%AMbS z8|=-?H}=l?r8B$y*}K~Xne7SuHS^9MKYt;AQMOtAFD=hMRnu;MojP?XJKKYnty{zP z?#QuxF8;Tbd*AQ-2Y%NaWZ0w9(wuwi^Yfqbb(NJXBl-?~ceRZ-pS^Y#qlM7yf^&B@ z;_^hSH*ERMV{G;;PrQ0Z*`yn47a7=-xbNLg`)H&q7a8`r`rVfW#bMfc=3V>W=iQ5` zV(#N)JiE7gZR?{?ksCXXtd02n;ip}1^1B~Lnlqdp7jQDU-F4fVRsJa1`#o>@wKa#Y rF0+t4@tUn?hRt>pxi(q;rO#QH^s89ElQ2&MmOKoeu6{1-oD!M { - setDisplay(event.target.value); - }; - - const [openVk, setOpenVk] = React.useState(false); - const [stepState, setStepState] = React.useState("step1"); - const handleOpenVk = () => setOpenVk(true); - const handleCloseVk = () => setOpenVk(false); - - const [openDom, setOpenDom] = React.useState(false); - const handleOpenDom = () => setOpenDom(true); - const handleCloseDom = () => setOpenDom(false); - - const [backgroundType, setBackgroundType] = useState("text"); - - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(600)); - const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065)); - const CopyLink = () => { - let one = (document.getElementById("inputLinkone") as HTMLInputElement) - ?.value; - let text = (document.getElementById("inputLink") as HTMLInputElement) - ?.value; - navigator.clipboard.writeText(one + text); - }; - return ( <> - - - - - Ссылка на quiz - - - - - - - - - - - - - - - - - - - {quiz?.status === "start" ? "Опубликован" : "Не опубликован"} - - - - - - - Установка quiz на сайте - - { - setStepState("step1"); - }} - > - - - Способ установки - - - { - setStepState("step2"); - }} - > - - - Вставить код на сайт - - - - - - {stepState === "step1" ? ( - { - setStepState("step2"); - }} - sx={{ - display: "flex", - flexDirection: "column", - justifyContent: "start", - alignItems: "start", - maxWidth: "205px", - gap: "15px", - }} - > - - В тело сайта - - Задайте свои размеры и встройте в сайт - - - ) : ( - <> - - - 1. Код вставки quiz - - Установите код в то место, где должен быть quiz - - `} - sx={{ - "& .MuiInputBase-root": { - maxWidth: "520px", - width: "100%", - backgroundColor: theme.palette.background.default, - fontSize: "18px", - alignItems: "flex-start", - }, - }} - InputProps={{ - endAdornment: ( - - - navigator.clipboard.writeText( - document.getElementById( - "outlined-multiline-static", - ).value, - ) - } - > - - - - ), - }} - /> - - - - - Код нужно вставить один раз. Изменения в самом quiz будут - отображаться автоматически после сохранения. - - - Для установки размера добавьте в тег значения высоты и - ширины, например: - - - {`
`} - - - - )} - - - + + ); } - -const buttonInstall: { icon: string; title: string; text: string }[] = [ - { - icon: OnButton, - title: "По кнопке", - text: "Конструктор кнопки или собственная кнопка", - }, - { icon: Bunner, title: "Баннером", text: "Сбоку или на всю ширину экрана" }, - { - icon: InBidySite, - title: "В тело сайта", - text: "Задайте свои размеры и встройте в сайт", - }, - { - icon: AutoOpen, - title: "Автооткрытие", - text: "Автооткрытие поп-ап на сайте", - }, - { - icon: WidgetImg, - title: "Виджет", - text: "Сбоку страницы как консультант", - }, -]; diff --git a/src/pages/InstallQuiz/QuizInstallationCard/InstallationStepButton.tsx b/src/pages/InstallQuiz/QuizInstallationCard/InstallationStepButton.tsx new file mode 100644 index 00000000..53ac5d7e --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/InstallationStepButton.tsx @@ -0,0 +1,31 @@ +import { ButtonBase, Typography, useTheme } from "@mui/material"; +import { ReactNode } from "react"; + +interface Props { + active?: boolean; + onClick?: () => void; + leftIcon?: ReactNode; + children?: ReactNode; +} + +export default function InstallationStepButton({ + active, + leftIcon, + onClick, + children, +}: Props) { + const theme = useTheme(); + + return ( + + {leftIcon} + + {children} + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx b/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx new file mode 100644 index 00000000..221b0178 --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx @@ -0,0 +1,207 @@ +import { + Box, + ButtonBase, + IconButton, + InputAdornment, + TextField as MuiTextField, + TextFieldProps, + Typography, + useMediaQuery, + useTheme, +} from "@mui/material"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import { useDomainDefine } from "@utils/hooks/useDomainDefine"; +import { FC, useState } from "react"; +import CopyIcon from "../../../assets/icons/CopyIcon"; +import OneIconBorder from "../../../assets/icons/OneIconBorder"; +import InstallationStepButton from "./InstallationStepButton"; +import ContainerWidgetPreview from "./previewIcons/ContainerWidgetPreview"; + +const TextField = MuiTextField as unknown as FC; + +export default function QuizInstallationCard() { + const theme = useTheme(); + const quiz = useCurrentQuiz(); + const { isTestServer } = useDomainDefine(); + const [stepState, setStepState] = useState("step1"); + const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065)); + + if (!quiz) return null; + + return ( + + + + Установка quiz на сайте + + + } + onClick={() => { + setStepState("step1"); + }} + > + Способ установки + + + } + onClick={() => { + setStepState("step2"); + }} + > + Вставить код на сайт + + + + + {stepState === "step1" ? ( + { + setStepState("step2"); + }} + sx={{ + display: "flex", + flexDirection: "column", + justifyContent: "start", + alignItems: "start", + maxWidth: "205px", + gap: "15px", + }} + > + + В тело сайта + + Задайте свои размеры и встройте в сайт + + + ) : ( + <> + + + 1. Код вставки quiz + + Установите код в то место, где должен быть quiz + + `} + sx={{ + "& .MuiInputBase-root": { + maxWidth: "520px", + width: "100%", + backgroundColor: theme.palette.background.default, + fontSize: "18px", + alignItems: "flex-start", + }, + }} + InputProps={{ + endAdornment: ( + + navigator.clipboard.writeText( // TODO + // document.getElementById( + // "outlined-multiline-static" + // ).value + // )} + > + + + + ), + }} + /> + + + + + Код нужно вставить один раз. Изменения в самом quiz будут + отображаться автоматически после сохранения. + + + Для установки размера добавьте в тег значения высоты и ширины, + например: + + + {`
`} + + + + )} + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/BannerWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/BannerWidgetPreview.tsx new file mode 100644 index 00000000..d3825aca --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/BannerWidgetPreview.tsx @@ -0,0 +1,49 @@ +import { Box } from "@mui/material"; + +export default function BannerWidgetPreview() { + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ButtonWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ButtonWidgetPreview.tsx new file mode 100644 index 00000000..efa49eb9 --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ButtonWidgetPreview.tsx @@ -0,0 +1,50 @@ +import { Box } from "@mui/material"; + +export default function ButtonWidgetPreview() { + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ContainerWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ContainerWidgetPreview.tsx new file mode 100644 index 00000000..1c8653d8 --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ContainerWidgetPreview.tsx @@ -0,0 +1,50 @@ +import { Box } from "@mui/material"; + +export default function ContainerWidgetPreview() { + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/PopupWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/PopupWidgetPreview.tsx new file mode 100644 index 00000000..9469e502 --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/PopupWidgetPreview.tsx @@ -0,0 +1,54 @@ +import { Box } from "@mui/material"; + +export default function PopupWidgetPreview() { + return ( + + + + + + + + + + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/SideWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/SideWidgetPreview.tsx new file mode 100644 index 00000000..bf9abb95 --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/SideWidgetPreview.tsx @@ -0,0 +1,50 @@ +import { Box } from "@mui/material"; + +export default function SideWidgetPreview() { + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/InstallQuiz/QuizLinkCard.tsx b/src/pages/InstallQuiz/QuizLinkCard.tsx new file mode 100644 index 00000000..df893dac --- /dev/null +++ b/src/pages/InstallQuiz/QuizLinkCard.tsx @@ -0,0 +1,209 @@ +import { + Box, + FormControl, + IconButton, + MenuItem, + TextField as MuiTextField, + Paper, + Select, + SelectChangeEvent, + TextFieldProps, + Typography, + useMediaQuery, + useTheme, +} from "@mui/material"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import { useDomainDefine } from "@utils/hooks/useDomainDefine"; +import { FC, useState } from "react"; +import ArrowDown from "../../assets/icons/ArrowDownIcon"; +import CopyIcon from "../../assets/icons/CopyIcon"; +import LinkIcon from "../../assets/icons/LinkIcon"; + +const TextField = MuiTextField as unknown as FC; + +export default function QuizLinkCard() { + const theme = useTheme(); + const quiz = useCurrentQuiz(); + const { isTestServer } = useDomainDefine(); + const [display, setDisplay] = useState("1"); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + + const CopyLink = () => { + let one = (document.getElementById("inputLinkone") as HTMLInputElement) + ?.value; + let text = (document.getElementById("inputLink") as HTMLInputElement) + ?.value; + navigator.clipboard.writeText(one + text); + }; + + const handleChange = (event: SelectChangeEvent) => { + setDisplay(event.target.value); + }; + + if (!quiz) return null; + + return ( + + + + + Ссылка на quiz + + + + + + + + + + + + + + + + + + + {quiz?.status === "start" ? "Опубликован" : "Не опубликован"} + + + + ); +} From 012169e12b50ca01c9d2a42605b8573dc422696e Mon Sep 17 00:00:00 2001 From: aleksandr-raw <104529174+aleksandr-raw@users.noreply.github.com> Date: Tue, 30 Apr 2024 16:23:58 +0400 Subject: [PATCH 2/4] Implemented universal usage for button and modal, added VK pixel --- src/model/quizSettings.ts | 5 ++ .../IntegrationsPage/IntegrationsPage.tsx | 3 +- .../PartnersBoard/PartnersBoard.tsx | 70 +++++++++++++------ .../ServiceButton/ServiceButton.tsx} | 27 +++++-- .../ServiceModal/ServiceModal.tsx} | 34 ++++++--- src/pages/IntegrationsPage/mocks/VKLogo.svg | 10 +++ .../IntegrationsPage/mocks/VKPixelLogo.tsx | 6 ++ 7 files changed, 116 insertions(+), 39 deletions(-) rename src/pages/IntegrationsPage/{IntegrationYandex/YandexButton.tsx => PartnersBoard/ServiceButton/ServiceButton.tsx} (54%) rename src/pages/IntegrationsPage/{IntegrationYandex/YandexModal.tsx => PartnersBoard/ServiceModal/ServiceModal.tsx} (84%) create mode 100644 src/pages/IntegrationsPage/mocks/VKLogo.svg create mode 100644 src/pages/IntegrationsPage/mocks/VKPixelLogo.tsx diff --git a/src/model/quizSettings.ts b/src/model/quizSettings.ts index b728326a..b068fbb2 100644 --- a/src/model/quizSettings.ts +++ b/src/model/quizSettings.ts @@ -118,6 +118,11 @@ export interface QuizConfig { vkMetricNumber: number | undefined; } +export enum QuizMetricType { + yandex = "yandexMetricNumber", + vk = "vkMetricNumber", +} + export type FormContactFieldName = | "name" | "email" diff --git a/src/pages/IntegrationsPage/IntegrationsPage.tsx b/src/pages/IntegrationsPage/IntegrationsPage.tsx index c090b11a..03c02029 100644 --- a/src/pages/IntegrationsPage/IntegrationsPage.tsx +++ b/src/pages/IntegrationsPage/IntegrationsPage.tsx @@ -22,7 +22,7 @@ export const IntegrationsPage = ({ const navigate = useNavigate(); const isMobile = useMediaQuery(theme.breakpoints.down(660)); const [isModalOpen, setIsModalOpen] = useState(false); - const [companyName, setCompanyName] = useState(null); + const [companyName, setCompanyName] = useState(""); useEffect(() => { if (editQuizId === null) navigate("/list"); }, [navigate, editQuizId]); @@ -62,6 +62,7 @@ export const IntegrationsPage = ({ void; + companyName: string; setCompanyName: (value: string) => void; isModalOpen: boolean; handleCloseModal: () => void; @@ -22,17 +25,18 @@ export const PartnersBoard: FC = ({ setIsModalOpen, isModalOpen, handleCloseModal, + companyName, setCompanyName, }) => { const theme = useTheme(); - const partnersByCategory = partners.reduce( - (acc, partner) => { - (acc[partner.category] = acc[partner.category] || []).push(partner); - return acc; - }, - {} as Record, - ); + // const partnersByCategory = partners.reduce( + // (acc, partner) => { + // (acc[partner.category] = acc[partner.category] || []).push(partner); + // return acc; + // }, + // {} as Record, + // ); return ( = ({ {/* */} {/* */} {/*))}*/} - - Аналитика - - - + + Аналитика + + + } + setIsModalOpen={setIsModalOpen} + name={"yandex"} + setCompanyName={setCompanyName} + /> + } + title={"VK Пиксель"} + name={"vk"} + setIsModalOpen={setIsModalOpen} + setCompanyName={setCompanyName} + > + + + ); diff --git a/src/pages/IntegrationsPage/IntegrationYandex/YandexButton.tsx b/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx similarity index 54% rename from src/pages/IntegrationsPage/IntegrationYandex/YandexButton.tsx rename to src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx index 89d55334..26f27bb9 100644 --- a/src/pages/IntegrationsPage/IntegrationYandex/YandexButton.tsx +++ b/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx @@ -1,19 +1,25 @@ -import { Box, useTheme } from "@mui/material"; +import { Box, Typography, useTheme } from "@mui/material"; import { FC } from "react"; -import { YandexMetricaLogo } from "../mocks/YandexMetricaLogo"; type PartnerItemProps = { setIsModalOpen: (value: boolean) => void; - setCompanyName?: (value: string) => void; + setCompanyName: (value: string) => void; + logo?: JSX.Element; + title?: string; + name: string; }; -export const YandexButton: FC = ({ +export const ServiceButton: FC = ({ setIsModalOpen, + logo, + title, + name, setCompanyName, }) => { const theme = useTheme(); const handleClick = () => { + setCompanyName(name); setIsModalOpen(true); }; @@ -32,9 +38,18 @@ export const YandexButton: FC = ({ marginRight: "2%", cursor: "pointer", }} - onClick={() => setIsModalOpen(true)} + onClick={handleClick} > - + {logo && logo} + + {title && title} + ); diff --git a/src/pages/IntegrationsPage/IntegrationYandex/YandexModal.tsx b/src/pages/IntegrationsPage/PartnersBoard/ServiceModal/ServiceModal.tsx similarity index 84% rename from src/pages/IntegrationsPage/IntegrationYandex/YandexModal.tsx rename to src/pages/IntegrationsPage/PartnersBoard/ServiceModal/ServiceModal.tsx index da6fd076..f6a106c7 100644 --- a/src/pages/IntegrationsPage/IntegrationYandex/YandexModal.tsx +++ b/src/pages/IntegrationsPage/PartnersBoard/ServiceModal/ServiceModal.tsx @@ -8,45 +8,49 @@ import { } from "@mui/material"; import Box from "@mui/material/Box"; import CloseIcon from "@mui/icons-material/Close"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import CustomTextField from "@ui_kit/CustomTextField"; import EditPencil from "@icons/EditPencil"; import Trash from "@icons/trash"; import { updateQuiz } from "@root/quizes/actions"; import { useCurrentQuiz } from "@root/quizes/hooks"; +import { QuizMetricType } from "@model/quizSettings"; interface Props { isModalOpen: boolean; handleCloseModal: () => void; + companyName: string; } -export default function YandexModal({ isModalOpen, handleCloseModal }: Props) { +export default function ServiceModal({ + isModalOpen, + handleCloseModal, + companyName, +}: Props) { const theme = useTheme(); const quiz = useCurrentQuiz(); const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); - const yandexNumber = quiz?.config.yandexMetricNumber; - const [isSave, setIsSave] = useState(!!yandexNumber); + const configName = QuizMetricType[companyName as keyof typeof QuizMetricType]; + const meterNumber = quiz?.config[configName]; + const [isSave, setIsSave] = useState(!!meterNumber); const [currentValue, setCurrentValue] = useState( - yandexNumber ? yandexNumber.toString() : "", + meterNumber ? meterNumber.toString() : "", ); const handleClose = () => { handleCloseModal(); - if (!yandexNumber) { + if (!meterNumber) { setIsSave(false); setCurrentValue(""); return; } setIsSave(true); - setCurrentValue(yandexNumber.toString()); + setCurrentValue(meterNumber.toString()); }; - const handleSave = () => { handleCloseModal(); updateQuiz(quiz?.id, (quiz) => { - quiz.config.yandexMetricNumber = currentValue - ? Number(currentValue) - : undefined; + quiz.config[configName] = currentValue ? Number(currentValue) : undefined; }); if (!currentValue) { setIsSave(false); @@ -63,6 +67,14 @@ export default function YandexModal({ isModalOpen, handleCloseModal }: Props) { setIsSave(false); }; + useEffect(() => { + const configName = + QuizMetricType[companyName as keyof typeof QuizMetricType]; + const meterNumber = quiz?.config[configName]; + setCurrentValue(meterNumber ? meterNumber.toString() : ""); + setIsSave(!!meterNumber); + }, [companyName]); + return ( + + + + + + + + diff --git a/src/pages/IntegrationsPage/mocks/VKPixelLogo.tsx b/src/pages/IntegrationsPage/mocks/VKPixelLogo.tsx new file mode 100644 index 00000000..059b8c67 --- /dev/null +++ b/src/pages/IntegrationsPage/mocks/VKPixelLogo.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import { ReactComponent as VKLogo } from "./VKLogo.svg"; + +export const VKPixelLogo = () => { + return ; +}; From 93574151bbf83695b361a475e154ff649f894782 Mon Sep 17 00:00:00 2001 From: aleksandr-raw <104529174+aleksandr-raw@users.noreply.github.com> Date: Wed, 1 May 2024 13:34:37 +0400 Subject: [PATCH 3/4] created new analytics modal design --- .../IntegrationsPage/IntegrationsPage.tsx | 5 +- .../AnalyticsModal/AnalyticsModal.tsx | 328 ++++++++++++++++++ .../PartnersBoard/PartnersBoard.tsx | 19 +- .../ServiceButton/ServiceButton.tsx | 5 +- .../ServiceModal/ServiceModal.tsx | 209 ----------- src/pages/createQuize/AvailablePrivilege.tsx | 57 +-- src/ui_kit/Sidebar/SidebarMobile.tsx | 1 - 7 files changed, 381 insertions(+), 243 deletions(-) create mode 100644 src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx delete mode 100644 src/pages/IntegrationsPage/PartnersBoard/ServiceModal/ServiceModal.tsx diff --git a/src/pages/IntegrationsPage/IntegrationsPage.tsx b/src/pages/IntegrationsPage/IntegrationsPage.tsx index 03c02029..7357dca1 100644 --- a/src/pages/IntegrationsPage/IntegrationsPage.tsx +++ b/src/pages/IntegrationsPage/IntegrationsPage.tsx @@ -6,6 +6,7 @@ import { useQuizStore } from "@root/quizes/store"; import { useNavigate } from "react-router-dom"; import { PartnersBoard } from "./PartnersBoard/PartnersBoard"; import { partnersMock } from "./mocks/MockData"; +import { QuizMetricType } from "@model/quizSettings"; interface IntegrationsPageProps { heightSidebar: number; @@ -22,7 +23,9 @@ export const IntegrationsPage = ({ const navigate = useNavigate(); const isMobile = useMediaQuery(theme.breakpoints.down(660)); const [isModalOpen, setIsModalOpen] = useState(false); - const [companyName, setCompanyName] = useState(""); + const [companyName, setCompanyName] = useState< + keyof typeof QuizMetricType | null + >(null); useEffect(() => { if (editQuizId === null) navigate("/list"); }, [navigate, editQuizId]); diff --git a/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx new file mode 100644 index 00000000..dab29fcd --- /dev/null +++ b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx @@ -0,0 +1,328 @@ +import { + Button, + Dialog, + IconButton, + Typography, + useMediaQuery, + useTheme, +} from "@mui/material"; +import Box from "@mui/material/Box"; +import CloseIcon from "@mui/icons-material/Close"; +import React, { useEffect, useMemo, useState } from "react"; +import CustomTextField from "@ui_kit/CustomTextField"; +import EditPencil from "@icons/EditPencil"; +import Trash from "@icons/trash"; +import { updateQuiz } from "@root/quizes/actions"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import { QuizMetricType } from "@model/quizSettings"; +import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; + +interface Props { + isModalOpen: boolean; + handleCloseModal: () => void; + companyName: keyof typeof QuizMetricType; +} + +export default function AnalyticsModal({ + isModalOpen, + handleCloseModal, + companyName, +}: Props) { + const theme = useTheme(); + const quiz = useCurrentQuiz(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const configName = QuizMetricType[companyName]; + const meterNumber = quiz?.config[configName]; + const [isSave, setIsSave] = useState(!!meterNumber); + const [currentValue, setCurrentValue] = useState( + meterNumber ? meterNumber.toString() : "", + ); + const [isInstructionOpen, setIsInstructionOpen] = useState(false); + const analyticTexts = useMemo(() => { + return { + yandex: { + header: "Яндекс.Метрикой", + counterName: "счетчика", + instructionTitle: "Как установить Яндекс Метрику в квиз?", + instructionSubTitle: "Инструкция по настройке Яндекс Метрики", + instructionHeader: "Настройка счётчика и интеграции", + instructionText: + "Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.", + }, + vk: { + header: "VK Пиксель", + counterName: "пикселя", + instructionTitle: "Как установить VK Пиксель в квиз?", + instructionSubTitle: "Инструкция по настройке VK Пиксель", + instructionHeader: "Настройка счётчика и интеграции", + instructionText: + "Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.", + }, + }; + }, []); + + const handleClose = () => { + handleCloseModal(); + setIsInstructionOpen(false); + if (!meterNumber) { + setIsSave(false); + setCurrentValue(""); + return; + } + setIsSave(true); + setCurrentValue(meterNumber.toString()); + }; + const handleSave = () => { + handleCloseModal(); + updateQuiz(quiz?.id, (quiz) => { + quiz.config[configName] = currentValue ? Number(currentValue) : undefined; + }); + if (!currentValue) { + setIsSave(false); + return; + } + setIsSave(true); + }; + const handleEdit = () => { + setIsSave(false); + }; + + const handleClear = () => { + setCurrentValue(""); + setIsSave(false); + }; + + useEffect(() => { + const configName = + QuizMetricType[companyName as keyof typeof QuizMetricType]; + const meterNumber = quiz?.config[configName]; + setCurrentValue(meterNumber ? meterNumber.toString() : ""); + setIsSave(!!meterNumber); + setIsInstructionOpen(false); + }, [companyName]); + + return ( + + + + Аналитика с {analyticTexts[companyName]?.header} + + + + + + + + + + {isSave + ? `Ваш номер ${analyticTexts[companyName]?.counterName}` + : `Введите номер ${analyticTexts[companyName]?.counterName}`} + + {isSave && ( + + + + + + + + + )} + + + { + const onlyNums = e.target.value.replace(/[^0-9]/g, ""); + setCurrentValue(onlyNums); + }} + /> + {!isSave && ( + + {meterNumber && !isSave && ( + + )} + + + )} + + + + setIsInstructionOpen(!isInstructionOpen)} + sx={{ + cursor: "pointer", + backgroundColor: theme.palette.background.default, + borderRadius: isInstructionOpen ? "12px 12px 0 0" : "12px", + padding: "20px", + border: "1px solid #E5E5E5", + borderBottom: isInstructionOpen ? "none" : "1px solid #E5E5E5", + position: "relative", + }} + > + {isMobile && ( + + )} + + {analyticTexts[companyName]?.instructionTitle} + + + {analyticTexts[companyName]?.instructionSubTitle} + + + {isInstructionOpen && ( + + + {analyticTexts[companyName]?.instructionHeader} + + + {analyticTexts[companyName]?.instructionText} + + + )} + + + + ); +} diff --git a/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx b/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx index b5e377e4..e39d98e8 100644 --- a/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx +++ b/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx @@ -2,8 +2,9 @@ import { Box, Typography, useTheme } from "@mui/material"; import { FC } from "react"; import { ServiceButton } from "./ServiceButton/ServiceButton"; import { YandexMetricaLogo } from "../mocks/YandexMetricaLogo"; -import ServiceModal from "./ServiceModal/ServiceModal"; +import AnalyticsModal from "./AnalyticsModal/AnalyticsModal"; import { VKPixelLogo } from "../mocks/VKPixelLogo"; +import { QuizMetricType } from "@model/quizSettings"; export type Partner = { name: string; @@ -14,8 +15,8 @@ export type Partner = { type PartnersBoardProps = { partners: Partner[]; setIsModalOpen: (value: boolean) => void; - companyName: string; - setCompanyName: (value: string) => void; + companyName: keyof typeof QuizMetricType | null; + setCompanyName: (value: keyof typeof QuizMetricType) => void; isModalOpen: boolean; handleCloseModal: () => void; }; @@ -112,11 +113,13 @@ export const PartnersBoard: FC = ({ > - + {companyName && ( + + )} ); }; diff --git a/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx b/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx index 26f27bb9..4773e19f 100644 --- a/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx +++ b/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx @@ -1,9 +1,10 @@ import { Box, Typography, useTheme } from "@mui/material"; import { FC } from "react"; +import { QuizMetricType } from "@model/quizSettings"; type PartnerItemProps = { setIsModalOpen: (value: boolean) => void; - setCompanyName: (value: string) => void; + setCompanyName: (value: keyof typeof QuizMetricType) => void; logo?: JSX.Element; title?: string; name: string; @@ -19,7 +20,7 @@ export const ServiceButton: FC = ({ const theme = useTheme(); const handleClick = () => { - setCompanyName(name); + setCompanyName(name as keyof typeof QuizMetricType); setIsModalOpen(true); }; diff --git a/src/pages/IntegrationsPage/PartnersBoard/ServiceModal/ServiceModal.tsx b/src/pages/IntegrationsPage/PartnersBoard/ServiceModal/ServiceModal.tsx deleted file mode 100644 index f6a106c7..00000000 --- a/src/pages/IntegrationsPage/PartnersBoard/ServiceModal/ServiceModal.tsx +++ /dev/null @@ -1,209 +0,0 @@ -import { - Button, - Dialog, - IconButton, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; -import Box from "@mui/material/Box"; -import CloseIcon from "@mui/icons-material/Close"; -import React, { useEffect, useState } from "react"; -import CustomTextField from "@ui_kit/CustomTextField"; -import EditPencil from "@icons/EditPencil"; -import Trash from "@icons/trash"; -import { updateQuiz } from "@root/quizes/actions"; -import { useCurrentQuiz } from "@root/quizes/hooks"; -import { QuizMetricType } from "@model/quizSettings"; - -interface Props { - isModalOpen: boolean; - handleCloseModal: () => void; - companyName: string; -} - -export default function ServiceModal({ - isModalOpen, - handleCloseModal, - companyName, -}: Props) { - const theme = useTheme(); - const quiz = useCurrentQuiz(); - const isMobile = useMediaQuery(theme.breakpoints.down(600)); - const isTablet = useMediaQuery(theme.breakpoints.down(1000)); - const configName = QuizMetricType[companyName as keyof typeof QuizMetricType]; - const meterNumber = quiz?.config[configName]; - const [isSave, setIsSave] = useState(!!meterNumber); - const [currentValue, setCurrentValue] = useState( - meterNumber ? meterNumber.toString() : "", - ); - const handleClose = () => { - handleCloseModal(); - if (!meterNumber) { - setIsSave(false); - setCurrentValue(""); - return; - } - setIsSave(true); - setCurrentValue(meterNumber.toString()); - }; - const handleSave = () => { - handleCloseModal(); - updateQuiz(quiz?.id, (quiz) => { - quiz.config[configName] = currentValue ? Number(currentValue) : undefined; - }); - if (!currentValue) { - setIsSave(false); - return; - } - setIsSave(true); - }; - const handleEdit = () => { - setIsSave(false); - }; - - const handleClear = () => { - setCurrentValue(""); - setIsSave(false); - }; - - useEffect(() => { - const configName = - QuizMetricType[companyName as keyof typeof QuizMetricType]; - const meterNumber = quiz?.config[configName]; - setCurrentValue(meterNumber ? meterNumber.toString() : ""); - setIsSave(!!meterNumber); - }, [companyName]); - - return ( - - - - Аналитика с Яндекс.Метрикой - - - - - - - - - - {isSave ? "Ваш номер счетчика" : "Введите номер счетчика"} - - {isSave && ( - - - - - - - - - )} - - - { - const onlyNums = e.target.value.replace(/[^0-9]/g, ""); - setCurrentValue(onlyNums); - }} - /> - - {!isSave && ( - - - - - )} - - - ); -} diff --git a/src/pages/createQuize/AvailablePrivilege.tsx b/src/pages/createQuize/AvailablePrivilege.tsx index 3d1cbd3b..abcdd9e0 100644 --- a/src/pages/createQuize/AvailablePrivilege.tsx +++ b/src/pages/createQuize/AvailablePrivilege.tsx @@ -50,19 +50,38 @@ export default function AvailablePrivilege() { const squizHideBadge = userPrivileges?.squizHideBadge?.amount || 0; //Где дни - amount - это на сколько дней выдан безлимит. т.е. не сколько осталось, а на сколько дней выдано - function getCramps (amount: number, created_at: string) { - if (created_at.length === 0) return 0 - const currentDate = moment() + function getCramps(amount: number, created_at: string) { + if (created_at.length === 0) return 0; + const currentDate = moment(); - return Number((moment(moment(created_at).add(amount, "days").diff(currentDate)).unix() / 86400).toFixed(1)) + return Number( + ( + moment( + moment(created_at).add(amount, "days").diff(currentDate), + ).unix() / 86400 + ).toFixed(1), + ); } - const quizUnlimDays = getCramps(quizUnlimTime, userPrivileges?.quizUnlimTime?.created_at || "") - const squizBadgeDays = getCramps(squizHideBadge, userPrivileges?.squizHideBadge?.created_at || "") + const quizUnlimDays = getCramps( + quizUnlimTime, + userPrivileges?.quizUnlimTime?.created_at || "", + ); + const squizBadgeDays = getCramps( + squizHideBadge, + userPrivileges?.squizHideBadge?.created_at || "", + ); - const currentDate = moment() - console.log(quizUnlimDays) - console.log(moment()) - console.log(moment(moment(userPrivileges?.quizUnlimTime?.created_at).add(quizUnlimTime, "days"))) + const currentDate = moment(); + console.log(quizUnlimDays); + console.log(moment()); + console.log( + moment( + moment(userPrivileges?.quizUnlimTime?.created_at).add( + quizUnlimTime, + "days", + ), + ), + ); return ( Безлимитные заявки:{" "} - { - quizUnlimDays > 0 && quizUnlimDays < 1 ? - "последний день" - : - `${Math.trunc(quizUnlimDays)} ${declOfNum(Math.trunc(quizUnlimDays), DayForm)}` - } + {quizUnlimDays > 0 && quizUnlimDays < 1 + ? "последний день" + : `${Math.trunc(quizUnlimDays)} ${declOfNum(Math.trunc(quizUnlimDays), DayForm)}`} {quizCnt !== 0 && ( @@ -99,12 +115,9 @@ export default function AvailablePrivilege() { Скрытие логотипа PenaQuiz:{" "} - { - squizBadgeDays > 0 && squizBadgeDays < 1 ? - "последний день" - : - `${Math.trunc(squizBadgeDays)} ${declOfNum(Math.trunc(squizBadgeDays), DayForm)}` - } + {squizBadgeDays > 0 && squizBadgeDays < 1 + ? "последний день" + : `${Math.trunc(squizBadgeDays)} ${declOfNum(Math.trunc(squizBadgeDays), DayForm)}`} )} diff --git a/src/ui_kit/Sidebar/SidebarMobile.tsx b/src/ui_kit/Sidebar/SidebarMobile.tsx index 462361f3..4cf2b29f 100644 --- a/src/ui_kit/Sidebar/SidebarMobile.tsx +++ b/src/ui_kit/Sidebar/SidebarMobile.tsx @@ -72,7 +72,6 @@ export const SidebarMobile: FC = ({ }; const clickInput = (event: MouseEvent) => { - debugger; if (ref.current && !ref.current?.contains(event.target as Node)) setInputOpen(false); }; From 7dc2dd1ec162ba6e9e08213a24b44680b8fe93b8 Mon Sep 17 00:00:00 2001 From: aleksandr-raw <104529174+aleksandr-raw@users.noreply.github.com> Date: Wed, 1 May 2024 13:49:13 +0400 Subject: [PATCH 4/4] refactored analytics modal component --- .../AnalyticsModal/AnalyticsModal.tsx | 79 ++--------------- .../IntsructionsBlock/InstructionsBlock.tsx | 88 +++++++++++++++++++ 2 files changed, 95 insertions(+), 72 deletions(-) create mode 100644 src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/InstructionsBlock.tsx diff --git a/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx index dab29fcd..32461c20 100644 --- a/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx +++ b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx @@ -15,7 +15,7 @@ import Trash from "@icons/trash"; import { updateQuiz } from "@root/quizes/actions"; import { useCurrentQuiz } from "@root/quizes/hooks"; import { QuizMetricType } from "@model/quizSettings"; -import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; +import { InstructionsBlock } from "./IntsructionsBlock/InstructionsBlock"; interface Props { isModalOpen: boolean; @@ -38,7 +38,6 @@ export default function AnalyticsModal({ const [currentValue, setCurrentValue] = useState( meterNumber ? meterNumber.toString() : "", ); - const [isInstructionOpen, setIsInstructionOpen] = useState(false); const analyticTexts = useMemo(() => { return { yandex: { @@ -64,7 +63,6 @@ export default function AnalyticsModal({ const handleClose = () => { handleCloseModal(); - setIsInstructionOpen(false); if (!meterNumber) { setIsSave(false); setCurrentValue(""); @@ -99,7 +97,6 @@ export default function AnalyticsModal({ const meterNumber = quiz?.config[configName]; setCurrentValue(meterNumber ? meterNumber.toString() : ""); setIsSave(!!meterNumber); - setIsInstructionOpen(false); }, [companyName]); return ( @@ -254,74 +251,12 @@ export default function AnalyticsModal({ )} - - setIsInstructionOpen(!isInstructionOpen)} - sx={{ - cursor: "pointer", - backgroundColor: theme.palette.background.default, - borderRadius: isInstructionOpen ? "12px 12px 0 0" : "12px", - padding: "20px", - border: "1px solid #E5E5E5", - borderBottom: isInstructionOpen ? "none" : "1px solid #E5E5E5", - position: "relative", - }} - > - {isMobile && ( - - )} - - {analyticTexts[companyName]?.instructionTitle} - - - {analyticTexts[companyName]?.instructionSubTitle} - - - {isInstructionOpen && ( - - - {analyticTexts[companyName]?.instructionHeader} - - - {analyticTexts[companyName]?.instructionText} - - - )} - + ); diff --git a/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/InstructionsBlock.tsx b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/InstructionsBlock.tsx new file mode 100644 index 00000000..afa87ee1 --- /dev/null +++ b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/InstructionsBlock.tsx @@ -0,0 +1,88 @@ +import Box from "@mui/material/Box"; +import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; +import { Typography, useMediaQuery, useTheme } from "@mui/material"; +import React, { FC, useState } from "react"; + +type InstructionsBlockProps = { + headerText: string; + subHeaderText: string; + instructionTitle: string; + instructionsText: string; +}; + +export const InstructionsBlock: FC = ({ + headerText, + instructionsText, + subHeaderText, + instructionTitle, +}) => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + const [isInstructionOpen, setIsInstructionOpen] = useState(false); + return ( + + setIsInstructionOpen(!isInstructionOpen)} + sx={{ + cursor: "pointer", + backgroundColor: theme.palette.background.default, + borderRadius: isInstructionOpen ? "12px 12px 0 0" : "12px", + padding: "20px", + border: "1px solid #E5E5E5", + borderBottom: isInstructionOpen ? "none" : "1px solid #E5E5E5", + position: "relative", + }} + > + {isMobile && ( + + )} + + {headerText} + + + {subHeaderText} + + + {isInstructionOpen && ( + + + {instructionTitle} + + + {instructionsText} + + + )} + + ); +};