@lancom/shared 0.0.62 → 0.0.66

package/components/checkout/cart/cart_entities_group/cart_entities_group_prints/cart_entities_group_print/cart-entities-group-print.vue

@@ -0,0 +1,88 @@
+<template>
+  <tr>
+    <td class="lc_body-small">
+      {{ print.printType.name }}
+    </td>
+    <td class="lc_body-small">
+      {{ print.printArea.name }}
+    </td>
+    <td class="lc_body-small">
+      {{ print.printSize.name }}
+    </td>
+    <td class="lc_body-small">
+      {{ setupCoast | price }}
+    </td>
+    <td class="lc_body-small">
+      {{ totalAmount }}
+    </td>
+    <td class="lc_body-small">
+      {{ price | price }}
+    </td>
+    <td class="lc_body-small">
+      <strong>
+        {{ totalPrice | price }}
+      </strong>
+    </td>
+  </tr>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'CartEntitiesGroupPrint',
+  filters: {
+    price
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true
+    },
+    print: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('cart', [
+      'cartProductsPricing'
+    ]),
+    entity() {
+      return this.group.entities[0];
+    },
+    entitiesWithAmount() {
+      return this.group.entities.filter(e => e.amount > 0);
+    },
+    entitiesPrintsPricing() {
+      return this.entitiesWithAmount.map(e => this.getEntityPrintsPricing(e));
+    },
+    setupCoast() {
+      const pricing = this.getEntityPrintsPricing(this.entity);
+      return pricing.setupPriceWithoutTax || 0;
+    },
+    price() {
+      const pricing = this.getEntityPrintsPricing(this.entity);
+      return pricing.priceWithoutTax || 0;
+    },
+    totalPrice() {
+      return this.entitiesPrintsPricing.reduce((total, { totalPriceWithoutTax = 0 }) => total + totalPriceWithoutTax, 0);
+    },
+    totalAmount() {
+      return this.entitiesWithAmount.reduce((amount, entity) => {
+        return amount + entity.amount;
+      }, 0);
+    }
+  },
+  methods: {
+    getEntityPrintsPricing(entity) {
+      return this.cartProductsPricing[entity.guid]?.prints[this.print.printArea._id] || {};
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-entities-group-print.scss';
+</style>

package/components/checkout/cart/cart_entities_group/cart_entities_group_size_cell/cart-entities-group-size-cell.scss

@@ -0,0 +1,23 @@
+@import "@/assets/scss/variables";
+
+.CartEntitiesGroupSizeCell {
+  &__wrapper {
+    width: 100%;
+    height: 100%;
+    padding: 6px 4px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+  &__field {
+    height: 36px;
+    padding: 2px !important;
+    &.empty {
+      color: #B0B0BA;
+    }
+  }
+  &__label {
+    color: $black;
+    margin-top: 8px;
+  }
+}

package/components/checkout/cart/cart_entities_group/cart_entities_group_size_cell/cart-entities-group-size-cell.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="CartEntitiesGroupSizeCell__wrapper">
+    <label
+      v-if="showLabel"
+      :for="`amount-${entity.guid}`"
+      class="lc_regular16 CartEntitiesGroupSizeCell__label">
+      {{ entity.size.shortName }}
+    </label>
+    <input
+      v-if="editable"
+      :id="`amount-${entity.guid}`"
+      v-model.number="model"
+      type="number"
+      min="0"
+      class="form-field centered CartEntitiesGroupSizeCell__field"
+      :class="{ empty: !model }"
+      @focus="onFocus()"
+      @blur="onBlur()" />
+    <div
+      v-else
+      class="centered CartEntitiesGroupSizeCell__field">
+      {{ model }}
+    </div>
+  </div>
+</template>
+
+<script>
+import debounce from 'lodash.debounce';
+import { mapGetters, mapActions } from 'vuex';
+import confirm from '@lancom/shared/mixins/confirm';
+import { inRange } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'CartEntitiesGroupSizeCell',
+  mixins: [confirm],
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    },
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      defaultValue: 0,
+      setEntityAmountWithDebounce: debounce(this.setEntityAmount, 500)
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('cart', ['entities']),
+    model: {
+      get() {
+        return (this.entities.find(e => e.guid === this.entity.guid) || {}).amount || this.defaultValue;
+      },
+      set(value) {
+        if (this.entity.quantityStock && this.entity.quantityStock < value) {
+          const message = `Maximum value: ${this.entity.quantityStock}`;
+          this.showConfirmationModal(message);
+        }
+        const amount = inRange(value, 0, this.entity.quantityStock || 999);
+        this.setEntityAmountWithDebounce({
+          guid: this.entity.guid,
+          amount,
+          shop: this.shop
+        });
+      }
+    }
+  },
+  methods: {
+    ...mapActions('cart', ['setEntityAmount']),
+    onFocus() {
+      this.defaultValue = '';
+    },
+    onBlur() {
+      this.defaultValue = 0;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-entities-group-size-cell.scss';
+</style>

package/components/checkout/cart/cart_entities_group_table/cart-entities-group-table.scss

@@ -0,0 +1,7 @@
+.CartEntitiesTable {
+  &__table {
+    td, th {
+      padding: 10px;
+    }
+  }
+}

package/components/checkout/cart/cart_entities_group_table/cart-entities-group-table.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="CartEntitiesTable__wrapper">
+    <table class="lc_table bordered CartEntitiesTable__table">
+      <thead class="centered">
+        <tr>
+          <th v-if="editable"></th>
+          <th></th>
+          <th>Product Name</th>
+          <th>Unit Price</th>
+          <th>Decoration</th>
+          <th>Qty</th>
+          <th>Subtotal</th>
+          <th v-if="editable"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <cart-entities-group-tr
+          v-for="[groupKey, group] in groupedEntities"
+          :key="groupKey"
+          :group="group"
+          :editable="editable"
+          :selected-groups="selectedEntities"
+          @select="$emit('select', $event)"
+          @remove="$emit('remove', $event)" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import CartEntitiesGroupTr from '@lancom/shared/components/checkout/cart/cart_entities_group_table//cart_entities_group_tr/cart-entities-group-tr';
+
+export default {
+  name: 'CartEntitiesTable',
+  components: {
+    CartEntitiesGroupTr
+  },
+  props: {
+    selectedEntities: {
+      type: Object,
+      default: () => ({})
+    },
+    groupedEntities: {
+      type: Array,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'cart-entities-group-table.scss';
+</style>

package/components/checkout/cart/cart_entities_group_table/cart_entities_group_tr/cart-entities-group-tr.scss

@@ -0,0 +1,10 @@
+.CartEntitiesGroup {
+  &__preview {
+    width: 70px;
+    height: 70px;
+  }
+  &__print-layers {
+    display: flex;
+    justify-content: space-between;
+  }
+}

package/components/checkout/cart/cart_entities_group_table/cart_entities_group_tr/cart-entities-group-tr.vue

@@ -0,0 +1,100 @@
+<template>
+  <tr class="CartEntitiesGroup__wrapper">
+    <td v-if="editable">
+      <input
+        type="checkbox"
+        :checked="selectedGroups[entity.guid]"
+        @click="$emit('select', entity)" />
+    </td>
+    <td>
+      <product-side-with-print
+        class="CartEntitiesGroup__preview"
+        :product="entity"
+        side="front" />
+    </td>
+    <td>
+      <div class="CartEntitiesGroup__info-row">
+        <div class="lc_overline">
+          {{ entity.product.name }} | {{ entity.product.brand.name }} | {{ entity.product.style }}
+        </div>
+      </div>
+      <div class="CartEntitiesGroup__info-row">
+        <div class="lc_regular14 lc_grey1">
+          SKU: {{ entity.SKU }}
+        </div>
+      </div>
+      <div class="CartEntitiesGroup__info-row">
+        <div class="lc_regular14 lc_grey1">
+          Size: {{ entity.size.shortName }}
+        </div>
+      </div>
+      <div class="CartEntitiesGroup__info-row">
+        <div class="lc_regular14 lc_grey1">
+          Color: {{ entity.color.name }}
+        </div>
+      </div>
+      <div
+        v-if="hasPrints"
+        class="CartEntitiesGroup__info-row">
+        <div class="lc_regular14 lc_grey1">
+          Decorations:
+        </div>
+        <div class="CartEntitiesGroup__print-layers">
+          <div>
+            <div
+              v-for="(print, index) in entity.prints"
+              :key="`${entity.guid}_${index}`"
+              class="lc_regular12 lc_grey1">
+              <div>
+                {{ print.printArea.name }} | {{ print.printSize.name }} | {{ print.printType.name }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </td>
+    <td>
+      <div v-if="cartPricing">
+        {{ productUnitPrice | price }}
+      </div>
+    </td>
+    <td>
+      <div v-if="cartPricing">
+        {{ printsTotalPrice | price }}
+      </div>
+    </td>
+    <td>
+      <cart-entities-group-size-cell
+        v-for="groupEntity in group.entities"
+        :key="groupEntity._id"
+        :entity="groupEntity"
+        :editable="editable"
+        :show-label="false" />
+    </td>
+    <td>
+      <div v-if="cartPricing">
+        {{ totalPrice | price }}
+      </div>
+    </td>
+    <td v-if="editable">
+      <i
+        class="icon-delete CartEntitiesGroup__remove"
+        @click="remove"></i>
+    </td>
+  </tr>
+</template>
+
+<script>
+import CartEntitiesGroup from '@lancom/shared/components/checkout/cart/cart_entities_group/cart-entities-group.mixin';
+
+export default {
+  name: 'CartEntitiesGroup',
+  mixins: [
+    CartEntitiesGroup
+  ]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-entities-group-tr.scss';
+</style>

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

@@ -0,0 +1,56 @@
+import { mapGetters } from 'vuex';
+import { groupSimpleProducts } from '@lancom/shared/assets/js/utils/cart';
+import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
+
+export default {
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('cart', [
+      'cartPricing',
+      'cartProductsPricing'
+    ]),
+    product() {
+      return this.entity.product;
+    },
+    productLink() {
+      return generateProductLink(this.product);
+    },
+    sumPrints() {
+      return (this.entity.prints || []).length;
+    },
+    hasPrints() {
+      return this.sumPrints > 0;
+    },
+    totalPrice() {
+      const { totalPriceWithoutTax = 0 } = this.cartProductsPricing[this.entity.guid] || {};
+      return totalPriceWithoutTax;
+    },
+    printsTotalPrice() {
+      const { prints = {} } = this.cartProductsPricing[this.product.guid] || {};
+      return prints.totalPriceWithoutTax || 0;
+    },
+    productsTotalPrice() {
+      const { product = {} } = this.cartProductsPricing[this.entity.guid] || {};
+      return product.totalPriceWithoutTax || 0;
+    },
+    simpleProductsWithAmount() {
+      return this.entity.simpleProducts.filter(sp => sp.amount > 0);
+    },
+    totalAmount() {
+      return this.simpleProductsWithAmount.reduce((amount, sp) => amount + sp.amount, 0);
+    },
+    groupedSimpleProducts() {
+      return groupSimpleProducts(this.entity, true, true);
+    }
+  },
+  methods: {
+    removeSimpleProducts(simpleProducts) {
+      this.$emit('remove', simpleProducts);
+    }
+  }
+};

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

@@ -0,0 +1,52 @@
+@import "@/assets/scss/variables";
+
+.CartEntity {
+  &__wrapper {
+    padding: 30px;
+    border: 1px solid $black;
+    margin-bottom: 10px;
+    display: flex;
+    position: relative;
+    @media (max-width: $bp-small-max) {
+      padding: 15px;
+    }
+  }
+  &__info {
+    flex-grow: 1;
+  }
+  &__link {
+    color: $black;
+  }
+  &__features {
+    margin-top: 16px;
+    padding-bottom: 14px;
+    display: flex;
+  }
+  &__feature {
+    margin-right: 19px;
+    display: flex;
+    &>div:first-child {
+      margin-right: 6px;
+    }
+  }
+  &__remove {
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    cursor: pointer;
+    font-size: 20px;
+  }
+  &__decorations {
+    margin-top: 14px;
+  }
+  &__subtotal {
+    text-align: right;
+    margin-top: 24px;
+  }
+  &__item {
+    border-bottom: 1px solid #F4F4F4;
+    &:first-child {
+      border-top: 1px solid #F4F4F4;
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+<template>
+  <div class="CartEntity__wrapper">
+    <div class="CartEntity__info">
+      <div class="lc_title">
+        <nuxt-link
+          class="CartEntity__link"
+          :to="productLink">
+          {{ product.name }}
+        </nuxt-link>
+      </div>
+      <div class="CartEntity__features">
+        <div class="CartEntity__feature">
+          <div class="lc_title-small">
+            SKU:
+          </div>
+          <div class="lc_body-small">
+            {{ product.SKU }}
+          </div>
+        </div>
+      </div>
+      <div>
+        <cart-entity-color-simple-products
+          v-for="[groupKey, group] in groupedSimpleProducts"
+          :key="groupKey"
+          :entity="entity"
+          :group="group"
+          :default-preview="groupedSimpleProducts.size === 1"
+          class="CartEntity__item"
+          @remove="removeSimpleProducts" />
+      </div>
+      <div
+        v-if="hasPrints"
+        class="CartEntity__decorations">
+        <cart-entity-prints :entity="entity" />
+      </div>
+      <div class="CartEntity__subtotal lc_title">
+        Subtotal: {{ totalPrice | price }}
+      </div>
+      <i
+        class="icon-delete CartEntity__remove"
+        @click="removeSimpleProducts(entity.simpleProducts)"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import CartEntityPrints from './cart_entity_prints/cart-entity-prints';
+import CartEntityColorSimpleProducts from './cart_entity_color_simple_products/cart-entity-color-simple-products';
+import CartEntity from './cart-entity.mixin';
+
+export default {
+  name: 'CartEntity',
+  filters: {
+    price
+  },
+  components: {
+    CartEntityPrints,
+    CartEntityColorSimpleProducts
+  },
+  mixins: [
+    CartEntity
+  ]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-entity.scss';
+</style>

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

@@ -0,0 +1,83 @@
+import { mapGetters } from 'vuex';
+import ImageViewer from '@lancom/shared/components/common/image_viewer/image-viewer';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
+import { getProductColorImages } from '@lancom/shared/assets/js/utils/product';
+
+export default {
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    },
+    group: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    defaultPreview: {
+      type: Boolean,
+      default: true
+    },
+    selectedGroups: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    ...mapGetters('cart', [
+      'cartPricing',
+      'cartProductsPricing'
+    ]),
+    images() {
+      return getProductColorImages(this.group, this.group.color);
+    },
+    product() {
+      return this.group.product;
+    },
+    productsTotalPrice() {
+      const predicate = (sum, e) => {
+        const product = this.cartProductsPricing[this.entity.guid]?.products[e.guid] || {};
+        return sum + (product.totalPriceWithoutTax || 0);
+      };
+      return this.group.simpleProducts.reduce(predicate, 0);
+    },
+    simpleProductsWithAmount() {
+      return this.group.simpleProducts.filter(e => e.amount > 0);
+    },
+    totalAmount() {
+      return this.simpleProductsWithAmount.reduce((amount, entity) => {
+        return amount + entity.amount;
+      }, 0);
+    }
+  },
+  methods: {
+    remove() {
+      this.$emit('remove', this.group.simpleProducts);
+    },
+    showImage(images, index) {
+      this.$modal.show(
+        ImageViewer,
+        {
+          items: images.map(({ origin, type }) => ({
+            src: staticLink(origin),
+            color: this.group.color.rgb
+            // print: this.entity.prints[SIDE_TYPES[type]]
+          })),
+          index
+        },
+        {
+          name: 'image-viewer-modal',
+          root: this.$root,
+          width: '100%',
+          height: 'auto',
+          adaptive: true,
+          clickToClose: true,
+          transition: 'from-top-to-bottom'
+        }
+      );
+    }
+  }
+};