w-lab-app/src/components/domains/additional-purchases/AddConsultantButton/AddConsultantButton.tsx
gofnnp 23e6031b19 AW-487-chats
chats
2025-07-26 20:21:59 +04:00

82 lines
2.0 KiB
TypeScript

"use client";
import { useTranslations } from "next-intl";
import { Button, Spinner, Typography } from "@/components/ui";
import { BlurComponent } from "@/components/widgets";
import { useSingleCheckout } from "@/hooks/payment/useSingleCheckout";
import { useToast } from "@/providers/toast-provider";
import { useMultiPageNavigationContext } from "..";
import styles from "./AddConsultantButton.module.scss";
export default function AddConsultantButton() {
const t = useTranslations("AdditionalPurchases.add-consultant");
const { addToast } = useToast();
const { navigation } = useMultiPageNavigationContext();
const data = navigation.currentItem;
const product = data?.variants?.[0];
const { handleSingleCheckout, isLoading } = useSingleCheckout({
onSuccess: () => {
navigation.goToNext();
},
onError: _error => {
addToast({
variant: "error",
message: t("payment_error"),
duration: 5000,
});
},
});
const handleGetConsultation = () => {
if (!product) {
addToast({
variant: "error",
message: t("payment_error"),
duration: 5000,
});
return;
}
handleSingleCheckout({
productId: product.id,
key: product.key,
});
};
const handleSkipOffer = () => {
navigation.goToNext();
};
return (
<BlurComponent isActiveBlur={true} className={styles.container}>
<Button
className={styles.button}
onClick={handleGetConsultation}
disabled={isLoading || !product}
>
{isLoading ? (
<Spinner />
) : (
<Typography weight="semiBold" color="white">
{t("get_my_consultation")}
</Typography>
)}
</Button>
<Button
className={styles.skipButton}
onClick={handleSkipOffer}
disabled={isLoading}
>
<Typography size="sm" color="black">
{t("skip_this_offer")}
</Typography>
</Button>
</BlurComponent>
);
}