85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { RetainingButton } from "@/components/domains/retaining";
|
|
import { Spinner } from "@/components/ui";
|
|
import { performUserSubscriptionAction } from "@/entities/subscriptions/actions";
|
|
import { useLottie } from "@/hooks/lottie/useLottie";
|
|
import { useRetainingStore } from "@/providers/retaining-store-provider";
|
|
import { useToast } from "@/providers/toast-provider";
|
|
import { ROUTES } from "@/shared/constants/client-routes";
|
|
import { ELottieKeys } from "@/shared/constants/lottie";
|
|
import { ERetainingFunnel } from "@/types";
|
|
|
|
import styles from "./Buttons.module.scss";
|
|
|
|
export default function Buttons() {
|
|
const t = useTranslations("StopFor30Days");
|
|
const router = useRouter();
|
|
useLottie({
|
|
preloadKey: ELottieKeys.loaderCheckMark2,
|
|
});
|
|
useLottie({
|
|
preloadKey: ELottieKeys.confetti,
|
|
});
|
|
const { addToast } = useToast();
|
|
|
|
const [isLoadingButton, setIsLoadingButton] = useState<boolean>(false);
|
|
|
|
const { funnel, cancellingSubscription } = useRetainingStore(state => state);
|
|
|
|
const handleStopClick = async () => {
|
|
if (isLoadingButton) return;
|
|
setIsLoadingButton(true);
|
|
|
|
const response = await performUserSubscriptionAction({
|
|
subscriptionId: cancellingSubscription?.id || "",
|
|
action: "pause_30",
|
|
});
|
|
|
|
if (response?.data?.status === "success") {
|
|
return router.push(ROUTES.retainingFunnelSubscriptionStopped());
|
|
}
|
|
setIsLoadingButton(false);
|
|
addToast({
|
|
variant: "error",
|
|
message: t("error_message"),
|
|
duration: 5000,
|
|
});
|
|
};
|
|
|
|
const handleCancelClick = () => {
|
|
if (isLoadingButton) return;
|
|
if (funnel === ERetainingFunnel.Green) {
|
|
return router.push(ROUTES.retainingFunnelChangeMind());
|
|
}
|
|
router.push(ROUTES.retainingFunnelCancellationOfSubscription());
|
|
};
|
|
|
|
return (
|
|
<div className={styles.buttonsContainer}>
|
|
<RetainingButton
|
|
className={styles.button}
|
|
active={true}
|
|
onClick={handleStopClick}
|
|
>
|
|
{isLoadingButton && (
|
|
<div className={styles.loaderContainer}>
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
{t("stop")}
|
|
</RetainingButton>
|
|
<RetainingButton
|
|
className={styles.buttonCancel}
|
|
onClick={handleCancelClick}
|
|
>
|
|
{t("cancel")}
|
|
</RetainingButton>
|
|
</div>
|
|
);
|
|
}
|