From b7fd51aac9eb44ef247d4c88b2d14e24ccb60709 Mon Sep 17 00:00:00 2001
From: Amri Toufali <amri@handsomemedia.com>
Date: Fri, 10 Apr 2026 13:05:49 -0700
Subject: [PATCH] fix(settings): missing signin token code title

---
 .../src/components/CardHeader/index.test.tsx        | 13 ++++++++++++-
 .../src/components/CardHeader/index.tsx             |  8 +++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/fxa-settings/src/components/CardHeader/index.test.tsx b/packages/fxa-settings/src/components/CardHeader/index.test.tsx
index 4ce34531b6a..79d7f344211 100644
--- a/packages/fxa-settings/src/components/CardHeader/index.test.tsx
+++ b/packages/fxa-settings/src/components/CardHeader/index.test.tsx
@@ -87,6 +87,15 @@ describe('CardHeader', () => {
     ).toBeInTheDocument();
   });
 
+  it('falls back to default heading when cmsHeadline is null (Strapi unset field)', () => {
+    renderWithLocalizationProvider(
+      <CardHeader headingText={MOCK_HEADING} cmsHeadline={null} />
+    );
+    expect(
+      screen.getByRole('heading', { name: MOCK_HEADING })
+    ).toBeInTheDocument();
+  });
+
   it('falls back to default heading when only description is provided (no headline)', () => {
     renderWithLocalizationProvider(
       <CardHeader
@@ -113,7 +122,9 @@ describe('CardHeader', () => {
     expect(
       screen.getByRole('heading', { name: MOCK_HEADING })
     ).toBeInTheDocument();
-    expect(screen.queryByAltText(MOCK_CMS_LOGO_ALT_TEXT)).not.toBeInTheDocument();
+    expect(
+      screen.queryByAltText(MOCK_CMS_LOGO_ALT_TEXT)
+    ).not.toBeInTheDocument();
   });
 
   it('renders CMS header with default font size', () => {
diff --git a/packages/fxa-settings/src/components/CardHeader/index.tsx b/packages/fxa-settings/src/components/CardHeader/index.tsx
index 2aee07aa6e7..61ce3a21b28 100644
--- a/packages/fxa-settings/src/components/CardHeader/index.tsx
+++ b/packages/fxa-settings/src/components/CardHeader/index.tsx
@@ -51,7 +51,7 @@ interface CardHeaderBasicWithDefaultSubheadingProps
 interface CardHeaderCmsProps extends CardHeaderRequiredProps {
   cmsLogoUrl?: string;
   cmsLogoAltText?: string;
-  cmsHeadline?: string;
+  cmsHeadline?: string | null;
   cmsDescription?: string;
   cmsHeadlineFontSize?: HeadlineFontSize | string | null;
   cmsHeadlineTextColor?: string | null;
@@ -111,7 +111,7 @@ function isDefaultService(
 }
 
 function isCmsHeader(props: CardHeaderProps): props is CardHeaderCmsProps {
-  return (props as CardHeaderCmsProps).cmsHeadline !== undefined;
+  return !!(props as CardHeaderCmsProps).cmsHeadline;
 }
 
 function isBasicWithCustomSubheading(
@@ -215,9 +215,7 @@ const CardHeader = (props: CardHeaderProps) => {
         >
           {cmsHeadline}
         </h1>
-        {cmsDescription && (
-          <p className="card-subheader">{cmsDescription}</p>
-        )}
+        {cmsDescription && <p className="card-subheader">{cmsDescription}</p>}
       </>
     );
   }