diff --git a/public/finger.svg b/public/finger.svg new file mode 100644 index 0000000..889b9fb --- /dev/null +++ b/public/finger.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 2391167..7fd935f 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -225,7 +225,9 @@ function Layout({ setIsSpecialOfferOpen }: LayoutProps): JSX.Element { {showNavbar ? ( setIsMenuOpen(false)} /> ) : null} - {showNavbarFooter && hasNavbarFooter(location.pathname) ? ( + { + // showNavbarFooter && + hasNavbarFooter(location.pathname) ? ( ) : null} diff --git a/src/components/CompatResultPage/index.tsx b/src/components/CompatResultPage/index.tsx index 1f37812..92a1249 100644 --- a/src/components/CompatResultPage/index.tsx +++ b/src/components/CompatResultPage/index.tsx @@ -40,9 +40,10 @@ function CompatResultPage(): JSX.Element { if (homeConfig.pathFromHome === EPathsFromHome.compatibility) { return navigate(routes.client.breath()); } + return navigate(routes.client.compatibility()); }; - const handleCompatibility = () => navigate(routes.client.compatibility()); + // const handleCompatibility = () => navigate(routes.client.compatibility()); const loadData = useCallback(async () => { const right_bday = @@ -119,7 +120,7 @@ function CompatResultPage(): JSX.Element { }} /> -
+
{t("you_and", { user: rightUser.name })}
diff --git a/src/components/Compatibility/index.tsx b/src/components/Compatibility/index.tsx index e2b1225..ea3081e 100644 --- a/src/components/Compatibility/index.tsx +++ b/src/components/Compatibility/index.tsx @@ -169,7 +169,7 @@ function CompatibilityPage(): JSX.Element { {!onboardingCompatibility.isShown && <> {currentOnboarding === 0 && ( { if (!name.length) return; if (e.key === "Enter") { - setCurrentOnboarding(1); (e.target as HTMLInputElement).blur(); - dateRef.current?.scrollIntoView({ behavior: "smooth" }); } }} onValid={handleValidName} onInvalid={() => setIsDisabledName(true)} + onBlur={() => { + if (!name.length) return; + setCurrentOnboarding(1); + dateRef.current?.scrollIntoView({ behavior: "smooth" }); + }} />
{currentOnboarding === 2 && !onboardingCompatibility.isShown && ( { onKeyDown: (event: React.KeyboardEvent) => void; onValid: (value: string) => void; onInvalid: () => void; + onBlur: () => void; } const isValidName = (name: string) => { @@ -17,7 +18,8 @@ const isValidName = (name: string) => { }; function NameInput(props: INameInput): JSX.Element { - const { name, value, placeholder, onValid, onInvalid, onKeyDown } = props; + const { name, value, placeholder, onValid, onInvalid, onKeyDown, onBlur } = + props; const [userName, setUserName] = useState(value); const handleChange = (event: React.ChangeEvent) => { setUserName(event.target.value); @@ -40,6 +42,7 @@ function NameInput(props: INameInput): JSX.Element { onChange={handleChange} onKeyDown={onKeyDown} placeholder={placeholder ?? " "} + onBlur={onBlur} />
); diff --git a/src/components/EnergyValues/index.tsx b/src/components/EnergyValues/index.tsx index d073787..4b5118a 100644 --- a/src/components/EnergyValues/index.tsx +++ b/src/components/EnergyValues/index.tsx @@ -14,7 +14,7 @@ const colors: Record = { } const valueFormatter = (value: number) => { - return `${(value * 10).toFixed(1)}%` + return `${(value * 100).toFixed(1)}%` } function EnergyValues({ className, values }: IEnergyValues): JSX.Element { diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx index 8dbf216..a8122d9 100644 --- a/src/components/HomePage/index.tsx +++ b/src/components/HomePage/index.tsx @@ -166,7 +166,7 @@ function HomePage(): JSX.Element { isShowNavbar ? styles["content__buttons--hidden"] : "" }`} > - + setIsShowOnboardingHome(false)} diff --git a/src/components/Navbar/styles.css b/src/components/Navbar/styles.css index 436b636..b028b12 100644 --- a/src/components/Navbar/styles.css +++ b/src/components/Navbar/styles.css @@ -6,7 +6,7 @@ } .navbar.navbar--open { - z-index: 5; + z-index: 99; } .navbar.navbar--open .navbar__panel { diff --git a/src/components/NavbarFooter/index.tsx b/src/components/NavbarFooter/index.tsx index fba02d8..2040dce 100644 --- a/src/components/NavbarFooter/index.tsx +++ b/src/components/NavbarFooter/index.tsx @@ -1,5 +1,11 @@ import { Link } from "react-router-dom"; import styles from "./styles.module.css"; +import Onboarding from "../Onboarding"; +import { useRef, useState } from "react"; +import TextWithFinger from "../TextWithFinger"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; +import { useTranslation } from "react-i18next"; export interface INavbarHomeItems { title: string; @@ -15,6 +21,58 @@ interface INavbarHomeProps { } function NavbarFooter({ items }: INavbarHomeProps): JSX.Element { + const dispatch = useDispatch(); + const { t } = useTranslation(); + const onboardingConfigNavbarFooter = useSelector( + selectors.selectOnboardingNavbarFooter + ); + + const [isShowOnboardingNavbarFooter, setIsShowOnboardingNavbarFooter] = + useState(!onboardingConfigNavbarFooter.isShown); + const [selectedOnboarding, setSelectedOnboarding] = useState(3); + + const buttonsRef = useRef([] as HTMLDivElement[]); + + const setShownOnboarding = () => { + setIsShowOnboardingNavbarFooter(false); + dispatch( + actions.onboardingConfig.update({ + navbarFooter: { + isShown: true, + }, + }) + ); + }; + + const onboardingsSettings = [ + { + text: t("au.web_onbording.breathing"), + onClick: () => setSelectedOnboarding(2), + classNameText: `${styles["breathing-onboarding__text"]} ${styles.onboarding}`, + }, + { + text: t("au.web_onbording.onboarding_2"), + onClick: () => setSelectedOnboarding(2), + }, + { + text: t("au.web_onbording.compatibility"), + onClick: () => setShownOnboarding(), + classNameText: `${styles["compatibility-onboarding__text"]} ${styles.onboarding}`, + }, + { + text: t("au.web_onbording.moon"), + onClick: () => setSelectedOnboarding(0), + classNameText: `${styles["moon-onboarding__text"]} ${styles.onboarding}`, + }, + ]; + + const handleClick = (item: INavbarHomeItems) => { + onboardingsSettings[selectedOnboarding].onClick(); + if (item.onClick) { + item.onClick(); + } + }; + return (
{items.map((item, index) => ( @@ -23,17 +81,33 @@ function NavbarFooter({ items }: INavbarHomeProps): JSX.Element { item.active ? styles["navbar-item--active"] : "" }`} key={index} + ref={(el) => (buttonsRef.current[index] = el as HTMLDivElement)} > + {isShowOnboardingNavbarFooter && ( + + onboardingsSettings[index].onClick()} + classNameText={onboardingsSettings[index].classNameText} + /> + + )} { + handleClick(item); + }} >

{item.title} diff --git a/src/components/NavbarFooter/styles.module.css b/src/components/NavbarFooter/styles.module.css index 5d5730a..f1ebebe 100644 --- a/src/components/NavbarFooter/styles.module.css +++ b/src/components/NavbarFooter/styles.module.css @@ -44,3 +44,16 @@ .navbar-item__image { width: 30px; } + +.onboarding { + width: 188px; + color: #000; +} + +.moon-onboarding__text { + margin-right: 108px; +} + +.breathing-onboarding__text { + margin-left: 108px; +} diff --git a/src/components/Onboarding/index.tsx b/src/components/Onboarding/index.tsx index 0c0b3cd..61be6be 100644 --- a/src/components/Onboarding/index.tsx +++ b/src/components/Onboarding/index.tsx @@ -9,11 +9,12 @@ export enum EDirectionOnboarding { } interface OnboardingProps { - targetRef: React.RefObject; + targetRef: HTMLElement; isShow: boolean; direction?: EDirectionOnboarding; showBackground?: boolean; children: JSX.Element; + classNameContainer?: string; } interface IBoardingCoordinates { top: number; @@ -21,43 +22,43 @@ interface IBoardingCoordinates { } const getCoordinates = ( - targetRef: React.RefObject, + targetRef: HTMLElement, direction: EDirectionOnboarding, onboardingRef: React.RefObject ): IBoardingCoordinates => { - if (targetRef.current && onboardingRef.current) { + if (targetRef && onboardingRef.current) { switch (direction) { case EDirectionOnboarding.LEFT: return { top: - targetRef.current.offsetTop + - targetRef.current.offsetHeight / 2 - + targetRef.offsetTop + + targetRef.offsetHeight / 2 - onboardingRef.current.offsetHeight / 2, left: - targetRef.current.offsetLeft - onboardingRef.current.offsetWidth, + targetRef.offsetLeft - onboardingRef.current.offsetWidth, }; case EDirectionOnboarding.RIGHT: return { top: - targetRef.current.offsetTop + - targetRef.current.offsetHeight / 2 - + targetRef.offsetTop + + targetRef.offsetHeight / 2 - onboardingRef.current.offsetHeight / 2, - left: targetRef.current.offsetLeft + targetRef.current.offsetWidth, + left: targetRef.offsetLeft + targetRef.offsetWidth, }; case EDirectionOnboarding.TOP: return { - top: targetRef.current.offsetTop - onboardingRef.current.offsetHeight, + top: targetRef.offsetTop - onboardingRef.current.offsetHeight, left: - targetRef.current.offsetLeft + - targetRef.current.offsetWidth / 2 - + targetRef.offsetLeft + + targetRef.offsetWidth / 2 - onboardingRef.current.offsetWidth / 2, }; case EDirectionOnboarding.BOTTOM: return { - top: targetRef.current.offsetTop + targetRef.current.offsetHeight, + top: targetRef.offsetTop + targetRef.offsetHeight, left: - targetRef.current.offsetLeft + - targetRef.current.offsetWidth / 2 - + targetRef.offsetLeft + + targetRef.offsetWidth / 2 - onboardingRef.current.offsetWidth / 2, }; } @@ -70,11 +71,12 @@ const getCoordinates = ( const getClassNameContainer = ( direction: EDirectionOnboarding, - showBackground: boolean + showBackground: boolean, + classNameContainer?: string ) => { return `${styles["onboarding-container"]} ${ styles[`direction-${direction}`] - } ${showBackground ? styles["background"] : ""}`; + } ${showBackground ? styles["background"] : ""} ${classNameContainer}`; }; function Onboarding({ @@ -82,6 +84,7 @@ function Onboarding({ isShow, direction = EDirectionOnboarding.TOP, showBackground = false, + classNameContainer = '', children, }: OnboardingProps): JSX.Element { const onboardingRef = useRef(null); @@ -99,10 +102,10 @@ function Onboarding({ } return ( -

+
void; } -function Onboarding({ +function TextWithFinger({ text, showCross = true, direction = EDirectionOnboarding.TOP, + classNameText = "", crossClickHandler, -}: OnboardingProps): JSX.Element { +}: TextWithFingerProps): JSX.Element { return ( <> {text.length && ( -
+
{showCross && (
)} @@ -26,11 +28,11 @@ function Onboarding({ )} finger ); } -export default Onboarding; +export default TextWithFinger; diff --git a/src/components/WallpaperPage/styles.module.css b/src/components/WallpaperPage/styles.module.css index c9d6913..b39600f 100644 --- a/src/components/WallpaperPage/styles.module.css +++ b/src/components/WallpaperPage/styles.module.css @@ -60,15 +60,19 @@ .btn-download { position: absolute; - cursor: pointer; top: 28px; right: 32px; width: 50px; height: 50px; - background-image: url(./Dowload.png); - background-position: center; - background-size: cover; + background-size: 70%; + background-image: url("/Save-icon.png"); background-repeat: no-repeat; + background-position: center center; + -webkit-backdrop-filter: blur(14px); + background-color: #696969; + backdrop-filter: blur(14px); + border-radius: 100%; + cursor: pointer; } .zodiac-metas { diff --git a/src/routes.ts b/src/routes.ts index c3f0a7e..6c47850 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -89,7 +89,7 @@ export const isEntrypoint = (path: string) => entrypoints.includes(path); export const isNotEntrypoint = (path: string) => !isEntrypoint(path); export const withNavigationRoutes = [ routes.client.wallpaper(), - // routes.client.home(), + routes.client.home(), ]; export const hasNavigation = (path: string) => withNavigationRoutes.includes(path); diff --git a/src/store/index.ts b/src/store/index.ts index ba0546d..4ffc371 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -19,6 +19,7 @@ import onboardingConfig, { selectOnboardingBreath, selectOnboardingCompatibility, selectOnboardingHome, + selectOnboardingNavbarFooter, actions as onboardingConfigActions, } from "./onboarding"; import payment, { @@ -90,6 +91,7 @@ export const selectors = { selectOnboardingHome, selectOnboardingCompatibility, selectOnboardingBreath, + selectOnboardingNavbarFooter, ...formSelectors, }; export type RootState = ReturnType; diff --git a/src/store/onboarding.ts b/src/store/onboarding.ts index 0ead691..0a3524b 100644 --- a/src/store/onboarding.ts +++ b/src/store/onboarding.ts @@ -11,6 +11,9 @@ interface IOnboardingConfig { breath: { isShown: boolean; }; + navbarFooter: { + isShown: boolean; + } } const initialState: IOnboardingConfig = { @@ -23,6 +26,9 @@ const initialState: IOnboardingConfig = { breath: { isShown: false, }, + navbarFooter: { + isShown: false + } }; const onboardingConfigSlice = createSlice({ @@ -45,6 +51,10 @@ export const selectOnboardingHome = createSelector( (state: { onboardingConfig: IOnboardingConfig }) => state.onboardingConfig.home, (onboardingConfig) => onboardingConfig ); +export const selectOnboardingNavbarFooter = createSelector( + (state: { onboardingConfig: IOnboardingConfig }) => state.onboardingConfig.navbarFooter, + (onboardingConfig) => onboardingConfig +); export const selectOnboardingCompatibility = createSelector( (state: { onboardingConfig: IOnboardingConfig }) => state.onboardingConfig.compatibility,