@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/src/utils/minify-brand-page-metadata.ts

@@ -1,5 +1,7 @@
 import {
   BRAND_PAGE_TYPES,
+  type AbstractPageFooterStyles,
+  type AbstractPageHeaderStyles,
   type BrandPageModel,
   type BrandPageType,
   type NavModel,
@@ -8,9 +10,43 @@ import {
 } from '../brand-page/models';
 import type { Content, ContentType } from '../brand-page/models/content.model';
 import type { TextStyleDeclaration } from '../brand-page/models/styles.model';
+import { hasRTEContent } from '../brand-page-maker/utils';
+import { useExternalRichTextEditor } from '../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+import type { Editor, JSONContent } from '@tiptap/vue-3';
+import { type AssetEntry, resolveLogoData } from './build-asset-manifest';
+
+type MinifiedFooterSocialLink = { imageUrl: string; url: string };
+
+type MinifiedFooter = {
+  displayStyle?: string;
+  copyrightText?: string;
+  isLogoVisible?: boolean;
+  logoImageHeight?: string;
+  logoImageWidth?: string;
+  logoAssetKey?: string;
+  socialLinks?: MinifiedFooterSocialLink[];
+};
 
-const stripHtmlTags = (html: string): string =>
-  html.replace(/<[^>]*>/g, '').trim();
+type MinifiedHeader = {
+  displayStyle?: string;
+  isLogoVisible?: boolean;
+  logoImageHeight?: string;
+  logoImageWidth?: string;
+  logoAssetKey?: string;
+  backgroundStyle?: { backgroundColor?: string };
+  navigation?: {
+    displayType?: string;
+    defaultButtonStyle?: { color?: string; fontFamily?: string };
+    selectedButtonStyle?: {
+      color?: string;
+      backgroundColor?: string;
+      borderColor?: string;
+    };
+    hamburgerMenuStyle?: {
+      iconStyle?: { color?: string; backgroundColor?: string };
+    };
+  };
+};
 
 type MinifiedContent = {
   id: string;
@@ -32,6 +68,12 @@ export interface MinifiedBrandPageMetadata {
   styles: PageStyles;
   pages: MinifiedPage[];
   nav: NavModel;
+  footer?: {
+    desktop?: MinifiedFooter;
+    mobile?: MinifiedFooter;
+  };
+  pageHeaderDesktop?: MinifiedHeader;
+  pageHeaderMobile?: MinifiedHeader;
 }
 
 const BUTTON_TYPES: ContentType[] = [
@@ -49,12 +91,31 @@ const BUTTON_TYPES: ContentType[] = [
   'tiktok',
 ];
 
-const stripOptional = (value: unknown): string | undefined => {
-  if (typeof value === 'string' && value) {
-    return stripHtmlTags(value);
+type RichTextValue = string | JSONContent;
+
+const convertText = (
+  value: unknown,
+  editor: Editor,
+): RichTextValue | undefined => {
+  if (typeof value !== 'string' || !value) return undefined;
+
+  if (hasRTEContent(value)) {
+    editor.commands.setContent(value);
+
+    return editor.getJSON();
   }
 
-  return undefined;
+  return value;
+};
+
+const st = (
+  key: string,
+  value: unknown,
+  editor: Editor,
+): Record<string, RichTextValue> | null => {
+  const result = convertText(value, editor);
+
+  return result !== undefined ? { [key]: result } : null;
 };
 
 const includeStyle = (value: unknown): TextStyleDeclaration | undefined => {
@@ -73,16 +134,100 @@ const includeString = (value: unknown): string | undefined => {
   return undefined;
 };
 
-const minifyContent = (content: Content): MinifiedContent => {
+type MinifiedCardStyle = {
+  backgroundColor?: string;
+  borderRadius?: string;
+  borderColor?: string;
+};
+
+/**
+ * Include cardStyle for sections that render a card overlay
+ * (banner, contact-form, testimonial, images, shapes). Only emits
+ * sub-fields that are actually set so the minified JSON stays lean.
+ */
+const includeCardStyle = (
+  value: unknown,
+): { cardStyle: MinifiedCardStyle } | null => {
+  if (!value || typeof value !== 'object') return null;
+
+  const style = value as Record<string, unknown>;
+  const result: MinifiedCardStyle = {};
+
+  if (typeof style.backgroundColor === 'string' && style.backgroundColor) {
+    result.backgroundColor = style.backgroundColor;
+  }
+
+  if (typeof style.borderRadius === 'string' && style.borderRadius) {
+    result.borderRadius = style.borderRadius;
+  }
+
+  if (typeof style.borderColor === 'string' && style.borderColor) {
+    result.borderColor = style.borderColor;
+  }
+
+  return Object.keys(result).length ? { cardStyle: result } : null;
+};
+
+/**
+ * Include `backgroundStyle.backgroundColor` for sections that paint a
+ * background. The minifier previously dropped this field, leaving the
+ * AI Color Agent with no per-section bg signal even when the raw
+ * metadata had one. Mirrors `includeCardStyle`: emits nothing when the
+ * value is missing or empty (the "transparent" sentinel).
+ */
+const includeBackgroundStyle = (
+  value: unknown,
+): { backgroundStyle: { backgroundColor: string } } | null => {
+  if (!value || typeof value !== 'object') return null;
+
+  const style = value as Record<string, unknown>;
+  const bg = style.backgroundColor;
+
+  if (typeof bg !== 'string' || !bg) return null;
+
+  return { backgroundStyle: { backgroundColor: bg } };
+};
+
+/**
+ * Look up an asset key from the manifest by matching the data content.
+ */
+const findAssetKey = (
+  assets: AssetEntry[] | undefined,
+  data: string | undefined,
+): string | undefined => {
+  if (!data || !assets) return undefined;
+
+  return assets.find((a) => a.data === data)?.key;
+};
+
+const minifyContent = (
+  content: Content,
+  editor: Editor,
+  assets?: AssetEntry[],
+): MinifiedContent => {
   const base: MinifiedContent = { id: content.id, type: content.type };
   const c = content as any;
 
+  // Helper: include imageUrl and its asset key if available
+  const includeImageWithKey = (
+    url: unknown,
+    urlField = 'imageUrl',
+    keyField = 'imageAssetKey',
+  ): Record<string, string> | null => {
+    if (typeof url !== 'string' || !url) return null;
+
+    const assetKey = findAssetKey(assets, url);
+
+    return {
+      [urlField]: url,
+      ...(assetKey && { [keyField]: assetKey }),
+    };
+  };
+
   if (BUTTON_TYPES.includes(content.type)) {
     return {
       ...base,
-      ...(stripOptional(c.title) !== undefined && {
-        title: stripOptional(c.title),
-      }),
+      ...st('title', c.title, editor),
       ...(includeString(c.url) && { url: c.url }),
       ...(includeStyle(c.titleStyle) && { titleStyle: c.titleStyle }),
     };
@@ -92,17 +237,17 @@ const minifyContent = (content: Content): MinifiedContent => {
     case 'banner-section':
       return {
         ...base,
-        ...(includeString(c.imageUrl) && { imageUrl: c.imageUrl }),
-        ...(stripOptional(c.title) !== undefined && {
-          title: stripOptional(c.title),
-        }),
-        ...(stripOptional(c.description) !== undefined && {
-          description: stripOptional(c.description),
-        }),
-        ...(stripOptional(c.buttonText) !== undefined && {
-          buttonText: stripOptional(c.buttonText),
-        }),
+        ...includeImageWithKey(c.imageUrl),
+        ...st('title', c.title, editor),
+        ...st('description', c.description, editor),
+        ...st('buttonText', c.buttonText, editor),
         ...(includeString(c.url) && { url: c.url }),
+        ...(includeString(c.email) && { email: c.email }),
+        ...(includeString(c.tel) && { tel: c.tel }),
+        ...(includeString(c.buttonLinkType) && {
+          buttonLinkType: c.buttonLinkType,
+        }),
+        ...(includeString(c.buttonPageId) && { buttonPageId: c.buttonPageId }),
         ...(includeString(c.displayStyle) && { displayStyle: c.displayStyle }),
         ...(includeStyle(c.titleStyle) && { titleStyle: c.titleStyle }),
         ...(includeStyle(c.descriptionStyle) && {
@@ -111,45 +256,36 @@ const minifyContent = (content: Content): MinifiedContent => {
         ...(includeStyle(c.buttonTextStyle) && {
           buttonTextStyle: c.buttonTextStyle,
         }),
+        ...includeCardStyle(c.cardStyle),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'about-section':
       return {
         ...base,
-        ...(includeString(c.imageUrl) && { imageUrl: c.imageUrl }),
-        ...(stripOptional(c.title) !== undefined && {
-          title: stripOptional(c.title),
-        }),
-        ...(stripOptional(c.paragraph) !== undefined && {
-          paragraph: stripOptional(c.paragraph),
-        }),
+        ...includeImageWithKey(c.imageUrl),
+        ...st('title', c.title, editor),
+        ...st('paragraph', c.paragraph, editor),
         ...(includeString(c.displayStyle) && { displayStyle: c.displayStyle }),
         ...(includeStyle(c.titleStyle) && { titleStyle: c.titleStyle }),
         ...(includeStyle(c.paragraphStyle) && {
           paragraphStyle: c.paragraphStyle,
         }),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'testimonial-section':
       return {
         ...base,
-        ...(stripOptional(c.title) !== undefined && {
-          title: stripOptional(c.title),
-        }),
+        ...st('title', c.title, editor),
         ...(includeString(c.displayStyle) && { displayStyle: c.displayStyle }),
         ...(Array.isArray(c.items) && {
           items: c.items.map((item: any, index: number) => ({
             position: index + 1,
-            ...(stripOptional(item.name) !== undefined && {
-              name: stripOptional(item.name),
-            }),
-            ...(stripOptional(item.position) !== undefined && {
-              jobTitle: stripOptional(item.position),
-            }),
-            ...(stripOptional(item.testimonials) !== undefined && {
-              testimonials: stripOptional(item.testimonials),
-            }),
-            ...(includeString(item.imageUrl) && { imageUrl: item.imageUrl }),
+            ...st('name', item.name, editor),
+            ...st('jobTitle', item.position, editor),
+            ...st('testimonials', item.testimonials, editor),
+            ...includeImageWithKey(item.imageUrl),
           })),
         }),
         ...(includeStyle(c.titleStyle) && { titleStyle: c.titleStyle }),
@@ -160,28 +296,25 @@ const minifyContent = (content: Content): MinifiedContent => {
         ...(includeStyle(c.positionStyle) && {
           positionStyle: c.positionStyle,
         }),
+        ...includeCardStyle(c.cardStyle),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'images-section':
     case 'shapes-section':
       return {
         ...base,
-        ...(stripOptional(c.title) !== undefined && {
-          title: stripOptional(c.title),
-        }),
-        ...(stripOptional(c.description) !== undefined && {
-          description: stripOptional(c.description),
-        }),
+        ...st('title', c.title, editor),
+        ...st('description', c.description, editor),
         ...(includeString(c.displayStyle) && { displayStyle: c.displayStyle }),
         ...(Array.isArray(c.items) && {
           items: c.items.map((item: any, index: number) => ({
             position: index + 1,
-            ...(includeString(item.imageUrl) && { imageUrl: item.imageUrl }),
-            ...(stripOptional(item.title) !== undefined && {
-              title: stripOptional(item.title),
-            }),
-            ...(stripOptional(item.paragraph) !== undefined && {
-              paragraph: stripOptional(item.paragraph),
+            ...includeImageWithKey(item.imageUrl),
+            ...st('title', item.title, editor),
+            ...st('paragraph', item.paragraph, editor),
+            ...(includeString(item.buttonText) && {
+              buttonText: item.buttonText,
             }),
           })),
         }),
@@ -193,63 +326,56 @@ const minifyContent = (content: Content): MinifiedContent => {
         ...(includeStyle(c.paragraphStyle) && {
           paragraphStyle: c.paragraphStyle,
         }),
+        ...(includeStyle(c.buttonTextStyle) && {
+          buttonTextStyle: c.buttonTextStyle,
+        }),
+        ...includeCardStyle(c.cardStyle),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'text':
       return {
         ...base,
-        ...(stripOptional(c.text) !== undefined && {
-          text: stripOptional(c.text),
-        }),
+        ...st('text', c.text, editor),
         ...(Array.isArray(c.textItems) && {
           textItems: c.textItems.map((item: any, index: number) => ({
             position: index + 1,
-            ...(stripOptional(item.text) !== undefined && {
-              text: stripOptional(item.text),
-            }),
+            ...st('text', item.text, editor),
             ...(includeStyle(item.textStyle) && { textStyle: item.textStyle }),
           })),
         }),
         ...(includeStyle(c.textStyle) && { textStyle: c.textStyle }),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'profile':
       return {
         ...base,
-        ...(includeString(c.avatarImageUrl) && {
-          avatarImageUrl: c.avatarImageUrl,
-        }),
-        ...(stripOptional(c.name) !== undefined && {
-          name: stripOptional(c.name),
-        }),
-        ...(stripOptional(c.title) !== undefined && {
-          title: stripOptional(c.title),
-        }),
-        ...(stripOptional(c.description) !== undefined && {
-          description: stripOptional(c.description),
-        }),
+        ...includeImageWithKey(
+          c.avatarImageUrl,
+          'avatarImageUrl',
+          'avatarAssetKey',
+        ),
+        ...st('name', c.name, editor),
+        ...st('title', c.title, editor),
+        ...st('description', c.description, editor),
         ...(includeStyle(c.nameStyle) && { nameStyle: c.nameStyle }),
         ...(includeStyle(c.titleStyle) && { titleStyle: c.titleStyle }),
         ...(includeStyle(c.descriptionStyle) && {
           descriptionStyle: c.descriptionStyle,
         }),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'contact-form':
       return {
         ...base,
-        ...(stripOptional(c.title) !== undefined && {
-          title: stripOptional(c.title),
-        }),
-        ...(stripOptional(c.description) !== undefined && {
-          description: stripOptional(c.description),
-        }),
-        ...(stripOptional(c.buttonText) !== undefined && {
-          buttonText: stripOptional(c.buttonText),
-        }),
-        ...(stripOptional(c.successMessage) !== undefined && {
-          successMessage: stripOptional(c.successMessage),
-        }),
+        ...st('title', c.title, editor),
+        ...st('description', c.description, editor),
+        ...st('buttonText', c.buttonText, editor),
+        ...st('successMessage', c.successMessage, editor),
+        ...(includeString(c.displayStyle) && { displayStyle: c.displayStyle }),
+        ...(includeString(c.layoutStyle) && { layoutStyle: c.layoutStyle }),
         ...(includeStyle(c.titleStyle) && { titleStyle: c.titleStyle }),
         ...(includeStyle(c.descriptionStyle) && {
           descriptionStyle: c.descriptionStyle,
@@ -257,36 +383,35 @@ const minifyContent = (content: Content): MinifiedContent => {
         ...(includeStyle(c.buttonTextStyle) && {
           buttonTextStyle: c.buttonTextStyle,
         }),
+        ...includeCardStyle(c.cardStyle),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'mailing-list':
       return {
         ...base,
-        ...(stripOptional(c.title) !== undefined && {
-          title: stripOptional(c.title),
-        }),
-        ...(stripOptional(c.buttonText) !== undefined && {
-          buttonText: stripOptional(c.buttonText),
-        }),
+        ...st('title', c.title, editor),
+        ...st('buttonText', c.buttonText, editor),
         ...(includeStyle(c.titleStyle) && { titleStyle: c.titleStyle }),
         ...(includeStyle(c.buttonTextStyle) && {
           buttonTextStyle: c.buttonTextStyle,
         }),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'booking-section':
       return {
         ...base,
-        ...(stripOptional(c.title) !== undefined && {
-          title: stripOptional(c.title),
-        }),
-        ...(stripOptional(c.description) !== undefined && {
-          description: stripOptional(c.description),
-        }),
-        ...(stripOptional(c.buttonText) !== undefined && {
-          buttonText: stripOptional(c.buttonText),
-        }),
+        ...st('title', c.title, editor),
+        ...st('description', c.description, editor),
+        ...st('buttonText', c.buttonText, editor),
         ...(includeString(c.url) && { url: c.url }),
+        ...(includeString(c.email) && { email: c.email }),
+        ...(includeString(c.tel) && { tel: c.tel }),
+        ...(includeString(c.buttonLinkType) && {
+          buttonLinkType: c.buttonLinkType,
+        }),
+        ...(includeString(c.buttonPageId) && { buttonPageId: c.buttonPageId }),
         ...(includeStyle(c.titleStyle) && { titleStyle: c.titleStyle }),
         ...(includeStyle(c.descriptionStyle) && {
           descriptionStyle: c.descriptionStyle,
@@ -294,22 +419,22 @@ const minifyContent = (content: Content): MinifiedContent => {
         ...(includeStyle(c.buttonTextStyle) && {
           buttonTextStyle: c.buttonTextStyle,
         }),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'social-links':
       return {
         ...base,
-        ...(stripOptional(c.title) !== undefined && {
-          title: stripOptional(c.title),
-        }),
+        ...st('title', c.title, editor),
         ...(Array.isArray(c.links) && {
           links: c.links.map((link: any, index: number) => ({
             position: index + 1,
             ...(includeString(link.url) && { url: link.url }),
-            ...(includeString(link.imageUrl) && { imageUrl: link.imageUrl }),
+            ...includeImageWithKey(link.imageUrl),
           })),
         }),
         ...(includeStyle(c.titleStyle) && { titleStyle: c.titleStyle }),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'divider-section':
@@ -317,32 +442,28 @@ const minifyContent = (content: Content): MinifiedContent => {
         ...base,
         ...(c.paddingStyle !== undefined && { paddingStyle: c.paddingStyle }),
         ...(includeString(c.dividerStyle) && { dividerStyle: c.dividerStyle }),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'shop-section':
       return {
         ...base,
-        ...(stripOptional(c.title) !== undefined && {
-          title: stripOptional(c.title),
-        }),
-        ...(stripOptional(c.description) !== undefined && {
-          description: stripOptional(c.description),
-        }),
+        ...st('title', c.title, editor),
+        ...st('description', c.description, editor),
         ...(includeString(c.displayStyle) && { displayStyle: c.displayStyle }),
         ...(Array.isArray(c.items) && { items: c.items }),
         ...(includeStyle(c.titleStyle) && { titleStyle: c.titleStyle }),
         ...(includeStyle(c.descriptionStyle) && {
           descriptionStyle: c.descriptionStyle,
         }),
+        ...includeBackgroundStyle(c.backgroundStyle),
       };
 
     case 'image':
       return {
         ...base,
-        ...(includeString(c.imageUrl) && { imageUrl: c.imageUrl }),
-        ...(stripOptional(c.imageTitle) !== undefined && {
-          imageTitle: stripOptional(c.imageTitle),
-        }),
+        ...includeImageWithKey(c.imageUrl),
+        ...st('imageTitle', c.imageTitle, editor),
       };
 
     case 'image-gallery':
@@ -351,10 +472,8 @@ const minifyContent = (content: Content): MinifiedContent => {
         ...(Array.isArray(c.images) && {
           images: c.images.map((img: any, index: number) => ({
             position: index + 1,
-            ...(includeString(img.imageUrl) && { imageUrl: img.imageUrl }),
-            ...(stripOptional(img.imageTitle) !== undefined && {
-              imageTitle: stripOptional(img.imageTitle),
-            }),
+            ...includeImageWithKey(img.imageUrl),
+            ...st('imageTitle', img.imageTitle, editor),
           })),
         }),
       };
@@ -379,12 +498,8 @@ const minifyContent = (content: Content): MinifiedContent => {
     case 'support-me':
       return {
         ...base,
-        ...(stripOptional(c.title) !== undefined && {
-          title: stripOptional(c.title),
-        }),
-        ...(stripOptional(c.description) !== undefined && {
-          description: stripOptional(c.description),
-        }),
+        ...st('title', c.title, editor),
+        ...st('description', c.description, editor),
       };
 
     default:
@@ -392,20 +507,137 @@ const minifyContent = (content: Content): MinifiedContent => {
   }
 };
 
-const minifyPage = (page: PageModel, nav: NavModel): MinifiedPage => ({
+const minifyFooter = (
+  footer: AbstractPageFooterStyles | undefined | null,
+  logoAssetKey?: string,
+): MinifiedFooter | undefined => {
+  if (!footer) return undefined;
+
+  return {
+    displayStyle: footer.displayStyle || undefined,
+    copyrightText: footer.copyrightText ? footer.copyrightText : undefined,
+    isLogoVisible: footer.isLogoVisible,
+    logoImageHeight: footer.logoImageHeight || undefined,
+    logoImageWidth: footer.logoImageWidth || undefined,
+    ...(logoAssetKey && { logoAssetKey }),
+    socialLinks: footer.socialLinks?.length
+      ? footer.socialLinks.map((l) => ({
+          imageUrl: l.imageUrl || '',
+          url: l.url || '',
+        }))
+      : undefined,
+  };
+};
+
+const minifyHeader = (
+  header: AbstractPageHeaderStyles | undefined | null,
+  logoAssetKey?: string,
+): MinifiedHeader | undefined => {
+  if (!header) return undefined;
+
+  const nav = header.navigation;
+
+  return {
+    displayStyle: header.displayStyle || undefined,
+    isLogoVisible: header.isLogoVisible,
+    logoImageHeight: header.logoImageHeight || undefined,
+    logoImageWidth: header.logoImageWidth || undefined,
+    ...(logoAssetKey && { logoAssetKey }),
+    backgroundStyle: header.backgroundStyle?.backgroundColor
+      ? { backgroundColor: header.backgroundStyle.backgroundColor as string }
+      : undefined,
+    navigation: nav
+      ? {
+          displayType: nav.displayType || undefined,
+          defaultButtonStyle: nav.defaultButtonStyle
+            ? {
+                color: nav.defaultButtonStyle.color,
+                fontFamily: nav.defaultButtonStyle.fontFamily,
+              }
+            : undefined,
+          selectedButtonStyle: nav.selectedButtonStyle || undefined,
+          hamburgerMenuStyle: nav.hamburgerMenuStyle
+            ? { iconStyle: nav.hamburgerMenuStyle.iconStyle || undefined }
+            : undefined,
+        }
+      : undefined,
+  };
+};
+
+const minifyPage = (
+  page: PageModel,
+  nav: NavModel,
+  editor: Editor,
+  assets?: AssetEntry[],
+): MinifiedPage => ({
   id: page.id,
   title: page.title,
   slug: nav.routes.find((r) => r.pageId === page.id)?.pageSlug ?? '',
   ...(page.isHidden && { isHidden: page.isHidden }),
-  contents: page.contents.map(minifyContent),
+  contents: page.contents.map((content) =>
+    minifyContent(content, editor, assets),
+  ),
 });
 
 export const minifyBrandPageMetadata = (
   model: BrandPageModel,
-): MinifiedBrandPageMetadata => ({
-  brandPageType: model.brandPageType || BRAND_PAGE_TYPES.default,
-  v: model.v,
-  styles: model.styles,
-  pages: model.pages.map((p) => minifyPage(p, model.nav)),
-  nav: model.nav,
-});
+  assets?: AssetEntry[],
+): MinifiedBrandPageMetadata => {
+  const { externalEditor } = useExternalRichTextEditor();
+
+  const result: MinifiedBrandPageMetadata = {
+    brandPageType: model.brandPageType || BRAND_PAGE_TYPES.default,
+    v: model.v,
+    styles: model.styles,
+    pages: model.pages.map((p) =>
+      minifyPage(p, model.nav, externalEditor, assets),
+    ),
+    nav: model.nav,
+    footer: {
+      desktop: minifyFooter(
+        model.pageFooterDesktop,
+        findAssetKey(
+          assets,
+          resolveLogoData(
+            (model.pageFooterDesktop as any)?.logoImage,
+            model.pageFooterDesktop?.logoImageBase64Url,
+          ),
+        ),
+      ),
+      mobile: minifyFooter(
+        model.pageFooterMobile,
+        findAssetKey(
+          assets,
+          resolveLogoData(
+            (model.pageFooterMobile as any)?.logoImage,
+            model.pageFooterMobile?.logoImageBase64Url,
+          ),
+        ),
+      ),
+    },
+    pageHeaderDesktop: minifyHeader(
+      model.pageHeaderDesktop,
+      findAssetKey(
+        assets,
+        resolveLogoData(
+          (model.pageHeaderDesktop as any)?.logoImage,
+          model.pageHeaderDesktop?.logoImageBase64Url,
+        ),
+      ),
+    ),
+    pageHeaderMobile: minifyHeader(
+      model.pageHeaderMobile,
+      findAssetKey(
+        assets,
+        resolveLogoData(
+          (model.pageHeaderMobile as any)?.logoImage,
+          model.pageHeaderMobile?.logoImageBase64Url,
+        ),
+      ),
+    ),
+  };
+
+  externalEditor.destroy();
+
+  return result;
+};