@lancom/shared 0.0.442 → 0.0.443

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,18 @@
           <div class="Cart__quantity-errors">
             <cart-quantity-errors />
           </div>
+
+          <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 class="mt-10">
             <btn
-              :btn-disabled="isNotValidShipping || isNotValidQuantity || cartPricingError || cartPricingCalculating"
+              :btn-disabled="isCheckoutDisabled"
               :btn-block="true"
               :to="'/checkout/order'"
               btn-class="green"
@@ -82,6 +91,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 +101,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 +142,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/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/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options.vue

@@ -8,7 +8,7 @@
       :class="{ selected: editableColor === color }"
       @click="toggleSelection(color)">
       <i
-        v-if="isClearanceColor(color)"
+        v-if="product.isClearance || isClearanceColor(color)"
         v-tooltip="'Clearance'"
         class="icon-percent"></i>
       <product-color-image

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,7 +102,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 info['g:gtin'] = { _text: sp.gtin || '' };
               }
 
-              if (sp.clearancePrice > 0) {
+              if (sp.clearancePrice > 0 || product.isClearance) {
                 info['g:sale_price'] = { _text: `${(sp.clearancePrice)} ${sp.currencyCode || 'AUD'}` };
               }
 
@@ -179,8 +179,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.443",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {