"use client" import { usePathname } from "next/navigation" import React, { useState } from "react" import { Dialog, Modal, ModalOverlay } from "react-aria-components" import { useIntl } from "react-intl" import { benefits } from "@/constants/routes/myPages" import { dt } from "@/lib/dt" import { trpc } from "@/lib/trpc/client" import { ChevronRightSmallIcon, CloseLargeIcon } from "@/components/Icons" import Image from "@/components/Image" import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Title from "@/components/TempDesignSystem/Text/Title" import { toast } from "@/components/TempDesignSystem/Toasts" import useLang from "@/hooks/useLang" import styles from "./surprises.module.css" import type { SurprisesProps } from "@/types/components/blocks/surprises" export default function SurprisesNotification({ surprises, membershipNumber, }: SurprisesProps) { const lang = useLang() const pathname = usePathname() const [open, setOpen] = useState(true) const [selectedSurprise, setSelectedSurprise] = useState(0) const [showSurprises, setShowSurprises] = useState(false) const update = trpc.contentstack.rewards.update.useMutation() const intl = useIntl() if (!surprises.length) { return null } const surprise = surprises[selectedSurprise] function showSurprise(n: number) { setSelectedSurprise((surprise) => surprise + n) } function viewRewards() { if (surprise.reward_id) { update.mutate({ id: surprise.reward_id }) } } function closeModal(close: VoidFunction) { viewRewards() close() if (pathname.indexOf(benefits[lang]) !== 0) { toast.success( <> {intl.formatMessage( { id: "Gift(s) added to your benefits" }, { amount: surprises.length } )}
{intl.formatMessage({ id: "Go to My Benefits" })} ) } } return ( {({ close }) => { return ( <>
{surprises.length > 1 && showSurprises && ( {intl.formatMessage( { id: "{amount} out of {total}" }, { amount: selectedSurprise + 1, total: surprises.length, } )} )}
{showSurprises ? ( <>
{surprise.description}
{intl.formatMessage({ id: "Valid through" })}{" "} {dt(surprise.endsAt) .locale(lang) .format("DD MMM YYYY")} {intl.formatMessage({ id: "Membership ID" })}{" "} {membershipNumber}
{surprises.length > 1 && ( <> )} ) : (
{surprises.length > 1 ? ( {intl.formatMessage( { id: "You have # gifts waiting for you!", }, { amount: surprises.length, b: (str) => {str}, } )}
{intl.formatMessage({ id: "Hurry up and use them before they expire!", })} {intl.formatMessage({ id: "You'll find all your gifts in 'My benefits'", })} ) : ( {intl.formatMessage({ id: "We have a special gift waiting for you!", })} {intl.formatMessage({ id: "You'll find all your gifts in 'My benefits'", })} )}
)} ) }} ) } function Surprise({ title, children, }: { title?: string children?: React.ReactNode }) { return ( <> Gift {title} {children} ) }