@lancom/shared 0.0.399 → 0.0.400

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

@@ -63,4 +63,12 @@
       border-top: 1px solid #F4F4F4;
     }
   }
+  &__free-products {
+    background-color: #FFFBEB;
+    color: #B45309;
+    border: 1px solid #FDE68A;
+    border-radius: 8px;
+    padding: 16px;
+    margin-top: 16px;
+  }
 }

package/components/checkout/cart/cart_entity/cart_coupon_free_products/cart-coupon-free-products.scss

@@ -2,10 +2,18 @@
 
 .CartCouponFreeProducts {
   &__label {
-    font-size: 12px;
-    font-weight: bold;
+    font-weight: 700;
+    font-size: 1.1em;
+    margin: 0 0 8px 0;
+    display: flex;
+    align-items: center;
+    gap: 12px;
   }
   &__product {
     margin-top: 5px;
   }
+  &__main-product {
+    padding-left: 36px;
+    font-size: 12px;
+  }
 }

package/components/checkout/cart/cart_entity/cart_coupon_free_products/cart-coupon-free-products.vue

@@ -1,7 +1,19 @@
 <template>
   <div class="CartCouponFreeProducts__wrapper">
     <div class="CartCouponFreeProducts__label">
-      Free products
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-gift">
+        <polyline points="20 12 20 22 4 22 4 12"></polyline>
+        <rect x="2" y="7" width="20" height="5"></rect>
+        <line x1="12" y1="22" x2="12" y2="7"></line>
+        <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
+        <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
+      </svg>
+      <span>You've Unlocked Free Gifts!</span>
+    </div>
+    <div
+      v-if="entity.product"
+      class="CartCouponFreeProducts__main-product">
+      {{ entity.product.name }} x {{ qty }}
     </div>
     <cart-coupon-free-product
       v-for="freeProduct in freeProducts"
@@ -29,6 +41,11 @@ export default {
       type: Object,
       required: true
     }
+  },
+  computed: {
+    qty() {
+      return this.entity.simpleProducts?.reduce((qty, sp) => qty + (sp.amount || 0), 0) || 0;
+    }
   }
 };
 </script>

package/components/checkout/cart/cart_entity/cart_coupon_free_products/cart_coupon_free_product/cart-coupon-free-product.scss

@@ -2,6 +2,12 @@
 
 .CartCouponFreeProduct {
   &__wrapper {
-    font-size: 14px;
+    padding-left: 36px;
+    font-weight: bold;
+    margin-top: 4px;
+    font-size: 12px;
+    a {
+      color: #B45309;
+    }
   }
 }

package/components/checkout/cart/cart_entity/cart_coupon_free_products/cart_coupon_free_product/cart-coupon-free-product.vue

@@ -1,10 +1,16 @@
 <template>
   <div class="CartCouponFreeProduct__wrapper">
-    {{ freeProduct.name }} x {{ qty }}
+    <a
+      :href="productLink"
+      target="_blank">
+      FREE {{ freeProduct.name }} x {{ qty }}
+    </a>
   </div>
 </template>
 
 <script>
+import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
+
 export default {
   name: 'CartCouponFreeProduct',
   props: {
@@ -18,6 +24,9 @@ export default {
     }
   },
   computed: {
+    productLink() {
+      return generateProductLink(this.freeProduct);
+    },
     qty() {
       return this.entity.simpleProducts?.reduce((qty, sp) => qty + (sp.amount || 0), 0) || 0;
     }

package/components/common/coupon_select/coupon-select.scss

@@ -1,4 +1,9 @@
 .CouponSelect {
+  &__wrapper {
+    a {
+      color: black
+    }
+  }
   &__clear {
     font-size: 13px;
     margin-left: 5px;

package/components/common/coupon_select/coupon-select.vue

@@ -76,6 +76,14 @@
         class="lc_caption form-help is-danger">
         Invalid coupon: Min Order for Coupon: {{ value.minOrderValue | price(currency) }}
       </div>
+      <div v-if="hasQualifyingProducts" class="lc_caption">
+        <div v-if="noQualifyingProductsInCart">
+          There are no qualifying products in your cart. See here for more information: <a href="/faq/other#entity-684640df5ce4d102f04974d1">EOFY Beanie offer</a>
+        </div>
+        <div v-if="hasQualifyingProductsInCart">
+          The coupon has been applied to '{{ sumQualifyingProductsInCart }}' qualifying products. See here for more information: <a href="/faq/other#entity-684640df5ce4d102f04974d1">EOFY Beanie offer</a>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -111,6 +119,16 @@ export default {
   },
   computed: {
     ...mapGetters(['shop']),
+    ...mapGetters('cart', ['sumQualifyingProductsInCart']),
+    hasQualifyingProducts() {
+      return true;
+    },
+    noQualifyingProductsInCart() {
+      return this.sumQualifyingProductsInCart === 0;
+    },
+    hasQualifyingProductsInCart() {
+      return this.sumQualifyingProductsInCart > 0;
+    },
     isValidPricing() {
       return !this.value?.minOrderValue || this.pricing.coupon;
     },

package/components/faq/faq.vue

@@ -36,6 +36,7 @@
               class="FAQ__group-content">
               <div
                 v-for="entity in group.entities"
+                :id="`entity-${entity._id}`"
                 :key="entity._id"
                 :ref="entity._id"
                 class="FAQ__entity">
@@ -64,6 +65,8 @@
 </template>
 
 <script>
+import { scrollToElement } from '@lancom/shared/assets/js/utils/scroll';
+
 export default {
   name: 'FAQ',
   props: {
@@ -89,6 +92,12 @@ export default {
       openedEntities: groups.reduce((items, { entities }) => [...items, ...entities.map(({ _id }) => _id)], [])
     };
   },
+  mounted() {
+    const hash = window.location.hash;
+    if (hash.startsWith('#entity-')) {
+      scrollToElement(hash.substring(1), 200);
+    }
+  },
   methods: {
     toggleGroup({ type }) {
       const index = this.openedGroups.indexOf(type);
@@ -221,6 +230,10 @@ $types: delivery, general, other, printing, garments;
       color: $grey_1;
       overflow: hidden;
       @import "@lancom/shared/assets/scss/normalize";
+
+      a {
+        color: #2196f3;
+      }
     }
   }
 }

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_products/products-kit-option-products.scss

@@ -3,5 +3,23 @@
 .ProductsKitOptionProducts {
   &__wrapper {
     display: flex;
+    position: relative;
+  }
+  &__product {
+    margin: 3px;
+    z-index: 0;
+  }
+  &__loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: white;
+    opacity: 0.6;
+    z-index: 1;
   }
 }

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_products/products-kit-option-products.vue

@@ -7,6 +7,11 @@
       :option="option"
       :product="product"
       class="ProductsKitOptionProducts__product" />
+    <div
+      v-if="isLoading"
+      class="ProductsKitOptionProducts__loading">
+      <spinner />
+    </div>
   </div>
 </template>
 
@@ -34,7 +39,11 @@ export default {
       'country',
       'currency',
       'stockCountry'
-    ])
+    ]),
+    ...mapGetters('productsKit', ['loadingOptions']),
+    isLoading() {
+      return this.loadingOptions[this.option._id];
+    }
   },
   mounted() {
     if (this.option.required && this.option.products?.length === 1) {

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_products/products_kit_option_product/products-kit-option-product.scss

@@ -2,9 +2,9 @@
 
 .ProductsKitOptionProduct {
   &__wrapper {
-    border: 1px solid $gray;
+    border: 2px solid $gray;
     &--active {
-      border: 1px solid $green;
+      border: 2px solid #aac145;
     }
   }
   &__preview {
@@ -42,21 +42,23 @@
 ::v-deep {
   .ProductPreview {
     &__link {
-      height: 175px;
+      height: 175px !important;
       &-cover,
       &-cover-hover {
-        height: 175px;
-        top: 10px;
+        height: 175px !important;
+        top: 10px !important;
       }
     }
     &__sku {
       font-size: 13px;
+      text-decoration: underline;
     }
     &__name {
       font-size: 15px;
       line-height: 20px;
       margin-top: 1px;
       min-height: 35px;
+      text-decoration: underline;
     }
     &__prices-printed-price {
       font-size: 16px;

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_products/products_kit_option_product/products-kit-option-product.vue

@@ -14,7 +14,10 @@
         :product="product"
         :to-editor="false"
         :visible-color-thumbs="false"
+        :visible-info="false"
+        :visible-brand="false"
         :visible-prices="!option.required"
+        link-target="_blank"
         @preview="onPreviewProduct($event)"
         @color="onProductSelectColor($event)" />
     </div>

package/mixins/product-preview.js

@@ -33,6 +33,18 @@ const productPreview = {
     visibleColorThumbs: {
       type: Boolean,
       default: true
+    },
+    visibleInfo: {
+      type: Boolean,
+      default: true
+    },
+    visibleBrand: {
+      type: Boolean,
+      default: true
+    },
+    linkTarget: {
+      type: String,
+      default: '_self'
     }
   },
   data() {

package/package.json

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

package/store/cart.js

@@ -95,6 +95,13 @@ export const getters = {
       ];
     }, []);
   },
+  sumQualifyingProductsInCart: ({ entities, coupon }) => {
+    return entities.reduce((sum, entity) => {
+      const amount = entity.simpleProducts?.reduce((count, sp) => count + +(sp.amount || 0), 0) || 0;
+      const freeProducts = getCouponFreeProducts(coupon, entity.product);
+      return freeProducts.length > 0 ? sum + amount : sum;
+    }, 0);
+  },
   coupon: ({ coupon }) => coupon,
   needToPickup: ({ needToPickup }) => needToPickup,
   needToPickupWithoutErrors: (state, { notValidProductsPickup }) => state.needToPickup && notValidProductsPickup?.length === 0,

package/store/productsKit.js

@@ -8,6 +8,7 @@ export const state = () => ({
   amount: 0,
   productsKit: null,
   loadError: null,
+  loadingOptions: {},
   selectedOptionsProducts: {},
   selectedOptionsSimpleProducts: {},
   selectedOptionsColors: {},
@@ -35,6 +36,7 @@ export const getters = {
   loadError: ({ loadError }) => loadError,
   amount: ({ amount }) => amount,
   productsKitPricing: ({ productsKitPricing }) => productsKitPricing,
+  loadingOptions: ({ loadingOptions }) => loadingOptions,
   selectedOptionsProducts: ({ selectedOptionsProducts }) => selectedOptionsProducts,
   selectedOptionsSimpleProducts: ({ selectedOptionsSimpleProducts }) => selectedOptionsSimpleProducts,
   selectedOptionsColors: ({ selectedOptionsColors }) => selectedOptionsColors,
@@ -97,12 +99,17 @@ export const actions = {
   },
   async selectOptionProduct({ commit }, { option, product, country, currency, stockCountry }) {
     const params = { country, currency, stockCountry };
-    const simpleProducts = product ? (await api.fetchProductDetails(null, product.alias, params)) : [];
-
-    commit('setSelectedOptionProduct', { option, product });
-    commit('setSelectedOptionSimpleProducts', { option, simpleProducts });
-    commit('setSelectedOptionColor', { option, color: null });
-    commit('setSelectedOptionSize', { option, size: null });
+    try {
+      commit('setLoadingOption', { option, loading: true });
+      const simpleProducts = product ? (await api.fetchProductDetails(null, product.alias, params)) : [];
+      commit('setSelectedOptionProduct', { option, product });
+      commit('setSelectedOptionSimpleProducts', { option, simpleProducts });
+      commit('setSelectedOptionColor', { option, color: null });
+      commit('setSelectedOptionSize', { option, size: null });
+    } catch (e) {
+    } finally {
+      commit('setLoadingOption', { option, loading: false });
+    }
   },
   selectOptionColor({ commit }, { option, color }) {
     commit('setSelectedOptionColor', { option, color });
@@ -168,6 +175,9 @@ export const mutations = {
   setSelectedOptionSimpleProducts(state, { option, simpleProducts }) {
     Vue.set(state.selectedOptionsSimpleProducts, option._id, simpleProducts);
   },
+  setLoadingOption(state, { option, loading }) {
+    Vue.set(state.loadingOptions, option._id, loading);
+  },
   setLoadError(state, error) {
     state.loadError = error;
   },