@designcrowd/library.brand-page 5.15.2 → 5.15.4

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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.15.2",
+  "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/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

@@ -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/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/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);