Files
web/components/Loyalty/Blocks/DynamicContent/index.tsx
2024-06-24 12:09:14 +02:00

100 lines
2.9 KiB
TypeScript

import { Lang } from "@/constants/languages"
import { serverClient } from "@/lib/trpc/server"
import { auth } from "@/auth"
import SectionContainer from "@/components/Section/Container"
import Header from "@/components/Section/Header"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import OverviewTableTitle from "./OverviewTable/Title"
import HowItWorks from "./HowItWorks"
import LoyaltyLevels from "./LoyaltyLevels"
import OverviewTable from "./OverviewTable"
import styles from "./dynamicContent.module.css"
import type {
DynamicComponentProps,
DynamicContentProps,
} from "@/types/components/loyalty/blocks"
import { LoyaltyComponentEnum } from "@/types/components/loyalty/enums"
async function DynamicComponentBlock({ component }: DynamicComponentProps) {
const session = await auth()
const user = session ? await serverClient().user.get() : null
switch (component) {
case LoyaltyComponentEnum.how_it_works:
return <HowItWorks />
case LoyaltyComponentEnum.loyalty_levels:
return <LoyaltyLevels />
case LoyaltyComponentEnum.overview_table:
return <OverviewTable user={user} />
default:
return null
}
}
// These should ultimately be fetched from Contentstack
const titleTranslations = {
[Lang.en]: [
{ text: "7 delightful levels", highlight: true },
{ text: "of friendship", highlight: false },
],
// TODO: Add translations for the following languages
[Lang.da]: [
{ text: "7 delightful levels", highlight: true },
{ text: "of friendship", highlight: false },
],
[Lang.no]: [
{ text: "7 delightful levels", highlight: true },
{ text: "of friendship", highlight: false },
],
[Lang.sv]: [
{ text: "7 delightful levels", highlight: true },
{ text: "of friendship", highlight: false },
],
[Lang.fi]: [
{ text: "7 delightful levels", highlight: true },
{ text: "of friendship", highlight: false },
],
[Lang.de]: [
{ text: "7 delightful levels", highlight: true },
{ text: "of friendship", highlight: false },
],
}
export default function DynamicContent({
dynamicContent,
firstItem,
}: DynamicContentProps) {
const displayHeader = !!(
dynamicContent.link ||
dynamicContent.subtitle ||
dynamicContent.title
)
const isOverviewTable =
dynamicContent.component === LoyaltyComponentEnum.overview_table
return (
<SectionContainer className={styles.container}>
{isOverviewTable ? (
<div className={styles.header}>
<OverviewTableTitle texts={titleTranslations[Lang.en]} />
<Subtitle>{dynamicContent.subtitle}</Subtitle>
</div>
) : displayHeader ? (
<Header
link={dynamicContent.link}
subtitle={dynamicContent.subtitle}
title={dynamicContent.title}
topTitle={firstItem}
/>
) : null}
<DynamicComponentBlock component={dynamicContent.component} />
</SectionContainer>
)
}