65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { use, useEffect, useState } from "react";
|
|
|
|
import { Skeleton } from "@/components/ui";
|
|
import { IFunnelPaymentVariant } from "@/entities/session/funnel/types";
|
|
|
|
import { useProductSelection } from "../ProductSelectionContext";
|
|
|
|
import styles from "./Offers.module.scss";
|
|
|
|
import { Offer } from "..";
|
|
|
|
interface OffersProps {
|
|
products: Promise<IFunnelPaymentVariant[]>;
|
|
}
|
|
|
|
export default function Offers({ products }: OffersProps) {
|
|
const offers = use(products);
|
|
const [allOffers, setAllOffers] = useState<IFunnelPaymentVariant[]>([]);
|
|
const [activeOffer, setActiveOffer] = useState<string>("");
|
|
const { setSelectedProduct } = useProductSelection();
|
|
|
|
useEffect(() => {
|
|
const skipOffer: IFunnelPaymentVariant = {
|
|
id: "main_skip_offer",
|
|
key: "main.skip.offer",
|
|
type: "one_time",
|
|
price: 0,
|
|
oldPrice: 0,
|
|
};
|
|
|
|
const offersWithSkip = [...offers, skipOffer];
|
|
setAllOffers(offersWithSkip);
|
|
setActiveOffer(offers[0]?.id || skipOffer.id);
|
|
|
|
// Устанавливаем первый продукт как выбранный по умолчанию
|
|
if (offers[0]) {
|
|
setSelectedProduct(offers[0]);
|
|
}
|
|
}, [offers, setSelectedProduct]);
|
|
|
|
const handleOfferClick = (offer: IFunnelPaymentVariant) => {
|
|
setActiveOffer(offer.id);
|
|
setSelectedProduct(offer);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{allOffers.map(offer => (
|
|
<Offer
|
|
offer={offer}
|
|
key={offer.id}
|
|
isActive={activeOffer === offer.id}
|
|
onClick={() => handleOfferClick(offer)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function OffersSkeleton() {
|
|
return <Skeleton style={{ height: "400px" }} />;
|
|
}
|