87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
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 { ROUTES } from "@/shared/constants/client-routes";
|
|
|
|
import { useMultiPageNavigationContext } from "..";
|
|
import { useProductSelection } from "../ProductSelectionProvider";
|
|
|
|
import styles from "./AddGuidesButton.module.scss";
|
|
|
|
export default function AddGuidesButton() {
|
|
const t = useTranslations("AdditionalPurchases.add-guides");
|
|
const { addToast } = useToast();
|
|
const { selectedProduct } = useProductSelection();
|
|
const { navigation } = useMultiPageNavigationContext();
|
|
const [isNavigating, setIsNavigating] = useState(false);
|
|
|
|
const { handleSingleCheckout, isLoading } = useSingleCheckout({
|
|
onSuccess: async () => {
|
|
setIsNavigating(true);
|
|
await navigation.goToNext();
|
|
},
|
|
onError: _error => {
|
|
addToast({
|
|
variant: "error",
|
|
message: t("payment_error"),
|
|
duration: 5000,
|
|
});
|
|
},
|
|
returnUrl: new URL(
|
|
navigation.getNextPageUrl() || ROUTES.home(),
|
|
process.env.NEXT_PUBLIC_APP_URL || ""
|
|
).toString(),
|
|
});
|
|
|
|
const handlePurchase = () => {
|
|
if (!selectedProduct) {
|
|
addToast({
|
|
variant: "error",
|
|
message: t("select_product_error"),
|
|
duration: 5000,
|
|
});
|
|
return;
|
|
}
|
|
|
|
handleSingleCheckout({
|
|
productId: selectedProduct.id,
|
|
key: selectedProduct.key,
|
|
});
|
|
};
|
|
|
|
const handleSkipOffer = () => {
|
|
navigation.goToNext();
|
|
};
|
|
|
|
const isSkipOffer = selectedProduct?.id === "main_skip_offer";
|
|
|
|
const isButtonDisabled = isLoading || isNavigating;
|
|
|
|
return (
|
|
<BlurComponent isActiveBlur={true} className={styles.container}>
|
|
<Button
|
|
className={styles.button}
|
|
onClick={isSkipOffer ? handleSkipOffer : handlePurchase}
|
|
disabled={isButtonDisabled}
|
|
>
|
|
{isButtonDisabled ? (
|
|
<Spinner />
|
|
) : (
|
|
<Typography color="white" className={styles.text}>
|
|
{isSkipOffer ? t("skip_offer") : t("button")}
|
|
</Typography>
|
|
)}
|
|
</Button>
|
|
<Typography as="p" className={styles.copyright}>
|
|
{t("copyright")}
|
|
</Typography>
|
|
</BlurComponent>
|
|
);
|
|
}
|