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

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>
+  )
+}

apps/scandic-web/components/Blocks/DynamicContent/MyPagesOverviewShortcuts/myPagesOverviewShortcuts.module.css

@@ -0,0 +1,22 @@
+.section {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--Space-x4);
+}
+
+@media (min-width: 768px) {
+  .section {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--Space-x2);
+  }
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.shortcuts {
+  flex: 1;
+}

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

@@ -4,6 +4,7 @@ import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent"
 
 import HowItWorks from "@/components/Blocks/DynamicContent/HowItWorks"
 import LoyaltyLevels from "@/components/Blocks/DynamicContent/LoyaltyLevels"
+import MyPagesOverviewShortcuts from "@/components/Blocks/DynamicContent/MyPagesOverviewShortcuts"
 import Overview from "@/components/Blocks/DynamicContent/Overview"
 import OverviewTable from "@/components/Blocks/DynamicContent/OverviewTable"
 import EarnAndBurn from "@/components/Blocks/DynamicContent/Points/EarnAndBurn"
@@ -49,6 +50,8 @@ function DynamicContentBlocks(props: DynamicContentProps) {
       return <LoyaltyLevels dynamic_content={dynamic_content} />
     case DynamicContentEnum.Blocks.components.membership_overview:
       return <Overview {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.my_pages_overview_shortcuts:
+      return <MyPagesOverviewShortcuts />
     case DynamicContentEnum.Blocks.components.next_benefits:
       return <NextLevelRewardsBlock {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.overview_table:

apps/scandic-web/constants/webHrefs.ts

@@ -38,6 +38,15 @@ export const faq: LangRoute = {
   sv: `/${Lang.sv}/scandic-friends/hjalp-och-service/faq`,
 }
 
+export const partners: LangRoute = {
+  da: `/${Lang.da}/scandic-friends/partnere`,
+  de: `/${Lang.de}/scandic-friends/partner`,
+  en: `/${Lang.en}/scandic-friends/partners`,
+  fi: `/${Lang.fi}/scandic-friends/yhteistyokumppanit`,
+  no: `/${Lang.no}/scandic-friends/partnere`,
+  sv: `/${Lang.sv}/scandic-friends/partners`,
+}
+
 export const privacyPolicy: LangRoute = {
   da: `/${Lang.da}/kundeservice/politikker/privatliv`,
   de: `/${Lang.de}/kundenbetreuung/richtlinien/datenschutz`,

packages/trpc/lib/types/dynamicContent.ts

@@ -11,6 +11,7 @@ export namespace DynamicContentEnum {
       jobylon_feed: "jobylon_feed",
       loyalty_levels: "loyalty_levels",
       membership_overview: "membership_overview",
+      my_pages_overview_shortcuts: "my_pages_overview_shortcuts",
       my_points: "my_points",
       next_benefits: "next_benefits",
       overview_table: "overview_table",