101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
import { useTranslations } from "next-intl";
|
|
import clsx from "clsx";
|
|
|
|
import { Card, Icon, IconName, Typography } from "@/components/ui";
|
|
import { IFunnelPaymentVariant } from "@/entities/session/funnel/types";
|
|
import { getFormattedPrice } from "@/shared/utils/price";
|
|
import { Currency } from "@/types";
|
|
|
|
import styles from "./VideoGuidesOffer.module.scss";
|
|
|
|
interface VideoGuidesOfferProps {
|
|
offer: IFunnelPaymentVariant;
|
|
isActive: boolean;
|
|
className?: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export default function VideoGuidesOffer(props: VideoGuidesOfferProps) {
|
|
const { offer, isActive, className, onClick } = props;
|
|
|
|
const { key, price, oldPrice } = offer;
|
|
|
|
const productKey = key.replaceAll(".", "_");
|
|
|
|
const t = useTranslations(
|
|
`AdditionalPurchases.video-guides.products.${productKey}`
|
|
);
|
|
|
|
const currency = Currency.USD;
|
|
|
|
const subtitle = t.has("subtitle") ? t("subtitle") : undefined;
|
|
|
|
const discount = Math.round(
|
|
(((oldPrice || 0) - price) / (oldPrice || 0)) * 100
|
|
);
|
|
|
|
const emoji = t.has("emoji") ? t("emoji") : undefined;
|
|
|
|
return (
|
|
<Card
|
|
className={clsx(
|
|
styles.container,
|
|
isActive && styles.active,
|
|
styles[productKey],
|
|
className
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
<div className={styles.content}>
|
|
<div className={styles.emojiContainer}>
|
|
<span
|
|
className={styles.emoji}
|
|
style={{ backgroundImage: `url(/emoji/${emoji})` }}
|
|
/>
|
|
</div>
|
|
<div className={styles.textContainer}>
|
|
<Typography as="h5" align="left" className={styles.title}>
|
|
{t("title")}
|
|
</Typography>
|
|
{subtitle && (
|
|
<Typography as="p" align="left" className={styles.subtitle}>
|
|
{subtitle}
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
<div className={styles.checmarkContainer}>
|
|
<Icon
|
|
name={IconName.Check}
|
|
color="white"
|
|
size={{
|
|
width: 11,
|
|
height: 11,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className={styles.footer}>
|
|
<Typography className={styles.price}>
|
|
{t.rich("price", {
|
|
price: () => (
|
|
<Typography className={styles.currentPrice}>
|
|
{getFormattedPrice(price, currency)}
|
|
</Typography>
|
|
),
|
|
oldPrice: () => (
|
|
<Typography className={styles.oldPrice}>
|
|
{getFormattedPrice(oldPrice || 0, currency)}
|
|
</Typography>
|
|
),
|
|
})}
|
|
</Typography>
|
|
<Typography className={styles.discount}>
|
|
{t("discount", {
|
|
discount: discount || 0,
|
|
})}
|
|
</Typography>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|