From 5ee5385ef95b43a0ebdcf839834eb9c982d6db49 Mon Sep 17 00:00:00 2001 From: gofnnp Date: Sat, 23 Sep 2023 22:16:27 +0400 Subject: [PATCH] feat: attention page buttons, special welcome offer --- public/your-friends.png | Bin 0 -> 10379 bytes src/components/AttentionPage/index.tsx | 7 +- .../AttentionPage/styles.module.css | 7 +- src/components/Header/index.tsx | 96 ++++++++++------- src/components/SpecialWelcomeOffer/index.tsx | 102 ++++++++++++------ .../SpecialWelcomeOffer/styles.module.css | 77 +++++++++---- src/store/index.ts | 3 +- src/store/payment.ts | 30 +++--- 8 files changed, 213 insertions(+), 109 deletions(-) create mode 100644 public/your-friends.png diff --git a/public/your-friends.png b/public/your-friends.png new file mode 100644 index 0000000000000000000000000000000000000000..c979408b434b60f944552218deb7e5f26a2343fb GIT binary patch literal 10379 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 literal 0 HcmV?d00001 diff --git a/src/components/AttentionPage/index.tsx b/src/components/AttentionPage/index.tsx index 1ffda06..1b69440 100644 --- a/src/components/AttentionPage/index.tsx +++ b/src/components/AttentionPage/index.tsx @@ -5,6 +5,7 @@ import routes from '@/routes' import styles from './styles.module.css' // import CheckboxWithText from '../CheckboxWithText' import SpecialWelcomeOffer from '../SpecialWelcomeOffer' +import MainButton from '../MainButton' // import MainButton from '../MainButton' interface AttentionPageProps { @@ -29,9 +30,11 @@ function AttentionPage({ isOpenModal, onCloseSpecialOffer }: AttentionPageProps) stop {t('aura.attention.title')}

{t('aura.warming_up.body')}

-
+
{/* */} - {t('aura.warming_up.button')} + {/* {t('aura.warming_up.button')} */} + {t('aura.warmin_good.button')} + {t('aura.warmin_bad.button')}
) diff --git a/src/components/AttentionPage/styles.module.css b/src/components/AttentionPage/styles.module.css index e815fc1..4185856 100644 --- a/src/components/AttentionPage/styles.module.css +++ b/src/components/AttentionPage/styles.module.css @@ -17,9 +17,12 @@ font-weight: 700; } -.checkbox-container { - width: 80%; +.buttons-container { + width: 100%; margin: 64px auto 0; + display: flex; + flex-direction: column; + gap: 13px; } .button { diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index bbdba66..f9172a9 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,60 +1,84 @@ -import { useState, useEffect } from 'react' -import { useNavigate, useLocation } from 'react-router-dom' -import { useTranslation } from 'react-i18next' -import routes, { hasCrossButton, hasNavigation, isNotEntrypoint } from '@/routes' -import BackButton from './BackButton' -import iconUrl from './icon.png' -import menuUrl from './menu.png' -import styles from './styles.module.css' +import { useState, useEffect } from "react"; +import { useNavigate, useLocation } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import routes, { + hasCrossButton, + hasNavigation, + isNotEntrypoint, +} from "@/routes"; +import BackButton from "./BackButton"; +import iconUrl from "./icon.png"; +import menuUrl from "./menu.png"; +import styles from "./styles.module.css"; type HeaderProps = { - openMenu?: () => void - showBack?: boolean - showCross?: boolean - classCross?: CSSModuleClasses | string - clickCross?: () => void -} + openMenu?: () => void; + showBack?: boolean; + showCross?: boolean; + classCross?: CSSModuleClasses | string; + clickCross?: () => void; +}; -function Header({ openMenu, showBack, showCross, classCross, clickCross = () => {undefined}, ...props }: HeaderProps & React.HTMLAttributes): JSX.Element { - const { t } = useTranslation() - const navigate = useNavigate() - const location = useLocation() +function Header({ + openMenu, + showBack, + showCross = true, + classCross, + clickCross = () => { + undefined; + }, + ...props +}: HeaderProps & React.HTMLAttributes): JSX.Element { + const { t } = useTranslation(); + const navigate = useNavigate(); + const location = useLocation(); const [initialPath, setInitialPath] = useState(null); const [isNavigated, setIsNavigated] = useState(false); - const showBackButton = isNotEntrypoint(location.pathname) - const showMenuButton = hasNavigation(location.pathname) - const showCrossButton = hasCrossButton(location.pathname) + const showBackButton = isNotEntrypoint(location.pathname); + const showMenuButton = hasNavigation(location.pathname); + const showCrossButton = hasCrossButton(location.pathname); useEffect(() => { if (!initialPath) { - setInitialPath(location.pathname) + setInitialPath(location.pathname); } if (initialPath && location.pathname !== initialPath && !isNavigated) { - setIsNavigated(true) + setIsNavigated(true); } - }, [location.pathname, initialPath, isNavigated]) + }, [location.pathname, initialPath, isNavigated]); const goBack = () => { if (initialPath && isNotEntrypoint(initialPath) && !isNavigated) { - navigate(routes.client.root()) + navigate(routes.client.root()); } else { - navigate(-1) + navigate(-1); } - } + }; return (
- { (showBackButton || showBack) ? : null } -
+ {showBackButton || showBack ? ( + + ) : null} +
logo - {t('app_name')} + {t("app_name")}
- {(showCrossButton || showCross) ? Cross : null} - {showMenuButton ?
- menu -
: null} + {showCrossButton && showCross ? ( + Cross + ) : null} + {showMenuButton ? ( +
+ menu +
+ ) : null}
- ) + ); } -export default Header +export default Header; diff --git a/src/components/SpecialWelcomeOffer/index.tsx b/src/components/SpecialWelcomeOffer/index.tsx index 35c178c..eea012e 100644 --- a/src/components/SpecialWelcomeOffer/index.tsx +++ b/src/components/SpecialWelcomeOffer/index.tsx @@ -1,52 +1,86 @@ -import { useNavigate } from 'react-router-dom' -import { useTranslation } from 'react-i18next' -import Title from '../Title' -import routes from '@/routes' -import styles from './styles.module.css' -import ModalTop from '../ModalTop' -import Header from '../Header' -import { useCallback } from 'react' -import { useDispatch } from 'react-redux' -import { actions } from '@/store' +import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import Title from "../Title"; +import routes from "@/routes"; +import styles from "./styles.module.css"; +import ModalTop from "../ModalTop"; +import Header from "../Header"; +import { useCallback } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; +import MainButton from "../MainButton"; interface ModalTopProps { - open: boolean - onClose?: () => void + open: boolean; + onClose?: () => void; } function SpecialWelcomeOffer({ open, onClose }: ModalTopProps): JSX.Element { - const { t } = useTranslation() - const navigate = useNavigate() - const dispatch = useDispatch() - const updateSelectedPrice = useCallback((selectedPrice: number | null) => { - dispatch(actions.payment.update({ - selectedPrice - })) - }, [dispatch]) + const { t } = useTranslation(); + const navigate = useNavigate(); + const dispatch = useDispatch(); + const selectedPrice = useSelector(selectors.selectSelectedPrice); + const halfPrice = (Math.round(selectedPrice || 0) / 2).toFixed(2); + const updateIsDiscount = useCallback((isDiscount: boolean) => { + dispatch( + actions.payment.update({ + isDiscount + }) + ); + }, [dispatch]); const handleNext = () => { - updateSelectedPrice(1) - navigate(routes.client.emailEnter()) - } - + updateIsDiscount(true); + navigate(routes.client.paymentMethod()); + }; return ( <> {open ? ( -
+
- {t('special_welcome_offer')} - {t('get_100_off')} -
- $9.99 - $0.00 + {/* {t('special_welcome_offer')} */} + Your friends + + {t("au.friends.window")} + + + {t("au.get50.only")} + +
+ {Number(halfPrice) > 0 && + <> + ${selectedPrice}{" "} + –${halfPrice} + + } + {!Number(halfPrice) && {t('au.free_trial_web.7_14')}}
- + + $ {halfPrice} – {t("au.try_for.button")} + + { + console.log("click"); + }} + > + Leo + {t("au.more_llc.button")} +
- ): null} + ) : null} - ) + ); } -export default SpecialWelcomeOffer +export default SpecialWelcomeOffer; diff --git a/src/components/SpecialWelcomeOffer/styles.module.css b/src/components/SpecialWelcomeOffer/styles.module.css index 7f26c9c..c52c4e2 100644 --- a/src/components/SpecialWelcomeOffer/styles.module.css +++ b/src/components/SpecialWelcomeOffer/styles.module.css @@ -1,40 +1,73 @@ - - .content { - padding: 0 24px 64px 24px; - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - padding-top: 28px; + padding: 0 24px 64px 24px; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + padding-top: 28px; } .welcome-offer { - color: #717171; - font-weight: 500; + color: #717171; + font-weight: 500; } .discount-container { - display: flex; - flex-direction: row; - gap: 16px; - font-size: 24px; - font-weight: 600; + display: flex; + flex-direction: row; + gap: 16px; + font-size: 32px; + font-weight: 600; + margin-bottom: 32px; } .red-price { - color: red; - text-decoration: line-through; + color: red; + text-decoration: line-through; } -.button { - background-color: #69e573; - color: #fff; +.button-green { + background-color: #18d136; + font-weight: 600; + font-size: 21px; + /* color: #fff; border-radius: 26px; width: 100%; max-width: 300px; padding: 12px 0; border: none; font-size: 14px; - margin-top: 16px; -} \ No newline at end of file + margin-top: 16px; */ +} + +.button-black { + font-weight: 600; + font-size: 21px; + position: relative; +} + +.your-friends { + width: 80%; + font-weight: 600; + margin-bottom: 8px; +} + +.get-50-only { + margin-bottom: 0; + font-weight: 700; + color: #ff003d; +} + +.button-icon { + position: absolute; + width: 48px; + top: 50%; + left: 13px; + transform: translateY(-50%); + +} + +.free-trial { + font-size: 22px; + font-weight: 600; +} diff --git a/src/store/index.ts b/src/store/index.ts index 7ca2fcf..56f127e 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -4,7 +4,7 @@ import user, { actions as userActions, selectUser } from './user' import form, { actions as formActions, selectors as formSelectors } from './form' import aura, { actions as auraActions } from './aura' import siteConfig, { selectHome, actions as siteConfigActions } from './siteConfig' -import payment, { actions as paymentActions } from './payment' +import payment, { actions as paymentActions, selectIsDiscount } from './payment' import subscriptionPlans, { actions as subscriptionPlasActions, selectPlanById } from './subscriptionPlan' import status, { actions as userStatusActions, selectStatus } from './status' import compatibility, { actions as compatibilityActions } from './compatibility' @@ -44,6 +44,7 @@ export const selectors = { selectUserCallbacksDescription, selectUserCallbacksPrevStat, selectHome, + selectIsDiscount, ...formSelectors, } export type RootState = ReturnType diff --git a/src/store/payment.ts b/src/store/payment.ts index 8cf8135..c4d7de4 100644 --- a/src/store/payment.ts +++ b/src/store/payment.ts @@ -1,28 +1,34 @@ -import { createSlice, createSelector } from '@reduxjs/toolkit' -import type { PayloadAction } from '@reduxjs/toolkit' +import { createSlice, createSelector } from "@reduxjs/toolkit"; +import type { PayloadAction } from "@reduxjs/toolkit"; interface IPayment { - selectedPrice: number | null + selectedPrice: number | null; + isDiscount: boolean; } const initialState: IPayment = { - selectedPrice: null -} + selectedPrice: null, + isDiscount: false, +}; const paymentSlice = createSlice({ - name: 'payment', + name: "payment", initialState, reducers: { update(state, action: PayloadAction>) { - return { ...state, ...action.payload } + return { ...state, ...action.payload }; }, }, - extraReducers: (builder) => builder.addCase('reset', () => initialState), -}) + extraReducers: (builder) => builder.addCase("reset", () => initialState), +}); -export const { actions } = paymentSlice +export const { actions } = paymentSlice; export const selectSelectedPrice = createSelector( (state: { payment: IPayment }) => state.payment.selectedPrice, (payment) => payment -) -export default paymentSlice.reducer +); +export const selectIsDiscount = createSelector( + (state: { payment: IPayment }) => state.payment.isDiscount, + (payment) => payment +); +export default paymentSlice.reducer;