95 lines
2.7 KiB
TypeScript
95 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;
|
|
isFirstOffer?: boolean;
|
|
className?: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export default function VideoGuidesOffer(props: VideoGuidesOfferProps) {
|
|
const { offer, isActive, isFirstOffer, className, onClick } = props;
|
|
|
|
const { key, name, description, emoji, price, oldPrice } = offer;
|
|
|
|
const productKey = key.replaceAll(".", "_");
|
|
|
|
const currency = Currency.USD;
|
|
|
|
const discount = Math.round(
|
|
(((oldPrice || 0) - price) / (oldPrice || 0)) * 100
|
|
);
|
|
|
|
const t = useTranslations("AdditionalPurchases.video-guides");
|
|
|
|
return (
|
|
<Card
|
|
className={clsx(
|
|
styles.container,
|
|
isActive && styles.active,
|
|
styles[productKey],
|
|
className
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{isFirstOffer && (
|
|
<div className={styles.topBadge}>
|
|
<span className={styles.topBadgeText}>{discount}% OFF</span>
|
|
</div>
|
|
)}
|
|
<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}>
|
|
{name}
|
|
</Typography>
|
|
{description && (
|
|
<Typography as="p" align="left" className={styles.subtitle}>
|
|
{description}
|
|
</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("now")}{" "}
|
|
<Typography className={styles.currentPrice}>
|
|
{getFormattedPrice(price, currency)}
|
|
</Typography>
|
|
{" "}
|
|
<Typography className={styles.oldPrice}>
|
|
{getFormattedPrice(oldPrice || 0, currency)}
|
|
</Typography>
|
|
</Typography>
|
|
{!isFirstOffer && (
|
|
<Typography className={styles.discount}>{discount}% OFF</Typography>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|