From 64bdc084524485ac138449bcaf2e58f2e0c08884 Mon Sep 17 00:00:00 2001 From: gofnnp Date: Sat, 23 Sep 2023 02:50:29 +0400 Subject: [PATCH] feat: infinity months date picker, texts from translate v2, prices from chosen --- src/components/App/index.tsx | 4 ++-- src/components/CompatResultPage/index.tsx | 21 +++++++++++++++-- .../Compatibility/DatePicker.module.css | 3 ++- src/components/Compatibility/DatePicker.tsx | 8 +++---- .../Compatibility/DatePickerItem.tsx | 23 +++++++++++++++---- src/components/Compatibility/index.tsx | 2 +- .../Compatibility/styles.module.css | 2 +- src/components/CompatibilityLoading/index.tsx | 18 +++++++++++++++ .../CompatibilityLoading/styles.module.css | 12 ++++++++++ src/components/DidYouKnowPage/index.tsx | 16 ++++++------- src/components/EmailEnterPage/index.tsx | 10 ++++---- src/components/HomePage/index.tsx | 2 +- src/components/PaymentTable/index.tsx | 4 ++-- src/components/Policy/styles.css | 2 +- src/components/PriceItem/index.tsx | 12 ++++++---- src/components/PriceItem/styles.module.css | 5 ++-- src/components/PriceList/index.tsx | 23 ++++++++++++++++++- src/components/PriceListPage/index.tsx | 2 +- src/components/SubscriptionPage/index.tsx | 10 +++++++- src/locales/dev.ts | 4 ++-- src/routes.ts | 2 +- 21 files changed, 140 insertions(+), 45 deletions(-) create mode 100644 src/components/CompatibilityLoading/index.tsx create mode 100644 src/components/CompatibilityLoading/styles.module.css diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index aadad84..d5d25ee 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -34,7 +34,7 @@ function App(): JSX.Element { const [isSpecialOfferOpen, setIsSpecialOfferOpen] = useState(false) const navigate = useNavigate() - const closeSpecialOffer = () => { + const closeSpecialOfferAttention = () => { setIsSpecialOfferOpen(false) navigate(routes.client.emailEnter()) } @@ -46,7 +46,7 @@ function App(): JSX.Element { } /> } /> } /> - } /> + } /> } /> } /> } /> diff --git a/src/components/CompatResultPage/index.tsx b/src/components/CompatResultPage/index.tsx index 023474b..d4d4c38 100644 --- a/src/components/CompatResultPage/index.tsx +++ b/src/components/CompatResultPage/index.tsx @@ -3,11 +3,13 @@ import Title from "../Title"; import styles from "./styles.module.css"; import { useDispatch, useSelector } from "react-redux"; import { actions, selectors } from "@/store"; -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { AICompats, AIRequests, useApi, useApiCall } from "@/api"; import { useNavigate } from "react-router-dom"; import routes from "@/routes"; import { EPathsFromHome } from "@/store/siteConfig"; +import FullScreenModal from "../FullScreenModal"; +import CompatibilityLoading from "../CompatibilityLoading"; function CompatResultPage(): JSX.Element { const token = @@ -21,6 +23,18 @@ function CompatResultPage(): JSX.Element { const categoryId = useSelector(selectors.selectCategoryId); const homeConfig = useSelector(selectors.selectHome); const [text, setText] = useState("Loading..."); + const [isOpenModal, setIsOpenModal] = useState(true); + + useEffect(() => { + const timeOut = setTimeout(() => { + setIsOpenModal(false) + }, 5000) + + return () => { + clearTimeout(timeOut) + } + }, []) + const handleNext = () => { dispatch( @@ -75,6 +89,9 @@ function CompatResultPage(): JSX.Element { return (
+ + + {text !== "Loading..." && (
)} @@ -103,7 +120,7 @@ function CompatResultPage(): JSX.Element { )} {text !== "Loading..." && homeConfig.pathFromHome === EPathsFromHome.breath && ( - )} diff --git a/src/components/Compatibility/DatePicker.module.css b/src/components/Compatibility/DatePicker.module.css index d898069..1c8f36a 100644 --- a/src/components/Compatibility/DatePicker.module.css +++ b/src/components/Compatibility/DatePicker.module.css @@ -79,7 +79,8 @@ color: #a09b9b; } .date-picker-item.selected { - color: white; + font-weight: 600; + color: #fff; } /* Header and confirm button */ diff --git a/src/components/Compatibility/DatePicker.tsx b/src/components/Compatibility/DatePicker.tsx index 1e96fe3..908782a 100644 --- a/src/components/Compatibility/DatePicker.tsx +++ b/src/components/Compatibility/DatePicker.tsx @@ -19,7 +19,7 @@ const DatePicker: React.FC = ({ ); const days = Array.from({ length: 31 }, (_, index) => (index + 1).toString()); - const months = Array.from({ length: 12 }, (_, index) => + const months = Array.from({ length: 36 }, (_, index) => new Date(0, index).toLocaleDateString(undefined, { month: "long" }) ); const years = Array.from({ length: 81 }, (_, index) => @@ -27,19 +27,19 @@ const DatePicker: React.FC = ({ ); const handleDaySelect = (day: string) => { - const newDate = new Date(getDateAsString(selectedDate)); + const newDate = new Date(getDateAsString(selectedDate).replace(/-/g, "/")); newDate.setDate(parseInt(day)); setSelectedDate(getDateAsString(newDate)); }; const handleMonthSelect = (month: string) => { - const newDate = new Date(getDateAsString(selectedDate)); + const newDate = new Date(getDateAsString(selectedDate).replace(/-/g, "/")); newDate.setMonth(months.indexOf(month)); setSelectedDate(getDateAsString(newDate)); }; const handleYearSelect = (year: string) => { - const newDate = new Date(getDateAsString(selectedDate)); + const newDate = new Date(getDateAsString(selectedDate).replace(/-/g, "/")); newDate.setFullYear(parseInt(year)); setSelectedDate(getDateAsString(newDate)); }; diff --git a/src/components/Compatibility/DatePickerItem.tsx b/src/components/Compatibility/DatePickerItem.tsx index c5f4136..7479368 100644 --- a/src/components/Compatibility/DatePickerItem.tsx +++ b/src/components/Compatibility/DatePickerItem.tsx @@ -24,17 +24,14 @@ const DatePickerItem: React.FC = ({ data, selectedValue, onSelect, - unit + unit, }) => { - console.log(selectedValue); - console.log(data); - const isMobile = useIsMobile(); const scrollRef = useRef(null); const [touchY, setTouchY] = useState(0); const [translateY, setTranslateY] = useState( - data.indexOf(selectedValue) * -ITEM_HEIGHT + (data.indexOf(selectedValue) + (unit === "month" ? 12 : 0)) * -ITEM_HEIGHT ); const handleTouchStart = (event: React.TouchEvent) => { @@ -45,10 +42,26 @@ const DatePickerItem: React.FC = ({ if (isMobile && touchY !== null) { const deltaY = event.touches[0].clientY - touchY; wheelScroll(deltaY); + setTouchY(event.touches[0].clientY); } }; + useEffect(() => { + setTranslateY((data.indexOf(selectedValue) + (unit === "month" ? 12 : 0)) * -ITEM_HEIGHT) + }, [selectedValue, data, unit]) + + useEffect(() => { + if (unit === "month") { + if ( + data.indexOf(selectedValue) < 12 || + data.indexOf(selectedValue) > 23 + ) { + setTranslateY((data.indexOf(selectedValue) + 12) * -ITEM_HEIGHT); + } + } + }, [unit, data, selectedValue]); + const handleTouchEnd = () => { if (isMobile && scrollRef.current) { const selectedIndex = Math.round(-translateY / ITEM_HEIGHT); diff --git a/src/components/Compatibility/index.tsx b/src/components/Compatibility/index.tsx index 2980b75..58c1a94 100644 --- a/src/components/Compatibility/index.tsx +++ b/src/components/Compatibility/index.tsx @@ -53,7 +53,7 @@ function CompatibilityPage(): JSX.Element { }; const handleValidDate = (date: string | IDate) => { - setIsDisabledDate(date === ''); + setIsDisabledDate(date === ""); setSelectedDate(date); checkAllDisabled(); }; diff --git a/src/components/Compatibility/styles.module.css b/src/components/Compatibility/styles.module.css index 3b3ec25..f1476e5 100644 --- a/src/components/Compatibility/styles.module.css +++ b/src/components/Compatibility/styles.module.css @@ -127,7 +127,7 @@ .compatibility-categories { display: flex; flex-direction: column; - gap: 32px; + gap: 16px; margin-top: 72px; } diff --git a/src/components/CompatibilityLoading/index.tsx b/src/components/CompatibilityLoading/index.tsx new file mode 100644 index 0000000..45315a7 --- /dev/null +++ b/src/components/CompatibilityLoading/index.tsx @@ -0,0 +1,18 @@ +import Title from "../Title"; +import styles from "./styles.module.css"; + +// interface ICompatibilityLoadingProps { +// onEndLoading: () => void; +// } + +function CompatibilityLoading(): JSX.Element { + return ( +
+ + Analysis of you with Viktor Ershov + +
+ ); +} + +export default CompatibilityLoading; diff --git a/src/components/CompatibilityLoading/styles.module.css b/src/components/CompatibilityLoading/styles.module.css new file mode 100644 index 0000000..a3d1079 --- /dev/null +++ b/src/components/CompatibilityLoading/styles.module.css @@ -0,0 +1,12 @@ +.container { + padding: 16px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.title { + color: #fd3761; + font-weight: 600; +} \ No newline at end of file diff --git a/src/components/DidYouKnowPage/index.tsx b/src/components/DidYouKnowPage/index.tsx index b981932..23aedb4 100644 --- a/src/components/DidYouKnowPage/index.tsx +++ b/src/components/DidYouKnowPage/index.tsx @@ -7,24 +7,24 @@ import styles from './styles.module.css' import { useSelector } from 'react-redux' import { selectors } from '@/store' import { getZodiacSignByDate } from '@/services/zodiac-sign' -import SpecialWelcomeOffer from '../SpecialWelcomeOffer' -import { useState } from 'react' +// import SpecialWelcomeOffer from '../SpecialWelcomeOffer' +// import { useState } from 'react' function DidYouKnowPage(): JSX.Element { const { t } = useTranslation() const navigate = useNavigate() const handleNext = () => navigate(routes.client.freePeriodInfo()) - const [isOpenModal, setIsOpenModal] = useState(false) - const handleSpecialOffer = () => { - setIsOpenModal(true) - } + // const [isOpenModal, setIsOpenModal] = useState(false) + // const handleSpecialOffer = () => { + // setIsOpenModal(true) + // } const birthdate = useSelector(selectors.selectBirthdate) const zodiacSign = getZodiacSignByDate(birthdate) return (
- + {/* */}
{t('did_you_know')}

@@ -35,7 +35,7 @@ function DidYouKnowPage(): JSX.Element { {t('learn_about_my_energy')} - {t('skip_for_now')} + {t('skip_for_now')}

) diff --git a/src/components/EmailEnterPage/index.tsx b/src/components/EmailEnterPage/index.tsx index 9f23742..fe885a1 100644 --- a/src/components/EmailEnterPage/index.tsx +++ b/src/components/EmailEnterPage/index.tsx @@ -61,7 +61,7 @@ function EmailEnterPage(): JSX.Element { return (
- {t('we_will_email_you')} + {t('aura.web.email_title')} setIsDisabled(true)} /> -

{t('we_dont_share')}

+

{t('we_dont_share')}

+ + {isLoading ? : t('_continue')} + {t('_continue_agree', { eulaLink: {t('eula')}, privacyLink: {t('privacy_policy')}, })} - - {isLoading ? : t('_continue')} -
) diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx index c276ad0..852c504 100644 --- a/src/components/HomePage/index.tsx +++ b/src/components/HomePage/index.tsx @@ -162,7 +162,7 @@ function HomePage(): JSX.Element { {/* */} -
+

{item.description}

-

One dollar thirty six cents per day

+ {/*

One dollar thirty six cents per day

*/}
) @@ -44,7 +44,7 @@ function PaymentTable({ currency, locale, items }: PaymentTableProps): JSX.Eleme {items.map(toItem)}
-
{t('charged_only')}
+
{t('charged_only', {price: totalPrice.format()})}
) } diff --git a/src/components/Policy/styles.css b/src/components/Policy/styles.css index 74daa21..ed5de2c 100644 --- a/src/components/Policy/styles.css +++ b/src/components/Policy/styles.css @@ -3,7 +3,7 @@ flex-direction: column; max-width: 400px; width: 100%; - margin-top: 20px; + margin-top: 8px; margin-bottom: 6px; text-align: center; } diff --git a/src/components/PriceItem/index.tsx b/src/components/PriceItem/index.tsx index 9d64cd1..e1ed527 100644 --- a/src/components/PriceItem/index.tsx +++ b/src/components/PriceItem/index.tsx @@ -23,7 +23,7 @@ const removeAfterDot = (value: string): string => { interface PriceItemProps { active: boolean; - click: () => void; + click: (id: number) => void; } function PriceItem({ @@ -38,12 +38,16 @@ function PriceItem({ const compatClassName = () => { const isPopular = id === 3; - // const isActive = active; - return `${styles.container} ${isPopular ? styles.popular : ""}`; + const isActive = active; + return `${styles.container} ${isPopular ? styles.popular : ""} ${isActive ? styles.active : ""}`; }; + const itemClick = () => { + click(id); + } + return ( -
+
{removeAfterDot(_price.format())}
); diff --git a/src/components/PriceItem/styles.module.css b/src/components/PriceItem/styles.module.css index 611f93b..ce10771 100644 --- a/src/components/PriceItem/styles.module.css +++ b/src/components/PriceItem/styles.module.css @@ -10,11 +10,12 @@ border: solid #d6d2d2 2px; font-weight: 600; cursor: pointer; + transition: background-color 0.3s, color 0.3s; } .active { - background-color: #30bf52; - border-color: #30bf52; + background-color: #d6d2d2; + border-color: #d6d2d2 !important; color: #fff; } diff --git a/src/components/PriceList/index.tsx b/src/components/PriceList/index.tsx index 4e450e1..372874f 100644 --- a/src/components/PriceList/index.tsx +++ b/src/components/PriceList/index.tsx @@ -1,5 +1,8 @@ +import { useState } from 'react' import PriceItem from '../PriceItem' import styles from './styles.module.css' +import { useDispatch } from 'react-redux' +import { actions } from '@/store' export interface IPrice { id: number @@ -31,11 +34,29 @@ interface PriceListProps { } function PriceList({click, activeItem}: PriceListProps): JSX.Element { + const dispatch = useDispatch(); + const [activePriceItem, setActivePriceItem] = useState(activeItem) + + const priceItemClick = (id: number) => { + console.log(id); + setActivePriceItem(id) + const activePriceItem = prices.find((item) => item.id === Number(id)) + if (activePriceItem) { + dispatch( + actions.payment.update({ + selectedPrice: activePriceItem.value + }) + ); + } + setTimeout(() => { + click() + }, 1000) + } return (
{prices.map((price, idx) => ( - + ))}
) diff --git a/src/components/PriceListPage/index.tsx b/src/components/PriceListPage/index.tsx index 8ddf05b..544221b 100644 --- a/src/components/PriceListPage/index.tsx +++ b/src/components/PriceListPage/index.tsx @@ -31,7 +31,7 @@ function PriceListPage(): JSX.Element {
{t('choose_your_own_fee')} -

{t('should_not_get', { strongText: {t('money')} })}

+

{t('should_not_get', { strongText: {t('aura.web.price_selection')} })}

diff --git a/src/components/SubscriptionPage/index.tsx b/src/components/SubscriptionPage/index.tsx index b70d8c6..5c0bb83 100644 --- a/src/components/SubscriptionPage/index.tsx +++ b/src/components/SubscriptionPage/index.tsx @@ -11,6 +11,8 @@ import CallToAction from "../CallToAction"; import routes from "@/routes"; import styles from "./styles.module.css"; import Header from "../Header"; +import SpecialWelcomeOffer from "../SpecialWelcomeOffer"; +import { useState } from "react"; const currency = Currency.USD; const locale = Locale.EN; @@ -24,12 +26,17 @@ const paymentItems = [ ]; function SubscriptionPage(): JSX.Element { + const [isOpenModal, setIsOpenModal] = useState(false); const { t } = useTranslation(); const navigate = useNavigate(); const email = useSelector(selectors.selectEmail); const itemPrice = useSelector(selectors.selectPlanById(itemPriceId)); + const selectedPrice = useSelector(selectors.selectSelectedPrice); + if (selectedPrice || selectedPrice === 0) { + paymentItems[0].price = selectedPrice; + } const handleClick = () => navigate(routes.client.paymentMethod()); - const handleCross = () => navigate(routes.client.home()); + const handleCross = () => setIsOpenModal(true); const policyLink = ( {t("subscription_policy")} @@ -38,6 +45,7 @@ function SubscriptionPage(): JSX.Element { console.log({ itemPrice }); return ( <> +
diff --git a/src/locales/dev.ts b/src/locales/dev.ts index d099e2f..91b0dc0 100644 --- a/src/locales/dev.ts +++ b/src/locales/dev.ts @@ -32,12 +32,12 @@ export default { unexpected_error: 'Sorry, an unexpected error has occurred.', oops: "Oops!", total_today: "Total today", - charged_only: "You will be charged only $1 for your 7-day trial. We'll email you a reminder before your trial period ends. Cancel anytime.", + charged_only: "You will be charged only for your 7-day trial. We'll email you a reminder before your trial period ends. Cancel anytime.", purposes: "For entertaiment purposes only.", get_access: "Get access", subscription_text: "By proceeding, you agree that if you do not cancel your subscription before the end of the 7-day trial period, you will be automatically charged nineteen US dollars zero cents every 2 weeks until you cancel the subscription in the settings. Learn more about cancellation and refund policy in ", subscription_policy: "Subscription policy", - company_name: "Wit LLC, California, US", + company_name: "Wit Apps LLC, California, US", choose_payment: "Choose Payment Method", or: "OR", card: "Credit / Debit Card", diff --git a/src/routes.ts b/src/routes.ts index ddf6fc3..9554be7 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -93,7 +93,7 @@ export const hasNavigation = (path: string) => export const hasNoNavigation = (path: string) => !hasNavigation(path); export const withCrossButtonRoutes = [ - routes.client.attention(), + // routes.client.attention(), routes.client.subscription(), ]; export const hasCrossButton = (path: string) =>