144 lines
3.9 KiB
TypeScript
144 lines
3.9 KiB
TypeScript
import Image from "next/image";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { Card, Typography } from "@/components/ui";
|
|
import { IFunnelPaymentVariant } from "@/entities/session/funnel/types";
|
|
import { getFormattedPrice } from "@/shared/utils/price";
|
|
import { Currency } from "@/types";
|
|
|
|
import styles from "./Offer.module.scss";
|
|
|
|
interface OfferProps {
|
|
offer: IFunnelPaymentVariant;
|
|
isActive: boolean;
|
|
className?: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export default function Offer(props: OfferProps) {
|
|
const { offer, isActive, className, onClick } = props;
|
|
|
|
const { key, price, oldPrice } = offer;
|
|
|
|
const productKey = key.replaceAll(".", "_");
|
|
|
|
const t = useTranslations(
|
|
`AdditionalPurchases.add-guides.products.${productKey}`
|
|
);
|
|
|
|
const currency = Currency.USD;
|
|
|
|
const subtitle = t.has("subtitle") ? t("subtitle") : undefined;
|
|
|
|
const discount = (((oldPrice || 0) - price) / (oldPrice || 0)) * 100;
|
|
|
|
const emoji = t.has("emoji") ? t("emoji") : undefined;
|
|
|
|
const typographyColor = isActive ? "white" : "default";
|
|
|
|
return (
|
|
<Card
|
|
className={`${styles.container} ${
|
|
isActive && styles.active
|
|
} ${className}`}
|
|
onClick={onClick}
|
|
>
|
|
<div className={styles.mark}>
|
|
{/* TODO: add icon after merge with chat */}
|
|
{isActive && (
|
|
<Image
|
|
src="/check-mark-1.svg"
|
|
alt="Checkmark"
|
|
width={14}
|
|
height={12}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className={styles.textContainer}>
|
|
<Typography
|
|
as="p"
|
|
align="left"
|
|
weight="semiBold"
|
|
className={styles.title}
|
|
color={typographyColor}
|
|
>
|
|
{t("title")}
|
|
</Typography>
|
|
{!!subtitle?.length && productKey !== "main_skip_offer" && (
|
|
<Typography
|
|
align="left"
|
|
size="sm"
|
|
color={typographyColor}
|
|
className={styles.subtitle}
|
|
>
|
|
{subtitle}
|
|
</Typography>
|
|
)}
|
|
<div className={styles.priceContainer}>
|
|
{productKey !== "main_skip_offer" && (
|
|
<Typography
|
|
align="left"
|
|
color={typographyColor}
|
|
size="xs"
|
|
weight="semiBold"
|
|
className={styles.price}
|
|
>
|
|
{t.rich("price", {
|
|
price: () => (
|
|
<Typography
|
|
size="sm"
|
|
color={typographyColor}
|
|
weight="semiBold"
|
|
className={styles.currentPrice}
|
|
>
|
|
{getFormattedPrice(price, currency)}
|
|
</Typography>
|
|
),
|
|
oldPrice: () => (
|
|
<Typography
|
|
size="xs"
|
|
color={typographyColor}
|
|
weight="semiBold"
|
|
className={styles.oldPrice}
|
|
>
|
|
{getFormattedPrice(oldPrice || 0, currency)}
|
|
</Typography>
|
|
),
|
|
})}
|
|
</Typography>
|
|
)}
|
|
|
|
{productKey === "main_skip_offer" && (
|
|
<Typography
|
|
align="left"
|
|
size="xs"
|
|
color={typographyColor}
|
|
className={styles.description}
|
|
>
|
|
{subtitle}
|
|
</Typography>
|
|
)}
|
|
|
|
{productKey !== "ultra_pack" && (
|
|
<div className={styles.discountContainer}>
|
|
<Typography
|
|
size="xs"
|
|
weight="semiBold"
|
|
className={styles.discount}
|
|
>
|
|
{t("discount", {
|
|
discount: discount || 0,
|
|
})}
|
|
</Typography>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<span
|
|
className={styles.emoji}
|
|
style={{ backgroundImage: `url(/emoji/${emoji})` }}
|
|
/>
|
|
</Card>
|
|
);
|
|
}
|