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

import styles from "./styles.module.scss";
import Title from "@/components/Title";
import Button from "../../components/Button";
import routes from "@/routes";
import { useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { images } from "../../data";
import DiscountExpires from "../../components/DiscountExpires";
import PaymentTable from "../../components/PaymentTable";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import MoneyBackGuarantee from "../../components/MoneyBackGuarantee";
import PalmsSayAbout from "../../components/PalmsSayAbout";
import { useCallback, useEffect, useMemo } from "react";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import WithPartnerInformation from "../../components/WithPartnerInformation";
import PersonalInformation from "../../components/PersonalInformation";
import Reviews from "../../components/Reviews";
import Address from "../../components/Address";
import { useApi, useApiCall, User } from "@/api";
import { usePayment } from "@/hooks/payment/nmi/usePayment";

const placementKey = EPlacementKeys["aura.placement.email.palmistry"];

function TrialPayment() {
  const api = useApi();
  const token = useSelector(selectors.selectToken);
  const dispatch = useDispatch();
  const { translate } = useTranslations(ELocalesPlacement.EmailMarketingPalmistryV2);
  const { products } = usePaywall({
    placementKey,
    localesPlacement: ELocalesPlacement.PalmistryV1,
  });
  const activeProduct = products[0]

  const trialDuration = activeProduct?.trialDuration || 7;

  const {
    gender,
    birthPlace,
    partnerBirthPlace,
    partnerBirthdate,
    partnerGender,
    birthdate,
  } = useSelector(selectors.selectQuestionnaire)
  const zodiacSign = getZodiacSignByDate(birthdate);
  const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
  const navigate = useNavigate();

  // const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);

  const {
    error,
    isPaymentSuccess,
    isModalClosed,
    showCreditCardForm,
  } = usePayment({
    placementKey,
    activeProduct,
    paymentFormType: "lightbox"
  });

  useEffect(() => {
    if (error) {
      onPaymentError();
    }
  }, [error])

  useEffect(() => {
    if (isPaymentSuccess) {
      onPaymentSuccess();
    }
  }, [isPaymentSuccess])

  useEffect(() => {
    if (isModalClosed) {
      onModalClosed();
    }
  }, [isModalClosed])

  const onPaymentSuccess = () => {
    return navigate(routes.client.paymentSuccess())
  }

  const onModalClosed = () => {
    // setIsPaymentModalOpen(false);
    return handleDiscount()
  }

  const handleDiscount = () => {
    navigate(routes.client.palmistryV2SaveOff());
  };

  const onPaymentError = () => {
    return navigate(routes.client.paymentFail())
  }

  const openPaymentModal = () => {
    // setIsPaymentModalOpen(true);
    showCreditCardForm();
  };

  const userData = useCallback(async () => {
    const { user } = await api.getMe({ token: token });
    return user;
  }, [api]);

  const { data: user } = useApiCall<User.IUser>(userData);

  const singleOrWithPartner = useMemo(() => {
    return user?.partner ? "partner" : "single";
  }, [user]);

  useEffect(() => {
    if (!activeProduct) return;
    dispatch(actions.payment.update({
      activeProduct
    }))
  }, [activeProduct])

  if (!activeProduct) return null;


  return (
    <>
      {/* <Modal containerClassName={styles.modal} open={isPaymentModalOpen} onClose={onModalClosed}>
        <PaymentForm
          placementKey={placementKey}
          onPaymentError={onPaymentError}
          onPaymentSuccess={onPaymentSuccess}
        />
      </Modal> */}
      <div className={styles.background} />
      <div className={styles.header}>
        <Title className={styles.title}>
          {translate("trial-payment.transform_your_life")}
        </Title>
        <img src={images("hand.svg")} alt="Hand" />
      </div>
      <div className={styles.discount}>
        <DiscountExpires />
        <Button className={styles.button} onClick={openPaymentModal}>
          {translate("trial-payment.get_trial_days", { days: trialDuration })}
        </Button>
      </div>
      <Title className={styles.title}>
        {translate("trial-payment.personalized_reading_ready")}
      </Title>
      <PaymentTable
        product={activeProduct}
        gender={gender}
        placementKey={placementKey}
        buttonClick={openPaymentModal}
      />
      <MoneyBackGuarantee />
      <Title className={styles["title-hands"]}>
        {translate("trial-payment.hands_reveal_title")}
      </Title>
      <p className={styles["text-hands"]}>
        {translate("trial-payment.hands_reveal_description")}
      </p>
      <PalmsSayAbout />
      <Title className={styles["title-prepare"]}>
        {translate("trial-payment.prepare_personalized_plan")}
      </Title>
      {singleOrWithPartner === "partner" && (
        <WithPartnerInformation
          zodiacSign={zodiacSign}
          gender={gender}
          birthPlace={birthPlace}
          birthdate={birthdate}
          partnerBirthPlace={partnerBirthPlace}
          partnerBirthDate={partnerBirthdate}
          partnerGender={partnerGender}
          partnerZodiacSign={partnerZodiacSign}
        />
      )}
      {singleOrWithPartner === "single" && (
        <PersonalInformation
          zodiacSign={zodiacSign}
          gender={gender}
          birthPlace={birthPlace}
          birthdate={birthdate}
        />
      )}
      <Title className={styles["title-reviews"]}>
        {translate("trial-payment.aura_users_stories")}
      </Title>
      <Reviews />
      <Title className={styles["title-featured"]}>
        {translate("trial-payment.as_featured_in")}
      </Title>
      <div className={styles["featured-container"]}>
        <img src={images("featured.svg")} alt="Featured" />
      </div>
      <Address />
    </>
  );
}

export default TrialPayment;