107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { Typography } from "@/components/ui";
|
|
import { getFormattedPrice } from "@/shared/utils/price";
|
|
import { Currency } from "@/types";
|
|
|
|
import { useMultiPageNavigationContext } from "..";
|
|
|
|
import styles from "./ConsultationTable.module.scss";
|
|
|
|
export default function ConsultationTable() {
|
|
const t = useTranslations("AdditionalPurchases.add-consultant");
|
|
const { navigation } = useMultiPageNavigationContext();
|
|
const data = navigation.currentItem;
|
|
|
|
const currency = Currency.USD;
|
|
|
|
const product = data?.variants?.[0];
|
|
const discount =
|
|
data?.properties?.find(p => p.key === "discount")?.value ?? 0;
|
|
|
|
const price = getFormattedPrice(product?.price ?? 0, currency);
|
|
const oldPrice = getFormattedPrice(
|
|
Number(product?.price ?? 0) * 100 / (100 - Number(discount)),
|
|
currency,
|
|
);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Typography as="h2" weight="bold" className={styles.title}>
|
|
{t("your_unique_consultation")}
|
|
</Typography>
|
|
<div className={styles.header}>
|
|
<div className={styles.textContainer}>
|
|
<Typography
|
|
as="h3"
|
|
align="left"
|
|
weight="semiBold"
|
|
className={styles.title}
|
|
>
|
|
{t("30-minute")}
|
|
</Typography>
|
|
<Typography as="p" align="left" className={styles.text}>
|
|
{t("unlock_profound")}
|
|
</Typography>
|
|
</div>
|
|
<Image
|
|
src="/paywall__spiritist-spiritualist_new.png"
|
|
alt="spiritualist"
|
|
width={76.3}
|
|
height={100}
|
|
/>
|
|
</div>
|
|
<div className={styles.line} />
|
|
<div className={styles.footer}>
|
|
<Typography
|
|
as="p"
|
|
color="black"
|
|
weight="bold"
|
|
align="left"
|
|
className={styles.oneTimePrice}
|
|
>
|
|
{t.rich("one_time_price_offer", {
|
|
price: () => (
|
|
<Typography as="span" weight="bold" size="xl" color="black">
|
|
{price}
|
|
</Typography>
|
|
),
|
|
})}
|
|
</Typography>
|
|
<Typography
|
|
as="p"
|
|
color="black"
|
|
size="sm"
|
|
align="left"
|
|
className={styles.oldPrice}
|
|
>
|
|
{t("original_price", {
|
|
oldPrice: oldPrice,
|
|
})}
|
|
<Typography weight="bold" className={styles.save}>
|
|
{t("save", {
|
|
discount: discount,
|
|
})}
|
|
</Typography>
|
|
</Typography>
|
|
<div className={styles.line} />
|
|
<div className={styles.chooseContainer}>
|
|
<Typography as="p" align="left" className={styles.chooseText}>
|
|
{t("choose_from")}
|
|
</Typography>
|
|
|
|
<Image
|
|
src="/paywall__astrologers-image_new.png"
|
|
alt="astrologers"
|
|
width={106}
|
|
height={40}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|