web/apps/scandic-web/components/Blocks/DynamicContent/MyPagesOverviewShortcuts/index.tsx

import * as webHrefs from "@/constants/webHrefs"
import { serverClient } from "@/lib/trpc/server"

import ShortcutsListItems from "@/components/Blocks/ShortcutsList/ShortcutsListItems"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

import styles from "./myPagesOverviewShortcuts.module.css"

import type { MyPagesLinkKey } from "@scandic-hotels/trpc/routers/navigation/mypages/MyPagesLink"

export default async function MyPagesOverviewShortcuts() {
  const intl = await getIntl()
  const lang = await getLang()
  const caller = await serverClient()

  const MyPagesLinkTranslationMap: Record<MyPagesLinkKey, string> = {
    overview: intl.formatMessage({
      defaultMessage: "Overview",
    }),
    points: intl.formatMessage({
      defaultMessage: "My points",
    }),
    stays: intl.formatMessage({
      defaultMessage: "My stays",
    }),
    benefits: intl.formatMessage({
      defaultMessage: "My benefits",
    }),
    partnerSas: intl.formatMessage({
      defaultMessage: "SAS EuroBonus",
    }),
    teamMemberCard: intl.formatMessage({
      defaultMessage: "Team Member Card",
    }),
    scandicFriends: intl.formatMessage({
      defaultMessage: "About Scandic Friends",
    }),
    profile: intl.formatMessage({
      defaultMessage: "My profile",
    }),
  }

  const navigation = await caller.navigation.myPages({ lang })

  const buildMembershipShortcuts = (nav: typeof navigation) => {
    if (!nav) return []

    return [
      ...nav.primaryLinks
        .filter((link) => link.key !== "overview")
        .map((link) => ({
          openInNewTab: false,
          text: MyPagesLinkTranslationMap[link.key],
          title: MyPagesLinkTranslationMap[link.key],
          url: link.href,
        })),
      ...nav.secondaryLinks
        .filter((link) => link.key === "profile")
        .map((link) => ({
          openInNewTab: false,
          text: MyPagesLinkTranslationMap[link.key],
          title: MyPagesLinkTranslationMap[link.key],
          url: link.href,
        })),
    ]
  }

  const buildFriendsShortcuts = (nav: typeof navigation) => {
    if (!nav) return []

    return [
      ...nav.secondaryLinks
        .filter((link) => link.key === "scandicFriends")
        .map((link) => ({
          openInNewTab: false,
          text: MyPagesLinkTranslationMap[link.key],
          title: MyPagesLinkTranslationMap[link.key],
          url: link.href,
        })),
      {
        openInNewTab: false,
        text: intl.formatMessage({ defaultMessage: "Partner benefits" }),
        title: intl.formatMessage({ defaultMessage: "Partner benefits" }),
        url: webHrefs.partners[lang],
      },
      {
        openInNewTab: false,
        text: intl.formatMessage({ defaultMessage: "Scandic Friends FAQ" }),
        title: intl.formatMessage({ defaultMessage: "Scandic Friends FAQ" }),
        url: webHrefs.faq[lang],
      },
    ]
  }

  const membershipShortcuts = buildMembershipShortcuts(navigation)
  const scandicFriendsShortcuts = buildFriendsShortcuts(navigation)

  return (
    <SectionContainer>
      <section className={styles.section}>
        <div className={styles.column}>
          <SectionHeader
            title={intl.formatMessage({
              defaultMessage: "Your Membership",
            })}
            headingAs="h4"
            headingLevel="h3"
          />
          <ShortcutsListItems
            shortcutsListItems={membershipShortcuts}
            className={styles.shortcuts}
          />
        </div>
        <div className={styles.column}>
          <SectionHeader
            title={intl.formatMessage({
              defaultMessage: "Scandic Friends Links",
            })}
            headingAs="h4"
            headingLevel="h3"
          />
          <ShortcutsListItems
            shortcutsListItems={scandicFriendsShortcuts}
            className={styles.shortcuts}
          />
        </div>
      </section>
    </SectionContainer>
  )
}