@lancom/shared 0.0.384 → 0.0.386

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

@@ -68,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);
   },
@@ -81,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.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"
@@ -73,6 +79,7 @@ import gtm from '@lancom/shared/assets/js/utils/gtm';
 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';
@@ -82,6 +89,7 @@ export default {
   name: 'CheckoutCart',
   components: {
     CartEntity,
+    CartProductsKitEntity,
     CartPriceInfo,
     CartQuantityErrors,
     CouponSelect,
@@ -92,6 +100,23 @@ export default {
   computed: {
     ...mapGetters(['MESSAGES', 'SETTINGS', 'currency', 'country']),
     ...mapGetters('cart', ['isEmpty','cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities']),
+    productsEntities() {
+      return this.entities.filter(e => !e.productsKit)
+    },
+    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_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/common/number_input/number-input.scss

@@ -0,0 +1,69 @@
+@import "@/assets/scss/variables";
+
+.NumberInput {
+  &__wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    &--double {
+      width: 200px;
+      input {
+        font-size: 25px !important;
+      }
+    }
+    &.side-controls {
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+      input[type=number] {
+        -moz-appearance: textfield;
+      }
+    }
+  }
+  &__field {
+    position: relative;
+    width: 100%;
+    input {
+      text-align: center !important;
+      color: $black;
+      transition: height .2s ease-in-out;
+      &.invalidate {
+        opacity: .3;
+      }
+      &.empty {
+        color: $grey_2;
+      }
+    }
+  }
+  &__side-control {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 3px;
+    bottom: 3px;
+    width: 20px;
+    background: $grey_2;
+    border-radius: 3px;
+    padding-top: 2px;
+    cursor: pointer;
+    &--left {
+      left: 3px;
+    }
+    &--right {
+      padding-top: 2px;
+      right: 3px;
+    }
+    &--double {
+      width: 40px;
+      padding-top: 5px;
+      font-size: 20px;
+    }
+    &.disabled {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="NumberInput__wrapper"
+    :class="{
+      'side-controls': sideControls,
+      'NumberInput__wrapper--double': doubleSize
+    }">
+    <div class="NumberInput__field">
+      <div
+        class="NumberInput__side-control NumberInput__side-control--left"
+        :class="{ disabled, 'NumberInput__side-control--double': doubleSize }"
+        @click="model -= step">
+        <span> - </span>
+      </div>
+      <input
+        v-model.number="model"
+        :id="id"
+        :min="min"
+        :max="max"
+        :name="name || uniqueCode"
+        placeholder="0"
+        type="number"
+        class="form-control"
+        :class="{ invalidate: disabled, empty: !model }"
+        :disabled="disabled"
+        @change="$emit('change', model)" />
+      <div
+        class="NumberInput__side-control NumberInput__side-control--right"
+        :class="{ disabled, 'NumberInput__side-control--double': doubleSize }"
+        @click="model += step">
+        <span> + </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { generateGUID } from '@lancom/shared/assets/js/utils/guid';
+
+export default {
+  name: 'NumberInput',
+  data() {
+    return {
+      uniqueCode: generateGUID()
+    };
+  },
+  props: {
+    id: {
+      type: String
+    },
+    value: {
+      type: Number
+    },
+    name: {
+      type: String
+    },
+    min: {
+      type: Number
+    },
+    max: {
+      type: Number
+    },
+    sideControls: {
+      type: Boolean,
+      default: true
+    },
+    doubleSize: {
+      type: Boolean,
+      default: false
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        value = typeof this.min === 'number' ? Math.max(this.min, +value) : value;
+        value = typeof this.max === 'number' ? Math.min(this.max, +value) : value;
+        this.$emit('input', +value);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'number-input.scss';
+</style>

package/components/editor/editor.vue

@@ -92,13 +92,14 @@ import confirmModal from '@lancom/shared/mixins/confirm';
 import OfferScreenPrinting from '@lancom/shared/components/asides/offer_screen_printing/offer-screen-printing';
 import ProductsListDropdown from '@lancom/shared/components/common/products_list_dropdown/products-list-dropdown';
 import Tabs from '@lancom/shared/components/common/tabs';
+import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
+import AddToCartBtn from '@lancom/shared/components/product/add-to-cart-btn';
+import { scrollToElement } from '@lancom/shared/assets/js/utils/scroll';
 import EditorWorkspace from './editor_workspace/editor-workspace';
 import EditorProductDetails from './editor_product_details/editor-product-details';
 import MobileEditorProductDetails from './mobile_editor_product_details/mobile-editor-product-details';
 import EditorLayers from './editor_layers/editor-layers';
 import EditorWizard from './editor_wizard/editor-wizard';
-import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
-import AddToCartBtn from '@lancom/shared/components/product/add-to-cart-btn';
 
 const MIN_SCREEN_AMOUNT = 125;
 
@@ -224,16 +225,7 @@ export default {
     chooseProducts() {
       this.selectTab('product');
       setTimeout(() => {
-        const element = document.getElementById('EditorProductDetails');
-        if (element) {
-          const offset = 100;
-          const elementPosition = element.getBoundingClientRect().top;
-          const offsetPosition = elementPosition + window.pageYOffset - offset;
-          window.scrollTo({
-            top: offsetPosition,
-            behavior: 'smooth'
-          });
-        }
+        scrollToElement('EditorProductDetails');
       }, 250);
     }
   }

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.vue

@@ -91,6 +91,7 @@ import { createNamespacedHelpers } from 'vuex';
 import throttle from 'lodash.throttle';
 import { EventBus } from '@lancom/shared/assets/js/utils/event-bus';
 import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
+import { scrollToElement } from '@lancom/shared/assets/js/utils/scroll';
 import EditorWorkspace from '../editor_workspace/editor-workspace';
 import EditorLayers from '../editor_layers/editor-layers';
 import EditorPricing from '../../product/editor_pricing/editor-pricing';
@@ -137,16 +138,7 @@ export default {
     chooseProducts() {
       this.hide();
       setTimeout(() => {
-        const element = document.getElementById('EditorProductDetails');
-        if (element) {
-          const offset = 100;
-          const elementPosition = element.getBoundingClientRect().top;
-          const offsetPosition = elementPosition + window.pageYOffset - offset;
-          window.scrollTo({
-            top: offsetPosition,
-            behavior: 'smooth'
-          });
-        }
+        scrollToElement('EditorProductDetails');
       }, 250);
     },
     updateMobileMenuPosition() {

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

@@ -0,0 +1,54 @@
+@import "@/assets/scss/variables";
+
+.ProductsKit {
+  &__wrapper {
+    .post-full-content {
+      position: relative;
+      font-size: 1.3rem;
+      line-height: 1.6em;
+      background: #fff;
+      margin-bottom: 20px;
+      @media (max-width: $bp-extra-small-max) {
+        margin: 0;
+        padding: 15px;
+      }
+      @import "@lancom/shared/assets/scss/normalize";
+      img {
+        max-width: none;
+        @media (max-width: $bp-small-max) {
+          width: 100%;
+          height: auto;
+        }
+      }
+      p {
+        margin-bottom: 0.6rem !important;
+      }
+    }
+  }
+
+  &__header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  &__header-info {
+    padding-top: 10px !important;
+    padding-bottom: 0px !important;
+    h1 {
+      margin-bottom: 10px;
+    }
+  }
+  &__options {
+    position: relative;
+  }
+  &__cart {
+    position: sticky;
+    z-index: 2;
+    bottom: 0;
+    margin: 50px 0;
+    background-color: $gray;
+    padding: 15px;
+  }
+}

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

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <article class="ProductsKit__wrapper">
+      <div class="ProductsKit__header-info post-full-content">
+        <div class="post-content">
+          <h1 class="lc_h1">
+            {{ productsKit.name }}
+          </h1>
+        </div>
+      </div>
+      <div class="ProductsKit__post post-full-content">
+        <div
+          class="lc_regular14"
+          v-html="productsKit.description"></div>
+      </div>
+    </article>
+    <products-kit-options
+      class="ProductsKit__options"
+      :products-kit="productsKit" />
+    <products-kit-cart
+      class="ProductsKit__cart"
+      :products-kit="productsKit" />
+  </div>
+</template>
+
+<script>
+import ProductsKitOptions from './products_kit_options/products-kit-options';
+import ProductsKitCart from './products_kit_cart/products-kit-cart';
+
+export default {
+  name: 'ProductsKit',
+  components: {
+    ProductsKitOptions,
+    ProductsKitCart
+  },
+  props: {
+    productsKit: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'products-kit';
+</style>

package/components/products_kit/products_kit/products_kit_cart/products-kit-cart.scss

@@ -0,0 +1,32 @@
+@import "@/assets/scss/variables";
+
+.ProductsKitCart {
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &__info,
+  &__products {
+    display: flex;
+    align-items: center;
+  }
+  &__price {
+    font-size: 22px;
+    font-weight: bold;
+    margin: 0 20px;
+  }
+  &__qty {
+    margin-left: 10px;
+    ::v-deep {
+      input {
+        padding: 14px;
+        font-size: 20px;
+        width: 150px;
+      }
+      .NumberInput__side-control {
+        width: 30px !important;
+      }
+    }
+  }
+}