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/DigitalTeamMemberCard/EmployeeBenefits/AuthCard/authCard.module.css

@@ -0,0 +1,3 @@
+.card {
+  border: 1px solid var(--Base-Border-Subtle);
+}

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

@@ -0,0 +1,44 @@
+import { login } from "@/constants/routes/handleAuth"
+import { signup } from "@/constants/routes/signup"
+
+import { auth } from "@/auth"
+import Card from "@/components/TempDesignSystem/Card"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+import { isValidSession } from "@/utils/session"
+
+import styles from "./authCard.module.css"
+
+export default async function EmployeeBenefitsAuthCard() {
+  const session = await auth()
+  const intl = await getIntl()
+
+  const lang = getLang()
+
+  if (isValidSession(session)) {
+    return null
+  }
+
+  return (
+    <Card
+      className={styles.card}
+      scriptedTopTitle={intl.formatMessage({
+        defaultMessage: "Let’s be friends!",
+      })}
+      heading={intl.formatMessage({
+        defaultMessage: "Join our loyalty program today!",
+      })}
+      primaryButton={{
+        href: login[lang],
+        title: intl.formatMessage({ defaultMessage: "Log in" }),
+        openInNewTab: false,
+      }}
+      secondaryButton={{
+        href: signup[lang],
+        title: intl.formatMessage({ defaultMessage: "Sign up" }),
+        openInNewTab: false,
+      }}
+      theme="primaryInverted"
+    />
+  )
+}

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