@designcrowd/library.brand-page 5.16.26-pre-temp-9 → 5.16.27

package/lib/src/lib.js

@@ -26,7 +26,7 @@ export { default as SensitiveContentModal } from './brand-page/components/sensit
 // functions
 export { getBrandPageViewModelFromBrandPageModel, migrateBrandPageModel, } from './brand-page/utils';
 export * as brandPageUtils from './brand-page/utils';
-export { getOptimalLogoSize, calculateOptimizedLogoDimensions, applyLogoImageBase64UrlToBrandPageTemplateModel, } from './brand-page/utils/logo.util';
+export { getOptimalLogoSize, calculateOptimizedLogoDimensions, } from './brand-page/utils/logo.util';
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';
 // stores

package/lib/src/shared/logo-settings/components/EditLogoSettings.mixin.d.ts

@@ -81,14 +81,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 variationType: string | undefined;
                 width: number;
                 height: number;
-                expiryDate?: string | undefined;
-                s3Token?: string | undefined;
-                logoTheme?: {
-                    backgroundColors: string[];
-                    textColors: string[];
-                    textOpacities: number[];
-                    textValues: any;
-                } | undefined;
             }[];
             logoTemplateMetadata: string;
             isLogoDraftSaved: boolean;

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -253,14 +253,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 variationType: string | undefined;
                 width: number;
                 height: number;
-                expiryDate?: string | undefined;
-                s3Token?: string | undefined;
-                logoTheme?: {
-                    backgroundColors: string[];
-                    textColors: string[];
-                    textOpacities: number[];
-                    textValues: any;
-                } | undefined;
             }[];
             logoTemplateMetadata: string;
             isLogoDraftSaved: boolean;

package/lib/src/shared/logo-settings/store/editable-logo-store.d.ts

@@ -1,5 +1,4 @@
 import { type ModifyLogoDataResponse } from '../../../clients/fabric-render-client';
-import { type FabricLogoTheme } from '../../../brand-page';
 export interface GradientObject {
     type: string;
     angle: number | undefined;
@@ -61,9 +60,6 @@ export interface EditableLogoVariation {
     variationType: string | undefined;
     width: number;
     height: number;
-    expiryDate?: string;
-    s3Token?: string;
-    logoTheme?: FabricLogoTheme;
 }
 export interface EditableLogoState {
     enableEditMode: boolean;
@@ -155,14 +151,6 @@ export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"ui
             variationType: string | undefined;
             width: number;
             height: number;
-            expiryDate?: string | undefined;
-            s3Token?: string | undefined;
-            logoTheme?: {
-                backgroundColors: string[];
-                textColors: string[];
-                textOpacities: number[];
-                textValues: any;
-            } | undefined;
         }[];
         logoTemplateMetadata: string;
         isLogoDraftSaved: boolean;

package/lib/src/shared/logo-settings/store/editable-logo-store.js

@@ -19,9 +19,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 variationType: undefined,
                 width: 0,
                 height: 0,
-                expiryDate: undefined,
-                s3Token: undefined,
-                logoTheme: undefined,
             },
             {
                 variationId: LOGO_VARIATION.LOGO_WITH_BACKGROUND,
@@ -30,9 +27,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 variationType: undefined,
                 width: 0,
                 height: 0,
-                expiryDate: undefined,
-                s3Token: undefined,
-                logoTheme: undefined,
             },
             {
                 variationId: LOGO_VARIATION.LOGO_ONLY_WITH_TRANSPARENT_BACKGROUND,
@@ -41,9 +35,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 variationType: LOGO_VARIATION_TYPES.ICON_TRANSPARENT_BACKGROUND_ONLY,
                 width: 0,
                 height: 0,
-                expiryDate: undefined,
-                s3Token: undefined,
-                logoTheme: undefined,
             },
             {
                 variationId: LOGO_VARIATION.TEXT_ONLY_WITH_TRANSPARENT_BACKGROUND,
@@ -52,9 +43,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 variationType: LOGO_VARIATION_TYPES.TEXT_TRANSPARENT_BACKGROUND_ONLY,
                 width: 0,
                 height: 0,
-                expiryDate: undefined,
-                s3Token: undefined,
-                logoTheme: undefined,
             },
         ],
         logoEdits: {
@@ -266,9 +254,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             editableLogoVariation.base64 = result.base64;
             editableLogoVariation.width = result.width;
             editableLogoVariation.height = result.height;
-            editableLogoVariation.expiryDate = result.expiryDate;
-            editableLogoVariation.s3Token = result.s3Token;
-            editableLogoVariation.logoTheme = result.logoTheme;
             return result;
         },
         getDraftMetadata(logoDraftToken) {
@@ -297,7 +282,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             const logoStore = useLogoStore();
             const body = {
                 returnJson: payload?.returnJson || false,
-                generateS3Url: true,
                 dimensionsType: payload?.dimensionType,
                 variation: payload?.variationType,
                 primaryText: payload?.defaultPrimaryText,

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -4191,14 +4191,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 variationType: string | undefined;
                 width: number;
                 height: number;
-                expiryDate?: string | undefined;
-                s3Token?: string | undefined;
-                logoTheme?: {
-                    backgroundColors: string[];
-                    textColors: string[];
-                    textOpacities: number[];
-                    textValues: any;
-                } | undefined;
             }[];
             logoTemplateMetadata: string;
             isLogoDraftSaved: boolean;

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

@@ -3,12 +3,12 @@ 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 { defineStore, storeToRefs } from 'pinia';
-import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useLogoStore, useUiStore, } from '../../../brand-page-maker/stores';
+import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, } from '../../../brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
 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 { useUiLogoSettingsStore } from '../../logo-settings/store';
 import { templateSettingsTr, getCurrentLocale, } from '../../../composables/useTranslate';
 import { watch } from 'vue';
 export const DEFAULT_PAGE_SIZE = 6;
@@ -18,7 +18,8 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         const brandPageContainerStore = useBrandPageContainerStore();
         const brandPageMakerUserStore = useBrandPageMakerUserStore();
         // Set renderAsImage to true if not admin AND not pre-purchase
-        const renderAsImage = !brandPageMakerUserStore.isAdmin;
+        const renderAsImage = !brandPageMakerUserStore.isAdmin &&
+            !brandPageContainerStore.isPrePurchase;
         return {
             isBusy: false,
             pageCount: 0,
@@ -143,8 +144,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             const brandPageContainerStore = useBrandPageContainerStore();
             const brandPageMakerUserStore = useBrandPageMakerUserStore();
             const logoSettingsStore = useUiLogoSettingsStore();
-            const logoStore = useLogoStore();
-            const editableLogoStore = useUiEditableLogoStore();
             const designTemplateToken = brandPageContainerStore.designTemplateToken;
             if (brandPageMakerStore.isInitialising) {
                 setTimeout(() => {
@@ -169,10 +168,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             try {
                 const designTemplateClient = DesignTemplateClient.getInstance();
                 const currentLocale = getCurrentLocale();
-                const isByo = logoStore.logoTemplateAsset?.isByo ?? false;
-                const logoTemplateToken = logoStore.logoTemplateAsset?.token ?? undefined;
-                const logoVariation = logoSettingsStore.selectedLogoImage.logoVariation;
-                const editableLogoVariation = editableLogoStore.editableLogoVariations[logoVariation];
                 const result = await designTemplateClient.getTemplateItemsByTemplateType(this.templateType, {
                     page: pageNo,
                     pageSize: DEFAULT_PAGE_SIZE,
@@ -183,8 +178,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
                     selectedTemplateToken: designTemplateToken,
                     locale: currentLocale,
-                    logoS3Token: !isByo ? editableLogoVariation.s3Token : undefined,
-                    logoTemplateToken: isByo ? logoTemplateToken : undefined,
                 });
                 if (!result) {
                     return;
@@ -192,7 +185,8 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 this._setPageCount({ pageCount: result.pageCount });
                 const templates = await Promise.all(result.paginatedItems.map(async (item) => {
                     try {
-                        if (brandPageMakerUserStore.isAdmin) {
+                        if (brandPageContainerStore.isPrePurchase ||
+                            brandPageMakerUserStore.isAdmin) {
                             // Pre-purchase: full template with brandPageModel for live rendering
                             const template = await designTemplateClient.getTemplateByTemplateToken(item.designTemplateToken);
                             return this.safeMapToTemplateSettingsTemplate(template);
@@ -251,15 +245,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 templateId: payload.templateId,
                 forceApply: payload.forceApply,
             });
-            if (payload.forceApply) {
-                // When force applying, we need to also refresh the templates to reflect any changes
-                // due to the new logo S3 token after updating the logo
-                await this._setTemplates({
-                    templates: [],
-                });
-                await this._setPageNoLoaded({ pageNoLoaded: 0 });
-                await this.loadPageNo({ pageNo: 1 });
-            }
         },
         async onCategorySelected(payload) {
             await this._setTemplates({
@@ -334,11 +319,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
          */
         setupLogoChangeWatcher() {
             const logoSettingsStore = useUiLogoSettingsStore();
-            const editableLogoStore = useUiEditableLogoStore();
             const brandPageContainerStore = useBrandPageContainerStore();
             const brandPageMakerUserStore = useBrandPageMakerUserStore();
             const { selectedLogoImage } = storeToRefs(logoSettingsStore);
-            const { editableLogoVariations } = storeToRefs(editableLogoStore);
             // Watch for changes to logoImage (token or variation changes)
             watch(() => selectedLogoImage.value, async (newLogoImage, oldLogoImage) => {
                 // Skip initial load when oldLogoImage is undefined
@@ -348,7 +331,8 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 // Only refetch for post-purchase users and when logo actually changes
                 const hasLogoChanged = newLogoImage.logoDraftToken !== oldLogoImage.logoDraftToken ||
                     newLogoImage.logoVariation !== oldLogoImage.logoVariation;
-                if (!brandPageMakerUserStore.isAdmin &&
+                if (!brandPageContainerStore.isPrePurchase &&
+                    !brandPageMakerUserStore.isAdmin &&
                     newLogoImage.logoDraftToken &&
                     hasLogoChanged) {
                     // Reset templates state and reload with new logo
@@ -359,21 +343,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     await this.loadPageNo({ pageNo: 1 });
                 }
             }, { deep: true });
-            watch(() => editableLogoVariations.value[selectedLogoImage.value.logoVariation]
-                ?.s3Token, async (newS3Token, oldS3Token) => {
-                if (!oldS3Token) {
-                    return;
-                }
-                const hasLogoChanged = newS3Token !== oldS3Token;
-                if (!brandPageMakerUserStore.isAdmin && hasLogoChanged) {
-                    // Reset templates state and reload with new logo
-                    // Use the same pattern as onCategorySelected and onSearch
-                    await this._setTemplates({ templates: [] });
-                    await this._setPageNoLoaded({ pageNoLoaded: 0 });
-                    await this._setPageNo({ pageNo: 1 });
-                    await this.loadPageNo({ pageNo: 1 });
-                }
-            });
         },
     },
 });

package/package.json

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

package/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.mixin.ts

@@ -4,6 +4,7 @@ import {
   DESKTOP_WIDTH,
   MOBILE_HEIGHT,
   MOBILE_WIDTH,
+  MOBILE_HEIGHT_POST_PURCHASE,
 } from '../../constants';
 import {
   useBrandPageMakerStore,
@@ -35,7 +36,11 @@ export default defineComponent({
     },
 
     height(): number {
-      return this.isBrandSite ? DESKTOP_HEIGHT : MOBILE_HEIGHT;
+      if (this.isBrandSite) {
+        return DESKTOP_HEIGHT;
+      }
+
+      return this.isPrePurchase ? MOBILE_HEIGHT : MOBILE_HEIGHT_POST_PURCHASE;
     },
   },
 });

package/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.ts

@@ -265,7 +265,7 @@ export default defineComponent({
   },
   watch: {
     template() {
-      if (this.isAdmin) {
+      if (this.isAdmin || this.isPrePurchase) {
         this.updateViewModel();
       } else {
         // Reset loading state when template changes for image-based previews
@@ -275,7 +275,7 @@ export default defineComponent({
     },
     logoTheme: {
       handler() {
-        if (this.isAdmin) {
+        if (this.isAdmin || this.isPrePurchase) {
           this.updateViewModel();
         }
       },
@@ -283,7 +283,7 @@ export default defineComponent({
     },
     previewImageUrl() {
       // Reset loading state whenever the preview URL changes
-      if (!this.isAdmin) {
+      if (!this.isAdmin && !this.isPrePurchase) {
         this.imageLoading = true;
         this.imageLoadError = false;
       }
@@ -353,7 +353,7 @@ export default defineComponent({
 
     async updateViewModel(forceUpdate = true) {
       // Only update view model for admin or pre-purchase mode
-      if (!this.isAdmin) {
+      if (!this.isAdmin && !this.isPrePurchase) {
         return;
       }
 

package/src/brand-page-maker/constants/template-constants.ts

@@ -1,4 +1,5 @@
-export const MOBILE_HEIGHT = 636;
+export const MOBILE_HEIGHT = 734;
+export const MOBILE_HEIGHT_POST_PURCHASE = 636;
 export const MOBILE_WIDTH = 358;
 
 export const DESKTOP_HEIGHT = 600;

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

@@ -358,7 +358,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const userStore = useBrandPageMakerUserStore();
       const containerStore = useBrandPageContainerStore();
       const uiContentSettings = useUiContentSettingsStore();
-      const editableLogoStore = useUiEditableLogoStore();
 
       if (!this.selectedTemplateId) {
         return;
@@ -410,19 +409,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           );
         }
       } else {
-        if (containerStore.isPrePurchase) {
-          const logoVariation =
-            logoSettingsStore.selectedLogoTemplateImage?.logoTemplateVersion ??
-            0;
-          const logoTheme =
-            editableLogoStore.editableLogoVariations[logoVariation]?.logoTheme;
-
-          if (logoTheme)
-            uiStore.setLogoTheme({
-              logoTheme: parseLogoThemeToCssStyles(logoTheme),
-            });
-        }
-
         const logoImage =
           logoUtil.safeGetLogoImageFromLogoImageUrl(logoImageUrl);
 

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

@@ -26,8 +26,6 @@ interface GetTemplatesAsyncOptions {
   personalisable?: boolean;
   selectedTemplateToken?: string | false;
   locale?: string;
-  logoS3Token?: string;
-  logoTemplateToken?: string;
 }
 
 export const getTemplatesEndpoint = (templateTypeName: string) =>

package/src/clients/fabric-render-client.ts

@@ -31,7 +31,6 @@ export interface ModifyLogoDataRequest {
   dimensionsType: string;
   variation: string;
   primaryText?: string;
-  generateS3Url?: boolean;
   logo: {
     template: {
       token: string;
@@ -59,8 +58,6 @@ export interface ModifyLogoDataResponse {
   metadata: string | null;
   width: number;
   height: number;
-  expiryDate?: string;
-  s3Token?: string;
 }
 
 export const LOGO_DIMENSION_TYPES = {

package/src/lib.ts

@@ -61,7 +61,6 @@ export type { CriticalResourceURLs } from './brand-page/utils/view-model.util';
 export {
   getOptimalLogoSize,
   calculateOptimizedLogoDimensions,
-  applyLogoImageBase64UrlToBrandPageTemplateModel,
 } from './brand-page/utils/logo.util';
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';

package/src/shared/logo-settings/store/editable-logo-store.ts

@@ -13,7 +13,6 @@ import {
   VIEWPORTS,
   type LogoContent,
   LOGO_VARIATION,
-  type FabricLogoTheme,
 } from '../../../brand-page';
 import { PAGE_SECTIONS } from '../../../shared/page-settings/models';
 
@@ -102,9 +101,6 @@ export interface EditableLogoVariation {
   variationType: string | undefined;
   width: number;
   height: number;
-  expiryDate?: string;
-  s3Token?: string;
-  logoTheme?: FabricLogoTheme;
 }
 
 export interface EditableLogoState {
@@ -137,9 +133,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         variationType: undefined,
         width: 0,
         height: 0,
-        expiryDate: undefined,
-        s3Token: undefined,
-        logoTheme: undefined,
       },
       {
         variationId: LOGO_VARIATION.LOGO_WITH_BACKGROUND,
@@ -148,9 +141,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         variationType: undefined,
         width: 0,
         height: 0,
-        expiryDate: undefined,
-        s3Token: undefined,
-        logoTheme: undefined,
       },
       {
         variationId: LOGO_VARIATION.LOGO_ONLY_WITH_TRANSPARENT_BACKGROUND,
@@ -159,9 +149,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         variationType: LOGO_VARIATION_TYPES.ICON_TRANSPARENT_BACKGROUND_ONLY,
         width: 0,
         height: 0,
-        expiryDate: undefined,
-        s3Token: undefined,
-        logoTheme: undefined,
       },
       {
         variationId: LOGO_VARIATION.TEXT_ONLY_WITH_TRANSPARENT_BACKGROUND,
@@ -170,9 +157,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         variationType: LOGO_VARIATION_TYPES.TEXT_TRANSPARENT_BACKGROUND_ONLY,
         width: 0,
         height: 0,
-        expiryDate: undefined,
-        s3Token: undefined,
-        logoTheme: undefined,
       },
     ],
     logoEdits: {
@@ -467,9 +451,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
       editableLogoVariation.base64 = result.base64;
       editableLogoVariation.width = result.width;
       editableLogoVariation.height = result.height;
-      editableLogoVariation.expiryDate = result.expiryDate;
-      editableLogoVariation.s3Token = result.s3Token;
-      editableLogoVariation.logoTheme = result.logoTheme;
 
       return result;
     },
@@ -511,7 +492,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
 
       const body: ModifyLogoDataRequest = {
         returnJson: payload?.returnJson || false,
-        generateS3Url: true,
         dimensionsType: payload?.dimensionType,
         variation: payload?.variationType,
         primaryText: payload?.defaultPrimaryText,

package/src/shared/template-settings/store/template-settings-store.ts

@@ -21,17 +21,13 @@ import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
-  useLogoStore,
   useUiStore,
 } from '../../../brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
 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 { useUiLogoSettingsStore } from '../../logo-settings/store';
 import {
   templateSettingsTr,
   getCurrentLocale,
@@ -70,7 +66,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
     const brandPageMakerUserStore = useBrandPageMakerUserStore();
 
     // Set renderAsImage to true if not admin AND not pre-purchase
-    const renderAsImage = !brandPageMakerUserStore.isAdmin;
+    const renderAsImage =
+      !brandPageMakerUserStore.isAdmin &&
+      !brandPageContainerStore.isPrePurchase;
 
     return {
       isBusy: false,
@@ -235,8 +233,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
       const brandPageContainerStore = useBrandPageContainerStore();
       const brandPageMakerUserStore = useBrandPageMakerUserStore();
       const logoSettingsStore = useUiLogoSettingsStore();
-      const logoStore = useLogoStore();
-      const editableLogoStore = useUiEditableLogoStore();
       const designTemplateToken = brandPageContainerStore.designTemplateToken;
 
       if (brandPageMakerStore.isInitialising) {
@@ -272,13 +268,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
 
         const currentLocale = getCurrentLocale();
 
-        const isByo = logoStore.logoTemplateAsset?.isByo ?? false;
-        const logoTemplateToken =
-          logoStore.logoTemplateAsset?.token ?? undefined;
-        const logoVariation = logoSettingsStore.selectedLogoImage.logoVariation;
-        const editableLogoVariation =
-          editableLogoStore.editableLogoVariations[logoVariation];
-
         const result =
           await designTemplateClient.getTemplateItemsByTemplateType(
             this.templateType,
@@ -293,8 +282,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
               personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
               selectedTemplateToken: designTemplateToken,
               locale: currentLocale,
-              logoS3Token: !isByo ? editableLogoVariation.s3Token : undefined,
-              logoTemplateToken: isByo ? logoTemplateToken : undefined,
             },
           );
 
@@ -307,7 +294,10 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         const templates = await Promise.all(
           result.paginatedItems.map(async (item) => {
             try {
-              if (brandPageMakerUserStore.isAdmin) {
+              if (
+                brandPageContainerStore.isPrePurchase ||
+                brandPageMakerUserStore.isAdmin
+              ) {
                 // Pre-purchase: full template with brandPageModel for live rendering
                 const template =
                   await designTemplateClient.getTemplateByTemplateToken(
@@ -386,16 +376,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         templateId: payload.templateId,
         forceApply: payload.forceApply,
       });
-
-      if (payload.forceApply) {
-        // When force applying, we need to also refresh the templates to reflect any changes
-        // due to the new logo S3 token after updating the logo
-        await this._setTemplates({
-          templates: [],
-        });
-        await this._setPageNoLoaded({ pageNoLoaded: 0 });
-        await this.loadPageNo({ pageNo: 1 });
-      }
     },
     async onCategorySelected(payload: OnCategorySelectedPayload) {
       await this._setTemplates({
@@ -479,11 +459,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
      */
     setupLogoChangeWatcher() {
       const logoSettingsStore = useUiLogoSettingsStore();
-      const editableLogoStore = useUiEditableLogoStore();
       const brandPageContainerStore = useBrandPageContainerStore();
       const brandPageMakerUserStore = useBrandPageMakerUserStore();
       const { selectedLogoImage } = storeToRefs(logoSettingsStore);
-      const { editableLogoVariations } = storeToRefs(editableLogoStore);
 
       // Watch for changes to logoImage (token or variation changes)
       watch(
@@ -500,6 +478,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             newLogoImage.logoVariation !== oldLogoImage.logoVariation;
 
           if (
+            !brandPageContainerStore.isPrePurchase &&
             !brandPageMakerUserStore.isAdmin &&
             newLogoImage.logoDraftToken &&
             hasLogoChanged
@@ -514,28 +493,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         },
         { deep: true },
       );
-
-      watch(
-        () =>
-          editableLogoVariations.value[selectedLogoImage.value.logoVariation]
-            ?.s3Token,
-        async (newS3Token, oldS3Token) => {
-          if (!oldS3Token) {
-            return;
-          }
-
-          const hasLogoChanged = newS3Token !== oldS3Token;
-
-          if (!brandPageMakerUserStore.isAdmin && hasLogoChanged) {
-            // Reset templates state and reload with new logo
-            // Use the same pattern as onCategorySelected and onSearch
-            await this._setTemplates({ templates: [] });
-            await this._setPageNoLoaded({ pageNoLoaded: 0 });
-            await this._setPageNo({ pageNo: 1 });
-            await this.loadPageNo({ pageNo: 1 });
-          }
-        },
-      );
     },
   },
 });