From 6537613000bf28273e8106635cb9af98f6ab6e4d Mon Sep 17 00:00:00 2001
From: Victor Jack <67293106+thedon-dev@users.noreply.github.com>
Date: Tue, 11 Aug 2026 14:31:58 +0100
Subject: [PATCH] fix: preserve landing page section content when toggled off
 (#838)

* preserve section content when toggled off

* Update types.ts

* Remove comment on LandingPageLinks enabled property

Removed comment about the default visibility of the section.

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
---
 README.md                                     |   2 +-
 .../lib/features/org/utils/landing-page.ts    |   7 ++
 .../landingpage-editor/callout-section.svelte |  16 +--
 .../landingpage-editor/embed-section.svelte   | 115 +++++++++---------
 .../landingpage-editor/links-section.svelte   |  23 ++--
 apps/dashboard/src/lib/utils/types/org.ts     |   3 +
 packages/ui/README.md                         |  22 ++--
 .../custom/org-landing-page/callout.svelte    |   2 +-
 .../src/custom/org-landing-page/embed.svelte  |   2 +-
 .../src/custom/org-landing-page/links.svelte  |   2 +-
 .../custom/org-landing-page/saas/org.svelte   |   6 +-
 .../ui/src/custom/org-landing-page/types.ts   |   3 +
 12 files changed, 102 insertions(+), 101 deletions(-)

diff --git a/README.md b/README.md
index 1f44e7ce..6d057128 100644
--- a/README.md
+++ b/README.md
@@ -168,7 +168,7 @@ The repository also contains shared packages under `packages/` (for example `pac
      PUBLIC_SERVER_URL="http://localhost:3002"
      PRIVATE_SERVER_URL="http://localhost:3002"      # used by the SSR auth proxy — required, or login returns "API upstream not configured"
      PRIVATE_SERVER_KEY="<generate-with-openssl-rand-hex-32>"   # must match the API (paste the value generated above)
-     PUBLIC_IS_SELFHOSTED=true
+     PUBLIC_IS_SELFHOSTED=false
      ```
 
    - Running the background workers? Also create `apps/jobs/.env` (e.g. `cp apps/api/.env apps/jobs/.env`); it needs `REDIS_URL`. The `packages/db/.env` used by the DB scripts is set up in step 6.
diff --git a/apps/dashboard/src/lib/features/org/utils/landing-page.ts b/apps/dashboard/src/lib/features/org/utils/landing-page.ts
index 06866f30..c8c491f7 100644
--- a/apps/dashboard/src/lib/features/org/utils/landing-page.ts
+++ b/apps/dashboard/src/lib/features/org/utils/landing-page.ts
@@ -125,6 +125,7 @@ type LegacyLandingPageJson = {
   footerText?: string;
   theme?: OrgLandingPageTheme;
   embed?: {
+    enabled?: boolean;
     title?: string;
     description?: string;
     code?: string;
@@ -138,6 +139,7 @@ type LegacyLandingPageJson = {
     sandbox?: string;
   };
   callout?: {
+    enabled?: boolean;
     heading?: string;
     description?: string;
     action?: {
@@ -413,6 +415,7 @@ function normalizeCallout(callout: NonNullable<LegacyLandingPageJson['callout']>
   }
 
   return {
+    enabled: callout.enabled !== false,
     heading,
     description: normalizeText(callout.description, ''),
     action: {
@@ -468,6 +471,7 @@ function normalizeLinks(raw: unknown): OrgLandingPageLinks | undefined {
   const classicLearnMoreLabel = normalizeText(raw.classicLearnMoreLabel, '');
 
   return {
+    enabled: raw.enabled !== false,
     heading,
     description: description || undefined,
     boldVisitLabel: boldVisitLabel || undefined,
@@ -541,6 +545,7 @@ export function normalizeLandingPageSettings(value: unknown): OrgLandingPageJson
       footer: resolveFooterConfig(landingPage),
       embed: landingPage.embed
         ? {
+            enabled: landingPage.embed.enabled !== false,
             title: normalizeText(landingPage.embed.title, 'Section title'),
             description: normalizeText(landingPage.embed.description, ''),
             code: normalizeEmbedCode(landingPage.embed),
@@ -587,6 +592,7 @@ export function normalizeLandingPageSettings(value: unknown): OrgLandingPageJson
       footer: resolveFooterConfig(landingPage),
       embed: landingPage.embed
         ? {
+            enabled: landingPage.embed.enabled !== false,
             title: normalizeText(landingPage.embed.title, 'Section title'),
             description: normalizeText(landingPage.embed.description, ''),
             code: normalizeEmbedCode(landingPage.embed)
@@ -624,6 +630,7 @@ export function normalizeLandingPageSettings(value: unknown): OrgLandingPageJson
     footer: resolveFooterConfig(landingPage),
     embed: landingPage.embed
       ? {
+          enabled: landingPage.embed.enabled !== false,
           title: normalizeText(landingPage.embed.title, 'Section title'),
           description: normalizeText(landingPage.embed.description, ''),
           code: normalizeEmbedCode(landingPage.embed),
diff --git a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/callout-section.svelte b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/callout-section.svelte
index 2aab3a38..f2c3fd9f 100644
--- a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/callout-section.svelte
+++ b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/callout-section.svelte
@@ -33,6 +33,7 @@
     }
 
     const callout: OrgLandingPageCallout = {
+      enabled: true,
       heading: t.get('settings.landing_page.editor.callout.heading_default'),
       description: '',
       action: {
@@ -51,16 +52,7 @@
   }
 
   function setCalloutEnabled(enabled: boolean) {
-    if (!enabled) {
-      settings = {
-        ...settings,
-        callout: undefined
-      };
-      markDirty();
-      return;
-    }
-
-    setter(ensureCallout(), 'callout');
+    setter({ ...ensureCallout(), enabled }, 'callout');
   }
 </script>
 
@@ -71,13 +63,13 @@
     <div class="space-y-6">
       <Field.Field orientation="horizontal">
         <Switch
-          checked={Boolean(settings.callout)}
+          checked={settings.callout?.enabled ?? false}
           onCheckedChange={(checked) => setCalloutEnabled(checked === true)}
         />
         <Field.Label>{$t('settings.landing_page.editor.callout.toggle')}</Field.Label>
       </Field.Field>
 
-      {#if settings.callout}
+      {#if settings.callout?.enabled}
         <Field.Field>
           <div class="flex items-center justify-between">
             <Field.Label>{$t('settings.landing_page.editor.callout.heading')}</Field.Label>
diff --git a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/embed-section.svelte b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/embed-section.svelte
index 1d93fbc0..5e6981bc 100644
--- a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/embed-section.svelte
+++ b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/embed-section.svelte
@@ -34,6 +34,7 @@
     }
 
     const embed = {
+      enabled: true,
       title: t.get('settings.landing_page.editor.embed.title'),
       description: '',
       code: '',
@@ -50,16 +51,7 @@
   }
 
   function setEmbedEnabled(enabled: boolean) {
-    if (!enabled) {
-      settings = {
-        ...settings,
-        embed: undefined
-      };
-      markDirty();
-      return;
-    }
-
-    setter(ensureEmbed(), 'embed');
+    setter({ ...ensureEmbed(), enabled }, 'embed');
   }
 
   function updateSecondaryAction(label: string, href: string) {
@@ -83,63 +75,68 @@
 
     <div class="space-y-6">
       <Field.Field orientation="horizontal">
-        <Switch checked={Boolean(settings.embed)} onCheckedChange={(checked) => setEmbedEnabled(checked === true)} />
+        <Switch
+          checked={settings.embed?.enabled ?? false}
+          onCheckedChange={(checked) => setEmbedEnabled(checked === true)}
+        />
         <Field.Label>{$t('settings.landing_page.editor.embed.toggle')}</Field.Label>
       </Field.Field>
 
-      {#if settings.embed}
-        <Field.Field>
-          <div class="flex items-center justify-between">
-            <Field.Label>{$t('settings.landing_page.editor.embed.title')}</Field.Label>
-            <AIGenerateButton
-              context="the embed section title on an organization's course platform landing page"
-              onInsert={(text) => setter(text, 'embed.title')}
+      {#if settings.embed?.enabled}
+        <div class="pb-5">
+          <Field.Field>
+            <div class="flex items-center justify-between">
+              <Field.Label>{$t('settings.landing_page.editor.embed.title')}</Field.Label>
+              <AIGenerateButton
+                context="the embed section title on an organization's course platform landing page"
+                onInsert={(text) => setter(text, 'embed.title')}
+              />
+            </div>
+            <Input
+              value={settings.embed.title}
+              placeholder={$t('settings.landing_page.editor.embed.title_placeholder')}
+              oninput={(event) => setter(event.currentTarget.value, 'embed.title')}
             />
-          </div>
-          <Input
-            value={settings.embed.title}
-            placeholder={$t('settings.landing_page.editor.embed.title_placeholder')}
-            oninput={(event) => setter(event.currentTarget.value, 'embed.title')}
-          />
-        </Field.Field>
+          </Field.Field>
 
-        <Field.Field class="min-w-0">
-          <div class="flex items-center justify-between">
-            <Field.Label>{$t('settings.landing_page.editor.embed.description')}</Field.Label>
-            <AIGenerateButton
-              context="the embed section description on an organization's course platform landing page"
-              onInsert={(text) => setter(text, 'embed.description')}
+          <Field.Field class="min-w-0">
+            <div class="flex items-center justify-between">
+              <Field.Label>{$t('settings.landing_page.editor.embed.description')}</Field.Label>
+              <AIGenerateButton
+                context="the embed section description on an organization's course platform landing page"
+                onInsert={(text) => setter(text, 'embed.description')}
+              />
+            </div>
+            <Textarea
+              class="ui:[field-sizing:fixed] ui:min-w-0 ui:w-full ui:max-w-full ui:box-border ui:resize-y ui:break-all ui:overflow-x-auto"
+              value={settings.embed.description ?? ''}
+              placeholder={$t('settings.landing_page.editor.embed.description_placeholder')}
+              oninput={(event) => setter(event.currentTarget.value, 'embed.description')}
             />
-          </div>
-          <Textarea
-            class="ui:[field-sizing:fixed] ui:min-w-0 ui:w-full ui:max-w-full ui:box-border ui:resize-y ui:break-all ui:overflow-x-auto"
-            value={settings.embed.description ?? ''}
-            placeholder={$t('settings.landing_page.editor.embed.description_placeholder')}
-            oninput={(event) => setter(event.currentTarget.value, 'embed.description')}
-          />
-        </Field.Field>
+          </Field.Field>
 
-        <Field.Field class="min-w-0">
-          <Field.Label>{$t('settings.landing_page.editor.embed.code')}</Field.Label>
-          <Field.Description>{$t('settings.landing_page.editor.embed.code_description')}</Field.Description>
-          <Textarea
-            class="ui:[field-sizing:fixed] ui:min-w-0 ui:w-full ui:max-w-full ui:box-border ui:resize-y ui:break-all ui:overflow-x-auto"
-            value={settings.embed.code}
-            placeholder={$t('settings.landing_page.editor.embed.code_placeholder')}
-            oninput={(event) => setter(event.currentTarget.value, 'embed.code')}
-          />
-        </Field.Field>
+          <Field.Field class="min-w-0">
+            <Field.Label>{$t('settings.landing_page.editor.embed.code')}</Field.Label>
+            <Field.Description>{$t('settings.landing_page.editor.embed.code_description')}</Field.Description>
+            <Textarea
+              class="ui:[field-sizing:fixed] ui:min-w-0 ui:w-full ui:max-w-full ui:box-border ui:resize-y ui:break-all ui:overflow-x-auto"
+              value={settings.embed.code}
+              placeholder={$t('settings.landing_page.editor.embed.code_placeholder')}
+              oninput={(event) => setter(event.currentTarget.value, 'embed.code')}
+            />
+          </Field.Field>
 
-        <ButtonLinkFields
-          label={settings.embed.secondaryAction?.label ?? ''}
-          href={settings.embed.secondaryAction?.href ?? ''}
-          labelFieldLabel={$t('settings.landing_page.editor.embed.secondary_label')}
-          hrefFieldLabel={$t('settings.landing_page.editor.embed.secondary_href')}
-          labelPlaceholder={$t('settings.landing_page.editor.embed.secondary_label')}
-          hrefPlaceholder={$t('settings.landing_page.editor.embed.secondary_href')}
-          onLabelInput={(value) => updateSecondaryAction(value, settings.embed.secondaryAction?.href ?? '')}
-          onHrefInput={(value) => updateSecondaryAction(settings.embed.secondaryAction?.label ?? '', value)}
-        />
+          <ButtonLinkFields
+            label={settings.embed.secondaryAction?.label ?? ''}
+            href={settings.embed.secondaryAction?.href ?? ''}
+            labelFieldLabel={$t('settings.landing_page.editor.embed.secondary_label')}
+            hrefFieldLabel={$t('settings.landing_page.editor.embed.secondary_href')}
+            labelPlaceholder={$t('settings.landing_page.editor.embed.secondary_label')}
+            hrefPlaceholder={$t('settings.landing_page.editor.embed.secondary_href')}
+            onLabelInput={(value) => updateSecondaryAction(value, settings.embed.secondaryAction?.href ?? '')}
+            onHrefInput={(value) => updateSecondaryAction(settings.embed.secondaryAction?.label ?? '', value)}
+          />
+        </div>
       {/if}
     </div>
   </Field.Set>
diff --git a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/links-section.svelte b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/links-section.svelte
index cf35f0c2..75d9362a 100644
--- a/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/links-section.svelte
+++ b/apps/dashboard/src/lib/features/settings/pages/landingpage-editor/links-section.svelte
@@ -54,6 +54,7 @@
     }
 
     const links: NonNullable<OrgLandingPageJson['links']> = {
+      enabled: true,
       heading: t.get('settings.landing_page.editor.links.heading_default'),
       description: '',
       boldVisitLabel: t.get('settings.landing_page.editor.links.bold_visit_default'),
@@ -90,16 +91,11 @@
   }
 
   function setLinksEnabled(enabled: boolean) {
-    if (!enabled) {
-      settings = {
-        ...settings,
-        links: undefined
-      };
-      markDirty();
-      return;
-    }
-
-    ensureLinks();
+    settings = {
+      ...settings,
+      links: { ...ensureLinks(), enabled }
+    };
+    markDirty();
   }
 
   function addCard() {
@@ -137,11 +133,14 @@
 
     <div class="space-y-6">
       <Field.Field orientation="horizontal">
-        <Switch checked={Boolean(settings.links)} onCheckedChange={(checked) => setLinksEnabled(checked === true)} />
+        <Switch
+          checked={settings.links?.enabled ?? false}
+          onCheckedChange={(checked) => setLinksEnabled(checked === true)}
+        />
         <Field.Label>{$t('settings.landing_page.editor.links.toggle')}</Field.Label>
       </Field.Field>
 
-      {#if settings.links}
+      {#if settings.links?.enabled}
         <Field.Field>
           <Field.Label>{$t('settings.landing_page.editor.links.heading')}</Field.Label>
           <Input
diff --git a/apps/dashboard/src/lib/utils/types/org.ts b/apps/dashboard/src/lib/utils/types/org.ts
index 5591586d..eeecbc3c 100644
--- a/apps/dashboard/src/lib/utils/types/org.ts
+++ b/apps/dashboard/src/lib/utils/types/org.ts
@@ -50,6 +50,7 @@ export type OrgLandingPageFooterConfig = {
 };
 
 export interface OrgLandingPageEmbed {
+  enabled: boolean;
   title: string;
   description?: string;
   code: string;
@@ -60,6 +61,7 @@ export interface OrgLandingPageEmbed {
 }
 
 export interface OrgLandingPageCallout {
+  enabled: boolean;
   heading: string;
   description: string;
   action: {
@@ -88,6 +90,7 @@ export interface OrgLandingPageLinkCard {
 }
 
 export interface OrgLandingPageLinks {
+  enabled: boolean;
   heading: string;
   description?: string;
   boldVisitLabel?: string;
diff --git a/packages/ui/README.md b/packages/ui/README.md
index e03a1109..790d7b9b 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -152,17 +152,17 @@ Composable page shell used across dashboard list and settings screens. Import as
 
 The bar also sits at `z-50`, matching the editor root so it paints above editor content (later in DOM wins the tie) while staying below body-portaled dialogs and sheets. Its shadow appears only while it is pinned away from its flow position, tracked by an `IntersectionObserver` on a 1px sentinel rendered as its next sibling.
 
-| Prop           | Description                                              |
-| -------------- | -------------------------------------------------------- |
-| `hasChanges`   | Enables Save and Discard when the form is dirty          |
-| `loading`      | Shows loading state on Save                              |
-| `disabled`     | Disables Save only (e.g. while not initialized)          |
-| `contentClass` | Extra classes on the inner card (width, padding, etc.)   |
-| `statusLabel`  | Left-side status text (e.g. "Unsaved changes")           |
-| `discardLabel` | Discard button label                                     |
-| `saveLabel`    | Save button label                                        |
-| `onSave`       | Save handler                                             |
-| `onDiscard`    | Discard handler                                          |
+| Prop           | Description                                            |
+| -------------- | ------------------------------------------------------ |
+| `hasChanges`   | Enables Save and Discard when the form is dirty        |
+| `loading`      | Shows loading state on Save                            |
+| `disabled`     | Disables Save only (e.g. while not initialized)        |
+| `contentClass` | Extra classes on the inner card (width, padding, etc.) |
+| `statusLabel`  | Left-side status text (e.g. "Unsaved changes")         |
+| `discardLabel` | Discard button label                                   |
+| `saveLabel`    | Save button label                                      |
+| `onSave`       | Save handler                                           |
+| `onDiscard`    | Discard handler                                        |
 
 ```svelte
 <Page.Root>
diff --git a/packages/ui/src/custom/org-landing-page/callout.svelte b/packages/ui/src/custom/org-landing-page/callout.svelte
index ae01cab6..1604a1f2 100644
--- a/packages/ui/src/custom/org-landing-page/callout.svelte
+++ b/packages/ui/src/custom/org-landing-page/callout.svelte
@@ -107,7 +107,7 @@
   `;
 </script>
 
-{#if callout}
+{#if callout && callout.enabled !== false}
   <EditableLandingSection sectionKey="callout">
     <section
       class={sectionClasses[variant]}
diff --git a/packages/ui/src/custom/org-landing-page/embed.svelte b/packages/ui/src/custom/org-landing-page/embed.svelte
index e2f9a209..4550ab59 100644
--- a/packages/ui/src/custom/org-landing-page/embed.svelte
+++ b/packages/ui/src/custom/org-landing-page/embed.svelte
@@ -15,7 +15,7 @@
   } = $props();
 </script>
 
-{#if embed}
+{#if embed && embed.enabled !== false}
   <EditableLandingSection sectionKey="embed">
     {#if variant === 'terminal'}
       <section class="ui:py-24 ui:px-6" style="border-top: 1px solid #1c1f28; background: #06070a;">
diff --git a/packages/ui/src/custom/org-landing-page/links.svelte b/packages/ui/src/custom/org-landing-page/links.svelte
index e2c1418d..e2ca5ad0 100644
--- a/packages/ui/src/custom/org-landing-page/links.svelte
+++ b/packages/ui/src/custom/org-landing-page/links.svelte
@@ -33,7 +33,7 @@
   }
 </script>
 
-{#if links && links.cards.length > 0}
+{#if links && links.enabled !== false && links.cards.length > 0}
   <EditableLandingSection sectionKey="links">
     {#if variant === 'minimal'}
       <section class="ui:py-20 ui:px-4">
diff --git a/packages/ui/src/custom/org-landing-page/saas/org.svelte b/packages/ui/src/custom/org-landing-page/saas/org.svelte
index 9f59293c..e8c8e9c0 100644
--- a/packages/ui/src/custom/org-landing-page/saas/org.svelte
+++ b/packages/ui/src/custom/org-landing-page/saas/org.svelte
@@ -81,17 +81,17 @@
       </div>
     </section>
 
-    {#if links && links.cards.length > 0}
+    {#if links && links.enabled !== false && links.cards.length > 0}
       <div class="plus-row"></div>
       <OrgLandingPageLinks {links} {labels} variant="saas" />
     {/if}
 
-    {#if embed}
+    {#if embed && embed.enabled !== false}
       <div class="plus-row"></div>
       <OrgLandingPageEmbed {embed} {labels} variant="saas" />
     {/if}
 
-    {#if callout}
+    {#if callout && callout.enabled !== false}
       <div class="plus-row"></div>
       <OrgLandingPageCallout {callout} {labels} variant="saas" />
     {/if}
diff --git a/packages/ui/src/custom/org-landing-page/types.ts b/packages/ui/src/custom/org-landing-page/types.ts
index 6afec2c6..23656481 100644
--- a/packages/ui/src/custom/org-landing-page/types.ts
+++ b/packages/ui/src/custom/org-landing-page/types.ts
@@ -91,6 +91,7 @@ export type OrgLandingPageFooterConfig = {
   };
 };
 export type LandingPageEmbed = {
+  enabled?: boolean;
   title: string;
   description?: string;
   code: string;
@@ -101,6 +102,7 @@ export type LandingPageEmbed = {
 };
 
 export type LandingPageCallout = {
+  enabled?: boolean;
   heading: string;
   description: string;
   action: {
@@ -129,6 +131,7 @@ export type LandingPageLinkCard = {
 };
 
 export type LandingPageLinks = {
+  enabled?: boolean;
   heading: string;
   description?: string;
   /** Bold template card footer chip (e.g. Visit). */