@designcrowd/library.brand-page 5.16.29-pre-temp-13 → 5.16.29

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;
     },
@@ -501,53 +482,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
       }
     },
 
-    isS3TokenExpired(expiryDate: string | undefined): boolean {
-      if (!expiryDate) {
-        return true;
-      }
-
-      const expiryTime = new Date(expiryDate).getTime();
-      const currentTime = Date.now();
-
-      // Add a 5-minute buffer to refresh before actual expiry
-      const bufferMs = 5 * 60 * 1000;
-
-      return currentTime >= expiryTime - bufferMs;
-    },
-
-    async refreshS3TokenIfExpiredAsync(
-      logoVariation: number,
-    ): Promise<boolean> {
-      const editableLogoVariation = this.editableLogoVariations[logoVariation];
-
-      if (!editableLogoVariation) {
-        return false;
-      }
-
-      const isExpired = this.isS3TokenExpired(editableLogoVariation.expiryDate);
-
-      if (isExpired) {
-        const logoStore = useLogoStore();
-
-        // Only refresh if logo template asset is available
-        if (!logoStore.logoTemplateAsset?.token) {
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(
-              'Cannot refresh expired S3 token: logo template asset not available',
-            );
-          }
-
-          return false;
-        }
-
-        await this.updateEditableLogoImageUrlAsync();
-
-        return true;
-      }
-
-      return false;
-    },
-
     async postEditableLogoRequestAsync(payload: {
       returnJson: boolean;
       dimensionType: string;
@@ -558,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/components/TemplatesSettings.mixin.ts

@@ -19,11 +19,6 @@ import {
 import { templateSettingsTr } from '../../../composables/useTranslate';
 
 import { useEventTracker } from '../../../brand-page-maker/composables/useEventTracker';
-import {
-  useUiEditableLogoStore,
-  useUiLogoSettingsStore,
-} from '../../logo-settings/store';
-import { useLogoStore } from '../../../brand-page-maker/stores/logo-store';
 
 export default defineComponent({
   props: {
@@ -160,9 +155,6 @@ export default defineComponent({
     },
   },
   async mounted() {
-    // Check and refresh S3 token if expired before loading templates
-    await this.checkAndRefreshS3TokenIfExpired();
-
     // load templates on mounted if it is not initialised
     if (!this.pageCount) {
       await this.templateSettingsStore.loadPageNo({
@@ -174,44 +166,6 @@ export default defineComponent({
     this.debounceOnSearch = debounce(this.setSearchText, 500);
   },
   methods: {
-    async checkAndRefreshS3TokenIfExpired() {
-      const brandPageMakerContainerStore = useBrandPageContainerStore();
-      const editableLogoStore = useUiEditableLogoStore();
-      const logoStore = useLogoStore();
-      const logoSettingsStore = useUiLogoSettingsStore();
-
-      // Only check for non-admin (pre-purchase) and non-BYO logos
-      if (brandPageMakerContainerStore.isAdmin) {
-        return;
-      }
-
-      const isByo = logoStore.logoTemplateAsset?.isByo ?? false;
-
-      if (isByo) {
-        return;
-      }
-
-      const logoVariation = logoSettingsStore.selectedLogoImage.logoVariation;
-
-      if (logoVariation === undefined) {
-        return;
-      }
-
-      try {
-        const wasRefreshed =
-          await editableLogoStore.refreshS3TokenIfExpiredAsync(logoVariation);
-
-        if (wasRefreshed && process.env.NODE_ENV !== 'production') {
-          console.log(
-            'S3 token was expired in TemplatesSettings and has been refreshed',
-          );
-        }
-      } catch (error) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.error('Error checking/refreshing S3 token:', error);
-        }
-      }
-    },
     async onNextClicked() {
       if (!this.isLoadMoreBtnEnabled) {
         return;

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,28 +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;
-
-        // Check if S3 token is expired and refresh if needed
-        if (!isByo) {
-          const wasRefreshed =
-            await editableLogoStore.refreshS3TokenIfExpiredAsync(logoVariation);
-
-          if (wasRefreshed) {
-            setTimeout(() => {
-              this.loadPageNo({ pageNo });
-            }, LOAD_PAGE_RETRY_DELAY);
-
-            return;
-          }
-        }
-
-        const editableLogoVariation =
-          editableLogoStore.editableLogoVariations[logoVariation];
-
         const result =
           await designTemplateClient.getTemplateItemsByTemplateType(
             this.templateType,
@@ -308,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,
             },
           );
 
@@ -322,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(
@@ -401,14 +376,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         templateId: payload.templateId,
         forceApply: payload.forceApply,
       });
-
-      if (payload.forceApply) {
-        await this._setTemplates({
-          templates: [],
-        });
-        await this._setPageNoLoaded({ pageNoLoaded: 0 });
-        await this.loadPageNo({ pageNo: 1 });
-      }
     },
     async onCategorySelected(payload: OnCategorySelectedPayload) {
       await this._setTemplates({
@@ -492,12 +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);
-
-      let s3TokenDebounceTimer: ReturnType<typeof setTimeout> | null = null;
 
       // Watch for changes to logoImage (token or variation changes)
       watch(
@@ -514,6 +478,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             newLogoImage.logoVariation !== oldLogoImage.logoVariation;
 
           if (
+            !brandPageContainerStore.isPrePurchase &&
             !brandPageMakerUserStore.isAdmin &&
             newLogoImage.logoDraftToken &&
             hasLogoChanged
@@ -528,39 +493,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         },
         { deep: true },
       );
-
-      // Watch for S3 token changes (when user edits logo colors, text, etc.)
-      // Debounced to avoid excessive reloads during rapid edits
-      watch(
-        () =>
-          editableLogoVariations.value[selectedLogoImage.value.logoVariation]
-            ?.s3Token,
-        async (newS3Token, oldS3Token) => {
-          if (s3TokenDebounceTimer) {
-            clearTimeout(s3TokenDebounceTimer);
-          }
-
-          if (!oldS3Token) {
-            return;
-          }
-
-          if (newS3Token === oldS3Token) {
-            return;
-          }
-
-          if (brandPageMakerUserStore.isAdmin) {
-            return;
-          }
-
-          // Debounce the reload by 500ms to avoid rapid successive reloads
-          s3TokenDebounceTimer = setTimeout(async () => {
-            await this._setTemplates({ templates: [] });
-            await this._setPageNoLoaded({ pageNoLoaded: 0 });
-            await this._setPageNo({ pageNo: 1 });
-            await this.loadPageNo({ pageNo: 1 });
-          }, 500);
-        },
-      );
     },
   },
 });