96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { useTranslations } from "next-intl";
|
||
|
||
import { Spinner, Typography } 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 "@/stores/retaining-store";
|
||
|
||
import { RetainingButton } from "../..";
|
||
|
||
import styles from "./Buttons.module.scss";
|
||
|
||
export default function Buttons() {
|
||
const t = useTranslations("CancelSubscription");
|
||
const router = useRouter();
|
||
useLottie({
|
||
preloadKey: ELottieKeys.loaderCheckMark,
|
||
});
|
||
const { addToast } = useToast();
|
||
|
||
const { cancellingSubscription, setFunnel, journey } = useRetainingStore(
|
||
state => state
|
||
);
|
||
|
||
const [activeButton, setActiveButton] = useState<"stay" | "cancel" | null>();
|
||
const [isLoadingButton, setIsLoadingButton] = useState<
|
||
"stay" | "cancel" | null
|
||
>();
|
||
|
||
const handleCancelButtonClick = () => {
|
||
if (isLoadingButton) return;
|
||
setActiveButton("cancel");
|
||
const timer = setTimeout(() => {
|
||
router.push(ROUTES.retainingFunnelAppreciateChoice());
|
||
}, 1000);
|
||
return () => clearTimeout(timer);
|
||
};
|
||
|
||
const handleStayButtonClick = async () => {
|
||
if (isLoadingButton) return;
|
||
setActiveButton("stay");
|
||
setIsLoadingButton("stay");
|
||
|
||
const response = await performUserSubscriptionAction({
|
||
subscriptionId: cancellingSubscription?.id || "",
|
||
action: "discount_50",
|
||
retainingJourney: journey || undefined,
|
||
});
|
||
|
||
if (response?.data?.status === "success") {
|
||
setFunnel(ERetainingFunnel.Stay50);
|
||
return router.push(ROUTES.retainingFunnelStay50Done());
|
||
}
|
||
setIsLoadingButton(null);
|
||
setActiveButton(null);
|
||
addToast({
|
||
variant: "error",
|
||
message: t("error_message"),
|
||
duration: 5000,
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className={styles.buttons}>
|
||
<RetainingButton
|
||
className={styles.button}
|
||
active={activeButton === "stay"}
|
||
onClick={handleStayButtonClick}
|
||
>
|
||
{isLoadingButton === "stay" && (
|
||
<div className={styles.loaderContainer}>
|
||
<Spinner />
|
||
</div>
|
||
)}
|
||
<Typography className={styles.buttonIcon}>🙋♀️</Typography>
|
||
{t("stay_button")}
|
||
</RetainingButton>
|
||
<RetainingButton
|
||
className={styles.button}
|
||
active={activeButton === "cancel"}
|
||
onClick={handleCancelButtonClick}
|
||
>
|
||
<Typography className={styles.buttonIcon}>🙅♀️</Typography>
|
||
{t("cancel_button")}
|
||
</RetainingButton>
|
||
</div>
|
||
);
|
||
}
|