@designcrowd/library.brand-page 5.19.1-error-html2canvas-3 → 5.19.1-id-based-items-2

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

@@ -21,6 +21,7 @@ import {
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
   getAbTestResults,
+  getValueType,
   type AbTest,
   type LogoContent,
 } from '@brand-page';
@@ -33,6 +34,7 @@ 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';
@@ -121,7 +123,6 @@ export type InitialisePayload = Omit<
   logoDraftAssets: LogoDraftAsset[];
   gettyVideos: GettyVideoEditorViewModelResponse[];
   templateSearchTerm: string | undefined;
-  aiTemplateKeywords: string | undefined;
   onSearchTermChanged?: OnSearchTermChangedCallback;
 };
 
@@ -265,10 +266,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         onSearchTermChanged: payload.onSearchTermChanged,
       });
 
-      templateSettingsStore.setAiTemplateKeywords({
-        aiTemplateKeywords: payload.aiTemplateKeywords ?? '',
-      });
-
       brandPageMakerStore.setSelectedTemplateId({
         templateId: this.designTemplateToken,
       });
@@ -449,7 +446,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(
@@ -556,7 +553,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       isPurchasedDomain,
     }) {
       const brandPageMakerStore = useBrandPageMakerStore();
-      const _eventTracker = useEventTracker();
+      const eventTracker = useEventTracker();
 
       if (!this.designDraftToken) {
         throw new Error(
@@ -890,7 +887,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,6 +2,7 @@ import { vi } from 'vitest';
 import {
   BRAND_PAGE,
   INITIALISE_PAYLOAD,
+  USER_FEATURES,
   userFeatures,
 } from '../../components/brand-page-maker/__fixtures__';
 import {
@@ -43,7 +44,6 @@ 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,6 +54,8 @@ 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,12 +23,14 @@ 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';
@@ -123,8 +125,6 @@ export interface InitialisePayload {
   templateCategories: TemplateCategory[];
   personalisationData?: UserPersonalisationContent[];
   isPersonalisationEnabled: boolean;
-  userPromptContentKey?: string;
-  showAiTemplatesTab?: boolean;
   businessName: string | undefined;
   industry: string | undefined;
   layout?: string;
@@ -1230,13 +1230,11 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       templateCategories,
       personalisationData,
       isPersonalisationEnabled,
-      userPromptContentKey,
-      showAiTemplatesTab = false,
       businessName,
       industry,
       layout,
       logoVariationImageUrls,
-      shopConfigData: _shopConfigData,
+      shopConfigData,
       isServerRenderOverride = false,
     }: InitialisePayload) {
       const brandPageContainerStore = useBrandPageContainerStore();
@@ -1248,7 +1246,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 });
 
@@ -1355,10 +1353,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           });
         }
 
-        uiStore.setUserPromptContentKey({ userPromptContentKey });
-
-        uiStore.setShowAiTemplatesTab({ showAiTemplatesTab });
-
         templateSettingsStore.setTemplateCategories({
           categories: templateCategories,
         });
@@ -1806,7 +1800,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
       const shopStore = useShopConfigStore();
       const pageNavigationStore = usePageNavigationStore();
-      const uiStore = useUiStore();
 
       const pages = pageSettingsStore.pages.map((p) => ({
         ...p,
@@ -1824,7 +1817,6 @@ 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,8 +48,6 @@ export const useUiStore = defineStore('ui', {
     },
     personalisationData: undefined,
     isPersonalisationEnabled: false,
-    userPromptContentKey: undefined,
-    showAiTemplatesTab: false,
   }),
   actions: {
     setLogoTheme(payload: { logoTheme: LogoTheme }) {
@@ -80,20 +78,6 @@ 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 { type Content } from '@brand-page';
+import { SENSITIVE_CONTENT_TYPES, 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,7 +11,6 @@ interface DesignTemplateClientOptions {}
 interface GetTemplatesAsyncOptions {
   categoryName?: string;
   searchTerm?: string;
-  keywords?: string;
   side?: string;
   logoDraftToken?: string;
   logoVariation?: number;
@@ -23,8 +22,6 @@ interface GetTemplatesAsyncOptions {
   locale?: string;
   logoS3Token?: string;
   logoTemplateToken?: string;
-  pageSection?: string;
-  pageName?: string;
 }
 
 export const getTemplatesEndpoint = (templateTypeName: string) =>

package/src/clients/models.ts

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

package/src/composables/useSnapshot.ts

@@ -180,19 +180,15 @@ export function useSnapshot() {
       const captureWidth = target.clientWidth || target.offsetWidth || 1;
       const scale = Math.min(1, SNAPSHOT_TARGET_WIDTH / captureWidth);
 
-      // Inline every shape's blob-backed SVG as a data: URI up front. Shapes
-      // (content + background) render their coloured SVG via an <img> whose src
-      // is a `blob:` URL from URL.createObjectURL. The owning component revokes
-      // that blob on re-render (colour/size/imageUrl change) and on unmount —
-      // exactly what an AI "change all my contents" run triggers right before we
-      // capture. html2canvas fetches each <img> src ASYNCHRONOUSLY while
-      // rendering, so a concurrent revoke leaves it fetching a dead blob URL →
-      // the shape 404s and snapshots blank. A data: URI can't be revoked, so
-      // swapping the blob for one in the clone removes the race.
+      // Pre-fetch blob-backed SVGs from content shape <object> elements so they
+      // can be rendered as <img> in the clone (html2canvas can't reach into the
+      // isolated DOM inside <object>). Background-shape blob <img>s are NOT
+      // converted: html2canvas renders them no differently with or without the
+      // conversion, so it'd just be wasted fetches.
       const blobSvgUris = new Map<string, string>();
       const blobSources = Array.from(
-        element.querySelectorAll<HTMLImageElement>('.c-shape-object img'),
-      ).map((img) => img.getAttribute('src'));
+        element.querySelectorAll<HTMLObjectElement>('.c-shape-object object'),
+      ).map((o) => o.getAttribute('data'));
 
       for (const src of blobSources) {
         if (src && src.startsWith('blob:') && !blobSvgUris.has(src)) {
@@ -344,16 +340,23 @@ export function useSnapshot() {
             overflow: 'visible',
           });
 
-          // Repoint each shape <img> from its (revocable) blob: src to the
-          // pre-fetched data: URI so html2canvas never fetches a blob that may
-          // have been revoked mid-capture.
+          // Swap content shape <object>s for <img> using the pre-fetched data
+          // URIs (html2canvas can't render <object> SVGs directly).
           _doc
-            .querySelectorAll<HTMLImageElement>('.c-shape-object img')
-            .forEach((img) => {
-              const src = img.getAttribute('src');
+            .querySelectorAll<HTMLObjectElement>('.c-shape-object object')
+            .forEach((obj) => {
+              const dataUrl = obj.getAttribute('data');
 
-              if (src && blobSvgUris.has(src)) {
-                img.src = blobSvgUris.get(src)!;
+              if (dataUrl && blobSvgUris.has(dataUrl)) {
+                const img = _doc.createElement('img');
+
+                img.src = blobSvgUris.get(dataUrl)!;
+
+                const style = obj.getAttribute('style');
+
+                if (style) img.setAttribute('style', style);
+
+                obj.parentNode?.replaceChild(img, obj);
               }
             });
 

package/src/lib.ts

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