128 lines
4.2 KiB
TypeScript
128 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { Offer, RetainingButton } from "@/components/domains/retaining";
|
|
import { EyeSvg } from "@/components/domains/retaining/images";
|
|
import { Spinner } from "@/components/ui";
|
|
import { BlurComponent } from "@/components/widgets";
|
|
import { useLottie } from "@/hooks/lottie/useLottie";
|
|
import { ROUTES } from "@/shared/constants/client-routes";
|
|
import { retainingImages } from "@/shared/constants/images/retaining";
|
|
import { ELottieKeys } from "@/shared/constants/lottie";
|
|
import { ERetainingFunnel } from "@/types";
|
|
|
|
import styles from "./SecondChancePage.module.scss";
|
|
|
|
export default function SecondChancePage() {
|
|
const router = useRouter();
|
|
const t = useTranslations("SecondChance");
|
|
useLottie({
|
|
preloadKey: ELottieKeys.loaderCheckMark2,
|
|
});
|
|
useLottie({
|
|
preloadKey: ELottieKeys.confetti,
|
|
});
|
|
|
|
const [activeOffer, setActiveOffer] = useState<"pause_30" | "free_chat_30">(
|
|
"pause_30"
|
|
);
|
|
const [isLoadingButton, setIsLoadingButton] = useState<boolean>(false);
|
|
// const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
|
|
// const token = useSelector(selectors.selectToken);
|
|
// const cancellingSubscriptionId = useSelector(selectors.selectCancellingSubscriptionId);
|
|
|
|
const retainingFunnel = ERetainingFunnel.Red;
|
|
|
|
const handleOfferClick = (offer: "pause_30" | "free_chat_30") => {
|
|
if (isLoadingButton) return;
|
|
setActiveOffer(offer);
|
|
};
|
|
|
|
const handleGetOfferClick = async () => {
|
|
if (isLoadingButton) return;
|
|
setIsLoadingButton(true);
|
|
|
|
// const response = await api.userSubscriptionAction({
|
|
// subscriptionId: cancellingSubscriptionId,
|
|
// action: activeOffer,
|
|
// token
|
|
// });
|
|
// if (response.status === "success") {
|
|
// navigate(routes.client.retainingFunnelPlanCancelled());
|
|
// }
|
|
};
|
|
|
|
const handleCancelClick = () => {
|
|
if (isLoadingButton) return;
|
|
if (retainingFunnel === ERetainingFunnel.Red) {
|
|
router.push(ROUTES.retainingFunnelChangeMind());
|
|
}
|
|
// if (retainingFunnel === ERetainingFunnel.Green) {
|
|
// return navigate(routes.client.retainingFunnelCancellationOfSubscription());
|
|
// }
|
|
// if (retainingFunnel === ERetainingFunnel.Purple) {
|
|
// return navigate(routes.client.retainingFunnelStopFor30Days());
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.offers}>
|
|
<Offer
|
|
title={t.rich("offers.1.title", { br: () => <br /> })}
|
|
description={t("offers.1.description")}
|
|
oldPrice={t("offers.1.old-price")}
|
|
newPrice={t("offers.1.new-price")}
|
|
onClick={() => handleOfferClick("pause_30")}
|
|
active={activeOffer === "pause_30"}
|
|
image={<EyeSvg className={styles.offerImageEYE} />}
|
|
/>
|
|
<Offer
|
|
title={t("offers.2.title")}
|
|
description={t("offers.2.description")}
|
|
oldPrice={t("offers.2.old-price")}
|
|
newPrice={t("offers.2.new-price")}
|
|
onClick={() => handleOfferClick("free_chat_30")}
|
|
active={activeOffer === "free_chat_30"}
|
|
image={
|
|
// <img className={styles.offerImageVIP} src={images("vip_member.png")} alt="vip member" />
|
|
<Image
|
|
src={retainingImages("vip_member.png")}
|
|
alt="vip member"
|
|
className={styles.offerImageVIP}
|
|
width={711}
|
|
height={609}
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.buttonOfferContainer}>
|
|
<BlurComponent className={styles.blur} isActiveBlur={true}>
|
|
<RetainingButton
|
|
className={styles.buttonOffer}
|
|
active={true}
|
|
onClick={handleGetOfferClick}
|
|
>
|
|
{isLoadingButton && (
|
|
<div className={styles.loaderContainer}>
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
{t("get_offer")}
|
|
</RetainingButton>
|
|
</BlurComponent>
|
|
</div>
|
|
<RetainingButton
|
|
className={styles.buttonCancel}
|
|
onClick={handleCancelClick}
|
|
>
|
|
{t("cancel")}
|
|
</RetainingButton>
|
|
</>
|
|
);
|
|
}
|