feat(SW-66, SW-348): search functionality and ui
This commit is contained in:
Simon Emanuelsson
279
components/Blocks/DynamicContent/OverviewTable/Client.tsx
Normal file
279
components/Blocks/DynamicContent/OverviewTable/Client.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
"use client"
|
||||
|
||||
import { useReducer } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Lang } from "@/constants/languages"
|
||||
import { membershipLevels } from "@/constants/membershipLevels"
|
||||
|
||||
import Image from "@/components/Image"
|
||||
import Select from "@/components/TempDesignSystem/Select"
|
||||
import useLang from "@/hooks/useLang"
|
||||
import { getMembership } 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 YourLevel from "./YourLevelScript"
|
||||
|
||||
import styles from "./overviewTable.module.css"
|
||||
|
||||
import type { Key } from "react-aria-components"
|
||||
|
||||
import {
|
||||
ComparisonLevel,
|
||||
DesktopSelectColumns,
|
||||
type MobileColumnHeaderProps,
|
||||
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 getTranslatedLevel(membershipLevel: membershipLevels, lang: Lang) {
|
||||
return levelsTranslations[lang].levels.find(
|
||||
(level) => level.level === membershipLevel
|
||||
) as ComparisonLevel
|
||||
}
|
||||
|
||||
function getInitialState({ user, lang }: { user?: User; lang: Lang }) {
|
||||
const membership = user?.memberships ? getMembership(user.memberships) : null
|
||||
if (!membership?.membershipLevel) {
|
||||
return {
|
||||
selectedLevelAMobile: getTranslatedLevel(1, lang),
|
||||
selectedLevelBMobile: getTranslatedLevel(2, lang),
|
||||
selectedLevelADesktop: getTranslatedLevel(1, lang),
|
||||
selectedLevelBDesktop: getTranslatedLevel(2, lang),
|
||||
selectedLevelCDesktop: getTranslatedLevel(3, lang),
|
||||
}
|
||||
}
|
||||
if (!membership.membershipLevel) return null
|
||||
// @ts-expect-error: membership levels needs proper fix
|
||||
const level = membershipLevels[membership.membershipLevel]
|
||||
|
||||
switch (level) {
|
||||
case 6:
|
||||
return {
|
||||
selectedLevelAMobile: getTranslatedLevel(6, lang),
|
||||
selectedLevelBMobile: getTranslatedLevel(7, lang),
|
||||
selectedLevelADesktop: getTranslatedLevel(5, lang),
|
||||
selectedLevelBDesktop: getTranslatedLevel(6, lang),
|
||||
selectedLevelCDesktop: getTranslatedLevel(7, lang),
|
||||
}
|
||||
case 7:
|
||||
return {
|
||||
selectedLevelAMobile: getTranslatedLevel(6, lang),
|
||||
selectedLevelBMobile: getTranslatedLevel(7, lang),
|
||||
selectedLevelADesktop: getTranslatedLevel(6, lang),
|
||||
selectedLevelBDesktop: getTranslatedLevel(7, lang),
|
||||
selectedLevelCDesktop: getTranslatedLevel(1, lang),
|
||||
}
|
||||
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),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reducer(state: any, action: OverviewTableReducerAction) {
|
||||
switch (action.type) {
|
||||
case overviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE:
|
||||
return {
|
||||
...state,
|
||||
selectedLevelAMobile: action.payload,
|
||||
}
|
||||
case overviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE:
|
||||
return {
|
||||
...state,
|
||||
selectedLevelBMobile: action.payload,
|
||||
}
|
||||
case overviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP:
|
||||
return {
|
||||
...state,
|
||||
selectedLevelADesktop: action.payload,
|
||||
}
|
||||
case overviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP:
|
||||
return {
|
||||
...state,
|
||||
selectedLevelBDesktop: action.payload,
|
||||
}
|
||||
case overviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP:
|
||||
return {
|
||||
...state,
|
||||
selectedLevelCDesktop: action.payload,
|
||||
}
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
export default function OverviewTableClient({
|
||||
activeMembership,
|
||||
}: OverviewTableClientProps) {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
const levelsData = levelsTranslations[lang]
|
||||
const [selectionState, dispatch] = useReducer(
|
||||
reducer,
|
||||
{ activeMembership, lang },
|
||||
getInitialState
|
||||
)
|
||||
|
||||
function handleSelectChange(actionType: overviewTableActionsEnum) {
|
||||
return (key: Key) => {
|
||||
if (typeof key === "number") {
|
||||
dispatch({
|
||||
payload: getTranslatedLevel(key, lang),
|
||||
type: actionType,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const levelOptions = levelsData.levels.map((level) => ({
|
||||
label: [level.level, level.name].join(" "),
|
||||
value: level.level,
|
||||
}))
|
||||
|
||||
let activeMembershipLevel: membershipLevels | null = null
|
||||
if (activeMembership?.membershipLevel) {
|
||||
// @ts-expect-error: membershiplevel needs proper fix
|
||||
activeMembershipLevel = membershipLevels[activeMembership?.membershipLevel]
|
||||
}
|
||||
|
||||
function MobileColumnHeader({ column }: MobileColumnHeaderProps) {
|
||||
let selectedLevelMobile: ComparisonLevel
|
||||
let actionEnumMobile: overviewTableActionsEnum
|
||||
switch (column) {
|
||||
case "A":
|
||||
selectedLevelMobile = selectionState.selectedLevelAMobile
|
||||
actionEnumMobile = overviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE
|
||||
break
|
||||
case "B":
|
||||
selectedLevelMobile = selectionState.selectedLevelBMobile
|
||||
actionEnumMobile = overviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE
|
||||
break
|
||||
default:
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<div className={styles.columnHeader}>
|
||||
<div className={styles.icon}>
|
||||
{activeMembershipLevel === selectedLevelMobile.level ? (
|
||||
<YourLevel />
|
||||
) : null}
|
||||
<Image
|
||||
src={selectedLevelMobile.icon}
|
||||
alt={selectedLevelMobile.name}
|
||||
height={50}
|
||||
width={100}
|
||||
/>
|
||||
</div>
|
||||
<LevelSummary
|
||||
level={
|
||||
levelsData.levels.find(
|
||||
(level) => level.level === selectedLevelMobile.level
|
||||
) as ComparisonLevel
|
||||
}
|
||||
showDescription={false}
|
||||
/>
|
||||
<Select
|
||||
aria-label={intl.formatMessage({ id: "Level" })}
|
||||
name={`benefit` + column}
|
||||
label={intl.formatMessage({ id: "Level" })}
|
||||
items={levelOptions}
|
||||
value={selectedLevelMobile.level}
|
||||
onSelect={handleSelectChange(actionEnumMobile)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectDesktop({ column }: DesktopSelectColumns) {
|
||||
let selectedLevelDesktop: ComparisonLevel
|
||||
let actionEnumDesktop: overviewTableActionsEnum
|
||||
switch (column) {
|
||||
case "A":
|
||||
selectedLevelDesktop = selectionState.selectedLevelADesktop
|
||||
actionEnumDesktop =
|
||||
overviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP
|
||||
break
|
||||
case "B":
|
||||
selectedLevelDesktop = selectionState.selectedLevelBDesktop
|
||||
actionEnumDesktop =
|
||||
overviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP
|
||||
break
|
||||
case "C":
|
||||
selectedLevelDesktop = selectionState.selectedLevelCDesktop
|
||||
actionEnumDesktop =
|
||||
overviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP
|
||||
break
|
||||
default:
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<Select
|
||||
aria-label={intl.formatMessage({ id: "Level" })}
|
||||
name={`benefit` + column}
|
||||
label={intl.formatMessage({ id: "Level" })}
|
||||
items={levelOptions}
|
||||
value={selectedLevelDesktop.level}
|
||||
onSelect={handleSelectChange(actionEnumDesktop)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.mobileColumns}>
|
||||
<div className={styles.columnHeaderContainer}>
|
||||
<MobileColumnHeader column={"A"} />
|
||||
<MobileColumnHeader column={"B"} />
|
||||
</div>
|
||||
<BenefitList
|
||||
levels={[
|
||||
selectionState.selectedLevelAMobile,
|
||||
selectionState.selectedLevelBMobile,
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.columns}>
|
||||
<LargeTable
|
||||
levels={[
|
||||
selectionState.selectedLevelADesktop,
|
||||
selectionState.selectedLevelBDesktop,
|
||||
selectionState.selectedLevelCDesktop,
|
||||
]}
|
||||
activeLevel={activeMembershipLevel}
|
||||
Select={SelectDesktop}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.largeTableContainer}>
|
||||
{/* Remove `as` once we have real data */}
|
||||
<LargeTable
|
||||
levels={levelsData.levels as ComparisonLevel[]}
|
||||
activeLevel={activeMembershipLevel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user