108 lines
4.0 KiB
TypeScript
108 lines
4.0 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.css";
|
|
import ReservedTimer from "./components/ReservedTimer";
|
|
import MainButton from "@/components/MainButton";
|
|
import Modal from "@/components/Modal";
|
|
import PaymentModal from "@/components/PaymentModal";
|
|
import { useEffect, useState } from "react";
|
|
import { usePaywall } from "@/hooks/paywall/usePaywall";
|
|
import { EPlacementKeys } from "@/api/resources/Paywall";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
|
|
function MarketingTrialPayment() {
|
|
const dispatch = useDispatch();
|
|
const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
|
|
const activeProduct = useSelector(selectors.selectActiveProduct);
|
|
|
|
const { products, getText } = usePaywall({
|
|
placementKey: EPlacementKeys["aura.placement.email.marketing"],
|
|
});
|
|
|
|
useEffect(() => {
|
|
dispatch(actions.payment.update({ activeProduct: products[0] }));
|
|
}, [dispatch, products]);
|
|
|
|
const openStripeModal = () => {
|
|
setIsOpenPaymentModal(true);
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setIsOpenPaymentModal(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{products[0] && (
|
|
<Modal
|
|
containerClassName={styles.modal}
|
|
open={isOpenPaymentModal}
|
|
onClose={handleCloseModal}
|
|
type="hidden"
|
|
>
|
|
<PaymentModal
|
|
placementKey={EPlacementKeys["aura.placement.email.marketing"]}
|
|
/>
|
|
</Modal>
|
|
)}
|
|
<section className={`${styles.page} page`}>
|
|
<div className={styles.wrapper}>
|
|
<div className={styles.banner}>Special Offer</div>
|
|
<Title variant="h2" className={styles.title}>
|
|
Start your {activeProduct?.trialDuration}-day trial
|
|
</Title>
|
|
<p className={styles.description}>No pressure. Cancel anytime</p>
|
|
<div className={styles["total-today"]}>
|
|
<p className={styles.description}>Total today:</p>
|
|
<p className={styles.value}>
|
|
${((products[0]?.trialPrice || 0) / 100).toFixed(2) || 0}
|
|
</p>
|
|
</div>
|
|
<div className={styles.line} />
|
|
<div className={styles["code-container"]}>
|
|
<p>Code applied!</p>
|
|
<ReservedTimer />
|
|
</div>
|
|
<div className={styles["sale-container"]}>
|
|
<p className={styles.description}>
|
|
Your cost per 2 weeks after trial
|
|
</p>
|
|
<p className={styles.value}>
|
|
<span className={styles["old-price"]}>
|
|
${Number(getText("full.price")) / 100}
|
|
</span>
|
|
<span className={styles["new-price"]}>
|
|
${(activeProduct?.price || 0) / 100}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<p className={styles["sale-description"]}>{getText("text.save")}</p>
|
|
<div className={styles.line} />
|
|
<p className={styles["text-description"]}>
|
|
You will be charged only{" "}
|
|
<b>
|
|
${((products[0]?.trialPrice || 0) / 100).toFixed(2) || 0} for your{" "}
|
|
{activeProduct?.trialDuration}-day trial.
|
|
</b>{" "}
|
|
Subscription <b>renews automatically</b> until cancelled. You{" "}
|
|
<b>can cancel at any time</b> before the end of the trial.
|
|
</p>
|
|
<MainButton className={styles.button} onClick={openStripeModal}>
|
|
<img src="/credit-card-white.svg" alt="Credit card" />
|
|
<p>Get access</p>
|
|
</MainButton>
|
|
<p className={styles.policy}>
|
|
By continuing you agree that if you don`t cancel prior to the end of
|
|
the {activeProduct?.trialDuration}-days trial, you will
|
|
automatically be charged ${(activeProduct?.price || 0) / 100} every
|
|
2 weeks until you cancel in settings. Learn more about cancellation
|
|
and refund policy in Subscription terms
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default MarketingTrialPayment;
|