@lancom/shared 0.0.442 → 0.0.444

package/components/checkout/cart/cart.mixin.js

@@ -49,6 +49,9 @@ export default {
     },
     isNotValidPrintsBigSizeQuantity() {
       return this.simpleProductsQuantity ? ((this.bigSizeSimpleProductsQuantity / this.simpleProductsQuantity * 100) > 50) : false;
+    },
+    hasClearanceProduct() {
+      return this.entities.some(entity => entity.product?.isClearance || entity.simpleProducts?.some(sp => sp.pricing?.some(p => p?.clearance)));
     }
   },
   watch: {

package/components/checkout/cart/cart.scss

@@ -18,8 +18,17 @@
     color: $error;
     font-size: 13px;
   }
+  &__clearance-checkbox {
+    padding-bottom: 10px;
+  }
+  &__clearance-text {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    margin-left: 10px;
+  }
   // &__total-info {
   //   position: sticky;
   //   top: 130px;
   // }
-}
+}

package/components/checkout/cart/cart.vue

@@ -41,9 +41,20 @@
           <div class="Cart__quantity-errors">
             <cart-quantity-errors />
           </div>
-          <div class="mt-10">
+
+          <div
+            v-if="hasClearanceProduct"
+            class="Cart__clearance-checkbox mt-10">
+            <checkbox v-model="clearanceAccepted">
+              <span class="Cart__clearance-text">Confirm clearance products are non-returnable.</span>
+            </checkbox>
+          </div>
+
+          <div
+            v-tooltip="isNotValidShipping ? 'To proceed, enter your postcode to calculate shipping' : ''"
+            class="mt-10">
             <btn
-              :btn-disabled="isNotValidShipping || isNotValidQuantity || cartPricingError || cartPricingCalculating"
+              :btn-disabled="isCheckoutDisabled"
               :btn-block="true"
               :to="'/checkout/order'"
               btn-class="green"
@@ -82,6 +93,7 @@ import { price } from '@lancom/shared/assets/js/utils/filters';
 import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
 import CartPriceInfo from '@lancom/shared/components/checkout/cart/cart_price_info/cart-price-info';
 import CartShipping from '@lancom/shared/components/checkout/cart/cart_shipping/cart-shipping';
+import Checkbox from '@lancom/shared/components/common/checkbox';
 
 export default {
   name: 'CheckoutCart',
@@ -91,15 +103,21 @@ export default {
     CartPriceInfo,
     CartQuantityErrors,
     CouponSelect,
-    CartShipping
+    CartShipping,
+    Checkbox
   },
   filters: { price },
   mixins: [CartMixin],
+  data() {
+    return {
+      clearanceAccepted: false
+    };
+  },
   computed: {
     ...mapGetters(['MESSAGES', 'SETTINGS', 'currency', 'country']),
-    ...mapGetters('cart', ['isEmpty','cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities', 'entitiesWithoutFreeProducts']),
+    ...mapGetters('cart', ['isEmpty', 'cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities', 'entitiesWithoutFreeProducts']),
     productsEntities() {
-      return this.entitiesWithoutFreeProducts.filter(e => !e.productsKit)
+      return this.entitiesWithoutFreeProducts.filter(e => !e.productsKit);
     },
     productsKitsEntities() {
       const entities = this.entitiesWithoutFreeProducts.filter(e => !!e.productsKit);
@@ -126,6 +144,9 @@ export default {
         this.setCoupon(coupon);
         this.calculateCartPrice({ shop: this.shop, country: this.country, currency: this.currency });
       }
+    },
+    isCheckoutDisabled() {
+      return this.isNotValidShipping || this.isNotValidQuantity || this.cartPricingError || this.cartPricingCalculating || (this.hasClearanceProduct && !this.clearanceAccepted);
     }
   },
   methods: {

package/components/checkout/cart/cart_entity/cart-entity.mixin.js

@@ -54,6 +54,10 @@ export default {
       const { totalPriceWithoutTax = 0 } = this.cartEntityPricing;
       return totalPriceWithoutTax;
     },
+    totalPriceWithTax() {
+      const { totalPrice = 0 } = this.cartEntityPricing;
+      return totalPrice;
+    },
     printsTotalPrice() {
       const { prints = {} } = this.cartEntityPricing;
       return prints.totalPriceWithoutTax || 0;

package/components/checkout/cart/cart_entity/cart-entity.scss

@@ -57,6 +57,10 @@
     text-align: right;
     margin-top: 24px;
   }
+  &__subtotal2 {
+    text-align: right;
+    margin-top: 5px;
+  }
   &__item {
     border-bottom: 1px solid #F4F4F4;
     &:first-child {
@@ -71,4 +75,4 @@
     padding: 16px;
     margin-top: 16px;
   }
-}
+}

package/components/checkout/cart/cart_entity/cart-entity.vue

@@ -83,6 +83,9 @@
       <div class="CartEntity__subtotal lc_title">
         Subtotal: {{ totalPrice | price(currency) }}
       </div>
+      <div class="CartEntity__subtotal2 lc_title">
+        Subtotal inc. {{ taxName }}: {{ totalPriceWithTax | price(currency) }}
+      </div>
       <i
         v-if="editable"
         class="icon-delete CartEntity__remove"
@@ -92,6 +95,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import { price } from '@lancom/shared/assets/js/utils/filters';
 import CartEntityPrints from './cart_entity_prints/cart-entity-prints';
 import CartCouponFreeProducts from './cart_coupon_free_products/cart-coupon-free-products';
@@ -110,7 +114,10 @@ export default {
   },
   mixins: [
     CartEntity
-  ]
+  ],
+  computed: {
+    ...mapGetters(['taxName'])
+  }
 };
 </script>
 

package/components/checkout/cart/cart_shipping/cart-shipping.vue

@@ -129,6 +129,9 @@ export default {
     if (this.wantsToPickup && this.hasNotValidProductsPickup) {
       this.visiblePickupError = true;
     }
+    if (!this.suburb && this.SETTINGS.DEFAULT_POSTCODE) {
+      this.setSuburb({ postcode: this.SETTINGS.DEFAULT_POSTCODE });
+    }
   },
   methods: {
     ...mapActions([

package/components/common/number_input/number-input.vue

@@ -39,11 +39,6 @@ import { generateGUID } from '@lancom/shared/assets/js/utils/guid';
 
 export default {
   name: 'NumberInput',
-  data() {
-    return {
-      uniqueCode: generateGUID()
-    };
-  },
   props: {
     id: {
       type: String
@@ -77,6 +72,11 @@ export default {
       default: false
     }
   },
+  data() {
+    return {
+      uniqueCode: generateGUID()
+    };
+  },
   computed: {
     model: {
       get() {

package/components/order/order_view/order-view.mixin.js

@@ -67,7 +67,7 @@ export default {
     },
     additionalInfo() {
       return this.displayAddress.additionalInfo;
-    }, 
+    },
     purchaseOrderNumber() {
       return this.invoice?.purchaseOrderNumber || this.order.purchaseOrderNumber;
     },
@@ -98,7 +98,7 @@ export default {
       return tax(this.model.total, this.gstTax) - this.model.total;
     },
     taxName() {
-      return this.settings?.pricing?.taxName || 'GST'
+      return this.settings?.pricing?.taxName || 'GST';
     },
     paymentCard() {
       if (this.model.charge?.card) {

package/components/product/editor_pricing/editor-pricing.scss

@@ -27,6 +27,13 @@
       }
     }
   }
+  &__clearance-message {
+    padding: 10px;
+    text-align: center;
+    border-top: 1px solid #E5E5E5;
+    font-size: 13px;
+    color: #0b7d2f;
+  }
   &__footer {
     background: $green;
     height: 76px;

package/components/product/editor_pricing/editor-pricing.vue

@@ -69,7 +69,16 @@
           {{ hasPrintIssues ? 'Proceed with order, Will be in touch regarding print issue' : 'All good to go!' }}
         </div>
       </div>
-
+      <div
+        v-if="product.isClearance"
+        class="EditorPricing__clearance-message">
+        Product is non-returnable clearance product
+      </div>
+      <div
+        v-if="clearanceColorsWithQty.length"
+        class="EditorPricing__clearance-message">
+        {{ clearanceColorsWithQty.length > 1 ? 'Colours' : 'Colour' }}: {{ clearanceColorsText }} {{ clearanceColorsWithQty.length > 1 ? 'are' : 'is' }} non-returnable clearance {{ clearanceColorsWithQty.length > 1 ? 'colours' : 'colour' }}
+      </div>
       <div
         v-if="hasPricing"
         class="EditorPricing__footer">
@@ -162,7 +171,8 @@ export default {
       'multipack',
       'offsetWarningVisible',
       'showRecommendationToUseLargerImage',
-      'showErrorAboutSmallImage'
+      'showErrorAboutSmallImage',
+      'availableColors'
     ]),
     hasPrintIssues() {
       return this.offsetWarningVisible || this.showRecommendationToUseLargerImage || this.showErrorAboutSmallImage;
@@ -173,6 +183,19 @@ export default {
     totalPrice() {
       const { totalPriceWithoutTax, totalPrice } = this.productPricing;
       return this.priceIncludeGST ? totalPrice : totalPriceWithoutTax;
+    },
+    clearanceColors() {
+      return this.availableColors?.filter(color => this.product.colorsPricing?.some(c => c.colors?.includes(color._id) && c.clearance)) || [];
+    },
+    clearanceColorsWithQty() {
+      console.log('clearanceColors: ', this.clearanceColors);
+      return this.clearanceColors.map(color => {
+        const qty = this.usedSimpleProducts.reduce((sum, sp) => sp.color._id === color._id ? sum + (sp.amount || 0) : sum, 0);
+        return qty > 0 ? { ...color, qty } : null;
+      }).filter(c => c);
+    },
+    clearanceColorsText() {
+      return this.clearanceColorsWithQty.map(c => `${c.name}`).join(', ');
     }
   },
   watch: {

package/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options.vue

@@ -3,13 +3,12 @@
     <div
       v-for="color in availableColors"
       :key="color._id"
-      v-tooltip="color.name"
+      v-tooltip="(product.isClearance || isClearanceColor(color)) ? `${color.name}. Clearance - non returnable` : color.name"
       class="ProductColorsSelectorOptions__color"
       :class="{ selected: editableColor === color }"
       @click="toggleSelection(color)">
       <i
-        v-if="isClearanceColor(color)"
-        v-tooltip="'Clearance'"
+        v-if="product.isClearance || isClearanceColor(color)"
         class="icon-percent"></i>
       <product-color-image
         :color="color"

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

@@ -16,7 +16,7 @@
       <postcode-select
         v-model="suburb.postcode"
         :suburb="suburb"
-        :only-postcode="true"
+        :only-postcode="false"
         label-text="Postcode"
         @select="onSelectSuburb" />
     </div>
@@ -94,10 +94,14 @@ export default {
       return totalPriceWithoutTax;
     }
   },
+  props: {
+    value: {
+      type: Object
+    }
+  },
   data() {
-    const postcode = 'SW1A 1AA';
     return {
-      suburb: { postcode },
+      suburb: null,
       pricing: null,
       calculating: false,
       recalcNeeded: false,
@@ -105,10 +109,10 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'country', 'currency']),
+    ...mapGetters(['shop', 'country', 'currency', 'SETTINGS']),
     ...mapGetters('product', ['product', 'usedSimpleProducts', 'template']),
     hasSelection() {
-      return (this.usedSimpleProducts || []).length > 0;
+      return (this.usedSimpleProducts || []).length > 0 || this.value;
     },
     hasSuppliersWithRates() {
       return this.suppliersWithRates.length > 0;
@@ -128,13 +132,21 @@ export default {
             this.calculateShipping();
           }
         }
+        this.$emit('input', null);
       },
       deep: true
+    },
+    value() {
+      if (this.pricing) {
+        this.recalcNeeded = true;
+      } else {
+        this.calculateShipping();
+      }
     }
   },
-  mounted() {
-    if (this.hasSelection) {
-      this.calculateShipping();
+  created() {
+    if (this.SETTINGS.DEFAULT_POSTCODE) {
+      this.suburb = { postcode: this.SETTINGS.DEFAULT_POSTCODE };
     }
   },
   methods: {
@@ -154,6 +166,17 @@ export default {
       this.calculating = true;
       this.recalcNeeded = false;
       try {
+        let usedSimpleProducts = this.usedSimpleProducts;
+        if (this.value) {
+          if (this.value?.color) {
+            usedSimpleProducts = usedSimpleProducts.filter(c => c.color._id === this.value?.color?._id);
+          }
+          if (this.value?.size) {
+            usedSimpleProducts = usedSimpleProducts.filter(c => c.size._id === this.value?.size?._id);
+          }
+          const simpleProduct = usedSimpleProducts[0] || this.usedSimpleProducts[0];
+          usedSimpleProducts = simpleProduct ? [simpleProduct] : [];
+        }
         const entities = getProductsForCalculatePricing(this.product, this.usedSimpleProducts);
         const payload = {
           entities: entities.map(e => ({ ...e, brand: this.product.brand })),

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

@@ -169,10 +169,10 @@ export default {
       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;
+      return +(this.withGst ? tax(price, this.gstTax) : price);
     },
     productPrintsPrice() {
-      return this.withGst ? tax(this.printsPrice, this.gstTax) : this.printsPrice;
+      return +(this.withGst ? tax(this.printsPrice, this.gstTax) : this.printsPrice);
     },
     disabled() {
       return !this.product.quantityStock || !this.productPrice;

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

@@ -56,7 +56,13 @@
     font-weight: 600;
     color: $grey_1;
     text-align: center;
-    background-color: white;
+  }
+  &--selected {
+    color: white !important;
+    background-color: $green !important;
+    .CategoryCard__name {
+      color: white !important;
+    }
   }
 
   @media (max-width: $bp-extra-small-max) {

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

@@ -1,23 +1,26 @@
 <template>
   <div class="ChildrenCategories__wrapper">
     <div
-      v-for="category in childrenCategories"
-      :key="category._id"
-      class="CategoryCard">
+      v-for="cat in childrenCategories"
+      :key="cat._id"
+      class="CategoryCard"
+      :class="{
+        'CategoryCard--selected': category && category._id === cat._id
+      }">
       <a
-        :href="generateProductsLink($route, { category }, true)"
+        :href="generateProductsLink($route, { category: cat }, true)"
         class="CategoryCard__link">
         <span
           v-if="visibleImages"
           class="CategoryCard__image-wrapper">
           <img
-            v-if="category.image"
-            :src="category.image.medium"
-            :alt="category.name"
+            v-if="cat.image"
+            :src="cat.image.medium"
+            :alt="cat.name"
             class="CategoryCard__image" />
         </span>
         <span class="CategoryCard__name">
-          {{ category.name }}
+          {{ cat.name }}
         </span>
       </a>
     </div>
@@ -37,7 +40,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('products', ['childrenCategories'])
+    ...mapGetters('products', ['childrenCategories', 'category'])
   },
   methods: {
     generateProductsLink

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

@@ -21,16 +21,13 @@
     &:last-child {
       border-bottom: none;
       margin-bottom: 0px;
+      padding-bottom: 0px;
     }
     ::v-deep {
       a {
         color: $gray_main;
-        font-size: 13px;
         text-decoration: none;
       }
-      a:hover {
-        font-weight: bold;
-      }
     }
     &-all {
       border-top: 1px solid $gray_main;
@@ -70,4 +67,4 @@
       }
     }
   }
-}
+}

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

@@ -1,3 +1,58 @@
-.ProductListProduct__link {
+@import "@/assets/scss/variables";
+
+.ProductsAutocompleteItem {
+  &__wrapper {
     display: block;
-}
+  }
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    text-decoration: none;
+    color: $gray_main;
+    &:hover {
+      .ProductsAutocompleteItem__name {
+        font-weight: 600;
+      }
+    }
+  }
+  &__image {
+    flex-shrink: 0;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $white;
+    border: 1px solid $medium_gray;
+    border-radius: 4px;
+    overflow: hidden;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      display: block;
+    }
+  }
+  &__info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  &__sku {
+    font-size: 11px;
+    color: $grey_1;
+    font-weight: 500;
+    text-transform: uppercase;
+    margin-top: 3px;
+  }
+  &__name {
+    font-size: 17px;
+    color: $gray_main;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/components/products/products_autocomplete/products_autocomplete-item/products-autocomplete-item.vue

@@ -1,9 +1,19 @@
 <template>
-  <div @click="$emit('select', product)">
+  <div class="ProductsAutocompleteItem__wrapper" @click="$emit('select', product)">
     <a
       :href="productLink"
-      class="ProductListProduct__link">
-      {{ product.SKU }} - {{ product.name }}
+      class="ProductsAutocompleteItem__link">
+      <div
+        v-if="productСover"
+        class="ProductsAutocompleteItem__image">
+        <img
+          :src="productСover"
+          :alt="product.name" />
+      </div>
+      <div class="ProductsAutocompleteItem__info">
+        <div class="ProductsAutocompleteItem__name">{{ product.name }}</div>
+        <div class="ProductsAutocompleteItem__sku">{{ product.SKU }}</div>
+      </div>
     </a>
   </div>
 </template>

package/feeds/google-shopping.js

@@ -102,10 +102,14 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 info['g:gtin'] = { _text: sp.gtin || '' };
               }
 
-              if (sp.clearancePrice > 0) {
+              const isClearance = sp.clearancePrice > 0 || product.isClearance;
+
+              if (isClearance && sp.clearancePrice !== sp.price) {
                 info['g:sale_price'] = { _text: `${(sp.clearancePrice)} ${sp.currencyCode || 'AUD'}` };
               }
 
+              info['g:return_policy_label'] = { _text: isClearance ? 'clearance' : '' };
+
               if (!config.IGNORE_STORE_CODE) {
                 if (sp.storeCode) {
                   info['g:store_code'] = { _text: sp.storeCode };
@@ -179,8 +183,9 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 }
               }
 
-              if (product.feedLifestyleImage) {
-                info['g:lifestyle_image_link'] = { _text: staticLink(product.feedLifestyleImage, config) };
+              const feedLifestyleImage = product.feedLifestyleImage || filterImagesByType('model')[0];
+              if (feedLifestyleImage) {
+                info['g:lifestyle_image_link'] = { _text: staticLink(feedLifestyleImage, config) };
               }
 
               if (product.feedAgeGroup) {

package/mixins/layouts/products.js

@@ -11,7 +11,6 @@ export default {
   async fetch() {
     await this.loadProducts();
 
-    console.log('fetchChildrenCategories: ', this.page, this.currentCategory);
     if (this.page === 1) {
       await this.fetchChildrenCategories(this.currentCategory);
     }

package/package.json

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

package/plugins/save-state.js

@@ -1,6 +1,6 @@
 import debounce from 'lodash.debounce';
 
-const STATE_STORAGE_KEY = 'lancom-state-2.2';
+const STATE_STORAGE_KEY = 'lancom-state-2.3';
 const SAVE_STATE_MODULES = new Map([
   ['setGoogleClickId', 'googleClickId'],
   ['cart/setId', 'cart.id'],