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

package/src/shared/background-settings/components/BackgroundSettings.vue

@@ -15,7 +15,7 @@
         {{ backgroundSettingsTr(`addMedia`) }}
       </h4>
 
-      <CollapsiblePanel :title="backgroundSettingsTr('image')">
+      <CollapsiblePanel :title="backgroundSettingsTr('media')">
         <ImageField
           id="background-image"
           name="backgroundImage"
@@ -24,7 +24,7 @@
           placeholder="Add background image"
           media-type="Content"
           @on-intent-image-replace="onIntentImageReplace"
-          @update:model-value="onBackgroundImageDeleted"
+          @update:model-value="onBackgroundMediaDeleted"
         />
       </CollapsiblePanel>
       <div
@@ -101,6 +101,7 @@ import {
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
   useUiStore,
+  useVideoStore,
 } from '../../../brand-page-maker/stores';
 import { useUiBackgroundSettingsStore } from '../store';
 import SideBarSettingsHeader from '../../common/SideBarSettingsHeader.vue';
@@ -109,7 +110,11 @@ import PersonalisationRoleField from '../../content-settings/components/personal
 import { computed, onMounted, reactive } from 'vue';
 import type { UserMediaItem } from '../../my-uploads/models';
 import type { UpdateItemValuePayload } from '../../content-settings/models';
-import { MEDIA_TYPES, type PersonalisationRole } from '../../../brand-page';
+import {
+  type GettyVideoMedia,
+  MEDIA_TYPES,
+  type PersonalisationRole,
+} from '../../../brand-page';
 import { backgroundSettingsTr } from '../../../composables/useTranslate';
 import ReplaceImageSettingsForBackgroundSettings from './ReplaceImageSettingsForBackgroundSettings.vue';
 
@@ -122,6 +127,8 @@ const uiStore = useUiStore();
 const backgroundStyles = computed(
   () => backgroundSettingsStore.backgroundStyles,
 );
+
+console.log('this is the background styles: ', backgroundStyles.value);
 const recommendedLogoColors = computed(
   () => backgroundSettingsStore.recommendedLogoColors,
 );
@@ -167,12 +174,19 @@ const personalisationRole = computed(() => {
 // This hides the shape in the image field as there will be a future thumbnail for shapes
 const imageFieldValue = computed(() => {
   const backgroundImageUrl = backgroundStyles.value.backgroundImageUrl || '';
+  const media = backgroundStyles.value.media as GettyVideoMedia;
 
   // If the background image is an SVG (shape), return empty string to hide it in the image field
   if (backgroundImageUrl.endsWith('.svg')) {
     return '';
   }
 
+  if (media && media.type === 'getty-video') {
+    const videoStore = useVideoStore();
+    const videoUrls = videoStore.getVideoUrlsForToken(media.gettyToken);
+    return videoUrls?.previewImageUrl || ''; // Show the video thumbnail
+  }
+
   return backgroundImageUrl;
 });
 
@@ -227,16 +241,22 @@ const onBackgroundImageSelected = (image: UserMediaItem) => {
   });
 };
 
-const onBackgroundImageDeleted = (payload: {
+const onBackgroundMediaDeleted = (payload: {
   id: string;
   name: string;
   value: string;
 }) => {
+  console.log('Here deleting');
   if (payload.value === '') {
     backgroundSettingsStore.setBackgroundImageUrl({
       backgroundImageUrl: '',
     });
   }
+
+  if (backgroundStyles.value?.media) {
+    console.log('Removing background video');
+    backgroundSettingsStore.removeBackgroundVideo();
+  }
 };
 
 const selectShapeTab = (tab: string) => {
@@ -265,10 +285,10 @@ const onIntentImageReplace = (payload: {
       errorMessage: '',
       isRequired: false,
       replaceImageSettings: {
-        tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY'],
-        buttonTitleAdd: backgroundSettingsTr(`addImage`),
-        titleAdd: backgroundSettingsTr(`addImage`),
-        titleReplace: backgroundSettingsTr(`replaceImage`),
+        tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY', 'VIDEO_LIBRARY'],
+        buttonTitleAdd: backgroundSettingsTr(`addMedia`),
+        titleAdd: backgroundSettingsTr(`addMedia`),
+        titleReplace: backgroundSettingsTr(`replaceMedia`),
         contentMediaFieldName: payload.value ? 'backgroundImage' : '',
         openByDefault: false,
         mediaType: data.mediaType,

package/src/shared/background-settings/components/ReplaceImageSettingsForBackgroundSettings.vue

@@ -12,6 +12,7 @@
       @on-design-selected="onDesignSelected"
       @on-image-picked="onImageSelected"
       @on-image-removed="onImageRemoved"
+      @on-video-selected="onVideoSelected"
     />
   </div>
 </template>
@@ -117,4 +118,12 @@ const onDesignSelected = (image: UserMediaItemWithDimensions) => {
     backgroundMode: BRANDPAGE_SETTINGS_MODES.edit,
   });
 };
+
+const onVideoSelected = (videoPayload: any) => {
+  backgroundSettingsStore.setBackgroundMedia(videoPayload);
+
+  backgroundSettingsStore.setBackgroundMode({
+    backgroundMode: BRANDPAGE_SETTINGS_MODES.edit,
+  });
+};
 </script>

package/src/shared/background-settings/components/i18n/background-settings.json

@@ -13,6 +13,8 @@
     "addMedia": "Add Media",
     "addImage": "Add Image",
     "replaceImage": "Replace Image",
-    "image": "Image"
+    "image": "Image",
+    "media": "Media",
+    "replaceMedia": "Replace Media"
   }
 }

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

@@ -4,7 +4,7 @@ import type {
   BackgroundStyles,
   PersonalisationRole,
 } from '../../../brand-page';
-import { PageStyles } from '../../../brand-page';
+import { GettyVideoMedia, PageStyles } from '../../../brand-page';
 import {
   BRANDPAGE_SETTINGS_MODES,
   type BrandPageSettingsMode,
@@ -20,7 +20,11 @@ import type {
 } from '../models';
 import { backgroundSettingsTabId } from '../models';
 import { defineStore } from 'pinia';
-import { useUiStore } from '../../../brand-page-maker/stores';
+import { useUiStore, useVideoStore } from '../../../brand-page-maker/stores';
+import type {
+  GettyVideoMediaSelectedPayload,
+  MediaBaseSelectedPayload,
+} from '../../my-uploads/models';
 
 export interface BackgroundSettingsState {
   backgroundStyles: BackgroundStyles;
@@ -40,6 +44,7 @@ export const useUiBackgroundSettingsStore = defineStore(
         backgroundShapeStyle: {},
         backgroundShapes: [],
         backgroundImageUrl: '',
+        media: undefined,
       },
       logoColors: [],
       recommendedLogoColors: [],
@@ -208,6 +213,12 @@ export const useUiBackgroundSettingsStore = defineStore(
           personalisationRole: backgroundStyles.personalisationRole,
         });
 
+        if (backgroundStyles.media) {
+          this.backgroundStyles.media = backgroundStyles.media;
+        } else {
+          this.backgroundStyles.media = undefined;
+        }
+
         this.onBackgroundChanged();
       },
       setBackgroundShapeSettings(payload: SetBackgroundShapeSettingsPayload) {
@@ -234,6 +245,50 @@ export const useUiBackgroundSettingsStore = defineStore(
       setBackgroundMode(payload: { backgroundMode: BrandPageSettingsMode }) {
         this.backgroundMode = payload.backgroundMode;
       },
+
+      setBackgroundMedia(payload: MediaBaseSelectedPayload) {
+        console.log('Here in the background settings store', payload);
+
+        if (payload.type === 'getty-video') {
+          const gettyMedia = payload as GettyVideoMediaSelectedPayload;
+          const videoStore = useVideoStore();
+
+          videoStore.setVideoUrlsWithToken(
+            gettyMedia.token,
+            gettyMedia.videoSrc,
+            gettyMedia.imageSrc,
+            gettyMedia.assetId,
+          );
+
+          this.backgroundStyles.media = new GettyVideoMedia({
+            gettyToken: gettyMedia.token,
+            gettyAssetId: gettyMedia.assetId,
+            mimeType: gettyMedia.mimeType,
+            settings: {
+              autoPlay: gettyMedia.autoPlay,
+            },
+          });
+
+          // Clear any existing background image/shape
+          this.backgroundStyles.backgroundImageUrl = '';
+
+          // Default background style for videos
+          this.setBackgroundStyle({
+            backgroundStyle: {
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'center center',
+              backgroundSize: 'cover',
+            },
+          });
+
+          this.onBackgroundChanged();
+        }
+      },
+      removeBackgroundVideo() {
+        this.backgroundStyles.media = undefined;
+
+        this.onBackgroundChanged();
+      },
     },
   },
 );

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

@@ -21,6 +21,7 @@ import {
 } from '../../../../brand-page-maker/models';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { PAGE_SECTIONS } from '../../../page-settings/models';
+import { useUiLogoSettingsStore } from '../../../logo-settings/store';
 
 const RTE_ALLOWED_SECTION_TYPES = [
   'banner-section',
@@ -64,6 +65,7 @@ export default defineComponent({
     const uiStore = useUiStore();
     const sideBarStore = useUiSideBarStore();
     const pageSettingsStore = useUiPageSettingsStore();
+    const uiLogoSettingsStore = useUiLogoSettingsStore();
 
     return {
       getFieldSettings: computed(() => contentSettingsStore.getFieldSettings),
@@ -85,6 +87,7 @@ export default defineComponent({
       uiStore,
       sideBarStore,
       pageSettingsStore,
+      uiLogoSettingsStore,
     };
   },
   data: () => ({
@@ -239,13 +242,16 @@ export default defineComponent({
         ) as ContentItem<LogoContent>;
 
         if (logoContentItem) {
+          const logoImage = JSON.parse(
+            JSON.stringify(logoContentItem.settings.content.logoImage),
+          );
+
+          this.uiLogoSettingsStore.setSelectedLogoImage(logoImage);
           [PAGE_SECTIONS.header, PAGE_SECTIONS.footer].forEach((section) => {
             [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewPort) => {
               this.pageSettingsStore.setPageSettingsSectionLogoImage({
                 sectionName: section,
-                logoImage: JSON.parse(
-                  JSON.stringify(logoContentItem.settings.content.logoImage),
-                ),
+                logoImage: logoImage,
                 logoTemplateImage: undefined,
                 logoImageBase64Url:
                   logoContentItem.settings.content.logoImageBase64Url,

package/src/shared/content-settings/components/image-field/ImageField.mixin.ts

@@ -122,7 +122,10 @@ export default defineComponent({
     },
 
     onRemove() {
-      this.content.media = undefined;
+      if (this.content?.media) {
+        this.content.media = undefined;
+      }
+
       this.imgValue = '';
       this.imageUrl = '';
     },

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

@@ -6,6 +6,8 @@ export interface TemplateSettingsTemplate {
   isPersonalisable?: boolean;
   personalisationContentIndex?: number;
   brandPageModel: BrandPageModel;
+  contentKey?: string;
+  previewImageUrl?: string;
 }
 
 export type DesignTemplateType =

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

@@ -16,10 +16,11 @@ import {
   BP_DEFAULT_TEMPLATE_TYPE_NAME,
   SIDE_BAR_TAB_NAMES,
 } from '../../../brand-page-maker/constants';
-import { defineStore } from 'pinia';
+import { defineStore, storeToRefs } from 'pinia';
 import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
+  useBrandPageMakerUserStore,
   useUiStore,
 } from '../../../brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
@@ -31,6 +32,7 @@ import {
   templateSettingsTr,
   getCurrentLocale,
 } from '../../../composables/useTranslate';
+import { watch } from 'vue';
 
 export const DEFAULT_PAGE_SIZE = 6;
 const LOAD_PAGE_RETRY_DELAY = 250;
@@ -54,40 +56,54 @@ export interface TemplatesSettingState {
   selectedCategory: string | undefined;
   searchTerm: string | undefined;
   tabsWithTranslations: SelectedTabType[];
+  logoChangeWatcherInitialized: boolean;
+  renderAsImage: boolean;
 }
 
 export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
-  state: (): TemplatesSettingState => ({
-    isBusy: false,
-    pageCount: 0,
-    pageNo: 1,
-    pageNoLoaded: 0,
-    pageSize: DEFAULT_PAGE_SIZE,
-    templateType: BP_DEFAULT_TEMPLATE_TYPE_NAME,
-    templates: [],
-    selectedTab: {
-      key: 'all',
-      displayName: templateSettingsTr(`headerAll`),
-    },
-    searchTerm: undefined,
-    selectedCategory: undefined,
-    templateCategories: [],
-    tabsWithTranslations: [
-      {
+  state: (): TemplatesSettingState => {
+    const brandPageContainerStore = useBrandPageContainerStore();
+    const brandPageMakerUserStore = useBrandPageMakerUserStore();
+
+    // Set renderAsImage to true if not admin AND not pre-purchase
+    const renderAsImage =
+      !brandPageMakerUserStore.isAdmin &&
+      !brandPageContainerStore.isPrePurchase;
+
+    return {
+      isBusy: false,
+      pageCount: 0,
+      pageNo: 1,
+      pageNoLoaded: 0,
+      pageSize: DEFAULT_PAGE_SIZE,
+      templateType: BP_DEFAULT_TEMPLATE_TYPE_NAME,
+      templates: [],
+      selectedTab: {
         key: 'all',
         displayName: templateSettingsTr(`headerAll`),
       },
-      {
-        key: 'categories',
-        displayName: templateSettingsTr(`headerCategories`),
-      },
-      {
-        key: 'ai',
-        displayName: templateSettingsTr(`headerAi`),
-      },
-    ],
-    cachedTemplates: {},
-  }),
+      searchTerm: undefined,
+      selectedCategory: undefined,
+      templateCategories: [],
+      tabsWithTranslations: [
+        {
+          key: 'all',
+          displayName: templateSettingsTr(`headerAll`),
+        },
+        {
+          key: 'categories',
+          displayName: templateSettingsTr(`headerCategories`),
+        },
+        {
+          key: 'ai',
+          displayName: templateSettingsTr(`headerAi`),
+        },
+      ],
+      cachedTemplates: {},
+      logoChangeWatcherInitialized: false,
+      renderAsImage,
+    };
+  },
   actions: {
     _addTemplates({ templates }: { templates: TemplateSettingsTemplate[] }) {
       this.templates = this.templates.concat(templates);
@@ -215,6 +231,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
     async loadPageNo({ pageNo }: { pageNo: number }) {
       const brandPageMakerStore = useBrandPageMakerStore();
       const brandPageContainerStore = useBrandPageContainerStore();
+      const brandPageMakerUserStore = useBrandPageMakerUserStore();
       const logoSettingsStore = useUiLogoSettingsStore();
       const designTemplateToken = brandPageContainerStore.designTemplateToken;
 
@@ -261,6 +278,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
               searchTerm: this.searchTerm,
               logoDraftToken:
                 logoSettingsStore.selectedLogoImage.logoDraftToken,
+              logoVariation: logoSettingsStore.selectedLogoImage.logoVariation,
               personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
               selectedTemplateToken: designTemplateToken,
               locale: currentLocale,
@@ -273,20 +291,57 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
 
         this._setPageCount({ pageCount: result.pageCount });
 
-        const templates = (
-          await Promise.all(
-            result.paginatedItems.map(async (i) => {
-              const template =
-                await designTemplateClient.getTemplateByTemplateToken(
-                  i.designTemplateToken,
-                );
+        const templates = await Promise.all(
+          result.paginatedItems.map(async (item) => {
+            try {
+              if (
+                brandPageContainerStore.isPrePurchase ||
+                brandPageMakerUserStore.isAdmin
+              ) {
+                // Pre-purchase: full template with brandPageModel for live rendering
+                const template =
+                  await designTemplateClient.getTemplateByTemplateToken(
+                    item.designTemplateToken,
+                  );
+
+                return this.safeMapToTemplateSettingsTemplate(template);
+              } else {
+                let personalisationContentIndex: number | undefined;
+                let contentKey: string | undefined;
+
+                if (uiStore.personalisationData?.length) {
+                  personalisationContentIndex =
+                    await getAiContentIndexByTemplateTokenAndNumberOfVariations(
+                      item.designTemplateToken,
+                      uiStore.personalisationData.length,
+                    );
+
+                  // Get the contentKey from the selected personalisation variation
+                  // This is needed for the backend preview URL to show the correct variation
+                  const selectedPersonalisation =
+                    uiStore.personalisationData[personalisationContentIndex];
+
+                  contentKey = selectedPersonalisation.contentKey;
+                }
+
+                return {
+                  id: item.designTemplateToken,
+                  contentKey,
+                  previewImageUrl: item.previewImageUrl,
+                } as TemplateSettingsTemplate;
+              }
+            } catch (error) {
+              return null;
+            }
+          }),
+        );
 
-              return this.safeMapToTemplateSettingsTemplate(template);
-            }),
-          )
-        ).filter((t): t is TemplateSettingsTemplate => Boolean(t));
+        // Filter out null templates before adding
+        const validTemplates = templates.filter(
+          (t): t is TemplateSettingsTemplate => t !== null,
+        );
 
-        this._addTemplates({ templates });
+        this._addTemplates({ templates: validTemplates });
         this._setPageNoLoaded({ pageNoLoaded: pageNo });
       } finally {
         this._setIsBusy({ isBusy: false });
@@ -361,6 +416,11 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
       }
 
       this.templateType = templateType;
+
+      if (!this.logoChangeWatcherInitialized) {
+        this.setupLogoChangeWatcher();
+        this.logoChangeWatcherInitialized = true;
+      }
     },
     async setTemplateCategories(payload: SetTemplateCategoriesPayload) {
       await this._setTemplateCategories({
@@ -394,5 +454,45 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         this.templates.find((t) => t.id === id) || this.cachedTemplates[id]
       );
     },
+    /**
+     * re-fetch templates when the logo changes to regenerate preview images with the new logo.
+     */
+    setupLogoChangeWatcher() {
+      const logoSettingsStore = useUiLogoSettingsStore();
+      const brandPageContainerStore = useBrandPageContainerStore();
+      const brandPageMakerUserStore = useBrandPageMakerUserStore();
+      const { selectedLogoImage } = storeToRefs(logoSettingsStore);
+
+      // Watch for changes to logoImage (token or variation changes)
+      watch(
+        () => selectedLogoImage.value,
+        async (newLogoImage, oldLogoImage) => {
+          // Skip initial load when oldLogoImage is undefined
+          if (!oldLogoImage) {
+            return;
+          }
+
+          // Only refetch for post-purchase users and when logo actually changes
+          const hasLogoChanged =
+            newLogoImage.logoDraftToken !== oldLogoImage.logoDraftToken ||
+            newLogoImage.logoVariation !== oldLogoImage.logoVariation;
+
+          if (
+            !brandPageContainerStore.isPrePurchase &&
+            !brandPageMakerUserStore.isAdmin &&
+            newLogoImage.logoDraftToken &&
+            hasLogoChanged
+          ) {
+            // Reset templates state and reload with new logo
+            // Use the same pattern as onCategorySelected and onSearch
+            await this._setTemplates({ templates: [] });
+            await this._setPageNoLoaded({ pageNoLoaded: 0 });
+            await this._setPageNo({ pageNo: 1 });
+            await this.loadPageNo({ pageNo: 1 });
+          }
+        },
+        { deep: true },
+      );
+    },
   },
 });