From 6cc3ec39a45cd615e8454b224e8fb8526824ae2f Mon Sep 17 00:00:00 2001
From: Daniil Chemerkin <dev.daminik00@gmail.com>
Date: Mon, 10 Feb 2025 22:53:30 +0000
Subject: [PATCH] develop

---
 .../pages/FindHappiness/index.tsx             | 42 +++++++++++--------
 .../pages/FindHappiness/styles.module.scss    |  6 +++
 .../pages/HeadOrHeartResult/index.tsx         | 13 +++---
 3 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/components/CompatibilityV2/pages/FindHappiness/index.tsx b/src/components/CompatibilityV2/pages/FindHappiness/index.tsx
index a434de2..b4bea16 100644
--- a/src/components/CompatibilityV2/pages/FindHappiness/index.tsx
+++ b/src/components/CompatibilityV2/pages/FindHappiness/index.tsx
@@ -10,6 +10,7 @@ import { useEffect } from "react";
 import { actions } from "@/store";
 // import StarSVG from "../../images/SVG/Star";
 import { usePreloadImages } from "@/hooks/preload/images";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 
 function FindHappiness() {
   const navigate = useNavigate();
@@ -50,6 +51,13 @@ function FindHappiness() {
           </ol>
         </div>
       </div> */}
+      <DotLottieReact
+        className={`${styles["lottie-animation"]} ym-hide-content`}
+        // data={animationData}
+        autoplay
+        loop={false}
+        width={1920}
+      />
       <img
         className={styles.image}
         src={`${compatibilityV2Prefix}/hand-with-lines.png`}
@@ -59,24 +67,24 @@ function FindHappiness() {
         {translate("/find-your-happiness.title")}
       </Title>
       <div className={styles.advantages}>
-          <ul className={styles.list}>
-              <li>
-                  {translate("/find-your-happiness.advantage1")}
-              </li>
-              <li>
-                  {translate("/find-your-happiness.advantage2")}
-              </li>
-              <li>
-                  {translate("/find-your-happiness.advantage3")}
-              </li>
-          </ul>
+        <ul className={styles.list}>
+          <li>
+            {translate("/find-your-happiness.advantage1")}
+          </li>
+          <li>
+            {translate("/find-your-happiness.advantage2")}
+          </li>
+          <li>
+            {translate("/find-your-happiness.advantage3")}
+          </li>
+        </ul>
       </div>
-        <div className={styles["button-container"]}>
-            <Button onClick={() => navigate(`${compatibilityV2Prefix}/gender`)}>
-                {translate("next")}
-            </Button>
-        </div>
-        <p className={styles.description}>
+      <div className={styles["button-container"]}>
+        <Button onClick={() => navigate(`${compatibilityV2Prefix}/gender`)}>
+          {translate("next")}
+        </Button>
+      </div>
+      <p className={styles.description}>
         {translate("/find-your-happiness.text")}
       </p>
     </>
diff --git a/src/components/CompatibilityV2/pages/FindHappiness/styles.module.scss b/src/components/CompatibilityV2/pages/FindHappiness/styles.module.scss
index e3e7350..b4e8207 100644
--- a/src/components/CompatibilityV2/pages/FindHappiness/styles.module.scss
+++ b/src/components/CompatibilityV2/pages/FindHappiness/styles.module.scss
@@ -74,4 +74,10 @@
 
 .list li {
   margin-bottom: 8px;
+}
+
+.lottie-animation {
+  width: 0;
+  height: 0;
+  opacity: 0;
 }
\ No newline at end of file
diff --git a/src/components/CompatibilityV2/pages/HeadOrHeartResult/index.tsx b/src/components/CompatibilityV2/pages/HeadOrHeartResult/index.tsx
index eaf9474..9adc93d 100644
--- a/src/components/CompatibilityV2/pages/HeadOrHeartResult/index.tsx
+++ b/src/components/CompatibilityV2/pages/HeadOrHeartResult/index.tsx
@@ -21,8 +21,9 @@ import routes from "@/routes";
 function HeadOrHeartResult() {
   const navigate = useNavigate();
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
-  const { headOrHeart } = useSelector(selectors.selectCompatibilityV2Answers);
+  const { headOrHeart, relationshipStatus } = useSelector(selectors.selectCompatibilityV2Answers);
   const { gender, partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
+  const translatePrefix = relationshipStatus === "single" ? "single" : "with-partner";
 
   // const { animationData } = useLottie({
   //   loadKey: animations[headOrHeart as keyof typeof animations],
@@ -55,9 +56,9 @@ function HeadOrHeartResult() {
       </div> */}
       <Title variant="h1" className={styles.title}>
         {headOrHeart === "both" &&
-          translate("/both.title", {
+          translate(`/both.${translatePrefix}.title`, {
             wonderful: (
-              <b style={{ color: "#224e90" }}>{translate("/both.wonderful")}</b>
+              <b style={{ color: "#224e90" }}>{translate(`/both.${translatePrefix}.wonderful`)}</b>
             ),
             zodiacSign: (
               <b style={{ color: "#224e90" }}>
@@ -73,7 +74,7 @@ function HeadOrHeartResult() {
             partnerGender: translate(partnerGender?.toLowerCase()).toLowerCase()
           })}
         {headOrHeart === "head" &&
-          translate("/with-head.title", {
+          translate(`/with-head.${translatePrefix}.title`, {
             zodiacSign: (
               <b style={{ color: "#224e90" }}>
                 {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
@@ -88,7 +89,7 @@ function HeadOrHeartResult() {
             partnerGender: translate(partnerGender?.toLowerCase()).toLowerCase()
           })}
         {headOrHeart === "heart" &&
-          translate("/with-heart.title", {
+          translate(`/with-heart.${translatePrefix}.title`, {
             zodiacSign: (
               <b style={{ color: "#224e90" }}>
                 {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
@@ -103,7 +104,7 @@ function HeadOrHeartResult() {
             partnerGender: translate(partnerGender?.toLowerCase()).toLowerCase()
           })}
         {headOrHeart === "depends" &&
-          translate("/depends.title", {
+          translate(`/depends.${translatePrefix}.title`, {
             zodiacSign: (
               <b style={{ color: "#224e90" }}>
                 {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}