From a03b2728f3db33ae6f8319d9ffb59b74ded0d09d Mon Sep 17 00:00:00 2001 From: Daniil Chemerkin Date: Thu, 18 Jul 2024 23:43:30 +0000 Subject: [PATCH] Develop --- src/components/App/index.tsx | 7 +---- .../v1/components/PriceItem/index.tsx | 25 +++++++++++++++- .../ABDesign/v1/data/questionary.module.css | 2 +- .../ABDesign/v1/data/stepsQuestionary.tsx | 3 +- .../v1/pages/AllRight/styles.module.css | 9 +++++- .../v1/pages/AlmostThere/styles.module.css | 4 +-- .../ABDesign/v1/pages/EmailConfirm/index.tsx | 8 +++++ .../v1/pages/EmailConfirm/styles.module.css | 7 ++++- .../pages/ABDesign/v1/pages/Gender/index.tsx | 25 +++++++++++----- .../v1/pages/Gender/styles.module.css | 4 ++- .../pages/PartnerRightPlace/styles.module.css | 1 + .../pages/QuestionnaireIntermediate/index.tsx | 9 ++++-- .../styles.module.css | 25 +++++++++++++--- .../RelationshipAlmostThere/styles.module.css | 6 ++-- .../ABDesign/v1/pages/TrialChoice/index.tsx | 30 +++++++++++++++++-- .../components/PaymentTable/index.tsx | 23 ++++++++++---- .../ABDesign/v1/pages/TrialPayment/index.tsx | 11 ++++++- .../pages/GetInformationPartner/index.tsx | 2 +- .../ABDesign/v1/LayoutABDesignV1/index.tsx | 3 +- src/services/metric/metricService.ts | 24 +++++++-------- src/store/index.ts | 2 ++ src/store/siteConfig.ts | 11 +++++++ 22 files changed, 186 insertions(+), 55 deletions(-) diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index c59cef9..53999ce 100755 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -121,7 +121,7 @@ import LoadingPage from "../pages/LoadingPage"; import { EProductKeys, productUrls } from "@/data/products"; import SinglePaymentPage from "../pages/SinglePaymentPage"; import ABDesignV1Routes from "@/routerComponents/ABDesign/v1"; -import metricService, { EGoals } from "@/services/metric/metricService"; +import metricService from "@/services/metric/metricService"; const isProduction = import.meta.env.MODE === "production"; @@ -164,11 +164,6 @@ function App(): JSX.Element { const birthPlace = user?.profile?.birthplace || birthPlaceFromStore; useEffect(() => { - if (location.pathname.includes("v1/trial-choice")) { - metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, true); - } else if (location.pathname.includes("v1/trial-payment")) { - metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, true); - } // metricService.initMetricAB() metricService.hit(); }, [location]); diff --git a/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx b/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx index 2fd25a2..f9499b0 100644 --- a/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx +++ b/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx @@ -1,6 +1,9 @@ import { removeAfterDot, roundToWhole } from "@/services/price"; import styles from "./styles.module.css"; import Price, { Currency, Locale } from "@/components/PaymentTable/Price"; +import { useEffect, useRef } from "react"; +import { useDispatch } from "react-redux"; +import { actions } from "@/store"; const currency = Currency.USD; const locale = Locale.EN; @@ -22,12 +25,28 @@ function PriceItem({ classNameActive = "", click, }: PriceItemProps): JSX.Element { + const dispatch = useDispatch(); + const _price = new Price( roundToWhole(value === 1 ? 0.99 : value), currency, locale ); + const itemRef = useRef(null); + + useEffect(() => { + if (value === 13.76 && itemRef.current?.offsetLeft) { + dispatch( + actions.siteConfig.updateTrialChoiceArrowOptions({ + left: `${ + itemRef.current.offsetLeft + itemRef.current.offsetWidth / 2 - 26 + }px`, + }) + ); + } + }, [dispatch, value, itemRef.current?.offsetLeft]); + const compatClassName = () => { const isPopular = id === "stripe.7"; const isActive = active; @@ -41,7 +60,11 @@ function PriceItem({ }; return ( -
+
{removeAfterDot(_price.format())}
); diff --git a/src/components/pages/ABDesign/v1/data/questionary.module.css b/src/components/pages/ABDesign/v1/data/questionary.module.css index 992d890..87b676f 100644 --- a/src/components/pages/ABDesign/v1/data/questionary.module.css +++ b/src/components/pages/ABDesign/v1/data/questionary.module.css @@ -1,3 +1,3 @@ -.relationship-goal-answer { +.small-font-size-answer { font-size: 15px !important; } \ No newline at end of file diff --git a/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx b/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx index f7be40c..b3c2f68 100644 --- a/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx +++ b/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx @@ -846,6 +846,7 @@ export const stepsQuestionary: IStep[] = [ { id: "aboutGoals", question: "When you think about your relationship goals, you feel...?", + answerClassName: styles["small-font-size-answer"], lottie: { preloadKey: ELottieKeys.darts, }, @@ -1191,7 +1192,7 @@ export const stepsQuestionary: IStep[] = [ { id: "relationshipGoal", question: "When you think about your relationship goals, you feel...?", - answerClassName: styles["relationship-goal-answer"], + answerClassName: styles["small-font-size-answer"], answers: [ { id: "optimistic", diff --git a/src/components/pages/ABDesign/v1/pages/AllRight/styles.module.css b/src/components/pages/ABDesign/v1/pages/AllRight/styles.module.css index 072ff21..f00c543 100644 --- a/src/components/pages/ABDesign/v1/pages/AllRight/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/AllRight/styles.module.css @@ -86,4 +86,11 @@ background-color: #fff; color: #0F1323; } - \ No newline at end of file + +.lottie-animation { + width: 100%; + height: 100%; + margin-left: 12px; + margin-top: 12px; + transform: scale(1.35); +} \ No newline at end of file diff --git a/src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css b/src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css index c1aa8ca..b8665ba 100644 --- a/src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css @@ -77,6 +77,6 @@ } .lottie-animation { - width: 100%; - aspect-ratio: 401.27 / 353.27; + width: 68%; + aspect-ratio: 229 / 178; } \ No newline at end of file diff --git a/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx b/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx index 0948053..7133ce2 100644 --- a/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx @@ -8,6 +8,7 @@ import { useDynamicSize } from "@/hooks/useDynamicSize"; import QuestionnaireGreenButton from "../../ui/GreenButton"; import { DotLottieReact } from "@lottiefiles/dotlottie-react"; import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; +import { useEffect } from "react"; function EmailConfirmPage() { const navigate = useNavigate(); @@ -21,6 +22,13 @@ function EmailConfirmPage() { navigate(routes.client.onboardingV1()); }; + useEffect(() => { + document.body.classList.add(styles["body-email-confirm"]); + return () => { + document.body.classList.remove(styles["body-email-confirm"]); + }; + }, []); + return (
{ + const _preloadImages = [ + "/heart.webp", + "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/twohearts-bc5e3e37.png", + "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/ring-26f6592d.png", + "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/brokenheart-9e2ba6fb.png", + "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/thinkingface-aa0f3a72.png", + ]; + if (isNextPageMentioned === "true") { + _preloadImages.push("/new-york-times.png"); + _preloadImages.push("/partnersWithoutNewYorkTime.png"); + } + return _preloadImages; + }, [isNextPageMentioned]); + + usePreloadImages(preloadImages); useEffect(() => { const feature = location.pathname.replace("/v1/gender/", ""); diff --git a/src/components/pages/ABDesign/v1/pages/Gender/styles.module.css b/src/components/pages/ABDesign/v1/pages/Gender/styles.module.css index 6f12d89..f690ba4 100644 --- a/src/components/pages/ABDesign/v1/pages/Gender/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/Gender/styles.module.css @@ -4,7 +4,7 @@ align-items: center; width: 100%; max-width: 460px; - padding: 20px 24px; + padding: 20px 24px 116px; color: #2C2C2C; } @@ -120,6 +120,8 @@ } .toast-container { + position: fixed; + bottom: calc(0dvh + 16px); margin-top: 16px; } diff --git a/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/styles.module.css b/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/styles.module.css index 3cad5c2..cf7815e 100644 --- a/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/styles.module.css @@ -88,4 +88,5 @@ .lottie-animation { height: 100%; aspect-ratio: 250 / 145; + margin-left: 9%; } \ No newline at end of file diff --git a/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx b/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx index 9ade62d..62f355a 100644 --- a/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx @@ -41,10 +41,13 @@ function QuestionnaireIntermediatePage() { return (
+
* { + z-index: 1; +} + +.background-image { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + background: url("/couple_holding_hands_1.webp"); + background-position-y: bottom; + background-position-x: center; + background-size: cover; + background-attachment: fixed; + background-repeat: no-repeat; } .header-title { diff --git a/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/styles.module.css b/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/styles.module.css index bb160b0..9b77362 100644 --- a/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/styles.module.css @@ -1,7 +1,9 @@ .page { position: relative; display: grid; + justify-items: center; grid-template-rows: repeat(4, min-content); + gap: 40px; height: fit-content; min-height: 100vh; background: url("/almost-there.webp"); @@ -68,6 +70,6 @@ } .lottie-animation { - width: 100%; - aspect-ratio: 575 / 506; + width: 68%; + aspect-ratio: 229 / 178; } \ No newline at end of file diff --git a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx index bade3cc..f683dec 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx @@ -14,7 +14,10 @@ import { usePaywall } from "@/hooks/paywall/usePaywall"; import { EPlacementKeys } from "@/api/resources/Paywall"; import { getRandomArbitrary } from "@/services/random-value"; import Loader from "@/components/Loader"; -import metricService, { EGoals } from "@/services/metric/metricService"; +import metricService, { + EGoals, + EMetrics, +} from "@/services/metric/metricService"; import PersonalVideo from "../TrialPayment/components/PersonalVideo"; enum EDisplayOptionButton { @@ -23,7 +26,7 @@ enum EDisplayOptionButton { } const displayOptionButton: EDisplayOptionButton = - EDisplayOptionButton.alwaysVisible; + EDisplayOptionButton.visibleIfChosen; // function TrialChoicePage() { const dispatch = useDispatch(); @@ -39,9 +42,16 @@ function TrialChoicePage() { const { products, isLoading, getText } = usePaywall({ placementKey: EPlacementKeys["aura.placement.redesign.main"], }); + const arrowLeft = useSelector(selectors.selectTrialChoiceArrowOptions)?.left; const { videoUrl } = useSelector(selectors.selectPersonalVideo); + useEffect(() => { + metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, [ + EMetrics.KLAVIYO, + ]); + }, []); + useEffect(() => { const randomDelay = getRandomArbitrary(3000, 5000); const countUsersTimeOut = setTimeout(() => { @@ -130,7 +140,14 @@ function TrialChoicePage() { classNameItemActive={`${styles["price-item-active"]} ${styles[gender]}`} click={handlePriceItem} /> -

+

{getText("text.3", { color: "#1C38EA", })} @@ -139,6 +156,13 @@ function TrialChoicePage() { className={styles["arrow-image"]} src="/arrow.svg" alt={`Arrow to $${products.at(-1)?.trialPrice}`} + style={ + arrowLeft + ? { + left: arrowLeft, + } + : {} + } />

diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentTable/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentTable/index.tsx index a51242d..54fafd4 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentTable/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentTable/index.tsx @@ -15,7 +15,10 @@ interface IPaymentTableProps { } const getPrice = (product: IPaywallProduct) => { - return (product.trialPrice || 0) / 100; + if (product.trialPrice % 100 === 0) { + return product.trialPrice / 100; + } + return ((product.trialPrice || 0) / 100).toFixed(2); }; function PaymentTable({ @@ -71,12 +74,21 @@ function PaymentTable({
-

Your cost per 2 weeks after trial

+ {product.trialPrice !== 50 && ( +

Your cost per 2 weeks after trial

+ )} + {product.trialPrice === 50 && ( +

+ Your cost after the trial is fourteen dollars for every two + weeks or $0.50 per half-day +

+ )}
${Number(getText("full.price")) / 100} - ${product.price / 100} + {product.trialPrice !== 50 && ${product.price / 100}} + {product.trialPrice === 50 && ${getPrice(product)}}
@@ -89,9 +101,8 @@ function PaymentTable({ You are enrolling in 2 weeks subscription. By continuing you agree that if you don't cancel prior to the end of the {product?.trialDuration}-day trial for the ${getPrice(product)} you will automatically be charged $ - {product.price / 100}{" "} - every 2 weeks until you cancel in settings. Learn more about - cancellation and refund policy in{" "} + {product.price / 100} every 2 weeks until you cancel in settings. Learn + more about cancellation and refund policy in{" "} Subscription policy

diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx index d20a3a8..b836b4e 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx @@ -24,7 +24,10 @@ import { useDynamicSize } from "@/hooks/useDynamicSize"; import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall"; import { usePaywall } from "@/hooks/paywall/usePaywall"; import PaymentModal from "@/components/PaymentModal"; -import metricService, { EGoals } from "@/services/metric/metricService"; +import metricService, { + EGoals, + EMetrics, +} from "@/services/metric/metricService"; function TrialPaymentPage() { const dispatch = useDispatch(); @@ -55,6 +58,12 @@ function TrialPaymentPage() { >("single"); const { subPlan } = useParams(); + useEffect(() => { + metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, [ + EMetrics.KLAVIYO, + ]); + }, []); + useEffect(() => { if (subPlan) { const targetProduct = products.find( diff --git a/src/components/pages/GetInformationPartner/index.tsx b/src/components/pages/GetInformationPartner/index.tsx index effc206..2f55920 100644 --- a/src/components/pages/GetInformationPartner/index.tsx +++ b/src/components/pages/GetInformationPartner/index.tsx @@ -19,7 +19,7 @@ function GetInformationPartnerPage() {