@lancom/shared 0.0.386 → 0.0.388

package/assets/scss/variables/_theme.scss

@@ -21,6 +21,7 @@ $medium_gray: #B0B0BA !default;
 $light_gray: #F9F9FC;
 $link: #5D89A9;
 $error: #E44868;
+$warning: #e48e48;
 $secondary_900: #20303C;
 $secondary_800: #324B5D;
 $secondary_700: #3D5D74;

package/components/checkout/cart/cart.mixin.js

@@ -35,7 +35,7 @@ export default {
       return this.isNotValidProductsQuantity || this.isNotValidStockQuantity || this.isNotValidPrintsQuantity || this.isNotValidPrintsBigSizeQuantity;
     },
     isNotValidShipping() {
-      return (this.needToPickup && this.notValidProductsPickup.length > 0) || !this.suburb; 
+      return this.needToPickup ? (this.notValidProductsPickup.length > 0 && !this.suburb) : !this.suburb; 
     },
     isNotValidProductsQuantity() {
       return this.notValidProductsQuantities.length > 0;
@@ -63,11 +63,11 @@ export default {
   },
   methods: {
     ...mapMutations('cart', [
-      'setNeedToPickup',
-      'setSuburb',
       'setCoupon'
     ]),
     ...mapActions('cart', [
+      'setSuburb',
+      'setNeedToPickup',
       'removeSimpleProductsFromCart',
       'calculateCartPrice'
     ]),

package/components/checkout/cart/cart_entity/cart-entity.mixin.js

@@ -25,6 +25,14 @@ export default {
     productLink() {
       return generateProductLink(this.product, null, !!this.SETTINGS.CART_PRODUCT_LINK_TO_EDITOR);
     },
+    suppliersWithRates() {
+      return this.cartPricing?.shipping?.suppliersWithRates || [];
+    },
+    fulfillment() {
+      const supplierWithRates = this.suppliersWithRates.find(s => s?.brands?.some(b => b?._id === this.product?.brand?._id));
+      const selectedRate = supplierWithRates?.rates?.find(r => r.selected);
+      return selectedRate?.name;
+    },
     sumPrints() {
       return (this.entity.prints || []).length;
     },

package/components/checkout/cart/cart_entity/cart-entity.vue

@@ -40,6 +40,16 @@
             {{ product.brand.name }}
           </div>
         </div>
+        <div
+          v-if="fulfillment"
+          class="CartEntity__feature">
+          <div class="lc_title-small">
+            Fulfillment:
+          </div>
+          <div class="lc_body-small">
+            {{ fulfillment }}
+          </div>
+        </div>
       </div>
       <div>
         <cart-entity-color-simple-products

package/components/checkout/cart/cart_products_kit_entity/cart-products-kit-entity.vue

@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 import CartEntity from './../cart_entity/cart-entity';
 
 export default {
@@ -42,8 +44,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['SETTINGS']),
     productsKitLink() {
-      return `/products-kit/${this.productsKitEntity.productsKit.alias}`;
+      return generateProductLink(this.productsKitEntity.productsKit, null, !!this.SETTINGS.CART_PRODUCT_LINK_TO_EDITOR);
     }
   },
   methods: {

package/components/checkout/cart/cart_shipping/cart-shipping.scss

@@ -40,4 +40,9 @@
     font-size: 13px;
     line-height: 17px;
   }
+  &__pickup-warnings {
+    color: $warning;
+    font-size: 13px;
+    line-height: 17px;
+  }
 }

package/components/checkout/cart/cart_shipping/cart-shipping.vue

@@ -2,7 +2,7 @@
   <div
     class="CartShipping__wrapper"
     :class="{
-      'CartShipping__wrapper--warning': (needToPickup && hasNotValidProductsPickup) || !suburb
+      'CartShipping__wrapper--warning': needToPickup ? hasNotValidProductsPickup : !suburb
     }">
     <div class="lc_h4 lc_uppercase lc_black CartShipping__header">
       Order Shipping
@@ -18,6 +18,7 @@
         @select="$emit('suburb', $event)" />
       <div class="mt-10 mb-10">
         <checkbox
+          :disabled="!isAvailableForPickupSomeProducts"
           v-model="wantsToPickup"
           :dark="true"
           @change="calculatePrice()">
@@ -26,15 +27,20 @@
           </div>
         </checkbox>
       </div>
+      <div
+        v-if="!isAvailableForPickupSomeProducts"
+        class="CartShipping__pickup-warnings">
+        Pickup only available for "Code Red" brand
+      </div>
       <div
         v-if="visiblePickupError && hasNotValidProductsPickup"
         class="CartShipping__pickup-errors">
-        <div>Not all items in cart are available for pickup. Some items are available for delivery only</div>
+        <div>Not all items in cart are available for pickup. Some items are available for delivery only:</div>
         <ul>
           <li
-            v-for="product in notValidProductsPickup"
+            v-for="product in notValidProductsPickupBySKU"
             :key="product._id">
-            <b>{{ product.name }}. {{ product.size ? product.size.shortName : '' }}</b> order quantity: {{ product.amount }}. Available {{ product.warehouseQuantityStock }}
+            <b>{{ product.name }}({{ product.productSKU }})</b>
           </li>
         </ul>
       </div>
@@ -47,7 +53,7 @@ import { mapGetters, createNamespacedHelpers } from 'vuex';
 import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
 import { price } from '@lancom/shared/assets/js/utils/filters';
 
-const { mapActions, mapMutations } = createNamespacedHelpers('cart');
+const { mapActions } = createNamespacedHelpers('cart');
 
 export default {
   name: 'LancomCartShipping',
@@ -70,6 +76,7 @@ export default {
   computed: {
     ...mapGetters(['shop', 'SETTINGS', 'MESSAGES', 'country', 'currency', 'contacts']),
     ...mapGetters('cart', [
+      'entities',
       'suburb',
       'notValidProductsPickup',
       'needToPickup',
@@ -87,7 +94,7 @@ export default {
       return this.onlyPostcode ? 'Postcode' : (this.MESSAGES.CART_POSTCODE || 'Postcode');
     },
     hasNotValidProductsPickup() {
-      return this.notValidProductsPickup.length > 0;
+      return this.notValidProductsPickup.length > 0 && !this.suburb;
     },
     wantsToPickup: {
       get() {
@@ -95,6 +102,7 @@ export default {
       },
       set(needToPickup) {
         if (needToPickup && this.hasNotValidProductsPickup) {
+          this.setNeedToPickup(needToPickup);
           this.visiblePickupError = true;
         } else {
           // if (needToPickup) {
@@ -104,21 +112,48 @@ export default {
           this.visiblePickupError = false;
         }
       }
+    },
+    notValidProductsPickupBySKU() {
+      return groupProductsBySKU(this.notValidProductsPickup, 'productSKU');
+    },
+    isAvailableForPickupSomeProducts() {
+      const products = this.entities.map(({ product }) => product);
+      const grouped = groupProductsBySKU(products);
+      return this.notValidProductsPickupBySKU.length === 0 || this.notValidProductsPickupBySKU.length !== grouped?.length;
+    }
+  },
+  mounted() {
+    if (!this.isAvailableForPickupSomeProducts) {
+      this.wantsToPickup = false;
+    }
+    if (this.wantsToPickup && this.hasNotValidProductsPickup) {
+      this.visiblePickupError = true;
     }
   },
   methods: {
-    ...mapMutations([
+    ...mapActions([
       'setSuburb',
+      'calculateCartPrice',
       'setNeedToPickup'
     ]),
-    ...mapActions([
-      'calculateCartPrice'
-    ]),
     async calculatePrice() {
       await this.calculateCartPrice({ shop: this.shop, country: this.country, currency: this.currency });
     }
   }
 };
+
+function groupProductsBySKU(products, skuProp = 'SKU') {
+  const grouped = products.reduce((acc, product) => {
+    const existingProduct = acc.find(p => p[skuProp] === product[skuProp]);
+    if (existingProduct) {
+      existingProduct.amount += product.amount;
+    } else {
+      acc.push({ ...product });
+    }
+    return acc;
+  }, []);
+  return grouped;
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -218,7 +218,7 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations, mapActions } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
 import PhoneInput from '@lancom/shared/components/common/phone_input/phone-input';
 
@@ -283,10 +283,8 @@ export default {
     validateAddress() {
       // this.$refs.addressProvider.validate();
     },
-    ...mapMutations('cart', [
-      'setSuburb'
-    ]),
     ...mapActions('cart', [
+      'setSuburb',
       'calculateCartPrice'
     ]),
     setAddressSuburb(suburb) {

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

@@ -28,7 +28,7 @@
             <h5 class="lc_h3 lc_uppercase lc_bold mt-10 mb-15">Billing Address</h5>
             <address-form
               :address="order.billingAddress"
-              :copy-from="order.shippingAddress"
+              :copy-from="needToPickupWithoutErrors ? null : order.shippingAddress"
               name-prefix="Delivery "
               :without-additional-info="true" />
           </div>

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

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex';
+import { mapActions } from 'vuex';
 import AddressForm from '@/components/checkout/order/address-form/address-form';
 import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
 
@@ -35,7 +35,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('cart', [
+    ...mapActions('cart', [
       'setSuburb'
     ]),
     copyFromBillingAddress() {

package/components/common/checkbox.vue

@@ -108,7 +108,7 @@ html[dir=rtl] {
       margin: 2px 0;
       &--disabled {
         pointer-events: none;
-        opacity: .7;
+        opacity: .4;
       }
     }
 

package/components/common/postcode_select/postcode-select.vue

@@ -173,11 +173,11 @@ export default {
       }
     }
   },
-  mounted() {
+  async mounted() {
     if (this.suburb) {
       const option = this.createOptionFromSuburb(this.suburb);
       this.selected = option;
-      this.options = [option];
+      await this.handleSearch(this.selected.value.trim())
     }
   },
   methods: {

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

@@ -241,7 +241,7 @@
 </template>
 
 <script>
-import { mapGetters, mapActions, mapMutations } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
 import PhoneInput from '@lancom/shared/components/common/phone_input/phone-input';
 import ProductTotalPricing from '@lancom/shared/components/common/products_total_pricing/products-total-pricing';
@@ -298,11 +298,9 @@ export default {
     ...mapActions('order', [
       'createOrder'
     ]),
-    ...mapMutations('cart', [
-      'setSuburb'
-    ]),
     ...mapActions('cart', [
-      'calculateCartPrice'
+      'calculateCartPrice',
+      'setSuburb'
     ]),
     setAddressSuburb(suburb) {
       this.$set(this.form, 'suburb', suburb);

package/components/product/product_price_range/product-price-range.vue

@@ -2,12 +2,12 @@
   <div
     class="ProductPriceRange__wrapper">
     <div
-      v-if="product[minPriceAttr] === product[maxPriceAttr]"
+      v-if="product[minPriceAttr] === product[maxPriceAttr] || !product[maxPriceAttr]"
       class="ProductPriceRange__price lc_h4">
       <div
         v-if="withGst"
         class="lc_h4">
-        {{ product[minPriceAttr] | tax(gstTax) | price(currency) }}
+        {{ prePriceText }} {{ product[minPriceAttr] | tax(gstTax) | price(currency) }}
         <span
           v-if="visiblePriceInfo"
           class="lc_regular11 lc_bold">inc. {{ taxName }}</span>

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

@@ -51,4 +51,9 @@
     background-color: $gray;
     padding: 15px;
   }
+  &__message {
+    color: $error;
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
 }

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

@@ -1,29 +1,23 @@
 <template>
   <div>
-    <article class="ProductsKit__wrapper">
-      <div class="ProductsKit__header-info post-full-content">
-        <div class="post-content">
-          <h1 class="lc_h1">
-            {{ productsKit.name }}
-          </h1>
-        </div>
-      </div>
-      <div class="ProductsKit__post post-full-content">
-        <div
-          class="lc_regular14"
-          v-html="productsKit.description"></div>
-      </div>
-    </article>
     <products-kit-options
+      v-if="productsKit[optionsAttr]"
       class="ProductsKit__options"
-      :products-kit="productsKit" />
-    <products-kit-cart
-      class="ProductsKit__cart"
-      :products-kit="productsKit" />
+      :products-kit="productsKit"
+      :options-attr="optionsAttr" />
+    <div class="ProductsKit__cart">
+      <div
+        v-if="!isAllOptionsSelected"
+        class="ProductsKit__message">
+        Please choose one product of each required option
+      </div>
+      <products-kit-cart :products-kit="productsKit" />
+    </div>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import ProductsKitOptions from './products_kit_options/products-kit-options';
 import ProductsKitCart from './products_kit_cart/products-kit-cart';
 
@@ -37,7 +31,14 @@ export default {
     productsKit: {
       type: Object,
       required: true
+    },
+    optionsAttr: {
+      type: String,
+      default: 'productsKitOptions'
     }
+  },
+  computed: {
+    ...mapGetters('productsKit', ['isAllOptionsSelected'])
   }
 };
 </script>

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

@@ -22,7 +22,7 @@
       input {
         padding: 14px;
         font-size: 20px;
-        width: 150px;
+        width: 110px;
       }
       .NumberInput__side-control {
         width: 30px !important;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="ProductsKitCartOptions__wrapper">
     <products-kit-cart-option
-      v-for="option in productsKit.options"
+      v-for="option in productsKit.productsKitOptions"
       :key="option._id"
       :products-kit="productsKit"
       :option="option"

package/components/products_kit/products_kit/products_kit_cart/products_kit_cart_options/products_kit_cart_option/products-kit-cart-option.scss

@@ -37,5 +37,11 @@
       font-weight: bold;
       color: grey;
     }
+    &--alert {
+      background-color: rgb(255, 201, 201);
+      span {
+        color: rgb(137, 38, 38);
+      }
+    }
   }
 }

package/components/products_kit/products_kit/products_kit_cart/products_kit_cart_options/products_kit_cart_option/products-kit-cart-option.vue

@@ -14,8 +14,15 @@
     <div
       v-else
       class="ProductsKitCartOption__placeholder"
+      :class="{
+        'ProductsKitCartOption__placeholder--alert': option.required
+      }"
       @click="scrollToOption()">
-      <span>+</span>
+      <i
+        v-if="option.required"
+        class="icon-attention-circled"
+        v-tooltip="'Please choose product'"></i>
+      <span v-else>+</span>
     </div>
   </div>
 </template>

package/components/products_kit/products_kit/products_kit_options/products-kit-options.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ProductsKitOptions__wrapper">
     <products-kit-option
-      v-for="option in productsKit.options"
+      v-for="option in productsKit[optionsAttr]"
       :key="option._id"
       :products-kit="productsKit"
       :option="option"
@@ -22,6 +22,10 @@ export default {
     productsKit: {
       type: Object,
       required: true
+    },
+    optionsAttr: {
+      type: String,
+      default: 'productsKitOptions'
     }
   }
 };

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

@@ -79,6 +79,11 @@ export default {
   },
   methods: {
     ...mapActions('productsKit', ['selectOptionColor'])
+  },
+  mounted() {
+    if (!this.selectedColor && this.availableColors.length === 1) {
+      this.selectedColor = this.availableColors[0];
+    }
   }
 };
 </script>

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

@@ -76,6 +76,13 @@ export default {
       return Array.from(uniqueSizesMap.values());
     }
   },
+  watch: {
+    selectedColor() {
+      if (!this.selectedSize && this.availableSizes.length === 1) {
+        this.selectedSize = this.availableSizes[0];
+      }
+    }
+  },
   methods: {
     ...mapActions('productsKit', ['selectOptionSize'])
   }

package/mixins/product-view.js

@@ -36,6 +36,8 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
 
       const product = store.getters['product/product'];
 
+      await store.dispatch('productsKit/setProductsKit', product);
+
       if ((product.useTaxonomyUrl && !params.sku) || (!product.useTaxonomyUrl && params.sku)) {
         const redirectUrl = generateProductLink(product, data.defaultColor, isEditor);
         return redirect(301, redirectUrl);
@@ -91,6 +93,9 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
   computed: {
     ...mapGetters(['shop', 'gstTax', 'country', 'stockCountry', 'currency']),
     ...mapGetters('product', ['product', 'simpleProducts', 'productDetails', 'editableColor', 'images', 'preSetPrints', 'editorSize', 'printsPrice']),
+    hasProductsKitOptions() {
+      return this.product.productsKitOptions?.length > 0;
+    },
     stockCountryId() {
       return this.stockCountry?._id || null;
     },

package/package.json

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

package/pages/checkout/order.vue

@@ -9,7 +9,11 @@
             btn-class="black"
             btn-label="EDIT CART"
             :btn-block="true"
-            to="/checkout/cart" />
+            to="/checkout/cart">
+            <template #icon-before>
+              <i class="icon-edit"></i>
+            </template>
+          </btn>
           <cart-price-info
             class="mt-10"
             :disabled-rates="true"

package/routes/index.js

@@ -169,16 +169,6 @@ module.exports = function(routes, resolve) {
     path: '/news/tag/:tag',
     component: resolve('@lancom/shared/pages/news/tag/_tag.vue'),
     chunkName: 'pages/news/tag'
-  }, {
-    name: 'products-kits',
-    path: '/products-kits',
-    component: resolve('@lancom/shared/pages/products-kit/index.vue'),
-    chunkName: 'pages/products-kits'
-  }, {
-    name: 'products-kit-view',
-    path: '/products-kit/:alias',
-    component: resolve('@lancom/shared/pages/products-kit/_alias.vue'),
-    chunkName: 'pages/products-kit/products-kit-view'
   }, {
     name: 'contact',
     path: '/contact',

package/store/cart.js

@@ -28,7 +28,7 @@ const getEntitiesQuantity = entities => {
 const getProductsQuantities = entities => {
   const grouped = groupBy(entities, e => e.product._id);
   const quantities = Object.keys(grouped).map(_id => {
-    const [{ prints, product: { name, minimumOrderQuantity, minimumPrintOrderQuantity } }] = grouped[_id];
+    const [{ prints, product: { name, minimumOrderQuantity, minimumPrintOrderQuantity, SKU } }] = grouped[_id];
     const minQty = (prints?.length > 0 ? minimumPrintOrderQuantity : minimumOrderQuantity) || minimumOrderQuantity;
     const simpleProducts = grouped[_id].reduce((simpleProducts, product) => {
       product.simpleProducts?.forEach(simpleProduct => {
@@ -43,7 +43,7 @@ const getProductsQuantities = entities => {
       });
       return simpleProducts;
     }, []);
-    return { _id, name, minimumOrderQuantity: minQty, quantity: getEntitiesQuantity(grouped[_id]), simpleProducts };
+    return { _id, name, SKU, minimumOrderQuantity: minQty, quantity: getEntitiesQuantity(grouped[_id]), simpleProducts };
   });
   return quantities;
 };
@@ -101,6 +101,7 @@ export const getters = {
           ...simpleProducts,
           ...product?.simpleProducts?.map(sp => ({
             name: product.name,
+            productSKU: product.SKU,
             ...sp
           }))
         ]
@@ -109,7 +110,6 @@ export const getters = {
     const notValid = simpleProducts.filter(sp => sp.warehouseQuantityStock < sp.amount)
 
     return notValid;
-    
   },
   notValidStockQuantities(state, { quantities }) {
     return (quantities?.stock || []).filter(({ maxQuantity, quantity }) => quantity > maxQuantity);
@@ -190,7 +190,7 @@ export const actions = {
     await api.saveCart(payload, shop._id);
     commit('setEntities', entities);
   },
-  async calculateCartPrice({ state: { suburb, entities, coupon, cartPricing }, getters: { needToPickupWithoutErrors }, commit }, { shop, country, currency }) {
+  async calculateCartPrice({ state: { suburb, entities, coupon, cartPricing }, getters: { needToPickup }, commit }, { shop, country, currency }) {
     let savedSuppliersWithRates = null;
     try {
       savedSuppliersWithRates = JSON.parse(localStorage.getItem(SUPPLIERS_WITH_RATES_KEY));
@@ -200,7 +200,7 @@ export const actions = {
     console.log('calculateCartPrice:payload: ', payload)
     try {
       commit('setCartPricingCalculating', true);
-      const response = await api.calculateProductPrice({ ...payload, needToPickup: needToPickupWithoutErrors }, shop._id);
+      const response = await api.calculateProductPrice({ ...payload, needToPickup }, shop._id);
       commit('setCartPricing', response);
       commit('setCartPricingError', null);
     } catch (e) {
@@ -226,6 +226,17 @@ export const actions = {
   clearCart({ commit }) {
     commit('clearCart');
   },
+  setNeedToPickup({ commit }, needToPickup) {
+    localStorage.removeItem(SUPPLIERS_WITH_RATES_KEY);
+    commit('setNeedToPickup', needToPickup);
+    commit('setCartPricing', null);
+  },
+  setSuburb({ commit }, suburb) {
+    localStorage.removeItem(SUPPLIERS_WITH_RATES_KEY);
+    commit('setSuburb', suburb);
+    commit('setCartPricing', null);
+    
+  },
   async selectRate({ state: { cartPricing, entities, suburb, coupon }, commit }, { supplier, rate, shop, country, currency }) {
     const suppliersWithRates = cartPricing.shipping.suppliersWithRates
       .map(supplierWithRates => ({

package/store/productsKit.js

@@ -41,7 +41,8 @@ export const getters = {
   selectedOptionsSizes: ({ selectedOptionsSizes }) => selectedOptionsSizes,
   isAllOptionsSelected: ({ productsKit, selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
     const selectedSimpleProducts = getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes);
-    return productsKit.options?.length === selectedSimpleProducts?.length;
+    const requiredOptions = productsKit.productsKitOptions?.filter(pk => pk.required) || [];
+    return requiredOptions?.length <= selectedSimpleProducts?.length;
   },
   selectedSimpleProducts: ({ selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes),
   maxOrderQty: ({ selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
@@ -53,7 +54,7 @@ export const getters = {
   },
   cartEntities: ({ amount, productsKit, selectedOptionsProducts, selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
     const productsKitGuid = generateGUID();
-    const entities = productsKit.options
+    const entities = productsKit.productsKitOptions
       .map(option => {
         const product = selectedOptionsProducts[option._id];
         if (product) {
@@ -87,6 +88,9 @@ export const actions = {
       });
     }
   },
+  setProductsKit({ commit }, productsKit) {
+    commit('setProductsKit', productsKit);
+  },
   async selectOptionProduct({ commit }, { option, product, country, currency, stockCountry }) {
     const params = { country, currency, stockCountry };
     const simpleProducts = await api.fetchProductDetails(null, product.alias, params);
@@ -104,7 +108,7 @@ export const actions = {
   },
   clearOptions({ commit, state }) {
     const { productsKit } = state;
-    productsKit.options?.forEach(option => {
+    productsKit.productsKitOptions?.forEach(option => {
       commit('clearOption', option);
     });
   },
@@ -117,7 +121,7 @@ export const actions = {
   async calculateProductsKitPrice({ state, commit }, { shop, country, currency }) {
     commit('setCalculatingPrice', true);
     const { amount, selectedOptionsProducts, productsKit, selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes } = state;
-    const entities = productsKit.options
+    const entities = productsKit.productsKitOptions
       .map(option => {
         const product = selectedOptionsProducts[option._id];
         if (product) {

package/pages/products-kit/_alias.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="ProductsKitPage__wrapper">
-    <breadcrumbs :items="breadcrumbs" />
-    <transition name="from-right-to-left" appear>
-      <products-kit :products-kit="productsKit" />
-    </transition>
-    <transition
-      v-if="hasProductsKitsList"
-      name="from-left-to-right"
-      appear>
-      <div class="content-inner">
-        <h2 class="lc_h2 lc_black ProductsKitPage__list-title">
-          You might also like
-        </h2>
-        <products-kits-list
-          class="ProductsKitPage__list"
-          :productsKits="productsKitsList" />
-      </div>
-    </transition>
-  </div>
-</template>
-<script>
-import metaInfo from '@lancom/shared/mixins/meta-info';
-
-export default {
-  name: 'ProductsKitPage',
-  components: {
-    Breadcrumbs: () => import('@lancom/shared/components/common/breadcrumbs/breadcrumbs'),
-    ProductsKit: () => import('@lancom/shared/components/products_kit/products_kit/products-kit'),
-    ProductsKitsList: () => import('@lancom/shared/components/products_kit/products_kits_list/products-kits-list')
-  },
-  mixins: [metaInfo],
-  async asyncData({ params, store, error, redirect }) {
-    console.log('asyncData: ', 1);
-    try {
-      const { shop, country, currency } = store.getters;
-      const data = {
-        shop: shop._id,
-        alias: params.alias,
-        country: country?._id,
-        currency: currency?._id
-      };
-      await store.dispatch('productsKit/fetchProductsKit', data);
-    } catch (e) {
-      console.log(e);
-    }
-    const productsKit = store.getters['productsKit/productsKit'];
-    const loadError = store.getters['productsKit/loadError'];
-
-    // console.log('loadError: ', loadError);
-    if (loadError?.redirectLink) {
-      return redirect(301, loadError?.redirectLink);
-    } else if (loadError) {
-      error(loadError);
-    }
-    return {
-      productsKit
-    };
-  },
-  data() {
-    return {
-      productsKit: null,
-      productsKits: []
-    };
-  },
-  computed: {
-    hasProductsKitsList() {
-      return this.productsKitsList.length > 0;
-    },
-    productsKitsList() {
-      return this.productsKits.filter(i => i.alias !== this.productsKit.alias).slice(0, 3);
-    },
-    breadcrumbs() {
-      const item = this.productsKit ? { text: this.productsKit.name } : null;
-      return [{
-        to: '/products-kits',
-        text: 'Products Kits'
-      }, item].filter(i => !!i);
-    },
-    pageItemType() {
-      return 'products-kits';
-    }
-  },
-  getRoute() {
-    return '/shop/:shop/products-kits/:alias';
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.ProductsKitPage{
-  &__wrapper {
-    margin-top: 30px;
-  }
-  &__list-title {
-    margin-top: 20px;
-    text-align: center;
-  }
-  &__list {
-    padding: 20px 0;
-  }
-}
-</style>

package/pages/products-kit/index.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="ProductsKitsPage__wrapper view-transition">
-    <div class="content-inner">
-      <breadcrumbs :items="breadcrumbs" />
-      <products-kits-list
-        class="ProductsKitsPage__list"
-        :products-kits="productsKits"
-        :count="count"
-        :page="page"
-        :per-page="perPage" />
-    </div>
-  </div>
-</template>
-
-<script>
-import metaInfo from '@lancom/shared/mixins/meta-info';
-import api from '@lancom/shared/assets/js/api';
-
-const KITS_PER_PAGE = 18;
-
-export default {
-  name: 'ProductPage',
-  components: {
-    Breadcrumbs: () => import('@lancom/shared/components/common/breadcrumbs/breadcrumbs'),
-    ProductsKitsList: () => import('@lancom/shared/components/products_kit/products_kits_list/products-kits-list')
-  },
-  mixins: [metaInfo],
-  async asyncData({ store, params, query }) {
-    const { _id } = store.getters.shop;
-    const kitsQuery = { ...params, ...query, limit: KITS_PER_PAGE };
-    const { productsKits, count, page, perPage } = await api.fetchProductsKits(_id, kitsQuery);
-    return { productsKits, count, page, perPage };
-  },
-  data() {
-    return {
-      productsKits: [],
-      count: null,
-      page: null,
-      perPage: null,
-      breadcrumbs: [{
-        text: 'Products Kits'
-      }]
-    };
-  },
-  computed: {
-    pageItemType() {
-      return 'products-kits';
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.ProductsKitsPage {
-  &__wrapper {
-    padding: 30px 0;
-  }
-}
-</style>