@designcrowd/library.brand-page 5.16.2 → 5.16.3-background-2

package/src/brand-page/components/page/Page.stories.ts

@@ -4,6 +4,7 @@ import type { ContentViewModel, BrandPageViewModel } from '../../view-models';
 import {
   mapToPageFooterViewModel,
   mapToPageHeaderViewModel,
+  mapToPageStyleViewModel,
   mapToViewModel,
 } from '../../utils';
 import {
@@ -41,7 +42,7 @@ const pages = brandPageModel.pages.map((p) => ({
 
 const viewModel: BrandPageViewModel = {
   showBrandCrowdLogo: true,
-  styles: brandPageModel.styles,
+  styles: mapToPageStyleViewModel(brandPageModel.styles, {}),
   headerViewModelDesktop: mapToPageHeaderViewModel(
     brandPageModel.pageHeaderDesktop,
     brandPageModel.styles,

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

@@ -1,5 +1,18 @@
 <template>
-  <div class="brand-page-root-background" :style="rootBackgroundStyles" />
+  <div
+    class="brand-page-root-background"
+    :style="rootbackgroundStylesViewModel"
+  />
+  <Media
+    v-if="viewModel.styles?.backgroundStylesViewModel?.mediaViewModel"
+    :media="viewModel.styles.backgroundStylesViewModel.mediaViewModel"
+    :context="context"
+    :img-classes="{
+      'tw-w-full tw-h-full tw-object-cover tw-absolute tw-left-0 tw-top-0 tw-z-0': true,
+    }"
+    :media-type="viewModel.styles.backgroundStylesViewModel.mediaViewModel.type"
+    content-index="0"
+  />
   <div
     class="brand-page-root"
     :style="rootElementStyles"
@@ -50,9 +63,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 +224,9 @@
                     isFooterSelected,
                 }"
                 :show-brand-crowd-logo="showBrandCrowdLogo"
+                :is-mobile="true"
                 @footer-container-click="onPageFooterContainerClick"
                 @on-logo-click="onLogoClick"
-                :is-mobile="true"
               />
             </template>
           </MediaQuery>
@@ -266,6 +279,7 @@ import PageFooter from '../page-footer/PageFooter.vue';
 import NavigationSideMenu from '../navigation/navigation-side-menu/NavigationSideMenu.vue';
 import BrandSiteNavigationLayout from './BrandSiteNavigationLayout.vue';
 import MediaQuery from '../media-query';
+import Media from '../media/Media.vue';
 
 export default {
   components: {
@@ -278,6 +292,7 @@ export default {
     PageHeader,
     PageFooter,
     BrandSiteNavigationLayout,
+    Media,
   },
   mixins: [PageMixin],
   setup(props) {

package/src/brand-page/models/index.ts

@@ -29,6 +29,7 @@ import { EMPTY_LOGO_IMAGE_MODEL, LogoStyles } from './logo.model';
 import type { LogoImageModel, LogoTemplateImageModel } from './logo.model';
 import cloneDeep from 'lodash.clonedeep';
 import type { BrandPagePaymentConfig } from './payment.model';
+import type { MediaViewModel } from '../view-models';
 
 export * from './brand-page-context.model';
 export * from './payment.model';
@@ -83,6 +84,7 @@ export class BackgroundStyles {
   public backgroundImageUrl: string;
   public backgroundShapes: BackgroundShape[];
   public personalisationRole?: PersonalisationRole;
+  public media?: AbstractMedia;
 
   constructor(option: Partial<BackgroundStyles> = {}) {
     this.backgroundImageUrl = option.backgroundImageUrl || '';
@@ -96,6 +98,7 @@ export class BackgroundStyles {
         background: '',
       };
     this.personalisationRole = option.personalisationRole;
+    this.media = option.media || undefined;
   }
 }
 

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -327,6 +327,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
           "background": "",
         },
         "backgroundShapes": [],
+        "media": undefined,
         "personalisationRole": undefined,
         "style": {
           "background": "logo-background-color",
@@ -744,6 +745,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
           "background": "",
         },
         "backgroundShapes": [],
+        "media": undefined,
         "personalisationRole": undefined,
         "style": {
           "background": "logo-background-color",
@@ -1168,6 +1170,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
           "background": "",
         },
         "backgroundShapes": [],
+        "media": undefined,
         "personalisationRole": undefined,
         "style": {
           "background": "logo-background-color",

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -365,6 +365,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
           "background": "",
         },
         "backgroundShapes": [],
+        "media": undefined,
         "personalisationRole": undefined,
         "style": {
           "background": "logo-background-color",

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -339,6 +339,7 @@ BrandPageModel {
         "background": "",
       },
       "backgroundShapes": [],
+      "media": undefined,
       "personalisationRole": undefined,
       "style": {
         "background": "#0000ff",
@@ -795,6 +796,7 @@ BrandPageModel {
         "background": "",
       },
       "backgroundShapes": [],
+      "media": undefined,
       "personalisationRole": undefined,
       "style": {
         "background": "#0000ff",

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/utils/view-model.util.ts

@@ -40,6 +40,7 @@ import type {
   TextShapeItem,
   GettyVideoMedia,
   AbstractMedia,
+  BackgroundStyles,
 } from '../models';
 import { ButtonStyles, SENSITIVE_CONTENT_TYPES, VIEWPORTS } from '../models';
 import {
@@ -78,6 +79,8 @@ import type {
   ShopViewModel,
   BookingSectionViewModel,
   GettyVideoViewModel,
+  PageStylesViewModel,
+  BackgroundStylesViewModel,
 } from '../view-models';
 import { isHexTransparent, setRgbAlpha } from './color.util';
 import type { ContentTextStylePropertyKey } from '../constants';
@@ -985,6 +988,22 @@ export const mapToBookingSectionViewModel = (
   );
 };
 
+export const mapToPageStyleViewModel = (
+  pageStyles: PageStyles,
+  options: ViewModelMappingOptions,
+): PageStylesViewModel => {
+  return {
+    backgroundStylesViewModel: mapBackgroundStylesToViewModel(
+      pageStyles.backgroundStyles,
+      options,
+    ),
+    buttonStyles: pageStyles.buttonStyles,
+    logoStyles: pageStyles.logoStyles,
+    textStyles: pageStyles.textStyles,
+    galleryStyles: pageStyles.galleryStyles,
+  };
+};
+
 export const mapToPageHeaderViewModel = (
   pageHeader: PageHeaderDesktop | PageHeaderMobile,
   pageStyles: PageStyles,
@@ -1284,6 +1303,26 @@ interface ViewModelMappingOptions {
   ) => void;
 }
 
+const mapBackgroundStylesToViewModel = (
+  backgroundStyles: BackgroundStyles,
+  options: ViewModelMappingOptions,
+): BackgroundStylesViewModel => {
+  // TODO(jyao): These need to be mapped to a view model eventually
+  return {
+    style: backgroundStyles.style,
+    backgroundShapeStyle: backgroundStyles.backgroundShapeStyle,
+    backgroundImageUrl: backgroundStyles.backgroundImageUrl,
+    backgroundShapes: backgroundStyles.backgroundShapes,
+    personalisationRole: backgroundStyles.personalisationRole,
+    mediaViewModel: backgroundStyles.media
+      ? mapMediaToContentViewModel({
+          media: backgroundStyles.media,
+          options,
+        })
+      : undefined,
+  };
+};
+
 export const getBrandPageViewModelFromBrandPageModel = (
   model: BrandPageModel,
   brandPageToken: string | undefined,
@@ -1313,7 +1352,7 @@ export const getBrandPageViewModelFromBrandPageModel = (
     brandPageToken,
     pages,
     showBrandCrowdLogo,
-    styles: model.styles,
+    styles: mapToPageStyleViewModel(model.styles, options),
     headerViewModelDesktop: mapToPageHeaderViewModel(
       model.pageHeaderDesktop,
       model.styles,
@@ -1460,7 +1499,8 @@ export const getCriticalResourceURLs = (
     }
 
     // shapes
-    const bgShapeFullBg = viewModel.styles?.backgroundStyles.backgroundImageUrl;
+    const bgShapeFullBg =
+      viewModel.styles?.backgroundStylesViewModel.backgroundImageUrl;
 
     if (typeof bgShapeFullBg !== 'undefined' && isValidSvgUrl(bgShapeFullBg)) {
       shapes.push(String(bgShapeFullBg));

package/src/brand-page/view-models.ts

@@ -39,6 +39,10 @@ import type {
   SensitiveContent,
   BookingSectionContent,
   MediaTypes,
+  TextStyles,
+  BackgroundStyle,
+  BackgroundShape,
+  PersonalisationRole,
 } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 
@@ -280,10 +284,28 @@ export interface PageFooterViewModel
   logo: LogoViewModel;
 }
 
+export interface BackgroundStylesViewModel {
+  style: BackgroundStyle;
+  backgroundShapeStyle: BackgroundStyle;
+  backgroundImageUrl: string;
+  backgroundShapes: BackgroundShape[];
+  personalisationRole?: PersonalisationRole;
+  mediaViewModel?: MediaViewModel;
+}
+
+// Note(jyao): View model for page styles, we will need to create new view model mapping for each style here in future
+export interface PageStylesViewModel {
+  backgroundStylesViewModel: BackgroundStylesViewModel;
+  buttonStyles: ButtonStyles; // TODO(jyao): Convert to view model
+  logoStyles: LogoStyles; // TODO(jyao): Convert to view model
+  textStyles: TextStyles; // TODO(jyao): Convert to view model
+  galleryStyles: GalleryStyles; // TODO(jyao): Convert to view model
+}
+
 export interface BrandPageViewModel {
   brandPageToken?: string;
   showBrandCrowdLogo: boolean;
-  styles: PageStyles;
+  styles: PageStylesViewModel;
   pages: PageViewModel[];
   brandPageType: BrandPageType;
   headerViewModelDesktop: PageHeaderViewModel;

package/src/brand-page-maker/components/preview/Preview.stories.ts

@@ -17,6 +17,7 @@ import { setupStoryPinia } from '../brand-page-maker/__fixtures__/store-fixture'
 import {
   mapToPageFooterViewModel,
   mapToPageHeaderViewModel,
+  mapToPageStyleViewModel,
   mapToViewModel,
 } from '../../../brand-page/utils';
 
@@ -46,7 +47,7 @@ const pages = [
 
 const viewModel: BrandPageViewModel = {
   showBrandCrowdLogo: true,
-  styles: pageStyles,
+  styles: mapToPageStyleViewModel(pageStyles, {}),
   headerViewModelDesktop: mapToPageHeaderViewModel(
     new PageHeaderDesktop(),
     pageStyles,

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

@@ -15,11 +15,19 @@ 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,
+  useBrandPageMakerUserStore,
+} from '../../stores';
+import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
 import {
   applyLogoImageBase64UrlToBrandPageTemplateModel,
   applyLogoImageToBrandPageTemplateModel,
@@ -41,17 +49,35 @@ 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 brandPageMakerUserStore = useBrandPageMakerUserStore();
+    const templateSettingsStore = useUiTemplateSettingsStore();
 
     return {
       selectedTemplateId: computed(
         () => brandPageMakerStore.selectedTemplateId,
       ),
+      isPrePurchase: computed(() => brandPageContainerStore.isPrePurchase),
+      runtimeEnvironment: computed(
+        () => brandPageContainerStore.runtimeEnvironment,
+      ),
+      isAdmin: computed(() => brandPageMakerUserStore.isAdmin),
+      userToken: computed(() => brandPageMakerUserStore.userToken),
+      isBrandSite: computed(
+        () => brandPageMakerStore.brandPageType === BRAND_PAGE_TYPES.brandSite,
+      ),
+      selectedTab: computed(() => templateSettingsStore.selectedTab.key),
+      renderAsImage: computed(() => templateSettingsStore.renderAsImage),
+      brandPageMakerUserStore,
+      brandPageContainerStore,
       brandPageMakerStore,
     };
   },
@@ -111,6 +137,8 @@ export default defineComponent({
       renderWidth: 400,
       rootStyles: {},
       viewModel: undefined,
+      imageLoadError: false,
+      imageLoading: true,
     };
 
     return data;
@@ -202,16 +230,52 @@ export default defineComponent({
 
       return cssVariables;
     },
+    previewImageUrl(): string {
+      let previewImageUrl = this.template.previewImageUrl;
+
+      if (!previewImageUrl) {
+        return '';
+      }
+
+      if (
+        this.selectedTab === TEMPLATE_TABS.AI &&
+        this.template.contentKey &&
+        this.userToken
+      ) {
+        previewImageUrl += `&contentKey=${this.template.contentKey}&userToken=${this.userToken}`;
+      }
+
+      if (this.logoImage?.logoVariation !== undefined) {
+        previewImageUrl += `&logoVariation=${this.logoImage.logoVariation}`;
+      }
+
+      return previewImageUrl;
+    },
   },
   watch: {
+    template() {
+      if (this.isAdmin || this.isPrePurchase) {
+        this.updateViewModel();
+      } else {
+        // Reset loading state when template changes for image-based previews
+        this.imageLoading = true;
+        this.imageLoadError = false;
+      }
+    },
     logoTheme: {
       handler() {
-        this.updateViewModel();
+        if (this.isAdmin || this.isPrePurchase) {
+          this.updateViewModel();
+        }
       },
       deep: true,
     },
-    template() {
-      this.updateViewModel();
+    previewImageUrl() {
+      // Reset loading state whenever the preview URL changes
+      if (!this.isAdmin && !this.isPrePurchase) {
+        this.imageLoading = true;
+        this.imageLoadError = false;
+      }
     },
   },
   created() {
@@ -260,7 +324,28 @@ export default defineComponent({
       this.rootStyles = styles;
     },
 
+    onImageError() {
+      this.imageLoadError = true;
+      this.imageLoading = false;
+    },
+
+    onImageLoad() {
+      this.imageLoadError = false;
+      this.imageLoading = false;
+    },
+
+    regeneratePreview() {
+      this.imageLoadError = false;
+      this.imageLoading = true;
+      this.$forceUpdate();
+    },
+
     async updateViewModel(forceUpdate = true) {
+      // Only update view model for admin or pre-purchase mode
+      if (!this.isAdmin && !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="!renderAsImage"
+          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 />
+            </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"
@@ -47,10 +71,12 @@
 import { defineComponent } from 'vue';
 import TemplatePreviewMixin from './TemplatePreview.mixin.ts';
 import Page from '../../../brand-page/components/page/Page.vue';
+import { Loader } from '@designcrowd/fe-shared-lib';
 
 export default defineComponent({
   components: {
     Page,
+    Loader,
   },
   mixins: [TemplatePreviewMixin],
   setup(props, context) {
@@ -66,13 +92,24 @@ export default defineComponent({
 
 .template-preview__overlay {
   @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;
+  z-index: 100;
 }
 
+.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,19 @@ 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?.brandPageModel) {
+        console.error('Failed to fetch template brandPageModel');
+
+        return;
+      }
+
       this.isApplyingTemplate = true;
 
       let brandPageModel = cloneDeep(template.brandPageModel);

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

@@ -9,6 +9,7 @@ export interface UserState extends UIUserState {
   emailAddress: string;
   hasBrandPagePremiumSubscription: boolean;
   brandPageCommissionPercentage: number | undefined;
+  userToken?: string;
 }
 
 export const DEFAULT_MAX_NUM_OF_PAGES = 2;
@@ -37,6 +38,7 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
     hasBrandPagePremiumSubscription: false,
     brandPageCommissionPercentage: undefined,
     isAdmin: false, // this is currently used as way to identify admin maker mode
+    userToken: undefined,
   }),
   actions: {
     setEmailAddress(payload: string): void {
@@ -54,5 +56,8 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
     setBrandPageCommissionPercentage(payload: number): void {
       this.brandPageCommissionPercentage = payload;
     },
+    setUserToken(payload: { userToken: string }): void {
+      this.userToken = payload.userToken;
+    },
   },
 });

package/src/bundles/bundled-translations.json

@@ -297,7 +297,9 @@
     "addMedia": "Add Media",
     "addImage": "Add Image",
     "replaceImage": "Replace Image",
-    "image": "Image"
+    "image": "Image",
+    "media": "Media",
+    "replaceMedia": "Replace Media"
   },
   "colorPicker": {
     "newColor": "New Color",

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

@@ -19,6 +19,7 @@ interface GetTemplatesAsyncOptions {
   searchTerm?: string;
   side?: string;
   logoDraftToken?: string;
+  logoVariation?: number;
   useLogoForRecommendedTemplates?: boolean;
   page?: number;
   pageSize?: number;

package/src/clients/models.ts

@@ -14,6 +14,7 @@ export interface DesignTemplate {
 
 export interface PaginatedDesignTemplateItem {
   designTemplateToken: string;
+  previewImageUrl?: string;
 }
 
 export interface DisplayLogoDraftAsset {