@lancom/shared 0.0.266 → 0.0.267

package/components/order/order_prints_groups/order-prints-groups.vue

@@ -51,7 +51,7 @@
               <td>{{ total.price | price(currency) }}</td>
             </tr>
             <tr v-if="totalsWithGst">
-              <td>Total inc. {{ taxName }}</td>
+              <td>Total inc. GST</td>
               <td colspan="3"></td>
               <td>{{ total.amount }}</td>
               <td></td>
@@ -65,7 +65,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
 import { COLORS_IMAGES_TYPES } from '@lancom/shared/assets/js/constants/colors';
 import { groupProductsByPrints } from '@lancom/shared/assets/js/utils/products-grouping';
@@ -95,7 +94,6 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['taxName']),
     printsGroups() {
       return groupProductsByPrints(this.order.products, this.order.price.products);
     },

package/components/order/order_products_groups/order-products-groups.vue

@@ -40,7 +40,7 @@
               <td>{{ total.price | price(currency) }}</td>
             </tr>
             <tr v-if="totalsWithGst">
-              <td>Total inc. {{ taxName }}</td>
+              <td>Total inc. GST</td>
               <td colspan="3"></td>
               <td>{{ total.amount }}</td>
               <td>{{ total.prints.amount }}</td>
@@ -59,7 +59,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import { print, price } from '@lancom/shared/assets/js/utils/filters';
 import { groupProductsByDesign } from '@lancom/shared/assets/js/utils/products-grouping';
 import OrderProductsGroup from './order_products_group/order-products-group';
@@ -92,7 +91,6 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['taxName']),
     productsGroups() {
       return groupProductsByDesign(this.order.products, this.order.price.products);
     },

package/components/order/order_refund_view/order-refund-view.vue

@@ -88,13 +88,13 @@
             'OrderRefundView__totals--paid': isPaid
           }">
           <div class="lc_regular16">
-            Total ex {{ taxName }}: <b>{{ refund.total | price(currency) }}</b>
+            Total ex GST: <b>{{ refund.total | price(currency) }}</b>
           </div>
           <div class="lc_regular16">
-            {{ taxName }}: <b>{{ refund.totalGST - refund.total | price(currency) }}</b>
+            GST: <b>{{ refund.totalGST - refund.total | price(currency) }}</b>
           </div>
           <div class="lc_regular16">
-            Total inc {{ taxName }}: <b>{{ refund.totalGST | price(currency) }}</b>
+            Total inc GST: <b>{{ refund.totalGST | price(currency) }}</b>
           </div>
         </div>
       </div>
@@ -103,7 +103,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import OrderViewMixin from './../order_view/order-view.mixin';
 import OrderViewProduct from './../order_view/order_view_product/order-view-product';
 
@@ -124,7 +123,6 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['taxName']),
     isPaid() {
       return this.refund.status === 'refunded';
     },

package/components/order/order_setup_groups/order-setup-groups.vue

@@ -12,8 +12,8 @@
               <th>SKU</th>
               <th>Quantity</th>
               <th>Price</th>
-              <th>{{ taxName }}</th>
-              <th>Total Inc. {{ taxName }}</th>
+              <th>GST</th>
+              <th>Total Inc. GST</th>
             </tr>
           </thead>
           <tbody class="centered">
@@ -46,7 +46,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import { COLORS_IMAGES_TYPES } from '@lancom/shared/assets/js/constants/colors';
 import { groupProductsByPrints } from '@lancom/shared/assets/js/utils/products-grouping';
 import { price, print } from '@lancom/shared/assets/js/utils/filters';
@@ -68,7 +67,6 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['taxName']),
     printsGroups() {
       return groupProductsByPrints(this.order.products, this.order.price.products);
     },

package/components/order/order_sku_groups/order-sku-groups.vue

@@ -49,7 +49,7 @@
               </td>
             </tr>
             <tr v-if="totalsWithGst">
-              <td> Total inc. {{ taxName }}</td>
+              <td> Total inc. GST</td>
               <td colspan="3"></td>
               <td>{{ total.amount }}</td>
               <td></td>
@@ -68,7 +68,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import { groupProductsBySKU } from '@lancom/shared/assets/js/utils/products-grouping';
 import { price } from '@lancom/shared/assets/js/utils/filters';
 import { copyToClipboard } from '@lancom/shared/assets/js/utils/copy-to-clipboard';
@@ -97,7 +96,6 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['taxName']),
     featureGroups() {
       return groupProductsBySKU(this.order.products, this.order.price.products);
     },

package/components/order/order_view/order-view.vue

@@ -127,10 +127,10 @@
               Shipping Total: <b>{{ model.shippingTotal | price(order.currency) }}</b>
             </div>
             <div class="lc_regular16">
-              Total ex {{ taxName }}: <b>{{ (model.total + couponTotal) | price(order.currency) }}</b>
+              Total ex GST: <b>{{ (model.total + couponTotal) | price(order.currency) }}</b>
             </div>
             <div class="lc_regular16">
-              {{ taxName }}: <b>{{ model.totalGST - model.total | price(order.currency) }}</b>
+              GST: <b>{{ model.totalGST - model.total | price(order.currency) }}</b>
             </div>
             <div
               v-if="!invoice && order.couponCode"
@@ -138,7 +138,7 @@
               Coupon: <b>{{ couponTotal | price(order.currency) }}</b>
             </div>
             <div class="lc_regular16">
-              Total inc {{ taxName }}: <b>{{ model.totalGST | price(order.currency) }}</b>
+              Total inc GST: <b>{{ model.totalGST | price(order.currency) }}</b>
             </div>
             <div class="lc_regular16">
               {{ isPaid ? 'Paid' : 'Pending Payment' }}: <b>{{ model.totalGST | price(order.currency) }}</b>
@@ -175,10 +175,10 @@
             Shipping Total: <b>{{ model.shippingTotal | price(order.currency) }}</b>
           </div>
           <div class="lc_regular16">
-            Total ex {{ taxName }}: <b>{{ (model.total + couponTotal) | price(order.currency) }}</b>
+            Total ex GST: <b>{{ (model.total + couponTotal) | price(order.currency) }}</b>
           </div>
           <div class="lc_regular16">
-            {{ taxName }}: <b>{{ model.totalGST - model.total | price(order.currency) }}</b>
+            GST: <b>{{ model.totalGST - model.total | price(order.currency) }}</b>
           </div>
           <div
             v-if="!invoice && order.couponCode"
@@ -186,7 +186,7 @@
             Coupon: <b>{{ couponTotal | price(order.currency) }}</b>
           </div>
           <div class="lc_regular16">
-            Total inc {{ taxName }}: <b>{{ model.totalGST | price(order.currency) }}</b>
+            Total inc GST: <b>{{ model.totalGST | price(order.currency) }}</b>
           </div>
           <div class="lc_regular16">
             {{ isPaid ? 'Paid' : 'Pending Payment' }}: <b>{{ model.totalGST | price(order.currency) }}</b>
@@ -198,7 +198,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import OrderViewMixin from './order-view.mixin';
 import OrderViewProduct from './order_view_product/order-view-product';
 
@@ -213,9 +212,6 @@ export default {
       type: Boolean,
       default: true
     }
-  },
-  computed: {
-    ...mapGetters(['taxName'])
   }
 };
 </script>

package/components/pricing/pricing_digital_printing/pricing-digital-printing.vue

@@ -205,7 +205,7 @@
                 v-if="isSelectedPrint"
                 class="form-row">
                 <span class="PricingMainSection__section-content-label">
-                  Inclusive of {{ taxName }}:
+                  Inclusive of GST:
                 </span>
                 <span class="PricingMainSection__section-content-value">
                   {{ productPricing.tax.totalPrice | price(currency) }}
@@ -225,7 +225,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import { PRODUCT_TYPES, PRODUCT_TYPES_LIST } from '@lancom/shared/assets/js/constants/product';
 import productsPrice from '@lancom/shared/mixins/products-price';
 import Range from '@lancom/shared/components/common/range/range';
@@ -255,7 +254,6 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['taxName']),
     productEditorLink() {
       return `/${this.product.SKU}/${this.product.alias}/editor`;
     },

package/components/pricing/pricing_example/pricing-example.vue

@@ -63,7 +63,7 @@
                         {{ productPricing.totalPrice | price(currency) }}
                       </div>
                       <div class="PricingExample__example-tax">
-                        Inclusive of {{ taxName }}: {{ productPricing.tax.totalPrice | price(currency) }}
+                        Inclusive of GST: {{ productPricing.tax.totalPrice | price(currency) }}
                       </div>
                       <div class="mt-10">
                         + Delivery
@@ -139,7 +139,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'country', 'taxName']),
+    ...mapGetters(['shop']),
     printsPricing() {
       return this.productPricing?.products[this.product._id]?.prints.prints || [];
     }
@@ -152,7 +152,7 @@ export default {
       const prints = this.generateSidesPrints();
       const layers = prints.map(({ printType, printSize, printArea }) => ({ printType: printType?._id, printSize: printSize?._id, printArea: printArea?._id }));
       const entities = getProductsForCalculatePricing(this.product, [this.simpleProduct], layers, true, true);
-      this.productPricing = await api.calculateProductPrice({ entities, country: this.country?._id }, this.shop._id);
+      this.productPricing = await api.calculateProductPrice({ entities }, this.shop._id);
     },
     generateSidesPrints() {
       return this.sides

package/components/pricing/pricing_how_we_calculate/pricing-how-we-calculate.vue

@@ -76,7 +76,7 @@
               Your Total Price
             </div>
             <div class="PricingHowWeCalculate__entity-description">
-              (inclusive of {{ taxName }})
+              (inclusive of GST)
             </div>
           </div>
         </div>
@@ -86,13 +86,8 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-
 export default {
-  name: 'PricingHowWeCalculate',
-  computed: {
-    ...mapGetters(['taxName'])
-  }
+  name: 'PricingHowWeCalculate'
 };
 </script>
 

package/components/pricing/pricing_products_calculator/pricing_product_calculator/pricing-product-calculator.vue

@@ -216,7 +216,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'country']),
+    ...mapGetters(['shop']),
     maxScreenPrintColors() {
       const printTypes = this.product.printTypes.filter(printType => printType.type === 'screen print');
       return Math.max(...printTypes.map(printType => printType.colorsQuantity));
@@ -262,7 +262,7 @@ export default {
           const prints = this.generateSidesPrints(type);
           const layers = prints.map(({ printType, printSize, printArea }) => ({ printType: printType?._id, printSize: printSize?._id, printArea: printArea?._id }));
           const entities = getProductsForCalculatePricing(this.product, [this.simpleProduct], layers, true, true);
-          const pricing = await api.calculateProductPrice({ entities, postcode: this.postcode, country: this.country?._id }, this.shop._id);
+          const pricing = await api.calculateProductPrice({ entities, postcode: this.postcode }, this.shop._id);
           return { pricing, prints, type };
         })
       );

package/components/pricing/pricing_screen_printing/pricing-screen-printing.vue

@@ -205,7 +205,7 @@
                 v-if="isSelectedPrint"
                 class="form-row">
                 <span class="PricingScreenPrintSection__section-content-label">
-                  Inclusive of {{ taxName }}:
+                  Inclusive of GST:
                 </span>
                 <span class="PricingScreenPrintSection__section-content-value">
                   {{ productPricing.tax.totalPrice | price(currency) }}
@@ -226,7 +226,6 @@
 
 <script>
 import Multiselect from 'vue-multiselect';
-import { mapGetters } from 'vuex';
 import { PRODUCT_TYPES, PRODUCT_TYPES_LIST } from '@lancom/shared/assets/js/constants/product';
 import productsPrice from '@lancom/shared/mixins/products-price';
 import Range from '@lancom/shared/components/common/range/range';
@@ -286,7 +285,6 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['taxName']),
     productEditorLink() {
       return `/${this.product.SKU}/${this.product.alias}/editor`;
     },

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

@@ -15,35 +15,37 @@
     ::v-deep .slick-list {
       min-height: 205px;
     }
-    ::v-deep .slick-arrow.slick-prev,
-    ::v-deep .slick-arrow.slick-next {
+
+    ::v-deep .slick-arrow {
       position: absolute;
-      bottom: 25px;
-      right: 0;
-      background-color: black;
-      border: 1px solid white;
-      background-image: url(./../../../static/icons/arrow-left.svg);
+      color: white;
+      top: 120px;
+      background-color: $gray;
+      background-image: url(./../../../static/icons/arrow-right.svg);
       background-position: center;
       background-repeat: no-repeat;
-      background-size: 15px 15px;
-      width: 41px;
-      height: 41px;
+      background-size: 25px 25px;
+      width: 31px;
+      height: 47px;
+      margin-top: -45px;
       text-indent: -9999px;
+      border: none;
       cursor: pointer;
       z-index: 2;
 
+      &.slick-prev {
+        left: 0;
+        transform: rotate(180deg);
+      }
+      &.slick-next {
+        right: 0;
+      }
       &:hover {
         box-shadow: 0 0 3px $grey_2;
       }
-    }
-    ::v-deep .slick-arrow.slick-prev {
-      transform: rotateZ(180deg);
-      left: 0;
-      right: auto;
-    }
-    ::v-deep .slick-arrow.slick-prev:focus,
-    ::v-deep .slick-arrow.slick-next:focus {
-      outline: none;
+      &:focus {
+        outline: none;
+      }
     }
   }
   &__items {
@@ -56,5 +58,13 @@
     height: 200px;
     max-width: 300px;
     flex-grow: 1;
+    &--active {
+      .elevation2 {
+        box-shadow: 0px 1px 5px $green !important;
+      }
+      ::v-deep .ProductMultipack__price {
+        background-color: $green !important;
+      }
+    }
   }
 }

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

@@ -4,11 +4,15 @@
       <div
         v-for="multipack in visibleMultipacks"
         :key="multipack._id"
-        class="ProductMultipacksCarousel__item">
+        class="ProductMultipacksCarousel__item"
+        :class="{
+          'ProductMultipacksCarousel__item--active': multipack === selectedMultipack
+        }">
         <product-multipack
           :multipack="multipack"
           :simple-products="simpleProducts"
-          class="elevation2" />
+          class="elevation2"
+          @selected="toggleMultipack(multipack)" />
       </div>
     </div>
     <button
@@ -27,6 +31,8 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex';
+import { inRange } from '@lancom/shared/assets/js/utils/filters';
 import ProductMultipack from './product_multipack/product-multipack';
 
 export default {
@@ -36,7 +42,8 @@ export default {
   },
   data() {
     return {
-      thumbsPage: 0
+      thumbsPage: 0,
+      selectedMultipack: null
     };
   },
   props: {
@@ -65,6 +72,38 @@ export default {
     }
   },
   methods: {
+    toggleMultipack(multipack) {
+      this.selectedMultipack = this.selectedMultipack === multipack ? null : multipack;
+      this.clearSimpleProductsAmount();
+      if (this.selectedMultipack) {
+        this.buyMultipack()
+      }
+    },
+    ...mapMutations('product', ['setSimpleProductAmount', 'clearSimpleProductsAmount']),
+    buyMultipack() {
+      const sizes = [
+        { size: 'S', percent: 0.15 },
+        { size: 'M', percent: 0.2 },
+        { size: 'XL', percent: 0.3 },
+        { size: '2XL', percent: 0.05 },
+        { size: 'L' }
+      ];
+      let leftQty = this.selectedMultipack.qty;
+      sizes.forEach(s => {
+        const simpleProduct = this.simpleProducts.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);
+          leftQty -= amount;
+          this.setSimpleProductAmount({
+            colorId: simpleProduct.color._id,
+            sizeId: simpleProduct.size._id,
+            amount
+          });
+        }
+      });
+      
+    },
     goToPrevPage() {
       this.thumbsPage = Math.max(0, this.thumbsPage - 1);
     },

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

@@ -2,11 +2,21 @@
 
 .ProductMultipack {
   &__price {
-    padding: 15px;
+    padding: 10px;
     text-align: center;
     font-size: 14px;
     font-weight: bold;
     background-color: $gray;
+    span {
+      text-align: center;
+      padding: 6px;
+      background-color: $orange;
+      color: $white;
+      display: inline-block;
+      font-weight: bold;
+      font-size: 15px;
+      margin-left: 14px;
+    }
   }
   &__image {
     position: absolute;
@@ -16,28 +26,18 @@
     bottom: 0;
     background-position: left top;
     background-repeat: no-repeat;
-    background-size: contain;
+    background-size: cover;
   }
   &__banner {
     position: relative;
     height: 140px;
     &-info {
       position: absolute;
-      top: 20px;
-      right: 10px;
+      top: 0px;
+      right: 0px;
       display: flex;
       flex-direction: column;
       align-items: end;
-      &-item span {
-        margin-bottom: 10px;
-        text-align: center;
-        padding: 6px;
-        background-color: $orange;
-        color: $white;
-        display: inline-block;
-        font-weight: bold;
-        font-size: 15px;
-      }
     }
   }
 }

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

@@ -1,12 +1,13 @@
 <template>
   <div
     :id="`product-multipack-${multipack._id}`"
-    class="ProductMultipack__wrapper">
+    class="ProductMultipack__wrapper"
+    @click="buyMultipack()">
     <div class="ProductMultipack__banner">
       <div
         class="ProductMultipack__image"
         :style="{
-          'background-image': multipack.image ? `url('${multipack.image.small}'` : null
+          'background-image': bannerImage ? `url('${bannerImage}'` : null
         }">
       </div>
       <div class="ProductMultipack__banner-info">
@@ -14,27 +15,22 @@
           <btn
             style="padding: 10px; height: 35px; margin-bottom: 10px;"
             btn-class="green"
-            btn-label="BUY"
+            :btn-label="`BUY ${multipack.qty}`"
             size="sm"
             @onclick="buyMultipack()" />
         </div>
-        <div class="ProductMultipack__banner-info-item">
-          <span>{{ multipack.qty }}</span>
-        </div>
-        <div class="ProductMultipack__banner-info-item">
-          <span>{{ totalPrice | priceWithTax(pricingSettings, currency) }}</span>
-        </div>
       </div>
     </div>
     <div class="ProductMultipack__price">
-      Only {{ oneItemPrice | priceWithTax(pricingSettings, currency) }} each
+      {{ oneItemPrice | priceWithTax(pricingSettings, currency) }} each 
+      <span>{{ totalPrice | priceWithTax(pricingSettings, currency) }}</span>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex';
-import { priceWithTax, inRange } from '@lancom/shared/assets/js/utils/filters';
+import { mapGetters } from 'vuex';
+import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
 
 export default {
   name: 'LancomProductMultipack',
@@ -53,6 +49,10 @@ export default {
   },
   computed: {
     ...mapGetters(['pricingSettings', 'currency']),
+    bannerImage() {
+      const banner = this.multipack.banner?.editorImage || this.multipack.banner;
+      return banner?.origin;
+    },
     simpleProduct() {
       return (this.simpleProducts || []).find(sp => sp.SKU === this.multipack.SKU);
     },
@@ -64,13 +64,8 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('product', ['setSimpleProductAmount']),
     buyMultipack() {
-      this.setSimpleProductAmount({
-        colorId: this.simpleProduct.color._id,
-        sizeId: this.simpleProduct.size._id,
-        amount: inRange(this.multipack.qty, 0, this.simpleProduct.quantityStock || 999)
-      });
+      this.$emit('selected', this.multipack);
     }
   }
 };

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

@@ -10,12 +10,12 @@
         {{ product[minPriceAttr] | tax(gstTax) | price(currency) }}
         <span
           v-if="visiblePriceInfo"
-          class="lc_regular11 lc_bold">inc. {{ taxName }}</span>
+          class="lc_regular11 lc_bold">inc. GST</span>
       </div>
       <div
         v-if="withoutGst"
         :class="withGst ? 'lc_regular11' : 'lc_h4'">
-        {{ prePriceText }} {{ product[minPriceAttr] | price(currency) }} + {{ taxName }}
+        {{ prePriceText }} {{ product[minPriceAttr] | price(currency) }} + GST
       </div>
     </div>
     <div
@@ -27,12 +27,12 @@
         {{ product[minPriceAttr] | tax(gstTax) | price(currency) }} {{ rangeDivider }} {{ product[maxPriceAttr] | tax(gstTax) | price(currency) }}
         <span
           v-if="visiblePriceInfo"
-          class="lc_regular11 lc_bold"> inc. {{ taxName }}</span>
+          class="lc_regular11 lc_bold"> inc. GST</span>
       </div>
       <div
         v-if="withoutGst"
         :class="withGst ? 'lc_regular11' : 'lc_h4'">
-        {{ prePriceText }} {{ product[minPriceAttr] | price(currency) }} {{ rangeDivider }} {{ product[maxPriceAttr] | price(currency) }} + {{ taxName }}
+        {{ prePriceText }} {{ product[minPriceAttr] | price(currency) }} {{ rangeDivider }} {{ product[maxPriceAttr] | price(currency) }} + GST
       </div>
     </div>
   </div>
@@ -84,8 +84,7 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'gstTax',
-      'taxName'
+      'gstTax'
     ])
   }
 };

package/components/product/product_prints_price_info/product-prints-price-info.vue

@@ -4,7 +4,7 @@
       <checkbox
         v-model="inclGST"
         :dark="true">
-        <div class="ml-5">Inc. {{ taxName }}</div>
+        <div class="ml-5">Inc. GST</div>
       </checkbox>
     </div>
     <tabs
@@ -88,7 +88,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'taxName']),
+    ...mapGetters(['shop']),
     ...mapGetters('product', ['priceIncludeGST']),
     ...mapGetters(['helpMessages']),
     hasPrintSurcharge() {