110 lines
4.2 KiB
TypeScript
110 lines
4.2 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.scss";
|
|
import PricingSummary from "../../components/PricingSummary";
|
|
import Button from "../../components/Button";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { useEffect, useState } from "react";
|
|
import { actions, selectors } from "@/store";
|
|
import { usePaywall } from "@/hooks/paywall/usePaywall";
|
|
import { EPlacementKeys } from "@/api/resources/Paywall";
|
|
import Modal from "@/components/Modal";
|
|
import PaymentForm from "@/components/Payment/nmi/PaymentForm";
|
|
import routes from "@/routes";
|
|
import { useNavigate } from "react-router-dom";
|
|
import BlurComponent from "@/components/BlurComponent";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { addCurrency, ELocalesPlacement } from "@/locales";
|
|
|
|
const placementKey = EPlacementKeys["aura.placement.email.marketing"];
|
|
|
|
function SpecialOffer() {
|
|
const dispatch = useDispatch();
|
|
const navigate = useNavigate();
|
|
const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
|
|
const activeProduct = useSelector(selectors.selectActiveProduct);
|
|
const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV1);
|
|
|
|
const { products, currency, getText } = usePaywall({
|
|
placementKey,
|
|
});
|
|
|
|
const trialPrice = ((products[0]?.trialPrice || 0) / 100).toFixed(2) || 0;
|
|
const trialDuration = activeProduct?.trialDuration || 7;
|
|
const price = (activeProduct?.price || 0) / 100;
|
|
|
|
useEffect(() => {
|
|
dispatch(actions.payment.update({ activeProduct: products[0] }));
|
|
}, [dispatch, products]);
|
|
|
|
const openPaymentModal = () => {
|
|
setIsOpenPaymentModal(true);
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setIsOpenPaymentModal(false);
|
|
return navigate(routes.client.emailMarketingV1SaveOff())
|
|
};
|
|
|
|
const onPaymentError = () => {
|
|
return navigate(routes.client.paymentFail())
|
|
}
|
|
|
|
const onPaymentSuccess = () => {
|
|
return navigate(routes.client.paymentSuccess())
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{products[0] && (
|
|
<Modal
|
|
containerClassName={styles.modal}
|
|
open={isOpenPaymentModal}
|
|
onClose={handleCloseModal}
|
|
type="hidden"
|
|
>
|
|
<PaymentForm
|
|
placementKey={placementKey}
|
|
onPaymentError={onPaymentError}
|
|
onPaymentSuccess={onPaymentSuccess}
|
|
/>
|
|
</Modal>
|
|
)}
|
|
<div className={styles.container}>
|
|
<Title className={styles.title} variant="h1">
|
|
{translate("special-offer.title")}
|
|
</Title>
|
|
<div className={styles.content}>
|
|
<Title className={styles.contentTitle} variant="h2">
|
|
{translate("special-offer.start-trial", { days: trialDuration })}
|
|
</Title>
|
|
<p className={styles.contentDescription}>
|
|
{translate("special-offer.cancel-anytime")}
|
|
</p>
|
|
<PricingSummary
|
|
totalToday={trialPrice}
|
|
originalPrice={Number(getText("full.price")) / 100}
|
|
discountedPrice={price}
|
|
trialDuration={trialDuration}
|
|
saveText={getText("text.save") as string}
|
|
currency={currency}
|
|
/>
|
|
<p className={styles.contentPolicy}>
|
|
{translate("special-offer.policy", {
|
|
days: trialDuration,
|
|
price: addCurrency(price, currency)
|
|
})}
|
|
</p>
|
|
<div className={styles.buttonContainer}>
|
|
<BlurComponent isActiveBlur={true}>
|
|
<Button className={styles.button} onClick={openPaymentModal}>
|
|
{translate("special-offer.button-continue")}
|
|
</Button>
|
|
</BlurComponent>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SpecialOffer |