Merged in feat/LOY-264-My-Pages-Overview-Shortcuts (pull request #2672)

Feat(LOY-264): My Pages Overview Shortcuts * feat(LOY-264): Add My Pages Shortcuts Overview Dynamic Content Component * fix(LOY-264): more semantic naming + remove comments * fix(LOY-264): new space variables * fix(LOY-264): remove unused prop Approved-by: Matilda Landström
2025-08-20 09:06:25 +00:00
parent 789818eefd
commit 720a1c2734
5 changed files with 168 additions and 0 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/MyPagesOverviewShortcuts/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/MyPagesOverviewShortcuts/index.tsx
@@ -0,0 +1,133 @@
+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>
+  )
+}