@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/lib/src/utils/minify-brand-page-metadata.js

@@ -1,5 +1,7 @@
 import { BRAND_PAGE_TYPES, } from '../brand-page/models';
-const stripHtmlTags = (html) => html.replace(/<[^>]*>/g, '').trim();
+import { hasRTEContent } from '../brand-page-maker/utils';
+import { useExternalRichTextEditor } from '../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+import { resolveLogoData } from './build-asset-manifest';
 const BUTTON_TYPES = [
     'general-link',
     'website',
@@ -14,11 +16,18 @@ const BUTTON_TYPES = [
     'twitch',
     'tiktok',
 ];
-const stripOptional = (value) => {
-    if (typeof value === 'string' && value) {
-        return stripHtmlTags(value);
+const convertText = (value, editor) => {
+    if (typeof value !== 'string' || !value)
+        return undefined;
+    if (hasRTEContent(value)) {
+        editor.commands.setContent(value);
+        return editor.getJSON();
     }
-    return undefined;
+    return value;
+};
+const st = (key, value, editor) => {
+    const result = convertText(value, editor);
+    return result !== undefined ? { [key]: result } : null;
 };
 const includeStyle = (value) => {
     if (value && typeof value === 'object') {
@@ -32,15 +41,68 @@ const includeString = (value) => {
     }
     return undefined;
 };
-const minifyContent = (content) => {
+/**
+ * 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) => {
+    if (!value || typeof value !== 'object')
+        return null;
+    const style = value;
+    const result = {};
+    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) => {
+    if (!value || typeof value !== 'object')
+        return null;
+    const style = value;
+    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, data) => {
+    if (!data || !assets)
+        return undefined;
+    return assets.find((a) => a.data === data)?.key;
+};
+const minifyContent = (content, editor, assets) => {
     const base = { id: content.id, type: content.type };
     const c = content;
+    // Helper: include imageUrl and its asset key if available
+    const includeImageWithKey = (url, urlField = 'imageUrl', keyField = 'imageAssetKey') => {
+        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 }),
         };
@@ -49,17 +111,17 @@ const minifyContent = (content) => {
         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) && {
@@ -68,43 +130,34 @@ const minifyContent = (content) => {
                 ...(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, index) => ({
                         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 }),
@@ -115,27 +168,24 @@ const minifyContent = (content) => {
                 ...(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, index) => ({
                         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,
                         }),
                     })),
                 }),
@@ -147,60 +197,49 @@ const minifyContent = (content) => {
                 ...(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, index) => ({
                         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,
@@ -208,34 +247,33 @@ const minifyContent = (content) => {
                 ...(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,
@@ -243,51 +281,47 @@ const minifyContent = (content) => {
                 ...(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, index) => ({
                         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':
             return {
                 ...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':
             return {
@@ -295,10 +329,8 @@ const minifyContent = (content) => {
                 ...(Array.isArray(c.images) && {
                     images: c.images.map((img, index) => ({
                         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),
                     })),
                 }),
             };
@@ -319,28 +351,83 @@ const minifyContent = (content) => {
         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:
             return base;
     }
 };
-const minifyPage = (page, nav) => ({
+const minifyFooter = (footer, logoAssetKey) => {
+    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, logoAssetKey) => {
+    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 }
+            : 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, nav, editor, assets) => ({
     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),
-});
-export const minifyBrandPageMetadata = (model) => ({
-    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,
+    contents: page.contents.map((content) => minifyContent(content, editor, assets)),
 });
+export const minifyBrandPageMetadata = (model, assets) => {
+    const { externalEditor } = useExternalRichTextEditor();
+    const result = {
+        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?.logoImage, model.pageFooterDesktop?.logoImageBase64Url))),
+            mobile: minifyFooter(model.pageFooterMobile, findAssetKey(assets, resolveLogoData(model.pageFooterMobile?.logoImage, model.pageFooterMobile?.logoImageBase64Url))),
+        },
+        pageHeaderDesktop: minifyHeader(model.pageHeaderDesktop, findAssetKey(assets, resolveLogoData(model.pageHeaderDesktop?.logoImage, model.pageHeaderDesktop?.logoImageBase64Url))),
+        pageHeaderMobile: minifyHeader(model.pageHeaderMobile, findAssetKey(assets, resolveLogoData(model.pageHeaderMobile?.logoImage, model.pageHeaderMobile?.logoImageBase64Url))),
+    };
+    externalEditor.destroy();
+    return result;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.17.28",
+  "version": "5.18.0",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/banner-section/BannerSection.vue

@@ -1,7 +1,7 @@
 <template>
   <section data-component="banner-section">
     <div
-      class="tw-relative"
+      class="tw-relative tw-overflow-hidden"
       :class="{
         'c_banner--with-image-overlay tw-flex tw-flex-col tw-justify-center':
           viewModel.isBigImageType,

package/src/brand-page/components/contact-form/ContactForm.vue

@@ -286,18 +286,20 @@
                   {{ value.error }}
                 </p>
               </div>
-              <button
-                v-if="isSubmitButtonVisible"
-                class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full-width"
-                :style="submitButtonStyle"
-                :class="{ 'tw-w-full tw-col-span-2': isMobileDevice }"
-              >
-                <TextWrapper
-                  :text-style="submitButtonTextStyle"
-                  :text="viewModel.buttonText"
-                  class="tw-text-center tw-text-base"
-                />
-              </button>
+              <div class="tw-flex tw-w-full tw-justify-center tw-col-span-2">
+                <button
+                  v-if="isSubmitButtonVisible"
+                  class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
+                  :style="submitButtonStyle"
+                  :class="{ 'tw-w-full': isMobileDevice }"
+                >
+                  <TextWrapper
+                    :text-style="submitButtonTextStyle"
+                    :text="viewModel.buttonText"
+                    class="tw-text-center tw-text-base"
+                  />
+                </button>
+              </div>
             </div>
             <p v-if="hasSubmitError" class="tw-text-center tw-mt-2 form-error">
               {{ submitError }}
@@ -414,18 +416,22 @@
                         {{ value.error }}
                       </p>
                     </div>
-                    <button
-                      v-if="isSubmitButtonVisible"
-                      class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full-width"
-                      :style="submitButtonStyle"
-                      :class="{ 'tw-w-full tw-col-span-2': isMobileDevice }"
+                    <div
+                      class="tw-flex tw-w-full tw-justify-center tw-col-span-2"
                     >
-                      <TextWrapper
-                        :text-style="submitButtonTextStyle"
-                        :text="viewModel.buttonText"
-                        class="tw-text-center tw-text-base"
-                      />
-                    </button>
+                      <button
+                        v-if="isSubmitButtonVisible"
+                        class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
+                        :style="submitButtonStyle"
+                        :class="{ 'tw-w-full': isMobileDevice }"
+                      >
+                        <TextWrapper
+                          :text-style="submitButtonTextStyle"
+                          :text="viewModel.buttonText"
+                          class="tw-text-center tw-text-base"
+                        />
+                      </button>
+                    </div>
                   </div>
                   <div v-else class="tw-w-full tw-flex tw-justify-center">
                     <Loader />
@@ -498,9 +504,6 @@ export default {
 }
 
 @media (max-width: 767px) {
-  .c-button-full-width {
-    @apply tw-w-full tw-col-span-2;
-  }
   .c-button-full {
     @apply tw-w-full;
   }

package/src/brand-page/components/image-gallery/ImageGalleryModal.mixin.ts

@@ -115,14 +115,18 @@ export default defineComponent({
       deep: true,
 
       handler(newImages) {
-        this.carouselImages = cloneDeep(newImages);
+        this.carouselImages = cloneDeep(newImages).map(
+          ({ width, height, ...rest }) => rest,
+        );
       },
     },
   },
   created() {
     // FIXME - types for this were added on 6/6/24 and usage of cloneDeep here fails type check
     // @ts-ignore
-    this.carouselImages = cloneDeep(this.images);
+    this.carouselImages = cloneDeep(this.images).map(
+      ({ width, height, ...rest }) => rest,
+    );
   },
   methods: {
     checkImageModalImageComplete() {

package/src/brand-page/components/text-media-section/TextMediaSection.vue

@@ -62,11 +62,7 @@
                 isAlternateRow || shouldHorizontalAlign,
               'c_text-media--shape': isCardCenteredWithShapes,
             }"
-            :style="
-              isCardCenteredAlign && item.imageUrl
-                ? (viewModel.cardStyle as any)
-                : {}
-            "
+            :style="isCardCenteredAlign ? (viewModel.cardStyle as any) : {}"
           >
             <div
               class="tw-flex tw-items-center tw-justify-center"