Merge branch 'hotfix/reviewV3V4' into 'main'

add review v3 v4

See merge request witapp/aura-webapp!820

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

@@ -120,7 +120,7 @@ function GenderPage() {
       return navigate(routes.client.compatibilityV2RelationshipStatus());
     }
 
-    if (["v1", "v2"].includes(reviewPage)) {
+    if (["v1", "v2", "v3", "v4"].includes(reviewPage)) {
       return navigate(routes.client.compatibilityV2Review());
     }
     if (pathToEnteringBirthdate === "show") {

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

@@ -5,6 +5,8 @@ import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
 import Loader, { LoaderColor } from "@/components/Loader";
 import ReviewV1 from "./v1";
 import ReviewV2 from "./v2";
+import ReviewV3 from "./v3";
+import ReviewV4 from "./v4";
 
 function ReviewPage() {
   const navigate = useNavigate();
@@ -36,6 +38,10 @@ function ReviewPage() {
       return <ReviewV1 handleNext={handleNext} />;
     case "v2":
       return <ReviewV2 handleNext={handleNext} />;
+    case "v3":
+      return <ReviewV3 handleNext={handleNext} />;
+    case "v4":
+      return <ReviewV4 handleNext={handleNext} />;
     default:
       return <ReviewV1 handleNext={handleNext} />;
   }

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

@@ -85,3 +85,42 @@
   position: sticky;
   bottom: calc(0dvh + 32px);
 }
+
+/* v3 specific */
+.cosmoLogo {
+  display: block;
+  width: 212px;
+  height: auto;
+  /* match ~92px from top (container has 45px padding) */
+  margin: 47px auto 34px; /* 47 top + 34 gap to quote per figma */
+}
+
+.quote {
+  margin-top: 0; /* control spacing via cosmoLogo bottom margin */
+  margin-bottom: 69px; /* figma ~69px to logos */
+  font-weight: 600;
+  font-size: 23px;
+  line-height: normal;
+  text-align: center;
+  color: #0f1728;
+  max-width: 241px;
+  margin-left: auto;
+  margin-right: auto;
+  font-family: Inter;
+}
+
+.partnersV3 {
+  width: 100%;
+  max-width: 336px; /* match Figma section width */
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0; /* spacing controlled by .quote margin-bottom */
+}
+
+:global(.dark-theme) .quote {
+  color: #F7F7F7;
+}
+
+.buttonV3 {
+  margin-top: 32px; /* gap from partners to button ~32-33px */
+}

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

@@ -0,0 +1,37 @@
+import styles from "../styles.module.scss";
+import { useTranslations } from "@/hooks/translations";
+import { ELocalesPlacement } from "@/locales";
+import { images } from "@/components/CompatibilityV2/data";
+import Button from "@/components/CompatibilityV2/components/Button";
+
+interface IReviewV3Props {
+  handleNext: () => void;
+}
+
+function ReviewV3({ handleNext }: IReviewV3Props) {
+  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
+
+  const quote =
+    "“A tool that becomes your ally on the path to a harmonious relationship.”";
+
+  return (
+    <div className={styles.container}>
+      <img
+        className={styles.cosmoLogo}
+        src={images("Cosmopolitan-Logo.png")}
+        alt="COSMOPOLITAN"
+      />
+      <p className={styles.quote}>{quote}</p>
+      <img
+        className={styles.partnersV3}
+        src={images("review/partners.png")}
+        alt="partners"
+      />
+      <Button className={`${styles.buttonV2} ${styles.buttonV3}`} onClick={handleNext}>
+        {translate("/review.button")}
+      </Button>
+    </div>
+  );
+}
+
+export default ReviewV3;

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

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import Header from "@/components/CompatibilityV2/components/Header";
+import StepperBar from "@/components/CompatibilityV2/components/StepperBar";
+import Title from "@/components/Title";
+import Answer from "@/components/CompatibilityV2/components/Answer";
+import styles from "./styles.module.scss";
+import layoutCss from "@/routerComponents/Compatibility/v2/Layout/styles.module.css";
+import stepperCss from "@/routerComponents/Compatibility/v2/StepperLayout/styles.module.scss";
+import { selectors } from "@/store";
+import { answerTimeOut } from "@/components/CompatibilityV2/data";
+
+interface IReviewV4Props {
+  handleNext: () => void;
+}
+
+const OPTIONS: { id: string; title: string }[] = [
+  { id: "nyt", title: "The New York Times" },
+  { id: "forbes", title: "Forbes" },
+  { id: "cosmopolitan", title: "Cosmopolitan" },
+  { id: "oprah", title: "Oprah Daily" },
+  { id: "social", title: "Social media" },
+  { id: "other", title: "Other sources" },
+];
+
+function ReviewV4({ handleNext }: IReviewV4Props) {
+  const darkTheme = useSelector(selectors.selectDarkTheme);
+  const [selected, setSelected] = useState<string | null>(null);
+
+  const handleSelect = (id: string) => {
+    setSelected(id);
+    setTimeout(() => {
+      handleNext();
+    }, answerTimeOut);
+  };
+
+  return (
+    <main className={`${layoutCss.main} content`}>
+      <Header
+        className={layoutCss.header}
+        classNameTitle={layoutCss["header-title"]}
+      />
+      <StepperBar
+        className={stepperCss["stepper-bar"]}
+        length={10}
+        currentStep={0.5}
+        color={darkTheme ? "#B2BCFF" : "#353E75"}
+      />
+      <section className={layoutCss.page}>
+        <div className={styles.container}>
+          <Title variant="h2" className={styles.title}>
+            Where did you first hear about us?
+          </Title>
+          <p className={styles.description}>
+            Many people say they first learned about us through leading publications
+            and platforms.
+          </p>
+          {OPTIONS.map((option) => (
+            <Answer
+              key={option.id}
+              answer={option}
+              isSelected={selected === option.id}
+              onClick={() => handleSelect(option.id)}
+            />
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}
+
+export default ReviewV4;

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

@@ -0,0 +1,31 @@
+.page {
+  width: 100%;
+}
+
+.container {
+  width: 100%;
+}
+
+.title {
+  margin: 0;
+  font-size: 27px;
+  line-height: 40px;
+  text-align: center;
+}
+
+.description {
+  margin-top: 24px;
+  margin-bottom: 4px;
+  font-size: 20px;
+  line-height: 25px;
+  text-align: center;
+}
+
+.progressPlaceholder {
+  height: 40px; /* reserve space similar to stepper progress */
+}
+
+:global(.dark-theme) .title,
+:global(.dark-theme) .description {
+  color: #F7F7F7;
+}

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]: 'v0' | 'v1' | 'v2';
+    [EUnleashFlags.v2CompatibilityReviewPage]: 'v0' | 'v1' | 'v2' | 'v3' | 'v4';
     [EUnleashFlags.v2CompatibilityPathToEnteringBirthdate]: 'hide' | 'show';
 }