@lancom/shared 0.0.280 → 0.0.281

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

@@ -0,0 +1,188 @@
+<template>
+  <product-colors-selector class="ProductColorsSelector__wrapper">
+    <div>
+      <div class="ProductColorsSelector__controls">
+        <div
+          class="ProductColorsSelector__head"
+          :class="{
+            'ProductColorsSelector__head--opened': opened
+          }">
+          <multiselect
+            v-model="selectedColor"
+            value="_id"
+            label="name"
+            track-by="_id"
+            placeholder="Select colour"
+            :options="availableColors"
+            :allow-empty="false"
+            :searchable="false"
+            :option-height="60">
+            <div
+              slot="option"
+              slot-scope="{ option }"
+              class="ProductColorsSelector__option">
+              <span
+                class="ProductColorsSelector__option-name">
+                {{ option.name }}
+              </span>
+              <product-color-image
+                class="ProductColorsSelector__option-preview"
+                :color="option" />
+            </div>
+            <div
+              slot="singleLabel"
+              slot-scope="{ option }"
+              class="ProductColorsSelector__option">
+              {{ option.name }}
+            </div>
+          </multiselect>
+          <i class="icon-angle-down"></i>
+        </div>
+        <div
+          v-if="hasAnotherPrintBtn && hasLayers && isPrintPricing"
+          class="ProductColorsSelector__add-btn">
+          <btn
+            btn-class="green"
+            btn-label="Add Another Print"
+            @onclick="addAnotherPrint()">
+            <i
+              slot="icon-before"
+              class="icon-plus"></i>
+          </btn>
+        </div>
+      </div>
+      <transition
+        name="fade"
+        appear>
+        <div
+          v-if="opened"
+          class="view-transition">
+          <div class="ProductColorsSelector__options">
+            <product-colors-selector-options
+              ref="colorsSelectorOptions"
+              :display-products-count="true"
+              class="ProductColorsSelector__section" />
+            <div class="ProductColorsSelector__toggle-gst">
+              <checkbox
+                v-model="inclGST"
+                :dark="true"
+                @change="onChangeInclGST">
+                <div class="ml-5">Inc. {{ taxName }}</div>
+              </checkbox>
+            </div>
+          </div>
+          <products-size-selector-color
+            :with-gst="inclGSTFinal"
+            class="ProductColorsSelector__section"
+            :class="{
+              'ProductColorsSelector__section--hidden': inclGSTSpinner
+            }" />
+        </div>
+      </transition>
+    </div>
+  </product-colors-selector>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect';
+import { mapGetters, mapMutations } from 'vuex';
+import ProductColorsSelector from '@lancom/shared/components/product/layouts/product_colors_selector/product-colors-selector';
+import ProductColorsSelectorOptions from '@lancom/shared/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options';
+import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+import ProductsSizeSelectorColor from '@lancom/shared/components/product/products_size_selector_color/products-size-selector-color';
+
+export default {
+  name: 'WorkdepotProductColorsSelector',
+  components: {
+    ProductColorsSelector,
+    ProductColorsSelectorOptions,
+    ProductsSizeSelectorColor,
+    ProductColorImage,
+    Multiselect
+  },
+  data() {
+    return {
+      inclGSTFinal: false,
+      inclGSTSpinner: false,
+      inclGSTSpinnerTimer: null,
+      opened: true
+    };
+  },
+  props: {
+    hasAnotherPrintBtn: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters(['taxName']),
+    ...mapGetters('product', ['editableColor', 'availableColors', 'visibleSteps', 'hasLayers', 'isPrintPricing', 'priceIncludeGST']),
+    selectedColor: {
+      get() {
+        return this.editableColor;
+      },
+      set(color) {
+        this.$refs.colorsSelectorOptions.toggleSelection(color);
+      }
+    },
+    inclGST: {
+      get() {
+        return this.priceIncludeGST;
+      },
+      set(value) {
+        this.setPriceIncludeGST(value);
+      }
+    }
+  },
+  watch: {
+    inclGST() {
+      this.onChangeInclGST();
+    }
+  },
+  created() {
+    if (this.priceIncludeGST) {
+      this.inclGSTFinal = true;
+    }
+  },
+  destroyed() {
+    clearTimeout(this.inclGSTSpinnerTimer);
+  },
+  methods: {
+    ...mapMutations('product', [
+      'setVisibleSteps',
+      'setEditableLayer',
+      'setEditablePrintArea',
+      'setSelectedPrintArea',
+      'setSelectedPrintType',
+      'setEditableColor',
+      'setPriceIncludeGST'
+    ]),
+    ...mapMutations('layers', [
+      'setEditableLayer'
+    ]),
+    toggleContent() {
+      this.opened = !this.opened;
+    },
+    addAnotherPrint() {
+      this.setVisibleSteps(false);
+      this.$nextTick(() => {
+        this.setEditableLayer(null);
+        this.setEditablePrintArea(null);
+        this.setVisibleSteps(true);
+      });
+    },
+    onChangeInclGST() {
+      clearTimeout(this.inclGSTSpinnerTimer);
+      this.inclGSTSpinner = true;
+      this.inclGSTSpinnerTimer = setTimeout(() => {
+        this.inclGSTSpinner = false;
+        this.inclGSTFinal = this.inclGST;
+      }, 500);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-colors-selector.scss';
+</style>

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

@@ -74,6 +74,7 @@ export default {
     console.log('LancomProductMultipacks...')
   },
   computed: {
+    ...mapGetters(['currency']),
     ...mapGetters('product', ['multipack']),
     selectedMultipack: {
       get() {
@@ -142,7 +143,8 @@ export default {
           this.setSimpleProductAmount({
             colorId: simpleProduct.color._id,
             sizeId: simpleProduct.size._id,
-            amount
+            amount,
+            currency: this.currency
           });
         }
       });

package/components/product/product_size_selector/product_size_selector_color/product_size_selector_color_cell/product-size-selector-color-cell.vue

@@ -40,12 +40,10 @@
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex';
+import { mapGetters, mapMutations } from 'vuex';
 import confirm from '@lancom/shared/mixins/confirm';
 import { inRange } from '@lancom/shared/assets/js/utils/filters';
 
-const { mapGetters, mapMutations } = createNamespacedHelpers('product');
-
 export default {
   name: 'ProductSizeSelectorColorCell',
   mixins: [
@@ -88,7 +86,8 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['usedSimpleProducts', 'product']),
+    ...mapGetters(['currency']),
+    ...mapGetters('product', ['usedSimpleProducts', 'product']),
     disabled() {
       const sizeWithoutColor = this.color.sizes && !this.color.sizes.find(({ alias }) => alias === this.size.alias);
       return sizeWithoutColor || this.outStock;
@@ -117,7 +116,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations(['setSimpleProductAmount']),
+    ...mapMutations('product', ['setSimpleProductAmount']),
     onFocus() {
       this.defaultValue = '';
     },

package/components/product/products_size_selector_color/product_size_selector_color/product-size-selector-color.scss

@@ -0,0 +1,58 @@
+@import '@/assets/scss/variables';
+
+.ProductSizeSelectorColor {
+  &__wrapper td {
+    border: 1px solid $gray !important;
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+    &.disabled {
+      color: $gray_main;
+      pointer-events: none !important;
+    }
+  }
+  &__color-name {
+    width: 70px;
+    span {
+      writing-mode: vertical-lr;
+      transform: rotate(180deg);
+      width: 100%;
+      display: block;
+      margin-left: -20px;
+    }
+    @media (max-width: $bp-extra-small-max) {
+      width: 40px;
+      span {
+        margin-left: -6px;
+      }
+    }
+  }
+  &__size {
+    width: 70px;
+  }
+  &__in-stock,
+  &__out-stock {
+    font-weight: 600;
+    text-transform: none;
+  }
+  &__out-stock {
+    color: $gray_main;
+  }
+}
+
+::v-deep .ProductSizeSelectorColorCell {
+  &__field {
+    line-height: 20px;
+    input {
+      height: 30px;
+      padding: 5px !important;
+      background-color: $gray;
+    }
+  }
+  &__side-control {
+    background: $green;
+    width: 26px;
+  }
+}

package/components/product/products_size_selector_color/product_size_selector_color/product-size-selector-color.vue

@@ -0,0 +1,128 @@
+<template>
+  <tr class="ProductSizeSelectorColor__wrapper">
+    <td
+      v-if="rowspan"
+      :rowspan="rowspan"
+      class="ProductSizeSelectorColor__color-name">
+      <span>
+        {{ product.color.name }}
+      </span>
+    </td>
+    <td
+      class="ProductSizeSelectorColor__size hidden-sm-and-down"
+      :class="{ disabled }">
+      {{ product.size.shortName }}
+    </td>
+    <td
+      :class="{ disabled }">
+      <div class="lc_regular14 hidden-md-and-up">
+        {{ product.size.shortName }}
+      </div>
+      <v-popover
+        trigger="hover"
+        :delay="{ show: 200, hide: 400 }"
+        popover-class="tooltip popover white"
+        class="ProductSizeSelectorColor__price">
+        <span>
+          {{ productPrice | price(currency) }}
+        </span>
+        <template slot="popover">
+          <div>
+            <pricing-discounts-table
+              :with-gst="withGst"
+              :prices="pricing"
+              :amount="usedSimpleProductsQuantity" />
+          </div>
+        </template>
+      </v-popover>
+      <div class="hidden-md-and-up">
+        <div
+          v-if="product.quantityStock"
+          class="ProductSizeSelectorColor__in-stock">
+          {{ currentQuantityStock }} in stock
+        </div>
+        <div
+          v-else
+          class="ProductSizeSelectorColor__out-stock">
+          out of stock
+        </div>
+      </div>
+    </td>
+    <td class="ProductSizeSelectorColor__stock hidden-sm-and-down">
+      <div
+        v-if="product.quantityStock"
+        class="ProductSizeSelectorColor__in-stock">
+        {{ currentQuantityStock }} in stock
+      </div>
+      <div
+        v-else
+        class="ProductSizeSelectorColor__out-stock">
+        out of stock
+      </div>
+    </td>
+    <td class="ProductSizeSelectorColor__cell">
+      <product-size-selector-color-cell
+        :side-controls="true"
+        :show-max-modal="false"
+        :out-stock="disabled"
+        :color="product.color"
+        :size="product.size" />
+    </td>
+  </tr>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import ProductSizeSelectorColorCell from '@lancom/shared/components/product/product_size_selector/product_size_selector_color/product_size_selector_color_cell/product-size-selector-color-cell';
+import { tax } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'ProductSizeSelectorColor',
+  filters: {
+    price
+  },
+  components: {
+    PricingDiscountsTable,
+    ProductSizeSelectorColorCell
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    rowspan: {
+      type: Number,
+      default: 0
+    },
+    withGst: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['isPrintPricing', 'usedSimpleProductsQuantity']),
+    ...mapGetters(['gstTax', 'currency']),
+    pricing() {
+      return (this.isPrintPricing ? this.product.pricing : this.product.unprintedPricing) || [];
+    },
+    productPrice() {
+      const amount = this.usedSimpleProductsQuantity;
+      const pricing = this.pricing;
+      const price = (pricing.find(({ min, max }) => (!min || min <= amount) && (!max || max >= amount)) || pricing[0] || {}).price || 0;
+      return this.withGst ? tax(price, this.gstTax) : price;
+    },
+    disabled() {
+      return !this.product.quantityStock || !this.productPrice;
+    },
+    currentQuantityStock() {
+      return (this.product.quantityStock || 0) - (this.product.amount || 0);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-size-selector-color.scss';
+</style>

package/components/product/products_size_selector_color/products-size-selector-color.scss

@@ -0,0 +1,12 @@
+@import '@/assets/scss/variables';
+
+.ProductsSizeSelectorColor {
+  &__table {
+    border: 1px solid $gray;
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+  }
+}

package/components/product/products_size_selector_color/products-size-selector-color.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <table class="ProductsSizeSelectorColor__table lc_table bordered">
+      <tbody class="centered">
+        <product-size-selector-color
+          v-for="(product, index) in products"
+          :key="`${editableColor._id}_${product._id}`"
+          :rowspan="index === 0 ? products.length : 0"
+          :with-gst="withGst"
+          :product="product" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { sortBySize } from '@lancom/shared/assets/js/utils/sizes';
+import ProductSizeSelectorColor from './product_size_selector_color/product-size-selector-color';
+
+export default {
+  name: 'ProductsSizeSelectorColor',
+  components: {
+    ProductSizeSelectorColor
+  },
+  props: {
+    withGst: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['editableColor', 'editableColorSimpleProducts']),
+    products() {
+      return sortBySize(this.editableColorSimpleProducts);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-size-selector-color.scss';
+</style>

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

@@ -106,7 +106,7 @@
           Price
         </div>
         <div>
-          {{ layerPrintPricing | pricingRange }}
+          {{ layerPrintPricing | pricingRange(currency) }}
         </div>
         <v-popover
           ref="popover"
@@ -172,6 +172,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['currency']),
     ...mapGetters('product', ['product']),
     type() {
       return this.layer.type;

package/components/product/wizard/wizard_print_size/wizard_print_area_print_size/wizard-print-area-print-size.vue

@@ -14,7 +14,7 @@
         </div>
         <div class="WizardPrintAreaPrintSize__type-price mt-3">
           <span>
-            {{ getSizePricing(size) | pricingRange }}
+            {{ getSizePricing(size) | pricingRange(currency) }}
           </span>
         </div>
         <v-popover
@@ -56,6 +56,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['currency']),
     ...mapGetters('product', ['product', 'selectedPrintAreas', 'availablePrintTypes']),
     selectedPrintArea() {
       return this.selectedPrintAreas[this.editablePrintArea._id];

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

@@ -25,7 +25,7 @@
         </div>
         <div class="WizardPrintAreaPrintType__type-price mt-7">
           <span>
-            {{ getPrinTypePricing(type) | pricingRange }}
+            {{ getPrinTypePricing(type) | pricingRange(currency) }}
           </span>
         </div>
         <v-popover
@@ -65,6 +65,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['currency']),
     ...mapGetters('product', ['selectedPrintAreas', 'selectedPrintTypes', 'product', 'availablePrintTypes', 'selectedPrintUnderbases']),
     selectedPrintArea() {
       return this.selectedPrintAreas[this.editablePrintArea._id];

package/components/products/product_list/product-list.scss

@@ -10,9 +10,9 @@
     }
   }
   &__item-wrapper {
-    width: 330px;
+    width: 270px;
     height: 450px;
-    margin: 0 0 25px 25px;
+    margin: 0 0 15px 15px;
     position: relative;
     z-index: 1;
     &--active {

package/components/products/product_list_product/product-list-product.scss

@@ -17,7 +17,7 @@
   &__colors {
     display: flex;
     flex-wrap: wrap;
-    margin: 14px 25px 20px 25px;
+    margin: 2px 25px 20px 25px;
   }
   &__color {
     margin: 0px;
@@ -53,8 +53,8 @@
     position: relative;
     transition: background-color 0.5s ease;
     background-color: white;
-    height: 330px;
-    width: 340px;
+    height: 300px;
+    width: 270px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -71,9 +71,10 @@
     }
   }
   &__brand {
-    width: 54px;
+    max-width: 54px;
+    max-height: 44px;
     top: 10px;
-    left: 5px;
+    left: 10px;
     position: absolute;
     z-index: 10;
     opacity: 0.7;
@@ -133,16 +134,11 @@
     flex-direction: column;
     align-items: center;
     &-item {
-      margin-top: 4px;
       padding: 0 20px;
     }
     &-name {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      max-width: 180px;
-      margin-right: 5px;
       display: block;
+      text-align: center;
     }
   }
 }

package/components/products/product_list_product/product-list-product.vue

@@ -35,25 +35,17 @@
         v-if="product.isTearAwayTag"
         class="ProductListProduct__tear-away-tag"
         src="~static/images/tear-away-tag.svg" />
-      <div class="ProductListProduct__gender">
+      <!-- <div class="ProductListProduct__gender">
         <span>{{ product.gender }}</span>
-      </div>
+      </div> -->
     </a>
     <div class="ProductListProduct__info">
       <div class="ProductListProduct__info-item">
         <a :href="productLink" class="lc_h4 row">
           <div>
-            <v-popover trigger="hover">
-              <span class="ProductListProduct__info-name">
-                {{ product.name }}
-              </span>
-              <template slot="popover">
-                {{ product.name }}
-              </template>
-            </v-popover>
-          </div>
-          <div>
-            | {{ product.SKU }}
+            <span class="ProductListProduct__info-name">
+              {{ product.name }} | {{ product.SKU }}
+            </span>
           </div>
         </a>
       </div>
@@ -67,12 +59,12 @@
         class="ProductListProduct__info-item lc_h4">
         {{ product.minPrice | price(currency) }} - {{ product.maxPrice | price(currency) }}
       </div>
-      <div class="ProductListProduct__info-item mt-9 lc_caption">
+      <div class="ProductListProduct__info-item mt-2 lc_caption">
         {{ product.colors.length }} {{ product.colors.length === 1 ? 'Colour' : 'Colours' }} | Size: {{ product.sizes | sizesRange }}
       </div>
       <div
         v-if="full"
-        class="ProductListProduct__info-item mt-9 lc_caption visible-full">
+        class="ProductListProduct__info-item mt-2 lc_caption visible-full">
         {{ product.fabricInfoShort }} | {{ product.materialWeight }} gsm
       </div>
       <div

package/components/the_aside/the-aside.vue

@@ -67,6 +67,7 @@ export default {
         render: h => h(
           component,
           {
+            props: params?.props,
             on: { close: this.hide, ...events }
           }
         )

package/feeds/google-shopping.js

@@ -1,5 +1,5 @@
-async function googleLocalShoppingFeed(axios, config, availableStores) {
-  const result = await googleShoppingFeed(axios, config, availableStores);
+async function googleLocalShoppingFeed(axios, config, availableStores, country) {
+  const result = await googleShoppingFeed(axios, config, availableStores, country);
   
   const fields = [
     'g:availability',
@@ -14,8 +14,8 @@ async function googleLocalShoppingFeed(axios, config, availableStores) {
     .map(i => fields.reduce((item, field) => ({ ...item, [field]: i[field] }), {}));
   return result;
 }
-async function googleShoppingFeed(axios, config, availableStores) {
-  const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/products?host=${config.HOST_NAME}`);
+async function googleShoppingFeed(axios, config, availableStores, country) {
+  const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/products?host=${config.HOST_NAME}&country=${country || ''}`);
   const spliceFirstImage = images => (images || []).splice(0, 1)[0];
   const getImages = images => (images || []).length > 0 ? images : null;
   const channel = {