@designcrowd/library.brand-page 5.14.13 → 5.14.14

package/lib/src/shared/background-settings/components/background-shapes/BackgroundShapeSettings.mixin.d.ts

@@ -191,6 +191,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         setBackgroundShapeSettings(payload: import("../../background-settings-models").SetBackgroundShapeSettingsPayload): void;
         setRecommendedLogoColors(payload: import("../../background-settings-models").SetRecommendedLogoColorsPayload): void;
+        setBackgroundMode(payload: {
+            backgroundMode: "images" | "edit";
+        }): void;
     }>;
 }, {}, {
     color(): string;

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

@@ -1,4 +1,5 @@
 import type { BackgroundShape, BackgroundStyle, BackgroundStyles, PersonalisationRole } from '../../../brand-page';
+import { type BrandPageSettingsMode } from '../../../brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
 import type { SetBackgroundShapeSettingsPayload, SetLogoColorsPayload, SetRecommendedLogoColorsPayload } from '../background-settings-models';
 import type { BackgroundSetStatePayload, BackgroundSettingsTabId } from '../models';
 export interface BackgroundSettingsState {
@@ -7,6 +8,7 @@ export interface BackgroundSettingsState {
     recommendedLogoColors: string[];
     reservedImageUrlPrefixes: string[];
     tab: BackgroundSettingsTabId;
+    backgroundMode: BrandPageSettingsMode;
 }
 export declare const useUiBackgroundSettingsStore: import("pinia").StoreDefinition<"uiBackgroundSettings", BackgroundSettingsState, {}, {
     onBackgroundChanged(): void;
@@ -40,4 +42,7 @@ export declare const useUiBackgroundSettingsStore: import("pinia").StoreDefiniti
     }): void;
     setBackgroundShapeSettings(payload: SetBackgroundShapeSettingsPayload): void;
     setRecommendedLogoColors(payload: SetRecommendedLogoColorsPayload): void;
+    setBackgroundMode(payload: {
+        backgroundMode: BrandPageSettingsMode;
+    }): void;
 }>;

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

@@ -1,4 +1,5 @@
 import { PageStyles } from '../../../brand-page';
+import { BRANDPAGE_SETTINGS_MODES, } from '../../../brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
 import { backgroundSettingsTabId } from '../models';
 import { defineStore } from 'pinia';
 import { useUiStore } from '../../../brand-page-maker/stores';
@@ -14,6 +15,7 @@ export const useUiBackgroundSettingsStore = defineStore('uiBackgroundSettings',
         recommendedLogoColors: [],
         reservedImageUrlPrefixes: [],
         tab: backgroundSettingsTabId.color,
+        backgroundMode: BRANDPAGE_SETTINGS_MODES.edit,
     }),
     actions: {
         onBackgroundChanged() {
@@ -125,5 +127,8 @@ export const useUiBackgroundSettingsStore = defineStore('uiBackgroundSettings',
         setRecommendedLogoColors(payload) {
             this.recommendedLogoColors = payload.recommendedLogoColors;
         },
+        setBackgroundMode(payload) {
+            this.backgroundMode = payload.backgroundMode;
+        },
     },
 });

package/lib/src/shared/content-settings/components/color-field/ColorField.mixin.d.ts

@@ -270,6 +270,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         setBackgroundShapeSettings(payload: import("../../../background-settings/background-settings-models").SetBackgroundShapeSettingsPayload): void;
         setRecommendedLogoColors(payload: import("../../../background-settings/background-settings-models").SetRecommendedLogoColorsPayload): void;
+        setBackgroundMode(payload: {
+            backgroundMode: "images" | "edit";
+        }): void;
     }>;
     userStore: import("pinia").Store<"brandPageMakerUser", import("../../../../brand-page-maker/stores").UserState, {}, {
         setEmailAddress(payload: string): void;

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

@@ -843,6 +843,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setBackgroundShapeSettings(payload: import("../../background-settings/background-settings-models").SetBackgroundShapeSettingsPayload): void;
         setRecommendedLogoColors(payload: import("../../background-settings/background-settings-models").SetRecommendedLogoColorsPayload): void;
+        setBackgroundMode(payload: {
+            backgroundMode: "images" | "edit";
+        }): void;
     }>;
     eventTracker: {
         sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => void;

package/package.json

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

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

@@ -892,6 +892,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             logoColors: logoDraftDesignAttributes?.logoColors,
             recommendedLogoColors:
               logoDraftDesignAttributes?.recommendedLogoColors,
+            backgroundMode: BRANDPAGE_SETTINGS_MODES.edit,
           },
         };
 

package/src/bundles/bundled-translations.de-DE.json

@@ -285,7 +285,11 @@
     "color": "Farbe",
     "imageLibrary": "Bilderbibliothek",
     "myUploads": "Meine Uploads",
-    "backgroundColor": "Hintergrundfarbe"
+    "backgroundColor": "Hintergrundfarbe",
+    "addMedia": "Medien hinzufügen",
+    "addImage": "Bild hinzufügen",
+    "replaceImage": "Bild ersetzen",
+    "image": "Bild"
   },
   "colorPicker": {
     "newColor": "Neue Farbe",

package/src/bundles/bundled-translations.es-ES.json

@@ -285,7 +285,11 @@
     "color": "Color",
     "imageLibrary": "Biblioteca de imágenes",
     "myUploads": "Mis subidas",
-    "backgroundColor": "Color de fondo"
+    "backgroundColor": "Color de fondo",
+    "addMedia": "Añade elementos multimedia",
+    "addImage": "Añadir imagen",
+    "replaceImage": "Reemplazar imagen",
+    "image": "Imagen"
   },
   "colorPicker": {
     "newColor": "Nuevo color",

package/src/bundles/bundled-translations.fr-CA.json

@@ -285,7 +285,11 @@
     "color": "Couleur",
     "imageLibrary": "Bibliothèque d’images",
     "myUploads": "Mes importations",
-    "backgroundColor": "Couleur d’arrière-plan"
+    "backgroundColor": "Couleur d’arrière-plan",
+    "addMedia": "Ajouter un média",
+    "addImage": "Ajouter une image",
+    "replaceImage": "Remplacer l'image",
+    "image": "Image"
   },
   "colorPicker": {
     "newColor": "Nouvelle couleur",

package/src/bundles/bundled-translations.fr-FR.json

@@ -285,7 +285,11 @@
     "color": "Couleur",
     "imageLibrary": "Bibliothèque d’images",
     "myUploads": "Mes importations",
-    "backgroundColor": "Couleur d’arrière-plan"
+    "backgroundColor": "Couleur d’arrière-plan",
+    "addMedia": "Ajouter un média",
+    "addImage": "Ajouter une image",
+    "replaceImage": "Remplacer l'image",
+    "image": "Image"
   },
   "colorPicker": {
     "newColor": "Nouvelle couleur",

package/src/bundles/bundled-translations.json

@@ -285,7 +285,11 @@
     "color": "Color",
     "imageLibrary": "Image Library",
     "myUploads": "My Uploads",
-    "backgroundColor": "Background Color"
+    "backgroundColor": "Background Color",
+    "addMedia": "Add Media",
+    "addImage": "Add Image",
+    "replaceImage": "Replace Image",
+    "image": "Image"
   },
   "colorPicker": {
     "newColor": "New Color",

package/src/bundles/bundled-translations.pt-BR.json

@@ -285,7 +285,11 @@
     "color": "Cor",
     "imageLibrary": "Biblioteca de imagens",
     "myUploads": "Meus carregamentos",
-    "backgroundColor": "Cor de fundo"
+    "backgroundColor": "Cor de fundo",
+    "addMedia": "Adicionar mídia",
+    "addImage": "Adicionar imagem",
+    "replaceImage": "Substitua a imagem",
+    "image": "Imagem"
   },
   "colorPicker": {
     "newColor": "Nova cor",

package/src/bundles/bundled-translations.pt-PT.json

@@ -285,7 +285,11 @@
     "color": "Cor",
     "imageLibrary": "Biblioteca de imagens",
     "myUploads": "Os meus carregamentos",
-    "backgroundColor": "Cor de fundo"
+    "backgroundColor": "Cor de fundo",
+    "addMedia": "Adicionar multimédia",
+    "addImage": "Adicionar imagem",
+    "replaceImage": "Substitua a imagem",
+    "image": "Imagem"
   },
   "colorPicker": {
     "newColor": "Nova cor",

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

@@ -1,138 +1,122 @@
 <template>
   <div data-test-tag="background-settings">
-    <SideBarSettingsHeader :title="backgroundSettingsTr(`editBackground`)" />
-    <BackgroundColorSettings
-      :custom-groups="customGroups"
-      :logo-theme="logoTheme"
+    <ReplaceImageSettingsForBackgroundSettings
+      v-if="backgroundMode === BRANDPAGE_SETTINGS_MODES.images"
+      :media-type="data.mediaType"
+      :section-title="data.sectionTitle"
     />
-    <div class="tw-px-0.5 tw-my-5">
+    <div v-if="backgroundMode === BRANDPAGE_SETTINGS_MODES.edit">
+      <SideBarSettingsHeader :title="backgroundSettingsTr(`editBackground`)" />
+      <BackgroundColorSettings
+        :custom-groups="customGroups"
+        :logo-theme="logoTheme"
+      />
+      <h4 class="tw-mt-3 tw-mb-1.5 tw-text-sm tw-font-bold tw-capitalize">
+        {{ backgroundSettingsTr(`addMedia`) }}
+      </h4>
+
+      <CollapsiblePanel :title="backgroundSettingsTr('image')">
+        <ImageField
+          id="background-image"
+          name="backgroundImage"
+          :value="imageFieldValue"
+          :is-required="false"
+          placeholder="Add background image"
+          media-type="Content"
+          @on-intent-image-replace="onIntentImageReplace"
+          @update:model-value="onBackgroundImageDeleted"
+        />
+      </CollapsiblePanel>
       <div
-        v-if="tabs.length > 1"
-        class="tw-flex tw-items-center tw-overflow-x-auto"
+        v-if="templateSupportsMainShape || templateSupportsOtherShapes"
+        class="tw-py-4 tw-my-5 tw-border-t tw-border-solid tw-border-grayscale-500"
       >
-        <div v-for="(tab, i) in data.tabs" :key="i" class="tw-mr-2">
-          <Button
-            class="tw-mb-4"
-            :classes="['tw-whitespace-nowrap', 'tw-text-nowrap']"
-            :label="tab.label"
-            variant="pill"
-            :active="tab.id === data.activeTab"
-            @on-click.stop="switchActiveTab(tab)"
+        <h4 class="tw-mb-4 tw-text-sm tw-font-bold tw-capitalize">
+          {{ backgroundSettingsTr(`shapes`) }}
+        </h4>
+        <div v-if="showPersonalisationField" class="tw-mb-4">
+          <PersonalisationRoleField
+            :value="personalisationRole"
+            @update:model-value="onPersonalisationRoleChange"
           />
         </div>
-      </div>
-
-      <div v-if="showPersonalisationField" class="tw-mb-4">
-        <PersonalisationRoleField
-          :value="personalisationRole"
-          @update:model-value="onPersonalisationRoleChange"
-        />
-      </div>
-
-      <TabMenu
-        v-if="data.activeTab === 'shapes' && data.shapeTabs.length > 1"
-        class="tw-w-full tw-mb-6"
-        :classes="tabMenuClasses"
-        :tab-names="data.shapeTabs"
-        :selected-tab-name="data.selectedShapeTab"
-        @on-tab-selected="selectShapeTab"
-      />
 
-      <div
-        v-if="
-          data.activeTab === 'shapes' &&
-          data.selectedShapeTab === backgroundSettingsTr(`background`)
-        "
-      >
-        <slot
-          v-if="isAdmin"
-          name="pre-shape"
-          config-option="backgroundShapeStyle"
+        <TabMenu
+          v-if="data.shapeTabs.length > 1"
+          class="tw-w-full tw-mb-6"
+          :classes="tabMenuClasses"
+          :tab-names="data.shapeTabs"
+          :selected-tab-name="data.selectedShapeTab"
+          @on-tab-selected="selectShapeTab"
         />
 
-        <BackgroundShapeSettings
-          key="main"
-          :custom-groups="customGroups"
-          color-type="main"
-        />
-
-        <slot
-          v-if="isAdmin"
-          name="post-shape"
-          config-option="backgroundShapeStyle"
-        />
-      </div>
-      <div
-        v-if="
-          data.activeTab === 'shapes' &&
-          data.selectedShapeTab === backgroundSettingsTr(`other`)
-        "
-      >
-        <slot v-if="isAdmin" name="pre-shape" config-option="shape" />
+        <div
+          v-if="data.selectedShapeTab === backgroundSettingsTr(`background`)"
+        >
+          <slot
+            v-if="isAdmin"
+            name="pre-shape"
+            config-option="backgroundShapeStyle"
+          />
 
-        <BackgroundShapeSettings
-          key="secondary"
-          :custom-groups="customGroups"
-          color-type="secondary"
-        />
+          <BackgroundShapeSettings
+            key="main"
+            :custom-groups="customGroups"
+            color-type="main"
+          />
 
-        <slot v-if="isAdmin" name="post-shape" config-option="shape" />
-      </div>
+          <slot
+            v-if="isAdmin"
+            name="post-shape"
+            config-option="backgroundShapeStyle"
+          />
+        </div>
+        <div v-if="data.selectedShapeTab === backgroundSettingsTr(`other`)">
+          <slot v-if="isAdmin" name="pre-shape" config-option="shape" />
 
-      <div v-if="data.activeTab === 'user-image'">
-        <MyUploads
-          v-if="features.canUploadBackgroundImages"
-          data-test-tag="background-settings-my-uploads"
-          :is-delete-enabled="true"
-          :media-type="'Content'"
-          @on-select-image="onBackgroundImageSelected"
-          @on-delete-image="onBackgroundImageDeleted"
-        />
-        <slot v-else name="user-image-upgrade" />
-      </div>
+          <BackgroundShapeSettings
+            key="secondary"
+            :custom-groups="customGroups"
+            color-type="secondary"
+          />
 
-      <div v-if="data.activeTab === 'unsplash-image'">
-        <UnsplashLibrary
-          v-if="features.canAddLibraryBackgroundImages"
-          @on-select-image="onBackgroundImageSelected"
-        />
-        <slot v-else name="library-image-upgrade" />
-      </div>
+          <slot v-if="isAdmin" name="post-shape" config-option="shape" />
+        </div>
 
-      <div v-if="data.activeTab === 'shapes' && !isAdmin">
-        <ShapeLibrary @on-select-image="onBackgroundImageSelected" />
+        <div v-if="!isAdmin">
+          <ShapeLibrary @on-select-image="onBackgroundImageSelected" />
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { Button, TabMenu } from '@designcrowd/fe-shared-lib';
+import { TabMenu, CollapsiblePanel, Button } from '@designcrowd/fe-shared-lib';
 import BackgroundColorSettings from './background-color/BackgroundColorSettings.vue';
 import BackgroundShapeSettings from './background-shapes/BackgroundShapeSettings.vue';
+import ImageField from '../../content-settings/components/image-field/ImageField.vue';
 import {
+  BRANDPAGE_SETTINGS_MODES,
   useBrandPageContainerStore,
+  useBrandPageMakerStore,
   useBrandPageMakerUserStore,
   useUiStore,
 } from '../../../brand-page-maker/stores';
 import { useUiBackgroundSettingsStore } from '../store';
 import SideBarSettingsHeader from '../../common/SideBarSettingsHeader.vue';
-import MyUploads from '../../my-uploads/MyUploads.vue';
-import UnsplashLibrary from '../../unsplash-library/UnsplashLibrary.vue';
 import ShapeLibrary from '../../shape-library/ShapeLibrary.vue';
 import PersonalisationRoleField from '../../content-settings/components/personalisation-role-field/PersonalisationRoleField.vue';
 import { computed, onMounted, reactive } from 'vue';
 import type { UserMediaItem } from '../../my-uploads/models';
 import type { UpdateItemValuePayload } from '../../content-settings/models';
-import type { PersonalisationRole } from '../../../brand-page';
+import { MEDIA_TYPES, type PersonalisationRole } from '../../../brand-page';
 import { backgroundSettingsTr } from '../../../composables/useTranslate';
-import {
-  backgroundSettingsTabId,
-  type BackgroundSettingsTab,
-} from '../models/background-settings-models';
+import ReplaceImageSettingsForBackgroundSettings from './ReplaceImageSettingsForBackgroundSettings.vue';
 
 const backgroundSettingsStore = useUiBackgroundSettingsStore();
 const userStore = useBrandPageMakerUserStore();
 const containerStore = useBrandPageContainerStore();
+const brandPageMakerStore = useBrandPageMakerStore();
 const uiStore = useUiStore();
 
 const backgroundStyles = computed(
@@ -143,23 +127,14 @@ const recommendedLogoColors = computed(
 );
 const logoColors = computed(() => backgroundSettingsStore.logoColors);
 const logoTheme = computed(() => uiStore.logoTheme);
-const features = computed(() => userStore.features);
+const backgroundMode = computed(() => backgroundSettingsStore.backgroundMode);
 const isAdmin = computed(() => userStore.isAdmin);
 const isPersonalisationEnabled = computed(
   () => uiStore.isPersonalisationEnabled,
 );
 const isDesignCom = computed(() => containerStore.isDesignCom);
 
-const tabs: BackgroundSettingsTab[] = [
-  {
-    id: backgroundSettingsTabId['unsplash-image'],
-    label: backgroundSettingsTr(`imageLibrary`),
-  },
-  {
-    id: backgroundSettingsTabId['user-image'],
-    label: backgroundSettingsTr(`myUploads`),
-  },
-];
+const emit = defineEmits(['on-intent-image-replace']);
 
 const shapeTabs = [
   backgroundSettingsTr(`background`),
@@ -188,52 +163,46 @@ const personalisationRole = computed(() => {
   return backgroundStyles.value.personalisationRole;
 });
 
+// Return empty string for ImageField when a shape is selected
+// 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 || '';
+
+  // If the background image is an SVG (shape), return empty string to hide it in the image field
+  if (backgroundImageUrl.endsWith('.svg')) {
+    return '';
+  }
+
+  return backgroundImageUrl;
+});
+
 const data = reactive({
-  activeTab: tabs[0].id,
-  tabs,
   selectedShapeTab: shapeTabs[0],
   shapeTabs,
+  BRANDPAGE_SETTINGS_MODES,
+  mediaType: '',
+  sectionTitle: '',
 });
 
 onMounted(() => {
   if (!templateSupportsMainShape.value) {
     data.shapeTabs.splice(
-      data.shapeTabs.findIndex((t) => t === 'Background'),
+      data.shapeTabs.findIndex((t) => t === backgroundSettingsTr(`background`)),
       1,
     );
-    selectShapeTab(data.shapeTabs[0]);
+    if (data.shapeTabs.length > 0) {
+      selectShapeTab(data.shapeTabs[0]);
+    }
   }
 
   if (!templateSupportsOtherShapes.value) {
     data.shapeTabs.splice(
-      data.shapeTabs.findIndex((t) => t === 'Other'),
-      1,
-    );
-    selectShapeTab(data.shapeTabs[0]);
-  }
-
-  if (
-    data.shapeTabs.length > 0 &&
-    !data.tabs.some((tab) => tab.id === 'shapes')
-  ) {
-    selectShapeTab(data.shapeTabs[0]);
-
-    // only add the shapes tab if there are shapes in the store
-    data.tabs.push({
-      id: 'shapes',
-      label: backgroundSettingsTr(`shapes`),
-    });
-  }
-
-  if (
-    !templateSupportsMainShape.value &&
-    !templateSupportsOtherShapes.value &&
-    data.tabs.some((tab) => tab.id === 'shapes')
-  ) {
-    data.tabs.splice(
-      data.tabs.findIndex((tab) => tab.id === 'shapes'),
+      data.shapeTabs.findIndex((t) => t === backgroundSettingsTr(`other`)),
       1,
     );
+    if (data.shapeTabs.length > 0) {
+      selectShapeTab(data.shapeTabs[0]);
+    }
   }
 });
 
@@ -252,24 +221,22 @@ const customGroups = computed(() => {
   ];
 });
 
-const switchActiveTab = (tab: BackgroundSettingsTab) => {
-  data.activeTab = tab.id;
-};
-
 const onBackgroundImageSelected = (image: UserMediaItem) => {
   backgroundSettingsStore.setBackgroundImageUrl({
     backgroundImageUrl: image.url,
   });
 };
 
-const onBackgroundImageDeleted = (image: UserMediaItem) => {
-  const selectedImage =
-    backgroundSettingsStore.backgroundStyles.backgroundImageUrl;
-
-  if (image.url === selectedImage)
+const onBackgroundImageDeleted = (payload: {
+  id: string;
+  name: string;
+  value: string;
+}) => {
+  if (payload.value === '') {
     backgroundSettingsStore.setBackgroundImageUrl({
       backgroundImageUrl: '',
     });
+  }
 };
 
 const selectShapeTab = (tab: string) => {
@@ -283,4 +250,39 @@ const onPersonalisationRoleChange = (
     personalisationRole: payload.value,
   });
 };
+
+const onIntentImageReplace = (payload: {
+  id: string;
+  name: string;
+  value: string;
+}) => {
+  data.mediaType = MEDIA_TYPES.image;
+  data.sectionTitle = 'Background Image';
+
+  // Set field settings for the image replacement interface
+  brandPageMakerStore.setFieldSettings({
+    settings: {
+      errorMessage: '',
+      isRequired: false,
+      replaceImageSettings: {
+        tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY'],
+        buttonTitleAdd: backgroundSettingsTr(`addImage`),
+        titleAdd: backgroundSettingsTr(`addImage`),
+        titleReplace: backgroundSettingsTr(`replaceImage`),
+        contentMediaFieldName: payload.value ? 'backgroundImage' : '',
+        openByDefault: false,
+        mediaType: data.mediaType,
+        desiredHeight: undefined,
+        desiredWidth: undefined,
+        maxFiles: 1,
+        maxFilesize: 25,
+      },
+      isValid: true,
+    },
+  });
+
+  backgroundSettingsStore.setBackgroundMode({
+    backgroundMode: BRANDPAGE_SETTINGS_MODES.images,
+  });
+};
 </script>