Merge branch 'develop' into 'main'

AW-429-comp-v1-ios-ab

See merge request witapp/aura-webapp!720

src/components/CompatibilityV2/pages/Birthdate/index.tsx

@@ -12,6 +12,8 @@ import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useSession } from "@/hooks/session/useSession";
 import { ESourceAuthorization } from "@/api/resources/User";
+import { usePreloadImages } from "@/hooks/preload/images";
+import { getZodiacSignByDate, ZODIACS } from "@/services/zodiac-sign";
 
 function Birthdate() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
@@ -21,6 +23,18 @@ function Birthdate() {
   const birthdateFromStore = useSelector(selectors.selectBirthdate);
   const [birthdate, setBirthdate] = useState(birthdateFromStore);
   const [isDisabled, setIsDisabled] = useState(true);
+  const { gender } = useSelector(selectors.selectQuestionnaire);
+  const zodiacSign = getZodiacSignByDate(birthdate);
+
+  usePreloadImages(
+    !!zodiacSign?.length ?
+      [
+        `/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`
+      ] :
+      ZODIACS.map(
+        (zodiac) => `/zodiac-signs/${gender?.toLowerCase()}/${zodiac?.toLowerCase()}.svg`
+      )
+  );
 
   const handleValid = (_birthdate: string) => {
     setBirthdate(_birthdate);

src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx

@@ -11,15 +11,28 @@ import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useSession } from "@/hooks/session/useSession";
 import { ESourceAuthorization } from "@/api/resources/User";
+import { usePreloadImages } from "@/hooks/preload/images";
+import { getZodiacSignByDate, ZODIACS } from "@/services/zodiac-sign";
 
 function BirthdatePartner() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
   const { updateSession } = useSession();
   const navigate = useNavigate();
   const dispatch = useDispatch();
-  const { partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
+  const { partnerBirthdate, partnerGender } = useSelector(selectors.selectQuestionnaire);
   const [birthdate, setBirthdate] = useState(partnerBirthdate || "");
   const [isDisabled, setIsDisabled] = useState(true);
+  const zodiacSign = getZodiacSignByDate(birthdate);
+
+  usePreloadImages(
+    !!zodiacSign?.length ?
+      [
+        `/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`
+      ] :
+      ZODIACS.map(
+        (zodiac) => `/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiac?.toLowerCase()}.svg`
+      )
+  );
 
   const handleValid = (_birthdate: string) => {
     setBirthdate(_birthdate);

src/components/CompatibilityV2/pages/CheckingPhone/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV2 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function CheckingPhone() {
   const { checkingPhone, relationshipStatus } = useSelector(
     selectors.selectCompatibilityV2Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV2["checking_phone"];

src/components/CompatibilityV2/pages/Gender/index.tsx

@@ -10,9 +10,8 @@ import { sleep } from "@/services/date";
 import metricService, { useMetricABFlags } from "@/services/metric/metricService";
 import { genders } from "@/components/pages/ABDesign/v1/data/genders";
 import { useNavigate } from "react-router-dom";
-import routes from "@/routes";
+import routes, { compatibilityV2Prefix } from "@/routes";
 import { usePreloadImages } from "@/hooks/preload/images";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { EGender, ESourceAuthorization } from "@/api/resources/User";
 import Loader, { LoaderColor } from "@/components/Loader";
@@ -33,10 +32,8 @@ function GenderPage() {
 
   const { gender } = useSelector(selectors.selectQuestionnaire);
   const [isSelected, setIsSelected] = useState(false);
-  usePreloadImages(["/v1/palmistry/hand-with-eye.svg"]);
-  useLottie({
-    preloadKey: ELottieKeys.handSymbols,
-  });
+
+  usePreloadImages([`${compatibilityV2Prefix}/hand-with-eye.svg`]);
 
   const { flags, ready } = useMetricABFlags();
 

src/components/CompatibilityV2/pages/GenderPartner/index.tsx

@@ -3,16 +3,14 @@ import Title from "@/components/Title";
 import { useDispatch, useSelector } from "react-redux";
 import { actions, selectors } from "@/store";
 import { Gender } from "@/data";
-// import Toast from "@/components/pages/ABDesign/v1/components/Toast";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useCallback, useEffect, useState } from "react";
 import { sleep } from "@/services/date";
 import { genders } from "@/components/pages/ABDesign/v1/data/genders";
 import { useNavigate } from "react-router-dom";
-import routes from "@/routes";
+import routes, { compatibilityV2Prefix } from "@/routes";
 import { usePreloadImages } from "@/hooks/preload/images";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { EGender, ESourceAuthorization } from "@/api/resources/User";
 import Answer from "../../components/Answer";
@@ -29,10 +27,8 @@ function GenderPartner() {
 
   const { partnerGender } = useSelector(selectors.selectQuestionnaire);
   const [isSelected, setIsSelected] = useState(false);
-  usePreloadImages(["/v1/palmistry/hand-with-eye.svg"]);
-  useLottie({
-    preloadKey: ELottieKeys.handSymbols,
-  });
+
+  usePreloadImages([`${compatibilityV2Prefix}/hand-with-eye.svg`]);
 
   const localGenders = genders.map((gender) => ({
     id: gender.id,
@@ -49,18 +45,12 @@ function GenderPartner() {
     if (!partnerGender) return;
     dispatch(actions.privacyPolicy.updateChecked(true));
     await sleep(1000);
-    // metricService.userParams({
-    //   gender: genders.find((g) => g.id === gender)?.name,
-    // });
     const session = await createSession(
       ESourceAuthorization["aura.compatibility.v2"]
     );
     if (session?.sessionId?.length) {
       updateSession(
         {
-          // profile: {
-          //   gender: EGender[gender as keyof typeof EGender],
-          // },
           partner: {
             gender: EGender[partnerGender as keyof typeof EGender],
           }
@@ -90,8 +80,6 @@ function GenderPartner() {
       <p className={styles.description}>{translate("/gender-partner.description", {
         br: <br />,
       })}</p>
-      {/* <ChooseGender onSelectGender={selectGender} /> */}
-      {/* <PrivacyPolicy containerClassName={styles["privacy-policy"]} haveCheckbox={false} /> */}
       <div className={styles["genders-container"]}>
         {localGenders?.map((_gender, index) => (
           <Answer
@@ -102,12 +90,6 @@ function GenderPartner() {
           />
         ))}
       </div>
-      {/* <AlreadyHaveAccount text={translate("/gender-partner.already_have_account")} /> */}
-      {/* {gender && !privacyPolicyChecked && (
-        <Toast classNameContainer={styles["toast-container"]} variant="error">
-          {translate("/gender.toast", undefined, ELocalesPlacement.V1)}
-        </Toast>
-      )} */}
     </>
   );
 }

src/components/CompatibilityV2/pages/HeadOrHeart/index.tsx

@@ -14,7 +14,6 @@ import { usePreloadImages } from "@/hooks/preload/images";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV2 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 
 function HeadOrHeart() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
@@ -22,21 +21,11 @@ function HeadOrHeart() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { headOrHeart } = useSelector(selectors.selectCompatibilityV2Answers);
-  usePreloadImages([
-    "/v1/palmistry/money-back.svg",
-    "/v1/palmistry/hand.svg",
-    "/v1/palmistry/1_1.svg",
-    "/v1/palmistry/daily.svg",
-    "/v1/palmistry/cosmic.svg",
-    "/v1/palmistry/calendar.svg",
-    "/v1/palmistry/reviews/rebecca.png",
-    "/v1/palmistry/reviews/mika.png",
-    "/v1/palmistry/reviews/amanda.png",
-    "/v1/palmistry/partners.png",
-  ]);
-  useLottie({
-    preloadKey: ELottieKeys.letScan,
-  });
+  usePreloadImages(
+    ["head", "heart", "both"].map(
+      (headOrHeart) => `/v2/compatibility/head-or-heart-result/${headOrHeart}.svg`
+    )
+  );
 
   const answers: { id: IAnswersSessionCompatibilityV2["head_or_heart"]; title: string }[] =
     useMemo(

src/components/CompatibilityV2/pages/HeadOrHeartResult/index.tsx

@@ -1,6 +1,4 @@
-// import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import styles from "./styles.module.scss";
-// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import Title from "@/components/Title";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
@@ -13,13 +11,8 @@ import routes from "@/routes";
 import { useMemo } from "react";
 import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
 import Loader, { LoaderColor } from "@/components/Loader";
-
-// const animations = {
-//   both: ELottieKeys.scalesNeutralPalmistry,
-//   heart: ELottieKeys.scalesHeartPalmistry,
-//   head: ELottieKeys.scalesHeadPalmistry,
-//   depends: ELottieKeys.scalesNeutralPalmistry,
-// };
+import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import { useTheme } from "@/hooks/theme/useTheme";
 
 function HeadOrHeartResult() {
   const navigate = useNavigate();
@@ -28,14 +21,15 @@ function HeadOrHeartResult() {
   const { gender, partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
   const translatePrefix = relationshipStatus === "single" ? "single" : "with-partner";
 
+  const { darkTheme } = useTheme();
+  useLottie({
+    preloadKey: darkTheme ? ELottieKeys.letScanDark : ELottieKeys.letScan,
+  });
+
   const { isReady, variant } = useUnleash({
     flag: EUnleashFlags.headOrHeartResultPageCompatibilityV2,
   });
 
-  // const { animationData } = useLottie({
-  //   loadKey: animations[headOrHeart as keyof typeof animations],
-  // });
-
   const birthdate = useSelector(selectors.selectBirthdate);
   const zodiacSign = getZodiacSignByDate(birthdate);
   const zodiacSignPartner = getZodiacSignByDate(partnerBirthdate);
@@ -45,7 +39,6 @@ function HeadOrHeartResult() {
   };
 
   const handleNext = () => {
-    // navigate(`${routes.client.compatibilityV2RelateFollowing()}/1`);
     navigate(routes.client.compatibilityV2LetScan());
   };
 
@@ -58,16 +51,6 @@ function HeadOrHeartResult() {
 
   return (
     <section className={styles.container}>
-      {/* <div className={styles["animation-container"]}>
-        {animationData && (
-          <DotLottieReact
-            className={`${styles["lottie-animation"]} ym-hide-content`}
-            data={animationData}
-            autoplay
-            loop={false}
-          />
-        )}
-      </div> */}
       {variant === "v1" && <img
         src={imageUrl}
         alt="result image"

src/components/CompatibilityV2/pages/LetScan/index.tsx

@@ -18,7 +18,6 @@ function LetScan() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
   const navigate = useNavigate();
   const { darkTheme } = useTheme();
-
   const { animationData } = useLottie({
     loadKey: darkTheme ? ELottieKeys.letScanDark : ELottieKeys.letScan,
   });

src/components/CompatibilityV2/pages/PalmsInformation/index.tsx

@@ -6,7 +6,6 @@ import Policy from "@/components/Policy";
 import { useTranslations } from "@/hooks/translations";
 import { useNavigate } from "react-router-dom";
 import { ELocalesPlacement } from "@/locales";
-// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { selectors } from "@/store";
 import { useSelector } from "react-redux";
@@ -20,9 +19,7 @@ function PalmsInformation() {
   const { gender, birthdate } = useSelector(selectors.selectQuestionnaire);
   const zodiacSign = getZodiacSignByDate(birthdate);
   const navigate = useNavigate();
-  // const { animationData } = 
   useLottie({
-    // loadKey: ELottieKeys.handSymbols,
     preloadKey: ELottieKeys.scalesHeadPalmistry,
   });
 
@@ -40,20 +37,11 @@ function PalmsInformation() {
 
   return (
     <div className={styles["page-container"]}>
-      {/* {animationData && (
-        <DotLottieReact
-          className={`${styles["lottie-animation"]} ym-hide-content`}
-          data={animationData}
-          autoplay
-          loop={false}
-          width={1920}
-        />
-      )} */}
       {zodiacImages !== "new" && (
         <div className={styles.zodiac}>
           <img
             className={styles.image}
-            src={images(`zodiacs/${gender}/${zodiacSign.toUpperCase()}.webp`)}
+            src={images(`zodiacs/${gender}/${zodiacSign?.toUpperCase()}.webp`)}
             alt="Zodiac sign"
           />
         </div>
@@ -62,7 +50,6 @@ function PalmsInformation() {
         <div className={styles.zodiacNew}>
           <img
             className={styles.image}
-            // src={images(`zodiacs/${gender}/${zodiacSign.toUpperCase()}.webp`)}
             src={`/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`}
             alt="Zodiac sign"
           />

src/components/CompatibilityV2/pages/PalmsInformationPartner/index.tsx

@@ -1,18 +1,17 @@
-import routes from "@/routes";
+import routes, { compatibilityV2Prefix } from "@/routes";
 import styles from "./styles.module.scss";
 import Title from "@/components/Title";
 import Button from "../../components/Button";
 import { useTranslations } from "@/hooks/translations";
 import { useNavigate } from "react-router-dom";
 import { ELocalesPlacement } from "@/locales";
-// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { images } from "../../data";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
 import Loader, { LoaderColor } from "@/components/Loader";
+import { usePreloadImages } from "@/hooks/preload/images";
 
 function PalmsInformationPartner() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
@@ -20,11 +19,8 @@ function PalmsInformationPartner() {
 
   const zodiacSign = getZodiacSignByDate(partnerBirthdate);
   const navigate = useNavigate();
-  // const { animationData } = 
-  useLottie({
-    // loadKey: ELottieKeys.handSymbols,
-    preloadKey: ELottieKeys.scalesHeadPalmistry,
-  });
+
+  usePreloadImages([`${compatibilityV2Prefix}/hand-with-eye.svg`]);
 
   const { isReady, variant: zodiacImages } = useUnleash({
     flag: EUnleashFlags.zodiacImages
@@ -40,20 +36,11 @@ function PalmsInformationPartner() {
 
   return (
     <div className={styles["page-container"]}>
-      {/* {animationData && (
-        <DotLottieReact
-          className={`${styles["lottie-animation"]} ym-hide-content`}
-          data={animationData}
-          autoplay
-          loop={false}
-          width={1920}
-        />
-      )} */}
       {zodiacImages !== "new" && (
         <div className={styles.zodiac}>
           <img
             className={styles.image}
-            src={images(`zodiacs/${partnerGender}/${zodiacSign.toUpperCase()}.webp`)}
+            src={images(`zodiacs/${partnerGender}/${zodiacSign?.toUpperCase()}.webp`)}
             alt="Zodiac sign"
           />
         </div>
@@ -62,7 +49,6 @@ function PalmsInformationPartner() {
         <div className={styles.zodiacNew}>
           <img
             className={styles.image}
-            // src={images(`zodiacs/${gender}/${zodiacSign.toUpperCase()}.webp`)}
             src={`/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`}
             alt="Zodiac sign"
           />
@@ -77,37 +63,6 @@ function PalmsInformationPartner() {
       <Button onClick={handleNext}>
         {translate("next")}
       </Button>
-      {/* <Policy>
-        {translate("privacy_policy", {
-          eulaLink: (
-            <a
-              href="https://aura.wit.life/terms"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {translate("eula_link")}
-            </a>
-          ),
-          privacyLink: (
-            <a
-              href="https://aura.wit.life/privacy"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {translate("privacy_notice")}
-            </a>
-          ),
-          clickHere: (
-            <a
-              href="https://aura.wit.life/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {translate("policy_here")}
-            </a>
-          ),
-        })}
-      </Policy> */}
     </div>
   );
 }

src/components/CompatibilityV2/pages/RelationshipStatus/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV2 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function RelationshipStatus() {
   const { relationshipStatus } = useSelector(
     selectors.selectCompatibilityV2Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV2["relationship_status"];

src/components/CompatibilityV2/pages/RomanticGestures/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV2 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function RomanticGestures() {
   const { romanticGestures } = useSelector(
     selectors.selectCompatibilityV2Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV2["romantic_gestures"];

src/components/CompatibilityV2/pages/ScanInstruction/index.tsx

@@ -10,16 +10,19 @@ import ScanInstructionSVG from "../../images/SVG/ScanInstruction";
 import { usePreloadImages } from "@/hooks/preload/images";
 import { useUploadImage } from "@/hooks/palmistry/useUploadImage";
 import Loader, { LoaderColor } from "@/components/Loader";
+import { images } from "../../data";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
 
 function ScanInstruction() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
   const navigate = useNavigate();
+
+  const gender = useSelector(selectors.selectQuestionnaire)?.gender || "female";
+
   usePreloadImages([
-    "/v1/palmistry/love-line.svg",
-    "/v1/palmistry/head-line.svg",
-    "/v1/palmistry/life-line.svg",
-    "/v1/palmistry/fate-line.svg",
-    "/v1/palmistry/hand-little-finger.svg",
+    images("scan-hand/Palm-tach-A.gif"),
+    images(`scan-hand/${gender}-Palm-A.png`)
   ]);
 
   const handleToScannedPhoto = () => {

src/components/CompatibilityV2/pages/ScannedPhoto/index.tsx

@@ -15,6 +15,7 @@ import Modal from "@/components/Modal";
 import { useAuthentication } from "@/hooks/authentication/use-authentication";
 import { ESourceAuthorization } from "@/api/resources/User";
 import { getRandomArbitrary } from "@/services/random-value";
+import { usePreloadImages } from "@/hooks/preload/images";
 
 const drawElementChangeDelay = 1500;
 const startDelay = 500;
@@ -55,6 +56,16 @@ function ScannedPhoto() {
 
   const { authorization } = useAuthentication();
 
+  usePreloadImages([
+    "/v2/compatibility/download-app.png",
+    "/v2/compatibility/love-line.svg",
+    "/v2/compatibility/head-line.svg",
+    "/v2/compatibility/life-line.svg",
+    "/v2/compatibility/fate-line.svg",
+    "/v2/compatibility/hand-little-finger.svg",
+    "/v2/compatibility/partners.png"
+  ])
+
   const drawElements = useMemo(() => [...fingers, ...lines], [fingers, lines]);
 
   const { relationshipStatus } = useSelector(selectors.selectCompatibilityV2Answers)

src/components/CompatibilityV2/pages/TrialChoice/index.tsx

@@ -21,6 +21,8 @@ import { useTranslations } from "@/hooks/translations";
 import { getLongText } from "./abText";
 import metricService, { EGoals, EMetrics, useMetricABFlags } from "@/services/metric/metricService";
 import TrialChoiceV1 from "./v1";
+import { usePreloadImages } from "@/hooks/preload/images";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
 
 function TrialChoice() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
@@ -30,6 +32,26 @@ function TrialChoice() {
     placementKey: EPlacementKeys["aura.placement.compatibility.v2"],
     localesPlacement: ELocalesPlacement.CompatibilityV2,
   });
+  const { gender, partnerGender, birthdate, partnerBirthdate } = useSelector(selectors.selectQuestionnaire)
+  const zodiacSign = getZodiacSignByDate(birthdate);
+  const zodiacSignPartner = getZodiacSignByDate(partnerBirthdate);
+
+  usePreloadImages([
+    `/zodiac-signs/${gender}/${zodiacSign?.toLowerCase()}.svg`,
+    `/zodiac-signs/${partnerGender}/${zodiacSignPartner?.toLowerCase()}.svg`,
+    "/v2/compatibility/reviews.png",
+    "/v2/compatibility/trial-payment/girl2.png",
+    "/v2/compatibility/trial-payment/avatar-1.png",
+    "/v2/compatibility/trial-payment/avatar-2.png",
+    "/v2/compatibility/trial-payment/avatar-4.png",
+    "/v2/compatibility/money-back.svg",
+    "/v2/compatibility/love-line.svg",
+    "/v2/compatibility/head-line.svg",
+    "/v2/compatibility/life-line.svg",
+    "/v2/compatibility/fate-line.svg",
+    "/v2/compatibility/hand-little-finger.svg",
+    "/v2/compatibility/partners.png"
+  ])
 
   const locale = getDefaultLocaleByLanguage(language);
 

src/components/CompatibilityV3/pages/Birthdate/index.tsx

@@ -12,6 +12,8 @@ import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useSession } from "@/hooks/session/useSession";
 import { ESourceAuthorization } from "@/api/resources/User";
+import { usePreloadImages } from "@/hooks/preload/images";
+import { getZodiacSignByDate, ZODIACS } from "@/services/zodiac-sign";
 
 function Birthdate() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
@@ -21,6 +23,18 @@ function Birthdate() {
   const birthdateFromStore = useSelector(selectors.selectBirthdate);
   const [birthdate, setBirthdate] = useState(birthdateFromStore);
   const [isDisabled, setIsDisabled] = useState(true);
+  const { gender } = useSelector(selectors.selectQuestionnaire);
+  const zodiacSign = getZodiacSignByDate(birthdate);
+
+  usePreloadImages(
+    !!zodiacSign?.length ?
+      [
+        `/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`
+      ] :
+      ZODIACS.map(
+        (zodiac) => `/zodiac-signs/${gender?.toLowerCase()}/${zodiac?.toLowerCase()}.svg`
+      )
+  );
 
   const handleValid = (_birthdate: string) => {
     setBirthdate(_birthdate);

src/components/CompatibilityV3/pages/BirthdatePartner/index.tsx

@@ -11,6 +11,8 @@ import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useSession } from "@/hooks/session/useSession";
 import { ESourceAuthorization } from "@/api/resources/User";
+import { usePreloadImages } from "@/hooks/preload/images";
+import { getZodiacSignByDate, ZODIACS } from "@/services/zodiac-sign";
 
 function BirthdatePartner() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
@@ -20,6 +22,18 @@ function BirthdatePartner() {
   const { partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
   const [birthdate, setBirthdate] = useState(partnerBirthdate || "");
   const [isDisabled, setIsDisabled] = useState(true);
+  const { partnerGender } = useSelector(selectors.selectQuestionnaire);
+  const zodiacSign = getZodiacSignByDate(birthdate);
+
+  usePreloadImages(
+    !!zodiacSign?.length ?
+      [
+        `/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`
+      ] :
+      ZODIACS.map(
+        (zodiac) => `/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiac?.toLowerCase()}.svg`
+      )
+  );
 
   const handleValid = (_birthdate: string) => {
     setBirthdate(_birthdate);

src/components/CompatibilityV3/pages/CheckingPhone/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV3 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function CheckingPhone() {
   const { checkingPhone, relationshipStatus } = useSelector(
     selectors.selectCompatibilityV3Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV3["checking_phone"];

src/components/CompatibilityV3/pages/Gender/index.tsx

@@ -14,7 +14,6 @@ import { genders } from "@/components/pages/ABDesign/v1/data/genders";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { usePreloadImages } from "@/hooks/preload/images";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { EGender, ESourceAuthorization } from "@/api/resources/User";
 import AlreadyHaveAccount from "@/components/ui/AlreadyHaveAccount";
@@ -33,10 +32,7 @@ function GenderPage() {
 
   const { gender } = useSelector(selectors.selectQuestionnaire);
   const [isSelected, setIsSelected] = useState(false);
-  usePreloadImages(["/v1/palmistry/hand-with-eye.svg"]);
-  useLottie({
-    preloadKey: ELottieKeys.handSymbols,
-  });
+  usePreloadImages(["/v3/compatibility/hand-with-eye.svg"]);
 
   const { flags, ready } = useMetricABFlags();
   const pageType = flags?.genderPageType?.[0] || "v2";

src/components/CompatibilityV3/pages/GenderPartner/index.tsx

@@ -12,7 +12,6 @@ import { genders } from "@/components/pages/ABDesign/v1/data/genders";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { usePreloadImages } from "@/hooks/preload/images";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { EGender, ESourceAuthorization } from "@/api/resources/User";
 import Answer from "../../components/Answer";
@@ -29,10 +28,7 @@ function GenderPartner() {
 
   const { partnerGender } = useSelector(selectors.selectQuestionnaire);
   const [isSelected, setIsSelected] = useState(false);
-  usePreloadImages(["/v1/palmistry/hand-with-eye.svg"]);
-  useLottie({
-    preloadKey: ELottieKeys.handSymbols,
-  });
+  usePreloadImages(["/v3/compatibility/hand-with-eye.svg"]);
 
   const localGenders = genders.map((gender) => ({
     id: gender.id,

src/components/CompatibilityV3/pages/HeadOrHeart/index.tsx

@@ -14,7 +14,6 @@ import { usePreloadImages } from "@/hooks/preload/images";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV3 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 
 function HeadOrHeart() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
@@ -22,24 +21,11 @@ function HeadOrHeart() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { headOrHeart } = useSelector(selectors.selectCompatibilityV3Answers);
-  usePreloadImages([
-    "/v1/palmistry/money-back.svg",
-    "/v1/palmistry/hand.svg",
-    "/v1/palmistry/1_1.svg",
-    "/v1/palmistry/daily.svg",
-    "/v1/palmistry/cosmic.svg",
-    "/v1/palmistry/calendar.svg",
-    "/v1/palmistry/reviews/rebecca.png",
-    "/v1/palmistry/reviews/mika.png",
-    "/v1/palmistry/reviews/amanda.png",
-    "/v1/palmistry/partners.png",
-  ]);
-  useLottie({
-    preloadKey: ELottieKeys.letScan,
-  });
-  useLottie({
-    preloadKey: ELottieKeys.scannedPhoto,
-  });
+  usePreloadImages(
+    ["head", "heart", "both"].map(
+      (headOrHeart) => `/v3/compatibility/head-or-heart-result/${headOrHeart}.svg`
+    )
+  );
 
   const answers: { id: IAnswersSessionCompatibilityV3["head_or_heart"]; title: string }[] =
     useMemo(

src/components/CompatibilityV3/pages/HeadOrHeartResult/index.tsx

@@ -1,6 +1,4 @@
-// import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import styles from "./styles.module.scss";
-// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import Title from "@/components/Title";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
@@ -13,13 +11,8 @@ import routes from "@/routes";
 import { useMemo } from "react";
 import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
 import Loader, { LoaderColor } from "@/components/Loader";
-
-// const animations = {
-//   both: ELottieKeys.scalesNeutralPalmistry,
-//   heart: ELottieKeys.scalesHeartPalmistry,
-//   head: ELottieKeys.scalesHeadPalmistry,
-//   depends: ELottieKeys.scalesNeutralPalmistry,
-// };
+import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
+import { useTheme } from "@/hooks/theme/useTheme";
 
 function HeadOrHeartResult() {
   const navigate = useNavigate();
@@ -28,14 +21,18 @@ function HeadOrHeartResult() {
   const { gender, partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
   const translatePrefix = relationshipStatus === "single" ? "single" : "with-partner";
 
+  const { darkTheme } = useTheme();
+  useLottie({
+    preloadKey: darkTheme ? ELottieKeys.letScanDark : ELottieKeys.letScan,
+  });
+  useLottie({
+    preloadKey: ELottieKeys.scannedPhoto,
+  });
+
   const { isReady, variant } = useUnleash({
     flag: EUnleashFlags.headOrHeartResultPageCompatibilityV3,
   });
 
-  // const { animationData } = useLottie({
-  //   loadKey: animations[headOrHeart as keyof typeof animations],
-  // });
-
   const birthdate = useSelector(selectors.selectBirthdate);
   const zodiacSign = getZodiacSignByDate(birthdate);
   const zodiacSignPartner = getZodiacSignByDate(partnerBirthdate);
@@ -45,7 +42,6 @@ function HeadOrHeartResult() {
   };
 
   const handleNext = () => {
-    // navigate(`${routes.client.compatibilityV3RelateFollowing()}/1`);
     navigate(routes.client.compatibilityV3ScannedPhoto());
   };
 
@@ -58,16 +54,6 @@ function HeadOrHeartResult() {
 
   return (
     <section className={styles.container}>
-      {/* <div className={styles["animation-container"]}>
-        {animationData && (
-          <DotLottieReact
-            className={`${styles["lottie-animation"]} ym-hide-content`}
-            data={animationData}
-            autoplay
-            loop={false}
-          />
-        )}
-      </div> */}
       {variant === "v1" && <img
         src={imageUrl}
         alt="result image"

src/components/CompatibilityV3/pages/PalmsInformation/index.tsx

@@ -6,7 +6,6 @@ import Policy from "@/components/Policy";
 import { useTranslations } from "@/hooks/translations";
 import { useNavigate } from "react-router-dom";
 import { ELocalesPlacement } from "@/locales";
-// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { selectors } from "@/store";
 import { useSelector } from "react-redux";
@@ -17,9 +16,7 @@ function PalmsInformation() {
   const { gender, birthdate } = useSelector(selectors.selectQuestionnaire);
   const zodiacSign = getZodiacSignByDate(birthdate);
   const navigate = useNavigate();
-  // const { animationData } = 
   useLottie({
-    // loadKey: ELottieKeys.handSymbols,
     preloadKey: ELottieKeys.scalesHeadPalmistry,
   });
 
@@ -29,28 +26,18 @@ function PalmsInformation() {
 
   return (
     <div className={styles["page-container"]}>
-      {/* {animationData && (
-        <DotLottieReact
-          className={`${styles["lottie-animation"]} ym-hide-content`}
-          data={animationData}
-          autoplay
-          loop={false}
-          width={1920}
-        />
-      )} */}
       <div className={styles.zodiac}>
         <img
           className={styles.image}
-          // src={images(`zodiacs/${gender}/${zodiacSign.toUpperCase()}.webp`)}
-          src={`/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign.toLowerCase()}.svg`}
+          src={`/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`}
           alt="Zodiac sign"
         />
       </div>
       <Title variant="h2" className={styles.title}>
-        {translate(`/palms-information.${zodiacSign.toLowerCase()}.title`)}
+        {translate(`/palms-information.${zodiacSign?.toLowerCase()}.title`)}
       </Title>
       <p className={styles.description}>
-        {translate(`/palms-information.${zodiacSign.toLowerCase()}.description`, {
+        {translate(`/palms-information.${zodiacSign?.toLowerCase()}.description`, {
           br: <br />,
         })}
       </p>

src/components/CompatibilityV3/pages/PalmsInformationPartner/index.tsx

@@ -5,23 +5,21 @@ import Button from "../../components/Button";
 import { useTranslations } from "@/hooks/translations";
 import { useNavigate } from "react-router-dom";
 import { ELocalesPlacement } from "@/locales";
-// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
+import { usePreloadImages } from "@/hooks/preload/images";
 
 function PalmsInformationPartner() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
   const { partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
-  
+
   const zodiacSign = getZodiacSignByDate(partnerBirthdate);
   const navigate = useNavigate();
-  // const { animationData } = 
-  useLottie({
-    // loadKey: ELottieKeys.handSymbols,
-    preloadKey: ELottieKeys.scalesHeadPalmistry,
-  });
+
+  usePreloadImages([
+    "/v3/compatibility/hand-with-eye.svg"
+  ])
 
   const handleNext = () => {
     navigate(routes.client.compatibilityV3DateEvent());
@@ -42,7 +40,7 @@ function PalmsInformationPartner() {
         <img
           className={styles.image}
           // src={images(`zodiacs/${partnerGender}/${zodiacSign?.toUpperCase()}.webp`)}
-          src={`/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign.toLowerCase()}.svg`}
+          src={`/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`}
           alt="Zodiac sign"
         />
       </div>

src/components/CompatibilityV3/pages/RelationshipStatus/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV3 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function RelationshipStatus() {
   const { relationshipStatus } = useSelector(
     selectors.selectCompatibilityV3Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV3["relationship_status"];

src/components/CompatibilityV3/pages/RomanticGestures/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV3 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function RomanticGestures() {
   const { romanticGestures } = useSelector(
     selectors.selectCompatibilityV3Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV3["romantic_gestures"];

src/components/CompatibilityV3/pages/ScannedPhoto/index.tsx

@@ -18,6 +18,8 @@ import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { useMetricABFlags } from "@/services/metric/metricService";
 import { getRandomArbitrary } from "@/services/random-value";
+import { usePreloadImages } from "@/hooks/preload/images";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
 
 // const drawElementChangeDelay = 1500;
 // const startDelay = 500;
@@ -55,6 +57,17 @@ function ScannedPhoto() {
 
   const { authorization } = useAuthentication();
 
+  const { gender, partnerGender, birthdate, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
+  const zodiacSign = getZodiacSignByDate(birthdate);
+  const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
+
+  usePreloadImages([
+    `/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`,
+    `/zodiac-signs/${partnerGender?.toLowerCase()}/${partnerZodiacSign?.toLowerCase()}.svg`,
+    "/v3/compatibility/download-app.png",
+    "/v3/compatibility/partners.png"
+  ])
+
   // const drawElements = useMemo(() => [...fingers, ...lines], [fingers, lines]);
 
   const { relationshipStatus } = useSelector(selectors.selectCompatibilityV3Answers)

src/components/CompatibilityV3/pages/TrialChoice/index.tsx

@@ -20,6 +20,9 @@ import { useTranslations } from "@/hooks/translations";
 // import { useMetricABFlags } from "@/services/metric/metricService";
 import { getLongText } from "./abText";
 import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
+import { usePreloadImages } from "@/hooks/preload/images";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+import { images } from "../../data";
 
 function TrialChoice() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
@@ -29,6 +32,25 @@ function TrialChoice() {
     placementKey: EPlacementKeys["aura.placement.compatibility.v3"],
     localesPlacement: ELocalesPlacement.CompatibilityV3,
   });
+  const { gender, partnerGender, birthdate, partnerBirthdate } = useSelector(selectors.selectQuestionnaire)
+  const zodiacSign = getZodiacSignByDate(birthdate);
+  const zodiacSignPartner = getZodiacSignByDate(partnerBirthdate);
+
+  usePreloadImages([
+    images(`zodiacs/${gender}/${zodiacSign?.toUpperCase()}.webp`),
+    images(`zodiacs/${partnerGender}/${zodiacSignPartner?.toUpperCase()}.webp`),
+    "/v3/compatibility/trial-payment/girl2.png",
+    "/v3/compatibility/trial-payment/avatar-1.png",
+    "/v3/compatibility/trial-payment/avatar-2.png",
+    "/v3/compatibility/trial-payment/avatar-3.png",
+    "/v3/compatibility/trial-payment/avatar-4.png",
+    "/v3/compatibility/love-line.svg",
+    "/v3/compatibility/head-line.svg",
+    "/v3/compatibility/life-line.svg",
+    "/v3/compatibility/fate-line.svg",
+    "/v3/compatibility/hand-little-finger.svg",
+    "/v3/compatibility/partners.png"
+  ])
 
   const locale = getDefaultLocaleByLanguage(language);
 

src/components/CompatibilityV4/pages/CalculateInAdvance/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV4 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function CalculateInAdvance() {
   const { calculateInAdvance } = useSelector(
     selectors.selectCompatibilityV4Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV4["calculate_in_advance"];

src/components/CompatibilityV4/pages/CheckingPhone/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV4 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function CheckingPhone() {
   const { checkingPhone } = useSelector(
     selectors.selectCompatibilityV4Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV4["checking_phone"];

src/components/CompatibilityV4/pages/ComplexRelationshipAspect/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV4 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function ComplexRelationshipAspect() {
   const { complexRelationshipAspect } = useSelector(
     selectors.selectCompatibilityV4Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV4["complex_relationship_aspect"];

src/components/CompatibilityV4/pages/Gender/index.tsx

@@ -2,7 +2,6 @@ import styles from "./styles.module.scss";
 import { useDispatch, useSelector } from "react-redux";
 import { actions, selectors } from "@/store";
 import { Gender } from "@/data";
-// import Toast from "@/components/pages/ABDesign/v1/components/Toast";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useCallback, useEffect, useState } from "react";
@@ -12,7 +11,6 @@ import { genders } from "@/components/pages/ABDesign/v1/data/genders";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { usePreloadImages } from "@/hooks/preload/images";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { EGender, ESourceAuthorization } from "@/api/resources/User";
 import Loader, { LoaderColor } from "@/components/Loader";
@@ -33,9 +31,6 @@ function GenderPage() {
   const { gender } = useSelector(selectors.selectQuestionnaire);
   const [isSelected, setIsSelected] = useState(false);
   usePreloadImages(["/v1/palmistry/hand-with-eye.svg"]);
-  useLottie({
-    preloadKey: ELottieKeys.handSymbols,
-  });
 
   const { flags, ready } = useMetricABFlags();
   const pageType = flags?.genderPageType?.[0] || "v2";

src/components/CompatibilityV4/pages/GenderPartner/index.tsx

@@ -12,7 +12,6 @@ import { genders } from "@/components/pages/ABDesign/v1/data/genders";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { usePreloadImages } from "@/hooks/preload/images";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { EGender, ESourceAuthorization } from "@/api/resources/User";
 import Answer from "../../components/Answer";
@@ -30,9 +29,6 @@ function GenderPartner() {
   const { partnerGender } = useSelector(selectors.selectQuestionnaire);
   const [isSelected, setIsSelected] = useState(false);
   usePreloadImages(["/v1/palmistry/hand-with-eye.svg"]);
-  useLottie({
-    preloadKey: ELottieKeys.handSymbols,
-  });
 
   const localGenders = genders.map((gender) => ({
     id: gender.id,

src/components/CompatibilityV4/pages/HeadOrHeart/index.tsx

@@ -14,7 +14,6 @@ import { usePreloadImages } from "@/hooks/preload/images";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV4 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 
 function HeadOrHeart() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
@@ -22,21 +21,11 @@ function HeadOrHeart() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { headOrHeart } = useSelector(selectors.selectCompatibilityV4Answers);
-  usePreloadImages([
-    "/v1/palmistry/money-back.svg",
-    "/v1/palmistry/hand.svg",
-    "/v1/palmistry/1_1.svg",
-    "/v1/palmistry/daily.svg",
-    "/v1/palmistry/cosmic.svg",
-    "/v1/palmistry/calendar.svg",
-    "/v1/palmistry/reviews/rebecca.png",
-    "/v1/palmistry/reviews/mika.png",
-    "/v1/palmistry/reviews/amanda.png",
-    "/v1/palmistry/partners.png",
-  ]);
-  useLottie({
-    preloadKey: ELottieKeys.letScan,
-  });
+  usePreloadImages(
+    ["head", "heart", "both"].map(
+      (headOrHeart) => `/v4/compatibility/head-or-heart-result/${headOrHeart}.svg`
+    )
+  );
 
   const answers: { id: IAnswersSessionCompatibilityV4["head_or_heart"]; title: string }[] =
     useMemo(

src/components/CompatibilityV4/pages/HeadOrHeartResult/index.tsx

@@ -1,6 +1,4 @@
-// import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import styles from "./styles.module.scss";
-// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import Title from "@/components/Title";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
@@ -12,13 +10,6 @@ import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { useMemo } from "react";
 
-// const animations = {
-//   both: ELottieKeys.scalesNeutralPalmistry,
-//   heart: ELottieKeys.scalesHeartPalmistry,
-//   head: ELottieKeys.scalesHeadPalmistry,
-//   depends: ELottieKeys.scalesNeutralPalmistry,
-// };
-
 function HeadOrHeartResult() {
   const navigate = useNavigate();
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
@@ -30,10 +21,6 @@ function HeadOrHeartResult() {
   //   flag: EUnleashFlags.headOrHeartResultPageCompatibilityV4,
   // });
 
-  // const { animationData } = useLottie({
-  //   loadKey: animations[headOrHeart as keyof typeof animations],
-  // });
-
   const birthdate = useSelector(selectors.selectBirthdate);
   const zodiacSign = getZodiacSignByDate(birthdate);
   const zodiacSignPartner = getZodiacSignByDate(partnerBirthdate);
@@ -56,16 +43,6 @@ function HeadOrHeartResult() {
 
   return (
     <section className={styles.container}>
-      {/* <div className={styles["animation-container"]}>
-        {animationData && (
-          <DotLottieReact
-            className={`${styles["lottie-animation"]} ym-hide-content`}
-            data={animationData}
-            autoplay
-            loop={false}
-          />
-        )}
-      </div> */}
       <img
         src={imageUrl}
         alt="result image"

src/components/CompatibilityV4/pages/Loading/index.tsx

@@ -14,6 +14,8 @@ import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import Modal from "@/components/Modal";
 import { ESourceAuthorization } from "@/api/resources/User";
 import { useAuthentication } from "@/hooks/authentication/use-authentication";
+import { usePreloadImages } from "@/hooks/preload/images";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
 
 interface IPoint {
     title1: string;
@@ -43,6 +45,20 @@ function Loading() {
     const isIOSPath = useMemo(() => feature?.toLowerCase()?.includes("ios"), [feature]);
     const authCode = useSelector(selectors.selectAuthCode);
 
+    const { gender, partnerGender, birthdate, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
+    const zodiacSign = getZodiacSignByDate(birthdate);
+    const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
+
+    const preloadImages = useMemo(() => {
+        return [
+            "/v4/compatibility/trial-payment/book.png",
+            `/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`,
+            `/zodiac-signs/${partnerGender?.toLowerCase()}/${partnerZodiacSign?.toLowerCase()}.svg`
+        ]
+    }, [gender, partnerGender, birthdate, partnerBirthdate])
+
+    usePreloadImages(preloadImages)
+
     const loadingPointSettings = useMemo(() => {
         const currentPointIndex = Math.floor(progress / 100);
         const endFastLoading = getRandomArbitrary(15, 30);

src/components/CompatibilityV4/pages/PalmsInformation/index.tsx

@@ -6,8 +6,6 @@ import Policy from "@/components/Policy";
 import { useTranslations } from "@/hooks/translations";
 import { useNavigate } from "react-router-dom";
 import { ELocalesPlacement } from "@/locales";
-// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
@@ -17,11 +15,6 @@ function PalmsInformation() {
   const { gender, birthdate } = useSelector(selectors.selectQuestionnaire);
   const zodiacSign = getZodiacSignByDate(birthdate);
   const navigate = useNavigate();
-  // const { animationData } = 
-  useLottie({
-    // loadKey: ELottieKeys.handSymbols,
-    preloadKey: ELottieKeys.scalesHeadPalmistry,
-  });
 
   const handleNext = () => {
     navigate(routes.client.compatibilityV4ResultAnalysis());
@@ -29,32 +22,22 @@ function PalmsInformation() {
 
   return (
     <div className={styles["page-container"]}>
-      {/* {animationData && (
-        <DotLottieReact
-          className={`${styles["lottie-animation"]} ym-hide-content`}
-          data={animationData}
-          autoplay
-          loop={false}
-          width={1920}
-        />
-      )} */}
       <div className={styles.zodiac}>
         <img
           className={styles.image}
-          // src={images(`zodiacs/${gender}/${zodiacSign.toUpperCase()}.webp`)}
-          src={`/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign.toLowerCase()}.svg`}
+          src={`/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`}
           alt="Zodiac sign"
         />
       </div>
       <Title variant="h2" className={styles.title}>
-        {translate(`/palms-information.${zodiacSign.toLowerCase()}.title`)}
+        {translate(`/palms-information.${zodiacSign?.toLowerCase()}.title`)}
       </Title>
       <p className={styles.description}>
-        {translate(`/palms-information.${zodiacSign.toLowerCase()}.description`, {
+        {translate(`/palms-information.${zodiacSign?.toLowerCase()}.description`, {
           br: <br />,
-          bold: <b>{translate(`/palms-information.${zodiacSign.toLowerCase()}.description_bold`)}</b>,
-          percent: <b>{translate(`/palms-information.${zodiacSign.toLowerCase()}.description_percent`)}</b>,
-          zodiac: <b>{translate(`zodiac_signs.${zodiacSign.toLowerCase()}`)}</b>,
+          bold: <b>{translate(`/palms-information.${zodiacSign?.toLowerCase()}.description_bold`)}</b>,
+          percent: <b>{translate(`/palms-information.${zodiacSign?.toLowerCase()}.description_percent`)}</b>,
+          zodiac: <b>{translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}</b>,
         })}
       </p>
       <Button onClick={handleNext}>

src/components/CompatibilityV4/pages/PalmsInformationPartner/index.tsx

@@ -5,8 +5,6 @@ import Button from "../../components/Button";
 import { useTranslations } from "@/hooks/translations";
 import { useNavigate } from "react-router-dom";
 import { ELocalesPlacement } from "@/locales";
-// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
@@ -17,11 +15,6 @@ function PalmsInformationPartner() {
 
   const zodiacSign = getZodiacSignByDate(partnerBirthdate);
   const navigate = useNavigate();
-  // const { animationData } = 
-  useLottie({
-    // loadKey: ELottieKeys.handSymbols,
-    preloadKey: ELottieKeys.scalesHeadPalmistry,
-  });
 
   const handleNext = () => {
     navigate(routes.client.compatibilityV4HeadOrHeart());
@@ -29,20 +22,10 @@ function PalmsInformationPartner() {
 
   return (
     <div className={styles["page-container"]}>
-      {/* {animationData && (
-        <DotLottieReact
-          className={`${styles["lottie-animation"]} ym-hide-content`}
-          data={animationData}
-          autoplay
-          loop={false}
-          width={1920}
-        />
-      )} */}
       <div className={styles.zodiac}>
         <img
           className={styles.image}
-          // src={images(`zodiacs/${partnerGender}/${zodiacSign?.toUpperCase()}.webp`)}
-          src={`/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign.toLowerCase()}.svg`}
+          src={`/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`}
           alt="Zodiac sign"
         />
       </div>
@@ -52,43 +35,12 @@ function PalmsInformationPartner() {
       <p className={styles.description}>
         {translate(`/palms-information-partner.${zodiacSign?.toLowerCase()}.description`, {
           br: <br />,
-          bold: <b>{translate(`/palms-information.${zodiacSign.toLowerCase()}.description_bold`)}</b>
+          bold: <b>{translate(`/palms-information.${zodiacSign?.toLowerCase()}.description_bold`)}</b>
         })}
       </p>
       <Button onClick={handleNext}>
         {translate("next")}
       </Button>
-      {/* <Policy>
-        {translate("privacy_policy", {
-          eulaLink: (
-            <a
-              href="https://aura.wit.life/terms"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {translate("eula_link")}
-            </a>
-          ),
-          privacyLink: (
-            <a
-              href="https://aura.wit.life/privacy"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {translate("privacy_notice")}
-            </a>
-          ),
-          clickHere: (
-            <a
-              href="https://aura.wit.life/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {translate("policy_here")}
-            </a>
-          ),
-        })}
-      </Policy> */}
     </div>
   );
 }

src/components/CompatibilityV4/pages/PartnerAnalysis/index.tsx

@@ -7,6 +7,10 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { sleep } from "@/services/date";
 import { CircularProgressbar } from "react-circular-progressbar";
 import routes from "@/routes";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+import { usePreloadImages } from "@/hooks/preload/images";
 
 const POINTS_COUNT = 11;
 const TOTAL_ANIMATION_TIME = 24600;
@@ -17,6 +21,12 @@ function PartnerAnalysis() {
     const [loadingProgress, setLoadingProgress] = useState(0);
     const listRef = useRef<Array<HTMLParagraphElement | null>>([]);
 
+    const { partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
+    const zodiacSign = getZodiacSignByDate(partnerBirthdate);
+    usePreloadImages([
+        `/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`
+    ]);
+
     const [listHeight, setListHeight] = useState(0);
 
     useEffect(() => {

src/components/CompatibilityV4/pages/RelationshipStatus/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV4 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function RelationshipStatus() {
   const { relationshipStatus } = useSelector(
     selectors.selectCompatibilityV4Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV4["relationship_status"];

src/components/CompatibilityV4/pages/RomanticGestures/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV4 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function RomanticGestures() {
   const { romanticGestures } = useSelector(
     selectors.selectCompatibilityV4Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV4["romantic_gestures"];

src/components/CompatibilityV4/pages/StressResponse/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionCompatibilityV4 } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function StressResponse() {
   const { stressResponse } = useSelector(
     selectors.selectCompatibilityV4Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionCompatibilityV4["stress_response"];

src/components/CompatibilityV4/pages/TrialChoice/index.tsx

@@ -20,6 +20,8 @@ import { useTranslations } from "@/hooks/translations";
 // import { useMetricABFlags } from "@/services/metric/metricService";
 import { getLongText } from "./abText";
 import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
+import { usePreloadImages } from "@/hooks/preload/images";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
 
 function TrialChoice() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
@@ -30,6 +32,17 @@ function TrialChoice() {
     localesPlacement: ELocalesPlacement.CompatibilityV4,
   });
 
+  const { gender, partnerGender, birthdate, partnerBirthdate } = useSelector(selectors.selectQuestionnaire)
+  const zodiacSign = getZodiacSignByDate(birthdate);
+  const zodiacSignPartner = getZodiacSignByDate(partnerBirthdate);
+
+  usePreloadImages([
+    "/v4/compatibility/trial-payment/book.png",
+    `/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`,
+    `/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSignPartner?.toLowerCase()}.svg`,
+    "/v4/compatibility/partners.png"
+  ])
+
   const locale = getDefaultLocaleByLanguage(language);
 
   // const { flags } = useMetricABFlags();

src/components/CompatibilityV4/pages/YourAnalysis/index.tsx

@@ -7,6 +7,10 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { sleep } from "@/services/date";
 import { CircularProgressbar } from "react-circular-progressbar";
 import routes from "@/routes";
+import { usePreloadImages } from "@/hooks/preload/images";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
 
 const POINTS_COUNT = 13;
 const TOTAL_ANIMATION_TIME = 24600;
@@ -17,6 +21,12 @@ function YourAnalysis() {
     const [loadingProgress, setLoadingProgress] = useState(0);
     const listRef = useRef<Array<HTMLParagraphElement | null>>([]);
 
+    const { gender, birthdate } = useSelector(selectors.selectQuestionnaire);
+    const zodiacSign = getZodiacSignByDate(birthdate);
+    usePreloadImages([
+        `/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`
+    ]);
+
     const [listHeight, setListHeight] = useState(0);
 
     useEffect(() => {

src/components/PalmistryV1/pages/Birthdate/index.tsx

@@ -12,6 +12,7 @@ import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useSession } from "@/hooks/session/useSession";
 import { ESourceAuthorization } from "@/api/resources/User";
+import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 
 function Birthdate() {
   const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
@@ -21,6 +22,9 @@ function Birthdate() {
   const birthdateFromStore = useSelector(selectors.selectBirthdate);
   const [birthdate, setBirthdate] = useState(birthdateFromStore);
   const [isDisabled, setIsDisabled] = useState(true);
+  useLottie({
+    preloadKey: ELottieKeys.handSymbols,
+  });
 
   const handleValid = (_birthdate: string) => {
     setBirthdate(_birthdate);

src/components/PalmistryV1/pages/GenderPalmistry/index.tsx

@@ -14,7 +14,6 @@ import { genders } from "@/components/pages/ABDesign/v1/data/genders";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { usePreloadImages } from "@/hooks/preload/images";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { EGender, ESourceAuthorization } from "@/api/resources/User";
 import AlreadyHaveAccount from "@/components/ui/AlreadyHaveAccount";
@@ -33,9 +32,6 @@ function GenderPalmistry() {
   const { gender } = useSelector(selectors.selectQuestionnaire);
   const [isSelected, setIsSelected] = useState(false);
   usePreloadImages(["/v1/palmistry/hand-with-eye.svg"]);
-  useLottie({
-    preloadKey: ELottieKeys.handSymbols,
-  });
 
   const localGenders = genders.map((gender) => ({
     id: gender.id,

src/components/PalmistryV1/pages/HeadOrHeart/index.tsx

@@ -21,18 +21,11 @@ function HeadOrHeart() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { headOrHeart } = useSelector(selectors.selectPalmistryV1Answers);
-  usePreloadImages([
-    "/v1/palmistry/money-back.svg",
-    "/v1/palmistry/hand.svg",
-    "/v1/palmistry/1_1.svg",
-    "/v1/palmistry/daily.svg",
-    "/v1/palmistry/cosmic.svg",
-    "/v1/palmistry/calendar.svg",
-    "/v1/palmistry/reviews/rebecca.png",
-    "/v1/palmistry/reviews/mika.png",
-    "/v1/palmistry/reviews/amanda.png",
-    "/v1/palmistry/partners.png",
-  ]);
+  usePreloadImages(
+    ["head", "heart", "both"].map(
+      (headOrHeart) => `/v1/palmistry/head-or-heart-result/${headOrHeart}.svg`
+    )
+  );
 
   const answers: { id: IAnswersSessionPalmistry["head_or_heart"]; title: string }[] =
     useMemo(

src/components/PalmistryV1/pages/HeadOrHeartResult/index.tsx

@@ -1,6 +1,4 @@
-// import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import styles from "./styles.module.scss";
-// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import Title from "@/components/Title";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
@@ -13,13 +11,7 @@ import routes from "@/routes";
 import { useMemo } from "react";
 import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
 import Loader, { LoaderColor } from "@/components/Loader";
-
-// const animations = {
-//   both: ELottieKeys.scalesNeutralPalmistry,
-//   heart: ELottieKeys.scalesHeartPalmistry,
-//   head: ELottieKeys.scalesHeadPalmistry,
-//   depends: ELottieKeys.scalesNeutralPalmistry,
-// };
+import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 
 function HeadOrHeartResult() {
   const navigate = useNavigate();
@@ -31,9 +23,9 @@ function HeadOrHeartResult() {
     flag: EUnleashFlags.headOrHeartResultPagePalmistryV1,
   });
 
-  // const { animationData } = useLottie({
-  //   loadKey: animations[headOrHeart as keyof typeof animations],
-  // });
+  useLottie({
+    preloadKey: ELottieKeys.letScan
+  })
 
   const birthdate = useSelector(selectors.selectBirthdate);
   const zodiacSign = getZodiacSignByDate(birthdate);
@@ -56,16 +48,6 @@ function HeadOrHeartResult() {
 
   return (
     <section className={styles.container}>
-      {/* <div className={styles["animation-container"]}>
-        {animationData && (
-          <DotLottieReact
-            className={`${styles["lottie-animation"]} ym-hide-content`}
-            data={animationData}
-            autoplay
-            loop={false}
-          />
-        )}
-      </div> */}
       {variant === "v1" && <img
         src={imageUrl}
         alt="result image"

src/components/PalmistryV1/pages/PalmsInformation/index.tsx

@@ -13,8 +13,7 @@ function PalmsInformation() {
   const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
   const navigate = useNavigate();
   const { animationData } = useLottie({
-    loadKey: ELottieKeys.handSymbols,
-    preloadKey: ELottieKeys.scalesHeadPalmistry,
+    loadKey: ELottieKeys.handSymbols
   });
 
   return (

src/components/PalmistryV1/pages/RelationshipStatus/index.tsx

@@ -10,7 +10,6 @@ import { answerTimeOut } from "../../data";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useMemo } from "react";
-import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { useSession } from "@/hooks/session/useSession";
 import { IAnswersSessionPalmistry } from "@/api/resources/Session";
 import { ESourceAuthorization } from "@/api/resources/User";
@@ -23,9 +22,6 @@ function RelationshipStatus() {
   const { relationshipStatus } = useSelector(
     selectors.selectPalmistryV1Answers
   );
-  useLottie({
-    preloadKey: ELottieKeys.scalesNeutralPalmistry,
-  });
 
   const answers: {
     id: IAnswersSessionPalmistry["relationship_status"];

src/components/PalmistryV1/pages/ScannedPhoto/index.tsx

@@ -12,6 +12,7 @@ import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useAuthentication } from "@/hooks/authentication/use-authentication";
 import { ESourceAuthorization } from "@/api/resources/User";
+import { usePreloadImages } from "@/hooks/preload/images";
 
 const drawElementChangeDelay = 1500;
 const startDelay = 500;
@@ -36,6 +37,16 @@ function ScannedPhoto() {
 
   const { authorization } = useAuthentication();
 
+  usePreloadImages([
+    "/v2/palmistry/download-app.png",
+    "/v1/palmistry/love-line.svg",
+    "/v1/palmistry/head-line.svg",
+    "/v1/palmistry/life-line.svg",
+    "/v1/palmistry/fate-line.svg",
+    "/v1/palmistry/hand-little-finger.svg",
+    "/v1/palmistry/partners.png"
+  ])
+
 
   useEffect(() => {
     if (isIOSPath) {

src/components/PalmistryV1/pages/TrialChoice/index.tsx

@@ -21,6 +21,7 @@ import { useTranslations } from "@/hooks/translations";
 import { getLongText } from "./abText";
 import metricService, { EGoals, EMetrics, useMetricABFlags } from "@/services/metric/metricService";
 import TrialChoiceV1 from "./v1";
+import { usePreloadImages } from "@/hooks/preload/images";
 
 function TrialChoice() {
   const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
@@ -31,6 +32,20 @@ function TrialChoice() {
     localesPlacement: ELocalesPlacement.PalmistryV1,
   });
 
+  usePreloadImages([
+    "/v1/palmistry/trial-payment/girl2.png",
+    "/v1/palmistry/trial-payment/avatar-1.png",
+    "/v1/palmistry/trial-payment/avatar-2.png",
+    "/v1/palmistry/trial-payment/avatar-3.png",
+    "/v1/palmistry/trial-payment/avatar-4.png",
+    "/v1/palmistry/love-line.svg",
+    "/v1/palmistry/head-line.svg",
+    "/v1/palmistry/life-line.svg",
+    "/v1/palmistry/fate-line.svg",
+    "/v1/palmistry/hand-little-finger.svg",
+    "/v1/palmistry/partners.png"
+  ])
+
   const locale = getDefaultLocaleByLanguage(language);
 
   const { flags, ready } = useMetricABFlags();

src/components/pages/TrialPayment/components/WithPartnerInformation/index.tsx

@@ -45,7 +45,7 @@ function WithPartnerInformation(props: IWithPartnerInformationProps) {
         <ul>
           <li>
             <h6>Zodiac sign</h6>
-            <p>{zodiacSign.length ? zodiacSign : "-"}</p>
+            <p>{zodiacSign?.length ? zodiacSign : "-"}</p>
           </li>
           <li>
             <h6>Gender</h6>
@@ -63,7 +63,7 @@ function WithPartnerInformation(props: IWithPartnerInformationProps) {
         <ul>
           <li>
             <h6>Zodiac sign</h6>
-            <p>{partnerZodiacSign.length ? partnerZodiacSign : "-"}</p>
+            <p>{partnerZodiacSign?.length ? partnerZodiacSign : "-"}</p>
           </li>
           <li>
             <h6>Gender</h6>

src/hooks/ab/unleash/useUnleash.ts

@@ -24,6 +24,7 @@ export enum EUnleashFlags {
     "headOrHeartResultPageCompatibilityV4" = "headOrHeartResultPageCompatibilityV4",
     "compatibilityV1EmailEnter" = "compatibilityV1EmailEnter",
     "compatibilityV2ScanHand" = "compatibilityV2ScanHand",
+    "preloadImages" = "preloadImages",
 }
 
 interface IUseUnleashProps<T extends EUnleashFlags> {
@@ -52,6 +53,7 @@ interface IVariants {
     [EUnleashFlags.headOrHeartResultPageCompatibilityV4]: "v0" | "v1";
     [EUnleashFlags.compatibilityV1EmailEnter]: "show" | "hide";
     [EUnleashFlags.compatibilityV2ScanHand]: "show" | "hide";
+    [EUnleashFlags.preloadImages]: "yes" | "no";
 }
 
 /**

src/hooks/preload/images.ts

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { EUnleashFlags, useUnleash } from "../ab/unleash/useUnleash";
 
 export const preloadImages = (images: string[]) => {
     if (!images.length) return;
@@ -9,7 +10,12 @@ export const preloadImages = (images: string[]) => {
 }
 
 export const usePreloadImages = (images: string[]) => {
+    const { isReady, variant } = useUnleash({
+        flag: EUnleashFlags.preloadImages
+    })
+
     useEffect(() => {
+        if (!isReady || variant === "no") return;
         preloadImages(images)
-    }, [images])
+    }, [images, isReady, variant])
 }

src/services/zodiac-sign/index.ts

@@ -1,26 +1,28 @@
 import { AssetCategory } from "@/api/resources/AssetCategories";
 
+export const ZODIACS = [
+  "Capricorn",
+  "Aquarius",
+  "Pisces",
+  "Aries",
+  "Taurus",
+  "Gemini",
+  "Cancer",
+  "Leo",
+  "Virgo",
+  "Libra",
+  "Scorpio",
+  "Sagittarius",
+  "Capricorn",
+];
+
 export const getZodiacSignByDate = (birthDate: string): string => {
   const date = new Date(birthDate);
   const day = date.getDate();
   const month = date.getMonth() + 1;
-  const zodiac = [
-    "Capricorn",
-    "Aquarius",
-    "Pisces",
-    "Aries",
-    "Taurus",
-    "Gemini",
-    "Cancer",
-    "Leo",
-    "Virgo",
-    "Libra",
-    "Scorpio",
-    "Sagittarius",
-    "Capricorn",
-  ];
+
   const last_day = [19, 18, 20, 19, 20, 20, 22, 22, 22, 22, 21, 21];
-  return day > last_day[month - 1] ? zodiac[month * 1] : zodiac[month - 1];
+  return day > last_day[month - 1] ? ZODIACS[month * 1] : ZODIACS[month - 1];
 };
 
 export const getCategoryIdByZodiacSign = (