77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { Button, Spinner, Typography } from "@/components/ui";
|
|
import { useSingleCheckout } from "@/hooks/payment/useSingleCheckout";
|
|
import { IRefillModals, IRefillModalsProduct } from "@/services/socket/events";
|
|
|
|
import BenefitsList from "../BenefitsList/BenefitsList";
|
|
import RefillOptions from "../RefillOptions/RefillOptions";
|
|
import RefillOptionsHeader from "../RefillOptionsHeader/RefillOptionsHeader";
|
|
|
|
import styles from "./RefillOptionsModal.module.scss";
|
|
|
|
interface RefillOptionsModalProps {
|
|
data: NonNullable<IRefillModals["products"]>;
|
|
onTimerLeft?: () => void;
|
|
onPaymentSuccess?: () => void;
|
|
onPaymentError?: (error?: string) => void;
|
|
}
|
|
|
|
export default function RefillOptionsModal({
|
|
data,
|
|
onTimerLeft,
|
|
onPaymentSuccess,
|
|
onPaymentError,
|
|
}: RefillOptionsModalProps) {
|
|
const t = useTranslations("RefillOptionsModal");
|
|
|
|
const { handleSingleCheckout, isLoading } = useSingleCheckout({
|
|
onSuccess: onPaymentSuccess,
|
|
onError: onPaymentError,
|
|
returnUrl: typeof window !== "undefined" ? window.location.href : "",
|
|
});
|
|
|
|
const [selectedOption, setSelectedOption] = useState<IRefillModalsProduct>(
|
|
data[1] ?? data[0]
|
|
);
|
|
|
|
const handlePayment = () => {
|
|
if (isLoading) return;
|
|
handleSingleCheckout({
|
|
productId: selectedOption.id,
|
|
key: selectedOption.key,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<RefillOptionsHeader onTimerLeft={onTimerLeft} />
|
|
|
|
<RefillOptions
|
|
className={styles.options}
|
|
options={data}
|
|
selectedOption={selectedOption}
|
|
onChange={option => setSelectedOption(option)}
|
|
/>
|
|
|
|
<Button className={styles.button} onClick={handlePayment}>
|
|
{!isLoading && (
|
|
<Typography
|
|
color="white"
|
|
weight="semiBold"
|
|
className={styles.buttonText}
|
|
>
|
|
{t("button")}
|
|
</Typography>
|
|
)}
|
|
{isLoading && <Spinner color="white" />}
|
|
</Button>
|
|
|
|
<BenefitsList />
|
|
</div>
|
|
);
|
|
}
|