Develop

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]);

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<HTMLDivElement>(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 (
-    <div onClick={itemClick} className={compatClassName()}>
+    <div
+      ref={value === 13.76 ? itemRef : null}
+      onClick={itemClick}
+      className={compatClassName()}
+    >
       {removeAfterDot(_price.format())}
     </div>
   );

src/components/pages/ABDesign/v1/data/questionary.module.css

@@ -1,3 +1,3 @@
-.relationship-goal-answer {
+.small-font-size-answer {
     font-size: 15px !important;
 }

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",

src/components/pages/ABDesign/v1/pages/AllRight/styles.module.css

@@ -87,3 +87,10 @@
     color: #0F1323;
 }
 
+.lottie-animation {
+    width: 100%;
+    height: 100%;
+    margin-left: 12px;
+    margin-top: 12px;
+    transform: scale(1.35);
+}

src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css

@@ -77,6 +77,6 @@
 }
 
 .lottie-animation {
-    width: 100%;
+    width: 68%;
-    aspect-ratio: 401.27 / 353.27;
+    aspect-ratio: 229 / 178;
 }

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 (
     <section className={`${styles.page} page`} ref={pageRef}>
       <BackgroundTopBlob

src/components/pages/ABDesign/v1/pages/EmailConfirm/styles.module.css

@@ -1,9 +1,12 @@
+.body-email-confirm {
+  background-color: #0F1323;
+}
+
 .page {
   position: relative;
   height: fit-content;
   min-height: 100dvh;
   display: flex;
-  justify-content: start;
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
@@ -12,6 +15,7 @@
   color: #fff;
   width: 100%;
   max-width: 460px;
+  overflow-y: auto;
 }
 
 .header {
@@ -79,6 +83,7 @@
   font-weight: normal;
   line-height: 1.2;
   font-size: 12px;
+  margin-top: 8px;
 }
 
 .lottie-animation {

src/components/pages/ABDesign/v1/pages/Gender/index.tsx

@@ -4,7 +4,7 @@ import { Gender } from "@/data";
 import { EProductKeys } from "@/data/products";
 import routes from "@/routes";
 import { actions, selectors } from "@/store";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
@@ -34,13 +34,22 @@ function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
   const { flags } = useMetricABFlags();
   const isNextPageMentioned = flags?.isNextPageMentioned?.[0];
 
-  usePreloadImages([
+  const preloadImages = useMemo(() => {
-    "/heart.webp",
+    const _preloadImages = [
-    "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/twohearts-bc5e3e37.png",
+      "/heart.webp",
-    "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/ring-26f6592d.png",
+      "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/twohearts-bc5e3e37.png",
-    "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/brokenheart-9e2ba6fb.png",
+      "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/ring-26f6592d.png",
-    "https://d2ecldjic51fgm.cloudfront.net/pub/assets/aura/emoji/thinkingface-aa0f3a72.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/", "");

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;
 }
 

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%;
 }

src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx

@@ -41,10 +41,13 @@ function QuestionnaireIntermediatePage() {
   return (
     <section
       className={`${styles.page} page`}
-      style={{
-        backgroundImage: `url(${backgroundImage})`,
-      }}
     >
+      <div
+        className={styles["background-image"]}
+        style={{
+          backgroundImage: `url(${backgroundImage})`,
+        }}
+      />
       <Header
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}

src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/styles.module.css

@@ -6,16 +6,33 @@
   justify-items: center;
   grid-template-rows: repeat(4, min-content);
   gap: 40px;
-  background: url("/couple_holding_hands_1.webp");
-  background-position-y: bottom;
-  background-position-x: center;
-  background-size: cover;
   color: #fff;
   padding-top: 64px;
   background-color: #171717;
   padding-top: 32px;
   width: 100%;
   max-width: 460px;
+  padding-bottom: calc(0dvh + 64px);
+  background-attachment: fixed;
+}
+
+.page > * {
+  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 {

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%;
+  width: 68%;
-  aspect-ratio: 575 / 506;
+  aspect-ratio: 229 / 178;
 }

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}
             />
-            <p className={styles["auxiliary-text"]} style={{ maxWidth: "75%" }}>
+            <p
+              className={styles["auxiliary-text"]}
+              style={{
+                maxWidth: arrowLeft
+                  ? `${Number(arrowLeft.slice(0, -2)) - 8}px`
+                  : "75%",
+              }}
+            >
               {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,
+                    }
+                  : {}
+              }
             />
           </div>
           <div className={styles["emails-list-container"]}>

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({
           </div>
           <hr />
           <div className={styles["table-element"]}>
-            <p>Your cost per 2 weeks after trial</p>
+            {product.trialPrice !== 50 && (
+              <p>Your cost per 2 weeks after trial</p>
+            )}
+            {product.trialPrice === 50 && (
+              <p style={{ fontSize: "11px", lineHeight: "14px", color: "#8E8E93", marginRight: "8px" }}>
+                Your cost after the trial is fourteen dollars for every two
+                weeks or $0.50 per half-day
+              </p>
+            )}
             <div>
               <span className={styles.discount}>
                 ${Number(getText("full.price")) / 100}
               </span>
-              <span>${product.price / 100}</span>
+              {product.trialPrice !== 50 && <span>${product.price / 100}</span>}
+              {product.trialPrice === 50 && <span>${getPrice(product)}</span>}
             </div>
           </div>
         </div>
@@ -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}{" "}
+        {product.price / 100} every 2 weeks until you cancel in settings. Learn
-        every 2 weeks until you cancel in settings. Learn more about
+        more about cancellation and refund policy in{" "}
-        cancellation and refund policy in{" "}
         <a onClick={handleSubscriptionPolicyClick}>Subscription policy</a>
       </p>
     </>

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(

src/components/pages/GetInformationPartner/index.tsx

@@ -19,7 +19,7 @@ function GetInformationPartnerPage() {
     <section className={`${styles.page} page`}>
       <video
         className={styles["background-video"]}
-        loop={true}
+        loop={false}
         autoPlay={true}
         muted={true}
         playsInline={true}

src/routerComponents/ABDesign/v1/LayoutABDesignV1/index.tsx

@@ -1,9 +1,10 @@
 import styles from "./styles.module.css";
 import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
 import { useRef } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 
 function LayoutABDesignV1() {
+  const location = useLocation();
   const mainRef = useRef<HTMLDivElement>(null);
   useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
     location,

src/services/metric/metricService.ts

@@ -22,6 +22,11 @@ export enum EFlags {
     aboutUsAnswers = 'Key for aboutUsAnswers'
 }
 
+export enum EMetrics {
+    YANDEX = "Yandex",
+    KLAVIYO = "Klaviyo",
+}
+
 interface IUserParams {
     UserID: number | string;
     genderFrom: string;
@@ -64,19 +69,14 @@ const userParams = (parameters: Partial<IUserParams>) => {
     window.klaviyo.push(['identify', parameters]);
 }
 
-const reachGoal = (goal: EGoals, onlyKlaviyo = false) => {
+const reachGoal = (goal: EGoals, usingMetrics = [EMetrics.KLAVIYO, EMetrics.YANDEX]) => {
-    if (onlyKlaviyo) {
+    if (!checkIsAvailableYandexMetric()) return;
-        if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
-        window.klaviyo.push(['track', goal]);
-    } else {
-        if (!checkIsAvailableYandexMetric()) return;
 
-        window.ym(metricCounterNumber, "reachGoal", goal)
+    if (usingMetrics.includes(EMetrics.YANDEX)) window.ym(metricCounterNumber, "reachGoal", goal)
-        console.log("goal: ", goal);
+    console.log("goal: ", goal);
 
-        if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
+    if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
-        window.klaviyo.push(['track', goal]);
+    if (usingMetrics.includes(EMetrics.KLAVIYO)) window.klaviyo.push(['track', goal]);
-    }
 }
 
 type THitOptions = {
@@ -123,7 +123,7 @@ const initMetricAB = () => {
 export const useMetricABFlags = () => {
     return useExperiments<typeof EFlags>({
         clientId: `metrika.${metricCounterNumber}`
-      })
+    })
 }
 
 export default { setUserID, userParams, reachGoal, hit, initMetric, initMetricAB }

src/store/index.ts

@@ -18,6 +18,7 @@ import paywalls, { actions as paywallsActions } from "./paywalls";
 import siteConfig, {
   selectHome,
   selectOpenAiToken,
+  selectTrialChoiceArrowOptions,
   actions as siteConfigActions,
 } from "./siteConfig";
 import onboardingConfig, {
@@ -125,6 +126,7 @@ export const selectors = {
   selectFeature,
   selectIsForceShortPath,
   selectOpenAiToken,
+  selectTrialChoiceArrowOptions,
   selectPalmistryLines,
   selectPalmistryFingers,
   selectPaywalls,

src/store/siteConfig.ts

@@ -13,6 +13,9 @@ interface ISiteConfig {
     pathFromHome: EPathsFromHome;
   };
   openAiToken: string;
+  trialChoiceArrowOptions: {
+    left?: string;
+  }
 }
 
 const initialState: ISiteConfig = {
@@ -21,6 +24,7 @@ const initialState: ISiteConfig = {
     pathFromHome: EPathsFromHome.compatibility,
   },
   openAiToken: "",
+  trialChoiceArrowOptions: {}
 };
 
 const siteConfigSlice = createSlice({
@@ -30,6 +34,9 @@ const siteConfigSlice = createSlice({
     update(state, action: PayloadAction<Partial<ISiteConfig>>) {
       return { ...state, ...action.payload };
     },
+    updateTrialChoiceArrowOptions(state, action: PayloadAction<Partial<ISiteConfig['trialChoiceArrowOptions']>>) {
+      return { ...state, trialChoiceArrowOptions: { ...state.trialChoiceArrowOptions, ...action.payload } }
+    }
   },
   extraReducers: (builder) => builder.addCase("reset", () => initialState),
 });
@@ -43,4 +50,8 @@ export const selectOpenAiToken = createSelector(
   (state: { siteConfig: ISiteConfig }) => state.siteConfig.openAiToken,
   (siteConfig) => siteConfig
 );
+export const selectTrialChoiceArrowOptions = createSelector(
+  (state: { siteConfig: ISiteConfig }) => state.siteConfig.trialChoiceArrowOptions,
+  (siteConfig) => siteConfig
+);
 export default siteConfigSlice.reducer;