@designcrowd/library.brand-page 5.15.3 → 5.15.4

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

@@ -52,10 +52,10 @@
           :is-delete-enabled="isDeleteEnabled"
           :media-type="mediaType"
           :supported-file-extensions="imageExtension"
-          :desired-width="mediaSettings?.desiredWidth"
-          :desired-height="mediaSettings?.desiredHeight"
-          :max-file-size="mediaSettings?.maxFilesize"
-          :max-files="mediaSettings?.maxFiles"
+          :desired-width="mediaSettings.desiredWidth"
+          :desired-height="mediaSettings.desiredHeight"
+          :max-file-size="mediaSettings.maxFilesize"
+          :max-files="mediaSettings.maxFiles"
           @on-select-image="onImageSelected"
           @on-delete-image="onDeleteImage"
         />
@@ -65,9 +65,6 @@
         <div v-if="tab.id === 'IMAGE_LIBRARY'">
           <UnsplashLibrary @on-select-image="onDesignSelected" />
         </div>
-        <div v-if="tab.id === 'VIDEO_LIBRARY'">
-          <VideoLibrary @on-select-video="onDesignSelected" />
-        </div>
         <div v-if="tab.id === 'SHAPE_LIBRARY'">
           <ShapeLibrary @on-select-image="onShapeSelected" />
         </div>
@@ -75,221 +72,28 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import type { PropType } from 'vue';
-import { computed, ref, onMounted } from 'vue';
+<script>
 import { Button } from '@designcrowd/fe-shared-lib';
 import MyUploads from '../../../my-uploads/MyUploads.vue';
 import MyDesigns from '../../../my-designs/MyDesigns.vue';
 import IconLibrary from '../icon-library/IconLibrary.vue';
+import ReplaceImageBaseSettings from './ReplaceImageBaseSettings.mixin';
 import UnsplashLibrary from '../../../unsplash-library/UnsplashLibrary.vue';
 import ShapeLibrary from '../../../shape-library/ShapeLibrary.vue';
-import VideoLibrary from '../../../video-library/VideoLibrary.vue';
-import type {
-  Tab,
-  ReplaceImageSettingsTabId,
-  ReplaceImageSettingsBase,
-} from '../../models';
-import type { UserMediaItemWithDimensions } from '../../../my-uploads/models';
-import {
-  useBrandPageContainerStore,
-  useBrandPageMakerUserStore,
-  type BrandPageSettingsMode,
-} from '../../../../brand-page-maker/stores';
-import axios from 'axios';
-import { getColorReplacementsFromSvgString } from '../../../../brand-page/utils/svg-color.util';
-import { commonTr, tr } from '../../../../composables/useTranslate';
-
-const imageSettingTr = (key: string) => tr(`replaceImageSetting.${key}`);
-
-// Props
-const props = defineProps({
-  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,
-  },
-});
-
-// Emits
-const emit = defineEmits<{
-  'on-back': [];
-  'on-image-picked': [
-    image: Pick<
-      UserMediaItemWithDimensions,
-      'url' | 'minimisedUrl' | 'width' | 'height'
-    >,
-    mediaType: string,
-  ];
-  'on-image-removed': [
-    image: Pick<
-      UserMediaItemWithDimensions,
-      'url' | 'minimisedUrl' | 'width' | 'height'
-    >,
-  ];
-  'on-design-selected': [image: UserMediaItemWithDimensions];
-  'on-shape-selected': [
-    shape: {
-      imageUrl: string;
-      width: number;
-      height: number;
-      colorReplacements: any;
-      aspectRatio: number;
-    },
-  ];
-}>();
-
-const containerStore = useBrandPageContainerStore();
-const userStore = useBrandPageMakerUserStore();
-
-const isPrePurchase = computed(() => containerStore.isPrePurchase);
-const canUseGettyVideos = computed(() => userStore.features.canUseGettyVideos);
-
-const tabs = ref<Tab[]>([
-  {
-    id: 'ICON',
-    label: imageSettingTr('icon'),
-    active: false,
-  },
-  {
-    id: 'MY_UPLOADS',
-    label: imageSettingTr('myUploads'),
-    active: false,
-  },
-  {
-    id: 'MY_DESIGNS',
-    label: imageSettingTr('myDesigns'),
-    active: false,
+import { commonTr } from '../../../../composables/useTranslate';
+
+export default {
+  components: {
+    Button,
+    MyDesigns,
+    MyUploads,
+    IconLibrary,
+    UnsplashLibrary,
+    ShapeLibrary,
   },
-  {
-    id: 'IMAGE_LIBRARY',
-    label: imageSettingTr('imageLibrary'),
-    active: false,
+  mixins: [ReplaceImageBaseSettings],
+  setup(props, context) {
+    return { ...ReplaceImageBaseSettings.setup(props, context), commonTr };
   },
-  {
-    id: 'VIDEO_LIBRARY',
-    label: imageSettingTr('videoLibrary'),
-    active: false,
-  },
-  {
-    id: 'SHAPE_LIBRARY',
-    label: imageSettingTr('shapeLibrary'),
-    active: false,
-  },
-]);
-
-const enabledTabs = computed(() => {
-  return tabs.value
-    .filter((x) => x.id !== 'MY_DESIGNS' || !props.isAdmin)
-    .filter(
-      (x) =>
-        x.id !== 'VIDEO_LIBRARY' || (canUseGettyVideos.value && props.isAdmin),
-    )
-    .filter(
-      (x) =>
-        props.activeTabs.some((y) => y === x.id) &&
-        (!isPrePurchase.value || x.id !== 'MY_DESIGNS'),
-    );
-});
-
-const isDeleteEnabled = computed(() => true);
-
-// Methods
-const onBack = () => {
-  emit('on-back');
-};
-
-const onImageSelected = (
-  image: Pick<
-    UserMediaItemWithDimensions,
-    'url' | 'minimisedUrl' | 'width' | 'height'
-  >,
-) => {
-  emit('on-image-picked', image, props.mediaType);
-};
-
-const onDeleteImage = (
-  image: Pick<
-    UserMediaItemWithDimensions,
-    'url' | 'minimisedUrl' | 'width' | 'height'
-  >,
-) => {
-  emit('on-image-removed', image);
 };
-
-const onDesignSelected = (image: UserMediaItemWithDimensions) => {
-  emit('on-design-selected', image);
-};
-
-const switchActiveTab = (id: string) => {
-  tabs.value.forEach((tab: Tab) => {
-    tab.active = tab.id === id;
-  });
-};
-
-const onShapeSelected = async (image: UserMediaItemWithDimensions) => {
-  try {
-    const svgResponse = await axios.get<string>(image.url);
-
-    const colorReplacements = getColorReplacementsFromSvgString(
-      svgResponse.data,
-    );
-
-    emit('on-shape-selected', {
-      imageUrl: image.url,
-      width: image.width,
-      height: image.height,
-      colorReplacements,
-      aspectRatio: image.aspectRatio || 1,
-    });
-  } catch (error) {
-    console.error('Failed to load shape:', error);
-  }
-};
-
-// Lifecycle
-onMounted(() => {
-  if (enabledTabs.value.length > 0) {
-    enabledTabs.value[0].active = true;
-  }
-});
 </script>

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.de-DE.json

@@ -4,7 +4,6 @@
     "myUploads" : "Meine Uploads",
     "myDesigns" : "Meine Designs",
     "imageLibrary" : "Bilderbibliothek",
-    "videoLibrary" : "Videobibliothek",
     "shapeLibrary" : "Formbibliothek"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.es-ES.json

@@ -4,7 +4,6 @@
     "myUploads" : "Mis subidas",
     "myDesigns" : "Mis diseños",
     "imageLibrary" : "Biblioteca de imágenes",
-    "videoLibrary" : "Videoteca",
     "shapeLibrary" : "Biblioteca de Formas"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.fr-CA.json

@@ -4,7 +4,6 @@
     "myUploads" : "Mes importations",
     "myDesigns" : "Mes créations",
     "imageLibrary" : "Bibliothèque d’images",
-    "videoLibrary" : "Vidéothèque",
     "shapeLibrary" : "Bibliothèque de formes"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.fr-FR.json

@@ -4,7 +4,6 @@
     "myUploads" : "Mes importations",
     "myDesigns" : "Mes créations",
     "imageLibrary" : "Bibliothèque d’images",
-    "videoLibrary" : "Vidéothèque",
     "shapeLibrary" : "Bibliothèque de formes"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.json

@@ -4,7 +4,6 @@
     "myUploads": "My Uploads",
     "myDesigns": "My Designs",
     "imageLibrary": "Image Library",
-    "videoLibrary": "Video Library",
     "shapeLibrary": "Shape Library"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.pt-BR.json

@@ -4,7 +4,6 @@
     "myUploads" : "Meus uploads",
     "myDesigns" : "Meus designs",
     "imageLibrary" : "Biblioteca de imagens",
-    "videoLibrary" : "Biblioteca de vídeos",
     "shapeLibrary" : "Biblioteca de formas"
   }
 }

package/src/shared/content-settings/components/replace-image-base-settings/i18n/replace-image-setting.pt-PT.json

@@ -4,7 +4,6 @@
     "myUploads" : "Os meus carregamentos",
     "myDesigns" : "Os meus designs",
     "imageLibrary" : "Biblioteca de imagens",
-    "videoLibrary" : "Videoteca",
     "shapeLibrary" : "Biblioteca de Formas"
   }
 }

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

@@ -28,7 +28,6 @@ export interface FieldSettingsBase {
 export const ReplaceImageSettingsTabIds = {
   ICON: 'ICON',
   IMAGE_LIBRARY: 'IMAGE_LIBRARY',
-  VIDEO_LIBRARY: 'VIDEO_LIBRARY',
   MY_UPLOADS: 'MY_UPLOADS',
   MY_DESIGNS: 'MY_DESIGNS',
   SHAPE_LIBRARY: 'SHAPE_LIBRARY',

package/src/shared/ecommerce-settings/components/product-config-field/ProductConfigOption.vue

@@ -29,7 +29,7 @@
         <div class="tw-flex tw-flex-col tw-break-all">
           <div class="tw-text-md tw-font-sans">{{ product.item.name }}</div>
           <div class="tw-text-sm tw-text-grayscale-600">
-            {{ currencySymbol }}{{ displayPrice(product) }}
+            {{ shopSettingStore.currencySymbol }}{{ displayPrice(product) }}
           </div>
         </div>
       </template>
@@ -56,7 +56,7 @@ import ItemsField from '../../../content-settings/components/items-field/ItemsFi
 import type { PaymentOption } from '../../../../brand-page/models';
 import { useShopConfigStore } from '../../store/shop-settings-store';
 import type { ProductModel } from '../../../../brand-page/models/shop.model';
-import { computed, reactive } from 'vue';
+import { reactive } from 'vue';
 import type { DebounceHandle } from 'lodash.debounce';
 import cloneDeep from 'lodash.clonedeep';
 import type { UpdateItemValuePayload } from '../../../../shared/content-settings/models';
@@ -83,8 +83,6 @@ const data = reactive({
 const shopSettingStore = useShopConfigStore();
 const productSettingStore = useProductConfigStore();
 
-const currencySymbol = computed(() => shopSettingStore.currencySymbol);
-
 const onAddNewProduct = () => {
   productSettingStore.openModal(undefined);
 };

package/src/shared/ecommerce-settings/store/shop-settings-store.ts

@@ -68,8 +68,10 @@ export const useShopConfigStore = defineStore('shopConfig', {
         Object.assign($state, newState);
       });
     },
-    setPaymentConfig(value: BrandPagePaymentConfig): void {
-      this.paymentConfig = value;
+    setPaymentConfig(payload: {
+      paymentConfig: BrandPagePaymentConfig | undefined;
+    }): void {
+      this.paymentConfig = payload.paymentConfig;
     },
     getProductById(id: string): ProductModel | undefined {
       return this.products.find((x) => x.id === id);

package/src/shared/models.ts

@@ -27,7 +27,6 @@ export interface Endpoints {
   getAllUserMediaEndpoint: string;
   userPolicyDataEndpoint: string;
   getUnsplashMediaRootEndpoint: string;
-  getGettyEndpoint: string;
 }
 
 export const UI_EVENT_SOURCES = {

package/src/shared/my-uploads/MyMedia.stories.ts

@@ -18,7 +18,6 @@ const defaultUserEndpoints: Endpoints = {
   getAllUserMediaEndpoint: GET_ALL_USER_MEDIA_ENDPOINT,
   userPolicyDataEndpoint: USER_POLICY_DATA_ENDPOINT,
   getUnsplashMediaRootEndpoint: '',
-  getGettyEndpoint: '',
 };
 
 const supportedFileExtensions = ['jpg', 'png', 'gif'];