@lancom/shared 0.0.383 → 0.0.385

package/assets/js/api/admin.js

@@ -317,6 +317,18 @@ export default {
   removeProduct(id) {
     return _delete(`admin/products/${id}`);
   },
+  fetchProductsKits(params) {
+    return _get('admin/products-kit', params);
+  },
+  fetchProductsKitById(id) {
+    return _get(`admin/products-kit/${id}`);
+  },
+  saveProductsKit(productsKit) {
+    return productsKit._id ? _put(`admin/products-kit/${productsKit._id}`, productsKit) : _post('admin/products-kit', productsKit);
+  },
+  removeProductsKit(id) {
+    return _delete(`admin/products-kit/${id}`);
+  },
   fetchSimpleProducts(params) {
     return _get('admin/simple-products', params);
   },

package/assets/js/api/index.js

@@ -38,6 +38,9 @@ const api = {
   fetchCustomerOrders(customer, shop) {
     return _get(`shop/${shop}/customer/${customer._id}/orders`);
   },
+  fetchCustomerCoupons(customer, shop) {
+    return _get(`shop/${shop}/customer/${customer._id}/coupons`);
+  },
   searchProducts(shop, text, save) {
     return _get(`shop/${shop}/products/search`, { text, save });
   },
@@ -65,6 +68,12 @@ const api = {
   fetchBanners(shop, params) {
     return _get(`shop/${shop}/banners`, params);
   },
+  fetchProductsKits(shop, params) {
+    return _get(`shop/${shop}/products-kit`, params);
+  },
+  fetchProductsKit(shop, alias, preview = false) {
+    return _get(`shop/${shop}/products-kit/${alias}?preview=${preview}`);
+  },
   fetchNews(shop, params) {
     return _get(`shop/${shop}/news`, params);
   },
@@ -78,7 +87,8 @@ const api = {
     return _get(`shop/${shop}/news-tag/${alias}`);
   },
   async fetchProductDetails(shop, alias, params) {
-    return unminifySimpleProducts(await _get(`shop/${shop}/products/${alias}/simple-products`, params));
+    const url = shop ? `shop/${shop}/products/${alias}/simple-products` : `products/${alias}/simple-products`;
+    return unminifySimpleProducts(await _get(url, params));
   },
   fetchRelatedProducts(shop, alias, params) {
     return _get(`shop/${shop}/products/${alias}/related-products`, params);

package/assets/js/utils/scroll.js

@@ -0,0 +1,11 @@
+export function scrollToElement(elementId, offset = 100) {
+  const element = document.getElementById(elementId);
+  if (element) {
+    const elementPosition = element.getBoundingClientRect().top;
+    const offsetPosition = elementPosition + window.scrollY - offset;
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: 'smooth'
+    });
+  }
+}

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

@@ -28,11 +28,15 @@ export default {
       'quantities',
       'notValidProductsQuantities',
       'notValidStockQuantities',
-      'notValidPrintsQuantities'
+      'notValidPrintsQuantities',
+      'notValidProductsPickup'
     ]),
     isNotValidQuantity() {
       return this.isNotValidProductsQuantity || this.isNotValidStockQuantity || this.isNotValidPrintsQuantity || this.isNotValidPrintsBigSizeQuantity;
     },
+    isNotValidShipping() {
+      return (this.needToPickup && this.notValidProductsPickup.length > 0) || !this.suburb; 
+    },
     isNotValidProductsQuantity() {
       return this.notValidProductsQuantities.length > 0;
     },

package/components/checkout/cart/cart.vue

@@ -4,8 +4,14 @@
       v-if="!isEmpty"
       class="row">
       <div class="col-es-12 col-8">
+        <cart-products-kit-entity
+          v-for="entity in productsKitsEntities"
+          :key="entity.productsKitGuid"
+          :products-kit-entity="entity"
+          class="Cart__entity"
+          @remove="removeSimpleProducts" />
         <cart-entity
-          v-for="entity in entities"
+          v-for="entity in productsEntities"
           :key="entity._id"
           :entity="entity"
           class="Cart__entity"
@@ -20,16 +26,13 @@
             :btn-block="true"
             @onclick="removeAllSimpleProducts" />
           <div class="Cart__total-container">
+            <cart-shipping
+              class="mb-10"
+              @suburb="handleSuburbChange" />
             <cart-price-info @loaded="loadedPricing($event)" />
           </div>
           <div class="Cart__postcode-container">
-            <postcode-select
-              :suburb="suburb"
-              :labelless="true"
-              :only-postcode="onlyPostcode"
-              :placeholder="postcodeLabel"
-              :label-text="postcodeInfoLabel"
-              @select="handleSuburbChange" />
+            
           </div>
           <div class="Cart__coupon-container">
             <coupon-select
@@ -42,7 +45,7 @@
           </div>
           <div class="mt-10">
             <btn
-              :btn-disabled="isNotValidQuantity || cartPricingError || cartPricingCalculating"
+              :btn-disabled="isNotValidShipping || isNotValidQuantity || cartPricingError || cartPricingCalculating"
               :btn-block="true"
               :to="'/checkout/order'"
               btn-class="green"
@@ -73,36 +76,46 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex';
 import gtm from '@lancom/shared/assets/js/utils/gtm';
-import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
 import CouponSelect from '@lancom/shared/components/common/coupon_select/coupon-select';
 import CartQuantityErrors from '@lancom/shared/components/checkout/cart/cart_quantity_errors/cart-quantity-errors';
 import CartEntity from '@lancom/shared/components/checkout/cart/cart_entity/cart-entity';
+import CartProductsKitEntity from '@lancom/shared/components/checkout/cart/cart_products_kit_entity/cart-products-kit-entity';
 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';
 
 export default {
   name: 'CheckoutCart',
   components: {
     CartEntity,
+    CartProductsKitEntity,
     CartPriceInfo,
     CartQuantityErrors,
-    PostcodeSelect,
-    CouponSelect
+    CouponSelect,
+    CartShipping
   },
   filters: { price },
   mixins: [CartMixin],
   computed: {
     ...mapGetters(['MESSAGES', 'SETTINGS', 'currency', 'country']),
     ...mapGetters('cart', ['isEmpty','cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities']),
-    onlyPostcode() {
-      return !!this.SETTINGS.CART_ONLY_POSTCODE && this.country?.isoCode === 'UK';
-    },
-    postcodeLabel() {
-      return this.onlyPostcode ? 'Postcode' : (this.MESSAGES.CART_POSTCODE || 'Postcode');
+    productsEntities() {
+      return this.entities.filter(e => !e.productsKit)
     },
-    postcodeInfoLabel() {
-      return this.MESSAGES.CART_POSTCODE_INFO || 'Enter postcode to calculate shipping';
+    productsKitsEntities() {
+      const entities = this.entities.filter(e => !!e.productsKit);
+      const groupedEntities = entities.reduce((acc, entity) => {
+        const { productsKitGuid, productsKit } = entity;
+        if (!acc[productsKitGuid]) {
+          acc[productsKitGuid] = { entities: [], productsKit, productsKitGuid };
+        }
+        acc[productsKitGuid].entities.push(entity);
+        return acc;
+      }, {});
+      const productsKitsEntities = Object.values(groupedEntities);
+      console.log('productsKitsEntities: ', productsKitsEntities);
+      return productsKitsEntities;
     },
     couponLabel() {
       return (this.MESSAGES.CART_COUPON || 'Coupon code').trim();

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

@@ -7,6 +7,10 @@ export default {
     entity: {
       type: Object,
       required: true
+    },
+    editable: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

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

@@ -46,6 +46,7 @@
           v-for="[groupKey, group] in groupedSimpleProducts"
           :key="groupKey"
           :entity="entity"
+          :editable="editable"
           :group="group"
           :default-preview="false"
           :display-unit-price="!isSameUnitPrices"
@@ -66,6 +67,7 @@
         Subtotal: {{ totalPrice | price(currency) }}
       </div>
       <i
+        v-if="editable"
         class="icon-delete CartEntity__remove"
         @click="removeSimpleProducts(entity.simpleProducts)"></i>
     </div>

package/components/checkout/cart/cart_entity/cart_entity_color_simple_products/cart-entity-color-simple-products.vue

@@ -34,6 +34,7 @@
           </div>
         </div>
         <i
+          v-if="editable"
           class="icon-delete CartEntityColorSimpleProducts__remove"
           @click="remove"></i>
       </div>
@@ -58,6 +59,7 @@
             :key="simpleProduct._id"
             :simple-product="simpleProduct"
             :entity="entity"
+            :editable="editable"
             :display-unit-price="displayUnitPrice"
             @change="onChangeQty" />
         </div>

package/components/checkout/cart/cart_price_info/cart-price-info.vue

@@ -3,37 +3,14 @@
     <slot name="cart-pricing" v-bind="{ cartPricing, itemsLabel }">
       <cart-pricing
         v-if="cartPricing && cartPricing.amount"
-        :pricing="cartPricing" />
+        :pricing="cartPricing"
+        :disabled-rates="disabledRates" />
     </slot>
     <div
       v-if="cartPricingError"
       class="CartPriceInfo__error">
       {{ cartPricingError }}
     </div>
-    <div>
-      <div class="mt-20 mb-20">
-        <checkbox
-          v-model="wantsToPickup"
-          :dark="true"
-          @change="calculatePrice()">
-          <div class="ml-10 CartPriceInfo__pickup-label">
-            {{ contacts.warehousePickupInfo ? `Pickup from ${contacts.warehousePickupInfo}` : 'Wants to pickup' }}
-          </div>
-        </checkbox>
-      </div>
-      <div
-        v-if="hasNotValidProductsPickup"
-        class="CartPriceInfo__pickup-errors">
-        <div>Not all items in cart are available for pickup. Some items are available for delivery only</div>
-        <ul>
-          <li
-            v-for="product in notValidProductsPickup"
-            :key="product._id">
-            <b>{{ product.name }}. {{ product.size ? product.size.shortName : '' }}</b> order quantity: {{ product.amount }}. Available {{ product.warehouseQuantityStock }}
-          </li>
-        </ul>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -43,7 +20,7 @@ import debounce from 'lodash.debounce';
 import CartPricing from '@lancom/shared/components/checkout/cart/cart_pricing/cart-pricing';
 import { price } from '@lancom/shared/assets/js/utils/filters';
 
-const { mapActions, mapMutations } = createNamespacedHelpers('cart');
+const { mapActions } = createNamespacedHelpers('cart');
 
 export default {
   name: 'LancomCartPriceInfo',
@@ -55,11 +32,14 @@ export default {
     itemsLabel: {
       type: String,
       default: 'Tee'
+    },
+    disabledRates: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
-      visiblePickupError: null,
       price: null,
       calculatePriceWithDebounce: debounce(this.calculatePrice, 500)
     };
@@ -67,31 +47,10 @@ export default {
   computed: {
     ...mapGetters(['shop', 'country', 'currency', 'contacts']),
     ...mapGetters('cart', [
-      'notValidProductsPickup',
-      'needToPickup',
-      'needToPickupWithoutErrors',
       'entities',
       'cartPricing',
       'cartPricingError'
-    ]),
-    hasNotValidProductsPickup() {
-      return this.notValidProductsPickup.length > 0;
-    },
-    wantsToPickup: {
-      get() {
-        return this.needToPickup;
-      },
-      set(needToPickup) {
-        if (needToPickup && this.hasNotValidProductsPickup) {
-          this.visiblePickupError = true;
-        } else {
-          // if (needToPickup) {
-          //   this.setSuburb(null);
-          // }
-          this.setNeedToPickup(needToPickup);
-        }
-      }
-    }
+    ])
   },
   watch: {
     entities() {
@@ -103,10 +62,6 @@ export default {
     this.$emit('loaded', this.cartPricing);
   },
   methods: {
-    ...mapMutations([
-      'setSuburb',
-      'setNeedToPickup'
-    ]),
     ...mapActions([
       'calculateCartPrice'
     ]),

package/components/checkout/cart/cart_pricing/cart-pricing.scss

@@ -3,14 +3,14 @@
 .CartPricing {
   &__wrapper {
     border: 2px solid $gray;
-    padding: 28px 20px;
+    padding: 0px 20px 28px 20px;
     @media (max-width: $bp-small-max) {
-      padding: 15px 10px;
+      padding: 0px 10px 15px 10px;
     }
 
     @media (max-width: $bp-small-max) {
       .lc_h3 {
-        font-size: 19px;
+        font-size: 16px;
       }
       .lc_body-large {
         font-size: 14px;
@@ -20,6 +20,14 @@
       }
     }
   }
+  &__header {
+    padding: 10px;
+    background-color: $gray;
+    margin: 0 -20px;
+    @media (max-width: $bp-small-max) {
+      margin: 0 -10px;
+    }
+  }
   &__info {
     padding: 11px;
     display: flex;

package/components/checkout/cart/cart_pricing/cart-pricing.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="CartPricing__wrapper">
-    <div class="lc_h3 lc_uppercase lc_black">
+    <div class="lc_h4 lc_uppercase lc_black CartPricing__header">
       Order summary
     </div>
     <div class="CartPricing__info">
@@ -27,7 +27,7 @@
         {{ pricing.products.totalPriceWithoutTax | price(currency) }}
       </div>
     </div>
-    <cart-shipments-pricing />
+    <cart-shipments-pricing :disabled-rates="disabledRates" />
     <div class="CartPricing__info">
       <div class="lc_body-large lc_gray-main">
         Total Delivery:
@@ -90,6 +90,10 @@ export default {
       type: Object,
       required: true
     },
+    disabledRates: {
+      type: Boolean,
+      default: false
+    },
     itemsLabel: {
       type: String,
       default: 'Tee'

package/components/checkout/cart/cart_products_kit_entity/cart-products-kit-entity.scss

@@ -0,0 +1,24 @@
+@import "@/assets/scss/variables";
+
+.CartProductsKitEntity {
+  &__wrapper {
+    padding: 10px;
+    border: 1px solid $black;
+    margin-bottom: 10px;
+    position: relative;
+    @media (max-width: $bp-small-max) {
+      padding: 15px;
+    }
+  }
+  &__link {
+    color: $black;
+  }
+  &__head {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  &__remove {
+    cursor: pointer;
+  }
+}

package/components/checkout/cart/cart_products_kit_entity/cart-products-kit-entity.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="CartProductsKitEntity__wrapper">
+    <div class="CartProductsKitEntity__info">
+      <div class="CartProductsKitEntity__head">
+        <div>
+          <div class="lc_title">
+            <a
+              class="CartProductsKitEntity__link"
+              :href="productsKitLink">
+              {{ productsKitEntity.productsKit.name }}
+            </a>
+          </div>
+        </div>
+        <div>
+          <i
+            class="icon-delete CartProductsKitEntity__remove"
+            @click="removeSimpleProducts"></i>
+        </div>
+      </div>
+      <cart-entity
+        v-for="entity in productsKitEntity.entities"
+        :key="entity._id"
+        :entity="entity"
+        :editable="false"
+        class="CartProductsKitEntity__entity" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CartEntity from './../cart_entity/cart-entity';
+
+export default {
+  name: 'CartProductsKitEntity',
+  components: {
+    CartEntity
+  },
+  props: {
+    productsKitEntity: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    productsKitLink() {
+      return `/products-kit/${this.productsKitEntity.productsKit.alias}`;
+    }
+  },
+  methods: {
+    removeSimpleProducts() {
+      const simpleProducts = this.productsKitEntity.entities
+        .reduce((list, entity) => {
+          return [
+            ...list,
+            ...(entity.simpleProducts || [])
+          ]
+        }, []);
+      this.$emit('remove', simpleProducts);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-products-kit-entity.scss';
+</style>

package/components/checkout/cart/cart_shipments_pricing/cart-shipments-pricing.scss

@@ -21,6 +21,9 @@
       justify-content: space-between;
       font-weight: bold;
       font-size: 16px;
+      &--disabled {
+        pointer-events: none !important;
+      }
     }
     &-brands {
       display: flex;

package/components/checkout/cart/cart_shipments_pricing/cart-shipments-pricing.vue

@@ -15,7 +15,11 @@
         class="CartShipmentsPricing__supplier">
         <div class="CartShipmentsPricing__supplier-info">
           <div class="CartShipmentsPricing__supplier-brands">
-            <div @click="removeSupplierConfirm(supplier)">
+            <div
+              :class="{
+                'CartShipmentsPricing__supplier-info--disabled': disabledRates
+              }"
+              @click="removeSupplierConfirm(supplier)">
               <i class="icon-delete"></i>
             </div>
             <div>
@@ -31,7 +35,7 @@
           :key="`rate-${i}`"
           class="CartShipmentsPricing__rate"
           :class="{
-            'CartShipmentsPricing__rate--disabled': rate.disabled
+            'CartShipmentsPricing__rate--disabled': disabledRates || rate.disabled
           }"
           @click="!rate.selected && selectRate({ supplier, rate, shop, country, currency })">
           <div class="CartShipmentsPricing__rate-info">
@@ -76,6 +80,12 @@ export default {
     }
   },
   mixins: [confirm],
+  props: {
+    disabledRates: {
+      type: Boolean,
+      default: false
+    }
+  },
   computed: {
     ...mapGetters(['shop', 'country', 'currency']),
     ...mapGetters('cart', [

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

@@ -0,0 +1,43 @@
+@import '@/assets/scss/variables';
+
+.CartShipping {
+  &__wrapper {
+    border: 2px solid $gray;
+    padding: 0px 20px 20px 20px;
+    @media (max-width: $bp-small-max) {
+      padding: 0px 10px 15px 10px;
+    }
+    @media (max-width: $bp-small-max) {
+      .lc_h3 {
+        font-size: 16px;
+      }
+      .lc_body-large {
+        font-size: 14px;
+      }
+      .lc_title-large {
+        font-size: 16px;
+      }
+    }
+    ::v-deep {
+      .form-label {
+        font-size: 15px !important;
+      }
+    }
+    &--warning {
+      border-color: $error;
+    }
+  }
+  &__header {
+    padding: 10px;
+    background-color: $gray;
+    margin: 0 -20px;
+    @media (max-width: $bp-small-max) {
+      margin: 0 -10px;
+    }
+  }
+  &__pickup-errors {
+    color: $error;
+    font-size: 13px;
+    line-height: 17px;
+  }
+}