@designcrowd/library.brand-page 5.15.3 → 5.15.4

package/src/brand-page-maker/components/shop/AddOrEditProductContainer.vue

@@ -153,23 +153,28 @@ import {
 import { computed } from 'vue';
 import ProductItemField from './ProductItemField.vue';
 import { useProductConfigStore } from '../../../brand-page-maker/stores/product-config/product-config-store';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
 import NumberInput from '../../../shared/common/NumberInput.vue';
 import { errorTr } from '../../../composables/useTranslate';
 import { productTr } from '../../../composables/useTranslate';
 
 const productSettingStore = useProductConfigStore();
-const shopConfigStore = useShopConfigStore();
 const imageUrl = computed(() => productSettingStore.productImageUrl);
 const MAX_PAYMENT_DESCRIPTION_LENGTH = 255;
 const MAX_PAYMENT_TITLE_LENGTH = 100;
 const MAX_PAYMENT_DESCRIPTION_REACHED_MSG = () =>
   errorTr('maxCharactersDescription');
 const MAX_PAYMENT_TITLE_REACHED_MSG = () => errorTr('maxCharactersTitle');
+interface Props {
+  currencySymbol: string;
+}
+
+// TODO: currency need to be from productConfigStore
+const props = withDefaults(defineProps<Props>(), {
+  currencySymbol: '$',
+});
 
 const enableNotes = computed(() => productSettingStore.productEnableNotes);
 const hasVariants = computed(() => productSettingStore.productHasVariants);
-const currencySymbol = computed(() => shopConfigStore.currencySymbol);
 
 const emit = defineEmits(['update:modelValue']);
 

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -430,7 +430,7 @@ const shopReplaceImageSettings =
 
 const bannerSectionReplaceImageSettings =
   (): ContentReplaceImageSettings<BannerSectionContent> => ({
-    tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY', 'VIDEO_LIBRARY', 'SHAPE_LIBRARY'],
+    tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY', 'SHAPE_LIBRARY'],
     buttonTitleAdd: contentSettingsTr(`addImageButtonTitle`),
     titleAdd: contentSettingsTr(`addImageHeaderTitle`),
     titleReplace: contentSettingsTr(`imageReplaceTitle`),
@@ -2993,7 +2993,7 @@ export const SHOP_SECTION_SETTINGS_CONFIG = (): ContentSettingsConfig<
       shouldRender: false,
     },
     paymentConfig: {
-      type: 'shop-payment-config',
+      type: 'payment-config',
       groupId: REQUEST_PAYMENT_GROUPS.settings,
       overrideValueFieldName: 'shopPaymentConfig',
     },

package/src/brand-page-maker/constants/index.ts

@@ -43,7 +43,6 @@ export const DEFAULT_USER_ENDPOINTS: Readonly<Endpoints> = {
   getAllUserMediaEndpoint: GET_ALL_USER_MEDIA_ENDPOINT,
   userPolicyDataEndpoint: USER_POLICY_DATA_ENDPOINT,
   getUnsplashMediaRootEndpoint: '',
-  getGettyEndpoint: '',
 } as const;
 
 export const DEFAULT_ADMIN_ENDPOINTS: Readonly<Endpoints> = {
@@ -52,5 +51,4 @@ export const DEFAULT_ADMIN_ENDPOINTS: Readonly<Endpoints> = {
   getAllUserMediaEndpoint: GET_ALL_ADMIN_MEDIA_ENDPOINT,
   userPolicyDataEndpoint: ADMIN_POLICY_DATA_ENDPOINT,
   getUnsplashMediaRootEndpoint: '',
-  getGettyEndpoint: '',
 } as const;

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

@@ -29,7 +29,6 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
       canUseRichTextEditor: false,
       canUsePremiumFontFamily: false,
       maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
-      canUseGettyVideos: false,
     },
     emailAddress: '',
     hasBrandPagePremiumSubscription: false,

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

@@ -625,7 +625,6 @@
     "myUploads": "Meine Uploads",
     "myDesigns": "Meine Designs",
     "imageLibrary": "Bilderbibliothek",
-    "videoLibrary": "Videobibliothek",
     "shapeLibrary": "Formbibliothek"
   },
   "shapeField": {
@@ -840,11 +839,5 @@
     "applyMessage": "Das gilt für alle Logos auf Ihrer Website.",
     "cancelLabel": "Abbrechen",
     "continueLabel": "Weiter"
-  },
-  "videoLibrary": {
-    "poweredBy": "Powered by",
-    "emptyState": "Ihr Browser unterstützt keine eingebetteten Videos.",
-    "loadMoreVideos": "Weitere Videos laden",
-    "supported": "Ihr Browser unterstützt keine eingebetteten Videos."
   }
 }

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

@@ -625,7 +625,6 @@
     "myUploads": "Mis subidas",
     "myDesigns": "Mis diseños",
     "imageLibrary": "Biblioteca de imágenes",
-    "videoLibrary": "Videoteca",
     "shapeLibrary": "Biblioteca de Formas"
   },
   "shapeField": {
@@ -840,11 +839,5 @@
     "applyMessage": "Esto se aplicará a todos los logos de tu sitio web.",
     "cancelLabel": "Cancelar",
     "continueLabel": "Continuar"
-  },
-  "videoLibrary": {
-    "poweredBy": "Desarrollado por",
-    "emptyState": "Lo sentimos, tu navegador no admite vídeos incrustados.",
-    "loadMoreVideos": "Carga más vídeos",
-    "supported": "Lo sentimos, tu navegador no admite vídeos incrustados."
   }
 }

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

@@ -625,7 +625,6 @@
     "myUploads": "Mes importations",
     "myDesigns": "Mes créations",
     "imageLibrary": "Bibliothèque d’images",
-    "videoLibrary": "Vidéothèque",
     "shapeLibrary": "Bibliothèque de formes"
   },
   "shapeField": {
@@ -840,11 +839,5 @@
     "applyMessage": "Cela s’appliquera à tous les logos de votre site Web.",
     "cancelLabel": "Annuler",
     "continueLabel": "Continuer"
-  },
-  "videoLibrary": {
-    "poweredBy": "Alimenté par",
-    "emptyState": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.",
-    "loadMoreVideos": "Charger plus de vidéos",
-    "supported": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées."
   }
 }

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

@@ -625,7 +625,6 @@
     "myUploads": "Mes importations",
     "myDesigns": "Mes créations",
     "imageLibrary": "Bibliothèque d’images",
-    "videoLibrary": "Vidéothèque",
     "shapeLibrary": "Bibliothèque de formes"
   },
   "shapeField": {
@@ -840,11 +839,5 @@
     "applyMessage": "Cela s’appliquera à tous les logos de votre site Web.",
     "cancelLabel": "Annuler",
     "continueLabel": "Continuer"
-  },
-  "videoLibrary": {
-    "poweredBy": "Alimenté par",
-    "emptyState": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.",
-    "loadMoreVideos": "Charger plus de vidéos",
-    "supported": "Désolé, votre navigateur ne prend pas en charge les vidéos intégrées."
   }
 }

package/src/bundles/bundled-translations.json

@@ -625,7 +625,6 @@
     "myUploads": "My Uploads",
     "myDesigns": "My Designs",
     "imageLibrary": "Image Library",
-    "videoLibrary": "Video Library",
     "shapeLibrary": "Shape Library"
   },
   "shapeField": {
@@ -840,11 +839,5 @@
     "applyMessage": "This will apply to all the logos in your website.",
     "cancelLabel": "Cancel",
     "continueLabel": "Continue"
-  },
-  "videoLibrary": {
-    "poweredBy": "Powered by",
-    "emptyState": "Sorry, your browser doesn't support embedded videos.",
-    "loadMoreVideos": "Load more videos",
-    "supported": "Sorry, your browser doesn't support embedded videos."
   }
 }

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

@@ -625,7 +625,6 @@
     "myUploads": "Meus uploads",
     "myDesigns": "Meus designs",
     "imageLibrary": "Biblioteca de imagens",
-    "videoLibrary": "Biblioteca de vídeos",
     "shapeLibrary": "Biblioteca de formas"
   },
   "shapeField": {
@@ -840,11 +839,5 @@
     "applyMessage": "Isso se aplicará a todos os logotipos do seu site.",
     "cancelLabel": "Cancelar",
     "continueLabel": "Continuar"
-  },
-  "videoLibrary": {
-    "poweredBy": "Assegurado por",
-    "emptyState": "Seu navegador não aceita vídeos incorporados.",
-    "loadMoreVideos": "Carregar mais vídeos",
-    "supported": "Seu navegador não aceita vídeos incorporados."
   }
 }

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

@@ -625,7 +625,6 @@
     "myUploads": "Os meus carregamentos",
     "myDesigns": "Os meus designs",
     "imageLibrary": "Biblioteca de imagens",
-    "videoLibrary": "Videoteca",
     "shapeLibrary": "Biblioteca de Formas"
   },
   "shapeField": {
@@ -840,11 +839,5 @@
     "applyMessage": "Isto vai aplicar-se a todos os logótipos no seu website.",
     "cancelLabel": "Cancelar",
     "continueLabel": "Continuar"
-  },
-  "videoLibrary": {
-    "poweredBy": "Assegurado por",
-    "emptyState": "Lamentamos, mas o seu navegador não suporta vídeos incorporados.",
-    "loadMoreVideos": "Carregar mais vídeos",
-    "supported": "Lamentamos, mas o seu navegador não suporta vídeos incorporados."
   }
 }

package/src/composables/useTranslate.ts

@@ -201,7 +201,6 @@ const videoTr = (key, valuesToInterpolate = {}) =>
   tr(`video.${key}`, valuesToInterpolate);
 const confirmModalTr = (key, valuesToInterpolate = {}) =>
   tr(`confirmModal.${key}`, valuesToInterpolate);
-const videoLibraryTr = (key) => tr(`videoLibrary.${key}`);
 const logoSwitchConfirmationModalTr = (key, valuesToInterpolate = {}) =>
   tr(`logoSwitchConfirmationModal.${key}`, valuesToInterpolate);
 const logoTemplateSearchModalTr = (key, valuesToInterpolate = {}) =>
@@ -300,7 +299,6 @@ export {
   videoTr,
   bookingUrlFieldTr,
   confirmModalTr,
-  videoLibraryTr,
   logoSwitchConfirmationModalTr,
   logoTemplateSearchModalTr,
 };

package/src/constants/ui.ts

@@ -11,7 +11,6 @@ export interface UIUserFeatures {
   canUsePremiumFontFamily: boolean;
   maxNumOfPages: number;
   canUseRichTextEditor: boolean;
-  canUseGettyVideos: boolean;
 }
 
 export const TEMPLATE_FIRST_PAGE_NO = 1;

package/src/shared/content-settings/components/content-settings/ContentSettings.stories.ts

@@ -29,7 +29,6 @@ export const Sample = (): any => {
     canUsePremiumFontFamily: true,
     canUseRichTextEditor: false,
     maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
-    canUseGettyVideos: true,
   };
 
   const pinia = setupStoryPinia();

package/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.ts

@@ -135,7 +135,9 @@ export default defineComponent({
       }
 
       if (this.isShop) {
-        this.shopConfigStore.setPaymentConfig(paymentConfig);
+        this.shopConfigStore.setPaymentConfig({
+          paymentConfig: paymentConfig,
+        });
       }
 
       this.selectedPaymentConfig = paymentConfig;

package/src/shared/content-settings/components/replace-image-base-settings/ReplaceImageBaseSettings.mixin.ts

@@ -0,0 +1,168 @@
+import type { PropType } from 'vue';
+import { computed, defineComponent } from 'vue';
+import type {
+  Tab,
+  ReplaceImageSettingsTabId,
+  ReplaceImageSettingsBase,
+} from '../../models';
+import type { UserMediaItemWithDimensions } from '../../../my-uploads/models';
+import {
+  useBrandPageContainerStore,
+  type BrandPageSettingsMode,
+} from '../../../../brand-page-maker/stores';
+import axios from 'axios';
+import { getColorReplacementsFromSvgString } from '../../../../brand-page/utils/svg-color.util';
+import { tr } from '../../../../composables/useTranslate';
+
+const imageSettingTr = (key) => tr(`replaceImageSetting.${key}`);
+
+export default defineComponent({
+  props: {
+    mediaSettings: {
+      type: Object as PropType<ReplaceImageSettingsBase>,
+      required: false,
+      default: undefined,
+    },
+    imageExtension: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => ['.jpg', '.jpeg', '.png'],
+    },
+    mode: {
+      type: Object as PropType<BrandPageSettingsMode>,
+      required: true,
+    },
+    isAdmin: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    activeTabs: {
+      type: Array as PropType<ReplaceImageSettingsTabId[]>,
+      required: true,
+    },
+    mediaType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    sectionTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    transparentBg: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    stickyBackBtn: {
+      type: Boolean,
+      required: true,
+      default: true,
+    },
+  },
+  setup() {
+    const containerStore = useBrandPageContainerStore();
+
+    return {
+      isPrePurchase: computed(() => containerStore.isPrePurchase),
+    };
+  },
+  data() {
+    return {
+      tabs: [
+        {
+          id: 'ICON',
+          label: imageSettingTr('icon'),
+          active: false,
+        } as Tab,
+        {
+          id: 'MY_UPLOADS',
+          label: imageSettingTr('myUploads'),
+          active: false,
+        } as Tab,
+        {
+          id: 'MY_DESIGNS',
+          label: imageSettingTr('myDesigns'),
+          active: false,
+        } as Tab,
+        {
+          id: 'IMAGE_LIBRARY',
+          label: imageSettingTr('imageLibrary'),
+          active: false,
+        } as Tab,
+        {
+          id: 'SHAPE_LIBRARY',
+          label: imageSettingTr('shapeLibrary'),
+          active: false,
+        } as Tab,
+      ],
+    };
+  },
+  computed: {
+    enabledTabs(): Tab[] {
+      const value = this.tabs
+        .filter((x) => x.id !== 'MY_DESIGNS' || !this.isAdmin)
+        .filter(
+          (x) =>
+            this.activeTabs.some((y) => y === x.id) &&
+            (!this.isPrePurchase || x.id !== 'MY_DESIGNS'),
+        );
+
+      return value;
+    },
+    isDeleteEnabled(): boolean {
+      return true;
+    },
+  },
+  created() {
+    if (this.enabledTabs.length > 0) {
+      this.enabledTabs[0].active = true;
+    }
+  },
+  methods: {
+    onBack() {
+      this.$emit('on-back');
+    },
+    onImageSelected(
+      image: Pick<
+        UserMediaItemWithDimensions,
+        'url' | 'minimisedUrl' | 'width' | 'height'
+      >,
+    ) {
+      this.$emit('on-image-picked', image, this.mediaType);
+    },
+    onDeleteImage(
+      image: Pick<
+        UserMediaItemWithDimensions,
+        'url' | 'minimisedUrl' | 'width' | 'height'
+      >,
+    ) {
+      this.$emit('on-image-removed', image);
+    },
+    onDesignSelected(image: UserMediaItemWithDimensions) {
+      this.$emit('on-design-selected', image);
+    },
+    switchActiveTab(id: string) {
+      this.tabs.forEach((tab: Tab) =>
+        tab.id === id ? (tab.active = true) : (tab.active = false),
+      );
+    },
+    async onShapeSelected(image: UserMediaItemWithDimensions) {
+      const svgResponse = await axios.get<string>(image.url);
+
+      const colorReplacements = getColorReplacementsFromSvgString(
+        svgResponse.data,
+      );
+
+      this.$emit('on-shape-selected', {
+        imageUrl: image.url,
+        width: image.width,
+        height: image.height,
+        colorReplacements,
+        aspectRatio: image.aspectRatio,
+      });
+    },
+  },
+});