fix(SW-556): now fetching surprises separately in component.
also showing surprises on any account page
This commit is contained in:
Christian Andolf
@@ -1,7 +1,10 @@
|
||||
"use client"
|
||||
|
||||
import { trpc } from "@/lib/trpc/client"
|
||||
import { ApiReward, Reward } from "@/server/routers/contentstack/reward/output"
|
||||
import {
|
||||
Reward,
|
||||
SurpriseReward,
|
||||
} from "@/server/routers/contentstack/reward/output"
|
||||
|
||||
import LoadingSpinner from "@/components/LoadingSpinner"
|
||||
import Grids from "@/components/TempDesignSystem/Grids"
|
||||
@@ -9,15 +12,12 @@ import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
|
||||
import Title from "@/components/TempDesignSystem/Text/Title"
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import Surprises from "../Surprises"
|
||||
|
||||
import styles from "./current.module.css"
|
||||
|
||||
import type { CurrentRewardsClientProps } from "@/types/components/blocks/currentRewards"
|
||||
|
||||
export default function ClientCurrentRewards({
|
||||
initialCurrentRewards,
|
||||
membershipNumber,
|
||||
}: CurrentRewardsClientProps) {
|
||||
const lang = useLang()
|
||||
const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
|
||||
@@ -39,18 +39,12 @@ export default function ClientCurrentRewards({
|
||||
return <LoadingSpinner />
|
||||
}
|
||||
|
||||
const rewards =
|
||||
const cmsRewards =
|
||||
data?.pages
|
||||
.flatMap((page) => page?.rewards)
|
||||
.filter((reward): reward is Reward => !!reward) ?? []
|
||||
|
||||
const surprises =
|
||||
data?.pages
|
||||
.flatMap((page) => page?.apiRewards)
|
||||
.filter((reward): reward is ApiReward => reward?.type === "surprise") ??
|
||||
[]
|
||||
|
||||
if (!rewards.length && !surprises.length) {
|
||||
if (!cmsRewards.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
@@ -63,7 +57,7 @@ export default function ClientCurrentRewards({
|
||||
return (
|
||||
<>
|
||||
<Grids.Stackable>
|
||||
{rewards.map((reward, idx) => (
|
||||
{cmsRewards.map((reward, idx) => (
|
||||
<article className={styles.card} key={`${reward.reward_id}-${idx}`}>
|
||||
<Title
|
||||
as="h4"
|
||||
@@ -82,7 +76,6 @@ export default function ClientCurrentRewards({
|
||||
) : (
|
||||
<ShowMoreButton loadMoreData={loadMoreData} />
|
||||
))}
|
||||
<Surprises surprises={surprises} membershipNumber={membershipNumber} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { getProfile } from "@/lib/trpc/memoizedRequests"
|
||||
import { serverClient } from "@/lib/trpc/server"
|
||||
|
||||
import SectionContainer from "@/components/Section/Container"
|
||||
@@ -23,19 +22,10 @@ export default async function CurrentRewardsBlock({
|
||||
return null
|
||||
}
|
||||
|
||||
const user = await getProfile()
|
||||
|
||||
if (!user || "error" in user) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<SectionContainer>
|
||||
<SectionHeader title={title} link={link} preamble={subtitle} />
|
||||
<ClientCurrentRewards
|
||||
initialCurrentRewards={initialCurrentRewards}
|
||||
membershipNumber={user.membership?.membershipNumber}
|
||||
/>
|
||||
<ClientCurrentRewards initialCurrentRewards={initialCurrentRewards} />
|
||||
<SectionLink link={link} variant="mobile" />
|
||||
</SectionContainer>
|
||||
)
|
||||
|
||||
@@ -1,244 +0,0 @@
|
||||
"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 { 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 Surprises({
|
||||
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.id) {
|
||||
update.mutate({ id: surprise.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.title}>
|
||||
<Body textAlign="center">
|
||||
This is just some dummy text describing the gift and
|
||||
should be replaced.
|
||||
</Body>
|
||||
<div className={styles.badge}>
|
||||
<Caption>Valid through DD M 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}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,143 +0,0 @@
|
||||
@keyframes modal-fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
height: var(--visual-viewport-height);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
z-index: 100;
|
||||
|
||||
&[data-entering] {
|
||||
animation: modal-fade 200ms;
|
||||
}
|
||||
&[data-exiting] {
|
||||
animation: modal-fade 200ms reverse ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
&[data-entering] {
|
||||
animation: slide-up 200ms;
|
||||
}
|
||||
&[data-exiting] {
|
||||
animation: slide-up 200ms reverse ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
padding-bottom: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.modal {
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
--button-height: 32px;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--button-height);
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
padding: var(--Spacing-x2) var(--Spacing-x2) 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 var(--Spacing-x3);
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.nav {
|
||||
border-top: 1px solid var(--Base-Border-Subtle);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--Spacing-x2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav button {
|
||||
&:nth-child(1) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
background-color: var(--Base-Surface-Secondary-light-Normal);
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
}
|
||||
|
||||
.close {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: var(--Spacing-x2);
|
||||
width: 32px;
|
||||
height: var(--button-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
Reference in New Issue
Block a user