@lancom/shared 0.0.432 → 0.0.433

package/components/product/product_check_delivery/product-check-delivery.vue

@@ -13,57 +13,162 @@
       </div>
     </div>
     <div class="ProductCheckDelivery__postcode">
-      <postcode-select v-model="postcode" />
+      <postcode-select
+        v-model="postcode"
+        :suburb="suburb"
+        :only-postcode="true"
+        label-text="Postcode"
+        @select="onSelectSuburb" />
     </div>
-    <!-- <div class="ProductCheckDelivery__estimates">
-      <div class="ProductCheckDelivery__estimate">
-        <div class="ProductCheckDelivery__estimate-icon">
-          <i class="icon-map"></i>
-        </div>
-        <div class="ProductCheckDelivery__estimate-label">
-          Next day collection
-        </div>
-        <div class="ProductCheckDelivery__estimate-info">
-          - Order before 2pm
-        </div>
-        <div class="ProductCheckDelivery__estimate-price">
-          Free
-        </div>
-      </div>
-      <div class="ProductCheckDelivery__estimate">
-        <div class="ProductCheckDelivery__estimate-icon">
-          <i class="icon-local-shipping"></i>
-        </div>
-        <div class="ProductCheckDelivery__estimate-label">
-          Home delivery
-        </div>
-        <div class="ProductCheckDelivery__estimate-info">
-          - Next working day
+    <div
+      v-if="recalcNeeded"
+      class="ProductCheckDelivery__recalc-warning">
+      <span class="lc_caption lc_orange">Quantities changed. Shipping may be outdated.</span>
+      <btn
+        btn-class="purple"
+        btn-label="Recalculate"
+        @onclick="calculateShipping" />
+    </div>
+    <div
+      v-if="hasSuppliersWithRates && hasSelection"
+      class="ProductCheckDelivery__shipping">
+      <div
+        v-for="(supplier, index) of suppliersWithRates"
+        :key="index"
+        class="CartShipmentsPricing__supplier">
+        <div class="CartShipmentsPricing__supplier-info">
+          <div class="CartShipmentsPricing__supplier-brands">
+            <div>
+              {{ supplier.brands.map(b => b.name) | commaArray }}
+            </div>
+          </div>
+          <div>
+            {{ supplier | selectedRatePrice | price(currency) }}
+          </div>
         </div>
-        <div class="ProductCheckDelivery__estimate-price">
-          £3.95
+        <div
+          v-for="(rate, i) of supplier.rates"
+          :key="`rate-${i}`"
+          class="CartShipmentsPricing__rate CartShipmentsPricing__rate--disabled">
+          <div class="CartShipmentsPricing__rate-info">
+            <div class="CartShipmentsPricing__rate-name">
+              <div>{{ rate.name }}</div>
+              <div
+                v-if="rate.note"
+                class="lc_regular10">
+                {{ rate.note }}
+              </div>
+            </div>
+          </div>
+          <div class="CartShipmentsPricing__rate-price">
+            {{ rate.totalPriceWithoutTax | price(currency) }}
+          </div>
         </div>
       </div>
-    </div> -->
+    </div>
+    <div
+      v-else-if="calculating && hasSelection"
+      class="ProductCheckDelivery__calculating">
+      <div class="lc_body-large lc_gray-main">Calculating shipping...</div>
+    </div>
   </section>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import api from '@lancom/shared/assets/js/api';
+import { getProductsForCalculatePricing } from '@lancom/shared/assets/js/utils/product';
+import { price, commaArray } from '@lancom/shared/assets/js/utils/filters';
 
 export default {
   name: 'ProductCheckDelivery',
   components: {
     PostcodeSelect
   },
+  filters: {
+    price,
+    commaArray,
+    selectedRatePrice(supplier) {
+      const { totalPriceWithoutTax = 0 } = supplier.rates.find(r => r.selected) || {};
+      return totalPriceWithoutTax;
+    }
+  },
   data() {
+    const postcode = 'SW1A 1AA';
     return {
-      postcode: null
+      suburb: { postcode },
+      pricing: null,
+      calculating: false,
+      recalcNeeded: false,
+      lastUsedSimpleProductsSignature: null
     };
   },
   computed: {
-    ...mapGetters('product', ['product'])
+    ...mapGetters(['shop', 'country', 'currency']),
+    ...mapGetters('product', ['product', 'usedSimpleProducts', 'template']),
+    hasSelection() {
+      return (this.usedSimpleProducts || []).length > 0;
+    },
+    hasSuppliersWithRates() {
+      return this.suppliersWithRates.length > 0;
+    },
+    suppliersWithRates() {
+      return this.pricing?.shipping?.suppliersWithRates || [];
+    }
+  },
+  watch: {
+    usedSimpleProducts: {
+      handler() {
+        const currentSignature = this.buildSignature();
+        if (this.hasSelection && currentSignature !== this.lastUsedSimpleProductsSignature) {
+          if (this.pricing) {
+            this.recalcNeeded = true;
+          } else {
+            this.calculateShipping();
+          }
+        }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    if (this.hasSelection) {
+      this.calculateShipping();
+    }
+  },
+  methods: {
+    onSelectSuburb(suburb) {
+      this.suburb = suburb;
+      this.calculateShipping();
+    },
+    buildSignature() {
+      return JSON.stringify((this.usedSimpleProducts || []).map(({ _id, amount }) => ({ _id, amount })));
+    },
+    async calculateShipping() {
+      if (!this.hasSelection) {
+        this.pricing = null;
+        this.recalcNeeded = false;
+        return;
+      }
+      this.calculating = true;
+      this.recalcNeeded = false;
+      try {
+        const entities = getProductsForCalculatePricing(this.product, this.usedSimpleProducts);
+        const payload = {
+          entities: entities.map(e => ({ ...e, brand: this.product.brand })),
+          postcode: this.suburb?.postcode,
+          country: this.country?._id,
+          currency: this.currency?._id
+        };
+        this.pricing = await api.calculateProductPrice(payload, this.shop._id);
+        this.lastUsedSimpleProductsSignature = this.buildSignature();
+      } catch (e) {
+        this.pricing = null;
+      } finally {
+        this.calculating = false;
+      }
+    }
   }
 };
 </script>

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

@@ -35,7 +35,7 @@
 
 <script>
 import { mapMutations, mapGetters } from 'vuex';
-import { inRange } from '@lancom/shared/assets/js/utils/filters';
+import MultipackMixin from '@lancom/shared/mixins/multipack.mixin';
 import ProductMultipack from './product_multipack/product-multipack';
 
 export default {
@@ -43,6 +43,7 @@ export default {
   components: {
     ProductMultipack
   },
+  mixins: [MultipackMixin],
   props: {
     product: {
       type: Object,
@@ -92,61 +93,17 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('product', ['setSimpleProductAmount', 'clearSimpleProductsAmount', 'setMultipack']),
+    ...mapMutations('product', ['clearSimpleProductsAmount', 'setMultipack']),
     toggleMultipack(multipack) {
       this.selectedMultipack = this.selectedMultipack === multipack ? null : multipack;
       this.clearSimpleProductsAmount();
       if (this.selectedMultipack) {
-        this.buyMultipack()
-      }
-    },
-    buyMultipack() {
-      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);
+        const repeatLeftQty = this.buyMultipack(this.color, this.selectedMultipack.qty);
         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
-          .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 || 0);
-          leftQty -= amount;
-          this.setSimpleProductAmount({
-            colorId: simpleProduct.color._id,
-            sizeId: simpleProduct.size._id,
-            amount,
-            currency: this.currency
-          });
-        }
-      });
-      return leftQty;
-    },
     goToPrevPage() {
       this.thumbsPage = Math.max(0, this.thumbsPage - 1);
     },

package/components/product/product_pricing_tiers/product-pricing-tiers.scss

@@ -9,6 +9,7 @@
     display: flex;
     gap: 6px;
     margin-top: 16px;
+    flex-wrap: wrap;
   }
   &__tier {
     padding: 4px;
@@ -17,6 +18,7 @@
     border: 1px solid #E5E5E5;
     background: #FFF;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
+    cursor: pointer;
     &-single-price {
       padding: 12px 0;
       border-radius: 8px;

package/components/product/product_pricing_tiers/product-pricing-tiers.vue

@@ -5,14 +5,20 @@
     </h3>
     <div class="ProductPricingTiers__tiers">
       <div
-        v-for="(tier, index) in product.pricing"
+        v-for="(tier, index) in defaultSimpleProduct.pricing"
         :key="index"
-        class="ProductPricingTiers__tier">
+        class="ProductPricingTiers__tier"
+        @click="selectTier(tier)">
         <div class="ProductPricingTiers__tier-single-price">
-          <span>{{ (tier.price / tier.min) | priceWithTax(pricingSettings, currency) }}</span> each
+          <price
+            :price="tier.price"
+            :with-gst="priceIncludeGST" /> each
         </div>
         <div class="ProductPricingTiers__tier-price">
-          Buy {{ tier.min }} for <span>{{ tier.price | priceWithTax(pricingSettings, currency) }}</span>
+          Buy {{ tier.min }} for
+          <price
+            :price="tier.price * tier.min"
+            :with-gst="priceIncludeGST" />
         </div>
       </div>
     </div>
@@ -22,15 +28,28 @@
 <script>
 import { mapGetters } from 'vuex';
 import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import MultipackMixin from '@lancom/shared/mixins/multipack.mixin';
+import Price from '@lancom/shared/components/common/price';
 
 export default {
   name: 'ProductPricingTiers',
   filters: {
     priceWithTax
   },
+  components: {
+    Price
+  },
+  mixins: [MultipackMixin],
   computed: {
-    ...mapGetters('product', ['product']),
-    ...mapGetters(['pricingSettings'])
+    ...mapGetters('product', ['product', 'editableColor', 'priceIncludeGST', 'defaultSimpleProduct']),
+    ...mapGetters(['pricingSettings', 'currency'])
+  },
+  methods: {
+    selectTier(tier) {
+      if (this.editableColor) {
+        this.buyMultipack(this.editableColor, tier.min);
+      }
+    }
   }
 };
 </script>

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

@@ -40,6 +40,11 @@
   &__out-stock {
     color: $gray_main;
   }
+  &__price {
+    span {
+      border-bottom: 1px dashed grey;
+    }
+  }
 }
 
 ::v-deep .ProductSizeSelectorColorCell {
@@ -55,4 +60,4 @@
     background: $green;
     width: 26px;
   }
-}
+}

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

@@ -120,7 +120,9 @@
             </span>
           </slot>
           <template slot="popover">
-            <pricing-discounts-table :prices="layerPrintPricing" />
+            <pricing-discounts-table
+              :prices="layerPrintPricing"
+              :with-gst="priceIncludeGST" />
           </template>
         </v-popover>
       </td>
@@ -156,21 +158,22 @@ import WizardTextOrLogoForm from './../../wizard_print_text_or_logo/wizard_text_
 
 export default {
   name: 'WizardPrintLayer',
-  mixins: [printLayerMixin],
+  filters: {
+    pricingRange
+  },
   components: {
     PricingDiscountsTable,
     WizardTextOrLogoForm
   },
-  filters: {
-    pricingRange
-  },
+  mixins: [printLayerMixin],
   props: {
     editable: {
       type: Boolean
     }
   },
   computed: {
-    ...mapGetters(['currency'])
+    ...mapGetters(['currency']),
+    ...mapGetters('product', ['priceIncludeGST'])
   }
 };
 </script>

package/components/products/children_categories/children-categories.vue

@@ -7,27 +7,35 @@
       <a
         :href="generateProductsLink($route, { category }, true)"
         class="CategoryCard__link">
-        <div class="CategoryCard__image-wrapper">
+        <span
+          v-if="visibleImages"
+          class="CategoryCard__image-wrapper">
           <img
             v-if="category.image"
             :src="category.image.medium"
             :alt="category.name"
             class="CategoryCard__image" />
-        </div>
-        <div class="CategoryCard__name">
+        </span>
+        <span class="CategoryCard__name">
           {{ category.name }}
-        </div>
+        </span>
       </a>
     </div>
   </div>
 </template>
-  
+
 <script>
 import { mapGetters } from 'vuex';
 import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
-  
+
 export default {
   name: 'ChildrenCategories',
+  props: {
+    visibleImages: {
+      type: Boolean,
+      default: true
+    }
+  },
   computed: {
     ...mapGetters('products', ['childrenCategories'])
   },
@@ -40,4 +48,3 @@ export default {
 <style lang="scss" scoped>
 @import 'children-categories';
 </style>
-  

package/components/products/products_aside/products-aside.vue

@@ -23,12 +23,16 @@
           :has-selected-icon="hasSelectedIcon"
           :selected-icon-circle="selectedIconCircle" />
       </div>
-      <div class="ProductsAside__item">
+      <div
+        v-if="hasProductionTime"
+        class="ProductsAside__item">
         <products-production-time
           :has-selected-icon="hasSelectedIcon"
           :selected-icon-circle="selectedIconCircle" />
       </div>
-      <div class="ProductsAside__item">
+      <div
+        v-if="hasMinimumQty"
+        class="ProductsAside__item">
         <products-minimum-qty
           :has-selected-icon="hasSelectedIcon"
           :selected-icon-circle="selectedIconCircle" />
@@ -93,6 +97,14 @@ export default {
     hasProductTypes: {
       type: Boolean,
       default: false
+    },
+    hasProductionTime: {
+      type: Boolean,
+      default: true
+    },
+    hasMinimumQty: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

package/components/static_page/static-page.scss

@@ -8,4 +8,18 @@
     overflow: hidden;
     @import "@lancom/shared/assets/scss/normalize";
   }
-}
+}
+
+.post-full-image {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  margin: 25px 0 50px;
+  border-radius: 3px;
+  img {
+    max-width: 1040px;
+    width: 100%;
+    height: auto;
+  }
+}

package/components/static_page/static-page.vue

@@ -5,6 +5,13 @@
       class="StaticPage__title lc_h1">
       {{ item.title }}
     </h1>
+    <figure
+      v-if="item.image"
+      class="post-full-image">
+      <img
+        :src="item.image.origin"
+        :alt="item.title" />
+    </figure>
     <div
       class="StaticPage__content"
       v-html="item.text"></div>

package/mixins/layouts/products.js

@@ -11,6 +11,7 @@ export default {
   async fetch() {
     await this.loadProducts();
 
+    console.log('fetchChildrenCategories: ', this.page, this.currentCategory);
     if (this.page === 1) {
       await this.fetchChildrenCategories(this.currentCategory);
     }
@@ -277,9 +278,9 @@ export default {
       text = this.currentCategory ? text.replace(/{{categoryName}}/g, this.currentCategory.name) : text;
       return text;
     },
-    async openAside() {
+    async openAside(props) {
       const ProductsAside = await import('@/components/products/products_aside/products-aside');
-      this.$aside.show(ProductsAside.default);
+      this.$aside.show(ProductsAside.default, {}, { props });
     }
   }
 };

package/mixins/multipack.mixin.js

@@ -0,0 +1,61 @@
+import { mapMutations, mapGetters } from 'vuex';
+import { inRange } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  computed: {
+    ...mapGetters('product', ['simpleProducts']),
+    ...mapGetters(['currency'])
+  },
+  methods: {
+    ...mapMutations('product', ['setSimpleProductAmount', 'clearSimpleProductsAmount']),
+    buyMultipack(color, qty) {
+      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' }
+      ], color, qty);
+      if (leftQty > 0) {
+        this.clearSimpleProductsAmount();
+        const sizes = [
+          { size: 'L' },
+          { size: 'XL' },
+          { size: 'M' },
+          ...this.simpleProducts
+            .filter(sp => sp.color?._id === color._id)
+            .filter(simpleProduct => !['L', 'XL', 'M'].includes(simpleProduct.size?.shortName))
+            .map(simpleProduct => ({ size: simpleProduct.size?.shortName }))
+        ];
+        const repeatLeftQty = this.addSimpleProducts(sizes, color, qty);
+        if (repeatLeftQty > 0) {
+          this.clearSimpleProductsAmount();
+          this.$toastr.e('Stock unavailable');
+        }
+        return repeatLeftQty;
+      }
+
+      return 0;
+    },
+    addSimpleProducts(sizes, color, qty) {
+      let leftQty = qty;
+      sizes.forEach(s => {
+        const simpleProduct = this.simpleProducts
+          .filter(sp => sp.color?._id === color._id)
+          .find(simpleProduct => simpleProduct.size?.shortName === s.size);
+        if (simpleProduct) {
+          const calculatedQty = s.percent ? +(s.percent * qty).toFixed(0) : leftQty;
+          const amount = inRange(calculatedQty, 0, simpleProduct.quantityStock || 0);
+          leftQty -= amount;
+          this.setSimpleProductAmount({
+            colorId: simpleProduct.color._id,
+            sizeId: simpleProduct.size._id,
+            amount,
+            currency: this.currency
+          });
+        }
+      });
+      return leftQty;
+    }
+  }
+};

package/package.json

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

package/plugins/headers.js

@@ -1,4 +1,5 @@
 module.exports = function (req, res, next) {
   res.removeHeader('Expect-CT');
+  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
   next();
 };

package/plugins/save-state.js

@@ -22,9 +22,13 @@ export function saveStatePlugin(store) {
   });
 }
 
-export function loadState() {
+export function loadState(query) {
   const savedState = localStorage.getItem(STATE_STORAGE_KEY);
-  return savedState && JSON.parse(savedState);
+  const state = savedState && JSON.parse(savedState);
+  if (query?.price && state?.product) {
+    delete state.product.priceIncludeGST;
+  }
+  return state;
 }
 
 export function saveState(store) {