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

import Title from "@/components/Title";
import AppNumberOne from "../../components/AppNumberOne";
import Button from "../../components/Button";
import styles from "./styles.module.scss";
import HowWork from "../../components/HowWork";
import WhatIncluded from "../../components/WhatIncluded";
import Reviews from "../../components/Reviews";
import routes, { compatibilityV4Prefix } 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 { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { formatDateToLocale } from "@/locales/localFormats";
import { useEffect } from "react";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import MoneyBackGuarantee from "../../components/MoneyBackGuarantee";
import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
import Loader, { LoaderColor } from "@/components/Loader";
import YourReading from "./components/YourReading";
import ZodiacImagesWithBook from "./components/ZodiacImagesWithBook";

function TrialPayment() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
  const { gender, birthdate, partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
  const { dateEvent } = useSelector(selectors.selectCompatibilityV4Answers);

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

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

  const handleNext = () => {
    if (pageAfterTrialPaymentCompatibilityV4 === "paymentForm") {
      return navigate(routes.client.compatibilityV4PaymentModal());
    }
    navigate(routes.client.compatibilityV4Payment());
  };

  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 (
    <div className={styles["trial-payment-container"]}>
      <div className={styles["paywall__get-prediction"]}>
        <div>
          {translate("/trial-payment.offer_reserved.title")}
          <span className={styles["paywall__get-prediction-timer"]}>
            <span>{time}</span>
          </span>
        </div>

        <Button
          type="button"
          className={`${styles["paywall__get-prediction-button"]} ${styles["pulse-button"]}`}
          onClick={handleNext}
        >
          {translate("/trial-payment.offer_reserved.button")}
        </Button>
      </div>

      <AppNumberOne />
      <Title className={styles["information-title"]}>
        {translate("/trial-payment.information-title")}
      </Title>
      <ZodiacImagesWithBook />
      {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>,
            eventDescription: dateEvent ? <b>
              {translate("/trial-payment.information-description-with-partner-event-description", {
                dateEvent: formatDateToLocale(dateEvent, language),
              })}
            </b> : "",
          })}
        </p>
      }
      <div>
        <Title className={styles["reading-ready"]}>
          {translate("/trial-payment.reading_ready.title")}
        </Title>
      </div>

      <Button
        className={`${styles["get-prediction"]}
        ${styles["pulse-button"]}`}
        onClick={handleNext}
        style={{ marginTop: "8px", marginBottom: "16px" }}
      >
        {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"]} ${styles["pulse-button"]}`}
        onClick={handleNext}
      >
        {translate("/trial-payment.begin_trial_now")}
      </Button>
      <YourReading
        gender={gender}
        zodiacSign={zodiacSign}
        relationshipStatus={relationshipStatus}
        partnerGender={partnerGender}
        partnerZodiacSign={partnerZodiacSign}
      />
      <Button
        style={{ marginTop: "32px" }}
        className={`${styles["begin-trial"]} ${styles["pulse-button"]}`}
        onClick={handleNext}
      >
        {translate("/trial-payment.get_my_reading")}
      </Button>
      <WhatIncluded />
      <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"]} ${styles["pulse-button"]}`}
        onClick={handleNext}
      >
        {translate("/trial-payment.get_my_reading")}
      </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={`${compatibilityV4Prefix}/partners.png`} alt="Partners" />
      <Footer />
    </div>
  );
}

export default TrialPayment;