@lancom/shared 0.0.387 → 0.0.388

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_shipping/cart-shipping.vue

@@ -30,8 +30,7 @@
       <div
         v-if="!isAvailableForPickupSomeProducts"
         class="CartShipping__pickup-warnings">
-        Pickup not available for current cart items
-        {{ notValidProductsPickupBySKU }}
+        Pickup only available for "Code Red" brand
       </div>
       <div
         v-if="visiblePickupError && hasNotValidProductsPickup"
@@ -54,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',
@@ -95,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() {
@@ -132,13 +131,11 @@ export default {
     }
   },
   methods: {
-    ...mapMutations([
+    ...mapActions([
       'setSuburb',
+      'calculateCartPrice',
       'setNeedToPickup'
     ]),
-    ...mapActions([
-      'calculateCartPrice'
-    ]),
     async calculatePrice() {
       await this.calculateCartPrice({ shop: this.shop, country: this.country, currency: this.currency });
     }

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/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,31 +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"
       :options-attr="optionsAttr" />
-    <products-kit-cart
-      class="ProductsKit__cart"
-      :products-kit="productsKit" />
+    <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';
 
@@ -44,6 +36,9 @@ export default {
       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_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/package.json

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

package/store/cart.js

@@ -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.productsKitOptions?.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 }) => {