96 lines
4.5 KiB
TypeScript
96 lines
4.5 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 } from "react";
|
|
import { actions, selectors } from "@/store";
|
|
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";
|
|
import { useFunnel } from "@/hooks/funnel/useFunnel";
|
|
|
|
function SpecialOffer() {
|
|
const dispatch = useDispatch();
|
|
const navigate = useNavigate();
|
|
const activeProduct = useSelector(selectors.selectActiveProduct);
|
|
const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV1);
|
|
|
|
const {
|
|
products,
|
|
currency,
|
|
trialInterval,
|
|
} = useFunnel({
|
|
funnel: ELocalesPlacement.EmailMarketingCompatibilityV1,
|
|
paymentPlacement: "main"
|
|
})
|
|
|
|
const trialPrice = ((products[0]?.trialPrice || 0) / 100).toFixed(2) || 0;
|
|
const price = (activeProduct?.price || 0) / 100;
|
|
|
|
useEffect(() => {
|
|
dispatch(actions.payment.update({ activeProduct: products[0] }));
|
|
}, [dispatch, products]);
|
|
|
|
const openPaymentModal = () => {
|
|
navigate(routes.client.emailMarketingV1PaymentModal());
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<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: trialInterval })}
|
|
</Title>
|
|
<p className={styles.contentDescription}>
|
|
<svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<mask id="mask0_44_3678" style={{ maskType: "luminance" }} maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="23">
|
|
<path d="M0 0H20V22.6667H0V0Z" fill="white" />
|
|
</mask>
|
|
<g mask="url(#mask0_44_3678)">
|
|
<path d="M15.2679 1.12743C13.3208 1.12743 11.4571 0.727711 10 0.000244141C8.54335 0.727711 6.67945 1.12743 4.73211 1.12743C3.01673 1.12743 1.36526 0.817012 0 0.245346V9.65397C0 15.7777 4.47844 21.5948 10 22.6667C15.5218 21.5948 20 15.7777 20 9.65397V0.245346C18.635 0.817012 16.9835 1.12743 15.2679 1.12743Z" fill="#00AE37" />
|
|
</g>
|
|
<path d="M8.03704 15.1012L3.87109 10.9979L5.11941 9.76837L8.03704 12.6421L14.8802 5.90161L16.1285 7.13116L8.03704 15.1012Z" fill="white" />
|
|
<path d="M13.9968 20.9725C17.2096 18.7977 19.5429 14.9798 19.9398 10.8855L16.1286 7.13159L8.03711 15.1017L13.9968 20.9725Z" fill="#008E28" />
|
|
</svg>
|
|
|
|
{translate("special-offer.cancel-anytime")}
|
|
</p>
|
|
<PricingSummary
|
|
totalToday={trialPrice}
|
|
originalPrice={
|
|
// Number(getText("full.price")) / 100
|
|
0
|
|
}
|
|
discountedPrice={price}
|
|
trialDuration={trialInterval}
|
|
// saveText={getText("text.save") as string}
|
|
saveText={""}
|
|
currency={currency}
|
|
/>
|
|
<div className={styles.buttonContainer}>
|
|
<BlurComponent isActiveBlur={true} gradientClassName={styles.gradientBlur}>
|
|
<Button className={styles.button} onClick={openPaymentModal}>
|
|
{translate("special-offer.button-continue")}
|
|
</Button>
|
|
</BlurComponent>
|
|
</div>
|
|
<p className={styles.contentPolicy}>
|
|
{translate("special-offer.policy", {
|
|
days: trialInterval,
|
|
price: addCurrency(price, currency)
|
|
})}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SpecialOffer |