w-aura/src/components/CompatibilityV2/pages/TrialPayment/index.tsx

import Title from "@/components/Title";
import AppNumberOne from "../../components/AppNumberOne";
import Button from "../../components/Button";
import JoinedToday from "../../components/JoinedToday";
import PalmIsReady from "../../components/PalmIsReady";
import styles from "./styles.module.scss";
import HowWork from "../../components/HowWork";
import WhatIncluded from "../../components/WhatIncluded";
import PalmsSayAbout from "../../components/PalmsSayAbout";
import Reviews from "../../components/Reviews";
import routes, { compatibilityV2Prefix } from "@/routes";
import Footer from "../../components/Footer";
import { useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement, language } from "@/locales";
import { usePreloadImages } from "@/hooks/preload/images";
import useTimer from "@/hooks/palmistry/use-timer";
import { images } from "../../data";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { useDynamicSize } from "@/hooks/useDynamicSize";
import { formatDateToLocale } from "@/locales/localFormats";
import { useEffect } from "react";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import MoneyBackGuarantee from "../../components/MoneyBackGuarantee";
import ZodiacImages from "./components/ZodiacImages";
import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
import Loader, { LoaderColor } from "@/components/Loader";

function TrialPayment() {
  const { height, elementRef } = useDynamicSize<HTMLDivElement>({});
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const { gender, birthdate, partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
  const { dateEvent } = useSelector(selectors.selectCompatibilityV2Answers);

  const { relationshipStatus } = useSelector(selectors.selectCompatibilityV2Answers);
  // const relationshipStatus = "single";
  const zodiacSign = getZodiacSignByDate(birthdate);
  const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
  const time = useTimer();
  const navigate = useNavigate();
  usePreloadImages([
    "/v1/palmistry/ticket.svg",
  ])

  const { isReady, variant: zodiacImages } = useUnleash({
    flag: EUnleashFlags.zodiacImages
  });

  const handleNext = () => {
    navigate(routes.client.compatibilityV2Payment());
  };

  useEffect(() => {
    metricService.reachGoal(EGoals.TRIAL_PAYMENT_PAGE_VISIT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
    metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, [EMetrics.KLAVIYO]);
  }, []);

  if (!isReady) {
    return <Loader color={LoaderColor.Black} />;
  }

  return (
    <>
      <Title className={styles["information-title"]}>
        {translate("/trial-payment.information-title")}
      </Title>

      {zodiacImages === "new" && <ZodiacImages
        gender={gender}
        zodiacSign={zodiacSign}
        relationshipStatus={relationshipStatus}
        partnerGender={partnerGender}
        partnerZodiacSign={partnerZodiacSign}
      />}
      {zodiacImages !== "new" && <div
        className={`${styles["zodiac-images"]} ${relationshipStatus !== "single" ? styles["with-partner"] : ""}`}
        ref={elementRef}
        style={{ marginBottom: `${-height / 2}px` }}
      >
        <img src={images(`zodiacs/${gender}/${zodiacSign?.toUpperCase()}.webp`)} alt="Profile zodiac sign" />
        {relationshipStatus !== "single" && <img src={images(`zodiacs/${partnerGender}/${partnerZodiacSign?.toUpperCase()}.webp`)} alt="Partner zodiac sign" />}
      </div>}
      {(relationshipStatus === "single" || !partnerBirthdate) &&
        <p className={styles["information-description"]}>
          {translate("/trial-payment.information-description-single", {
            color: <span>
              {translate("/trial-payment.information-description-single-color", {
                zodiacSign: zodiacSign?.toLowerCase().charAt(0).toUpperCase() + zodiacSign?.toLowerCase().slice(1),
                birthdate: formatDateToLocale(birthdate, language),
              })}
            </span>,
            eventDescription: dateEvent ? <b>
              {translate("/trial-payment.information-description-single-event-description", {
                dateEvent: formatDateToLocale(dateEvent, language),
              })}
            </b> : "",
          })}
        </p>
      }
      {relationshipStatus !== "single" && partnerBirthdate &&
        <p className={styles["information-description"]}>
          {translate("/trial-payment.information-description-with-partner", {
            color: <span>
              {translate("/trial-payment.information-description-with-partner-color", {
                zodiacSign: zodiacSign?.toLowerCase().charAt(0).toUpperCase() + zodiacSign?.toLowerCase().slice(1),
                partnerZodiacSign: partnerZodiacSign?.toLowerCase().charAt(0).toUpperCase() + partnerZodiacSign?.toLowerCase().slice(1),
                birthdate: formatDateToLocale(birthdate, language),
                partnerBirthdate: formatDateToLocale(partnerBirthdate, language),
              })}
            </span>,
            colorProfile: <span>
              {translate("/trial-payment.information-description-with-partner-color", {
                zodiacSign: zodiacSign?.toLowerCase().charAt(0).toUpperCase() + zodiacSign?.toLowerCase().slice(1),
                partnerZodiacSign: partnerZodiacSign?.toLowerCase().charAt(0).toUpperCase() + partnerZodiacSign?.toLowerCase().slice(1),
                birthdate: formatDateToLocale(birthdate, language),
                partnerBirthdate: formatDateToLocale(partnerBirthdate, language),
              })}
            </span>,
            colorPartner: <span>
              {translate("/trial-payment.information-description-with-partner-color", {
                zodiacSign: zodiacSign?.toLowerCase().charAt(0).toUpperCase() + zodiacSign?.toLowerCase().slice(1),
                partnerZodiacSign: partnerZodiacSign?.toLowerCase().charAt(0).toUpperCase() + partnerZodiacSign?.toLowerCase().slice(1),
                birthdate: formatDateToLocale(birthdate, language),
                partnerBirthdate: formatDateToLocale(partnerBirthdate, language),
              })}
            </span>,
            eventDescription: dateEvent ? <b>
              {translate("/trial-payment.information-description-with-partner-event-description", {
                dateEvent: formatDateToLocale(dateEvent, language),
              })}
            </b> : "",
          })}
        </p>
      }
      <Button className={styles["get-prediction"]} onClick={handleNext} style={{ marginTop: "8px", marginBottom: "16px" }}>
        {translate("/trial-payment.get_personal_prediction")}
      </Button>
      <AppNumberOne />
      <PalmIsReady />
      <JoinedToday />
      <Button className={styles["get-prediction"]} onClick={handleNext}>
        {translate("/trial-payment.get_personal_prediction")}
      </Button>
      <Title className={styles["how-work"]}>
        {translate("/trial-payment.how_work.title")}
      </Title>
      <HowWork />
      <MoneyBackGuarantee />
      <Button className={styles["begin-trial"]} onClick={handleNext}>
        {translate("/trial-payment.begin_trial_now")}
      </Button>
      <WhatIncluded />
      <PalmsSayAbout />
      <Button className={styles["discover-more"]} onClick={handleNext}>
        {translate("/trial-payment.discover_more")}
      </Button>
      <Title className={styles["why-love"]}>
        {translate("/trial-payment.why_love", {
          color: <span>{translate("/trial-payment.why_love_color")}</span>,
        })}
      </Title>
      <Reviews />
      <Button className={styles["success-story"]} onClick={handleNext}>
        {translate("/trial-payment.success_story")}
      </Button>
      <Title className={styles["as-seen-in"]}>
        {translate("/trial-payment.as_seen_in", {
          color: (
            <span>
              {translate("app_name", undefined, ELocalesPlacement.V1)}
            </span>
          ),
        })}
      </Title>
      <img className={styles.partners} src={`${compatibilityV2Prefix}/partners.png`} alt="Partners" />
      <Footer />


      <div className={styles["paywall__get-prediction"]}>
        <div>
          {translate("/paywall.offer_reserved.title", undefined, ELocalesPlacement.PalmistryV0)}
          <span className={styles["paywall__get-prediction-timer"]}>
            <span>{time}</span>
          </span>
        </div>

        <Button
          type="button"
          className={styles["paywall__get-prediction-button"]}
          onClick={handleNext}
        >
          {translate("/paywall.offer_reserved.button", undefined, ELocalesPlacement.PalmistryV0)}
        </Button>
      </div>
    </>
  );
}

export default TrialPayment;