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 { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header/Deprecated"
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({
      id: "common.overview",
      defaultMessage: "Overview",
    }),
    points: intl.formatMessage({
      id: "common.myPoints",
      defaultMessage: "My points",
    }),
    stays: intl.formatMessage({
      id: "common.myStays",
      defaultMessage: "My stays",
    }),
    benefits: intl.formatMessage({
      id: "common.myBenefits",
      defaultMessage: "My benefits",
    }),
    partnerSas: intl.formatMessage({
      id: "partnerSas.sasEuroBonus",
      defaultMessage: "SAS EuroBonus",
    }),
    teamMemberCard: intl.formatMessage({
      id: "common.teamMemberCard",
      defaultMessage: "Team Member Card",
    }),
    scandicFriends: intl.formatMessage({
      id: "common.aboutScandicFriends",
      defaultMessage: "About Scandic Friends",
    }),
    profile: intl.formatMessage({
      id: "common.myProfile",
      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({
          id: "myPagesOverviewShortcuts.partnerBenefits",
          defaultMessage: "Partner benefits",
        }),
        title: intl.formatMessage({
          id: "myPagesOverviewShortcuts.partnerBenefits",
          defaultMessage: "Partner benefits",
        }),
        url: webHrefs.partners[lang],
      },
      {
        openInNewTab: false,
        text: intl.formatMessage({
          id: "common.scandicFriendsFaq",
          defaultMessage: "Scandic Friends FAQ",
        }),
        title: intl.formatMessage({
          id: "common.scandicFriendsFaq",
          defaultMessage: "Scandic Friends FAQ",
        }),
        url: webHrefs.faq[lang],
      },
    ]
  }

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

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