@lancom/shared 0.0.383 → 0.0.385

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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,132 @@
+<template>
+  <div class="ProductsKitCart__wrapper">
+    <div class="ProductsKitCart__products">
+      <products-kit-cart-options :productsKit="productsKit" />
+      <div class="ProductsKitCart__qty">
+        <number-input
+          v-model="kitQty"
+          :disabled="addingToCart || !isAllOptionsSelected" />
+      </div>
+    </div>
+    <div class="ProductsKitCart__info">
+      <div class="ProductsKitCart__price">
+        {{ totalPrice | price }}
+      </div>
+      <div>
+        <btn
+          :btn-disabled="addingToCart || !isAllOptionsSelected"
+          btn-class="green"
+          btn-label="ADD TO CART" 
+          @onclick="proceedToCard()"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import debounce from 'lodash.debounce';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import NumberInput from '@lancom/shared/components/common/number_input/number-input';
+import ProductsKitCartOptions from './products_kit_cart_options/products-kit-cart-options';
+
+
+export default {
+  name: 'ProductsKitCart',
+  filters: {
+    price
+  },
+  components: {
+    ProductsKitCartOptions,
+    NumberInput
+  },
+  data() {
+    return {
+      addingToCart: false,
+      calculateCartPriceWithDebounce: debounce(this.recalculatePricing, 300)
+    };
+  },
+  props: {
+    productsKit: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters(['shop', 'country', 'currency', 'googleClickId']),
+    ...mapGetters('productsKit', [
+      'amount',
+      'isAllOptionsSelected',
+      'maxOrderQty',
+      'selectedOptionsProducts',
+      'selectedSimpleProducts',
+      'productsKitPricing',
+      'cartEntities'
+    ]),
+    kitQty: {
+      get() {
+        return this.amount
+      },
+      set(qty) {
+        this.updateAmount(qty);
+      }
+    },
+    totalPrice() {
+      return this.productsKitPricing?.totalPrice || 0;
+    }
+  },
+  watch: {
+    selectedSimpleProducts() {
+      this.calculateCartPriceWithDebounce();
+    },
+    amount() {
+      this.calculateCartPriceWithDebounce();
+    }
+  },
+  methods: {
+    ...mapActions('productsKit', [
+      'calculateProductsKitPrice',
+      'clearOptions',
+      'clearProductsKitPricing',
+      'updateAmount'
+    ]),
+    ...mapActions('cart', ['addToCart']),
+    async proceedToCard() {
+      if (this.addingToCart || !this.isAllOptionsSelected) {
+        return;
+      }
+      try {
+        this.addingToCart = true;
+        const data = {
+          entities: this.cartEntities,
+          shop: this.shop,
+          pricing: this.productsKitPricing,
+          country: this.country,
+          currency: this.currency,
+          googleClickId: this.googleClickId
+        };
+        await this.addToCart(data);
+        this.$toastr.s('Products Kit successfully added to cart');
+        this.clearOptions();
+        this.clearProductsKitPricing();
+      } catch (e) { 
+        console.log(e);
+      } finally {
+        this.addingToCart = false;
+      }
+    },
+    recalculatePricing() {
+      const params = {
+        country: this.country,
+        currency: this.currency,
+        shop: this.shop
+      };
+      this.calculateProductsKitPrice(params);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kit-cart';
+</style>

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

@@ -0,0 +1,15 @@
+@import "@/assets/scss/variables";
+
+.ProductsKitCartOptions {
+  &__wrapper {
+    display: flex;
+  }
+  &__option {
+    width: 50px;
+    height: 50px;
+    margin: 5px;
+    border: 1px solid #c1c1c1;
+    box-shadow: $elevation1;
+    cursor: pointer;
+  }
+}

package/components/products_kit/products_kit/products_kit_cart/products_kit_cart_options/products-kit-cart-options.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="ProductsKitCartOptions__wrapper">
+    <products-kit-cart-option
+      v-for="option in productsKit.options"
+      :key="option._id"
+      :products-kit="productsKit"
+      :option="option"
+      class="ProductsKitCartOptions__option" />
+  </div>
+</template>
+
+<script>
+import ProductsKitCartOption from './products_kit_cart_option/products-kit-cart-option';
+
+export default {
+  name: 'ProductsKitCartOptions',
+  components: {
+    ProductsKitCartOption
+  },
+  props: {
+    productsKit: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kit-cart-options';
+</style>

package/components/products_kit/products_kit/products_kit_cart/products_kit_cart_options/products_kit_cart_option/products-kit-cart-option.scss

@@ -0,0 +1,41 @@
+@import "@/assets/scss/variables";
+
+.ProductsKitCartOption {
+  &__wrapper {
+    position: relative;
+    margin: 4px;
+  }
+  &__placeholder,
+  &__product {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: white;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  &__clear {
+    cursor: pointer;
+    font-size: 10px;
+    padding: 5px 7px;
+    border-radius: 50%;
+    background-color: rgb(205, 205, 205);
+    color: black;
+    position: absolute;
+    top: -5px;
+    right: -5px;
+  }
+  &__placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      font-size: 24px;
+      font-weight: bold;
+      color: grey;
+    }
+  }
+}

package/components/products_kit/products_kit/products_kit_cart/products_kit_cart_options/products_kit_cart_option/products-kit-cart-option.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="ProductsKitCartOption__wrapper">
+    <div
+      v-if="selectedSimpleProduct"
+      class="ProductsKitCartOption__product"
+      :style="productСoverBg"
+      @click="scrollToOption()">
+      <div
+        class="ProductsKitCartOption__clear"
+        @click.stop.prevent="unselectOption()">
+        x
+      </div>
+    </div>
+    <div
+      v-else
+      class="ProductsKitCartOption__placeholder"
+      @click="scrollToOption()">
+      <span>+</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProductMediumCover, getBgStyle } from '@lancom/shared/assets/js/utils/colors';
+import { scrollToElement } from '@lancom/shared/assets/js/utils/scroll';
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  name: 'ProductsKitCartOption',
+  props: {
+    productsKit: {
+      type: Object,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('productsKit', [
+      'selectedOptionsProducts',
+      'selectedOptionsSimpleProducts',
+      'selectedOptionsColors',
+      'selectedOptionsSizes'
+    ]),
+    selectedColor() {
+      return this.selectedOptionsColors[this.option._id];
+    },
+    selectedSize() {
+      return this.selectedOptionsSizes[this.option._id];
+    },
+    selectedProduct() {
+      const selectedProductId = this.selectedOptionsProducts[this.option._id]?._id;
+      const product = this.option.products.find(p => p._id === selectedProductId);
+      return product;
+    },
+    selectedSimpleProduct() {
+      const simpleProducts = this.selectedOptionsSimpleProducts[this.option._id] || [];
+      return simpleProducts.find(sp => {
+        const isSameSize = sp.size?._id === this.selectedSize?._id;
+        const isSameColor = sp.color?._id === this.selectedColor?._id;
+        return isSameSize && isSameColor;
+      });
+    },
+    productСover() {
+      return getProductMediumCover(this.selectedProduct, 'front', this.selectedColor);
+    },
+    productСoverBg() {
+      return getBgStyle(this.productСover);
+    },
+  },
+  methods: {
+    ...mapActions('productsKit', ['clearOption']),
+    unselectOption() {
+      const params = { option: this.option };
+      this.clearOption(params);
+    },
+    scrollToOption() {
+      console.log('option: ', this.option);
+      scrollToElement(`option_${this.option._id}`, 200);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kit-cart-option';
+</style>

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

@@ -0,0 +1,9 @@
+@import "@/assets/scss/variables";
+
+.ProductsKitOptions {
+  &__option {
+    padding-left: 15px;
+    border-left: 3px solid $gray;
+    margin-bottom: 20px;
+  }
+}

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="ProductsKitOptions__wrapper">
+    <products-kit-option
+      v-for="option in productsKit.options"
+      :key="option._id"
+      :products-kit="productsKit"
+      :option="option"
+      :id="`option_${option._id}`"
+      class="ProductsKitOptions__option" />
+  </div>
+</template>
+
+<script>
+import ProductsKitOption from './products_kit_option/products-kit-option';
+
+export default {
+  name: 'ProductsKitOptions',
+  components: {
+    ProductsKitOption
+  },
+  props: {
+    productsKit: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kit-options';
+</style>

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

@@ -0,0 +1 @@
+@import "@/assets/scss/variables";

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

@@ -0,0 +1,36 @@
+<template>
+  <div class="ProductsKitOption__wrapper">
+    <div class="mb-6">
+      <div class="lc_h3">{{ option.name }}</div>
+      <div v-html="option.description"></div>
+    </div>
+    <products-kit-option-products
+      :products-kit="productsKit"
+      :option="option" />
+  </div>
+</template>
+
+<script>
+import ProductsKitOptionProducts from './products_kit_option_products/products-kit-option-products';
+
+export default {
+  name: 'ProductsKitOption',
+  components: {
+    ProductsKitOptionProducts
+  },
+  props: {
+    productsKit: {
+      type: Object,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kit-option';
+</style>

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

@@ -0,0 +1 @@
+@import "@/assets/scss/variables";

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="ProductsKitOptionColor__wrapper">
+    <multiselect
+      v-model="selectedColor"
+      value="_id"
+      label="name"
+      track-by="_id"
+      placeholder="Select colour"
+      :options="availableColors"
+      :allow-empty="false"
+      :searchable="false"
+      :option-height="60">
+      <template #option="{ option }">
+        <div class="ProductsKitOptionColor__option">
+          <span
+            class="ProductsKitOptionColor__option-name">
+            {{ option.name }}
+          </span>
+          <product-color-image
+            class="ProductsKitOptionColor__option-preview"
+            :color="option" />
+        </div>
+      </template>
+      <template #singleLabel="{ option }">
+        <div class="ProductsKitOptionColor__option">
+          {{ option.name }}
+        </div>
+      </template>
+    </multiselect>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import Multiselect from 'vue-multiselect';
+import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+
+export default {
+  name: 'ProductsKitOptionColor',
+  components: {
+    Multiselect,
+    ProductColorImage
+  },
+  props: {
+    productsKit: {
+      type: Object,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('productsKit', [
+      'selectedOptionsSimpleProducts',
+      'selectedOptionsColors',
+    ]),
+    selectedColor: {
+      get () {
+        return this.selectedOptionsColors[this.option._id];
+      },
+      set(color) {
+        this.selectOptionColor({ option: this.option, color });
+      }
+    },
+    availableColors() {
+      const simpleProducts = this.selectedOptionsSimpleProducts[this.option._id] || [];
+      const uniqueColorsMap = new Map();
+      simpleProducts
+        .filter(sp => sp.quantityStock > 0)
+        .forEach(sp => {
+          if (sp.color && !uniqueColorsMap.has(sp.color._id)) {
+            uniqueColorsMap.set(sp.color._id, sp.color);
+          }
+        });
+      return Array.from(uniqueColorsMap.values());
+    }
+  },
+  methods: {
+    ...mapActions('productsKit', ['selectOptionColor'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kit-option-color';
+</style>

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

@@ -0,0 +1,7 @@
+@import "@/assets/scss/variables";
+
+.ProductsKitOptionProducts {
+  &__wrapper {
+    display: flex;
+  }
+}

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

@@ -0,0 +1,36 @@
+<template>
+  <div class="ProductsKitOptionProducts__wrapper">
+    <products-kit-option-product
+      v-for="product in option.products"
+      :key="product._id"
+      :products-kit="productsKit"
+      :option="option"
+      :product="product"
+      class="ProductsKitOptionProducts__product" />
+  </div>
+</template>
+
+<script>
+import ProductsKitOptionProduct from './products_kit_option_product/products-kit-option-product';
+
+export default {
+  name: 'ProductsKitOptionProducts',
+  components: {
+    ProductsKitOptionProduct
+  },
+  props: {
+    productsKit: {
+      type: Object,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kit-option-products';
+</style>

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

@@ -0,0 +1,20 @@
+@import "@/assets/scss/variables";
+
+.ProductsKitOptionProduct {
+  &__wrapper {
+    border: 1px solid $gray;
+    &--active {
+      border: 1px solid $green;
+    }
+  }
+  &__preview {
+    width: 250px;
+    height: 490px;
+    margin: 0 0 15px 15px;
+    position: relative;
+    z-index: 1;
+  }
+  &__select {
+    padding: 0 20px 10px 20px;
+  }
+}