113 lines
4.5 KiB
TypeScript
113 lines
4.5 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 { addCurrency, ELocalesPlacement } from "@/locales";
|
|
import { useEffect } from "react";
|
|
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 { useDynamicSize } from "@/hooks/useDynamicSize";
|
|
|
|
import Header from "../../components/Header";
|
|
import { useFunnel } from "@/hooks/funnel/useFunnel";
|
|
import Loader, { LoaderColor } from "@/components/Loader";
|
|
import { getFormattedPrice } from "@/utils/price.utils";
|
|
|
|
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 { translate, getPeriodText } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV2);
|
|
|
|
const {
|
|
isPending,
|
|
products,
|
|
currency,
|
|
trialInterval,
|
|
trialPeriod,
|
|
billingInterval,
|
|
billingPeriod,
|
|
getProperty,
|
|
getPaymentEntity
|
|
} = useFunnel({
|
|
funnel: ELocalesPlacement.CompatibilityV2,
|
|
paymentPlacement: "main_secret_discount"
|
|
})
|
|
|
|
const paymentEntityMain = getPaymentEntity("main")
|
|
|
|
const activeProduct = products[0]
|
|
const trialPrice = activeProduct?.trialPrice || 0;
|
|
|
|
useEffect(() => {
|
|
if (!activeProduct) return;
|
|
dispatch(actions.payment.update({
|
|
activeProduct
|
|
}))
|
|
}, [activeProduct])
|
|
|
|
const openPaymentModal = () => {
|
|
navigate(routes.client.compatibilityV2SecretDiscountPaymentModal());
|
|
};
|
|
|
|
if (isPending) return <Loader color={LoaderColor.Black} />
|
|
|
|
return (
|
|
<section className={styles.container} ref={elementRef} style={{
|
|
paddingBottom: `${height + 42}px`
|
|
}}>
|
|
<Header
|
|
className={styles.header}
|
|
classNameTitle={styles["header-title"]}
|
|
isBackButtonVisible={true}
|
|
/>
|
|
<Blob3 className={styles.blob3} />
|
|
<Title className={styles.title} variant="h1">
|
|
{translate("secret-discount.title")}
|
|
</Title>
|
|
<SecretDiscountTable
|
|
trialPrice={getFormattedPrice(trialPrice, 0)}
|
|
trialInterval={trialInterval}
|
|
trialPeriod={trialPeriod}
|
|
oldPrice={getFormattedPrice(paymentEntityMain?.price || 0, 0)}
|
|
oldDiscount={Number(getProperty("discount.old")?.value) || 0}
|
|
newDiscount={Number(getProperty("discount.new")?.value) || 0}
|
|
currency={currency}
|
|
/>
|
|
<Button className={styles.button} onClick={openPaymentModal}>
|
|
{translate("secret-discount.button-trial", {
|
|
trialPeriod: getPeriodText(trialPeriod, trialInterval, "nominative", "period_adjective")
|
|
})}
|
|
</Button>
|
|
|
|
<div className={styles["policy-container"]} ref={policyContainerRef}>
|
|
<p className={styles.policy}>
|
|
{translate("secret-discount.policy", {
|
|
// days: trialDuration,
|
|
trialPeriod: getPeriodText(trialPeriod, trialInterval, "nominative", "period_adjective"),
|
|
// oldDays: getText("old.trial.duration"),
|
|
// trialPrice: addCurrency(trialPrice, currency),
|
|
price: addCurrency(
|
|
(
|
|
// Number(getText("old.price"))
|
|
// / (
|
|
// Number(getText("split.price.value")) || 2
|
|
// )
|
|
getFormattedPrice(activeProduct?.price || 0, 0)
|
|
), currency),
|
|
billingPeriod: getPeriodText(billingPeriod, billingInterval || 0)
|
|
})}
|
|
</p>
|
|
<Blob4 className={styles.blob4} width={width} height={height + 34} />
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default SecretDiscount |