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, { EGoals } from "@/services/metric/metricService";
 
 const isProduction = import.meta.env.MODE === "production";
 
@@ -164,13 +164,13 @@ function App(): JSX.Element {
   const birthPlace = user?.profile?.birthplace || birthPlaceFromStore;
 
   useEffect(() => {
-      if (location.pathname.includes("v1/trial-choice")) {
+    if (location.pathname.includes("v1/trial-choice")) {
-          metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, true)
+      metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, true);
-      } else if (location.pathname.includes("v1/trial-payment")) {
+    } else if (location.pathname.includes("v1/trial-payment")) {
-          metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, true)
+      metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, true);
-      }
+    }
-      // metricService.initMetricAB()
+    // metricService.initMetricAB()
-    metricService.hit()
+    metricService.hit();
   }, [location]);
 
   useLayoutEffect(() => {
@@ -287,7 +287,9 @@ function App(): JSX.Element {
 
   return (
     <Routes>
-      <Route path="*" element={<ABDesignV1Routes />} />
+      <Route element={<AuthorizedUserOutlet />}>
+        <Route path="*" element={<ABDesignV1Routes />} />
+      </Route>
       <Route element={<Layout setIsSpecialOfferOpen={setIsSpecialOfferOpen} />}>
         <Route path={routes.client.loadingPage()} element={<LoadingPage />} />
         {/* Email - Pay - Email */}

src/components/Navbar/index.tsx

@@ -21,7 +21,7 @@ function Navbar({ isOpen, closeMenu }: NavbarProps): JSX.Element {
 
   const handleLogout = () => {
     localStorage.removeItem('palmistry.firstUnpassedStep');
-    navigate(routes.client.birthday())
+    navigate(routes.client.genderV1())
     logout()
   }
 

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

@@ -14,7 +14,8 @@ import { stepsQuestionary } from "../../data/stepsQuestionary";
 import Answer from "../../ui/Answer";
 import Stepper from "../Stepper";
 import { useLottie } from "@/hooks/lottie/useLottie";
-import {useMetricABFlags} from "@/services/metric/metricService.ts";
+import { useMetricABFlags } from "@/services/metric/metricService.ts";
+import { preloadImages } from "@/hooks/preload/images";
 
 function QuestionnairePage(): JSX.Element {
   const { question, stepId } = useParams();
@@ -31,11 +32,16 @@ function QuestionnairePage(): JSX.Element {
   const { gender } = useSelector(selectors.selectQuestionnaire);
   const clickAnswerTimeOutRef = useRef<NodeJS.Timeout>();
   const { flags } = useMetricABFlags();
-  const aboutUsAnswersKey = flags?.aboutUsAnswers?.[0]
+  const aboutUsAnswersKey = flags?.aboutUsAnswers?.[0];
   useLottie({
     preloadKey: currentQuestion?.lottie?.preloadKey,
   });
 
+  useEffect(() => {
+    if (currentQuestion?.preloadImages?.length) {
+      preloadImages(currentQuestion.preloadImages);
+    }
+  }, [currentQuestion]);
 
   useEffect(() => {
     const currentStepIndex = steps.findIndex((item) => item.id === stepId);

src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx

@@ -21,6 +21,17 @@ export const stepsQuestionary: IStep[] = [
         lottie: {
           preloadKey: ELottieKeys.goal,
         },
+        preloadImages: [
+          "/kiss.webp",
+          "/ring.webp",
+          "/thinking_face.webp",
+          "/star_struck.webp",
+          "/sparkles.webp",
+          "/woman-heart-man.webp",
+          "/hands_heart.webp",
+          "/two-hearts.webp",
+          "/broken_heart.webp",
+        ],
         answers: [
           {
             id: "single",
@@ -131,6 +142,11 @@ export const stepsQuestionary: IStep[] = [
       {
         id: "parent",
         question: "Are you a parent?",
+        preloadImages: [
+          "/hyperPersonalizedAstrology.webp",
+          "/birthdate-image-male.svg",
+          "/birthdate-image-female.svg",
+        ],
         answers: [
           {
             id: "yes",
@@ -171,12 +187,14 @@ export const stepsQuestionary: IStep[] = [
       {
         id: "birthdate",
         question: "What's your date of birth?",
+        preloadImages: ["/single-zodiac-info.webp"],
         answersElement: <BirthdateCustomAnswer />,
         navigateToUrl: routes.client.singleZodiacInfoV1(),
       },
       {
         id: "isBirthTime",
         question: "Do you know your time of birth?",
+        preloadImages: ["/hourglassV1.webp", "/birthPlace.webp"],
         answers: [
           {
             id: "yes",
@@ -211,6 +229,11 @@ export const stepsQuestionary: IStep[] = [
         answersElement: <BirthPlaceCustomAnswer />,
         backgroundImage: "/birthPlace.webp",
         backgroundColor: "#0000004d",
+        preloadImages: [
+          "/slightly_frowning_face.webp",
+          "/neutral_face.webp",
+          "/wink.webp",
+        ],
         textColor: {
           title: "#fff",
           description: "#fff",
@@ -234,6 +257,7 @@ export const stepsQuestionary: IStep[] = [
         question: "Do you relate to the statement below?",
         description:
           "“I really dislike being alone as much as I hate to admit it.”",
+        preloadImages: ["/DeWatermark3.webp"],
         answers: [
           {
             id: "yes",
@@ -308,6 +332,13 @@ export const stepsQuestionary: IStep[] = [
         id: "tendToOverthink",
         question: "Do you tend to overthink?",
         backgroundImage: "/DeWatermark3.webp",
+        preloadImages: [
+          "/bar_chart.webp",
+          "/scales.webp",
+          "/airplane.webp",
+          "/star_struck.webp",
+          "/flexed_biceps.webp",
+        ],
         answers: [
           {
             id: "yes",
@@ -327,6 +358,7 @@ export const stepsQuestionary: IStep[] = [
       {
         id: "mostImportant",
         question: "What is most important to you?",
+        preloadImages: ["/DeWatermark2.webp"],
         answers: [
           {
             id: "success",
@@ -368,6 +400,13 @@ export const stepsQuestionary: IStep[] = [
       {
         id: "emotionalControl",
         question: "Is emotional control tricky for you?",
+        preloadImages: [
+          "/smiling_face_with_heart_eyes.webp",
+          "/pleading_face.webp",
+          "/face_with_raised_eyebrow.webp",
+          "/confused.webp",
+          "/smiling_face_with_smiling_eyes.webp",
+        ],
         answers: [
           {
             id: "yes",
@@ -557,6 +596,17 @@ export const stepsQuestionary: IStep[] = [
         question: "Do you agree with the statement below?",
         description: "“My partner and I can talk about any issue together“",
         backgroundImage: "/lovely_bedroom.webp",
+        preloadImages: [
+          "/cloud.webp",
+          "/down_arrow.webp",
+          "/down_arrow.webp",
+          "/woman_feeding_baby.webp",
+          "/anxious_face_with_sweat.webp",
+          "/family.webp",
+          "/jigsaw.webp",
+          "/hourglass.webp",
+          "/cross_mark.webp",
+        ],
         lottie: {
           preloadKey: ELottieKeys.umbrella,
         },
@@ -592,6 +642,7 @@ export const stepsQuestionary: IStep[] = [
         id: "currentlyAffecting",
         question:
           "Are any of these factors currently affecting your relationship?",
+        preloadImages: ["/satisfied-yes.webp", "/satisfied-no.webp"],
         answersElement: <MultiplyAnswers answers={currentlyAffectingAnswers} />,
       },
       {
@@ -631,6 +682,17 @@ export const stepsQuestionary: IStep[] = [
         id: "satisfied",
         question:
           "Are you satisfied with how you and your partner communicate?",
+        preloadImages: [
+          "/microscope.webp",
+          "/mountain.webp",
+          "/paperclip.webp",
+          "/blue_book.webp",
+          "/party_popper.webp",
+          "/scales.webp",
+          "/loudspeaker.webp",
+          "/shield.webp",
+          "/fearful_face.webp",
+        ],
         answers: [
           {
             id: "yes",

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

@@ -6,9 +6,22 @@ import routes from "@/routes";
 import Header from "../../components/Header";
 import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import { usePreloadImages } from "@/hooks/preload/images";
 
 function AlmostTherePage() {
   const navigate = useNavigate();
+  usePreloadImages([
+    "/raising_hands.webp",
+    "/fork_and_knife_with_plate.webp",
+    "/mountain.webp",
+    "/cityscape_at_dusk.webp",
+    "/national_park.webp",
+    "/parachute.webp",
+    "/microscope.webp",
+    "/paperclip.webp",
+    "/blue_book.webp",
+    "/party_popper.webp",
+  ]);
 
   const { animationData } = useLottie({
     loadKey: ELottieKeys.magnifyingGlassAndPlanet,

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

@@ -15,6 +15,7 @@ import PrivacyPolicy from "../../components/PrivacyPolicy";
 import Toast from "../../components/Toast";
 import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { useMetricABFlags } from "@/services/metric/metricService";
+import { usePreloadImages } from "@/hooks/preload/images";
 
 interface IGenderPageProps {
   productKey?: EProductKeys;
@@ -31,7 +32,15 @@ function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
     selectors.selectPrivacyPolicy
   );
   const { flags } = useMetricABFlags();
-  const isNextPageMentioned = flags?.isNextPageMentioned?.[0]
+  const isNextPageMentioned = flags?.isNextPageMentioned?.[0];
+
+  usePreloadImages([
+    "/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",
+  ]);
 
   useEffect(() => {
     const feature = location.pathname.replace("/v1/gender/", "");

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

@@ -8,10 +8,18 @@ import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
 import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import { usePreloadImages } from "@/hooks/preload/images";
 
 function GoalSetupPage() {
   const navigate = useNavigate();
   const { width: pageWidth, elementRef } = useDynamicSize({});
+  usePreloadImages([
+    "/check_mark_button.webp",
+    "/cross_mark.webp",
+    "/man_student.webp",
+    "/face_with_monocle.webp",
+    "/slightly_smiling_face.webp",
+  ]);
 
   const { animationData } = useLottie({
     loadKey: ELottieKeys.goal,

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

@@ -12,6 +12,7 @@ import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
 import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import { usePreloadImages } from "@/hooks/preload/images";
 
 function LoadingInRelationshipPage() {
   const navigate = useNavigate();
@@ -22,6 +23,34 @@ function LoadingInRelationshipPage() {
     return [getRandomArbitrary(300, 995), getRandomArbitrary(3, 995)];
   }, []);
   const { width: pageWidth, elementRef: pageRef } = useDynamicSize({});
+  usePreloadImages([
+    "/works-traits-unhappy.webp",
+    "/works-traits-happy.webp",
+    "/works-traits-never_been.webp",
+    "/works-for-us-very-unhappy.webp",
+    "/works-for-us-unhappy.webp",
+    "/works-for-us-happy.webp",
+    "/thumbs_up.webp",
+    "/thumbs_more_up.webp",
+    "/thumbs_middle.webp",
+    "/thumbs_more_down.webp",
+    "/thumbs_down.webp",
+    "/almost-there.webp",
+    "/man.webp",
+    "/woman.webp",
+    "/almost-there.webp",
+    "/unamused.webp",
+    "/anxious_face_with_sweat.webp",
+    "/red-heart.webp",
+    "/brain.webp",
+    "/paperclip.webp",
+    "/questionV1.webp",
+    "/input_numbers.webp",
+    "/sunset.webp",
+    "/rised_hand.webp",
+    "/crystal_ball.webp",
+    "/technologist.webp",
+  ]);
 
   useLottie({
     preloadKey: ELottieKeys.key,

src/data.tsx

@@ -70,6 +70,7 @@ export interface IQuestion {
     title?: "#fff";
     description?: "#fff";
   };
+  preloadImages?: string[];
 }
 
 export interface IAnswer {

src/hooks/preload/images.ts

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+
+export const preloadImages = (images: string[]) => {
+    if (!images.length) return;
+    images.forEach((image) => {
+        const img = new Image();
+        img.src = image
+    });
+}
+
+export const usePreloadImages = (images: string[]) => {
+    useEffect(() => {
+        preloadImages(images)
+    }, [images])
+}

src/routes.ts

@@ -513,7 +513,7 @@ export const hasFullDataModal = (path: string) => {
 export const getRouteBy = (status: UserStatus): string => {
   switch (status) {
     case "lead":
-      return routes.client.gender();
+      return routes.client.genderV1();
     case "registred":
     case "unsubscribed":
       return routes.client.trialPayment();