@designcrowd/library.brand-page 5.15.3 → 5.15.4

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.stories.js

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

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

@@ -359,7 +359,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             paymentConfig: BrandPagePaymentConfig | undefined;
             pages: import("../../../../brand-page").PageModel[];
         }): void;
-        setPaymentConfig(value: BrandPagePaymentConfig): void;
+        setPaymentConfig(payload: {
+            paymentConfig: BrandPagePaymentConfig | undefined;
+        }): void;
         getProductById(id: string): import("../../../../brand-page/models/shop.model").ProductModel | undefined;
         addProduct(product: import("../../../../brand-page/models/shop.model").ProductModel): void;
         updateProduct(id: string, updatedProduct: import("../../../../brand-page/models/shop.model").ProductModel): void;

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

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

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

@@ -0,0 +1,112 @@
+import type { PropType } from 'vue';
+import type { Tab, ReplaceImageSettingsBase } from '../../models';
+import type { UserMediaItemWithDimensions } from '../../../my-uploads/models';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    mediaSettings: {
+        type: PropType<ReplaceImageSettingsBase>;
+        required: false;
+        default: undefined;
+    };
+    imageExtension: {
+        type: PropType<string[]>;
+        required: false;
+        default: () => string[];
+    };
+    mode: {
+        type: PropType<"images" | "edit">;
+        required: true;
+    };
+    isAdmin: {
+        type: BooleanConstructor;
+        required: true;
+        default: boolean;
+    };
+    activeTabs: {
+        type: PropType<("ICON" | "IMAGE_LIBRARY" | "MY_UPLOADS" | "MY_DESIGNS" | "SHAPE_LIBRARY")[]>;
+        required: true;
+    };
+    mediaType: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    sectionTitle: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    transparentBg: {
+        type: BooleanConstructor;
+        required: true;
+        default: boolean;
+    };
+    stickyBackBtn: {
+        type: BooleanConstructor;
+        required: true;
+        default: boolean;
+    };
+}>, {
+    isPrePurchase: import("vue").ComputedRef<boolean>;
+}, {
+    tabs: Tab[];
+}, {
+    enabledTabs(): Tab[];
+    isDeleteEnabled(): boolean;
+}, {
+    onBack(): void;
+    onImageSelected(image: Pick<UserMediaItemWithDimensions, 'url' | 'minimisedUrl' | 'width' | 'height'>): void;
+    onDeleteImage(image: Pick<UserMediaItemWithDimensions, 'url' | 'minimisedUrl' | 'width' | 'height'>): void;
+    onDesignSelected(image: UserMediaItemWithDimensions): void;
+    switchActiveTab(id: string): void;
+    onShapeSelected(image: UserMediaItemWithDimensions): Promise<void>;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    mediaSettings: {
+        type: PropType<ReplaceImageSettingsBase>;
+        required: false;
+        default: undefined;
+    };
+    imageExtension: {
+        type: PropType<string[]>;
+        required: false;
+        default: () => string[];
+    };
+    mode: {
+        type: PropType<"images" | "edit">;
+        required: true;
+    };
+    isAdmin: {
+        type: BooleanConstructor;
+        required: true;
+        default: boolean;
+    };
+    activeTabs: {
+        type: PropType<("ICON" | "IMAGE_LIBRARY" | "MY_UPLOADS" | "MY_DESIGNS" | "SHAPE_LIBRARY")[]>;
+        required: true;
+    };
+    mediaType: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    sectionTitle: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    transparentBg: {
+        type: BooleanConstructor;
+        required: true;
+        default: boolean;
+    };
+    stickyBackBtn: {
+        type: BooleanConstructor;
+        required: true;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    mediaType: string;
+    mediaSettings: ReplaceImageSettingsBase;
+    sectionTitle: string;
+    imageExtension: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,135 @@
+import { computed, defineComponent } from 'vue';
+import { useBrandPageContainerStore, } 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,
+            required: false,
+            default: undefined,
+        },
+        imageExtension: {
+            type: Array,
+            required: false,
+            default: () => ['.jpg', '.jpeg', '.png'],
+        },
+        mode: {
+            type: Object,
+            required: true,
+        },
+        isAdmin: {
+            type: Boolean,
+            required: true,
+            default: false,
+        },
+        activeTabs: {
+            type: Array,
+            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,
+                },
+                {
+                    id: 'MY_UPLOADS',
+                    label: imageSettingTr('myUploads'),
+                    active: false,
+                },
+                {
+                    id: 'MY_DESIGNS',
+                    label: imageSettingTr('myDesigns'),
+                    active: false,
+                },
+                {
+                    id: 'IMAGE_LIBRARY',
+                    label: imageSettingTr('imageLibrary'),
+                    active: false,
+                },
+                {
+                    id: 'SHAPE_LIBRARY',
+                    label: imageSettingTr('shapeLibrary'),
+                    active: false,
+                },
+            ],
+        };
+    },
+    computed: {
+        enabledTabs() {
+            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() {
+            return true;
+        },
+    },
+    created() {
+        if (this.enabledTabs.length > 0) {
+            this.enabledTabs[0].active = true;
+        }
+    },
+    methods: {
+        onBack() {
+            this.$emit('on-back');
+        },
+        onImageSelected(image) {
+            this.$emit('on-image-picked', image, this.mediaType);
+        },
+        onDeleteImage(image) {
+            this.$emit('on-image-removed', image);
+        },
+        onDesignSelected(image) {
+            this.$emit('on-design-selected', image);
+        },
+        switchActiveTab(id) {
+            this.tabs.forEach((tab) => tab.id === id ? (tab.active = true) : (tab.active = false));
+        },
+        async onShapeSelected(image) {
+            const svgResponse = await axios.get(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,
+            });
+        },
+    },
+});

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

@@ -15,7 +15,6 @@ export interface FieldSettingsBase {
 export declare const ReplaceImageSettingsTabIds: {
     readonly ICON: "ICON";
     readonly IMAGE_LIBRARY: "IMAGE_LIBRARY";
-    readonly VIDEO_LIBRARY: "VIDEO_LIBRARY";
     readonly MY_UPLOADS: "MY_UPLOADS";
     readonly MY_DESIGNS: "MY_DESIGNS";
     readonly SHAPE_LIBRARY: "SHAPE_LIBRARY";

package/lib/src/shared/content-settings/models.js

@@ -1,7 +1,6 @@
 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/lib/src/shared/ecommerce-settings/store/shop-settings-store.d.ts

@@ -99,7 +99,9 @@ export declare const useShopConfigStore: import("pinia").StoreDefinition<"shopCo
         paymentConfig: BrandPagePaymentConfig | undefined;
         pages: PageModel[];
     }): void;
-    setPaymentConfig(value: BrandPagePaymentConfig): void;
+    setPaymentConfig(payload: {
+        paymentConfig: BrandPagePaymentConfig | undefined;
+    }): void;
     getProductById(id: string): ProductModel | undefined;
     addProduct(product: ProductModel): void;
     updateProduct(id: string, updatedProduct: ProductModel): void;

package/lib/src/shared/ecommerce-settings/store/shop-settings-store.js

@@ -40,8 +40,8 @@ export const useShopConfigStore = defineStore('shopConfig', {
                 Object.assign($state, newState);
             });
         },
-        setPaymentConfig(value) {
-            this.paymentConfig = value;
+        setPaymentConfig(payload) {
+            this.paymentConfig = payload.paymentConfig;
         },
         getProductById(id) {
             return this.products.find((x) => x.id === id);

package/lib/src/shared/models.d.ts

@@ -23,7 +23,6 @@ export interface Endpoints {
     getAllUserMediaEndpoint: string;
     userPolicyDataEndpoint: string;
     getUnsplashMediaRootEndpoint: string;
-    getGettyEndpoint: string;
 }
 export declare const UI_EVENT_SOURCES: {
     readonly contentSettings: "contentSettings";

package/lib/src/shared/my-uploads/MyMedia.stories.js

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

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -3104,7 +3104,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         canUsePremiumFontFamily: boolean;
         maxNumOfPages: number;
         canUseRichTextEditor: boolean;
-        canUseGettyVideos: boolean;
     }>;
     isAdmin: import("vue").ComputedRef<boolean>;
     isBrandSite: import("vue").ComputedRef<boolean>;

package/package.json

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

package/src/brand-page/components/logo/LogoRender.vue

@@ -110,6 +110,7 @@ const logoStyle = computed(() => {
     : ({
         width: '100%',
         height: '100%',
+        'max-width': '20rem',
       } as any);
 });
 

package/src/brand-page/components/shop/FeaturedDisplay.vue

@@ -65,10 +65,6 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import { type PropType } from 'vue';
 import type { ShopViewModel } from '../../view-models';
 import type { ProductModel } from '../../models/shop.model';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
-import { computed } from 'vue';
-
-const shopSettingStore = useShopConfigStore();
 
 const props = defineProps({
   context: {
@@ -79,6 +75,11 @@ const props = defineProps({
     type: Object as PropType<ShopViewModel>,
     required: true,
   },
+  currencySymbol: {
+    type: String,
+    required: false,
+    default: '$',
+  },
   aspectRatio: {
     type: String,
     required: true,
@@ -94,13 +95,11 @@ const props = defineProps({
   },
 });
 
-const currencySymbol = computed(() => shopSettingStore.currencySymbol);
-
 const renderCurrencyAmount = (product: ProductModel): string => {
   const variantPrice = product.variant?.[0]?.options?.[0]?.price;
   const finalPrice = variantPrice ?? product.defaultPrice ?? '0';
 
-  return `${currencySymbol.value} ${finalPrice}`;
+  return `${props.currencySymbol} ${finalPrice}`;
 };
 
 const emit = defineEmits(['on-product-detail']);

package/src/brand-page/components/shop/PaymentModal.vue

@@ -145,6 +145,7 @@ const paymentState = {
 interface Props {
   context: BrandPageContext;
   isVisible: boolean;
+  currencySymbol: string;
   buttonStyle: ButtonStyles;
   shopPaymentConfig: BrandPagePaymentConfig;
   descriptionStyle: TextStyleDeclaration | undefined;
@@ -153,6 +154,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   isVisible: true,
+  currencySymbol: '$',
 });
 
 const uniformDescriptionStyle = computed<TextStyleDeclaration>(() => ({

package/src/brand-page/components/shop/ProductDetailModal.vue

@@ -30,7 +30,7 @@
               {{ currentProduct.name }}
             </h1>
             <p class="tw-text-left tw-text-md tw-text-grayscale-800">
-              {{ currencySymbol }} {{ itemPrice }}
+              {{ shopSettingStore.currencySymbol }} {{ itemPrice }}
             </p>
             <div v-if="currentProduct.hasVariants">
               <div
@@ -185,7 +185,6 @@ const cartSettingsStore = useCartStore();
 const shopSettingStore = useShopConfigStore();
 
 const products = computed(() => shopSettingStore.products);
-const currencySymbol = computed(() => shopSettingStore.currencySymbol);
 const currentProduct = computed(() => {
   // Use the first product if currentProduct is not found
   return (

package/src/brand-page/components/shop/Shop.vue

@@ -32,6 +32,7 @@
             :view-model="viewModel"
             :context="context"
             :item-style="itemStyle"
+            :currency-symbol="data.defaultCurrencySymbol"
             @on-product-detail="onShowProductDetailModal"
           />
           <ThumbnailDisplay
@@ -40,6 +41,7 @@
             :context="context"
             :aspect-ratio="aspectRatio"
             :item-style="itemStyle"
+            :currency-symbol="data.defaultCurrencySymbol"
             :content-index="contentIndex"
             @on-product-detail="onShowProductDetailModal"
           />
@@ -49,6 +51,7 @@
             :context="context"
             :aspect-ratio="aspectRatio"
             :item-style="itemStyle"
+            :currency-symbol="data.defaultCurrencySymbol"
             :content-index="contentIndex"
             @on-product-detail="onShowProductDetailModal"
           />
@@ -88,6 +91,7 @@
       class="modal-product-detail"
       :product="data.product"
       :button-style="buttonStyle"
+      :currency-symbol="currencySymbol"
       @on-close="onClose"
       @on-show-success="onShowSuccess"
     />
@@ -95,6 +99,7 @@
       class="modal-cart"
       :is-visible="data.isCartModalVisible"
       :button-style="buttonStyle"
+      :currency-symbol="currencySymbol"
       @on-close="onCloseCart"
       @on-show-payment="onShowPaymentModal"
     />
@@ -104,6 +109,7 @@
       :is-visible="data.isPaymentModalVisible"
       :button-style="buttonStyle"
       :description-style="viewModel.descriptionStyle"
+      :currency-symbol="currencySymbol"
       :shop-payment-config="shopPaymentConfig"
       :context="context"
       :success-message="viewModel.successMessage"
@@ -134,18 +140,24 @@ import PaymentModal from './PaymentModal.vue';
 import brandPageClient from '../../clients/brand-page.client';
 import raygunUtil from '../../utils/raygun.util';
 import { shopTr } from '../../../composables/useTranslate';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
 
-const props = withDefaults(
-  defineProps<{
-    context: BrandPageContext;
-    viewModel: ShopViewModel;
-    contentIndex: number;
-  }>(),
-  {},
-);
+const props = defineProps({
+  context: {
+    type: Object as PropType<BrandPageContext>,
+    required: true,
+  },
+  viewModel: {
+    type: Object as PropType<ShopViewModel>,
+    required: true,
+  },
+  contentIndex: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+});
+
 const cartSettingsStore = useCartStore();
-const shopSettingStore = useShopConfigStore();
 
 const cart = computed(() => cartSettingsStore.cartItems);
 
@@ -189,6 +201,9 @@ const data = reactive({
   isAddCartSuccess: false,
   product: {} as ProductModel,
   isActivePaymentProvider: false,
+  defaultCurrencySymbol:
+    props.viewModel.shopPaymentConfig?.paymentConfig?.defaultCurrencySymbol ??
+    '$',
 });
 
 const viewCartText = computed(() => {
@@ -259,11 +274,15 @@ const backgroundStyle = computed((): any => {
   return props.viewModel.backgroundStyle;
 });
 
+const currencySymbol = computed((): any => {
+  return props.viewModel.shopPaymentConfig.paymentConfig?.defaultCurrencySymbol;
+});
+
 const shopPaymentConfig = computed((): BrandPagePaymentConfig => {
-  if (!shopSettingStore.paymentConfig) {
+  if (!props.viewModel.shopPaymentConfig.paymentConfig) {
     throw new Error('No Payment Config found');
   }
-  return shopSettingStore.paymentConfig;
+  return props.viewModel.shopPaymentConfig.paymentConfig;
 });
 
 const isTextDisplayStyle = computed(() => {

package/src/brand-page/components/shop/TextDisplay.vue

@@ -34,10 +34,6 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { PropType } from 'vue';
 import type { ShopViewModel } from '../../view-models';
 import type { ProductModel } from '../../models/shop.model';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
-import { computed } from 'vue';
-
-const shopSettingStore = useShopConfigStore();
 
 const props = defineProps({
   context: {
@@ -48,19 +44,22 @@ const props = defineProps({
     type: Object as PropType<ShopViewModel>,
     required: true,
   },
+  currencySymbol: {
+    type: String,
+    required: false,
+    default: '$',
+  },
   itemStyle: {
     type: Object,
     required: true,
   },
 });
 
-const currencySymbol = computed(() => shopSettingStore.currencySymbol);
-
 const renderCurrencyAmount = (product: ProductModel): string => {
   const variantPrice = product.variant?.[0]?.options?.[0]?.price;
   const finalPrice = variantPrice ?? product.defaultPrice ?? '0';
 
-  return `${currencySymbol.value} ${finalPrice}`;
+  return `${props.currencySymbol} ${finalPrice}`;
 };
 
 const emit = defineEmits(['on-product-detail']);

package/src/brand-page/components/shop/ThumbnailDisplay.vue

@@ -51,10 +51,6 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { PropType } from 'vue';
 import type { ShopViewModel } from '../../view-models';
 import type { ProductModel } from '../../models/shop.model';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
-import { computed } from 'vue';
-
-const shopSettingStore = useShopConfigStore();
 
 const props = defineProps({
   context: {
@@ -65,6 +61,11 @@ const props = defineProps({
     type: Object as PropType<ShopViewModel>,
     required: true,
   },
+  currencySymbol: {
+    type: String,
+    required: false,
+    default: '$',
+  },
   aspectRatio: {
     type: String,
     required: true,
@@ -80,13 +81,11 @@ const props = defineProps({
   },
 });
 
-const currencySymbol = computed(() => shopSettingStore.currencySymbol);
-
 const renderCurrencyAmount = (product: ProductModel): string => {
   const variantPrice = product.variant?.[0]?.options?.[0]?.price;
   const finalPrice = variantPrice ?? product.defaultPrice ?? '0';
 
-  return `${currencySymbol.value} ${finalPrice}`;
+  return `${props.currencySymbol} ${finalPrice}`;
 };
 
 const emit = defineEmits(['on-product-detail']);

package/src/brand-page/utils/migration/migration-07.ts

@@ -99,7 +99,8 @@ export const migration07 = async (
         !logoData &&
         (sectionName === 'pageFooterDesktop' ||
           sectionName === 'pageFooterMobile' ||
-          sectionName === 'pageHeaderMobile')
+          sectionName === 'pageHeaderMobile' ||
+          sectionName === 'pageHeaderDesktop')
       ) {
         const currentMaxHeight = config.logoImageHeight || DEFAULT_LOGO_HEIGHT;
         const heightValue = parseFloat(currentMaxHeight);

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -1461,7 +1461,6 @@ export const SampleImageUpload = (): any => {
         userPolicyDataEndpoint:
           'http://localhost:3600/maker/api/users/policy-data',
         getUnsplashMediaRootEndpoint: 'http://staging.brandcrowd.com',
-        getGettyEndpoint: 'http://staging.brandcrowd.com',
       },
     }),
   };

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -86,7 +86,6 @@ export const userFeatures: UserFeatures = {
   canUseRichTextEditor: true,
   canUsePremiumFontFamily: true,
   maxNumOfPages: DEFAULT_MAX_NUM_OF_PAGES,
-  canUseGettyVideos: false,
 };
 
 export const BRAND_PAGE: BrandPageData = {
@@ -2122,7 +2121,6 @@ export const INITIALISE_PAYLOAD: InitialisePayload = Object.freeze({
     canUseRichTextEditor: false,
     canUsePremiumFontFamily: true,
     maxNumOfPages: UNLIMITED_MAX_NUM_OF_PAGES,
-    canUseGettyVideos: true,
   },
   logoDraftDesignAttributes: simpleLogoDesignAttributes,
   backUrl: '',