@designcrowd/library.brand-page 5.19.1-error-html2canvas-1 → 5.19.1-error-html2canvas-2

package/lib/src/shared/template-settings/store/template-settings-store.js

@@ -1,7 +1,7 @@
 import { TEMPLATE_TABS } from '../models';
 import * as DesignTemplateClient from '../../../clients/design-template-client';
 import {} from '../../../clients/models';
-import { BP_DEFAULT_TEMPLATE_TYPE_NAME, SIDE_BAR_TAB_NAMES, } from '@brand-page-maker/constants';
+import { BP_DEFAULT_TEMPLATE_TYPE_NAME, BP_BRAND_SITE_TEMPLATE_TYPE_NAME, SIDE_BAR_TAB_NAMES, } from '@brand-page-maker/constants';
 import { defineStore, storeToRefs } from 'pinia';
 import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useLogoStore, useUiStore, } from '@brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
@@ -9,9 +9,19 @@ import { BrandPageModel } from '@brand-page/models';
 import { migrateBrandPageModel } from '@brand-page/utils';
 import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '@brand-page-maker/utils/ai-content-selection.util';
 import { useUiEditableLogoStore, useUiLogoSettingsStore, } from '../../logo-settings/store';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
 import { templateSettingsTr, getCurrentLocale, } from '@src/composables/useTranslate';
 import { watch } from 'vue';
 export const DEFAULT_PAGE_SIZE = 6;
+const POST_PURCHASE_PAGE_SECTION_BY_TAB = {
+    [TEMPLATE_TABS.all]: 'MakerPostPurchaseSidebarTemplatesAllTab',
+    [TEMPLATE_TABS.AI]: 'MakerPostPurchaseSidebarTemplatesAiTab',
+    [TEMPLATE_TABS.categories]: 'MakerPostPurchaseSidebarTemplatesCategoryTab',
+};
+const PRE_PURCHASE_PAGE_SECTION_BY_TAB = {
+    [TEMPLATE_TABS.all]: 'MakerPrePurchaseSidebarTemplatesAllTab',
+    [TEMPLATE_TABS.categories]: 'MakerPrePurchaseSidebarTemplatesCategoryTab',
+};
 const LOAD_PAGE_RETRY_DELAY = 250;
 export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
     state: () => {
@@ -47,6 +57,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             cachedTemplates: {},
             logoChangeWatcherInitialized: false,
             initialSearchTerm: undefined,
+            aiTemplateKeywords: undefined,
             onSearchTermChanged: undefined,
         };
     },
@@ -187,27 +198,65 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     }
                 }
                 const editableLogoVariation = editableLogoStore.editableLogoVariations[logoVariation];
-                const result = await designTemplateClient.getTemplateItemsByTemplateType(this.templateType, {
+                const isPrePurchase = brandPageContainerStore.isPrePurchase;
+                const isBrandSite = this.templateType === BP_BRAND_SITE_TEMPLATE_TYPE_NAME;
+                // Pre-purchase has no logo draft for logo-based recommendation, so fall back to the seeded
+                // search term (the keyword from the URL/cookie - never the business name) so the All tab
+                // stays relevant instead of generic (bp-5454).
+                const effectiveSearchTerm = !this.searchTerm &&
+                    !this.selectedCategory &&
+                    isPrePurchase &&
+                    isBrandSite &&
+                    this.selectedTab.key === TEMPLATE_TABS.all
+                    ? this.initialSearchTerm
+                    : this.searchTerm;
+                const pageSection = isBrandSite
+                    ? (isPrePurchase
+                        ? PRE_PURCHASE_PAGE_SECTION_BY_TAB
+                        : POST_PURCHASE_PAGE_SECTION_BY_TAB)[this.selectedTab.key]
+                    : undefined;
+                const pageName = isBrandSite
+                    ? isPrePurchase
+                        ? 'maker-pre-purchase'
+                        : 'maker'
+                    : undefined;
+                const baseParams = {
                     page: pageNo,
-                    pageSize: DEFAULT_PAGE_SIZE,
                     categoryName: this.selectedCategory,
-                    searchTerm: this.searchTerm,
+                    searchTerm: effectiveSearchTerm,
+                    keywords: this.aiTemplateKeywords,
                     logoDraftToken: logoSettingsStore.selectedLogoImage.logoDraftToken,
                     logoVariation: logoSettingsStore.selectedLogoImage.logoVariation,
-                    personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
                     selectedTemplateToken: designTemplateToken,
                     locale: currentLocale,
                     logoS3Token: !isByo ? editableLogoVariation.s3Token : undefined,
                     logoTemplateToken: isByo ? logoTemplateToken : undefined,
+                    useLogoForRecommendedTemplates: isBrandSite && this.selectedTab.key === TEMPLATE_TABS.all,
+                    pageSection,
+                    pageName,
+                };
+                // AI templates are interleaved server-side for the Brand Site All tab
+                // (bp-5306); the frontend just renders the returned order.
+                const result = await designTemplateClient.getTemplateItemsByTemplateType(this.templateType, {
+                    ...baseParams,
+                    pageSize: DEFAULT_PAGE_SIZE,
+                    personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
                 });
                 if (!result) {
                     return;
                 }
                 this._setPageCount({ pageCount: result.pageCount });
+                if (pageNo === 1 &&
+                    result.abTestValuesToBePushed &&
+                    Object.keys(result.abTestValuesToBePushed).length > 0) {
+                    const eventTracker = useEventTracker();
+                    for (const [experimentName, experimentValue] of Object.entries(result.abTestValuesToBePushed)) {
+                        eventTracker.sendExperimentStartedEvent(experimentName, experimentValue);
+                    }
+                }
                 const templates = await Promise.all(result.paginatedItems.map(async (item) => {
                     try {
                         if (brandPageMakerUserStore.isAdmin) {
-                            // Pre-purchase: full template with brandPageModel for live rendering
                             const template = await designTemplateClient.getTemplateByTemplateToken(item.designTemplateToken);
                             return this.safeMapToTemplateSettingsTemplate(template);
                         }
@@ -217,14 +266,24 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                             if (uiStore.personalisationData?.length) {
                                 personalisationContentIndex =
                                     await getAiContentIndexByTemplateTokenAndNumberOfVariations(item.designTemplateToken, uiStore.personalisationData.length);
-                                // Get the contentKey from the selected personalisation variation
-                                // This is needed for the backend preview URL to show the correct variation
-                                const selectedPersonalisation = uiStore.personalisationData[personalisationContentIndex];
-                                contentKey = selectedPersonalisation.contentKey;
+                                contentKey =
+                                    uiStore.personalisationData[personalisationContentIndex]
+                                        .contentKey;
+                            }
+                            else if (item.isPersonalisable) {
+                                // Pre-purchase has no personalisationData; personalise AI
+                                // template previews with the prompt content key (bp-5742).
+                                contentKey = uiStore.userPromptContentKey;
                             }
                             return {
                                 id: item.designTemplateToken,
+                                isPersonalisable: item.isPersonalisable,
                                 contentKey,
+                                // A userPromptContentKey signals this design's real AI images live
+                                // in the userPrompt bucket (post- or pre-purchase). The preview must
+                                // then resolve via userPromptContentKey, not the regular bucket which
+                                // holds placeholders post-purchase (bp-5454).
+                                usesUserPromptContentKey: !!uiStore.userPromptContentKey,
                                 previewImageUrl: item.previewImageUrl,
                             };
                         }
@@ -235,7 +294,13 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 }));
                 // Filter out null templates before adding
                 const validTemplates = templates.filter((t) => t !== null);
-                this._addTemplates({ templates: validTemplates });
+                // The Categories tab must never surface AI templates or the AI badge
+                // (bp-5454 scenario 5). The badge is driven purely by isPersonalisable,
+                // so clear it for category results regardless of the template's catalog flag.
+                const displayTemplates = this.selectedTab.key === TEMPLATE_TABS.categories
+                    ? validTemplates.map((t) => ({ ...t, isPersonalisable: false }))
+                    : validTemplates;
+                this._addTemplates({ templates: displayTemplates });
                 this._setPageNoLoaded({ pageNoLoaded: pageNo });
             }
             finally {
@@ -339,6 +404,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             this.initialSearchTerm = payload.initialSearchTerm;
             this.onSearchTermChanged = payload.onSearchTermChanged;
         },
+        setAiTemplateKeywords(payload) {
+            this.aiTemplateKeywords = payload.aiTemplateKeywords;
+        },
         notifySearchTermChanged(searchTerm) {
             this.onSearchTermChanged?.(searchTerm);
         },

package/lib/src/shared/unsplash-library/UnsplashLibrary.mixin.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="types/lodash-shims" />
 import UnsplashClient from '../../clients/unsplash-client';
 import { type DebounceHandle } from 'lodash.debounce';
 interface PreviewUrls {
@@ -30,14 +29,20 @@ declare const _default: import("vue").DefineComponent<{}, {
             thirdPartySettings: import("../models").UIRootStateThirdPartySettings;
         }): void;
         setDeviceMode({ mode }: {
-            mode: "desktop" | "mobile";
+            mode: import("../models").UiDeviceMode;
         }): void;
         setScreenSizeMode({ mode }: {
-            mode: "desktop" | "mobile";
+            mode: import("../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
             personalisationData: import("../../brand-page").UserPersonalisationContent[];
         }): void;
+        setUserPromptContentKey({ userPromptContentKey, }: {
+            userPromptContentKey: string | undefined;
+        }): void;
+        setShowAiTemplatesTab({ showAiTemplatesTab, }: {
+            showAiTemplatesTab: boolean;
+        }): void;
         onBackgroundChanged(): void;
         onContentChanged(): void;
         onStyleChanged(): void;
@@ -50,7 +55,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             type: string;
         }): Promise<void>;
         onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
-        showUpgradeModalAndSaveAsync(contextualUpgradeType?: string | number | symbol | undefined): Promise<void>;
+        showUpgradeModalAndSaveAsync(contextualUpgradeType?: import("@brand-page-maker/stores").WebsiteContextUpgradeType): Promise<void>;
         setIsPersonalisationEnabled({ isPersonalisationEnabled, }: {
             isPersonalisationEnabled: boolean;
         }): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.19.1-error-html2canvas-1",
+  "version": "5.19.1-error-html2canvas-2",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -55,9 +55,9 @@
     "pre-push": "npm run test"
   },
   "dependencies": {
-    "@ckpack/vue-color": "1.4.1",
-    "@designcrowd/fe-shared-lib": "1.8.14",
-    "@pinia/nuxt": "0.11.0",
+    "@ckpack/vue-color": "1.6.0",
+    "@designcrowd/fe-shared-lib": "2.0.0",
+    "@pinia/nuxt": "0.11.3",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "^2.14.0",
     "@tiptap/extension-character-count": "2.11.7",
@@ -72,41 +72,42 @@
     "@tiptap/extension-underline": "2.11.5",
     "@tiptap/starter-kit": "2.11.5",
     "@tiptap/vue-3": "2.11.5",
-    "axios": "1.6.7",
+    "axios": "1.13.5",
     "chroma-js": "2.4.2",
     "click-outside-vue3": "4.0.1",
-    "color": "5.0.0",
+    "color": "5.0.3",
     "config": "3.3.10",
-    "core-js": "3.35.1",
+    "core-js": "3.48.0",
     "css-color-names": "1.0.1",
     "date-utils": "1.2.21",
     "deepmerge": "4.3.1",
-    "dompurify": "3.2.6",
+    "dompurify": "3.3.1",
     "dropzone-vue3": "1.0.2",
     "express": "4.18.2",
-    "fs-extra": "11.2.0",
-    "http-errors": "2.0.0",
+    "fs-extra": "11.3.3",
+    "http-errors": "2.0.1",
     "http-proxy-middleware": "2.0.6",
-    "i18next": "25.2.1",
+    "i18next": "25.8.5",
     "jquery": "3.7.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
     "lodash.uniq": "4.5.0",
-    "nuxt": "3.17.4",
-    "pinia": "3.0.2",
+    "nuxt": "4.4.5",
+    "pinia": "3.0.4",
     "portal-vue": "3.0.0",
     "raygun": "0.13.2",
-    "raygun4js": "3.0.0",
+    "raygun4js": "3.1.4",
     "regenerator-runtime": "0.14.1",
     "slugify": "1.6.6",
     "svg-parser": "2.0.4",
     "uuid": "9.0.1",
-    "validator": "13.11.0",
-    "vue": "3.5.15",
+    "validator": "13.15.26",
+    "vue": "3.5.35",
     "vue-cropperjs": "5.0.0",
-    "vue-router": "4.5.0",
+    "vue-router": "5.1.0",
     "vue-select": "4.0.0-beta.6",
+    "unstorage": "^1.17.5",
     "vue3-lazy-hydration": "1.2.1",
     "vue3-shortkey": "4.0.0",
     "vuedraggable": "4.1.0",
@@ -123,49 +124,49 @@
   "optionalDependencies": {
     "@esbuild/darwin-arm64": "0.27.1",
     "@esbuild/linux-x64": "0.27.1",
-    "@rollup/rollup-linux-arm64-gnu": "4.12.0",
-    "@rollup/rollup-linux-x64-gnu": "4.12.0"
+    "@rollup/rollup-linux-arm64-gnu": "4.43.0",
+    "@rollup/rollup-linux-x64-gnu": "4.43.0"
   },
   "devDependencies": {
     "@faker-js/faker": "8.4.0",
     "@frsource/cypress-plugin-visual-regression-diff": "3.3.10",
-    "@nuxt/test-utils": "3.19.1",
-    "@nuxt/types": "2.17.3",
+    "@nuxt/test-utils": "4.0.0",
+    "@nuxt/types": "2.18.1",
     "@nuxt/typescript-build": "3.0.2",
     "@storybook/addon-themes": "9.0.4",
     "@storybook/vue3": "9.0.4",
     "@storybook/vue3-vite": "9.0.4",
     "@stylistic/eslint-plugin": "1.5.4",
     "@types/axios-mock-adapter": "1.10.0",
-    "@types/braces": "3.0.4",
+    "@types/braces": "3.0.5",
     "@types/dompurify": "3.2.0",
     "@types/express": "4.17.21",
     "@types/faker": "6.6.8",
     "@types/google.maps": "3.65.1",
     "@types/istanbul-lib-report": "3.0.3",
-    "@types/jquery": "3.5.30",
+    "@types/jquery": "3.5.33",
     "@types/lodash.clonedeep": "4.5.9",
-    "@types/mssql": "9.1.4",
+    "@types/mssql": "9.1.9",
     "@types/multer": "1.4.11",
     "@types/raygun4js": "3.0.0",
     "@types/react": "18.2.48",
     "@types/resize-observer-browser": "0.1.11",
-    "@types/stripe-v3": "3.1.32",
+    "@types/stripe-v3": "3.1.33",
     "@types/svg-parser": "2.0.6",
-    "@types/uglify-js": "3.17.4",
-    "@types/unist": "3.0.2",
+    "@types/uglify-js": "3.17.5",
+    "@types/unist": "3.0.3",
     "@types/uuid": "9.0.8",
-    "@types/validator": "13.11.8",
+    "@types/validator": "13.15.10",
     "@types/yargs-parser": "21.0.3",
     "@typescript-eslint/eslint-plugin": "6.20.0",
     "@typescript-eslint/parser": "6.20.0",
-    "@vitejs/plugin-vue": "5.2.4",
+    "@vitejs/plugin-vue": "6.0.7",
     "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.4",
-    "autoprefixer": "10.4.17",
+    "@vue/test-utils": "2.4.6",
+    "autoprefixer": "10.4.24",
     "axios-mock-adapter": "1.22.0",
     "copyfiles": "2.4.1",
-    "cors": "2.8.5",
+    "cors": "2.8.6",
     "cross-env": "7.0.3",
     "css-loader": "6.9.1",
     "cypress": "13.6.3",
@@ -173,50 +174,50 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-plugin-cypress": "2.15.1",
-    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-vue": "9.21.1",
     "file-loader": "6.2.0",
-    "happy-dom": "14.12.3",
-    "html-loader": "5.0.0",
-    "husky": "9.0.7",
+    "happy-dom": "20.6.1",
+    "html-loader": "5.1.0",
+    "husky": "9.1.7",
     "imports-loader": "5.0.0",
-    "jest-image-snapshot": "6.4.0",
-    "js-base64": "3.7.6",
-    "jsdom": "24.0.0",
+    "jest-image-snapshot": "6.5.1",
+    "js-base64": "3.7.8",
+    "jsdom": "27.4.0",
     "jsdom-global": "3.0.2",
     "lint-staged": "15.2.0",
-    "mini-css-extract-plugin": "2.7.7",
-    "msw": "2.3.1",
-    "msw-storybook-addon": "2.0.3",
+    "mini-css-extract-plugin": "2.10.0",
+    "msw": "2.12.10",
+    "msw-storybook-addon": "2.0.6",
     "multer": "1.4.3",
-    "nodemon": "3.0.3",
+    "nodemon": "3.1.11",
     "npm-run-all": "4.1.5",
     "nyc": "15.1.0",
     "performance-now": "2.1.0",
-    "picocolors": "1.0.0",
-    "playwright-core": "1.47.0",
-    "postcss": "8.4.38",
-    "postcss-cli": "11.0.0",
-    "postcss-loader": "8.0.0",
+    "picocolors": "1.1.1",
+    "playwright-core": "1.58.2",
+    "postcss": "8.5.6",
+    "postcss-cli": "11.0.1",
+    "postcss-loader": "8.2.0",
     "postcss-nested": "6.0.1",
     "postcss-prefix-selector": "1.16.0",
-    "prettier": "3.2.4",
+    "prettier": "3.8.1",
     "request": "2.88.2",
     "rimraf": "5.0.5",
-    "rollup-plugin-visualizer": "5.12.0",
+    "rollup-plugin-visualizer": "6.0.11",
     "run-func": "3.0.0",
     "shx": "0.3.4",
     "storybook": "9.0.4",
     "style-loader": "3.3.4",
     "tailwindcss": "3.4.1",
     "timsort": "0.3.0",
-    "ts-loader": "9.5.1",
+    "ts-loader": "9.5.4",
     "ts-node": "10.9.2",
-    "typescript": "5.3.3",
-    "vite": "6.3.5",
+    "typescript": "5.9.3",
+    "vite": "7.3.5",
     "vite-plugin-commonjs": "0.10.4",
-    "vite-plugin-node-polyfills": "0.23.0",
-    "vitest": "3.1.4",
+    "vite-plugin-node-polyfills": "0.25.0",
+    "vitest": "4.0.18",
     "vue-eslint-parser": "9.4.2",
     "vue-loader": "17.4.2",
     "vue-style-loader": "4.1.3",
@@ -225,7 +226,10 @@
   "overrides": {
     "@achrinza/node-ipc": "10.1.10",
     "@parcel/watcher": "2.1.0",
-    "rollup-plugin-visualizer": "5.12.0",
+    "@storybook/vue3-vite": {
+      "vite": "$vite"
+    },
+    "rollup-plugin-visualizer": "6.0.11",
     "vite": {
       "rollup": "npm:@rollup/wasm-node"
     }
@@ -244,4 +248,4 @@
       "public"
     ]
   }
-}
+}

package/src/brand-page/components/about-section/AboutSection.vue.test.ts

@@ -10,11 +10,13 @@ import {
 } from '@brand-page/models';
 import type { AboutSectionViewModel } from '@brand-page/view-models';
 
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
+global.ResizeObserver = vi.fn(function () {
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  } as unknown as ResizeObserver;
+});
 
 const createTestBrandPageContext = (): BrandPageContext => ({
   brandPageSlug: faker.person.firstName(),

package/src/brand-page/components/banner-section/BannerSection.mixin.ts

@@ -0,0 +1,210 @@
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import ComponentCommonMixin from '../mixins/component-common.mixin';
+import type {
+  BannerSectionViewModel,
+  ButtonViewModel,
+} from '@brand-page/view-models';
+import { hasValidButton as shouldShowButtonUtil } from '../../../utils/validator.util';
+import type { BrandPageContext } from '@brand-page/models';
+import {
+  ALIGN_CENTERED,
+  ALIGN_LEFT_ALIGNED,
+  ALIGN_RIGHT_ALIGNED,
+  BIG_IMAGE,
+  ALIGN_LEFT_BIG_IMAGE,
+  ALIGN_RIGHT_FULL_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_CARD_LEFT_IMAGE,
+} from '../../constants';
+import { getRenderText, escapeContentText } from '@brand-page/utils';
+import { hasRTEContent } from '@brand-page-maker/utils';
+
+export default defineComponent({
+  mixins: [ComponentCommonMixin],
+  props: {
+    viewModel: {
+      type: Object as PropType<BannerSectionViewModel>,
+      required: true,
+    },
+    context: {
+      type: Object as PropType<BrandPageContext>,
+      required: true,
+    },
+    containerClientWidth: {
+      type: Number as PropType<number | undefined>,
+      required: false,
+      default: undefined,
+    },
+    containerClientHeight: {
+      type: Number as PropType<number | undefined>,
+      required: false,
+      default: undefined,
+    },
+    contentIndex: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      shouldStackOnTop: false,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize);
+    });
+  },
+  unmounted() {
+    if (typeof window !== undefined) {
+      window.removeEventListener(`resize`, this.onResize);
+    }
+  },
+  computed: {
+    displayAlignClass() {
+      switch (this.viewModel.displayStyle) {
+        case ALIGN_CENTERED:
+          return 'tw-items-center tw-w-full';
+        case BIG_IMAGE:
+          return 'tw-items-center tw-w-full';
+        case ALIGN_LEFT_ALIGNED:
+          return 'tw-items-start tw-w-2/3';
+        case ALIGN_RIGHT_ALIGNED:
+          return 'tw-items-end tw-w-2/3';
+        case ALIGN_LEFT_BIG_IMAGE:
+          return 'tw-items-start tw-w-2/3';
+        case ALIGN_CARD_CENTER_IMAGE:
+          return 'tw-items-center tw-w-full';
+        case ALIGN_CARD_LEFT_IMAGE:
+          return 'tw-items-end';
+        default:
+          return '';
+      }
+    },
+    displayButtonClass() {
+      if (this.viewModel.buttonTextStyle) {
+        switch (this.viewModel.buttonTextStyle.textAlign) {
+          case 'left':
+            return 'tw-justify-start';
+          case 'center':
+            return 'tw-justify-center';
+          case 'right':
+            return 'tw-justify-end';
+          default:
+            return '';
+        }
+      } else {
+        return this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
+          this.viewModel.displayStyle === ALIGN_CENTERED
+          ? 'tw-justify-center'
+          : 'tw-justify-start';
+      }
+    },
+    isLeftImageAligned(): boolean {
+      if (this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE) {
+        return true;
+      }
+
+      return false;
+    },
+    isRightImageAligned(): boolean {
+      if (this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE) {
+        return true;
+      }
+
+      return false;
+    },
+
+    isDividedContent(): boolean {
+      if (
+        this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE ||
+        this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE
+      ) {
+        return true;
+      }
+
+      return false;
+    },
+    isCardBannerContent(): boolean {
+      if (
+        this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
+        this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE
+      ) {
+        return true;
+      }
+
+      return false;
+    },
+    isCardAlignedOnLeft() {
+      return this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE;
+    },
+    getbuttonViewModel(): ButtonViewModel {
+      const { buttonViewModel, buttonLinkType, pageSlug } = this.viewModel;
+
+      buttonViewModel.buttonLinkType = buttonLinkType;
+      buttonViewModel.pageSlug = pageSlug;
+
+      return buttonViewModel;
+    },
+
+    shouldShowButton(): boolean {
+      return shouldShowButtonUtil({
+        buttonText: this.viewModel.buttonText,
+        buttonViewModel: this.viewModel.buttonViewModel,
+      });
+    },
+
+    isHorizontalAligned(): boolean {
+      return (
+        this.viewModel.displayStyle === ALIGN_LEFT_ALIGNED ||
+        this.viewModel.displayStyle === ALIGN_RIGHT_ALIGNED ||
+        this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE ||
+        this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE
+      );
+    },
+    isBigImageAligned(): boolean {
+      return (
+        this.viewModel.displayStyle === ALIGN_LEFT_BIG_IMAGE ||
+        this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE
+      );
+    },
+    renderText(): string {
+      if (!this.viewModel.description) {
+        return '';
+      }
+
+      if (hasRTEContent(this.viewModel.description)) {
+        return this.viewModel.description;
+      } else {
+        return getRenderText(this.viewModel.description);
+      }
+    },
+    hasDescriptionText(): boolean {
+      if (hasRTEContent(this.viewModel.description)) {
+        return escapeContentText(this.viewModel.description) !== '';
+      } else {
+        return this.viewModel?.description?.length > 0;
+      }
+    },
+    overlayColor(): BrandPageCssStyle {
+      return this.viewModel.overlayColor || 'rgb(0,0,0)';
+    },
+    opacity(): number {
+      return this.viewModel.overlayOpacity;
+    },
+    backgroundOverlay(): BrandPageCssStyle {
+      return {
+        background: this.overlayColor.backgroundColor,
+        opacity: `${this.opacity}%`,
+      };
+    },
+  },
+  methods: {
+    onResize() {
+      this.shouldStackOnTop = window.innerWidth < 640;
+    },
+  },
+});

package/src/brand-page/components/brand-page-footer/BrandPageFooter.vue

@@ -32,7 +32,7 @@
   </footer>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch, shallowRef } from 'vue';
+import { computed, onMounted, reactive, watch, shallowRef } from 'vue';
 import { BRAND_PAGE_TYPES, type BrandPageContext } from '@brand-page/models';
 import {
   Icon,