@lancom/shared 0.0.267 → 0.0.269

package/components/editor/editor_product_details/editor-product-details.scss

@@ -47,4 +47,10 @@
       text-align: center;
     }
   }
+  &__available-warning {
+    background-color: $error;
+    color: $white;
+    padding: 10px;
+    margin-top: 10px;
+  }
 }

package/components/editor/editor_product_details/editor-product-details.vue

@@ -12,7 +12,7 @@
           <span
             v-if="defaultSimpleProduct && defaultSimpleProduct.pricing[0]"
             class="lc_regular16 lc_grey1">
-            From
+            From {{ currency.isoCode }}
             <v-popover
               ref="popover"
               trigger="hover"
@@ -61,8 +61,13 @@
         </div>
       </div>
     </div>
+    <div
+      v-if="!productAvailableInCurrentCountry"
+      class="EditorProductDetails__available-warning">
+      Product Not Available in {{ country.name }}
+    </div>
     <fragment
-      v-if="productDetailsLoaded">
+      v-if="productDetailsLoaded && productAvailableInCurrentCountry">
       <div class="EditorProductDetails__section">
         <product-colors-selector />
       </div>
@@ -112,8 +117,13 @@ export default {
       'layerThumbnails'
     ]),
     ...mapGetters([
-      'pricingSettings'
+      'pricingSettings',
+      'country'
     ]),
+    productAvailableInCurrentCountry() {
+      const { countries } = this.product;
+      return !(countries || []).length || countries.includes(this.country._id);
+    },
     productLink() {
       return generateProductLink(this.product);
     },

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -118,7 +118,8 @@ export default {
       'editableColor',
       'editableLayers',
       'selectedLayer',
-      'editorSize'
+      'editorSize',
+      'editModeSelectedLayer'
     ]),
     deleteButtonPosition() {
       return this.deleteButtonPos ? {
@@ -254,7 +255,15 @@ export default {
         this.saveLayersAsImageWithDebounce();
       });
       this.fabricHelper.on('selectLayer', this.setSelectedLayer);
-      this.fabricHelper.on('removeLayer', this.removeTemplateLayer);
+      this.fabricHelper.on('removeLayer', (layer) => {
+        setTimeout(() => {
+          if (!this.editModeSelectedLayer) {
+            this.removeTemplateLayer(layer);
+          } else if (!layer.copy) {
+            this.fabricHelper.dispatch('setField', { field: 'isEditMode', value: false });;
+          }
+        }, 100);
+      });
       this.fabricHelper.on('setDeleteButtonPosition', this.setDeleteButtonPosition);
       this.fabricHelper.on('outOfPrintArea', this.setOffsetWarningVisibility);
       // todo center to print area
@@ -265,6 +274,7 @@ export default {
       if (this.drawingInProcess) {
         return;
       }
+      console.log('redraw...');
       this.drawingInProcess = true;
       this.fabricHelper.clear();
       this.fabricHelper.addBoundingArea();

package/components/faq/faq.vue

@@ -111,7 +111,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@lancom/shared/assets/scss/variables";
+@import "@/assets/scss/variables";
 $types: delivery, general, other, printing, garments;
 .FAQ {
   &__wrapper {
@@ -218,7 +218,7 @@ $types: delivery, general, other, printing, garments;
     &-body {
       padding: 6px 30px 24px 30px;
       line-height: 27px;
-      color: $gray;
+      color: $grey_1;
       overflow: hidden;
       @import "@lancom/shared/assets/scss/normalize";
     }

package/components/modals/order_modal/order-modal.vue

@@ -127,11 +127,11 @@
             {{ errors[0] }}
           </span>
         </validation-provider>
-        <div class="form-row">
+        <div v-if="suburb" class="form-row">
           <input
             id="country"
             ref="country"
-            value="Only Australia"
+            :value="suburb.country"
             name="country"
             type="country"
             class="form-field filled labelless"
@@ -303,6 +303,9 @@ export default {
   mounted() {
     if (this.orderData) {
       this.form = {
+        state: null,
+        country: null,
+        postcode: null,
         city: this.orderData.city,
         phone: this.orderData.phone,
         addressLine1: this.orderData.addressLine1,
@@ -325,16 +328,27 @@ export default {
     ...mapActions('cart', [
       'calculateCartPrice'
     ]),
+    setAddressSuburb(suburb) {
+      this.$set(this.form, 'suburb', suburb);
+      if (suburb) {
+        this.$set(this.form, 'state', suburb.state);
+        this.$set(this.form, 'postcode', suburb.postcode);
+        this.$set(this.form, 'city', suburb.locality);
+        this.$set(this.form, 'country', suburb.country);
+      }
+    },
     handleSuburbChange(suburb) {
       this.form.suburb = suburb;
+      this.setAddressSuburb(suburb);
       this.setSuburb(suburb);
-      this.calculateCartPrice({ shop: this.shop });
+      this.calculateCartPrice({ shop: this.shop, country: this.country });
     },
     back() {
       this.switchModal('showCartModal');
     },
     async submit() {
       try {
+        debugger;
         this.processing = true;
         const recaptchaToken = await this.getRecaptcha('create_order');
         await this.createOrder({

package/components/order/order_price/order-price.vue

@@ -25,19 +25,20 @@
         <b>Delivery:</b> {{ price.shipping.totalPriceWithoutTax | price(currency) }} ({{ price.shipping.weight }})
       </div>
       <div class="lc_caption OrderPrice__row">
-        <b>Order amount ex GST:</b> {{ price.totalPriceWithoutTax | price(currency) }}
+        <b>Order amount ex {{ taxName }}:</b> {{ price.totalPriceWithoutTax | price(currency) }}
       </div>
       <div class="lc_caption OrderPrice__row">
-        <b>GST:</b> {{ price.tax.totalPrice | price(currency) }} ({{ price.tax.percent }})
+        <b>{{ taxName }}:</b> {{ price.tax.totalPrice | price(currency) }} ({{ price.tax.percent }})
       </div>
       <div class="lc_caption OrderPrice__row">
-        <b>Order amount inc GST:</b> {{ price.totalPrice | price(currency) }}
+        <b>Order amount inc {{ taxName }}:</b> {{ price.totalPrice | price(currency) }}
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import { groupProductsPrintsBySize } from '@lancom/shared/assets/js/utils/products-grouping';
 import { price, print } from '@lancom/shared/assets/js/utils/filters';
 
@@ -51,6 +52,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['taxName']),
     price() {
       return this.order.price;
     },

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_color_image/product-color-image.vue

@@ -2,8 +2,7 @@
   <div
     class="ProductColorImage"
     :class="{ zoomedIn }"
-    :style="style"
-    v-lazy:background-image="pattern">
+    :style="style">
   </div>
 </template>
 
@@ -32,7 +31,7 @@ export default {
       return this.color.pattern && staticLink(this.color.pattern);
     },
     style() {
-      return getColorBackgroundStyle(this.color, this.lazy);
+      return getColorBackgroundStyle(this.color);
     }
   }
 };

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() {

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

@@ -10,20 +10,21 @@
     right: 0;
     top: 41px;
     padding: 10px;
-    background-color: $black;
-    color: $white;
+    background-color: white;
+    border: 1px solid $medium_gray;
+    z-index: 999;
   }
   &__result-item {
     padding-bottom: 10px;
     margin-bottom: 10px;
-    border-bottom: 1px solid $gray_main;
+    border-bottom: 1px solid $medium_gray;
     &:last-child {
       border-bottom: none;
       margin-bottom: 0px;
     }
     ::v-deep {
       a {
-        color: $white;
+        color: $gray_main;
         font-size: 13px;
         text-decoration: none;
       }
@@ -33,24 +34,22 @@
       padding: 10px;
       text-align: center;
       display: block;
-      background-color: $white;
+      background-color: $black;
+      color: $white !important;
       &:hover {
-        background-color: $black;
-        color: $white;
+        background-color: $white;
+        color: $black !important;
       }
     }
   }
   &__input {
     input {
-      background-color: #535353;
-      border: none;
+      border-color: $medium_gray;
       border-radius: 0px;
-      color: $white;
       height: 41px;
       position: relative;
       z-index: 1;
       &::placeholder {
-        font-weight: 600;
         font-size: 14px;
         color: $grey_3;
       }
@@ -61,7 +60,6 @@
       right: 10px;
       font-size: 17px;
       pointer-events: none;
-      color: $white;
       &.icon-search {
         z-index: 2;
         pointer-events: all;

package/components/quotes/quote_request/quote-request.vue

@@ -354,7 +354,7 @@ export default {
           email: '',
           phone: '',
           suburb: null,
-          country: 'Australia'
+          country: null
         },
         expectedItemsQuantity: null,
         description: '',