@designcrowd/library.brand-page 5.15.15 → 5.15.16

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.d.ts

@@ -111,6 +111,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../../../brand-page-maker/stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -625,6 +625,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../../../brand-page-maker/stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.d.ts

@@ -570,6 +570,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../../../brand-page-maker/stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

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

@@ -101,6 +101,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../../brand-page-maker/stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -3791,6 +3791,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../../../brand-page-maker/stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

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

@@ -4291,6 +4291,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../../../brand-page-maker/stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -135,6 +135,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../brand-page-maker/stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/lib/src/shared/side-bar/components/SideBar.mixin.d.ts

@@ -264,6 +264,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     'side-bar-content': import("vue").Ref<null, null>;
     isPrepurchase: import("vue").ComputedRef<boolean>;
+    isBrandPageLoaded: import("vue").ComputedRef<boolean>;
 }, {
     SIDE_BAR_CONTENT_ID: string;
     sideBarContentRef: string;

package/lib/src/shared/side-bar/components/SideBar.mixin.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref } from 'vue';
 import { useUiSideBarStore } from '../store';
-import { useBrandPageContainerStore, useBrandPageMakerUserStore, } from '../../../brand-page-maker/stores';
+import { useBrandPageContainerStore, useBrandPageMakerUserStore, useBrandPageMakerStore, } from '../../../brand-page-maker/stores';
 import { SIDE_BAR_CONTENT_ID } from '../../content-settings/constants';
 import { useUiContentSettingsStore } from '../../content-settings/store';
 export default defineComponent({
@@ -24,6 +24,7 @@ export default defineComponent({
         const brandPageContainerStore = useBrandPageContainerStore();
         const userStore = useBrandPageMakerUserStore();
         const contentSettingsStore = useUiContentSettingsStore();
+        const brandPageMakerStore = useBrandPageMakerStore();
         return {
             brandPageContainerStore,
             tabs: computed(() => sideBarStore.tabs),
@@ -35,6 +36,7 @@ export default defineComponent({
             userStore,
             'side-bar-content': ref(null),
             isPrepurchase: computed(() => brandPageContainerStore.isPrePurchase),
+            isBrandPageLoaded: computed(() => brandPageMakerStore.isBrandPageLoaded),
         };
     },
     data: () => ({ SIDE_BAR_CONTENT_ID, sideBarContentRef: 'side-bar-content' }),
@@ -68,6 +70,9 @@ export default defineComponent({
             }
         },
         shouldDisplayTab(tab) {
+            if (this.isBrandPageLoaded === false && this.isPrePurchase === false) {
+                return false;
+            }
             if (this.isAdmin && tab.isDisabledForAdmin) {
                 return false;
             }

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -541,6 +541,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../../brand-page-maker/stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/package.json

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

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

@@ -39,6 +39,7 @@ import { useUiTemplateSettingsStore } from '../../../shared/template-settings/st
 import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
 import { useRouter } from 'vue-router';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
+import AssetLibraryClient from '../../../clients/asset-library-clients';
 import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
 import type { ShopConfigData } from '../../../brand-page/models/shop.model';
 import { useProductConfigStore } from '../../../brand-page-maker/stores/product-config/product-config-store';
@@ -49,6 +50,7 @@ import { commonTr } from '../../../composables/useTranslate';
 export interface BrandPageMakerViewModel {
   adminPreviewLogoTemplateModels?: AdminPreviewLogoTemplateModel[];
   brandPageData?: string;
+  brandPageMetadataS3Url?: string;
   emailAddress: string;
   features: UserFeatures;
   logoVariationImageUrls: string[];
@@ -139,6 +141,7 @@ export default defineComponent({
   data() {
     return {
       mounted: false,
+      isBrandPageLoaded: false,
       debounceOnResize: undefined as DebounceHandle | undefined,
       showSaveSuccessMessage: false,
     };
@@ -156,10 +159,24 @@ export default defineComponent({
       console.error('logo theme is missing');
     }
 
-    const brandPage =
-      typeof this.viewModel?.brandPageData === 'string'
-        ? (JSON.parse(this.viewModel.brandPageData!) as BrandPageData)
-        : createInitialBrandPage(this.viewModel.brandPageType);
+    let brandPage: BrandPageData;
+
+    if (this.viewModel?.brandPageMetadataS3Url) {
+      const assetClient = new AssetLibraryClient({
+        baseUrl: '',
+      });
+      const metadata = await assetClient.getBrandPageMetadataAsync(
+        this.viewModel.brandPageMetadataS3Url,
+      );
+
+      if (metadata) {
+        brandPage = metadata;
+      } else {
+        brandPage = this.getBrandPageFromFallback(this.viewModel);
+      }
+    } else {
+      brandPage = this.getBrandPageFromFallback(this.viewModel);
+    }
 
     const shopConfigData = this.viewModel?.shopConfigData?.trim()
       ? (JSON.parse(this.viewModel.shopConfigData) as ShopConfigData)
@@ -226,6 +243,17 @@ export default defineComponent({
       this.viewModel.initialCategories,
     );
 
+    // Mark brand page as fully loaded
+    this.isBrandPageLoaded = true;
+    this.brandPageMakerStore.setIsBrandPageLoaded(true);
+
+    // set initial screen size mode
+    if (this.isBrandPageOrIsBrandContact) {
+      this.brandPageMakerStore.setViewport({ viewport: VIEWPORTS.mobile });
+    } else {
+      this.setViewportBasedOnDeviceWidth(true);
+    }
+
     this.$emit(EVENTS.Initialised);
   },
   mounted() {
@@ -256,6 +284,14 @@ export default defineComponent({
     }, 800);
   },
   methods: {
+    getBrandPageFromFallback(viewModel): BrandPageData {
+      if (typeof viewModel?.brandPageData === 'string') {
+        return JSON.parse(viewModel.brandPageData!) as BrandPageData;
+      } else {
+        return createInitialBrandPage(viewModel.brandPageType);
+      }
+    },
+
     onResizeWithDebounce() {
       if (this.debounceOnResize) {
         this.debounceOnResize();

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -52,6 +52,7 @@
           class="c-brand-page-maker__inner tw-bg-grayscale-200 tw-box-border tw-flex tw-flex-col tw-w-full tw-items-center lg:tw-pt-4 tw-relative tw-overflow-auto"
         >
           <Device
+            v-if="isBrandPageLoaded"
             :is-mobile-device="isMobileDevice"
             :is-design-com="isDesignCom"
             :has-quick-links="isPublished"
@@ -61,6 +62,12 @@
               <PreviewWithState :device-mode="deviceMode" />
             </div>
           </Device>
+          <div
+            v-else
+            class="tw-flex tw-items-center tw-justify-center tw-h-full tw-text-grayscale-600"
+          >
+            <Loader />
+          </div>
         </div>
         <div
           class="js-bp-action-bar tw-hidden lg:tw-block tw-order-first lg:tw-order-last tw-w-full lg:tw-mb-0"
@@ -98,7 +105,7 @@
 </template>
 <script>
 import { computed } from 'vue';
-import { HelloBar } from '@designcrowd/fe-shared-lib';
+import { HelloBar, Loader } from '@designcrowd/fe-shared-lib';
 import ActionBar from '../action-bar/ActionBar.vue';
 import BrandPageBackgroundSettings from '../brandpage-background-settings/BrandPageBackgroundSettings.vue';
 import ContentSettings from '../../../shared/content-settings/components/content-settings/ContentSettings.vue';
@@ -125,6 +132,7 @@ import { useLocalisedRouteStore } from '../../stores/route/localised-route-store
 export default {
   components: {
     HelloBar,
+    Loader,
     ActionBar,
     AdminBackgroundSettings,
     BackgroundSettings: BrandPageBackgroundSettings,

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

@@ -133,6 +133,7 @@ export interface BrandPageMakerState {
   isPageNavigating: boolean;
   isChangeTemplateConfirmModalVisible: boolean;
   isInitialising: boolean;
+  isBrandPageLoaded: boolean;
   isModifiedAfterTemplateApplied: boolean;
   notificationMessageQueue: NotificationMessage[];
   selectedTemplateId: string | false;
@@ -199,6 +200,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
     isApplyingTemplate: false,
     isChangeTemplateConfirmModalVisible: false,
     isInitialising: false,
+    isBrandPageLoaded: false,
     isPageNavigating: false,
     isModifiedAfterTemplateApplied: false,
     notificationMessageQueue: [],
@@ -315,6 +317,9 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
     setIsInitialising(payload: { isInitialising: boolean }): void {
       this.isInitialising = payload.isInitialising;
     },
+    setIsBrandPageLoaded(isLoaded: boolean): void {
+      this.isBrandPageLoaded = isLoaded;
+    },
     setIsModifiedAfterTemplateApplied({
       isModified,
     }: SetIsModifiedPayload = {}) {

package/src/clients/asset-library-clients.ts

@@ -4,6 +4,7 @@ import type {
   ShapeCategoryModel,
   ShapeSearchResponseModel,
 } from '../models/shapeModels';
+import type { BrandPageData } from '../brand-page';
 
 export default class AssetLibraryClient {
   baseUrl: string;
@@ -121,4 +122,23 @@ export default class AssetLibraryClient {
       return response.data;
     });
   }
+
+  async getBrandPageMetadataAsync(
+    s3Url: string,
+  ): Promise<BrandPageData | null> {
+    try {
+      const response = await axios.get(s3Url, {
+        timeout: 30000,
+        headers: {
+          Accept: 'application/json',
+        },
+      });
+
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching brand page metadata:', error);
+
+      return null;
+    }
+  }
 }

package/src/shared/side-bar/components/SideBar.mixin.ts

@@ -5,6 +5,7 @@ import type { SideBarTab } from '../models';
 import {
   useBrandPageContainerStore,
   useBrandPageMakerUserStore,
+  useBrandPageMakerStore,
 } from '../../../brand-page-maker/stores';
 import { SIDE_BAR_CONTENT_ID } from '../../content-settings/constants';
 import { useUiContentSettingsStore } from '../../content-settings/store';
@@ -30,6 +31,7 @@ export default defineComponent({
     const brandPageContainerStore = useBrandPageContainerStore();
     const userStore = useBrandPageMakerUserStore();
     const contentSettingsStore = useUiContentSettingsStore();
+    const brandPageMakerStore = useBrandPageMakerStore();
 
     return {
       brandPageContainerStore,
@@ -44,6 +46,7 @@ export default defineComponent({
       userStore,
       'side-bar-content': ref(null),
       isPrepurchase: computed(() => brandPageContainerStore.isPrePurchase),
+      isBrandPageLoaded: computed(() => brandPageMakerStore.isBrandPageLoaded),
     };
   },
   data: () => ({ SIDE_BAR_CONTENT_ID, sideBarContentRef: 'side-bar-content' }),
@@ -78,6 +81,10 @@ export default defineComponent({
       }
     },
     shouldDisplayTab(tab: SideBarTab): boolean {
+      if (this.isBrandPageLoaded === false && this.isPrePurchase === false) {
+        return false;
+      }
+
       if (this.isAdmin && tab.isDisabledForAdmin) {
         return false;
       }

package/src/shared/side-bar/components/SideBar.vue

@@ -20,18 +20,26 @@
         'tw-pt-36': hasQuickLinks,
       }"
     >
-      <div class="c-sidebar-content__inner">
+      <div
+        v-if="!isBrandPageLoaded && !isPrepurchase"
+        class="tw-flex tw-items-center tw-justify-center tw-h-full"
+      >
+        <Loader />
+      </div>
+      <div v-else class="c-sidebar-content__inner">
         <slot name="tab" />
       </div>
     </div>
   </div>
 </template>
 <script>
+import { Loader } from '@designcrowd/fe-shared-lib';
 import SidebarMixin from './SideBar.mixin.ts';
 import SideBarTabButton from './SideBarTabButton.vue';
 
 export default {
   components: {
+    Loader,
     SideBarTabButton,
   },
   mixins: [SidebarMixin],