@designcrowd/library.brand-page 5.15.24 → 5.15.25-2

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

@@ -171,11 +171,28 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     return;
                 }
                 this._setPageCount({ pageCount: result.pageCount });
-                const templates = (await Promise.all(result.paginatedItems.map(async (i) => {
-                    const template = await designTemplateClient.getTemplateByTemplateToken(i.designTemplateToken);
-                    return this.safeMapToTemplateSettingsTemplate(template);
-                }))).filter((t) => Boolean(t));
-                this._addTemplates({ templates });
+                const templates = await Promise.all(result.paginatedItems.map(async (i) => {
+                    try {
+                        const template = await designTemplateClient.getTemplateByTemplateToken(i.designTemplateToken);
+                        const isAiTemplate = uiStore.personalisationData &&
+                            uiStore.personalisationData.length > 0 &&
+                            this.selectedTab.key === TEMPLATE_TABS.AI;
+                        if (brandPageContainerStore.isPrePurchase || isAiTemplate) {
+                            const result = await this.safeMapToTemplateSettingsTemplate(template);
+                            return result;
+                        }
+                        else {
+                            return {
+                                id: i.designTemplateToken,
+                            };
+                        }
+                    }
+                    catch (error) {
+                        return null;
+                    }
+                }));
+                const validTemplates = templates.filter((template) => template !== null);
+                this._addTemplates({ templates: validTemplates });
                 this._setPageNoLoaded({ pageNoLoaded: pageNo });
             }
             finally {

package/package.json

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

package/src/brand-page/components/page/Page.vue

@@ -50,9 +50,9 @@
                   'tw-cursor-pointer': context.isPreview,
                   'brand-page__content--outline-selected': isHeaderSelected,
                 }"
+                :is-mobile="true"
                 @open-side-menu="openSideMenu"
                 @header-container-click="onPageHeaderContainerClick"
-                :is-mobile="true"
               />
             </template>
           </MediaQuery>
@@ -211,9 +211,9 @@
                     isFooterSelected,
                 }"
                 :show-brand-crowd-logo="showBrandCrowdLogo"
+                :is-mobile="true"
                 @footer-container-click="onPageFooterContainerClick"
                 @on-logo-click="onLogoClick"
-                :is-mobile="true"
               />
             </template>
           </MediaQuery>

package/src/brand-page/utils/migration/migration-07.ts

@@ -1,12 +1,14 @@
-import {
-  BRAND_PAGE_TYPES,
-  DEFAULT_LOGO_HEIGHT,
-  DEFAULT_LOGO_WIDTH,
+import type {
   PageFooterDesktop,
   PageFooterMobile,
   PageHeaderDesktop,
   PageHeaderMobile,
 } from '../..';
+import {
+  BRAND_PAGE_TYPES,
+  DEFAULT_LOGO_HEIGHT,
+  DEFAULT_LOGO_WIDTH,
+} from '../..';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { calculateLogoDimensions } from '../logo.util';
 import type { MigrationData } from '../migration.util';

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

@@ -15,17 +15,24 @@ import {
   getBrandPageViewModelFromBrandPageModel,
 } from '../../../brand-page/utils';
 import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
-import type { TemplateSettingsTemplate } from '../../../shared/template-settings/models';
+import {
+  TEMPLATE_TABS,
+  type TemplateSettingsTemplate,
+} from '../../../shared/template-settings/models';
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '../../constants';
-import { useBrandPageMakerStore } from '../../stores';
+import {
+  useBrandPageContainerStore,
+  useBrandPageMakerStore,
+} from '../../stores';
 import {
   applyLogoImageBase64UrlToBrandPageTemplateModel,
   applyLogoImageToBrandPageTemplateModel,
   applyLogoTemplateImageToBrandPageTemplateModel,
 } from '../../../brand-page/utils/logo.util';
 import { useVideoStore } from '../../../lib';
+import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
 
 const DEBOUNCE_IN_MS = 250;
 
@@ -41,18 +48,29 @@ interface TemplatePreviewData {
   renderHeight: number;
   renderWidth: number;
   rootStyles: BrandPageCssStyle;
+  imageLoadError: boolean;
+  imageLoading: boolean;
 }
 
 export default defineComponent({
   emits: ['template-selected'],
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
+    const brandPageContainerStore = useBrandPageContainerStore();
+    const templateSettingsStore = useUiTemplateSettingsStore();
 
     return {
       selectedTemplateId: computed(
         () => brandPageMakerStore.selectedTemplateId,
       ),
+      isPrePurchase: computed(() => brandPageContainerStore.isPrePurchase),
+      runtimeEnvironment: computed(
+        () => brandPageContainerStore.runtimeEnvironment,
+      ),
+      selectedTab: computed(() => templateSettingsStore.selectedTab),
+      templateSettingsStore,
       brandPageMakerStore,
+      brandPageContainerStore,
     };
   },
   props: {
@@ -111,6 +129,8 @@ export default defineComponent({
       renderWidth: 400,
       rootStyles: {},
       viewModel: undefined,
+      imageLoadError: false,
+      imageLoading: true,
     };
 
     return data;
@@ -182,6 +202,16 @@ export default defineComponent({
       return this.template.isPersonalisable || false;
     },
 
+    isAiTemplate(): boolean {
+      return this.selectedTab.key === TEMPLATE_TABS.AI;
+    },
+
+    shouldRenderAsPage(): boolean {
+      const result = this.isPrePurchase || this.isAiTemplate;
+
+      return result;
+    },
+
     cssVariablesStyle(): Record<string, string> {
       if (!this.logoTheme) {
         return {};
@@ -202,17 +232,25 @@ export default defineComponent({
 
       return cssVariables;
     },
+
+    previewImageUrl(): string {
+      return this.generatePreviewImageUrl();
+    },
   },
   watch: {
+    template() {
+      if (this.isPrePurchase) {
+        this.updateViewModel();
+      }
+    },
     logoTheme: {
       handler() {
-        this.updateViewModel();
+        if (this.isPrePurchase) {
+          this.updateViewModel();
+        }
       },
       deep: true,
     },
-    template() {
-      this.updateViewModel();
-    },
   },
   created() {
     this.updateViewModel(false);
@@ -260,7 +298,50 @@ export default defineComponent({
       this.rootStyles = styles;
     },
 
+    onImageError() {
+      console.warn(
+        `Failed to load preview image for template ${this.template.id}`,
+      );
+      this.imageLoadError = true;
+      this.imageLoading = false;
+    },
+
+    onImageLoad() {
+      this.imageLoadError = false;
+      this.imageLoading = false;
+    },
+
+    generatePreviewImageUrl(): string {
+      const baseUrl = this.getPreviewBaseUrl();
+      const logoDraftToken =
+        this.logoImage?.logoDraftToken ||
+        '0B660926-D94A-4E29-99D1-F07E67AA6E49';
+
+      const deviceType =
+        this.brandPageMakerStore.brandPageType === 'brandSite'
+          ? 'desktop'
+          : 'mobile';
+
+      return `${baseUrl}/preview/template/${this.template.id}/${logoDraftToken}?deviceType=${deviceType}`;
+    },
+
+    getPreviewBaseUrl(): string {
+      const domainSuffix = '.brand.page';
+
+      return `https://preview-${this.runtimeEnvironment}${domainSuffix}`;
+    },
+
+    regeneratePreview() {
+      this.imageLoadError = false;
+      this.imageLoading = true;
+      this.$forceUpdate();
+    },
+
     async updateViewModel(forceUpdate = true) {
+      if (!this.isPrePurchase) {
+        return;
+      }
+
       const videoStore = useVideoStore();
 
       let model = this.template.brandPageModel;

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

@@ -18,8 +18,11 @@
           <span class="tw-sr-only">Select Template</span>
         </button>
         <!-- End Overlay-->
-        <!-- Start Page -->
-        <div class="template-preview__page" :style="cssVariablesStyle">
+        <div
+          v-if="shouldRenderAsPage"
+          class="template-preview__page"
+          :style="cssVariablesStyle"
+        >
           <Page
             v-if="viewModel"
             :context="context"
@@ -29,7 +32,28 @@
             @on-set-preview-styles="onSetPreviewStyles"
           />
         </div>
-        <!-- End Page -->
+        <!-- Start Preview Image -->
+        <div v-else class="template-preview__image-container">
+          <!-- Loading spinner -->
+          <div
+            v-if="imageLoading"
+            class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-gray-50 tw-z-10"
+          >
+            <div class="tw-scale-150">
+              <Loader size="lg" />
+            </div>
+          </div>
+
+          <img
+            :src="previewImageUrl"
+            :alt="`Template ${template.id} preview`"
+            class="template-preview__image"
+            :class="{ 'tw-opacity-0': imageLoading }"
+            @error="onImageError"
+            @load="onImageLoad"
+          />
+        </div>
+        <!-- End Preview Image -->
         <!-- Start personalisation tag -->
         <div
           v-if="isPersonalisable"
@@ -45,12 +69,14 @@
 </template>
 <script>
 import { defineComponent } from 'vue';
+import { Loader } from '@designcrowd/fe-shared-lib';
 import TemplatePreviewMixin from './TemplatePreview.mixin.ts';
 import Page from '../../../brand-page/components/page/Page.vue';
 
 export default defineComponent({
   components: {
     Page,
+    Loader,
   },
   mixins: [TemplatePreviewMixin],
   setup(props, context) {
@@ -68,11 +94,23 @@ export default defineComponent({
   @apply tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-opacity-0 tw-cursor-pointer tw-w-full tw-h-full;
 }
 
-.template-preview__page {
+.template-preview__image-container {
   @apply tw-pointer-events-none;
+  @apply tw-w-full tw-h-full;
 }
 
+.template-preview__image {
+  @apply tw-w-full tw-h-full tw-object-fill;
+  transition: filter 0.2s ease;
+}
+
+.template-preview__page {
+  @apply tw-pointer-events-none;
+}
 .template-preview :deep(.c-shape-background) {
   @apply tw-absolute;
 }
+.template-preview__image :deep(.c-shape-background) {
+  @apply tw-absolute;
+}
 </style>

package/src/brand-page-maker/components/template-preview-with-state/TemplatePreviewWithState.vue

@@ -41,12 +41,10 @@ const pageSettingsStore = useUiPageSettingsStore();
 
 const logoTheme = computed(() => uiStore.logoTheme);
 
-const personalisationData = computed(() =>
-  uiStore.personalisationData?.length
-    ? uiStore.personalisationData[props.template.personalisationContentIndex]
-        .userPersonalisation
-    : undefined,
-);
+const personalisationData = computed(() => {
+  const index = props.template.personalisationContentIndex;
+  return uiStore.personalisationData?.[index]?.userPersonalisation;
+});
 
 const templateLogoImage = computed(() => {
   const desktopPageHeader =

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

@@ -360,7 +360,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         return;
       }
 
-      const template = templateSettingsStore.getTemplateByTemplateId(
+      let template = templateSettingsStore.getTemplateByTemplateId(
         this.selectedTemplateId,
       );
 
@@ -372,6 +372,21 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         return;
       }
 
+      // If template doesn't have brandPageModel (post-purchase mode), fetch it
+      if (!template.brandPageModel) {
+        template = await templateSettingsStore.getCachedTemplateByTokenAsync(
+          this.selectedTemplateId,
+        );
+
+        if (!template || !template.brandPageModel) {
+          if (process.env.NODE_ENV !== 'production') {
+            throw new Error('Failed to fetch template brandPageModel');
+          }
+
+          return;
+        }
+      }
+
       this.isApplyingTemplate = true;
 
       let brandPageModel = cloneDeep(template.brandPageModel);

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

@@ -273,20 +273,41 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
 
         this._setPageCount({ pageCount: result.pageCount });
 
-        const templates = (
-          await Promise.all(
-            result.paginatedItems.map(async (i) => {
+        const templates = await Promise.all(
+          result.paginatedItems.map(async (i) => {
+            try {
               const template =
                 await designTemplateClient.getTemplateByTemplateToken(
                   i.designTemplateToken,
                 );
 
-              return this.safeMapToTemplateSettingsTemplate(template);
-            }),
-          )
-        ).filter((t): t is TemplateSettingsTemplate => Boolean(t));
+              const isAiTemplate =
+                uiStore.personalisationData &&
+                uiStore.personalisationData.length > 0 &&
+                this.selectedTab.key === TEMPLATE_TABS.AI;
+
+              if (brandPageContainerStore.isPrePurchase || isAiTemplate) {
+                const result =
+                  await this.safeMapToTemplateSettingsTemplate(template);
+
+                return result;
+              } else {
+                return {
+                  id: i.designTemplateToken,
+                } as TemplateSettingsTemplate;
+              }
+            } catch (error) {
+              return null;
+            }
+          }),
+        );
+
+        const validTemplates = templates.filter(
+          (template) => template !== null,
+        );
+
+        this._addTemplates({ templates: validTemplates });
 
-        this._addTemplates({ templates });
         this._setPageNoLoaded({ pageNoLoaded: pageNo });
       } finally {
         this._setIsBusy({ isBusy: false });