@lancom/shared 0.0.62 → 0.0.66

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

@@ -0,0 +1,96 @@
+@import "@/assets/scss/variables";
+
+.CartEntityColorSimpleProducts {
+  &__wrapper {
+    display: flex;
+    position: relative; 
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column; 
+      align-items: center;
+    }
+  }
+  &__image-wrapper {
+    width: 70px;
+    @media (max-width: $bp-extra-small-max) {
+      width: 200px;
+      margin-top: 20px;
+    }
+  }
+  &__info {
+    flex-grow: 1;
+    margin-left: 20px;
+    @media (max-width: $bp-medium-max) {
+      margin-left: 5px;
+    }
+    @media (max-width: $bp-extra-small-max) {
+      margin-left: 0px;
+    }
+  }
+
+  &__image {
+    width: 70px;
+    height: 70px;
+    margin-top: 20px;
+    @media (max-width: $bp-extra-small-max) {
+      width: 200px;
+      height: 200px;
+    }
+  }
+
+  &__features {
+    margin-top: 16px;
+    padding-bottom: 14px;
+    display: flex;
+    border-bottom: 1px solid #F4F4F4;
+  }
+  &__feature {
+    margin-right: 19px;
+    display: flex;
+    &>div:first-child {
+      margin-right: 6px;
+    }
+  }
+
+  &__sum-wrapper {
+    margin-top: 14px;
+    display: flex;
+    padding-bottom: 14px;
+    align-items: center;
+    @media (max-width: $bp-medium-max) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+  &__amount {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    &-labels {
+      margin-right: 26px;
+    }
+  }
+  &__totals {
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    @media (max-width: $bp-medium-max) {
+      width: auto;
+      align-self: flex-end;
+      margin-top: 20px;
+    }
+  }
+  &__total {
+    display: flex;
+    &>div:first-child {
+      margin-right: 6px;
+    }
+  }
+
+  &__remove {
+    font-size: 20px;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="CartEntityColorSimpleProducts__wrapper">
+    <div class="CartEntityColorSimpleProducts__image-wrapper">
+      <div
+        class="CartEntityColorSimpleProducts__image"
+        @click="showImage(images, 0)">
+        <product-side-with-print
+          :product="group"
+          :default-preview="defaultPreview"
+          side="front"
+          size="medium" />
+      </div>
+    </div>
+    <div class="CartEntityColorSimpleProducts__info">
+      <div class="CartEntityColorSimpleProducts__features">
+        <div class="CartEntityColorSimpleProducts__feature">
+          <div class="lc_title-small">
+            Colour:
+          </div>
+          <div class="lc_body-small">
+            {{ group.color.name }}
+          </div>
+        </div>
+        <i
+          class="icon-delete CartEntityColorSimpleProducts__remove"
+          @click="remove"></i>
+      </div>
+      <div class="CartEntityColorSimpleProducts__sum-wrapper">
+        <div class="CartEntityColorSimpleProducts__amount">
+          <div class="CartEntityColorSimpleProducts__amount-labels hidden-sm-and-down">
+            <div class="lc_title-small ">
+              Size:
+            </div>
+            <div class="lc_title-small mt-8">
+              Qty:
+            </div>
+          </div>
+          <cart-entity-color-simple-product
+            v-for="simpleProduct in group.simpleProducts"
+            :key="simpleProduct._id"
+            :simple-product="simpleProduct" />
+        </div>
+        <div class="CartEntityColorSimpleProducts__totals">
+          <div class="CartEntityColorSimpleProducts__total">
+            <div class="lc_title-small">
+              Total Qty:
+            </div>
+            <div class="lc_body-small">
+              {{ totalAmount }}
+            </div>
+          </div>
+          <div class="CartEntityColorSimpleProducts__total mt-6">
+            <div class="lc_title-small">
+              Total price:
+            </div>
+            <div class="lc_body-small">
+              {{ productsTotalPrice | price }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+import CartEntityColorSimpleProduct from './cart_entity_color_simple_product/cart-entity-color-simple-product';
+import CartEntityColorSimpleProducts from './cart-entity-color-simple-products.mixin';
+
+export default {
+  name: 'CartEntityColorSimpleProducts',
+  filters: {
+    price
+  },
+  components: {
+    CartEntityColorSimpleProduct,
+    ProductSideWithPrint
+  },
+  mixins: [
+    CartEntityColorSimpleProducts
+  ]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-entity-color-simple-products.scss';
+</style>

package/components/checkout/cart/cart_entity/cart_entity_color_simple_products/cart_entity_color_simple_product/cart-entity-color-simple-product.scss

@@ -0,0 +1,74 @@
+@import "@/assets/scss/variables";
+
+.CartColorSimpleProduct {
+  &__wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-right: 4px;
+    margin-bottom: 5px;
+  }
+  &__label {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    color: $black;
+    margin-bottom: 6px;
+    margin-top: 0px;
+  }
+  &__field-wrapper {
+    position: relative;
+    &:hover .CartColorSimpleProduct__controls {
+      display: flex;
+    }
+  }
+  &__field {
+    width: 32px;
+    height: 28px;
+    background: $gray;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    color: #A2A2A2;
+    border-radius: 0;
+    padding: 2px !important;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    &[type=number] {
+      -moz-appearance: textfield;
+    }
+    &.empty {
+      color: #B0B0BA;
+    }
+  }
+  &__controls {
+    display: flex;
+    flex-direction: column;
+    display: none;
+  }
+  &__control {
+    position: absolute;
+    bottom: -10px;
+    width: 16px;
+    height: 16px;
+    background: $white;
+    border: 1px solid $gray;
+    font-size: 12px;
+    z-index: 4;
+    cursor: pointer;
+    text-align: center;
+    &--encrease {
+      right: 0px;
+    }
+    &--decrease {
+      left: 0px;
+    }
+  }
+}

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

@@ -0,0 +1,129 @@
+<template>
+  <div class="CartColorSimpleProduct__wrapper">
+    <label
+      v-if="showLabel"
+      :for="`amount-${simpleProduct.guid}`"
+      class="lc_regular16 CartColorSimpleProduct__label">
+      {{ simpleProduct.size.shortName }}
+    </label>
+    <div
+      v-if="editable"
+      class="CartColorSimpleProduct__field-wrapper">
+      <input
+        :id="`amount-${simpleProduct.guid}`"
+        ref="input"
+        v-model.number="model"
+        type="number"
+        min="0"
+        class="form-field centered CartColorSimpleProduct__field"
+        :class="{ empty: !model }"
+        @change="onChange()"
+        @focus="onFocus()"
+        @blur="onBlur()" />
+      <div class="CartColorSimpleProduct__controls">
+        <span
+          class="CartColorSimpleProduct__control CartColorSimpleProduct__control--decrease"
+          @click="decrease()">
+          -
+        </span>
+        <span
+          class="CartColorSimpleProduct__control CartColorSimpleProduct__control--encrease"
+          @click="encrease()">
+          +
+        </span>
+      </div>
+    </div>
+    <div
+      v-else
+      class="centered CartColorSimpleProduct__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: 'CartColorSimpleProduct',
+  mixins: [confirm],
+  props: {
+    simpleProduct: {
+      type: Object,
+      required: true
+    },
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      defaultValue: 0,
+      setSimpleProductAmountWithDebounce: debounce(this.setSimpleProductAmount, 500)
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('cart', ['simpleProducts']),
+    model: {
+      get() {
+        return (this.simpleProducts.find(sp => sp.guid === this.simpleProduct.guid) || {}).amount || this.defaultValue;
+      },
+      set(value) {
+        if (this.simpleProduct.quantityStock && this.simpleProduct.quantityStock < value) {
+          const message = `Maximum value: ${this.simpleProduct.quantityStock}`;
+          this.showConfirmationModal(message);
+        }
+        this.setSimpleProductAmountWithDebounce({
+          guid: this.simpleProduct.guid,
+          amount: this.formatAmount(value),
+          shop: this.shop
+        });
+      }
+    }
+  },
+  methods: {
+    ...mapActions('cart', ['setSimpleProductAmount']),
+    onChange() {
+      if (this.$refs.input) {
+        this.$refs.input.blur();
+      }
+    },
+    onFocus() {
+      this.defaultValue = '';
+    },
+    onBlur() {
+      this.defaultValue = 0;
+    },
+    formatAmount(value) {
+      return inRange(value, 0, this.simpleProduct.quantityStock || 999);
+    },
+    encrease() {
+      this.setSimpleProductAmount({
+        guid: this.simpleProduct.guid,
+        amount: this.formatAmount(this.model + 1),
+        shop: this.shop
+      });
+    },
+    decrease() {
+      this.setSimpleProductAmount({
+        guid: this.simpleProduct.guid,
+        amount: this.formatAmount(this.model - 1),
+        shop: this.shop
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-entity-color-simple-product.scss';
+</style>

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

@@ -0,0 +1,65 @@
+@import "@/assets/scss/variables";
+
+.CartEntityPrints {
+  &__title {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 30px 0 10px 0;
+  }
+  &__table {
+    min-height: 100px;
+    tbody {
+      @media (max-width: $bp-small-max) {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    ::v-deep {
+      tr {
+        height: 38px;
+        @media (max-width: $bp-small-max) {
+          height: auto !important;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          margin: 10px 0;
+        }
+      }
+      td {
+        border: 1px solid $gray;
+        text-align: center;
+        @media (max-width: $bp-small-max) {
+          width: 50%;
+          padding: 5px;
+          &:last-child {
+            width: 100%;
+          }
+        }
+        strong {
+          font-weight: bold;
+        }
+        span {
+          display: block;
+          font-size: 12px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  &__head {
+    @media (max-width: $bp-small-max) {
+      display: none !important;
+    }
+  }
+  &__th {
+    font-weight: bold !important;
+    background: $gray;
+  }
+  &__name {
+    width: 35px;
+    span {
+      writing-mode: vertical-lr;
+      transform: rotate(180deg);
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+<template>
+  <div class="CartEntityPrints__wrapper">
+    <div class="CartEntityPrints__title">
+      Decoration
+    </div>
+    <table class="lc_table tight-rows CartEntityPrints__table">
+      <tbody>
+        <tr class="CartEntityPrints__head">
+          <td
+            :rowspan="sumPrints * 2 + 1"
+            class="CartEntityPrints__name ">
+            <span class="lc_title-small">
+              Decoration
+            </span>
+          </td>
+          <td class="CartEntityPrints__th lc_title-small">
+            Type
+          </td>
+          <td class="CartEntityPrints__th lc_title-small">
+            location
+          </td>
+          <td class="CartEntityPrints__th lc_title-small">
+            size
+          </td>
+          <td class="CartEntityPrints__th lc_title-small">
+            Setup cost
+          </td>
+          <td class="CartEntityPrints__th lc_title-small">
+            QTY
+          </td>
+          <td class="CartEntityPrints__th lc_title-small">
+            Price
+          </td>
+          <td class="CartEntityPrints__th lc_title-small">
+            Total
+          </td>
+        </tr>
+        <cart-entity-print
+          v-for="(print, index) in entity.prints"
+          :key="`${entity.guid}_${index}`"
+          :entity="entity"
+          :print="print" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import CartEntityPrint from './cart_entity_print/cart-entity-print.vue';
+
+export default {
+  name: 'CartEntityPrints',
+  components: {
+    CartEntityPrint
+  },
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    sumPrints() {
+      return (this.entity.prints || []).length;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-entity-prints.scss';
+</style>

package/components/checkout/cart/cart_entity/cart_entity_prints/cart_entity_print/cart-entity-print.scss

@@ -0,0 +1,31 @@
+@import "@/assets/scss/variables";
+
+.CartEntityPrint {
+  &__info {
+    height: 30px !important;
+    margin: -10px 0 0 0 !important;
+  }
+  &__wrapper {
+    display: contents;
+  }
+  &__content {
+    text-align: left !important;
+    &-inner {
+      display: flex;
+      margin-left: 10px;
+      b {
+        font-weight: bold;
+      }
+      a {
+        color: $black;
+      }
+    }
+    &-text {
+      max-width: 200px;
+      text-overflow: ellipsis;
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}

package/components/checkout/cart/cart_entity/cart_entity_prints/cart_entity_print/cart-entity-print.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="CartEntityPrint__wrapper">
+    <tr>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Print Type</span>
+        {{ print.printType.name }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Location</span>
+        {{ print.printArea.name }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Size</span>
+        {{ print.printSize.name }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Setup cost</span>
+        {{ setupCoast | price }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">QTY</span>
+        {{ totalAmount }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Price</span>
+        {{ price | price }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Total</span>
+        <strong>
+          {{ totalPrice | price }}
+        </strong>
+      </td>
+    </tr>
+    <tr class="CartEntityPrint__info">
+      <td
+        colspan="7"
+        class="CartEntityPrint__content lc_regular12 ">
+        <div class="CartEntityPrint__content-inner">
+          <div
+            v-if="layer.type === 'text'"
+            class="CartEntityPrint__content-text">
+            <b>Text:</b> {{ layer.text }}
+          </div>
+          <div v-else-if="layer.file">
+            <b>Logo:</b>
+            <a
+              :href="layer.file.origin"
+              target="_blank">
+              {{ layer.file.fileName }}
+            </a>
+          </div>
+          <div v-if="layer.notes" class="ml-10 CartEntityPrint__content-text">
+            <b>Notes:</b> {{ layer.notes }}
+          </div>
+        </div>
+      </td>
+    </tr>
+  </div>
+</template>
+
+<script>
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import CartEntity from '@lancom/shared/components/checkout/cart/cart_entity/cart-entity.mixin';
+
+export default {
+  name: 'CartEntityPrint',
+  filters: {
+    price
+  },
+  mixins: [
+    CartEntity
+  ],
+  props: {
+    print: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    productPrintPricing() {
+      return this.cartProductsPricing[this.entity.guid]?.prints[this.print.printArea._id] || {};
+    },
+    setupCoast() {
+      return this.productPrintPricing.setupPriceWithoutTax || 0;
+    },
+    price() {
+      return this.productPrintPricing.priceWithoutTax || 0;
+    },
+    totalPrice() {
+      return this.productPrintPricing.totalPriceWithoutTax || 0;
+    },
+    layer() {
+      return this.print.layers[0];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-entity-print.scss';
+</style>