diff --git a/src/components/CompatibilityV2/pages/Gender/index.tsx b/src/components/CompatibilityV2/pages/Gender/index.tsx index 6ec24ef..c8c6196 100644 --- a/src/components/CompatibilityV2/pages/Gender/index.tsx +++ b/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") { diff --git a/src/components/CompatibilityV2/pages/Review/index.tsx b/src/components/CompatibilityV2/pages/Review/index.tsx index c468145..e2d6e9e 100644 --- a/src/components/CompatibilityV2/pages/Review/index.tsx +++ b/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 ( -
- - {translate("/review.title", { - color: ( - <span className={styles.title_color}> - {translate("/review.title_color")} - </span> - ), - })} - -
- -
- } - /> - } - /> -
- - partners -
- -
- ); + switch (reviewPage) { + case "v1": + return ; + case "v2": + return ; + default: + return ; + } } export default ReviewPage; diff --git a/src/components/CompatibilityV2/pages/Review/styles.module.scss b/src/components/CompatibilityV2/pages/Review/styles.module.scss index 4a5e84e..7f757d5 100644 --- a/src/components/CompatibilityV2/pages/Review/styles.module.scss +++ b/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); +} diff --git a/src/components/CompatibilityV2/pages/Review/v1/index.tsx b/src/components/CompatibilityV2/pages/Review/v1/index.tsx new file mode 100644 index 0000000..b3f02bd --- /dev/null +++ b/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 ( +
+ + {translate("/review.title", { + color: ( + <span className={styles.title_color}> + {translate("/review.title_color")} + </span> + ), + })} + +
+ +
+ } + /> + } + /> +
+ + partners +
+ +
+ ); +} + +export default ReviewV1; diff --git a/src/components/CompatibilityV2/pages/Review/v2/index.tsx b/src/components/CompatibilityV2/pages/Review/v2/index.tsx new file mode 100644 index 0000000..c841ac7 --- /dev/null +++ b/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 ( +
+ + {translate("/review.title", { + color: ( + <span className={styles.title_color}> + {translate("/review.title_color")} + </span> + ), + })} + +
+ + partners +
+ +
+ ); +} + +export default ReviewV2; diff --git a/src/hooks/ab/unleash/useUnleash.ts b/src/hooks/ab/unleash/useUnleash.ts index 2c48d1d..b629a62 100644 --- a/src/hooks/ab/unleash/useUnleash.ts +++ b/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'; }