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

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.ts

@@ -21,7 +21,6 @@ import {
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
   getAbTestResults,
-  getValueType,
   type AbTest,
   type LogoContent,
 } from '@brand-page';
@@ -34,7 +33,6 @@ import {
   TRIGGER_TYPE,
   UPGRADE_CTA_LOCATIONS,
   useEventTracker,
-  EVENTS,
 } from '@brand-page-maker/composables/useEventTracker';
 import { navigationTr } from '@src/composables/useTranslate';
 import type { WebsiteSlugCheckResponse } from '@brand-page-maker/models/api.model';
@@ -123,6 +121,7 @@ export type InitialisePayload = Omit<
   logoDraftAssets: LogoDraftAsset[];
   gettyVideos: GettyVideoEditorViewModelResponse[];
   templateSearchTerm: string | undefined;
+  aiTemplateKeywords: string | undefined;
   onSearchTermChanged?: OnSearchTermChangedCallback;
 };
 
@@ -266,6 +265,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         onSearchTermChanged: payload.onSearchTermChanged,
       });
 
+      templateSettingsStore.setAiTemplateKeywords({
+        aiTemplateKeywords: payload.aiTemplateKeywords ?? '',
+      });
+
       brandPageMakerStore.setSelectedTemplateId({
         templateId: this.designTemplateToken,
       });
@@ -446,7 +449,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
 
     async publishBrandPage({ shouldPublish, slug }) {
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (!this.designDraftToken) {
         throw new Error(
@@ -553,7 +556,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       isPurchasedDomain,
     }) {
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (!this.designDraftToken) {
         throw new Error(
@@ -887,7 +890,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
     ) {
       const userStore = useBrandPageMakerUserStore();
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (userStore.isAdmin) {
         throw new Error('save brand page is not allowed in admin mode');

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.test.ts

@@ -2,7 +2,6 @@ import { vi } from 'vitest';
 import {
   BRAND_PAGE,
   INITIALISE_PAYLOAD,
-  USER_FEATURES,
   userFeatures,
 } from '../../components/brand-page-maker/__fixtures__';
 import {
@@ -44,6 +43,7 @@ import { useUiBackgroundSettingsStore } from '@shared/background-settings/store'
 import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
 import {
   CONTENT_SETTINGS_MODES,
   useUiContentSettingsStore,
@@ -54,8 +54,6 @@ import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { setLocaleAsync } from '@src/composables/useTranslate';
-import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
-import type { NavModel } from '@brand-page/models';
 
 const createInitialisePayload = () => {
   const initialisePayload = {

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -23,14 +23,12 @@ import {
   CONTENT_TYPES,
   NavigationDesktop,
   NavigationMobile,
-  NavModel,
 } from '@brand-page';
 import type {
   DesignTemplateType,
   InitialCategories,
   TemplateCategory,
 } from '@shared/template-settings/models';
-import type { UserFeatures } from '../user';
 import { useBrandPageMakerUserStore } from '../user';
 import { defineStore } from 'pinia';
 import { toRaw } from 'vue';
@@ -125,6 +123,8 @@ export interface InitialisePayload {
   templateCategories: TemplateCategory[];
   personalisationData?: UserPersonalisationContent[];
   isPersonalisationEnabled: boolean;
+  userPromptContentKey?: string;
+  showAiTemplatesTab?: boolean;
   businessName: string | undefined;
   industry: string | undefined;
   layout?: string;
@@ -1230,11 +1230,13 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       templateCategories,
       personalisationData,
       isPersonalisationEnabled,
+      userPromptContentKey,
+      showAiTemplatesTab = false,
       businessName,
       industry,
       layout,
       logoVariationImageUrls,
-      shopConfigData,
+      shopConfigData: _shopConfigData,
       isServerRenderOverride = false,
     }: InitialisePayload) {
       const brandPageContainerStore = useBrandPageContainerStore();
@@ -1246,7 +1248,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const backgroundSettingsStore = useUiBackgroundSettingsStore();
       const styleSettingsStore = useUiStyleSettingsStore();
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
-      const sideBarStore = useUiSideBarStore();
+      const _sideBarStore = useUiSideBarStore();
 
       navigationStyleSettingsStore.initialise({ reset: false });
 
@@ -1353,6 +1355,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           });
         }
 
+        uiStore.setUserPromptContentKey({ userPromptContentKey });
+
+        uiStore.setShowAiTemplatesTab({ showAiTemplatesTab });
+
         templateSettingsStore.setTemplateCategories({
           categories: templateCategories,
         });
@@ -1800,6 +1806,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
       const shopStore = useShopConfigStore();
       const pageNavigationStore = usePageNavigationStore();
+      const uiStore = useUiStore();
 
       const pages = pageSettingsStore.pages.map((p) => ({
         ...p,
@@ -1817,6 +1824,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       return {
         v: GetLatestModelVersion(),
+        userPromptContentKey: uiStore.userPromptContentKey,
         pages,
         styles: {
           logoStyles,

package/src/brand-page-maker/stores/ui/ui-store.ts

@@ -48,6 +48,8 @@ export const useUiStore = defineStore('ui', {
     },
     personalisationData: undefined,
     isPersonalisationEnabled: false,
+    userPromptContentKey: undefined,
+    showAiTemplatesTab: false,
   }),
   actions: {
     setLogoTheme(payload: { logoTheme: LogoTheme }) {
@@ -78,6 +80,20 @@ export const useUiStore = defineStore('ui', {
     }) {
       this.personalisationData = personalisationData;
     },
+    setUserPromptContentKey({
+      userPromptContentKey,
+    }: {
+      userPromptContentKey: string | undefined;
+    }) {
+      this.userPromptContentKey = userPromptContentKey;
+    },
+    setShowAiTemplatesTab({
+      showAiTemplatesTab,
+    }: {
+      showAiTemplatesTab: boolean;
+    }) {
+      this.showAiTemplatesTab = showAiTemplatesTab;
+    },
     onBackgroundChanged() {
       const brandPageMakerStore = useBrandPageMakerStore();
 

package/src/brand-page-maker/utils/content-settings.util.ts

@@ -7,7 +7,7 @@ import type {
   ContentSettingsConfig,
   CreateInitialContentOptions,
 } from '../models';
-import { SENSITIVE_CONTENT_TYPES, type Content } from '@brand-page';
+import { type Content } from '@brand-page';
 import { RESERVED_FIELD_NAMES } from '@shared/content-settings/constants';
 import { CONTENT_SETTINGS_CONFIGS } from '../constants';
 import type { UIUserFeatures } from '@src/constants/ui';

package/src/brand-page-maker/utils/rich-text-editor.util.ts

@@ -431,7 +431,7 @@ const transformRTEField = (
   if (textStyleType && (textStyleType === type || uiStyleSettingsStore)) {
     let globalContentStyle = uiStyleSettingsStore
       ? uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType].style
-      : newStyle ?? ({} as TextStyleDeclaration);
+      : (newStyle ?? ({} as TextStyleDeclaration));
 
     globalContentStyle = {
       ...globalContentStyle,
@@ -549,7 +549,7 @@ export const transformToRTE = (
                 ? uiStyleSettingsStore.textStyles.textStyleOptions[
                     textItemStyleType
                   ].style
-                : newStyle ?? ({} as TextStyleDeclaration);
+                : (newStyle ?? ({} as TextStyleDeclaration));
 
               globalContentStyle = {
                 ...globalContentStyle,
@@ -593,7 +593,7 @@ export const transformToRTE = (
             let globalContentStyle = uiStyleSettingsStore
               ? uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType]
                   .style
-              : newStyle ?? ({} as TextStyleDeclaration);
+              : (newStyle ?? ({} as TextStyleDeclaration));
 
             globalContentStyle = {
               ...globalContentStyle,
@@ -647,7 +647,7 @@ export const switchAllContentToRTE = (
 
         if (textContent.textItems && textContent.textItems.length > 0) {
           for (const [
-            itemIndex,
+            _itemIndex,
             textItemContent,
           ] of textContent.textItems.entries()) {
             const textItemStyleType = textItemContent.textStyle.textStyleType;

package/src/clients/design-template-client.ts

@@ -11,6 +11,7 @@ interface DesignTemplateClientOptions {}
 interface GetTemplatesAsyncOptions {
   categoryName?: string;
   searchTerm?: string;
+  keywords?: string;
   side?: string;
   logoDraftToken?: string;
   logoVariation?: number;
@@ -22,6 +23,8 @@ interface GetTemplatesAsyncOptions {
   locale?: string;
   logoS3Token?: string;
   logoTemplateToken?: string;
+  pageSection?: string;
+  pageName?: string;
 }
 
 export const getTemplatesEndpoint = (templateTypeName: string) =>

package/src/clients/models.ts

@@ -4,6 +4,7 @@ export interface Paginated<T> {
   pageSize: number;
   pageCount: number;
   totalResultCount: number;
+  abTestValuesToBePushed?: Record<string, string>;
 }
 
 export interface DesignTemplate {
@@ -14,6 +15,7 @@ export interface DesignTemplate {
 
 export interface PaginatedDesignTemplateItem {
   designTemplateToken: string;
+  isPersonalisable?: boolean;
   previewImageUrl?: string;
 }
 

package/src/lib.ts

@@ -96,6 +96,7 @@ export {
   useEventManagerStore,
   useLocalisedRouteStore,
   useVideoStore,
+  useRouteStore,
 } from './brand-page-maker/stores';
 export { useShopConfigStore } from './shared/ecommerce-settings/store/shop-settings-store';
 

package/src/metadata-builder/builders/footer-builder.test.ts

@@ -57,7 +57,7 @@ describe('FooterBuilder — copyright font vs global style', () => {
     });
 
     const { model: out } = await run(
-      { copyright_text_font_family: 'Anton' },
+      { copyright_text_style: { fontFamily: 'Anton' } },
       model,
     );
 
@@ -73,4 +73,203 @@ describe('FooterBuilder — copyright font vs global style', () => {
     expect(style.color).toBe('#2d0b3f');
     expect(style.textAlign).toBe('center');
   });
+
+  it('applies copyright font size + weight via the style object, detaches, preserves the text', async () => {
+    const model = makeModel({
+      textStyleType: 'paragraphs',
+      textAlign: 'center',
+      fontWeight: 'bold',
+    });
+
+    const { model: out } = await run(
+      { copyright_text_style: { fontSize: '0.875em', fontWeight: 'normal' } },
+      model,
+    );
+
+    const desktop = out.pageFooterDesktop!;
+    const style = desktop.copyrightStyle as Record<string, unknown>;
+
+    expect(style.fontSize).toBe('0.875em');
+    expect(style.fontWeight).toBe('normal');
+    expect(style.textStyleType).toBeUndefined();
+    // preset values resolved in, not lost
+    expect(style.fontFamily).toBe('Inter');
+    expect(style.textAlign).toBe('center');
+    // style-only change must NOT touch the copyright text itself
+    expect(desktop.copyrightText).toBeUndefined();
+  });
+
+  it('applies copyright style to both viewports', async () => {
+    const model = makeModel({ textStyleType: 'paragraphs' });
+
+    const { model: out } = await run(
+      { copyright_text_style: { fontSize: '0.75em', fontWeight: 'normal' } },
+      model,
+    );
+
+    for (const vp of [out.pageFooterDesktop!, out.pageFooterMobile!]) {
+      const style = vp.copyrightStyle as Record<string, unknown>;
+
+      expect(style.fontSize).toBe('0.75em');
+      expect(style.fontWeight).toBe('normal');
+      expect(style.textStyleType).toBeUndefined();
+    }
+  });
+
+  it('applies copyright colour and normalises letterSpacing (int→em) via the style object', async () => {
+    const model = makeModel({ textStyleType: 'paragraphs' });
+
+    const { model: out } = await run(
+      { copyright_text_style: { color: '#f5f5f5', letterSpacing: 50 } },
+      model,
+    );
+
+    const style = out.pageFooterDesktop!.copyrightStyle as Record<
+      string,
+      unknown
+    >;
+
+    expect(style.color).toBe('#f5f5f5');
+    // letterSpacing int 0–100 is normalised to an em string (50 → '0.5em'),
+    // exactly as section *_style values are.
+    expect(style.letterSpacing).toBe('0.5em');
+    expect(style.textStyleType).toBeUndefined();
+  });
+});
+
+type Link = { imageUrl: string; url: string };
+
+const link = (imageUrl: string): Link => ({
+  imageUrl,
+  url: `https://${imageUrl}.com`,
+});
+
+/**
+ * Footers migrated from the legacy single `footerStyles` model
+ * (migration-01) split into desktop + mobile via a shallow spread, leaving
+ * both viewports' `socialLinks` pointing at ONE shared array. `cloneDeep`
+ * preserves that shared reference. This factory reproduces that shape.
+ */
+const makeSharedSocialModel = (links: Link[]): BrandPageModel => {
+  const shared = links.map((l) => ({ ...l }));
+
+  return {
+    styles: { textStyles: { textStyleOptions } },
+    pageFooterDesktop: { socialLinks: shared },
+    pageFooterMobile: { socialLinks: shared },
+  } as unknown as BrandPageModel;
+};
+
+const makeIndependentSocialModel = (links: Link[]): BrandPageModel =>
+  ({
+    styles: { textStyles: { textStyleOptions } },
+    pageFooterDesktop: { socialLinks: links.map((l) => ({ ...l })) },
+    pageFooterMobile: { socialLinks: links.map((l) => ({ ...l })) },
+  }) as unknown as BrandPageModel;
+
+const socialIcons = (footer: { socialLinks?: Link[] } | undefined) =>
+  (footer?.socialLinks ?? []).map((l) => l.imageUrl);
+
+describe('FooterBuilder — social link removal (shared-array regression)', () => {
+  // Reproduces the bug: a single requested removal index dropped TWO links
+  // because both viewports shared one array and the builder spliced it twice.
+  it('removes exactly one link per requested index even when viewports share the array', async () => {
+    const model = makeSharedSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+      link('youtube'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [2] },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual([
+      'facebook',
+      'instagram',
+      'youtube',
+    ]);
+    expect(socialIcons(out.pageFooterMobile)).toEqual([
+      'facebook',
+      'instagram',
+      'youtube',
+    ]);
+  });
+
+  it('un-shares the viewport arrays so later in-place edits cannot cross-corrupt', async () => {
+    const model = makeSharedSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [0] },
+      model,
+    );
+
+    expect(out.pageFooterDesktop!.socialLinks).not.toBe(
+      out.pageFooterMobile!.socialLinks,
+    );
+  });
+
+  it('handles multiple removal indices on a shared array (descending splice)', async () => {
+    const model = makeSharedSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+      link('youtube'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [0, 2] },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual([
+      'instagram',
+      'youtube',
+    ]);
+    expect(socialIcons(out.pageFooterMobile)).toEqual(['instagram', 'youtube']);
+  });
+
+  it('removes one link per index for independent viewport arrays (no regression)', async () => {
+    const model = makeIndependentSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [1] },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual(['facebook', 'x']);
+    expect(socialIcons(out.pageFooterMobile)).toEqual(['facebook', 'x']);
+  });
+
+  it('inserts exactly one link on a shared array (symmetric add guard)', async () => {
+    const model = makeSharedSocialModel([link('facebook'), link('instagram')]);
+
+    const { model: out } = await run(
+      {
+        social_links: [{ insert_at: 1, social_link_icon: 'x', url: 'x.com' }],
+      },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual([
+      'facebook',
+      'x',
+      'instagram',
+    ]);
+    expect(socialIcons(out.pageFooterMobile)).toEqual([
+      'facebook',
+      'x',
+      'instagram',
+    ]);
+  });
 });