scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement logic to select compared levels based on membershipLevel

Browse Source
This commit is contained in:
Arvid Norlin
2024-06-05 15:28:51 +02:00
parent 79af3dba65
commit 24810eaee6
8 changed files with 125 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
View File

@@ -1,13 +1,16 @@
"use client"
import { Dispatch, SetStateAction, useState } from "react"
import { Dispatch, SetStateAction, useEffect, useState } from "react"
import { type Key } from "react-aria-components"
import { useIntl } from "react-intl"
import { Lang } from "@/constants/languages"
import { membershipLevels } from "@/constants/membershipLevels"
import { trpc } from "@/lib/trpc/client"
import Image from "@/components/Image"
import Select from "@/components/TempDesignSystem/Form/Select"
import { getMembership } from "@/utils/user"
import levelsData from "./data/EN.json"
import BenefitList from "./BenefitList"
@@ -56,19 +59,59 @@ function getLevelByTier(tier: number) {
export default function OverviewTable() {
const intl = useIntl()
const [selectedLevelA, setSelectedLevelA] = useState(getLevelByTier(1))
const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
const [selectedLevelC, setSelectedLevelC] = useState(getLevelByTier(3))
// TODO: Should isLoading be used for some loader, or is it fine to just use default values and rerender?
// Also, since it's fine to not be authenticated, how should the error be handled?
const { data, isLoading } = trpc.user.get.useQuery()
const defaultLevelA = levelsData.levels.find(
(level) => level.tier === selectedLevelA.tier
) as ComparisonLevel
const defaultLevelB = levelsData.levels.find(
(level) => level.tier === selectedLevelB.tier
) as ComparisonLevel
const defaultLevelC = levelsData.levels.find(
(level) => level.tier === selectedLevelC.tier
) as ComparisonLevel
const [selectedLevelAMobile, setSelectedLevelAMobile] = useState(
getLevelByTier(1)
)
const [selectedLevelBMobile, setSelectedLevelBMobile] = useState(
getLevelByTier(2)
)
const [selectedLevelADesktop, setSelectedLevelADesktop] = useState(
getLevelByTier(1)
)
const [selectedLevelBDesktop, setSelectedLevelBDesktop] = useState(
getLevelByTier(2)
)
const [selectedLevelCDesktop, setSelectedLevelCDesktop] = useState(
getLevelByTier(3)
)
useEffect(() => {
const membership = data?.memberships
? getMembership(data.memberships)
: null
if (membership) {
const tier = membershipLevels[membership.membershipLevel]
// The logic on which levels to display for upper levels is as requested by UI
if (tier === 6) {
setSelectedLevelAMobile(getLevelByTier(6))
setSelectedLevelBMobile(getLevelByTier(7))
setSelectedLevelADesktop(getLevelByTier(5))
setSelectedLevelBDesktop(getLevelByTier(6))
setSelectedLevelCDesktop(getLevelByTier(7))
} else if (tier === 7) {
setSelectedLevelAMobile(getLevelByTier(6))
setSelectedLevelBMobile(getLevelByTier(7))
setSelectedLevelADesktop(getLevelByTier(6))
setSelectedLevelBDesktop(getLevelByTier(7))
setSelectedLevelCDesktop(getLevelByTier(1))
} else {
setSelectedLevelAMobile(getLevelByTier(tier))
setSelectedLevelBMobile(getLevelByTier(tier + 1))
setSelectedLevelADesktop(getLevelByTier(tier))
setSelectedLevelBDesktop(getLevelByTier(tier + 1))
setSelectedLevelCDesktop(getLevelByTier(tier + 2))
}
}
}, [isLoading, data?.memberships])
function handleSelectChange(
callback: Dispatch<SetStateAction<ComparisonLevel>>
@@ -105,13 +148,13 @@ export default function OverviewTable() {
name="benefitA"
label={intl.formatMessage({ id: "Level" })}
items={levelOptions}
defaultSelectedKey={selectedLevelA.tier}
onSelect={handleSelectChange(setSelectedLevelA)}
value={selectedLevelAMobile.tier}
onSelect={handleSelectChange(setSelectedLevelAMobile)}
/>
<Image
className={styles.icon}
src={defaultLevelA.icon}
alt={defaultLevelA.name}
src={selectedLevelAMobile.icon}
alt={selectedLevelAMobile.name}
height={50}
width={100}
/>
@@ -119,7 +162,7 @@ export default function OverviewTable() {
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelA.tier
(level) => level.tier === selectedLevelAMobile.tier
) as ComparisonLevel
}
/>
@@ -129,13 +172,13 @@ export default function OverviewTable() {
name="benefitB"
label={intl.formatMessage({ id: "Level" })}
items={levelOptions}
defaultSelectedKey={selectedLevelB.tier}
onSelect={handleSelectChange(setSelectedLevelB)}
value={selectedLevelBMobile.tier}
onSelect={handleSelectChange(setSelectedLevelBMobile)}
/>
<Image
className={styles.icon}
src={defaultLevelB.icon}
alt={defaultLevelB.name}
src={selectedLevelBMobile.icon}
alt={selectedLevelBMobile.name}
height={50}
width={100}
/>
@@ -143,13 +186,13 @@ export default function OverviewTable() {
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelB.tier
(level) => level.tier === selectedLevelBMobile.tier
) as ComparisonLevel
}
/>
</div>
</div>
<BenefitList levels={[selectedLevelA, selectedLevelB]} />
<BenefitList levels={[selectedLevelAMobile, selectedLevelBMobile]} />
</div>
<div className={styles.columns}>
<div className={styles.columnHeaderContainer}>
@@ -158,13 +201,13 @@ export default function OverviewTable() {
name="benefitA"
label={intl.formatMessage({ id: "Level" })}
items={levelOptions}
defaultSelectedKey={selectedLevelA.tier}
onSelect={handleSelectChange(setSelectedLevelA)}
value={selectedLevelADesktop.tier}
onSelect={handleSelectChange(setSelectedLevelADesktop)}
/>
<Image
className={styles.icon}
src={defaultLevelA.icon}
alt={defaultLevelA.name}
src={selectedLevelADesktop.icon}
alt={selectedLevelADesktop.name}
height={50}
width={100}
/>
@@ -172,7 +215,7 @@ export default function OverviewTable() {
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelA.tier
(level) => level.tier === selectedLevelADesktop.tier
) as ComparisonLevel
}
/>
@@ -182,13 +225,13 @@ export default function OverviewTable() {
name="benefitB"
label={intl.formatMessage({ id: "Level" })}
items={levelOptions}
defaultSelectedKey={selectedLevelB.tier}
onSelect={handleSelectChange(setSelectedLevelB)}
value={selectedLevelBDesktop.tier}
onSelect={handleSelectChange(setSelectedLevelBDesktop)}
/>
<Image
className={styles.icon}
src={defaultLevelB.icon}
alt={defaultLevelB.name}
src={selectedLevelBDesktop.icon}
alt={selectedLevelBDesktop.name}
height={50}
width={100}
/>
@@ -196,7 +239,7 @@ export default function OverviewTable() {
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelB.tier
(level) => level.tier === selectedLevelBDesktop.tier
) as ComparisonLevel
}
/>
@@ -206,13 +249,13 @@ export default function OverviewTable() {
name="benefitC"
label={intl.formatMessage({ id: "Level" })}
items={levelOptions}
defaultSelectedKey={selectedLevelC.tier}
onSelect={handleSelectChange(setSelectedLevelC)}
value={selectedLevelCDesktop.tier}
onSelect={handleSelectChange(setSelectedLevelCDesktop)}
/>
<Image
className={styles.icon}
src={defaultLevelC.icon}
alt={defaultLevelC.name}
src={selectedLevelCDesktop.icon}
alt={selectedLevelCDesktop.name}
height={50}
width={100}
/>
@@ -220,14 +263,18 @@ export default function OverviewTable() {
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelC.tier
(level) => level.tier === selectedLevelCDesktop.tier
) as ComparisonLevel
}
/>
</div>
</div>
<BenefitList
levels={[selectedLevelA, selectedLevelB, selectedLevelC]}
levels={[
selectedLevelADesktop,
selectedLevelBDesktop,
selectedLevelCDesktop,
]}
/>
</div>
<div className={styles.largeTableContainer}>

4
components/MyPages/Blocks/Overview/Buttons/CopyButton.tsx
View File

@@ -2,11 +2,13 @@
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import { getMembership } from "@/utils/user"
import type { User } from "@/types/user"
export default function CopyButton({ membership }: Pick<User, "membership">) {
export default function CopyButton({ memberships }: Pick<User, "memberships">) {
function handleCopy() {
const membership = getMembership(memberships)
console.log(`COPIED! (${membership ? membership.membershipNumber : "N/A"})`)
}

4
components/MyPages/Blocks/Overview/Friend/index.tsx
View File

@@ -2,6 +2,7 @@ import { GoodFriend } from "@/components/Levels"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user"
import styles from "./friend.module.css"
@@ -9,6 +10,7 @@ import type { UserProps } from "@/types/components/myPages/user"
export default async function Friend({ user }: UserProps) {
const { formatMessage } = await getIntl()
const membership = getMembership(user.memberships)
return (
<section className={styles.friend}>
<header className={styles.header}>
@@ -26,7 +28,7 @@ export default async function Friend({ user }: UserProps) {
{formatMessage({ id: "Membership ID" })}:
</p>
<p className={styles.membershipId}>
{user.membership ? user.membership.membershipNumber : "N/A"}
{membership ? membership.membershipNumber : "N/A"}
</p>
</div>
</div>

6
components/MyPages/Blocks/Overview/Stats/Points/index.tsx
View File

@@ -1,5 +1,6 @@
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user"
import Label from "../Label"
@@ -9,18 +10,19 @@ import type { UserProps } from "@/types/components/myPages/user"
export default async function Points({ user }: UserProps) {
const { formatMessage } = await getIntl()
const membership = getMembership(user.memberships)
return (
<section className={styles.points}>
<article>
<Label>{formatMessage({ id: "Total Points" })}</Label>
<Title color="pale" level="h2">
{user.membership ? user.membership.currentPoints : "N/A"}
{membership ? membership.currentPoints : "N/A"}
</Title>
</article>
<article>
<Label>{formatMessage({ id: "Points until next level" })}</Label>
<Title color="pale" level="h2">
{user.membership ? user.membership.currentPoints : "N/A"}
{membership ? membership.currentPoints : "N/A"}
</Title>
</article>
</section>

6
components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx
View File

@@ -1,7 +1,10 @@
import { get } from "http"
import { serverClient } from "@/lib/trpc/server"
import Header from "@/components/MyPages/Blocks/Header"
import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user"
import styles from "./currentPointsBalance.module.css"
@@ -15,6 +18,7 @@ async function CurrentPointsBalance({
}: AccountPageComponentProps) {
const user = await serverClient().user.get()
const { formatMessage } = await getIntl()
const membership = getMembership(user.memberships)
return (
<div>
<Header title={title} link={link} subtitle={subtitle} />
@@ -23,7 +27,7 @@ async function CurrentPointsBalance({
<h2>{`${formatMessage({ id: "Total points" })}*`}</h2>
<p
className={styles.points}
>{`${formatMessage({ id: "Points" })}: ${user.membership?.currentPoints || "N/A"}`}</p>
>{`${formatMessage({ id: "Points" })}: ${membership?.currentPoints || "N/A"}`}</p>
<p className={styles.disclaimer}>
{`*${formatMessage({ id: "Points may take up to 10 days to be displayed." })}`}
</p>

9
constants/membershipLevels.ts Normal file
View File

@@ -0,0 +1,9 @@
export enum membershipLevels {
L1 = 1,
L2 = 2,
L3 = 3,
L4 = 4,
L5 = 5,
L6 = 6,
L7 = 7,
}

10
server/routers/user/output.ts
View File

@@ -1,5 +1,7 @@
import { z } from "zod"
import { membershipLevels } from "@/constants/membershipLevels"
import { countriesMap } from "@/components/TempDesignSystem/Form/Country/countries"
export const getUserSchema = z.object({
@@ -14,14 +16,16 @@ export const getUserSchema = z.object({
firstName: z.string(),
language: z.string(),
lastName: z.string(),
membership: z
.object({
memberships: z.array(
z.object({
currentPoints: z.number(),
expirationDate: z.string(),
membershipNumber: z.string(),
membershipLevel: z.enum(["L1", "L2", "L3", "L4", "L5", "L6", "L7"]),
memberSince: z.string(),
membershipType: z.string(),
})
.optional(),
),
phoneNumber: z.string(),
profileId: z.string(),
})

7
utils/user.ts Normal file
View File

@@ -0,0 +1,7 @@
import { User } from "@/types/user"
export function getMembership(memberships: User["memberships"]) {
return memberships?.find(
(membership) => membership.membershipType.toLowerCase() === "guestpr"
)
}