w-aura/src/components/pages/Mike/v1/pages/TrialPayment/index.tsx

import styles from "./styles.module.css";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { actions, selectors } from "@/store";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import Title from "@/components/Title";
import { mikeTrialPaymentReviews } from "@/data/reviews";
import { trialPaymentPointsList } from "@/data/pointsLists";
import { Navigate, useNavigate, useParams } from "react-router-dom";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import routes from "@/routes";
import Modal from "@/components/Modal";
import ButtonBack from "../../components/ButtonBack";
import { Message } from "../../components/Message";
import TrialPaymentHeader from "../../components/TrialPaymentHeader";
import { useStyle } from "@/routerComponents/Mike/v1/providers/StyleProvider/useStyle";
import PersonalInformation from "../../components/PersonalInformation";
import { useGenderInfo } from "../../lib/getGenderInfo";
import PaymentTable from "../../components/PaymentTable";
import Reviews from "../../components/Reviews";
import PointsList from "../../components/PointsList";
import OftenAsk from "../../components/OftenAsk";
import PaymentModal from "@/components/PaymentModal";
import { useTranslations } from "@/hooks/translations";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";

function TrialPaymentPage() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { translate } = useTranslations();
  const birthdate = useSelector(selectors.selectBirthdate);
  const zodiacSign = getZodiacSignByDate(birthdate);
  const { gender, birthPlace } = useSelector(selectors.selectQuestionnaire);
  const { products } = usePaywall({
    placementKey: EPlacementKeys["aura.placement.v1.mike"],
  });
  const activeProductFromStore = useSelector(selectors.selectActiveProduct);
  const [activeProduct, setActiveProduct] = useState<IPaywallProduct | null>(
    activeProductFromStore
  );
  const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);

  const { setStyle } = useStyle();
  const genderInfo = useGenderInfo();
  const { subPlan } = useParams();

  useEffect(() => {
    if (subPlan) {
      const targetProduct = products.find(
        (product) =>
          String(
            product?.trialPrice
              ? Math.floor((product?.trialPrice + 1) / 100)
              : product.key.replace(".", "")
          ) === subPlan
      );
      if (targetProduct) {
        setActiveProduct(targetProduct);
        dispatch(actions.payment.update({ activeProduct: targetProduct }));
      }
    }
  }, [dispatch, subPlan, products]);

  useEffect(() => {
    if (!products.length) return;
    const isActiveProduct = products.find(
      (product) => product._id === activeProduct?._id
    );
    if (!activeProduct || !isActiveProduct) {
      navigate(routes.client.trialChoiceV1());
    }
  }, [activeProduct, navigate, products]);

  useEffect(() => {
    setStyle({ backgroundColor: "#F0F0F0", paddingInline: "18px" });
  }, [setStyle]);

  if (!activeProduct) {
    return <Navigate to={routes.client.trialChoiceV1()} />;
  }

  if (!birthdate || !gender || !birthPlace) {
    return <Navigate to={routes.client.mikeV1() + routes.client.gender()} />;
  }

  const handleDiscount = () => {
    setIsOpenPaymentModal(false);
    // navigate(routes.client.additionalDiscount());
  };

  const openStripeModal = () => {
    metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
    setIsOpenPaymentModal(true);
  };

  const returnUrl = `${window.location.origin + routes.client.advisorChatPrivate("asst_WWkAlT4Ovs6gKRy6VEn9LqNS")}?paymentMadeChatMike=true`;

  return (
    <div className="page-mike">
      <ButtonBack theme="light" />
      <Modal
        containerClassName={styles.modal}
        open={isOpenPaymentModal}
        onClose={handleDiscount}
        type="hidden"
      >
        <PaymentModal
          placementKey={EPlacementKeys["aura.placement.v1.mike"]}
          returnUrl={returnUrl}
        />
      </Modal>
      <div className={styles["assistant-container"]}>
        <img src="/mike/assistant_3.png" alt="assistant" />
        <Message className={styles["assistant-message"]}>
          {translate("mike.trialPayment.message")}
        </Message>
      </div>
      <TrialPaymentHeader
        buttonClick={openStripeModal}
        buttonText="START CHAT"
      />

      <div className={styles["personal-information-container"]}>
        <PersonalInformation
          zodiacSign={zodiacSign}
          gender={gender}
          birthPlace={birthPlace}
          birthdate={birthdate}
          primaryColor={genderInfo?.subColorAssociation || genderInfo?.colorAssociation}
        />
      </div>

      {!!activeProduct && (
        <>
          <PaymentTable product={activeProduct} buttonClick={openStripeModal} />
        </>
      )}
      <div className={styles["chat-private"] + " " + styles.full}>
        <Title variant="h2" className={styles.title}>
          Chat Private
        </Title>
        <div className={styles["chat-private-content"]}>
          <div className={styles["chat-message"]}>
            <p>Does my boyfried really love me?</p>
            <div className={styles["chat-time"]}>
              <span>8:16 AM</span>
              <svg
                width="10"
                height="7"
                viewBox="0 0 10 7"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9.30623 0.892212L4.79973 6.12297L2.86837 4.16144M2.86837 6.12297L0.937012 4.16144M7.37487 0.892212L4.63878 4.07971"
                  stroke="white"
                  strokeWidth="0.630153"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </div>
          </div>
          <div className={styles["chat-sender"]}>
            <div
              className={
                styles["chat-message"] + " " + styles["chat-sender-message"]
              }
            >
              <p>
                Of course! Based on your’s and your boyfried’s natal charts your
                are made for each other! The accuracy of an astrology reading
                can vary and is subjective. Astrology is not an exact science,
                but many find that it can provide valuable insights and
                perspectives. Our platform uses advanced algorithms and expert
                astrologers to provide the most accurate readings possible.
              </p>
              <p>
                The accuracy of an astrology reading can vary and is subjective.
                Astrology is not an exact science, but many find that it can
                provide valuable insights and perspectives. Our platform uses
                advanced algorithms and expert astrologers to provide the most
                accurate r
              </p>
            </div>
            <div className={styles["chat-main-avatar"]}>
              <img src="/mike/chat1.png" alt="avatar" />
            </div>
          </div>
          <div className={styles["chat-sending"]}>
            <img
              className={styles["chat-avatar"]}
              src="/mike/chat2.webp"
              alt="avatar"
            />
            <span className={styles["chat-sending-circle"]}>
              <span />
              <span />
              <span />
            </span>
          </div>
          <div></div>
        </div>
      </div>
      <div className={styles["reviews-container"]}>
        <Title variant="h2" className={styles.title}>
          Users love us
        </Title>
        <Reviews reviews={mikeTrialPaymentReviews} />
      </div>
      <div className={styles["points-list-container"]}>
        <PointsList
          points={trialPaymentPointsList}
          title={
            <Title variant="h2" className={styles.title}>
              What you get
            </Title>
          }
        />
      </div>
      <div className={styles["often-ask-container"]}>
        <OftenAsk
          title={
            <Title variant="h2" className={styles.title}>
              People often ask
            </Title>
          }
        />
      </div>
      <div className={styles["payment-table-container"]}>
        {!!activeProduct && (
          <PaymentTable product={activeProduct} buttonClick={openStripeModal} />
        )}
      </div>
    </div>
  );
}

export default TrialPaymentPage;