"use client" 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 { 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 CaptionLabel from "@/components/TempDesignSystem/Text/CaptionLabel" 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 Surprises({ surprises, membershipNumber, }: SurprisesProps) { const lang = useLang() 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 } function showSurprise(n: number) { setSelectedSurprise((surprise) => surprise + n) } function viewRewards(id?: string) { if (!id) { return } update.mutate({ id }) } function closeModal(close: VoidFunction) { viewRewards() toast.success( <> {intl.formatMessage( { id: "Gift(s) added to your benefits" }, { amount: surprises.length } )}
{intl.formatMessage({ id: "Go to My Benefits" })} ) close() } const surprise = surprises[selectedSurprise] return ( {({ close }) => { return ( <>
{surprises.length > 1 && showSurprises && ( {intl.formatMessage( { id: "{amount} out of {total}" }, { amount: selectedSurprise + 1, total: surprises.length, } )} )}
{showSurprises ? ( <>
This is just some dummy text describing the gift and should be replaced.
Valid through DD M 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} ) }