@lancom/shared 0.0.385 → 0.0.387

package/assets/scss/variables/_theme.scss

@@ -21,6 +21,7 @@ $medium_gray: #B0B0BA !default;
 $light_gray: #F9F9FC;
 $link: #5D89A9;
 $error: #E44868;
+$warning: #e48e48;
 $secondary_900: #20303C;
 $secondary_800: #324B5D;
 $secondary_700: #3D5D74;

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

@@ -35,7 +35,7 @@ export default {
       return this.isNotValidProductsQuantity || this.isNotValidStockQuantity || this.isNotValidPrintsQuantity || this.isNotValidPrintsBigSizeQuantity;
     },
     isNotValidShipping() {
-      return (this.needToPickup && this.notValidProductsPickup.length > 0) || !this.suburb; 
+      return this.needToPickup ? this.notValidProductsPickup.length > 0 : !this.suburb; 
     },
     isNotValidProductsQuantity() {
       return this.notValidProductsQuantities.length > 0;

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

@@ -25,6 +25,14 @@ export default {
     productLink() {
       return generateProductLink(this.product, null, !!this.SETTINGS.CART_PRODUCT_LINK_TO_EDITOR);
     },
+    suppliersWithRates() {
+      return this.cartPricing?.shipping?.suppliersWithRates || [];
+    },
+    fulfillment() {
+      const supplierWithRates = this.suppliersWithRates.find(s => s?.brands?.some(b => b?._id === this.product?.brand?._id));
+      const selectedRate = supplierWithRates?.rates?.find(r => r.selected);
+      return selectedRate?.name;
+    },
     sumPrints() {
       return (this.entity.prints || []).length;
     },

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

@@ -40,6 +40,16 @@
             {{ product.brand.name }}
           </div>
         </div>
+        <div
+          v-if="fulfillment"
+          class="CartEntity__feature">
+          <div class="lc_title-small">
+            Fulfillment:
+          </div>
+          <div class="lc_body-small">
+            {{ fulfillment }}
+          </div>
+        </div>
       </div>
       <div>
         <cart-entity-color-simple-products

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

@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 import CartEntity from './../cart_entity/cart-entity';
 
 export default {
@@ -42,8 +44,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['SETTINGS']),
     productsKitLink() {
-      return `/products-kit/${this.productsKitEntity.productsKit.alias}`;
+      return generateProductLink(this.productsKitEntity.productsKit, null, !!this.SETTINGS.CART_PRODUCT_LINK_TO_EDITOR);
     }
   },
   methods: {

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

@@ -40,4 +40,9 @@
     font-size: 13px;
     line-height: 17px;
   }
+  &__pickup-warnings {
+    color: $warning;
+    font-size: 13px;
+    line-height: 17px;
+  }
 }

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

@@ -2,7 +2,7 @@
   <div
     class="CartShipping__wrapper"
     :class="{
-      'CartShipping__wrapper--warning': (needToPickup && hasNotValidProductsPickup) || !suburb
+      'CartShipping__wrapper--warning': needToPickup ? hasNotValidProductsPickup : !suburb
     }">
     <div class="lc_h4 lc_uppercase lc_black CartShipping__header">
       Order Shipping
@@ -18,6 +18,7 @@
         @select="$emit('suburb', $event)" />
       <div class="mt-10 mb-10">
         <checkbox
+          :disabled="!isAvailableForPickupSomeProducts"
           v-model="wantsToPickup"
           :dark="true"
           @change="calculatePrice()">
@@ -26,15 +27,21 @@
           </div>
         </checkbox>
       </div>
+      <div
+        v-if="!isAvailableForPickupSomeProducts"
+        class="CartShipping__pickup-warnings">
+        Pickup not available for current cart items
+        {{ notValidProductsPickupBySKU }}
+      </div>
       <div
         v-if="visiblePickupError && hasNotValidProductsPickup"
         class="CartShipping__pickup-errors">
-        <div>Not all items in cart are available for pickup. Some items are available for delivery only</div>
+        <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"
+            v-for="product in notValidProductsPickupBySKU"
             :key="product._id">
-            <b>{{ product.name }}. {{ product.size ? product.size.shortName : '' }}</b> order quantity: {{ product.amount }}. Available {{ product.warehouseQuantityStock }}
+            <b>{{ product.name }}({{ product.productSKU }})</b>
           </li>
         </ul>
       </div>
@@ -70,6 +77,7 @@ export default {
   computed: {
     ...mapGetters(['shop', 'SETTINGS', 'MESSAGES', 'country', 'currency', 'contacts']),
     ...mapGetters('cart', [
+      'entities',
       'suburb',
       'notValidProductsPickup',
       'needToPickup',
@@ -95,6 +103,7 @@ export default {
       },
       set(needToPickup) {
         if (needToPickup && this.hasNotValidProductsPickup) {
+          this.setNeedToPickup(needToPickup);
           this.visiblePickupError = true;
         } else {
           // if (needToPickup) {
@@ -104,6 +113,22 @@ export default {
           this.visiblePickupError = false;
         }
       }
+    },
+    notValidProductsPickupBySKU() {
+      return groupProductsBySKU(this.notValidProductsPickup, 'productSKU');
+    },
+    isAvailableForPickupSomeProducts() {
+      const products = this.entities.map(({ product }) => product);
+      const grouped = groupProductsBySKU(products);
+      return this.notValidProductsPickupBySKU.length === 0 || this.notValidProductsPickupBySKU.length !== grouped?.length;
+    }
+  },
+  mounted() {
+    if (!this.isAvailableForPickupSomeProducts) {
+      this.wantsToPickup = false;
+    }
+    if (this.wantsToPickup && this.hasNotValidProductsPickup) {
+      this.visiblePickupError = true;
     }
   },
   methods: {
@@ -119,6 +144,19 @@ export default {
     }
   }
 };
+
+function groupProductsBySKU(products, skuProp = 'SKU') {
+  const grouped = products.reduce((acc, product) => {
+    const existingProduct = acc.find(p => p[skuProp] === product[skuProp]);
+    if (existingProduct) {
+      existingProduct.amount += product.amount;
+    } else {
+      acc.push({ ...product });
+    }
+    return acc;
+  }, []);
+  return grouped;
+}
 </script>
 
 <style lang="scss" scoped>

package/components/common/checkbox.vue

@@ -108,7 +108,7 @@ html[dir=rtl] {
       margin: 2px 0;
       &--disabled {
         pointer-events: none;
-        opacity: .7;
+        opacity: .4;
       }
     }
 

package/components/products_kit/products_kit/products-kit.vue

@@ -15,8 +15,10 @@
       </div>
     </article>
     <products-kit-options
+      v-if="productsKit[optionsAttr]"
       class="ProductsKit__options"
-      :products-kit="productsKit" />
+      :products-kit="productsKit"
+      :options-attr="optionsAttr" />
     <products-kit-cart
       class="ProductsKit__cart"
       :products-kit="productsKit" />
@@ -37,6 +39,10 @@ export default {
     productsKit: {
       type: Object,
       required: true
+    },
+    optionsAttr: {
+      type: String,
+      default: 'productsKitOptions'
     }
   }
 };

package/components/products_kit/products_kit/products_kit_options/products-kit-options.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ProductsKitOptions__wrapper">
     <products-kit-option
-      v-for="option in productsKit.options"
+      v-for="option in productsKit[optionsAttr]"
       :key="option._id"
       :products-kit="productsKit"
       :option="option"
@@ -22,6 +22,10 @@ export default {
     productsKit: {
       type: Object,
       required: true
+    },
+    optionsAttr: {
+      type: String,
+      default: 'productsKitOptions'
     }
   }
 };

package/mixins/product-view.js

@@ -36,6 +36,8 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
 
       const product = store.getters['product/product'];
 
+      await store.dispatch('productsKit/setProductsKit', product);
+
       if ((product.useTaxonomyUrl && !params.sku) || (!product.useTaxonomyUrl && params.sku)) {
         const redirectUrl = generateProductLink(product, data.defaultColor, isEditor);
         return redirect(301, redirectUrl);
@@ -91,6 +93,9 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
   computed: {
     ...mapGetters(['shop', 'gstTax', 'country', 'stockCountry', 'currency']),
     ...mapGetters('product', ['product', 'simpleProducts', 'productDetails', 'editableColor', 'images', 'preSetPrints', 'editorSize', 'printsPrice']),
+    hasProductsKitOptions() {
+      return this.product.productsKitOptions?.length > 0;
+    },
     stockCountryId() {
       return this.stockCountry?._id || null;
     },

package/package.json

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

package/pages/checkout/order.vue

@@ -9,7 +9,11 @@
             btn-class="black"
             btn-label="EDIT CART"
             :btn-block="true"
-            to="/checkout/cart" />
+            to="/checkout/cart">
+            <template #icon-before>
+              <i class="icon-edit"></i>
+            </template>
+          </btn>
           <cart-price-info
             class="mt-10"
             :disabled-rates="true"

package/routes/index.js

@@ -169,16 +169,6 @@ module.exports = function(routes, resolve) {
     path: '/news/tag/:tag',
     component: resolve('@lancom/shared/pages/news/tag/_tag.vue'),
     chunkName: 'pages/news/tag'
-  }, {
-    name: 'products-kits',
-    path: '/products-kits',
-    component: resolve('@lancom/shared/pages/products-kit/index.vue'),
-    chunkName: 'pages/products-kits'
-  }, {
-    name: 'products-kit-view',
-    path: '/products-kit/:alias',
-    component: resolve('@lancom/shared/pages/products-kit/_alias.vue'),
-    chunkName: 'pages/products-kit/products-kit-view'
   }, {
     name: 'contact',
     path: '/contact',

package/server-middleware/robots.js

@@ -6,7 +6,8 @@ const robots = fs.readFileSync(filePath);
 
 module.exports = function (req, res, next) {
   if (req.url === '/robots.txt') {
-    if (req.headers.host?.includes('www1') && !req.headers['X-PULL'] && !req.headers['x-pull']) {
+    const isDeny = ['www1', 'dev.', 'dev1.'].some(key => req.headers.host?.includes(key));
+    if (isDeny && !req.headers['X-PULL'] && !req.headers['x-pull']) {
       res.setHeader('Content-Type', 'text/plain');
       res.end('User-agent: *\nDisallow: /');
       return;

package/store/cart.js

@@ -28,7 +28,7 @@ const getEntitiesQuantity = entities => {
 const getProductsQuantities = entities => {
   const grouped = groupBy(entities, e => e.product._id);
   const quantities = Object.keys(grouped).map(_id => {
-    const [{ prints, product: { name, minimumOrderQuantity, minimumPrintOrderQuantity } }] = grouped[_id];
+    const [{ prints, product: { name, minimumOrderQuantity, minimumPrintOrderQuantity, SKU } }] = grouped[_id];
     const minQty = (prints?.length > 0 ? minimumPrintOrderQuantity : minimumOrderQuantity) || minimumOrderQuantity;
     const simpleProducts = grouped[_id].reduce((simpleProducts, product) => {
       product.simpleProducts?.forEach(simpleProduct => {
@@ -43,7 +43,7 @@ const getProductsQuantities = entities => {
       });
       return simpleProducts;
     }, []);
-    return { _id, name, minimumOrderQuantity: minQty, quantity: getEntitiesQuantity(grouped[_id]), simpleProducts };
+    return { _id, name, SKU, minimumOrderQuantity: minQty, quantity: getEntitiesQuantity(grouped[_id]), simpleProducts };
   });
   return quantities;
 };
@@ -101,6 +101,7 @@ export const getters = {
           ...simpleProducts,
           ...product?.simpleProducts?.map(sp => ({
             name: product.name,
+            productSKU: product.SKU,
             ...sp
           }))
         ]
@@ -109,7 +110,6 @@ export const getters = {
     const notValid = simpleProducts.filter(sp => sp.warehouseQuantityStock < sp.amount)
 
     return notValid;
-    
   },
   notValidStockQuantities(state, { quantities }) {
     return (quantities?.stock || []).filter(({ maxQuantity, quantity }) => quantity > maxQuantity);
@@ -190,7 +190,7 @@ export const actions = {
     await api.saveCart(payload, shop._id);
     commit('setEntities', entities);
   },
-  async calculateCartPrice({ state: { suburb, entities, coupon, cartPricing }, getters: { needToPickupWithoutErrors }, commit }, { shop, country, currency }) {
+  async calculateCartPrice({ state: { suburb, entities, coupon, cartPricing }, getters: { needToPickup }, commit }, { shop, country, currency }) {
     let savedSuppliersWithRates = null;
     try {
       savedSuppliersWithRates = JSON.parse(localStorage.getItem(SUPPLIERS_WITH_RATES_KEY));
@@ -200,7 +200,7 @@ export const actions = {
     console.log('calculateCartPrice:payload: ', payload)
     try {
       commit('setCartPricingCalculating', true);
-      const response = await api.calculateProductPrice({ ...payload, needToPickup: needToPickupWithoutErrors }, shop._id);
+      const response = await api.calculateProductPrice({ ...payload, needToPickup }, shop._id);
       commit('setCartPricing', response);
       commit('setCartPricingError', null);
     } catch (e) {

package/store/productsKit.js

@@ -41,7 +41,7 @@ export const getters = {
   selectedOptionsSizes: ({ selectedOptionsSizes }) => selectedOptionsSizes,
   isAllOptionsSelected: ({ productsKit, selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
     const selectedSimpleProducts = getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes);
-    return productsKit.options?.length === selectedSimpleProducts?.length;
+    return productsKit.productsKitOptions?.length === selectedSimpleProducts?.length;
   },
   selectedSimpleProducts: ({ selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes),
   maxOrderQty: ({ selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
@@ -53,7 +53,7 @@ export const getters = {
   },
   cartEntities: ({ amount, productsKit, selectedOptionsProducts, selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
     const productsKitGuid = generateGUID();
-    const entities = productsKit.options
+    const entities = productsKit.productsKitOptions
       .map(option => {
         const product = selectedOptionsProducts[option._id];
         if (product) {
@@ -87,6 +87,9 @@ export const actions = {
       });
     }
   },
+  setProductsKit({ commit }, productsKit) {
+    commit('setProductsKit', productsKit);
+  },
   async selectOptionProduct({ commit }, { option, product, country, currency, stockCountry }) {
     const params = { country, currency, stockCountry };
     const simpleProducts = await api.fetchProductDetails(null, product.alias, params);
@@ -104,7 +107,7 @@ export const actions = {
   },
   clearOptions({ commit, state }) {
     const { productsKit } = state;
-    productsKit.options?.forEach(option => {
+    productsKit.productsKitOptions?.forEach(option => {
       commit('clearOption', option);
     });
   },
@@ -117,7 +120,7 @@ export const actions = {
   async calculateProductsKitPrice({ state, commit }, { shop, country, currency }) {
     commit('setCalculatingPrice', true);
     const { amount, selectedOptionsProducts, productsKit, selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes } = state;
-    const entities = productsKit.options
+    const entities = productsKit.productsKitOptions
       .map(option => {
         const product = selectedOptionsProducts[option._id];
         if (product) {

package/pages/products-kit/_alias.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="ProductsKitPage__wrapper">
-    <breadcrumbs :items="breadcrumbs" />
-    <transition name="from-right-to-left" appear>
-      <products-kit :products-kit="productsKit" />
-    </transition>
-    <transition
-      v-if="hasProductsKitsList"
-      name="from-left-to-right"
-      appear>
-      <div class="content-inner">
-        <h2 class="lc_h2 lc_black ProductsKitPage__list-title">
-          You might also like
-        </h2>
-        <products-kits-list
-          class="ProductsKitPage__list"
-          :productsKits="productsKitsList" />
-      </div>
-    </transition>
-  </div>
-</template>
-<script>
-import metaInfo from '@lancom/shared/mixins/meta-info';
-
-export default {
-  name: 'ProductsKitPage',
-  components: {
-    Breadcrumbs: () => import('@lancom/shared/components/common/breadcrumbs/breadcrumbs'),
-    ProductsKit: () => import('@lancom/shared/components/products_kit/products_kit/products-kit'),
-    ProductsKitsList: () => import('@lancom/shared/components/products_kit/products_kits_list/products-kits-list')
-  },
-  mixins: [metaInfo],
-  async asyncData({ params, store, error, redirect }) {
-    console.log('asyncData: ', 1);
-    try {
-      const { shop, country, currency } = store.getters;
-      const data = {
-        shop: shop._id,
-        alias: params.alias,
-        country: country?._id,
-        currency: currency?._id
-      };
-      await store.dispatch('productsKit/fetchProductsKit', data);
-    } catch (e) {
-      console.log(e);
-    }
-    const productsKit = store.getters['productsKit/productsKit'];
-    const loadError = store.getters['productsKit/loadError'];
-
-    // console.log('loadError: ', loadError);
-    if (loadError?.redirectLink) {
-      return redirect(301, loadError?.redirectLink);
-    } else if (loadError) {
-      error(loadError);
-    }
-    return {
-      productsKit
-    };
-  },
-  data() {
-    return {
-      productsKit: null,
-      productsKits: []
-    };
-  },
-  computed: {
-    hasProductsKitsList() {
-      return this.productsKitsList.length > 0;
-    },
-    productsKitsList() {
-      return this.productsKits.filter(i => i.alias !== this.productsKit.alias).slice(0, 3);
-    },
-    breadcrumbs() {
-      const item = this.productsKit ? { text: this.productsKit.name } : null;
-      return [{
-        to: '/products-kits',
-        text: 'Products Kits'
-      }, item].filter(i => !!i);
-    },
-    pageItemType() {
-      return 'products-kits';
-    }
-  },
-  getRoute() {
-    return '/shop/:shop/products-kits/:alias';
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.ProductsKitPage{
-  &__wrapper {
-    margin-top: 30px;
-  }
-  &__list-title {
-    margin-top: 20px;
-    text-align: center;
-  }
-  &__list {
-    padding: 20px 0;
-  }
-}
-</style>

package/pages/products-kit/index.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="ProductsKitsPage__wrapper view-transition">
-    <div class="content-inner">
-      <breadcrumbs :items="breadcrumbs" />
-      <products-kits-list
-        class="ProductsKitsPage__list"
-        :products-kits="productsKits"
-        :count="count"
-        :page="page"
-        :per-page="perPage" />
-    </div>
-  </div>
-</template>
-
-<script>
-import metaInfo from '@lancom/shared/mixins/meta-info';
-import api from '@lancom/shared/assets/js/api';
-
-const KITS_PER_PAGE = 18;
-
-export default {
-  name: 'ProductPage',
-  components: {
-    Breadcrumbs: () => import('@lancom/shared/components/common/breadcrumbs/breadcrumbs'),
-    ProductsKitsList: () => import('@lancom/shared/components/products_kit/products_kits_list/products-kits-list')
-  },
-  mixins: [metaInfo],
-  async asyncData({ store, params, query }) {
-    const { _id } = store.getters.shop;
-    const kitsQuery = { ...params, ...query, limit: KITS_PER_PAGE };
-    const { productsKits, count, page, perPage } = await api.fetchProductsKits(_id, kitsQuery);
-    return { productsKits, count, page, perPage };
-  },
-  data() {
-    return {
-      productsKits: [],
-      count: null,
-      page: null,
-      perPage: null,
-      breadcrumbs: [{
-        text: 'Products Kits'
-      }]
-    };
-  },
-  computed: {
-    pageItemType() {
-      return 'products-kits';
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.ProductsKitsPage {
-  &__wrapper {
-    padding: 30px 0;
-  }
-}
-</style>