@lancom/shared 0.0.264 → 0.0.266

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. GST</td>
+              <td>Total inc. {{ taxName }}</td>
               <td colspan="3"></td>
               <td>{{ total.amount }}</td>
               <td></td>
@@ -65,6 +65,7 @@
 </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';
@@ -94,6 +95,7 @@ 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. GST</td>
+              <td>Total inc. {{ taxName }}</td>
               <td colspan="3"></td>
               <td>{{ total.amount }}</td>
               <td>{{ total.prints.amount }}</td>
@@ -59,6 +59,7 @@
 </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';
@@ -91,6 +92,7 @@ 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 GST: <b>{{ refund.total | price(currency) }}</b>
+            Total ex {{ taxName }}: <b>{{ refund.total | price(currency) }}</b>
           </div>
           <div class="lc_regular16">
-            GST: <b>{{ refund.totalGST - refund.total | price(currency) }}</b>
+            {{ taxName }}: <b>{{ refund.totalGST - refund.total | price(currency) }}</b>
           </div>
           <div class="lc_regular16">
-            Total inc GST: <b>{{ refund.totalGST | price(currency) }}</b>
+            Total inc {{ taxName }}: <b>{{ refund.totalGST | price(currency) }}</b>
           </div>
         </div>
       </div>
@@ -103,6 +103,7 @@
 </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';
 
@@ -123,6 +124,7 @@ 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>GST</th>
-              <th>Total Inc. GST</th>
+              <th>{{ taxName }}</th>
+              <th>Total Inc. {{ taxName }}</th>
             </tr>
           </thead>
           <tbody class="centered">
@@ -46,6 +46,7 @@
 </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';
@@ -67,6 +68,7 @@ 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. GST</td>
+              <td> Total inc. {{ taxName }}</td>
               <td colspan="3"></td>
               <td>{{ total.amount }}</td>
               <td></td>
@@ -68,6 +68,7 @@
 </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';
@@ -96,6 +97,7 @@ 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 GST: <b>{{ (model.total + couponTotal) | price(order.currency) }}</b>
+              Total ex {{ taxName }}: <b>{{ (model.total + couponTotal) | price(order.currency) }}</b>
             </div>
             <div class="lc_regular16">
-              GST: <b>{{ model.totalGST - model.total | price(order.currency) }}</b>
+              {{ taxName }}: <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 GST: <b>{{ model.totalGST | price(order.currency) }}</b>
+              Total inc {{ taxName }}: <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 GST: <b>{{ (model.total + couponTotal) | price(order.currency) }}</b>
+            Total ex {{ taxName }}: <b>{{ (model.total + couponTotal) | price(order.currency) }}</b>
           </div>
           <div class="lc_regular16">
-            GST: <b>{{ model.totalGST - model.total | price(order.currency) }}</b>
+            {{ taxName }}: <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 GST: <b>{{ model.totalGST | price(order.currency) }}</b>
+            Total inc {{ taxName }}: <b>{{ model.totalGST | price(order.currency) }}</b>
           </div>
           <div class="lc_regular16">
             {{ isPaid ? 'Paid' : 'Pending Payment' }}: <b>{{ model.totalGST | price(order.currency) }}</b>
@@ -198,6 +198,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import OrderViewMixin from './order-view.mixin';
 import OrderViewProduct from './order_view_product/order-view-product';
 
@@ -212,6 +213,9 @@ 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 GST:
+                  Inclusive of {{ taxName }}:
                 </span>
                 <span class="PricingMainSection__section-content-value">
                   {{ productPricing.tax.totalPrice | price(currency) }}
@@ -225,6 +225,7 @@
 </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';
@@ -254,6 +255,7 @@ 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 GST: {{ productPricing.tax.totalPrice | price(currency) }}
+                        Inclusive of {{ taxName }}: {{ productPricing.tax.totalPrice | price(currency) }}
                       </div>
                       <div class="mt-10">
                         + Delivery
@@ -139,7 +139,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop']),
+    ...mapGetters(['shop', 'country', 'taxName']),
     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 }, this.shop._id);
+      this.productPricing = await api.calculateProductPrice({ entities, country: this.country?._id }, 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 GST)
+              (inclusive of {{ taxName }})
             </div>
           </div>
         </div>
@@ -86,8 +86,13 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
-  name: 'PricingHowWeCalculate'
+  name: 'PricingHowWeCalculate',
+  computed: {
+    ...mapGetters(['taxName'])
+  }
 };
 </script>
 

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

@@ -216,7 +216,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop']),
+    ...mapGetters(['shop', 'country']),
     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 }, this.shop._id);
+          const pricing = await api.calculateProductPrice({ entities, postcode: this.postcode, country: this.country?._id }, 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 GST:
+                  Inclusive of {{ taxName }}:
                 </span>
                 <span class="PricingScreenPrintSection__section-content-value">
                   {{ productPricing.tax.totalPrice | price(currency) }}
@@ -226,6 +226,7 @@
 
 <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';
@@ -285,6 +286,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['taxName']),
     productEditorLink() {
       return `/${this.product.SKU}/${this.product.alias}/editor`;
     },

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

@@ -0,0 +1,60 @@
+@import "@/assets/scss/variables";
+
+.ProductMultipacksCarousel {
+  &__wrapper {
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    overflow-x: hidden;
+    display: block;
+    // align-items: center;
+
+    ::v-deep .slick-dots {
+      display: none !important;
+    }
+    ::v-deep .slick-list {
+      min-height: 205px;
+    }
+    ::v-deep .slick-arrow.slick-prev,
+    ::v-deep .slick-arrow.slick-next {
+      position: absolute;
+      bottom: 25px;
+      right: 0;
+      background-color: black;
+      border: 1px solid white;
+      background-image: url(./../../../static/icons/arrow-left.svg);
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 15px 15px;
+      width: 41px;
+      height: 41px;
+      text-indent: -9999px;
+      cursor: pointer;
+      z-index: 2;
+
+      &: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;
+    }
+  }
+  &__items {
+    display: flex;
+    justify-content: center;
+  }
+  &__item {
+    padding: 10px;
+    width: 180px;
+    height: 200px;
+    max-width: 300px;
+    flex-grow: 1;
+  }
+}

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

@@ -0,0 +1,80 @@
+<template>
+  <div class="ProductMultipacksCarousel__wrapper">
+    <div class="ProductMultipacksCarousel__items">
+      <div
+        v-for="multipack in visibleMultipacks"
+        :key="multipack._id"
+        class="ProductMultipacksCarousel__item">
+        <product-multipack
+          :multipack="multipack"
+          :simple-products="simpleProducts"
+          class="elevation2" />
+      </div>
+    </div>
+    <button
+      type="button"
+      class="slick-arrow slick-prev slick-disabled"
+      @click="goToPrevPage()">
+      Previous
+    </button>
+    <button
+      type="button"
+      class="slick-arrow slick-next"
+      @click="goToNextPage()">
+      Next
+    </button>
+  </div>
+</template>
+
+<script>
+import ProductMultipack from './product_multipack/product-multipack';
+
+export default {
+  name: 'LancomProductMultipacks',
+  components: {
+    ProductMultipack
+  },
+  data() {
+    return {
+      thumbsPage: 0
+    };
+  },
+  props: {
+    product: {
+      type: Array,
+      required: true
+    },
+    simpleProducts: {
+      type: Array,
+      required: true
+    },
+    slidesPerRow: {
+      type: Number,
+      default: 3
+    }
+  },
+  computed: {
+    multipacks() {
+      return this.product.multipacks || [];
+    },
+    visibleFrom() {
+      return this.thumbsPage * this.slidesPerRow;
+    },
+    visibleMultipacks() {
+      return this.multipacks.slice(this.visibleFrom, this.visibleFrom + this.slidesPerRow);
+    }
+  },
+  methods: {
+    goToPrevPage() {
+      this.thumbsPage = Math.max(0, this.thumbsPage - 1);
+    },
+    goToNextPage() {
+      this.thumbsPage = Math.min(Math.ceil((this.multipacks.length) / this.slidesPerRow) - 1, this.thumbsPage + 1);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-multipacks-carousel';
+</style>

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

@@ -0,0 +1,43 @@
+@import "@/assets/scss/variables";
+
+.ProductMultipack {
+  &__price {
+    padding: 15px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    background-color: $gray;
+  }
+  &__image {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-position: left top;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+  &__banner {
+    position: relative;
+    height: 140px;
+    &-info {
+      position: absolute;
+      top: 20px;
+      right: 10px;
+      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

@@ -0,0 +1,81 @@
+<template>
+  <div
+    :id="`product-multipack-${multipack._id}`"
+    class="ProductMultipack__wrapper">
+    <div class="ProductMultipack__banner">
+      <div
+        class="ProductMultipack__image"
+        :style="{
+          'background-image': multipack.image ? `url('${multipack.image.small}'` : null
+        }">
+      </div>
+      <div class="ProductMultipack__banner-info">
+        <div class="ProductMultipack__banner-info-item">
+          <btn
+            style="padding: 10px; height: 35px; margin-bottom: 10px;"
+            btn-class="green"
+            btn-label="BUY"
+            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
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex';
+import { priceWithTax, inRange } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'LancomProductMultipack',
+  filters: {
+    priceWithTax
+  },
+  props: {
+    multipack: {
+      type: Object,
+      required: true
+    },
+    simpleProducts: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters(['pricingSettings', 'currency']),
+    simpleProduct() {
+      return (this.simpleProducts || []).find(sp => sp.SKU === this.multipack.SKU);
+    },
+    totalPrice() {
+      return this.oneItemPrice * this.multipack.qty;
+    },
+    oneItemPrice() {
+      return (this.simpleProduct?.pricing || []).find(p => p.min === this.multipack.qty)?.price || 0;
+    }
+  },
+  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)
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-multipack.scss';
+</style>

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

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. GST</div>
+        <div class="ml-5">Inc. {{ taxName }}</div>
       </checkbox>
     </div>
     <tabs
@@ -88,7 +88,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop']),
+    ...mapGetters(['shop', 'taxName']),
     ...mapGetters('product', ['priceIncludeGST']),
     ...mapGetters(['helpMessages']),
     hasPrintSurcharge() {