248 lines
8.2 KiB
TypeScript
248 lines
8.2 KiB
TypeScript
"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 }
|
|
)}
|
|
<br />
|
|
<Link href={benefits[lang]} variant="underscored" color="burgundy">
|
|
{intl.formatMessage({ id: "Go to My Benefits" })}
|
|
</Link>
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ModalOverlay
|
|
className={styles.overlay}
|
|
isOpen={open}
|
|
onOpenChange={setOpen}
|
|
isKeyboardDismissDisabled
|
|
>
|
|
<Modal className={styles.modal}>
|
|
<Dialog aria-label="Surprises" className={styles.dialog}>
|
|
{({ close }) => {
|
|
return (
|
|
<>
|
|
<div className={styles.top}>
|
|
{surprises.length > 1 && showSurprises && (
|
|
<Caption type="label" uppercase>
|
|
{intl.formatMessage(
|
|
{ id: "{amount} out of {total}" },
|
|
{
|
|
amount: selectedSurprise + 1,
|
|
total: surprises.length,
|
|
}
|
|
)}
|
|
</Caption>
|
|
)}
|
|
<button
|
|
onClick={() => closeModal(close)}
|
|
type="button"
|
|
className={styles.close}
|
|
>
|
|
<CloseLargeIcon />
|
|
</button>
|
|
</div>
|
|
{showSurprises ? (
|
|
<>
|
|
<div className={styles.content}>
|
|
<Surprise title={surprise.label}>
|
|
<Body textAlign="center">{surprise.description}</Body>
|
|
<div className={styles.badge}>
|
|
<Caption>
|
|
{intl.formatMessage({ id: "Valid through" })}{" "}
|
|
{dt(surprise.endsAt)
|
|
.locale(lang)
|
|
.format("DD MMM YYYY")}
|
|
</Caption>
|
|
<Caption>
|
|
{intl.formatMessage({ id: "Membership ID" })}{" "}
|
|
{membershipNumber}
|
|
</Caption>
|
|
</div>
|
|
</Surprise>
|
|
</div>
|
|
{surprises.length > 1 && (
|
|
<>
|
|
<nav className={styles.nav}>
|
|
<Button
|
|
variant="icon"
|
|
intent="tertiary"
|
|
disabled={selectedSurprise === 0}
|
|
onPress={() => showSurprise(-1)}
|
|
size="small"
|
|
>
|
|
<ChevronRightSmallIcon
|
|
className={styles.chevron}
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
{intl.formatMessage({ id: "Previous" })}
|
|
</Button>
|
|
<Button
|
|
variant="icon"
|
|
intent="tertiary"
|
|
disabled={selectedSurprise === surprises.length - 1}
|
|
onPress={() => showSurprise(1)}
|
|
size="small"
|
|
>
|
|
{intl.formatMessage({ id: "Next" })}
|
|
<ChevronRightSmallIcon width={20} height={20} />
|
|
</Button>
|
|
</nav>
|
|
</>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className={styles.content}>
|
|
{surprises.length > 1 ? (
|
|
<Surprise title={intl.formatMessage({ id: "Surprise!" })}>
|
|
<Body textAlign="center">
|
|
{intl.formatMessage<React.ReactNode>(
|
|
{
|
|
id: "You have <b>#</b> gifts waiting for you!",
|
|
},
|
|
{
|
|
amount: surprises.length,
|
|
b: (str) => <b>{str}</b>,
|
|
}
|
|
)}
|
|
<br />
|
|
{intl.formatMessage({
|
|
id: "Hurry up and use them before they expire!",
|
|
})}
|
|
</Body>
|
|
<Caption>
|
|
{intl.formatMessage({
|
|
id: "You'll find all your gifts in 'My benefits'",
|
|
})}
|
|
</Caption>
|
|
</Surprise>
|
|
) : (
|
|
<Surprise title={intl.formatMessage({ id: "Surprise!" })}>
|
|
<Body textAlign="center">
|
|
{intl.formatMessage({
|
|
id: "We have a special gift waiting for you!",
|
|
})}
|
|
</Body>
|
|
<Caption>
|
|
{intl.formatMessage({
|
|
id: "You'll find all your gifts in 'My benefits'",
|
|
})}
|
|
</Caption>
|
|
</Surprise>
|
|
)}
|
|
|
|
<Button
|
|
intent="primary"
|
|
onPress={() => {
|
|
viewRewards()
|
|
setShowSurprises(true)
|
|
}}
|
|
size="medium"
|
|
theme="base"
|
|
fullWidth
|
|
autoFocus
|
|
>
|
|
{intl.formatMessage(
|
|
{
|
|
id: "Open gift(s)",
|
|
},
|
|
{ amount: surprises.length }
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}}
|
|
</Dialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
)
|
|
}
|
|
|
|
function Surprise({
|
|
title,
|
|
children,
|
|
}: {
|
|
title?: string
|
|
children?: React.ReactNode
|
|
}) {
|
|
return (
|
|
<>
|
|
<Image
|
|
src="/_static/img/loyalty-award.png"
|
|
width={113}
|
|
height={125}
|
|
alt="Gift"
|
|
/>
|
|
<Title textAlign="center" level="h4">
|
|
{title}
|
|
</Title>
|
|
|
|
{children}
|
|
</>
|
|
)
|
|
}
|