Merged in LOY-188-employee-benefit-call-to-actions (pull request #1954)

feat(LOY-188): dynamic content support in content pages headers & use in DTMC employee benefits page

* feat(LOY-188): add dynamic content handling for DTMC employee benefits page header

* fix(LOY-188): change section to div in EmployeeBenefitsCallToActions component

* refactor(LOY-188): switch to ButtonLink

* refactor(LOY-188): replace enum with as const objects in DynamicContentEnum

* chore(LOY-188): change ComponentValue type exports to internal scope in DynamicContentEnum

* fix(EmployeeBenefitsCallToActions): replace div with fragment

* chore(LOY-188): update translations


Approved-by: Christian Andolf

apps/scandic-web/components/ContentType/StaticPages/index.tsx

@@ -2,6 +2,7 @@ import Link from "next/link"
 import { Suspense } from "react"
 
 import Blocks from "@/components/Blocks"
+import HeaderDynamicContent from "@/components/Headers/DynamicContent"
 import Hero from "@/components/Hero"
 import MeetingPackageWidget from "@/components/MeetingPackageWidget"
 import Sidebar from "@/components/Sidebar"
@@ -52,6 +53,9 @@ export default async function StaticPage({
                 {header.navigation_links ? (
                   <LinkChips chips={header.navigation_links} />
                 ) : null}
+                {"dynamic_content" in header && header.dynamic_content ? (
+                  <HeaderDynamicContent {...header.dynamic_content} />
+                ) : null}
               </>
             ) : null}
           </div>

apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/callToActions.module.css

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--Spacing-x-one-and-half);
+  padding-bottom: var(--Spacing-x3);
+}

apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx

@@ -0,0 +1,71 @@
+import React from "react"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { login } from "@/constants/routes/handleAuth"
+import { signup } from "@/constants/routes/signup"
+
+import { auth } from "@/auth"
+import ButtonLink from "@/components/ButtonLink"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+import { isValidSession } from "@/utils/session"
+
+import styles from "./callToActions.module.css"
+
+export default async function EmployeeBenefitsCallToActions() {
+  const session = await auth()
+  const intl = await getIntl()
+  const lang = getLang()
+
+  if (!isValidSession(session)) {
+    return (
+      <>
+        <div className={styles.container}>
+          <Typography variant="Body/Paragraph/mdBold">
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "Already a Scandic Friends account?",
+              })}
+            </p>
+          </Typography>
+          <ButtonLink href={login[lang]} size="Medium" variant="Tertiary">
+            {intl.formatMessage({
+              defaultMessage: "Log in and link employment",
+            })}
+          </ButtonLink>
+        </div>
+
+        <div className={styles.container}>
+          <Typography variant="Body/Paragraph/mdBold">
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "Don't have a Scandic Friends account yet?",
+              })}
+            </p>
+          </Typography>
+          <ButtonLink href={signup[lang]} size="Medium" variant="Secondary">
+            {intl.formatMessage({
+              defaultMessage: "Sign up and link employment",
+            })}
+          </ButtonLink>
+        </div>
+      </>
+    )
+  }
+
+  // -- TODO [LOY-196] --
+  // Handle case of authed user and already connected work account.
+  // Show member card modal.
+
+  return (
+    <div className={styles.container}>
+      {/*/ TODO [LOY-229]: Update href once we have new auth url. */}
+      <ButtonLink href="#" size="Medium" variant="Tertiary" color="Primary">
+        {intl.formatMessage({
+          defaultMessage: "Link Employment",
+        })}
+      </ButtonLink>
+    </div>
+  )
+}

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

@@ -0,0 +1,27 @@
+import { Suspense } from "react"
+
+import EmployeeBenefitsCallToActions from "@/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions"
+import LoadingSpinner from "@/components/LoadingSpinner"
+
+import type { HeaderDynamicContentProps } from "@/types/components/headers/dynamicContent"
+import { DynamicContentEnum } from "@/types/enums/dynamicContent"
+
+export default function HeaderDynamicContent(props: HeaderDynamicContentProps) {
+  return (
+    <Suspense fallback={<LoadingSpinner />}>
+      <HeaderDynamicContentComponent {...props} />
+    </Suspense>
+  )
+}
+
+function HeaderDynamicContentComponent(props: HeaderDynamicContentProps) {
+  const { component } = props
+
+  switch (component) {
+    case DynamicContentEnum.Headers.components
+      .dtmc_employee_benefits_call_to_actions:
+      return <EmployeeBenefitsCallToActions />
+    default:
+      return null
+  }
+}

apps/scandic-web/components/Sidebar/index.tsx

@@ -1,9 +1,9 @@
+import EmployeeBenefitsAuthCard from "@/components/DigitalTeamMemberCard/EmployeeBenefits/AuthCard"
 import JsonToHtml from "@/components/JsonToHtml"
 
 import ShortcutsList from "../Blocks/ShortcutsList"
 import Card from "../TempDesignSystem/Card"
 import TeaserCard from "../TempDesignSystem/TeaserCard"
-import EmployeeBenefitsAuthCard from "./EmployeeBenefits/AuthCard"
 import JoinLoyaltyContact from "./JoinLoyalty"
 import MyPagesNavigation from "./MyPagesNavigation"