@lancom/shared 0.0.269 → 0.0.271

package/assets/scss/variables/_theme.scss

@@ -46,6 +46,7 @@ $purple: #7D6AEF;
 $purple_lighter: rgba(127, 107, 239, 0.3);
 $purple_darker: #6D57EB;
 $dark_blue: #343750;
+$brand_color_1: #7D6AEF;
 
 // new color schema
 $black: #343750 !default;
@@ -56,6 +57,8 @@ $grey_3: #EFF1F2;
 $grey_4: #F9F9FC;
 $grey_5: #9898A5 !default;
 
+$text_dark_1: #1C1C1E;
+
 $white: #fff;
 
 // Elevations

package/components/common/client_settings/client-settings.scss

@@ -1,15 +1,9 @@
 @import "@/assets/scss/variables";
+
 .ClientSettings {
   &__wrapper {
     position: relative;
   }
-  &__field {
-    padding: 6px !important;
-    height: 50px;
-    display: flex !important;
-    align-items: center;
-    cursor: pointer;
-  }
   &__inner {
     min-width: 72px;
     width: 33%;
@@ -20,8 +14,29 @@
   &__value {
     color: $grey_1;
     text-transform: uppercase;
-    margin-left: 20px;
     flex-grow: 1;
+    display: flex;
+    align-items: center;
+    background-color: rgba(125, 106, 239, 0.07);
+    padding: 10px 10px 5px 10px;
+    border-radius: 20px;
+    &--divider {
+      display: block;
+      height: 16px;
+      width: 1px;
+      background-color: rgba(0, 0, 0, 0.14);
+      margin: 0 5px;
+    }
+    span i {
+      color: $brand_color_1;
+      font-size: 25px;
+    }
+  }
+  &__divider {
+    margin-top: 10px;
+    margin-bottom: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    width: 100%;
   }
   &__caret {
     color: $grey_5;
@@ -32,22 +47,45 @@
     position: absolute;
     z-index: 101;
     top: 40px;
-    width: 250px;
+    width: 220px;
+    margin-top: 20px;
+    margin-left: 10px;
     // transform: translateY(-50%);
-    padding: 10px;
-    box-shadow: 0 0 2px grey;
+    padding: 15px;
+    box-shadow: 0px 4px 121px 0px rgba(145, 136, 188, 0.34);
     background-color: white;
+    border-radius: 12px;
   }
   &__field {
-    padding: 10px 0;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 26px;
+    letter-spacing: -0.025em;
     display: flex;
     justify-content: space-between;
     cursor: pointer;
+    padding: 6px;
+    align-items: center;
+    > i {
+      color: $purple;
+    }
     &-item {
       padding: 7px 10px;
       cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+
+      &-checked {
+        margin-right: 10px;
+        margin-top: 2px;
+      }
+      &-icon {
+        margin-right: 10px;
+        margin-top: 3px;
+      }
       &:hover {
-        background-color: $grey_3;
+        color: $purple;
       }
     }
   }

package/components/common/client_settings/client-settings.vue

@@ -4,16 +4,15 @@
       class="ClientSettings__field"
       @click="isOpen = !isOpen">
       <div class="lc_regular16 ClientSettings__value">
-        <div class="d-flex">
-          <span v-if="country">
-            {{ country.isoCode }}
-          </span>
-          <span v-if="currency">
-            / {{ currency.symbol }}
-          </span>
-        </div>
+        <span v-if="country">
+          <i class="icon-globe"></i>
+        </span>
+        <!-- <span class="ClientSettings__value--divider"></span> -->
+        <!-- <span v-if="currency">
+          <i class="icon-message"></i>
+        </span> -->
+        <i class="icon-angle-down ClientSettings__caret"></i>
       </div>
-      <i class="icon-angle-down ClientSettings__caret"></i>
     </div>
     <div
       v-if="isOpen"
@@ -23,7 +22,7 @@
         <div
           class="ClientSettings__field"
           @click="toggleVisibleCountries()">
-          <span>{{ country.name }}</span>
+          <span>Country</span>
           <i class="icon-angle-down"></i>
         </div>
         <div v-if="visibleCountries">
@@ -32,15 +31,26 @@
             :key="item._id"
             class="ClientSettings__field-item"
             @click="selectCountry(item)">
-            {{ item.name }}
+            <div class="ClientSettings__field-item-checked">
+              <checked-icon :checked="country && country._id === item._id" />
+            </div>
+            <div
+              v-if="item.icon"
+              class="ClientSettings__field-item-icon">
+              <img :src="item.icon" />
+            </div>
+            <div>
+              {{ item.name }}
+            </div>
           </div>
         </div>
       </div>
+      <div class="ClientSettings__divider"></div>
       <div>
         <div
           class="ClientSettings__field"
           @click="toggleVisibleCurrencies()">
-          <span>{{ currency.name }}, {{ currency.symbol }}</span>
+          <span>Currency</span>
           <i class="icon-angle-down"></i>
         </div>
         <div v-if="visibleCurrencies">
@@ -49,7 +59,12 @@
             :key="item._id"
             class="ClientSettings__field-item"
             @click="selectCurrency(item)">
-            {{ item.symbol }}, {{ item.name }}
+            <div class="ClientSettings__field-item-checked">
+              <checked-icon :checked="currency && currency._id === item._id" />
+            </div>
+            <div>
+              {{ item.name }}
+            </div>
           </div>
         </div>
       </div>
@@ -59,15 +74,20 @@
   
 <script>
 import { mapGetters } from 'vuex';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+
 const Cookie = process.client ? require('js-cookie') : undefined;
 
 export default {
   name: 'ClientSettings',
+  components: {
+    CheckedIcon
+  },
   data() {
     return {
       isOpen: false,
-      visibleCountries: false,
-      visibleCurrencies: false
+      visibleCountries: true,
+      visibleCurrencies: true
     };
   },
   computed: {

package/components/product/product_multipacks_carousel/product-multipacks-carousel.vue

@@ -9,8 +9,11 @@
           'ProductMultipacksCarousel__item--active': multipack === selectedMultipack
         }">
         <product-multipack
+          :color="color"
           :multipack="multipack"
           :simple-products="simpleProducts"
+          :active="multipack === selectedMultipack"
+          :with-gst="withGst"
           class="elevation2"
           @selected="toggleMultipack(multipack)" />
       </div>
@@ -31,7 +34,7 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex';
+import { mapMutations, mapGetters } from 'vuex';
 import { inRange } from '@lancom/shared/assets/js/utils/filters';
 import ProductMultipack from './product_multipack/product-multipack';
 
@@ -42,25 +45,44 @@ export default {
   },
   data() {
     return {
-      thumbsPage: 0,
-      selectedMultipack: null
+      thumbsPage: 0
     };
   },
   props: {
     product: {
-      type: Array,
+      type: Object,
+      required: true
+    },
+    color: {
+      type: Object,
       required: true
     },
     simpleProducts: {
       type: Array,
       required: true
     },
+    withGst: {
+      type: Boolean,
+      default: false
+    },
     slidesPerRow: {
       type: Number,
       default: 3
     }
   },
+  created() {
+    console.log('LancomProductMultipacks...')
+  },
   computed: {
+    ...mapGetters('product', ['multipack']),
+    selectedMultipack: {
+      get() {
+        return this.multipack;
+      },
+      set(multipack) {
+        this.setMultipack(multipack);
+      }
+    },
     multipacks() {
       return this.product.multipacks || [];
     },
@@ -72,6 +94,7 @@ export default {
     }
   },
   methods: {
+    ...mapMutations('product', ['setSimpleProductAmount', 'clearSimpleProductsAmount', 'setMultipack']),
     toggleMultipack(multipack) {
       this.selectedMultipack = this.selectedMultipack === multipack ? null : multipack;
       this.clearSimpleProductsAmount();
@@ -79,21 +102,42 @@ export default {
         this.buyMultipack()
       }
     },
-    ...mapMutations('product', ['setSimpleProductAmount', 'clearSimpleProductsAmount']),
     buyMultipack() {
-      const sizes = [
+      const leftQty = this.addSimpleProducts([
         { size: 'S', percent: 0.15 },
         { size: 'M', percent: 0.2 },
         { size: 'XL', percent: 0.3 },
         { size: '2XL', percent: 0.05 },
         { size: 'L' }
-      ];
+      ]);
+      if (leftQty > 0) {
+        this.clearSimpleProductsAmount();
+        const sizes = [
+          { size: 'L' },
+          { size: 'XL' },
+          { size: 'M' },
+          ...this.simpleProducts
+            .filter(sp => sp.color?._id === this.color._id)
+            .filter(simpleProduct => !['L','XL','M'].includes(simpleProduct.size?.shortName))
+            .map(simpleProduct => ({ size: simpleProduct.size?.shortName }))
+        ];
+        const repeatLeftQty = this.addSimpleProducts(sizes);
+        if (repeatLeftQty > 0) {
+          this.selectedMultipack = null;
+          this.clearSimpleProductsAmount();
+          this.$toastr.e('Stock unavailable');
+        }
+      }
+    },
+    addSimpleProducts(sizes) {
       let leftQty = this.selectedMultipack.qty;
       sizes.forEach(s => {
-        const simpleProduct = this.simpleProducts.find(simpleProduct => simpleProduct.size.shortName === s.size);
+        const simpleProduct = this.simpleProducts
+          .filter(sp => sp.color?._id === this.color._id)
+          .find(simpleProduct => simpleProduct.size?.shortName === s.size);
         if (simpleProduct) {
           const qty = s.percent ? +(s.percent * this.selectedMultipack.qty).toFixed(0) : leftQty;
-          const amount = inRange(qty, 0, simpleProduct.quantityStock || 999);
+          const amount = inRange(qty, 0, simpleProduct.quantityStock || 0);
           leftQty -= amount;
           this.setSimpleProductAmount({
             colorId: simpleProduct.color._id,
@@ -102,7 +146,7 @@ export default {
           });
         }
       });
-      
+      return leftQty;
     },
     goToPrevPage() {
       this.thumbsPage = Math.max(0, this.thumbsPage - 1);

package/components/product/product_multipacks_carousel/product_multipack/product-multipack.scss

@@ -1,6 +1,9 @@
 @import "@/assets/scss/variables";
 
 .ProductMultipack {
+  &__wrapper {
+    cursor: pointer;
+  }
   &__price {
     padding: 10px;
     text-align: center;
@@ -34,10 +37,15 @@
     &-info {
       position: absolute;
       top: 0px;
-      right: 0px;
+      left: 0px;
       display: flex;
       flex-direction: column;
       align-items: end;
     }
+    &-active {
+      position: absolute;
+      top: 7px;
+      right: 7px;
+    }
   }
 }

package/components/product/product_multipacks_carousel/product_multipack/product-multipack.vue

@@ -20,47 +20,70 @@
             @onclick="buyMultipack()" />
         </div>
       </div>
+      <div class="ProductMultipack__banner-active">
+        <checked-icon :checked="active" />
+      </div>
     </div>
     <div class="ProductMultipack__price">
-      {{ oneItemPrice | priceWithTax(pricingSettings, currency) }} each 
-      <span>{{ totalPrice | priceWithTax(pricingSettings, currency) }}</span>
+      {{ oneItemPrice | price(currency) }} each 
+      <span>{{ totalPrice | price(currency) }}</span>
     </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import { price, tax } from '@lancom/shared/assets/js/utils/filters';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+import { priceFromRange } from '@lancom/shared/assets/js/utils/pricing';
 
 export default {
   name: 'LancomProductMultipack',
+  components: {
+    CheckedIcon
+  },
   filters: {
-    priceWithTax
+    price
   },
   props: {
+    color: {
+      type: Object,
+      required: true
+    },
     multipack: {
       type: Object,
       required: true
     },
+    withGst: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
     simpleProducts: {
       type: Array,
       required: true
     }
   },
   computed: {
-    ...mapGetters(['pricingSettings', 'currency']),
+    ...mapGetters(['pricingSettings', 'currency', 'gstTax']),
     bannerImage() {
       const banner = this.multipack.banner?.editorImage || this.multipack.banner;
       return banner?.origin;
     },
     simpleProduct() {
-      return (this.simpleProducts || []).find(sp => sp.SKU === this.multipack.SKU);
+      const simpleProduct = (this.simpleProducts || []).find(sp => sp.SKU === this.multipack.SKU);
+      const simpleProducts = (this.simpleProducts || []).filter(sp => sp.color?._id === this.color._id);
+      return simpleProducts.find(sp => sp.size?.shortName === simpleProduct?.size?.shortName) || simpleProducts[0];
     },
     totalPrice() {
       return this.oneItemPrice * this.multipack.qty;
     },
     oneItemPrice() {
-      return (this.simpleProduct?.pricing || []).find(p => p.min === this.multipack.qty)?.price || 0;
+      const price = priceFromRange(this.multipack.qty, this.simpleProduct?.pricing);
+      return this.withGst ? tax(price, this.gstTax) : price;
     }
   },
   methods: {

package/components/products/products_autocomplete/products-autocomplete.vue

@@ -5,7 +5,7 @@
         v-model="text"
         :autofocus="autofocus"
         name="search"
-        placeholder="Search products"
+        :placeholder="placeholder"
         type="text"
         class="form-field no-label tiny-placeholder labelless"
         autocomplete="off"
@@ -17,6 +17,7 @@
         @blur="hideResults"
         @keydown.enter="goToSearch" />
       <i
+        v-if="hasSearchIcon"
         class="icon-search"
         @click="goToSearch"></i>
     </div>
@@ -62,6 +63,14 @@ export default {
     autofocus: {
       type: Boolean,
       default: false
+    },
+    hasSearchIcon: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: 'Search products'
     }
   },
   data() {

package/feeds/google-shopping.js

@@ -92,7 +92,7 @@ async function googleShoppingFeed(axios, config, availableStores) {
                 }
               } else {
                 info['g:pickup_method'] = { _text: 'not_supported' };
-                info['g:excluded_destination'] = { _text: 'Local_inventory_ads' };
+                info['g:excluded_destination'] = [{ _text: 'Local_inventory_ads' }, { _text: 'Free_local_listings' }];
               }
               if (product.volume) {
                 if (product.volume.length) {

package/package.json

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

package/store/product.js

@@ -10,6 +10,7 @@ import { filterBigSize } from '@lancom/shared/assets/js/utils/product';
 import { sortByName } from '../assets/js/utils/filters';
 
 export const state = () => ({
+  multipack: null,
   calculatingPrice: false,
   images: [],
   priceIncludeGST: false,
@@ -45,6 +46,7 @@ export const state = () => ({
 });
 
 export const getters = {
+  multipack: ({ multipack }) => multipack,
   calculatingPrice: ({ calculatingPrice }) => calculatingPrice,
   product: ({ product }) => product,
   preSetPrint: ({ preSetPrint }) => preSetPrint,
@@ -263,6 +265,9 @@ export const actions = {
 };
 
 export const mutations = {
+  setMultipack(state, multipack) {
+    state.multipack = multipack;
+  },
   setProduct(state, product) {
     state.product = product;
   },