Merged in feat/LOY-201-Employee-benefits-auth-card-sidebar (pull request #1891)

Feat(LOY-201): Employee benefits auth card sidebar

* feat(LOY-201): WIP - add EmployeeBenefitsAuthCard component to Sidebar and update dynamic content enum

* feat(LOY-201): reorganize EmployeeBenefitsAuthCard

* chore: remove debug console logs from DynamicContent handling


Approved-by: Christian Andolf

apps/scandic-web/components/Sidebar/EmployeeBenefits/AuthCard/authCard.module.css

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

apps/scandic-web/components/Sidebar/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/Sidebar/JoinLoyalty/index.tsx

@@ -22,7 +22,6 @@ export default async function JoinLoyaltyContact({
 }: JoinLoyaltyContactProps) {
   const [intl, session] = await Promise.all([getIntl(), auth()])
 
-  // Check if we valid session, that means we are logged in.
   if (isValidSession(session)) {
     return null
   }

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

@@ -3,6 +3,7 @@ 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"
 
@@ -30,6 +31,11 @@ export default function Sidebar({ blocks }: SidebarProps) {
             switch (block.dynamic_content.component) {
               case DynamicContentEnum.Sidebar.components.my_pages_navigation:
                 return <MyPagesNavigation key={`${block.typename}-${idx}`} />
+              case DynamicContentEnum.Sidebar.components
+                .employee_benefits_auth_card:
+                return (
+                  <EmployeeBenefitsAuthCard key={`${block.typename}-${idx}`} />
+                )
               default:
                 return null
             }

apps/scandic-web/types/enums/dynamicContent.ts

@@ -49,9 +49,13 @@ export namespace DynamicContentEnum {
   export namespace Sidebar {
     export const enum components {
       my_pages_navigation = "my_pages_navigation",
+      employee_benefits_auth_card = "employee_benefits_auth_card",
     }
 
     /** Type needed to satisfy zod enum type */
-    export const enums: [string, ...string[]] = [components.my_pages_navigation]
+    export const enums: [string, ...string[]] = [
+      components.my_pages_navigation,
+      components.employee_benefits_auth_card,
+    ]
   }
 }