AW-483-484-485-fix-bugs

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

@@ -50,7 +50,7 @@ function GenderPage() {
     flag: EUnleashFlags.v2CompatibilityRelationshipStatusPagePlacement,
   });
 
-  const { variant: reviewPage = "hide" } = useUnleash({
+  const { variant: reviewPage = "v0" } = useUnleash({
     flag: EUnleashFlags.v2CompatibilityReviewPage,
   });
 
@@ -119,9 +119,8 @@ function GenderPage() {
     if (relationshipStatusPagePlacement === "v2") {
       return navigate(routes.client.compatibilityV2RelationshipStatus());
     }
-    console.log(reviewPage);
 
-    if (reviewPage === "show") {
+    if (["v1", "v2"].includes(reviewPage)) {
       return navigate(routes.client.compatibilityV2Review());
     }
     if (pathToEnteringBirthdate === "show") {

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

@@ -1,26 +1,21 @@
-import Title from "@/components/Title";
 import styles from "./styles.module.scss";
-import { useTranslations } from "@/hooks/translations";
-import { ELocalesPlacement } from "@/locales";
-import ReviewsCount from "../../components/ReviewsCount";
-import StatisticsItem from "../../components/StatisticsItem";
-import SoulmatesSVG from "../../images/SVG/Soulmates";
-import HeartSVG from "../../images/SVG/Heart";
-import Review2 from "../../components/Review2";
-import { images } from "../../data";
-import Button from "../../components/Button";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
 import Loader, { LoaderColor } from "@/components/Loader";
+import ReviewV1 from "./v1";
+import ReviewV2 from "./v2";
 
 function ReviewPage() {
-  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
   const navigate = useNavigate();
   const { variant: pathToEnteringBirthdate = "hide", isReady } = useUnleash({
     flag: EUnleashFlags.v2CompatibilityPathToEnteringBirthdate,
   });
 
+  const { variant: reviewPage = "v1" } = useUnleash({
+    flag: EUnleashFlags.v2CompatibilityReviewPage,
+  });
+
   const handleNext = () => {
     if (pathToEnteringBirthdate === "show") {
       return navigate(routes.client.compatibilityV2CompatibilityTest());
@@ -36,54 +31,14 @@ function ReviewPage() {
     );
   }
 
-  return (
+  switch (reviewPage) {
-    <div className={styles.container}>
+    case "v1":
-      <Title variant="h1" className={styles.title}>
+      return <ReviewV1 handleNext={handleNext} />;
-        {translate("/review.title", {
+    case "v2":
-          color: (
+      return <ReviewV2 handleNext={handleNext} />;
-            <span className={styles.title_color}>
+    default:
-              {translate("/review.title_color")}
+      return <ReviewV1 handleNext={handleNext} />;
-            </span>
+  }
-          ),
-        })}
-      </Title>
-      <div className={styles.content}>
-        <ReviewsCount />
-        <div className={styles.statistics}>
-          <StatisticsItem
-            title={translate("/review.soulmates_count")}
-            text={translate("/review.soulmates_today")}
-            image={<SoulmatesSVG />}
-          />
-          <StatisticsItem
-            title={translate("/review.trusted_count")}
-            text={translate("/review.trusted")}
-            image={<HeartSVG />}
-          />
-        </div>
-        <Review2
-          username={translate("/review.review.username")}
-          text={translate("/review.review.text")}
-          verifiedText={translate("/review.review.verified_user")}
-          likesText={translate("/review.review.likes")}
-          likesImages={[
-            images("review/like_1.png"),
-            images("review/like_2.png"),
-            images("review/like_3.png"),
-          ]}
-          image={images("review/avatar.jpg")}
-        />
-        <img
-          className={styles.partners}
-          src={images("review/partners.png")}
-          alt="partners"
-        />
-      </div>
-      <Button className={styles.button} onClick={handleNext}>
-        {translate("/review.button")}
-      </Button>
-    </div>
-  );
 }
 
 export default ReviewPage;

src/components/CompatibilityV2/pages/Review/styles.module.scss

@@ -8,7 +8,6 @@
   padding: 45px 24px;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
 
   & * {
@@ -77,3 +76,12 @@
   position: sticky;
   bottom: calc(0dvh + 32px);
 }
+
+.buttonV2.buttonV2 {
+  width: 100%;
+  // max-width: 288px;
+  margin-top: 14px;
+  margin-inline: auto;
+  position: sticky;
+  bottom: calc(0dvh + 32px);
+}

src/components/CompatibilityV2/pages/Review/v1/index.tsx

@@ -0,0 +1,70 @@
+import Title from "@/components/Title";
+import styles from "../styles.module.scss";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import ReviewsCount from "@/components/CompatibilityV2/components/ReviewsCount";
+import StatisticsItem from "@/components/CompatibilityV2/components/StatisticsItem";
+import SoulmatesSVG from "@/components/CompatibilityV2/images/SVG/Soulmates";
+import HeartSVG from "@/components/CompatibilityV2/images/SVG/Heart";
+import Review2 from "@/components/CompatibilityV2/components/Review2";
+import { images } from "@/components/CompatibilityV2/data";
+import Button from "@/components/CompatibilityV2/components/Button";
+
+interface IReviewV1Props {
+  handleNext: () => void;
+}
+
+function ReviewV1({ handleNext }: IReviewV1Props) {
+  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+
+  return (
+    <div className={styles.container}>
+      <Title variant="h1" className={styles.title}>
+        {translate("/review.title", {
+          color: (
+            <span className={styles.title_color}>
+              {translate("/review.title_color")}
+            </span>
+          ),
+        })}
+      </Title>
+      <div className={styles.content}>
+        <ReviewsCount />
+        <div className={styles.statistics}>
+          <StatisticsItem
+            title={translate("/review.soulmates_count")}
+            text={translate("/review.soulmates_today")}
+            image={<SoulmatesSVG />}
+          />
+          <StatisticsItem
+            title={translate("/review.trusted_count")}
+            text={translate("/review.trusted")}
+            image={<HeartSVG />}
+          />
+        </div>
+        <Review2
+          username={translate("/review.review.username")}
+          text={translate("/review.review.text")}
+          verifiedText={translate("/review.review.verified_user")}
+          likesText={translate("/review.review.likes")}
+          likesImages={[
+            images("review/like_1.png"),
+            images("review/like_2.png"),
+            images("review/like_3.png"),
+          ]}
+          image={images("review/avatar.jpg")}
+        />
+        <img
+          className={styles.partners}
+          src={images("review/partners.png")}
+          alt="partners"
+        />
+      </div>
+      <Button className={styles.button} onClick={handleNext}>
+        {translate("/review.button")}
+      </Button>
+    </div>
+  );
+}
+
+export default ReviewV1;

src/components/CompatibilityV2/pages/Review/v2/index.tsx

@@ -0,0 +1,53 @@
+import Title from "@/components/Title";
+import styles from "../styles.module.scss";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import Review2 from "@/components/CompatibilityV2/components/Review2";
+import { images } from "@/components/CompatibilityV2/data";
+import Button from "@/components/CompatibilityV2/components/Button";
+
+interface IReviewV2Props {
+  handleNext: () => void;
+}
+
+function ReviewV2({ handleNext }: IReviewV2Props) {
+  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+
+  return (
+    <div className={styles.container}>
+      <Title variant="h1" className={styles.title}>
+        {translate("/review.title", {
+          color: (
+            <span className={styles.title_color}>
+              {translate("/review.title_color")}
+            </span>
+          ),
+        })}
+      </Title>
+      <div className={styles.content}>
+        <Review2
+          username={translate("/review.review.username")}
+          text={translate("/review.review.text")}
+          verifiedText={translate("/review.review.verified_user")}
+          likesText={translate("/review.review.likes")}
+          likesImages={[
+            images("review/like_1.png"),
+            images("review/like_2.png"),
+            images("review/like_3.png"),
+          ]}
+          image={images("review/avatar.jpg")}
+        />
+        <img
+          className={styles.partners}
+          src={images("review/partners.png")}
+          alt="partners"
+        />
+      </div>
+      <Button className={styles.buttonV2} onClick={handleNext}>
+        {translate("/review.button")}
+      </Button>
+    </div>
+  );
+}
+
+export default ReviewV2;

src/hooks/ab/unleash/useUnleash.ts

@@ -78,7 +78,7 @@ interface IVariants {
     [EUnleashFlags.v2CompatibilityScanInstructionImage]: 'v0' | 'v1';
     [EUnleashFlags.v2CompatibilityCameraTemplate]: 'v0' | 'v1' | 'v2' | 'v3' | 'v4';
     [EUnleashFlags.v2CompatibilityRelationshipStatusPagePlacement]: 'v0' | 'v1' | 'v2';
-    [EUnleashFlags.v2CompatibilityReviewPage]: 'show' | 'hide';
+    [EUnleashFlags.v2CompatibilityReviewPage]: 'v0' | 'v1' | 'v2';
     [EUnleashFlags.v2CompatibilityPathToEnteringBirthdate]: 'hide' | 'show';
 }