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

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

@@ -13,6 +13,7 @@ import {
   VIEWPORTS,
   type LogoContent,
   LOGO_VARIATION,
+  type FabricLogoTheme,
 } from '../../../brand-page';
 import { PAGE_SECTIONS } from '../../../shared/page-settings/models';
 
@@ -101,6 +102,9 @@ export interface EditableLogoVariation {
   variationType: string | undefined;
   width: number;
   height: number;
+  expiryDate?: string;
+  s3Token?: string;
+  logoTheme?: FabricLogoTheme;
 }
 
 export interface EditableLogoState {
@@ -133,6 +137,9 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         variationType: undefined,
         width: 0,
         height: 0,
+        expiryDate: undefined,
+        s3Token: undefined,
+        logoTheme: undefined,
       },
       {
         variationId: LOGO_VARIATION.LOGO_WITH_BACKGROUND,
@@ -141,6 +148,9 @@ 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,
@@ -149,6 +159,9 @@ 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,
@@ -157,6 +170,9 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         variationType: LOGO_VARIATION_TYPES.TEXT_TRANSPARENT_BACKGROUND_ONLY,
         width: 0,
         height: 0,
+        expiryDate: undefined,
+        s3Token: undefined,
+        logoTheme: undefined,
       },
     ],
     logoEdits: {
@@ -451,6 +467,9 @@ 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;
     },
@@ -482,6 +501,53 @@ 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;
@@ -492,6 +558,7 @@ 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,6 +19,11 @@ 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: {
@@ -155,6 +160,9 @@ 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({
@@ -166,6 +174,44 @@ 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,13 +21,17 @@ 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 { useUiLogoSettingsStore } from '../../logo-settings/store';
+import {
+  useUiEditableLogoStore,
+  useUiLogoSettingsStore,
+} from '../../logo-settings/store';
 import {
   templateSettingsTr,
   getCurrentLocale,
@@ -66,9 +70,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
     const brandPageMakerUserStore = useBrandPageMakerUserStore();
 
     // Set renderAsImage to true if not admin AND not pre-purchase
-    const renderAsImage =
-      !brandPageMakerUserStore.isAdmin &&
-      !brandPageContainerStore.isPrePurchase;
+    const renderAsImage = !brandPageMakerUserStore.isAdmin;
 
     return {
       isBusy: false,
@@ -233,6 +235,8 @@ 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) {
@@ -268,6 +272,28 @@ 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,
@@ -282,6 +308,8 @@ 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,
             },
           );
 
@@ -294,10 +322,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         const templates = await Promise.all(
           result.paginatedItems.map(async (item) => {
             try {
-              if (
-                brandPageContainerStore.isPrePurchase ||
-                brandPageMakerUserStore.isAdmin
-              ) {
+              if (brandPageMakerUserStore.isAdmin) {
                 // Pre-purchase: full template with brandPageModel for live rendering
                 const template =
                   await designTemplateClient.getTemplateByTemplateToken(
@@ -376,6 +401,14 @@ 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({
@@ -459,9 +492,12 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
      */
     setupLogoChangeWatcher() {
       const logoSettingsStore = useUiLogoSettingsStore();
-      const brandPageContainerStore = useBrandPageContainerStore();
+      const editableLogoStore = useUiEditableLogoStore();
       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(
@@ -478,7 +514,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             newLogoImage.logoVariation !== oldLogoImage.logoVariation;
 
           if (
-            !brandPageContainerStore.isPrePurchase &&
             !brandPageMakerUserStore.isAdmin &&
             newLogoImage.logoDraftToken &&
             hasLogoChanged
@@ -493,6 +528,39 @@ 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);
+        },
+      );
     },
   },
 });