From e9e35f81d3c0ef9e7cfd2d70e68ff8b0d6e9ec0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?= =?UTF-8?q?=D0=B5=D0=B2?= Date: Thu, 21 Dec 2023 23:21:51 +0000 Subject: [PATCH] feat: add modal with required data --- src/components/App/index.tsx | 39 ++++++++++- src/components/FullDataModal/index.tsx | 42 +++++++++++ .../FullDataModal/styles.module.css | 0 src/components/HomePage/index.tsx | 70 ++++++++++--------- src/components/Modal/index.tsx | 38 ++++++---- .../Modal/{styles.css => styles.module.css} | 4 ++ src/components/NameHoroscopeSlider/index.tsx | 6 +- src/components/ThermalSlider/index.tsx | 2 +- src/components/WallpapersZodiacSign/index.tsx | 17 ++--- src/routes.ts | 5 ++ src/services/zodiac-sign/index.ts | 2 +- 11 files changed, 161 insertions(+), 64 deletions(-) create mode 100644 src/components/FullDataModal/index.tsx create mode 100644 src/components/FullDataModal/styles.module.css rename src/components/Modal/{styles.css => styles.module.css} (96%) diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 4a51a86..43bc5f1 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from "react"; +import { useCallback, useEffect, useMemo, useState } from "react"; import { Routes, Route, @@ -16,6 +16,7 @@ import routes, { hasNoFooter, hasNoHeader, hasNavbarFooter, + hasFullDataModal, } from "@/routes"; import BirthdayPage from "../BirthdayPage"; import BirthtimePage from "../BirthtimePage"; @@ -59,6 +60,8 @@ import ThermalResult from "../pages/ThermalResult"; import MoonPhaseTrackerResult from "../pages/MoonPhaseTrackerResult"; import EnergyVampirismResult from "../pages/EnergyVampirismResult"; import NameHoroscopeResult from "../pages/NameHoroscopeResult"; +import Modal from "../Modal"; +import FullDataModal from "../FullDataModal"; function App(): JSX.Element { const [isSpecialOfferOpen, setIsSpecialOfferOpen] = useState(false); @@ -282,11 +285,27 @@ function Layout({ setIsSpecialOfferOpen }: LayoutProps): JSX.Element { const showNavbar = hasNavigation(location.pathname); const showFooter = hasNoFooter(location.pathname); const showHeader = hasNoHeader(location.pathname); + const isRouteFullDataModal = hasFullDataModal(location.pathname); const [isMenuOpen, setIsMenuOpen] = useState(false); const changeIsSpecialOfferOpen = () => setIsSpecialOfferOpen(true); const homeConfig = useSelector(selectors.selectHome); const showNavbarFooter = homeConfig.isShowNavbar; + const birthdate = useSelector(selectors.selectBirthdate); + const dataItems = useMemo(() => [birthdate], [birthdate]); + const [isShowFullDataModal, setIsShowFullDataModal] = + useState(false); + + useEffect(() => { + setIsShowFullDataModal(getIsShowFullDataModal(dataItems)); + }, [dataItems]); + + const onCloseFullDataModal = (_birthDate: string) => { + console.log("onCloseFullDataModal", _birthDate); + dispatch(actions.form.addDate(_birthDate)); + setIsShowFullDataModal(getIsShowFullDataModal(dataItems)); + }; + const handleCompatibility = () => { dispatch( actions.siteConfig.update({ @@ -353,6 +372,11 @@ function Layout({ setIsSpecialOfferOpen }: LayoutProps): JSX.Element { clickCross={changeIsSpecialOfferOpen} /> ) : null} + {isRouteFullDataModal && ( + + + + )}
@@ -397,6 +421,19 @@ function PrivateSubscriptionOutlet(): JSX.Element { ); } +function getIsShowFullDataModal(dataItems: Array = []): boolean { + let hasNoDataItem = false; + + for (const item of dataItems) { + if (!item) { + hasNoDataItem = true; + break; + } + } + + return hasNoDataItem; +} + function SkipStep(): JSX.Element { const { user } = useAuth(); return user ? ( diff --git a/src/components/FullDataModal/index.tsx b/src/components/FullDataModal/index.tsx new file mode 100644 index 0000000..23b4fec --- /dev/null +++ b/src/components/FullDataModal/index.tsx @@ -0,0 +1,42 @@ +import { useSelector } from "react-redux"; +import { DatePicker } from "../DateTimePicker"; +import Title from "../Title"; +import styles from "./styles.module.css"; +import { selectors } from "@/store"; +import { useState } from "react"; +import { useTranslation } from "react-i18next"; +import MainButton from "../MainButton"; + +interface IFullDataModalProps { + onClose: (birthDate: string) => void; +} + +function FullDataModal({ onClose }: IFullDataModalProps) { + const { t } = useTranslation(); + const birthDateFromStore = useSelector(selectors.selectBirthdate); + const [birthDate, setBirthDate] = useState(birthDateFromStore); + const [isDisabled, setIsDisabled] = useState(true); + + const handleValid = (_birthDate: string) => { + setBirthDate(_birthDate); + setIsDisabled(_birthDate === ""); + }; + + return ( +
+ {t("date_of_birth")} + setIsDisabled(true)} + inputClassName="date-picker-input" + /> + onClose(birthDate)}> + Save + +
+ ); +} + +export default FullDataModal; diff --git a/src/components/FullDataModal/styles.module.css b/src/components/FullDataModal/styles.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx index 7f3ebd6..fc1c08b 100644 --- a/src/components/HomePage/index.tsx +++ b/src/components/HomePage/index.tsx @@ -148,7 +148,7 @@ function HomePage(): JSX.Element { useEffect(() => { getMoonsImages(); - }, []); + }, [api]); const getMoonsImages = async () => { const assets = ( @@ -288,22 +288,24 @@ function HomePage(): JSX.Element { {/* SLIDERS */}
-
- - {"Your Besties' Horoscope"} - - - {compatibilities.map((item, index) => ( - { - handleBestiesHoroscope(item); - }} - /> - ))} - -
+ {!!compatibilities.length && ( +
+ + {"Your Besties' Horoscope"} + + + {compatibilities.map((item, index) => ( + { + handleBestiesHoroscope(item); + }} + /> + ))} + +
+ )}
{"Prediction Based on Your Moons"} @@ -357,22 +359,24 @@ function HomePage(): JSX.Element { {/* SLIDERS */} <div className={styles.sliders}> - <div className={styles["slider"]}> - <Title variant="h2" className={styles["sliders__title"]}> - {t("au.thermal_compatibility.result_title")} - - - {compatibilities.map((item, index) => ( - { - handleThermal(item); - }} - /> - ))} - -
+ {!!compatibilities.length && ( +
+ + {t("au.thermal_compatibility.result_title")} + + + {compatibilities.map((item, index) => ( + { + handleThermal(item); + }} + /> + ))} + +
+ )}
{/* END SLIDERS */} diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 4d9b854..ded1489 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -1,26 +1,34 @@ -import { ReactNode } from 'react' -import './styles.css' +import { ReactNode } from "react"; +import styles from "./styles.module.css"; interface ModalProps { - children: ReactNode - open?: boolean - onClose?: () => void + children: ReactNode; + open?: boolean; + isCloseButtonVisible?: boolean; + onClose?: () => void; } -function Modal({ open, children, onClose }: ModalProps): JSX.Element { +function Modal({ + open, + children, + isCloseButtonVisible = true, + onClose, +}: ModalProps): JSX.Element { const handleClose = (event: React.MouseEvent) => { - if (event.target !== event.currentTarget) return - onClose?.() - } - if (!open) return <> + if (event.target !== event.currentTarget) return; + onClose?.(); + }; + if (!open) return <>; return ( -
-
-
- ) + ); } -export default Modal +export default Modal; diff --git a/src/components/Modal/styles.css b/src/components/Modal/styles.module.css similarity index 96% rename from src/components/Modal/styles.css rename to src/components/Modal/styles.module.css index 95b9a49..ffdbec5 100644 --- a/src/components/Modal/styles.css +++ b/src/components/Modal/styles.module.css @@ -27,6 +27,10 @@ transform: translate(-50%,-50%); } +.modal-content::-webkit-scrollbar { + width: 0; +} + .modal-close-btn { display: flex; position: absolute; diff --git a/src/components/NameHoroscopeSlider/index.tsx b/src/components/NameHoroscopeSlider/index.tsx index 481a969..27e8c0e 100644 --- a/src/components/NameHoroscopeSlider/index.tsx +++ b/src/components/NameHoroscopeSlider/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import styles from "./styles.module.css"; import { getCategoryIdByZodiacSign, @@ -28,7 +28,7 @@ function NameHoroscopeSlider({ const { i18n } = useTranslation(); const locale = i18n.language; const birthDate = useSelector(selectors.selectBirthdate); - const zodiacSign = getZodiacSignByDate(birthDate); + const zodiacSign = useMemo(() => getZodiacSignByDate(birthDate), [birthDate]); const [backgroundUrl, setBackgroundUrl] = useState(""); useEffect(() => { @@ -48,7 +48,7 @@ function NameHoroscopeSlider({ console.error("Error: ", error); } })(); - }, []); + }, [api, locale, zodiacSign]); return (
(); - const { - user, - // token - } = useAuth(); const birthdate = useSelector(selectors.selectBirthdate); - const zodiacSign = getZodiacSignByDate(birthdate); - const category = user?.profile.sign?.sign || ""; + const zodiacSign = useMemo(() => getZodiacSignByDate(birthdate), [birthdate]); const getZodiacWallpaper = async () => { const { asset_categories } = await api.getAssetCategories({ locale }); @@ -38,11 +32,14 @@ function WallpapersZodiacSign(): JSX.Element { useEffect(() => { getZodiacWallpaper(); - }, []); + }, [api, locale, zodiacSign]); const saveImage = () => asset && - saveFile(asset.url.replace("http://", "https://"), buildFilename(category)); + saveFile( + asset.url.replace("http://", "https://"), + buildFilename(zodiacSign) + ); return (
{ return !withoutHeaderRoutes.includes(`/${path.split("/")[1]}`); }; +export const withFullDataModalRoutes = [routes.client.home()]; +export const hasFullDataModal = (path: string) => { + return withFullDataModalRoutes.includes(`/${path.split("/")[1]}`); +}; + export const getRouteBy = (status: UserStatus): string => { switch (status) { case "lead": diff --git a/src/services/zodiac-sign/index.ts b/src/services/zodiac-sign/index.ts index 9a5505e..f93b108 100644 --- a/src/services/zodiac-sign/index.ts +++ b/src/services/zodiac-sign/index.ts @@ -28,7 +28,7 @@ export const getCategoryIdByZodiacSign = ( categories: AssetCategory[] ) => { const categoryId = categories.find( - (category) => category.slug === zodiacSign.toLowerCase() + (category) => category.slug === zodiacSign?.toLowerCase() )?.id; return categoryId; };