"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 { ApiReward } from "@/server/routers/contentstack/reward/output" import { ChevronRightSmallIcon, CloseLargeIcon } from "@/components/Icons" import Image from "@/components/Image" import Button from "@/components/TempDesignSystem/Button" 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" interface SurprisesProps { surprises: ApiReward[] } export default function Surprises({ surprises }: 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 }) } 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 Member ID 000000
{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} ) }