90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
import styles from "./styles.module.scss";
|
|
import Blob from "../../images/SVG/Blob";
|
|
import { images } from "../../data";
|
|
import Title from "@/components/Title";
|
|
import Button from "../../components/Button";
|
|
import Blob2 from "../../images/SVG/Blob2";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { addCurrency, ELocalesPlacement } from "@/locales";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { useEffect } from "react";
|
|
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
|
|
import { useFunnel } from "@/hooks/funnel/useFunnel";
|
|
import Loader, { LoaderColor } from "@/components/Loader";
|
|
import { getFormattedPrice } from "@/utils/price.utils";
|
|
|
|
function SaveOff() {
|
|
const { translate, getPeriodText } = useTranslations(ELocalesPlacement.EmailMarketingPalmistryV2);
|
|
|
|
const {
|
|
isPending,
|
|
products,
|
|
currency,
|
|
trialInterval,
|
|
trialPeriod,
|
|
getProperty,
|
|
getPaymentEntity
|
|
} = useFunnel({
|
|
funnel: ELocalesPlacement.PalmistryV1,
|
|
paymentPlacement: "main_secret_discount"
|
|
})
|
|
|
|
const paymentEntity = getPaymentEntity("main")
|
|
|
|
const activeProduct = products[0]
|
|
const trialPrice = (activeProduct?.trialPrice || 0) / 100;
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const handleNext = () => {
|
|
navigate(routes.client.palmistryV1SecretDiscount());
|
|
}
|
|
|
|
useEffect(() => {
|
|
metricService.reachGoal(EGoals.DISCOUNT_PAGE_VISIT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
|
|
}, []);
|
|
|
|
if (isPending) return <Loader color={LoaderColor.Black} />
|
|
|
|
return (
|
|
<>
|
|
<Blob className={styles.blob} />
|
|
<Blob2 className={styles.blob2} />
|
|
<img className={styles.gift} src={images("gift.svg")} alt="gift" />
|
|
<Title className={styles.title}>
|
|
{translate("save-off.title", { discount: getProperty("discount.new")?.value })}
|
|
</Title>
|
|
<p className={styles.description}>
|
|
{translate("save-off.instead", {
|
|
price: <span className={styles.price}>{addCurrency(trialPrice, currency)}</span>,
|
|
oldPrice: <span className={styles.discount}>
|
|
{translate("save-off.instead-old-price", {
|
|
oldPrice: addCurrency(getFormattedPrice(paymentEntity?.price || 0, 0), currency)
|
|
})}
|
|
</span>
|
|
})}
|
|
</p>
|
|
<p className={styles.point} style={{ marginTop: 12 }}>
|
|
<img src={images("fire.png")} alt="fire" />
|
|
{translate("save-off.trial-duration", {
|
|
trialPeriod: getPeriodText(trialPeriod, trialInterval),
|
|
oldTrialPeriod: <s>
|
|
{getPeriodText(paymentEntity?.trialPeriod || "DAY", paymentEntity?.trialInterval || 0)}
|
|
</s>,
|
|
})}
|
|
</p>
|
|
<p className={styles.point}>
|
|
<img src={images("gift.png")} alt="gift" />
|
|
{translate("save-off.discount-offer", { discount: getProperty("discount.new")?.value })}
|
|
</p>
|
|
<Button className={styles.button} onClick={handleNext}>
|
|
{translate("save-off.button-trial", {
|
|
trialPeriod: getPeriodText(trialPeriod, trialInterval)
|
|
})}
|
|
</Button>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SaveOff |