feat(SW-353): dynamic rewards
This commit is contained in:
Christel Westerberg
@@ -3,23 +3,18 @@
|
||||
import { useReducer } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Lang } from "@/constants/languages"
|
||||
import { membershipLevels } from "@/constants/membershipLevels"
|
||||
import {
|
||||
MembershipLevel,
|
||||
MembershipLevelEnum,
|
||||
} from "@/constants/membershipLevels"
|
||||
|
||||
import Image from "@/components/Image"
|
||||
import MembershipLevelIcon from "@/components/Levels/Icon"
|
||||
import Select from "@/components/TempDesignSystem/Select"
|
||||
import useLang from "@/hooks/useLang"
|
||||
import { getMembership } from "@/utils/user"
|
||||
import { getSteppedUpLevel } from "@/utils/user"
|
||||
|
||||
import DA from "./data/DA.json"
|
||||
import DE from "./data/DE.json"
|
||||
import EN from "./data/EN.json"
|
||||
import FI from "./data/FI.json"
|
||||
import NO from "./data/NO.json"
|
||||
import SV from "./data/SV.json"
|
||||
import BenefitList from "./BenefitList"
|
||||
import LargeTable from "./LargeTable"
|
||||
import LevelSummary from "./LevelSummary"
|
||||
import RewardList from "./RewardList"
|
||||
import YourLevel from "./YourLevelScript"
|
||||
|
||||
import styles from "./overviewTable.module.css"
|
||||
@@ -29,94 +24,91 @@ import type { Key } from "react-aria-components"
|
||||
import {
|
||||
ComparisonLevel,
|
||||
DesktopSelectColumns,
|
||||
LevelWithRewards,
|
||||
type MobileColumnHeaderProps,
|
||||
overviewTableActionsEnum,
|
||||
OverviewTableActionsEnum,
|
||||
type OverviewTableClientProps,
|
||||
OverviewTableReducerAction,
|
||||
} from "@/types/components/overviewTable"
|
||||
import type { User } from "@/types/user"
|
||||
|
||||
const levelsTranslations = {
|
||||
[Lang.en]: EN,
|
||||
[Lang.sv]: SV,
|
||||
[Lang.no]: NO,
|
||||
[Lang.da]: DA,
|
||||
[Lang.fi]: FI,
|
||||
[Lang.de]: DE,
|
||||
function getLevelNamesForSelect(level: MembershipLevel, levelName: string) {
|
||||
const levelToNumber = MembershipLevelEnum[level]
|
||||
return [levelToNumber, levelName].join(" - ")
|
||||
}
|
||||
|
||||
function getTranslatedLevel(membershipLevel: membershipLevels, lang: Lang) {
|
||||
return levelsTranslations[lang].levels.find(
|
||||
(level) => level.level === membershipLevel
|
||||
) as ComparisonLevel
|
||||
function getLevel(
|
||||
membershipLevel: MembershipLevel,
|
||||
levels: LevelWithRewards[]
|
||||
) {
|
||||
return levels.find((level) => level.level_id === membershipLevel)!
|
||||
}
|
||||
|
||||
function getInitialState({ user, lang }: { user?: User; lang: Lang }) {
|
||||
const membership = user?.memberships ? getMembership(user.memberships) : null
|
||||
if (!membership?.membershipLevel) {
|
||||
function getInitialState({
|
||||
activeMembership,
|
||||
levels,
|
||||
}: OverviewTableClientProps) {
|
||||
if (!activeMembership) {
|
||||
return {
|
||||
selectedLevelAMobile: getTranslatedLevel(1, lang),
|
||||
selectedLevelBMobile: getTranslatedLevel(2, lang),
|
||||
selectedLevelADesktop: getTranslatedLevel(1, lang),
|
||||
selectedLevelBDesktop: getTranslatedLevel(2, lang),
|
||||
selectedLevelCDesktop: getTranslatedLevel(3, lang),
|
||||
selectedLevelAMobile: getLevel(MembershipLevelEnum.L1, levels),
|
||||
selectedLevelBMobile: getLevel(MembershipLevelEnum.L2, levels),
|
||||
selectedLevelADesktop: getLevel(MembershipLevelEnum.L1, levels),
|
||||
selectedLevelBDesktop: getLevel(MembershipLevelEnum.L2, levels),
|
||||
selectedLevelCDesktop: getLevel(MembershipLevelEnum.L3, levels),
|
||||
}
|
||||
}
|
||||
if (!membership.membershipLevel) return null
|
||||
// @ts-expect-error: membership levels needs proper fix
|
||||
const level = membershipLevels[membership.membershipLevel]
|
||||
const level = MembershipLevelEnum[activeMembership]
|
||||
|
||||
switch (level) {
|
||||
case 6:
|
||||
case MembershipLevelEnum.L6:
|
||||
return {
|
||||
selectedLevelAMobile: getTranslatedLevel(6, lang),
|
||||
selectedLevelBMobile: getTranslatedLevel(7, lang),
|
||||
selectedLevelADesktop: getTranslatedLevel(5, lang),
|
||||
selectedLevelBDesktop: getTranslatedLevel(6, lang),
|
||||
selectedLevelCDesktop: getTranslatedLevel(7, lang),
|
||||
selectedLevelAMobile: getLevel(MembershipLevelEnum.L6, levels),
|
||||
selectedLevelBMobile: getLevel(MembershipLevelEnum.L7, levels),
|
||||
selectedLevelADesktop: getLevel(MembershipLevelEnum.L5, levels),
|
||||
selectedLevelBDesktop: getLevel(MembershipLevelEnum.L6, levels),
|
||||
selectedLevelCDesktop: getLevel(MembershipLevelEnum.L7, levels),
|
||||
}
|
||||
case 7:
|
||||
case MembershipLevelEnum.L7:
|
||||
return {
|
||||
selectedLevelAMobile: getTranslatedLevel(6, lang),
|
||||
selectedLevelBMobile: getTranslatedLevel(7, lang),
|
||||
selectedLevelADesktop: getTranslatedLevel(6, lang),
|
||||
selectedLevelBDesktop: getTranslatedLevel(7, lang),
|
||||
selectedLevelCDesktop: getTranslatedLevel(1, lang),
|
||||
selectedLevelAMobile: getLevel(MembershipLevelEnum.L6, levels),
|
||||
selectedLevelBMobile: getLevel(MembershipLevelEnum.L7, levels),
|
||||
selectedLevelADesktop: getLevel(MembershipLevelEnum.L6, levels),
|
||||
selectedLevelBDesktop: getLevel(MembershipLevelEnum.L7, levels),
|
||||
selectedLevelCDesktop: getLevel(MembershipLevelEnum.L1, levels),
|
||||
}
|
||||
default:
|
||||
return {
|
||||
selectedLevelAMobile: getTranslatedLevel(level, lang),
|
||||
selectedLevelBMobile: getTranslatedLevel(level + 1, lang),
|
||||
selectedLevelADesktop: getTranslatedLevel(level, lang),
|
||||
selectedLevelBDesktop: getTranslatedLevel(level + 1, lang),
|
||||
selectedLevelCDesktop: getTranslatedLevel(level + 2, lang),
|
||||
selectedLevelAMobile: getLevel(level, levels),
|
||||
selectedLevelBMobile: getLevel(getSteppedUpLevel(level, 1), levels),
|
||||
selectedLevelADesktop: getLevel(level, levels),
|
||||
selectedLevelBDesktop: getLevel(getSteppedUpLevel(level, 1), levels),
|
||||
selectedLevelCDesktop: getLevel(getSteppedUpLevel(level, 2), levels),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reducer(state: any, action: OverviewTableReducerAction) {
|
||||
switch (action.type) {
|
||||
case overviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE:
|
||||
case OverviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE:
|
||||
return {
|
||||
...state,
|
||||
selectedLevelAMobile: action.payload,
|
||||
}
|
||||
case overviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE:
|
||||
case OverviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE:
|
||||
return {
|
||||
...state,
|
||||
selectedLevelBMobile: action.payload,
|
||||
}
|
||||
case overviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP:
|
||||
case OverviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP:
|
||||
return {
|
||||
...state,
|
||||
selectedLevelADesktop: action.payload,
|
||||
}
|
||||
case overviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP:
|
||||
case OverviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP:
|
||||
return {
|
||||
...state,
|
||||
selectedLevelBDesktop: action.payload,
|
||||
}
|
||||
case overviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP:
|
||||
case OverviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP:
|
||||
return {
|
||||
...state,
|
||||
selectedLevelCDesktop: action.payload,
|
||||
@@ -126,51 +118,45 @@ function reducer(state: any, action: OverviewTableReducerAction) {
|
||||
}
|
||||
}
|
||||
|
||||
export default function OverviewTableClient({
|
||||
export default function OverviewTable({
|
||||
activeMembership,
|
||||
levels,
|
||||
}: OverviewTableClientProps) {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
const levelsData = levelsTranslations[lang]
|
||||
|
||||
const [selectionState, dispatch] = useReducer(
|
||||
reducer,
|
||||
{ activeMembership, lang },
|
||||
{ activeMembership, levels },
|
||||
getInitialState
|
||||
)
|
||||
|
||||
function handleSelectChange(actionType: overviewTableActionsEnum) {
|
||||
function handleSelectChange(actionType: OverviewTableActionsEnum) {
|
||||
return (key: Key) => {
|
||||
if (typeof key === "number") {
|
||||
dispatch({
|
||||
payload: getTranslatedLevel(key, lang),
|
||||
type: actionType,
|
||||
})
|
||||
}
|
||||
dispatch({
|
||||
payload: getLevel(key as MembershipLevel, levels),
|
||||
type: actionType,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const levelOptions = levelsData.levels.map((level) => ({
|
||||
label: [level.level, level.name].join(" "),
|
||||
value: level.level,
|
||||
const levelOptions = levels.map((level) => ({
|
||||
label: getLevelNamesForSelect(level.level_id, level.name),
|
||||
value: level.level_id,
|
||||
}))
|
||||
|
||||
let activeMembershipLevel: membershipLevels | null = null
|
||||
if (activeMembership?.membershipLevel) {
|
||||
// @ts-expect-error: membershiplevel needs proper fix
|
||||
activeMembershipLevel = membershipLevels[activeMembership?.membershipLevel]
|
||||
}
|
||||
const activeMembershipLevel = activeMembership ?? null
|
||||
|
||||
function MobileColumnHeader({ column }: MobileColumnHeaderProps) {
|
||||
let selectedLevelMobile: ComparisonLevel
|
||||
let actionEnumMobile: overviewTableActionsEnum
|
||||
let actionEnumMobile: OverviewTableActionsEnum
|
||||
switch (column) {
|
||||
case "A":
|
||||
selectedLevelMobile = selectionState.selectedLevelAMobile
|
||||
actionEnumMobile = overviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE
|
||||
actionEnumMobile = OverviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE
|
||||
break
|
||||
case "B":
|
||||
selectedLevelMobile = selectionState.selectedLevelBMobile
|
||||
actionEnumMobile = overviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE
|
||||
actionEnumMobile = OverviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE
|
||||
break
|
||||
default:
|
||||
return null
|
||||
@@ -178,30 +164,30 @@ export default function OverviewTableClient({
|
||||
return (
|
||||
<div className={styles.columnHeader}>
|
||||
<div className={styles.icon}>
|
||||
{activeMembershipLevel === selectedLevelMobile.level ? (
|
||||
{activeMembershipLevel === selectedLevelMobile.level_id ? (
|
||||
<YourLevel />
|
||||
) : null}
|
||||
<Image
|
||||
src={selectedLevelMobile.icon}
|
||||
alt={selectedLevelMobile.name}
|
||||
height={50}
|
||||
width={100}
|
||||
<MembershipLevelIcon
|
||||
level={selectedLevelMobile.level_id}
|
||||
color="red"
|
||||
height="50"
|
||||
width="100"
|
||||
/>
|
||||
</div>
|
||||
<LevelSummary
|
||||
level={
|
||||
levelsData.levels.find(
|
||||
(level) => level.level === selectedLevelMobile.level
|
||||
) as ComparisonLevel
|
||||
levels.find(
|
||||
(level) => level.level_id === selectedLevelMobile.level_id
|
||||
)!
|
||||
}
|
||||
showDescription={false}
|
||||
/>
|
||||
<Select
|
||||
aria-label={intl.formatMessage({ id: "Level" })}
|
||||
name={`benefit` + column}
|
||||
name={`reward` + column}
|
||||
label={intl.formatMessage({ id: "Level" })}
|
||||
items={levelOptions}
|
||||
value={selectedLevelMobile.level}
|
||||
value={selectedLevelMobile.level_id}
|
||||
onSelect={handleSelectChange(actionEnumMobile)}
|
||||
/>
|
||||
</div>
|
||||
@@ -210,22 +196,22 @@ export default function OverviewTableClient({
|
||||
|
||||
function SelectDesktop({ column }: DesktopSelectColumns) {
|
||||
let selectedLevelDesktop: ComparisonLevel
|
||||
let actionEnumDesktop: overviewTableActionsEnum
|
||||
let actionEnumDesktop: OverviewTableActionsEnum
|
||||
switch (column) {
|
||||
case "A":
|
||||
selectedLevelDesktop = selectionState.selectedLevelADesktop
|
||||
actionEnumDesktop =
|
||||
overviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP
|
||||
OverviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP
|
||||
break
|
||||
case "B":
|
||||
selectedLevelDesktop = selectionState.selectedLevelBDesktop
|
||||
actionEnumDesktop =
|
||||
overviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP
|
||||
OverviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP
|
||||
break
|
||||
case "C":
|
||||
selectedLevelDesktop = selectionState.selectedLevelCDesktop
|
||||
actionEnumDesktop =
|
||||
overviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP
|
||||
OverviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP
|
||||
break
|
||||
default:
|
||||
return null
|
||||
@@ -233,15 +219,14 @@ export default function OverviewTableClient({
|
||||
return (
|
||||
<Select
|
||||
aria-label={intl.formatMessage({ id: "Level" })}
|
||||
name={`benefit` + column}
|
||||
name={`reward` + column}
|
||||
label={intl.formatMessage({ id: "Level" })}
|
||||
items={levelOptions}
|
||||
value={selectedLevelDesktop.level}
|
||||
value={selectedLevelDesktop.level_id}
|
||||
onSelect={handleSelectChange(actionEnumDesktop)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.mobileColumns}>
|
||||
@@ -249,7 +234,7 @@ export default function OverviewTableClient({
|
||||
<MobileColumnHeader column={"A"} />
|
||||
<MobileColumnHeader column={"B"} />
|
||||
</div>
|
||||
<BenefitList
|
||||
<RewardList
|
||||
levels={[
|
||||
selectionState.selectedLevelAMobile,
|
||||
selectionState.selectedLevelBMobile,
|
||||
@@ -268,11 +253,7 @@ export default function OverviewTableClient({
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.largeTableContainer}>
|
||||
{/* Remove `as` once we have real data */}
|
||||
<LargeTable
|
||||
levels={levelsData.levels as ComparisonLevel[]}
|
||||
activeLevel={activeMembershipLevel}
|
||||
/>
|
||||
<LargeTable levels={levels} activeLevel={activeMembershipLevel} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user