109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
import styles from "./styles.module.scss";
|
|
import Blob3 from "../../images/SVG/Blob3";
|
|
import Blob4 from "../../images/SVG/Blob4";
|
|
import Title from "@/components/Title";
|
|
import SecretDiscountTable from "../../components/SecretDiscountTable";
|
|
import Button from "../../components/Button";
|
|
import { usePaywall } from "@/hooks/paywall/usePaywall";
|
|
import { EPlacementKeys } from "@/api/resources/Paywall";
|
|
import { addCurrency, ELocalesPlacement } from "@/locales";
|
|
import Modal from "@/components/Modal";
|
|
import { useEffect, useState } from "react";
|
|
import PaymentForm from "@/components/Payment/nmi/PaymentForm";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { useDispatch } from "react-redux";
|
|
import { actions } from "@/store";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import Header from "@/components/pages/ABDesign/v1/components/Header";
|
|
import { useDynamicSize } from "@/hooks/useDynamicSize";
|
|
|
|
const placementKey = EPlacementKeys["aura.placement.email.compatibility.discount"]
|
|
|
|
function SecretDiscount() {
|
|
const { width, elementRef } = useDynamicSize({ defaultWidth: 560 });
|
|
const { height, elementRef: policyContainerRef } = useDynamicSize<HTMLDivElement>({ defaultWidth: 560, defaultHeight: 193 });
|
|
const dispatch = useDispatch();
|
|
const navigate = useNavigate();
|
|
const { products, currency } = usePaywall({
|
|
placementKey,
|
|
localesPlacement: ELocalesPlacement.EmailMarketingCompatibilityV1,
|
|
});
|
|
const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV1);
|
|
|
|
const activeProduct = products[0];
|
|
const price = (activeProduct?.price || 0) / 100;
|
|
const trialDuration = activeProduct?.trialDuration || 7;
|
|
|
|
useEffect(() => {
|
|
if (!activeProduct) return;
|
|
dispatch(actions.payment.update({
|
|
activeProduct
|
|
}))
|
|
}, [activeProduct])
|
|
|
|
const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
|
|
|
|
|
|
const onPaymentSuccess = () => {
|
|
return navigate(routes.client.paymentSuccess())
|
|
}
|
|
|
|
const onModalClosed = () => {
|
|
setIsPaymentModalOpen(false);
|
|
}
|
|
|
|
const onPaymentError = () => {
|
|
return navigate(routes.client.paymentFail())
|
|
}
|
|
|
|
const openPaymentModal = () => {
|
|
setIsPaymentModalOpen(true);
|
|
};
|
|
|
|
return (
|
|
<section className={styles.container} ref={elementRef} style={{
|
|
paddingBottom: `${height + 42}px`
|
|
}}>
|
|
<Header
|
|
className={styles.header}
|
|
classNameTitle={styles["header-title"]}
|
|
isBackButtonVisible={true}
|
|
/>
|
|
{activeProduct && (
|
|
<Modal
|
|
containerClassName={styles.modal}
|
|
open={isPaymentModalOpen}
|
|
onClose={onModalClosed}
|
|
type="hidden"
|
|
>
|
|
<PaymentForm
|
|
placementKey={placementKey}
|
|
onPaymentError={onPaymentError}
|
|
onPaymentSuccess={onPaymentSuccess}
|
|
/>
|
|
</Modal>
|
|
)}
|
|
<Blob3 className={styles.blob3} />
|
|
<Title className={styles.title} variant="h1">
|
|
{translate("secret-discount.title")}
|
|
</Title>
|
|
<SecretDiscountTable />
|
|
<Button className={styles.button} onClick={openPaymentModal}>
|
|
{translate("secret-discount.button-trial", { days: trialDuration })}
|
|
</Button>
|
|
|
|
<div className={styles["policy-container"]} ref={policyContainerRef}>
|
|
<p className={styles.policy}>
|
|
{translate("secret-discount.policy", {
|
|
days: trialDuration,
|
|
price: addCurrency(price, currency)
|
|
})}
|
|
</p>
|
|
<Blob4 className={styles.blob4} width={width} height={height + 34} />
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default SecretDiscount |