@lancom/shared 0.0.353 → 0.0.355

package/assets/js/utils/shop.js

@@ -4,6 +4,10 @@ export function getShopCountrySettings(shop, country) {
 
   return {
     ...shop.settings,
+    contacts: {
+      ...(shop.settings.app || {}),
+      ...settingsValues(countrySetting?.settings?.app)
+    },
     contacts: {
       ...shop.settings.contacts,
       ...settingsValues(countrySetting?.settings?.contacts)

package/components/checkout/cart/cart_entities_group/cart-entities-group.vue

@@ -50,7 +50,7 @@
               :key="`${entity.guid}_${index}`"
               class="lc_regular12 lc_grey1">
               <div>
-                {{ print.printArea.name }} | {{ print.printSize.name }} | {{ print.printType.name }}
+                {{ print.printArea.name }} | {{ print.printSize.name }} | {{ print.printType ? print.printType.name : '' }}
               </div>
             </div>
           </div>

package/components/checkout/cart/cart_entities_group/cart_entities_group_prints/cart_entities_group_print/cart-entities-group-print.vue

@@ -1,7 +1,7 @@
 <template>
   <tr>
     <td class="lc_body-small">
-      {{ print.printType.name }}
+      {{ print.printType ? print.printType.name : '' }}
     </td>
     <td class="lc_body-small">
       {{ print.printArea.name }}

package/components/checkout/cart/cart_entities_group_table/cart_entities_group_tr/cart-entities-group-tr.vue

@@ -46,7 +46,7 @@
               :key="`${entity.guid}_${index}`"
               class="lc_regular12 lc_grey1">
               <div>
-                {{ print.printArea.name }} | {{ print.printSize.name }} | {{ print.printType.name }}
+                {{ print.printArea.name }} | {{ print.printSize.name }} | {{ print.printType ? print.printType.name : '' }}
               </div>
             </div>
           </div>

package/components/checkout/cart/cart_entity/cart_entity_prints/cart_entity_print/cart-entity-print.vue

@@ -3,7 +3,7 @@
     <tr>
       <td class="lc_body-small">
         <span class="hidden-md-and-up">Print Type</span>
-        {{ print.printType.name }}
+        {{ print.printType ? print.printType.name : '' }}
       </td>
       <td class="lc_body-small">
         <span class="hidden-md-and-up">Location</span>

package/components/checkout/order/order-payment-information/order-payment-information.vue

@@ -11,23 +11,31 @@
         <div class="form-row OrderPaymentInformation__form">
           <label
             class="form-label OrderPaymentInformation__checkbox"
-            @click="updatePaymentType(false)">
-            <checked-icon :checked="!isDepositPayment" />
+            @click="updatePaymentType('card')">
+            <checked-icon :checked="paymentMethod === 'card'" />
             <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
               Credit Card
             </span>
           </label>
           <label
             class="form-label OrderPaymentInformation__checkbox"
-            @click="updatePaymentType(true)">
-            <checked-icon :checked="isDepositPayment" />
+            @click="updatePaymentType('deposit')">
+            <checked-icon :checked="paymentMethod === 'deposit'" />
             <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
               Bank Transfer
             </span>
           </label>
+          <label
+            class="form-label OrderPaymentInformation__checkbox"
+            @click="updatePaymentType('google')">
+            <checked-icon :checked="paymentMethod === 'google'" />
+            <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
+              Google Pay
+            </span>
+          </label>
         </div>
         <div
-          v-if="isDepositPayment"
+          v-if="paymentMethod === 'deposit'"
           class="OrderPaymentInformation__direct-deposit">
           <div
             class="OrderPaymentInformation__direct-deposit-info"
@@ -60,6 +68,8 @@
           <payment-card
             v-if="orderData"
             ref="paymentCart"
+            :key="paymentMethod"
+            :google="paymentMethod === 'google'"
             :amount="cartPricing.totalPrice"
             :order="orderData"
             @inited="initedCard">
@@ -108,6 +118,7 @@ export default {
       creating: false,
       submitting: false,
       loadingCard: true,
+      paymentMethod: this.order.paymentMethod || ORDER_PAYMENT_METHOD.CARD,
       isDepositPayment: this.order.paymentMethod === ORDER_PAYMENT_METHOD.DEPOSIT
     };
   },
@@ -162,8 +173,9 @@ export default {
         }
       }
     },
-    updatePaymentType(isDeposit) {
-      this.isDepositPayment = isDeposit;
+    updatePaymentType(paymentMethod) {
+      this.isDepositPayment = paymentMethod === ORDER_PAYMENT_METHOD.DEPOSIT;
+      this.paymentMethod = paymentMethod;
       this.errorMessage = null;
     },
     depositInfo(info) {

package/components/common/client_settings_stock_country/client-settings-stock-country.vue

@@ -16,7 +16,7 @@
 </template>
   
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapMutations } from 'vuex';
 
 const Cookie = process.client ? require('js-cookie') : undefined;
 
@@ -44,9 +44,12 @@ export default {
     }
   },
   methods: {
+    ...mapMutations([
+      'setStockCountry'
+    ]),
     selectStockCountry(stockCountry) {
       this.saveStockCountry(stockCountry);
-      window.location.reload();
+      this.setStockCountry(stockCountry);
     },
     saveStockCountry(stockCountry) {
       const value = (stockCountry && stockCountry.isoCode !== 'world') ? stockCountry?._id : null

package/components/common/payment/payment_card/googlepay/googlepay.scss

@@ -0,0 +1,73 @@
+@import "@/assets/scss/ui_kit";
+@import "@/assets/scss/variables";
+
+.example {
+  margin: 5px;
+  display: flex;
+  flex-direction: row;
+}
+
+.example > .title {
+  width: 250px;
+  align-items: center;
+  display: inherit;
+}
+
+.example > .demo {
+  flex: 1 0 0;
+}
+
+.example > .demo > * {
+  margin: 1px;
+}
+
+.Payment {
+  &__wrapper {
+    .pin-form-field {
+      // @extend .form-field;
+      // @extend .labelless;
+      border-radius: 0px;
+      background-color: #F4F4F4;
+    }
+  }
+  &__field-container {
+    width: 100%;
+  }
+  &__message {
+    padding: 50px 140px;
+  }
+  &__content {
+    position: relative;
+    min-height: 100px;
+  }
+  &__fileds-spinner {
+    background-color: white;
+  }
+  &__terms {
+    margin-top: 20px;
+  }
+  &__label-with-checkbox {
+    display: flex !important;
+    align-items: center;
+    margin-bottom: 3px !important;
+    a {
+      color: $green;
+    }
+  }
+}
+
+.form-row--cols {
+  @media (max-width: $bp-extra-small-max) {
+    flex-direction: column;
+  }
+  .col-half {
+    @media (max-width: $bp-extra-small-max) {
+      flex-basis: 100%;
+      width: 100%;
+      margin-left: 0 !important;
+      &:nth-child(2) {
+        margin-top: 20px;
+      }
+    }
+  }
+}

package/components/common/payment/payment_card/googlepay/googlepay.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="Payment__wrapper">
+    <div v-if="(hasSpinner && processing) || loading">
+      <spinner />
+    </div>
+    <div
+      :style="{
+        opacity: loading ? 0 : 1
+      }">
+      <div
+        v-if="amount"
+        class="form-row">
+        <label
+          for="payment-amount"
+          class="form-label">
+          Amount to Pay
+        </label>
+        <input
+          id="payment-amount"
+          :value="`${amount} AUD`"
+          name="payment-amount"
+          placeholder="payment-amount"
+          disabled
+          type="text"
+          class="form-field labelless" />
+      </div>
+      <div class="examples">
+        <div>
+          <div class="example">
+            <div class="demo">
+              <google-pay-button
+                v-if="!loading"
+                environment="TEST"
+                button-type="plain"
+                button-color="black"
+                v-bind:paymentRequest.prop="{
+                  apiVersion: 2,
+                  apiVersionMinor: 0,
+                  allowedPaymentMethods: [
+                    {
+                      type: 'CARD',
+                      parameters: {
+                        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+                        allowedCardNetworks: ['MASTERCARD', 'VISA'],
+                      },
+                      tokenizationSpecification: {
+                        type: 'PAYMENT_GATEWAY',
+                        parameters: {
+                          gateway: 'pinpayments',
+                          gatewayMerchantId: app.PAYMENT_GOOGLE_GATEWAY,
+                        }
+                      },
+                    },
+                  ],
+                  merchantInfo: {
+                    merchantId: app.PAYMENT_GOOGLE_MERCHANT_ID,
+                    merchantName: app.PAYMENT_GOOGLE_MERCHANT_NAME,
+                  },
+                  transactionInfo: {
+                    totalPriceStatus: 'FINAL',
+                    totalPriceLabel: 'Total',
+                    totalPrice: amountString,
+                    currencyCode: currencyCode,
+                    countryCode: countryCode
+                  },
+                }"
+                @loadpaymentdata="onLoadPaymentData"
+                @error="onError" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot v-if="!loading" name="controls" v-bind="{ processing }"></slot>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import '@google-pay/button-element';
+
+let timer = null;
+let googlepayStartLoaded = false;
+
+export default {
+  name: 'Googlepay',
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    amount: {
+      type: Number
+    },
+    hasSpinner: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      paymentData: null,
+      paymentError: null,
+      processing: false,
+      loading: false,
+      fields: null
+    };
+  },
+  async mounted() {
+    this.loading = true;
+    await this.loadGooglepay();
+    this.loading = false;
+  },
+  destroyed() {
+    clearInterval(timer);
+  },
+  computed: {
+    ...mapGetters(['country', 'currency', 'app']),
+    amountString() {
+      return `${this.amount.toFixed(2)}`;
+    },
+    currencyCode() {
+      return this.currency?.isoCode || 'AUSD';
+    },
+    countryCode() {
+      return this.country?.isoCode || 'AU';
+    }
+  },
+  methods: {
+    onLoadPaymentData(event) {
+      const token = JSON.parse(event.detail.paymentMethodData.tokenizationData.token);
+      this.paymentData = { google: true, token }
+    },
+    onError(event) {
+      this.paymentError = event.error;
+      console.log('this.paymentError: ', this.paymentError);
+    },
+    tokenize() {
+      this.processing = true;
+      return new Promise((resolve, reject) => {
+        if (this.paymentError || !this.paymentData) {
+          reject(!this.paymentData ? 'Payment Failed. Need to choose card' : 'Payment Failed')
+        } else {
+          resolve(this.paymentData);
+        }
+        this.processing = false;
+      });
+    },
+    async loadGooglepay() {
+      if (process.browser) {
+        await (new Promise((resolve, reject) => {
+          if (!googlepayStartLoaded) {
+            googlepayStartLoaded = true;
+            resolve();
+            googlepayStartLoaded = false;
+            // let domElement = document.createElement('script');
+            // domElement.type = "text/javascript";
+            // domElement.setAttribute('src', 'https://cdn.pinpayments.com/pin.hosted_fields.v1.js');
+            // domElement.onload = () => {
+            //   resolve();
+            // };
+            // domElement.onerror = () => {
+            //   setTimeout(() => this.loadPinpayments(), 1000);
+            // };
+            // document.body.appendChild(domElement);
+          } else {
+            let repeated = 0;
+            timer = setInterval(() => {
+              if (!googlepayStartLoaded || repeated++ > 40) {
+                clearInterval(timer);
+                resolve();
+              }
+            }, 500);
+          }
+        }));
+      }
+    }
+  }
+};
+</script>
+
+
+<style lang="scss" scoped>
+@import 'googlepay.scss';
+</style>

package/components/common/payment/payment_card/payment-card.vue

@@ -17,6 +17,7 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'PaymentCard',
   components: {
+    Googlepay: () => import('./googlepay/googlepay'),
     Pinpayment: () => import('./pinpayment/pinpayment'),
     Stripe: () => import('./stripe_card/stripe-card'),
     StripePayment: () => import('./stripe_payment/stripe-payment')
@@ -28,11 +29,17 @@ export default {
     },
     amount: {
       type: Number
+    },
+    google: {
+      type: Boolean
     }
   },
   computed: {
     ...mapGetters(['payment']),
     cardComponent() {
+      if (this.google) {
+        return 'googlepay';
+      }
       return this.payment?.type || 'stripe-payment';
     }
   },

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -203,8 +203,7 @@ export default {
       return this.images.find(i => i.types?.includes('wireframe') && i.types?.includes(this.side));
     },
     onpressImage() {
-      console.log('this.images: ', this.images);
-      return this.product.images?.find(i => i.types?.includes('on_press'));
+      return this.product.images?.find(i => i.types?.includes('on_press') && i.color === this.editableColor?._id);
     },
     sideEditableLayers() {
       return this.editableLayers.filter(l => l.sideId === this.side);

package/components/order/order_view/order_product_prints/order_product_print/order-product-print.vue

@@ -3,7 +3,7 @@
     <tr>
       <td class="lc_body-small">
         <span :class="responsive ? 'hidden-md-and-up' : 'hidden'">Print Type</span>
-        {{ print.printType.name }}
+        {{ print.printType ? print.printType.name : '' }}
       </td>
       <td class="lc_body-small">
         <span :class="responsive ? 'hidden-md-and-up' : 'hidden'">Location</span>

package/components/product/product_colors_selector/product-colors-selector.vue

@@ -82,6 +82,7 @@
             </div>
           </div>
           <products-size-selector-color
+            :key="productDetailsKey"
             :with-gst="inclGSTFinal"
             class="ProductColorsSelector__section"
             :class="{
@@ -131,8 +132,8 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['taxName']),
-    ...mapGetters('product', ['editableColor', 'availableColors', 'visibleSteps', 'hasLayers', 'isPrintPricing', 'priceIncludeGST']),
+    ...mapGetters(['stockCountry', 'taxName']),
+    ...mapGetters('product', ['productDetailsKey', 'editableColor', 'availableColors', 'visibleSteps', 'hasLayers', 'isPrintPricing', 'priceIncludeGST']),
     selectedColor: {
       get() {
         return this.editableColor;

package/components/product/wizard/wizard_print_layers/wizard_print_layer/wizard-print-layer.vue

@@ -17,7 +17,7 @@
         <div class="lc_regular14 hidden-sm-and-up">
           Print type
         </div>
-        {{ layerPrintType.name }}
+        {{ layerPrintType ? layerPrintType.name : '-' }}
       </td>
       <td>
         <div class="lc_regular14 hidden-sm-and-up">

package/components/product/wizard/wizard_print_text_or_logo/wizard-print-text-or-logo.vue

@@ -107,7 +107,7 @@ export default {
               printArea: editablePrintArea._id,
               printSize: selectedPrintArea?._id,
               side: editablePrintArea.side,
-              printType: selectedPrintType._id
+              printType: selectedPrintType?._id
             }
           };
           if (layer.type === 'text') {

package/components/product/wizard/wizard_print_type/wizard_print_area_print_type/wizard-print-area-print-type.vue

@@ -95,7 +95,7 @@ export default {
   methods: {
     ...mapMutations('product', ['setSelectedPrintTypes']),
     isSelectedType(type) {
-      return this.selectedPrintType && this.selectedPrintType._id === type._id;
+      return this.selectedPrintType && this.selectedPrintType?._id === type._id;
     },
     selectPrintType(type) {
       this.setSelectedPrintTypes({ printArea: this.editablePrintArea._id, type });

package/components/quotes/quote_view/quote_product_prints/quote_product_print/quote-product-print.vue

@@ -3,7 +3,7 @@
     <tr>
       <td class="lc_body-small">
         <span class="hidden-md-and-up">Print Type</span>
-        {{ print.printType.name }}
+        {{ print.printType ? print.printType.name : '' }}
       </td>
       <td class="lc_body-small">
         <span class="hidden-md-and-up">Location</span>

package/feeds/google-shopping.js

@@ -66,9 +66,10 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
 
               const productWeight = +((product.weight || 0) * (sp.multipackQty || 1)).toFixed(3);
               const info = {
-                title: { _text: sp.title || title },
-                description: { _text: sp.description || description },
+                'g:title': { _text: sp.title || title },
+                'g:description': { _text: sp.description || description },
                 link: { _text: link },
+                'g:canonical_link': { _text: link.split('?')[0] },
                 'g:id': { _text: sp.SKU },
                 'g:item_group_id': { _text: product.SKU },
                 'g:size': { _text: sp.size.name },
@@ -161,7 +162,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
 
               for (let label = 0; label <= 4; label++) {
                 if (product[`feedCustomLabel${label}`]) {
-                  info[`custom_label_${label}`] = { _text: product[`feedCustomLabel${label}`] };
+                  info[`g:custom_label_${label}`] = { _text: product[`feedCustomLabel${label}`] };
                 }
               }
 

package/mixins/meta-info.js

@@ -39,7 +39,7 @@ const metaInfo = {
   head() {
     const hasQueryParams = Object
       .keys(this.$route.query || {})
-      .filter(key => !['color', 'store'].includes(`${key || ''}`.toLowerCase()))
+      .filter(key => !['color', 'store','price'].includes(`${key || ''}`.toLowerCase()))
       .length > 0;
 
     const { short_text: shortText, image, meta = {} } = this.routeInfo || {};

package/mixins/payment.js

@@ -38,7 +38,7 @@ export default {
     ...mapMutations('layers', ['resetLayers']),
     handleErrors(err) {
       // err.messages.forEach(({ message }) => this.$toastr.e(message));
-      const defaultMessage = 'Payment error';
+      const defaultMessage = typeof err === 'string' ? err : 'Payment error';
       this.errorMessage = (err.messages ? err.messages.map(({ message }) => message).join(', ') : (err.error_description)) || err.message || defaultMessage;
     },
     async proceedPayment(card) {

package/mixins/print-layer.js

@@ -38,8 +38,8 @@ export default {
       return this.layerPrintSizes.find(({ _id }) => _id === this.layer.printSize);
     },
     layerPrintPricing() {
-      const printArea = this.layerPrintType.printAreas.find(({ printSizes }) => printSizes.map(({ _id }) => _id).includes(this.layer.printSize)) || this.layerPrintType.printAreas[0];
-      return printArea.printCost;
+      const printArea = this.layerPrintType?.printAreas.find(({ printSizes }) => printSizes.map(({ _id }) => _id).includes(this.layer.printSize)) || this.layerPrintType?.printAreas[0];
+      return printArea?.printCost;
     }
   }
 };

package/mixins/product-view.js

@@ -80,9 +80,17 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
       preSetPrintPricing: false
     };
   },
+  watch: {
+    async stockCountryId(prev, curr) {
+      await this.loadProductStockDetails();
+    }
+  },
   computed: {
     ...mapGetters(['shop', 'gstTax', 'country', 'stockCountry', 'currency']),
     ...mapGetters('product', ['product', 'simpleProducts', 'productDetails', 'editableColor', 'images', 'preSetPrints', 'editorSize', 'printsPrice']),
+    stockCountryId() {
+      return this.stockCountry?._id || null;
+    },
     pageItemImage() {
       return this.mainProductImageSrc;
     },
@@ -115,21 +123,12 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     this.fillBreadcrumbs();
   },
   async mounted() {
-    const { slug } = this.$route.params;
-    const { color, colour, multipack } = this.$route.query;
-    const data = {
-      shop: this.shop._id,
-      slug,
-      country: this.country?._id,
-      stockCountry: this.stockCountry?._id,
-      currency: this.currency?._id,
-      defaultColor: color || colour
-    };
     if (!this.product) {
-      await this.fetchProduct(data);
+      const query = this.getProductQuery();
+      await this.fetchProduct(query);
     }
 
-    await this.fetchProductDetails(data);
+    await this.loadProductStockDetails();
 
     try {
       if (this.preSetPrints?.length) {
@@ -171,7 +170,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     }
     
     this.fillBreadcrumbs();
-
+    const { multipack } = this.$route.query;
     if (multipack) {
       const [SKU, qty] = multipack.split('-multipack-');
       const simpleProduct = this.simpleProducts.find(sp => sp.SKU === SKU);
@@ -192,9 +191,27 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     this.clearProduct();
   },
   methods: {
-    ...mapActions(['fetchProduct', 'fetchProductDetails', 'selectColor']),
+    ...mapActions(['fetchProduct', 'fetchProductDetails', 'fetchProductStockDetails', 'selectColor']),
     ...mapMutations(['clearProduct', 'clearTemplate', 'addTemplateLayer', 'setSimpleProductAmount', 'setPriceIncludeGST']),
     staticLink,
+    getProductQuery() {
+      const { slug } = this.$route.params;
+      const { color, colour } = this.$route.query;
+      const data = {
+        shop: this.shop._id,
+        slug,
+        country: this.country?._id,
+        stockCountry: this.stockCountry?._id,
+        currency: this.currency?._id,
+        defaultColor: color || colour
+      };
+
+      return data;
+    },
+    loadProductStockDetails() {
+      const query = this.getProductQuery();
+      this.fetchProductStockDetails(query);
+    },
     goToInfoTab(tab) {
       this.$refs.infoTabs.selectedTab = tab;
       const { $el } = this.$refs.infoTabs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.353",
+  "version": "0.0.355",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/store/cart.js

@@ -165,7 +165,6 @@ export const actions = {
     try {
       commit('setCartPricingCalculating', true);
       const response = await api.calculateProductPrice(payload, shop._id);
-      console.log('response: ', response);
       commit('setCartPricing', response);
       commit('setCartPricingError', null);
     } catch (e) {
@@ -237,7 +236,6 @@ export const mutations = {
     state.coupon = coupon;
   },
   setCartPricing(state, price) {
-    console.log('setCartPricing: ', price);
     state.cartPricing = price;
   },
   setCartPricingCalculating(state, calculating) {

package/store/index.js

@@ -13,6 +13,7 @@ export const state = () => ({
   payment: null,
   shop: {},
   menus: [],
+  app: {},
   contacts: {},
   orderInfo: {},
   pricing: {},
@@ -23,6 +24,7 @@ export const state = () => ({
 });
 
 export const getters = {
+  app: ({ app }) => app,
   stockCountry: ({ stockCountry }) => stockCountry,
   country: ({ country }) => country,
   countries: ({ shop }) => (shop.countries || []).map(({ country }) => country).filter(c => !!c),
@@ -147,7 +149,8 @@ export const mutations = {
   setCurrency(state, currency) {
     state.currency = currency;
   },
-  setSettings(state, { contacts, notificationBar, discountPopup, order, depositInfo, pricing }) {
+  setSettings(state, { contacts, notificationBar, discountPopup, order, depositInfo, pricing, app }) {
+    state.app = app;
     state.contacts = contacts;
     state.orderInfo = order;
     state.notificationBar = notificationBar;

package/store/product.js

@@ -13,6 +13,7 @@ export const state = () => ({
   multipack: null,
   calculatingPrice: false,
   loadingProductDetails: false,
+  productDetailsKey: Date.now(),
   images: [],
   priceIncludeGST: false,
   product: null,
@@ -51,6 +52,7 @@ export const state = () => ({
 });
 
 export const getters = {
+  productDetailsKey: ({ productDetailsKey }) => productDetailsKey,
   loadingProductDetails: ({ loadingProductDetails }) => loadingProductDetails,
   multipack: ({ multipack }) => multipack,
   calculatingPrice: ({ calculatingPrice }) => calculatingPrice,
@@ -187,7 +189,8 @@ export const actions = {
     commit('setLoadingProductDetails', false);
 
     const catalogFrontColorId = getColorOfDefaultCatalogFrontImage(state.product);
-    const editableColor = state.availableColors.find(c => c.alias === defaultColor) ||
+    const editableColor = state.availableColors.find(c => c._id === state.editableColor?._id) ||
+      state.availableColors.find(c => c.alias === defaultColor) ||
       state.availableColors.find(c => c._id === catalogFrontColorId) ||
       state.availableColors[0];
     commit('setEditableColor', editableColor);
@@ -205,6 +208,13 @@ export const actions = {
     images = [...imagesGroups.values()].reduce((images, group) => [...images, ...group], []);
     commit('setImages', images);
   },
+  async fetchProductStockDetails({ commit }, { shop, slug, country, stockCountry, currency }) {
+    const params = { country, currency, stockCountry };
+    commit('setLoadingProductDetails', true);
+    const response = await api.fetchProductDetails(shop, slug, params);
+    commit('setProductStockDetails', response);
+    commit('setLoadingProductDetails', false);
+  },
   async fetchPrintTypes({ commit }, { shop }) {
     const response = await api.fetchPrintTypes(shop);
     commit('setPrintTypes', response);
@@ -297,7 +307,7 @@ export const mutations = {
   setProductDetails(state, simpleProducts) {
     const { preSetPrints } = state;
     const [preSetPrint] = preSetPrints || [];
-    simpleProducts = simpleProducts.filter(sp => !preSetPrint || (preSetPrint.colors || []).includes(sp.color._id) )
+    simpleProducts = simpleProducts.filter(sp => !preSetPrint || (preSetPrint.colors || []).includes(sp.color._id) );
     state.productDetails = { simpleProducts };
     const availableSizes = [];
     const sizesPerColor = simpleProducts.reduce((map, { color, size }) => {
@@ -321,6 +331,17 @@ export const mutations = {
       }
     }
     state.availableColors = sortByName(availableColors);
+    state.productDetailsKey = Date.now();
+  },
+  setProductStockDetails(state, simpleProducts) {
+    state.productDetails?.simpleProducts?.forEach(sp => {
+      const sp2 = simpleProducts.find(simpleProduct => simpleProduct.SKU === sp.SKU);
+      Vue.set(sp, 'quantityStock', sp2?.quantityStock || 0);
+    });
+    state.template?.simpleProducts?.forEach(sp => {
+      const sp2 = simpleProducts.find(simpleProduct => simpleProduct.SKU === sp.SKU);
+      Vue.set(sp, 'quantityStock', sp2?.quantityStock || 0);
+    });
   },
   clearProduct(state) {
     state.product = null;