@lancom/shared 0.0.395 → 0.0.397

package/assets/js/utils/gtm.js

@@ -47,7 +47,7 @@ const gtm = {
       currency: currency?.isoCode || 'AUD',
       items: (products || []).map(product => {
         return {
-          id: product.SKU, 
+          id: product.SKU,
           item_name: product.name,
           google_business_vertical: 'retail',
           price: product.minPrice
@@ -111,10 +111,10 @@ const gtm = {
 
     const { shippingAddress } = order;
     if (shippingAddress) {
-      const { fullName, email, phone, city, state, postcode, country, addressLine1, addressLine2 } = shippingAddress;
+      const { fullName, email, phone, phoneE164, city, state, postcode, country, addressLine1, addressLine2 } = shippingAddress;
       const [first_name, last_name] = fullName.split(' ');
       event.email = email;
-      event.phone_number= phone;
+      event.phone_number = phoneE164 || phone;
       event.address = {
         first_name,
         last_name,

package/assets/js/utils/phone.js

@@ -0,0 +1,134 @@
+/**
+ * @typedef {Object} PhoneNumberValidationResult
+ * @property {string} e164Number
+ * @property {boolean} isValid
+ * @property {boolean} supportsSms
+ */
+
+/**
+ * Transforms a phone number to E.164 format if valid for the specified country.
+ * @param {string|null|undefined} originalInput
+ * @param {string} country
+ * @param {string} [postcode]
+ * @returns {PhoneNumberValidationResult}
+ */
+export function formatNumberToE164(originalInput, country) {
+  const defaultFailureResult = {
+    e164Number: '',
+    isValid: false,
+    supportsSms: false
+  };
+
+  if (originalInput === null || originalInput === undefined) {
+    return defaultFailureResult;
+  }
+
+  const countryCodeMap = {
+    AU: '+61',
+  };
+
+  const normalizedCountry = country.toUpperCase();
+  const dialingCode = countryCodeMap[normalizedCountry];
+
+  let cleanedInput = originalInput.trim().replace(/\s+/g, '').replace(/[-()]/g, '');
+
+  if (cleanedInput === '') {
+    return defaultFailureResult;
+  }
+
+  if (normalizedCountry !== 'AU' || !dialingCode) {
+    return defaultFailureResult;
+  }
+
+  if (
+    cleanedInput.startsWith('1300') ||
+    (cleanedInput.startsWith('13') && cleanedInput.length > 2 && cleanedInput.length <= 6) ||
+    cleanedInput.startsWith('1800') ||
+    (cleanedInput.startsWith('180') && cleanedInput.length > 3 && cleanedInput.length <= 7)
+  ) {
+    return defaultFailureResult;
+  }
+
+  if (
+    cleanedInput.startsWith(dialingCode.substring(1)) &&
+    cleanedInput.length === dialingCode.length - 1 + 9
+  ) {
+    const numPartAfterCountryCode = cleanedInput.substring(dialingCode.length - 1);
+    const firstDigitNumPart = numPartAfterCountryCode.charAt(0);
+    if (
+      /^\d+$/.test(numPartAfterCountryCode) &&
+      numPartAfterCountryCode.length === 9 &&
+      ['2', '3', '4', '7', '8'].includes(firstDigitNumPart)
+    ) {
+      return {
+        e164Number: dialingCode + numPartAfterCountryCode,
+        isValid: true,
+        supportsSms: firstDigitNumPart === '4',
+      };
+    }
+    return defaultFailureResult;
+  }
+
+  if (cleanedInput.startsWith(dialingCode)) {
+    let numPartAfterDialingCodeRaw = cleanedInput.substring(dialingCode.length);
+    if (numPartAfterDialingCodeRaw.startsWith('0')) {
+      numPartAfterDialingCodeRaw = numPartAfterDialingCodeRaw.substring(1);
+    }
+    const firstDigitNumPartFinal = numPartAfterDialingCodeRaw.charAt(0);
+    if (
+      /^\d+$/.test(numPartAfterDialingCodeRaw) &&
+      numPartAfterDialingCodeRaw.length === 9 &&
+      ['2', '3', '4', '7', '8'].includes(firstDigitNumPartFinal)
+    ) {
+      return {
+        e164Number: dialingCode + numPartAfterDialingCodeRaw,
+        isValid: true,
+        supportsSms: firstDigitNumPartFinal === '4',
+      };
+    }
+    return defaultFailureResult;
+  }
+
+  if (cleanedInput.startsWith('04')) {
+    const mobilePart = cleanedInput.substring(2);
+    if (/^\d+$/.test(mobilePart) && mobilePart.length === 8) {
+      return {
+        e164Number: dialingCode + '4' + mobilePart,
+        isValid: true,
+        supportsSms: true,
+      };
+    }
+    return defaultFailureResult;
+  }
+
+  if (cleanedInput.startsWith('0') && cleanedInput.length === 10) {
+    const areaCode = cleanedInput.charAt(1);
+    const numPart = cleanedInput.substring(2);
+    if (
+      ['2', '3', '7', '8'].includes(areaCode) &&
+      /^\d+$/.test(numPart) &&
+      numPart.length === 8
+    ) {
+      return {
+        e164Number: dialingCode + areaCode + numPart,
+        isValid: true,
+        supportsSms: false,
+      };
+    }
+    return defaultFailureResult;
+  }
+
+  if (cleanedInput.length === 9 && /^\d+$/.test(cleanedInput)) {
+    const firstDigit = cleanedInput.charAt(0);
+    if (['2', '3', '4', '7', '8'].includes(firstDigit)) {
+      return {
+        e164Number: dialingCode + cleanedInput,
+        isValid: true,
+        supportsSms: firstDigit === '4',
+      };
+    }
+    return defaultFailureResult;
+  }
+
+  return defaultFailureResult;
+}

package/assets/js/utils/product.js

@@ -187,7 +187,7 @@ export function generateProductLink(product, color, toEditor = false, size) {
     const categoryPath = generateCategoryPath(product.category);
     if (categoryPath) {
       const categoryBaseLink = `/c/${categoryPath}/${product.alias}/${product.SKU.toLowerCase()}`;
-      link = toEditor ? `${categoryBaseLink}.html` : `${categoryBaseLink}/info.html`;
+      link = toEditor ? `${categoryBaseLink}.html` : `${categoryBaseLink}.html`;
     }
   }
   const query = [];

package/components/asides/contact_us/contact-us.vue

@@ -69,7 +69,7 @@
       <phone-input
         :labelless="false"
         :required="requiredPhone"
-        v-model="form.phone" />
+        :item="form" />
       <validation-provider
         v-slot="{ errors }"
         tag="div"

package/components/asides/offer_screen_printing/offer-screen-printing.vue

@@ -68,7 +68,7 @@
       </validation-provider>
       <phone-input
         :labelless="false"
-        v-model="form.phone" />
+        :item="form" />
       <validation-provider
         v-slot="{ errors }"
         tag="div"

package/components/checkout/order/address-form/address-form.vue

@@ -93,7 +93,7 @@
             {{ errors[0] }}
           </span>
         </validation-provider>
-        <phone-input v-model="address.phone" class="form-col col-half" />
+        <phone-input :item="address" class="form-col col-half" />
       </div>
       <validation-provider
         v-slot="{ errors }"

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

@@ -42,6 +42,14 @@
               Apple Pay
             </span>
           </label>
+          <label
+            class="form-label OrderPaymentInformation__checkbox"
+            @click="updatePaymentType('paypal')">
+            <checked-icon :checked="paymentMethod === 'paypal'" />
+            <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
+              Paypal
+            </span>
+          </label>
         </div>
         <div
           v-if="paymentMethod === 'deposit'"
@@ -80,6 +88,7 @@
             :key="paymentMethod"
             :google="paymentMethod === 'google'"
             :apple="paymentMethod === 'apple'"
+            :paypal="paymentMethod === 'paypal'"
             :amount="cartPricing.totalPrice"
             :order="orderData"
             @inited="initedCard">

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

@@ -17,6 +17,7 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'PaymentCard',
   components: {
+    Paypal: () => import('./paypal/paypal'),
     Applepay: () => import('./applepay/applepay'),
     Googlepay: () => import('./googlepay/googlepay'),
     Pinpayment: () => import('./pinpayment/pinpayment'),
@@ -36,6 +37,9 @@ export default {
     },
     apple: {
       type: Boolean
+    },
+    paypal: {
+      type: Boolean
     }
   },
   computed: {
@@ -47,6 +51,9 @@ export default {
       if (this.apple) {
         return 'applepay';
       }
+      if (this.paypal) {
+        return 'paypal';
+      }
       return this.payment?.type || 'stripe-payment';
     }
   },

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

@@ -0,0 +1,8 @@
+@import "@/assets/scss/ui_kit";
+@import "@/assets/scss/variables";
+
+.Payment {
+  &__wrapper {
+    font-weight: bold;
+  }
+}

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

@@ -0,0 +1,16 @@
+<template>
+  <div class="Payment__wrapper">
+    Temporarily Not Available
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Paypal'
+};
+</script>
+
+
+<style lang="scss" scoped>
+@import 'paypal.scss';
+</style>

package/components/common/phone_input/phone-input.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <div>{{ item }}</div>
     <div class="form-row">
       <label
         v-if="labelless"
@@ -63,6 +64,7 @@
 
 <script>
 import Multiselect from 'vue-multiselect';
+import { formatNumberToE164 } from '@lancom/shared/assets/js/utils/phone';
 
 export default {
   name: 'PhoneInput',
@@ -73,8 +75,9 @@ export default {
     codeCountry: {
       type: Object
     },
-    value: {
-      type: String
+    item: {
+      type: Object,
+      required: true
     },
     labelText: {
       type: String
@@ -86,6 +89,14 @@ export default {
       type: String,
       default: 'Phone'
     },
+    phoneProperty: {
+      type: String,
+      default: 'phone'
+    },
+    phoneE164Property: {
+      type: String,
+      default: 'phoneE164'
+    },
     copyFrom: {
       type: Boolean,
       default: false
@@ -120,16 +131,26 @@ export default {
     },
     model: {
       get() {
-        return this.value; // (this.value || '').replace(/^\+[0-9]{2}/, '');
+        return this.item[this.phoneProperty];
       },
       set(phone) {
-        // if (this.code === '+61' && phone?.length === 10 && phone[0] === '0') {
-        //   phone = phone.slice(1);
-        // }
-        // this.$emit('input', `${this.code}${phone}`);
+        this.$set(this.item, this.phoneProperty, phone);
+        this.updatePhoneE164();
+
         this.$emit('input', phone);
       }
     }
+  },
+  mounted() {
+    this.updatePhoneE164();
+  },
+  methods: {
+    updatePhoneE164() {
+      const code = this.codeCountry?.isoCode || this.codeCountry || 'AU';
+      const result = formatNumberToE164(this.model, code);
+      const e164Number = result?.isValid ? result.e164Number : null;
+      this.$set(this.item, this.phoneE164Property, e164Number);
+    }
   }
 };
 </script>

package/components/customer/customer_form/customer-form.vue

@@ -133,7 +133,7 @@
         <div class="row">
           <div class="col-6">
             <phone-input
-              v-model="customer.phone"
+              :item="customer"
               label-text="Phone (optional)" />
           </div>
           <div class="col-6">

package/components/modals/failed_conversion_modal/failed-conversion-modal.vue

@@ -52,7 +52,7 @@
             </span>
           </validation-provider>
           <phone-input
-            v-model="form.phone"
+            :item="form"
             class="form-col col-half" />
         </div>
         <validation-provider

package/components/modals/order_modal/order-modal.vue

@@ -41,7 +41,7 @@
             </span>
           </validation-provider>
           <phone-input
-            v-model="form.phone"
+            :item="form"
             class="form-col col-half" />
         </div>
         <validation-provider

package/components/products_kit/products_kit/products_kit_cart/products-kit-cart.scss

@@ -17,10 +17,10 @@
     margin: 0 20px;
   }
   &__qty {
-    margin-left: 10px;
+    margin-right: 10px;
     ::v-deep {
       input {
-        padding: 14px;
+        padding: 11px;
         font-size: 20px;
         width: 110px;
       }

package/components/products_kit/products_kit/products_kit_cart/products-kit-cart.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="ProductsKitCart__wrapper">
     <div class="ProductsKitCart__products">
-      <products-kit-cart-options :productsKit="productsKit" />
-      <div class="ProductsKitCart__qty">
-        <number-input
-          v-model="kitQty"
-          :disabled="addingToCart || !isAllOptionsSelected" />
-      </div>
-    </div>
-    <div class="ProductsKitCart__info">
+      <products-kit-cart-options :products-kit="productsKit" />
       <div
         v-if="isAllOptionsSelected"
         class="ProductsKitCart__price">
         {{ totalPrice | price }}
       </div>
+    </div>
+    <div class="ProductsKitCart__info">
+      <div class="ProductsKitCart__qty">
+        <number-input
+          v-model="kitQty"
+          :disabled="addingToCart || !isAllOptionsSelected" />
+      </div>
       <div>
         <btn
-          :btn-disabled="addingToCart || !isAllOptionsSelected"
+          :btn-disabled="addingToCart || !isAllOptionsSelected || !kitQty"
           btn-class="green"
-          btn-label="ADD TO CART" 
-          @onclick="proceedToCard()"/>
+          btn-label="ADD TO CART"
+          @onclick="proceedToCard()" />
       </div>
     </div>
   </div>
@@ -109,10 +109,10 @@ export default {
         };
         await this.addToCart(data);
         this.$toastr.s('Products Kit successfully added to cart');
-        this.kitQty = 1;
+        this.kitQty = 0;
         this.clearOptions();
         this.clearProductsKitPricing();
-      } catch (e) { 
+      } catch (e) {
         console.log(e);
       } finally {
         this.addingToCart = false;

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_color/products-kit-option-color.scss

@@ -1 +1,16 @@
 @import "@/assets/scss/variables";
+
+::v-deep {
+  .multiselect {
+    min-height: 20px;
+    &__tags {
+      padding: 5px;
+      min-height: 20px;
+    }
+    &__single {
+      font-size: 14px;
+      line-height: 20px;
+      margin: 3px 0 0 4px;
+    }
+  }
+}

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_products/products-kit-option-products.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script>
+import { mapGetters, mapActions } from 'vuex';
 import ProductsKitOptionProduct from './products_kit_option_product/products-kit-option-product';
 
 export default {
@@ -27,6 +28,31 @@ export default {
       type: Object,
       required: true
     }
+  },
+  computed: {
+    ...mapGetters([
+      'country',
+      'currency',
+      'stockCountry'
+    ])
+  },
+  mounted() {
+    if (this.option.required && this.option.products?.length === 1) {
+      this.selectProduct(this.option.products[0]);
+    }
+  },
+  methods: {
+    ...mapActions('productsKit', ['selectOptionProduct']),
+    selectProduct(product) {
+      const params = {
+        country: this.country?._id,
+        currency: this.currency?._id,
+        stockCountry: this.stockCountry?._id,
+        option: this.option,
+        product
+      };
+      this.selectOptionProduct(params);
+    }
   }
 };
 </script>

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_products/products_kit_option_product/products-kit-option-product.scss

@@ -8,13 +8,13 @@
     }
   }
   &__preview {
-    width: 250px;
-    height: 490px;
-    margin: 0 0 15px 15px;
+    width: 175px;
+    height: 290px;
+    margin: 7px;
     position: relative;
     z-index: 1;
     &--without-price {
-      height: 440px;
+      height: 340px;
     }
   }
   &__select {
@@ -38,4 +38,38 @@
     font-weight: bold;
     z-index: 2;
   }
+}
+::v-deep {
+  .ProductPreview {
+    &__link {
+      height: 175px;
+      &-cover,
+      &-cover-hover {
+        height: 175px;
+        top: 10px;
+      }
+    }
+    &__sku {
+      font-size: 13px;
+    }
+    &__name {
+      font-size: 15px;
+      line-height: 20px;
+      margin-top: 1px;
+      min-height: 35px;
+    }
+    &__prices-printed-price {
+      font-size: 16px;
+      line-height: 20px;
+    }
+    &__slogan-item {
+      span {
+        padding: 2px 3px;
+        font-size: 8px;
+      }
+    }
+    &__content {
+      padding: 10px 10px 0px 10px;
+    }
+  }
 }

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_products/products_kit_option_product/products-kit-option-product.vue

@@ -13,6 +13,7 @@
         ref="preview"
         :product="product"
         :to-editor="false"
+        :visible-color-thumbs="false"
         :visible-prices="!option.required"
         @preview="onPreviewProduct($event)"
         @color="onProductSelectColor($event)" />
@@ -22,7 +23,7 @@
         :btn-block="true"
         @onclick="selectProduct"
         :btn-class="isSelectedProduct ? 'green' : 'gray'"
-        btn-label="SELECT" />
+        :btn-label="isSelectedProduct ? 'DESELECT' : 'SELECT'" />
       <div
         v-if="isSelectedProduct"
         class="ProductsKitOptionProduct__config mt-5">
@@ -129,7 +130,7 @@ export default {
         currency: this.currency?._id,
         stockCountry: this.stockCountry?._id,
         option: this.option,
-        product: this.product
+        product: this.isSelectedProduct ? null : this.product
       };
       this.selectOptionProduct(params);
     },

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_size/products-kit-option-size.scss

@@ -1 +1,15 @@
 @import "@/assets/scss/variables";
+
+::v-deep {
+  .multiselect {
+    min-height: 20px;
+    &__tags {
+      padding: 8px 5px 5px 9px;
+      min-height: 20px;
+    }
+    &__single {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}

package/components/quotes/quote_request/quote-request.vue

@@ -37,7 +37,7 @@
             </validation-provider>
             <phone-input
               class="form-row"
-              v-model="quote.address.phone" />
+              :item="quote.address" />
             <validation-provider
               v-slot="{ errors }"
               tag="div"
@@ -427,7 +427,7 @@ export default {
                     }))
                 };
               })
-          } 
+          }
         };
         const body = {
           recaptchaToken,

package/components/quotes/quote_view/quote_product_color_simple_products/quote_product_color_simple_product/quote-product-color-simple-product.vue

@@ -15,7 +15,7 @@
         class="form-field centered QuoteProductColorSimpleProduct__field"
         :class="{
           empty: !model,
-          error: model > simpleProduct.quantityStock
+          error: model > simpleProduct.quantityStock && !quote.ignoreStockAvailability
         }"
         @wheel="onWheel"
         @change="onChange()" />
@@ -36,6 +36,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import confirm from '@lancom/shared/mixins/confirm';
 import { inRange, price } from '@lancom/shared/assets/js/utils/filters';
 
@@ -52,6 +53,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters('quote', ['quote']),
     model: {
       get() {
         return this.simpleProduct.amount;

package/feeds/google-shopping.js

@@ -1,6 +1,6 @@
 async function googleLocalShoppingFeed(axios, config, availableStores, country) {
   const result = await googleShoppingFeed(axios, config, availableStores, country, false, { allowSameDayDelivery: true });
-  
+
   const fields = [
     'g:availability',
     'g:id',
@@ -59,7 +59,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
               const description = `${product.description || product.fabricInfoShort || product.name || ''}`
                 .replace(/ /g, ' ')
                 .replace(/·/, '·');
-                
+
               let link = `https://${config.HOST_NAME}${generateProductLink(product, sp.color, isEditor)}`;
               link = link.includes('?') ? `${link}&size=${sp.size?.shortName}` : `${link}?size=${sp.size?.shortName}`
               link = link.includes('?') ? `${link}&price=IT` : `${link}?price=IT`
@@ -186,7 +186,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
         ];
       }, [])
   };
-  
+
   return {
     _declaration: { _attributes: { version: "1.0", encoding: "utf-8" } },
     rss: {
@@ -221,7 +221,7 @@ function generateProductLink(product, color, toEditor) {
     const categoryPath = generateCategoryPath(product.category);
     if (categoryPath) {
       const categoryBaseLink = `/c/${categoryPath}/${product.alias}/${product.SKU.toLowerCase()}`;
-      link = toEditor ? `${categoryBaseLink}.html` : `${categoryBaseLink}/info.html`;
+      link = toEditor ? `${categoryBaseLink}.html` : `${categoryBaseLink}.html`;
     }
   }
   return `${link}${color ? `?color=${color.alias || color}` : ''}`;

package/mixins/product-preview.js

@@ -29,6 +29,10 @@ const productPreview = {
     visiblePrices: {
       type: Boolean,
       default: true
+    },
+    visibleColorThumbs: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

package/nuxt.config.js

@@ -138,7 +138,7 @@ module.exports = (config, axios, { raygunClient, publicPath, productUrlToEditor
   router: {
     extendRoutes(routes, resolve) {
       return [
-        ...sharedRoutes(routes, resolve),
+        ...sharedRoutes(routes, resolve, process.env),
         ...routes,
       ];
     }

package/package.json

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

package/routes/index.js

@@ -1,52 +1,55 @@
-module.exports = function(routes, resolve) {
+module.exports = function(routes, resolve, config) {
+  const PRODUCT_LINK_EXTENSION = config?.PRODUCT_LINK_EXTENSION || '/info.html';
+  const PRODUCT_EDITOR_LINK_EXTENSION = config?.PRODUCT_EDITOR_LINK_EXTENSION || '.html';
+
   return [{
     name: 'product-taxonomy-view-level1',
-    path: '/c/:category/:slug/:sku/info.html',
+    path: `/c/:category/:slug/:sku${PRODUCT_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/index.vue'),
     chunkName: 'pages/product/view/level1'
   }, {
     name: 'product-taxonomy-view-level2',
-    path: '/c/:category1/:category/:slug/:sku/info.html',
+    path: `/c/:category1/:category/:slug/:sku${PRODUCT_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/index.vue'),
     chunkName: 'pages/product/view/level2'
   }, {
     name: 'product-taxonomy-view-level3',
-    path: '/c/:category2/:category1/:category/:slug/:sku/info.html',
+    path: `/c/:category2/:category1/:category/:slug/:sku${PRODUCT_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/index.vue'),
     chunkName: 'pages/product/view/level3'
   }, {
     name: 'product-taxonomy-view-level4',
-    path: '/c/:category3/:category2/:category1/:category/:slug/:sku/info.html',
+    path: `/c/:category3/:category2/:category1/:category/:slug/:sku${PRODUCT_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/index.vue'),
     chunkName: 'pages/product/view/level4'
   }, {
     name: 'product-taxonomy-view-level5',
-    path: '/c/:category4/:category3/:category2/:category1/:category/:slug/:sku/info.html',
+    path: `/c/:category4/:category3/:category2/:category1/:category/:slug/:sku${PRODUCT_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/index.vue'),
     chunkName: 'pages/product/view/level5'
   }, {
     name: 'product-taxonomy-editor-level1',
-    path: '/c/:category/:slug/:sku.html',
+    path: `/c/:category/:slug/:sku${PRODUCT_EDITOR_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
     chunkName: 'pages/product/editor/level1'
   }, {
     name: 'product-taxonomy-editor-level2',
-    path: '/c/:category1/:category/:slug/:sku.html',
+    path: `/c/:category1/:category/:slug/:sku${PRODUCT_EDITOR_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
     chunkName: 'pages/product/editor/level2'
   }, {
     name: 'product-taxonomy-editor-level3',
-    path: '/c/:category2/:category1/:category/:slug/:sku.html',
+    path: `/c/:category2/:category1/:category/:slug/:sku${PRODUCT_EDITOR_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
     chunkName: 'pages/product/editor/level3'
   }, {
     name: 'product-taxonomy-editor-level4',
-    path: '/c/:category3/:category2/:category1/:category/:slug/:sku.html',
+    path: `/c/:category3/:category2/:category1/:category/:slug/:sku${PRODUCT_EDITOR_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
     chunkName: 'pages/product/editor/level4'
   }, {
     name: 'product-taxonomy-editor-level5',
-    path: '/c/:category4/:category3/:category2/:category1/:category/:slug/:sku.html',
+    path: `/c/:category4/:category3/:category2/:category1/:category/:slug/:sku${PRODUCT_EDITOR_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
     chunkName: 'pages/product/editor/level5'
   }, {

package/store/productsKit.js

@@ -5,7 +5,7 @@ import { generateGUID } from '@lancom/shared/assets/js/utils/guid';
 import Vue from 'vue';
 
 export const state = () => ({
-  amount: 1,
+  amount: 0,
   productsKit: null,
   loadError: null,
   selectedOptionsProducts: {},
@@ -39,10 +39,14 @@ export const getters = {
   selectedOptionsSimpleProducts: ({ selectedOptionsSimpleProducts }) => selectedOptionsSimpleProducts,
   selectedOptionsColors: ({ selectedOptionsColors }) => selectedOptionsColors,
   selectedOptionsSizes: ({ selectedOptionsSizes }) => selectedOptionsSizes,
-  isAllOptionsSelected: ({ productsKit, selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
-    const selectedSimpleProducts = getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes);
+  isAllOptionsSelected: ({ productsKit, selectedOptionsColors, selectedOptionsSizes, selectedOptionsProducts }) => {
     const requiredOptions = productsKit.productsKitOptions?.filter(pk => pk.required) || [];
-    return requiredOptions?.length <= selectedSimpleProducts?.length;
+    const isAllRequieredSelected = requiredOptions.every(o => !!selectedOptionsProducts[o._id] && !!selectedOptionsColors[o._id] && !!selectedOptionsSizes[o._id]);
+
+    const selectedNotRequiredOptions = productsKit.productsKitOptions?.filter(pk => !pk.required && selectedOptionsProducts[pk._id]) || [];
+    const isAllNotRequieredSelected = selectedNotRequiredOptions.every(o => !!selectedOptionsColors[o._id] && !!selectedOptionsSizes[o._id]);
+
+    return isAllRequieredSelected && isAllNotRequieredSelected;
   },
   selectedSimpleProducts: ({ selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes),
   maxOrderQty: ({ selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
@@ -93,7 +97,7 @@ export const actions = {
   },
   async selectOptionProduct({ commit }, { option, product, country, currency, stockCountry }) {
     const params = { country, currency, stockCountry };
-    const simpleProducts = await api.fetchProductDetails(null, product.alias, params);
+    const simpleProducts = product ? (await api.fetchProductDetails(null, product.alias, params)) : [];
 
     commit('setSelectedOptionProduct', { option, product });
     commit('setSelectedOptionSimpleProducts', { option, simpleProducts });
@@ -137,7 +141,7 @@ export const actions = {
     commit('setCalculatingPrice', false);
   },
   updateAmount({ getters, commit }, amount) {
-    const value = Math.min(getters.maxOrderQty, Math.max(amount, 1));
+    const value = Math.min(getters.maxOrderQty, Math.max(amount, 0));
     commit('setAmount', value);
   }
 };