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

refactor: improve level selection logic

Browse Source
This commit is contained in:
Arvid Norlin
2024-06-07 15:54:56 +02:00
parent 24810eaee6
commit af205451e6
4 changed files with 165 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,11 @@
"use client"
import { Dispatch, SetStateAction, useEffect, useState } from "react"
import { useReducer } 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"
@@ -20,7 +19,11 @@ import OverviewTableTitle from "./Title"
import styles from "./overviewTable.module.css"
import { ComparisonLevel } from "@/types/components/loyalty/blocks"
import {
ComparisonLevel,
OverviewTableProps,
} from "@/types/components/loyalty/blocks"
import { User } from "@/types/user"
// These should ultimately be fetched from Contentstack
const titleTranslations = {
@@ -51,75 +54,102 @@ const titleTranslations = {
],
}
enum actions {
SET_SELECTED_LEVEL_A_MOBILE = "SET_SELECTED_LEVEL_A_MOBILE",
SET_SELECTED_LEVEL_B_MOBILE = "SET_SELECTED_LEVEL_B_MOBILE",
SET_SELECTED_LEVEL_A_DESKTOP = "SET_SELECTED_LEVEL_A_DESKTOP",
SET_SELECTED_LEVEL_B_DESKTOP = "SET_SELECTED_LEVEL_B_DESKTOP",
SET_SELECTED_LEVEL_C_DESKTOP = "SET_SELECTED_LEVEL_C_DESKTOP",
}
function getLevelByTier(tier: number) {
return levelsData.levels.find(
(level) => level.tier === tier
) as ComparisonLevel
}
export default function OverviewTable() {
const intl = useIntl()
// 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 [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))
}
function getInitialState(user?: User) {
const membership = user?.memberships ? getMembership(user.memberships) : null
if (!membership) {
return {
selectedLevelAMobile: getLevelByTier(1),
selectedLevelBMobile: getLevelByTier(2),
selectedLevelADesktop: getLevelByTier(1),
selectedLevelBDesktop: getLevelByTier(2),
selectedLevelCDesktop: getLevelByTier(3),
}
}, [isLoading, data?.memberships])
}
const tier = membershipLevels[membership.membershipLevel]
function handleSelectChange(
callback: Dispatch<SetStateAction<ComparisonLevel>>
) {
switch (tier) {
case 6:
return {
selectedLevelAMobile: getLevelByTier(6),
selectedLevelBMobile: getLevelByTier(7),
selectedLevelADesktop: getLevelByTier(5),
selectedLevelBDesktop: getLevelByTier(6),
selectedLevelCDesktop: getLevelByTier(7),
}
case 7:
return {
selectedLevelAMobile: getLevelByTier(6),
selectedLevelBMobile: getLevelByTier(7),
selectedLevelADesktop: getLevelByTier(6),
selectedLevelBDesktop: getLevelByTier(7),
selectedLevelCDesktop: getLevelByTier(1),
}
default:
return {
selectedLevelAMobile: getLevelByTier(tier),
selectedLevelBMobile: getLevelByTier(tier + 1),
selectedLevelADesktop: getLevelByTier(tier),
selectedLevelBDesktop: getLevelByTier(tier + 1),
selectedLevelCDesktop: getLevelByTier(tier + 2),
}
}
}
function reducer(state: any, action: any) {
switch (action.type) {
case actions.SET_SELECTED_LEVEL_A_MOBILE:
return {
...state,
selectedLevelAMobile: action.payload,
}
case actions.SET_SELECTED_LEVEL_B_MOBILE:
return {
...state,
selectedLevelBMobile: action.payload,
}
case actions.SET_SELECTED_LEVEL_A_DESKTOP:
return {
...state,
selectedLevelADesktop: action.payload,
}
case actions.SET_SELECTED_LEVEL_B_DESKTOP:
return {
...state,
selectedLevelBDesktop: action.payload,
}
case actions.SET_SELECTED_LEVEL_C_DESKTOP:
return {
...state,
selectedLevelCDesktop: action.payload,
}
default:
return state
}
}
export default function OverviewTable({ user }: OverviewTableProps) {
const intl = useIntl()
const [selectionState, dispatch] = useReducer(reducer, user, getInitialState)
function handleSelectChange(actionType: string) {
return (key: Key) => {
if (typeof key === "number") {
const level = getLevelByTier(key)
callback(level)
dispatch({ payload: getLevelByTier(key), type: actionType })
}
}
}
@@ -148,13 +178,13 @@ export default function OverviewTable() {
name="benefitA"
label={intl.formatMessage({ id: "Level" })}
items={levelOptions}
value={selectedLevelAMobile.tier}
onSelect={handleSelectChange(setSelectedLevelAMobile)}
value={selectionState.selectedLevelAMobile.tier}
onSelect={handleSelectChange(actions.SET_SELECTED_LEVEL_A_MOBILE)}
/>
<Image
className={styles.icon}
src={selectedLevelAMobile.icon}
alt={selectedLevelAMobile.name}
src={selectionState.selectedLevelAMobile.icon}
alt={selectionState.selectedLevelAMobile.name}
height={50}
width={100}
/>
@@ -162,7 +192,8 @@ export default function OverviewTable() {
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelAMobile.tier
(level) =>
level.tier === selectionState.selectedLevelAMobile.tier
) as ComparisonLevel
}
/>
@@ -172,13 +203,13 @@ export default function OverviewTable() {
name="benefitB"
label={intl.formatMessage({ id: "Level" })}
items={levelOptions}
value={selectedLevelBMobile.tier}
onSelect={handleSelectChange(setSelectedLevelBMobile)}
value={selectionState.selectedLevelBMobile.tier}
onSelect={handleSelectChange(actions.SET_SELECTED_LEVEL_B_MOBILE)}
/>
<Image
className={styles.icon}
src={selectedLevelBMobile.icon}
alt={selectedLevelBMobile.name}
src={selectionState.selectedLevelBMobile.icon}
alt={selectionState.selectedLevelBMobile.name}
height={50}
width={100}
/>
@@ -186,13 +217,19 @@ export default function OverviewTable() {
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelBMobile.tier
(level) =>
level.tier === selectionState.selectedLevelBMobile.tier
) as ComparisonLevel
}
/>
</div>
</div>
<BenefitList levels={[selectedLevelAMobile, selectedLevelBMobile]} />
<BenefitList
levels={[
selectionState.selectedLevelAMobile,
selectionState.selectedLevelBMobile,
]}
/>
</div>
<div className={styles.columns}>
<div className={styles.columnHeaderContainer}>
@@ -201,13 +238,15 @@ export default function OverviewTable() {
name="benefitA"
label={intl.formatMessage({ id: "Level" })}
items={levelOptions}
value={selectedLevelADesktop.tier}
onSelect={handleSelectChange(setSelectedLevelADesktop)}
value={selectionState.selectedLevelADesktop.tier}
onSelect={handleSelectChange(
actions.SET_SELECTED_LEVEL_A_DESKTOP
)}
/>
<Image
className={styles.icon}
src={selectedLevelADesktop.icon}
alt={selectedLevelADesktop.name}
src={selectionState.selectedLevelADesktop.icon}
alt={selectionState.selectedLevelADesktop.name}
height={50}
width={100}
/>
@@ -215,7 +254,8 @@ export default function OverviewTable() {
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelADesktop.tier
(level) =>
level.tier === selectionState.selectedLevelADesktop.tier
) as ComparisonLevel
}
/>
@@ -225,13 +265,15 @@ export default function OverviewTable() {
name="benefitB"
label={intl.formatMessage({ id: "Level" })}
items={levelOptions}
value={selectedLevelBDesktop.tier}
onSelect={handleSelectChange(setSelectedLevelBDesktop)}
value={selectionState.selectedLevelBDesktop.tier}
onSelect={handleSelectChange(
actions.SET_SELECTED_LEVEL_B_DESKTOP
)}
/>
<Image
className={styles.icon}
src={selectedLevelBDesktop.icon}
alt={selectedLevelBDesktop.name}
src={selectionState.selectedLevelBDesktop.icon}
alt={selectionState.selectedLevelBDesktop.name}
height={50}
width={100}
/>
@@ -239,7 +281,8 @@ export default function OverviewTable() {
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelBDesktop.tier
(level) =>
level.tier === selectionState.selectedLevelBDesktop.tier
) as ComparisonLevel
}
/>
@@ -249,13 +292,15 @@ export default function OverviewTable() {
name="benefitC"
label={intl.formatMessage({ id: "Level" })}
items={levelOptions}
value={selectedLevelCDesktop.tier}
onSelect={handleSelectChange(setSelectedLevelCDesktop)}
value={selectionState.selectedLevelCDesktop.tier}
onSelect={handleSelectChange(
actions.SET_SELECTED_LEVEL_C_DESKTOP
)}
/>
<Image
className={styles.icon}
src={selectedLevelCDesktop.icon}
alt={selectedLevelCDesktop.name}
src={selectionState.selectedLevelCDesktop.icon}
alt={selectionState.selectedLevelCDesktop.name}
height={50}
width={100}
/>
@@ -263,7 +308,8 @@ export default function OverviewTable() {
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelCDesktop.tier
(level) =>
level.tier === selectionState.selectedLevelCDesktop.tier
) as ComparisonLevel
}
/>
@@ -271,9 +317,9 @@ export default function OverviewTable() {
</div>
<BenefitList
levels={[
selectedLevelADesktop,
selectedLevelBDesktop,
selectedLevelCDesktop,
selectionState.selectedLevelADesktop,
selectionState.selectedLevelBDesktop,
selectionState.selectedLevelCDesktop,
]}
/>
</div>

14
components/Loyalty/Blocks/DynamicContent/index.tsx
View File

@@ -14,14 +14,14 @@ import type {
} from "@/types/components/loyalty/blocks"
import { LoyaltyComponentEnum } from "@/types/components/loyalty/enums"
function DynamicComponentBlock({ component }: DynamicComponentProps) {
function DynamicComponentBlock({ component, user }: DynamicComponentProps) {
switch (component) {
case LoyaltyComponentEnum.how_it_works:
return <HowItWorks />
case LoyaltyComponentEnum.loyalty_levels:
return <LoyaltyLevels />
case LoyaltyComponentEnum.overview_table:
return <OverviewTable />
return <OverviewTable user={user} />
default:
return null
}
@@ -29,6 +29,7 @@ function DynamicComponentBlock({ component }: DynamicComponentProps) {
export default function DynamicContent({
dynamicContent,
user,
}: DynamicContentProps) {
const displayHeader = !!(
dynamicContent.title ||
@@ -52,7 +53,14 @@ export default function DynamicContent({
</Subtitle>
</header>
) : null}
<DynamicComponentBlock component={dynamicContent.component} />
{dynamicContent.component === LoyaltyComponentEnum.overview_table ? (
<DynamicComponentBlock
component={dynamicContent.component}
user={user}
/>
) : (
<DynamicComponentBlock component={dynamicContent.component} />
)}
</section>
)
}

13
components/Loyalty/Blocks/index.tsx
View File

@@ -1,3 +1,5 @@
import { serverClient } from "@/lib/trpc/server"
import JsonToHtml from "@/components/JsonToHtml"
import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"
import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
@@ -7,7 +9,9 @@ import CardsGrid from "./CardsGrid"
import type { BlocksProps } from "@/types/components/loyalty/blocks"
import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"
export function Blocks({ blocks }: BlocksProps) {
export async function Blocks({ blocks }: BlocksProps) {
const user = await serverClient().user.get()
console.log({ user })
return blocks.map((block) => {
switch (block.__typename) {
case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
@@ -20,7 +24,12 @@ export function Blocks({ blocks }: BlocksProps) {
</section>
)
case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
return <DynamicContentBlock dynamicContent={block.dynamic_content} />
return (
<DynamicContentBlock
dynamicContent={block.dynamic_content}
user={user}
/>
)
case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
return (
<Shortcuts

6
types/components/loyalty/blocks.ts
View File

@@ -8,16 +8,20 @@ import {
import type { IntlFormatters } from "@formatjs/intl"
import { User } from "@/types/user"
export type BlocksProps = {
blocks: Block[]
}
export type DynamicContentProps = {
dynamicContent: DynamicContent["dynamic_content"]
user?: User
}
export type DynamicComponentProps = {
component: DynamicContent["dynamic_content"]["component"]
user?: User
}
export type CardsGridProps = Pick<CardsGrid, "cards_grid">
@@ -33,6 +37,8 @@ type OverviewTableTitleTranslation = {
export type OverviewTableTitleProps = { texts: OverviewTableTitleTranslation[] }
export type OverviewTableProps = { user?: User }
export type Level = {
tier: number
name: string