@lancom/shared 0.0.62 → 0.0.66

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

@@ -0,0 +1,70 @@
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import confirmModal from '@lancom/shared/mixins/confirm';
+
+export default {
+  mixins: [
+    confirmModal
+  ],
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('auth', ['user']),
+    ...mapGetters('cart', [
+      'entities',
+      'simpleProducts',
+      'suburb',
+      'quantities',
+      'notValidProductsQuantities',
+      'notValidPrintsQuantities'
+    ]),
+    isNotValidQuantity() {
+      return this.isNotValidProductsQuantity || this.isNotValidPrintsQuantity;
+    },
+    isNotValidProductsQuantity() {
+      return this.notValidProductsQuantities.length > 0;
+    },
+    isNotValidPrintsQuantity() {
+      return this.notValidPrintsQuantities.length > 0;
+    }
+  },
+  watch: {
+    entities() {
+      this.calculateCartPrice(this.shop);
+    }
+  },
+  mounted() {
+    this.calculateCartPrice(this.shop);
+    if (!this.suburb && this.user?.suburb) {
+      this.handleSuburbChange(this.user.suburb);
+    }
+    console.log('user: ', this.user);
+  },
+  methods: {
+    ...mapMutations('cart', [
+      'setSuburb'
+    ]),
+    ...mapActions('cart', [
+      'removeSimpleProductsFromCart',
+      'calculateCartPrice'
+    ]),
+    handleSuburbChange(suburb) {
+      this.setSuburb(suburb);
+      this.calculateCartPrice(this.shop);
+    },
+    async removeSimpleProducts(simpleProducts) {
+      const message = 'This will delete all items in this row, Press OK to continue or Cancel';
+      const confirmed = await this.showConfirmationModal(message);
+      if (confirmed) {
+        const data = { simpleProducts, shop: this.shop };
+        this.removeSimpleProductsFromCart(data);
+      }
+    },
+    async removeAllSimpleProducts() {
+      const message = 'This will delete all items in cart, Press OK to continue or Cancel';
+      const confirmed = await this.showConfirmationModal(message);
+      if (confirmed) {
+        const data = { simpleProducts: this.simpleProducts, shop: this.shop };
+        this.removeSimpleProductsFromCart(data);
+      }
+    }
+  }
+};

package/components/checkout/cart/cart.scss

@@ -0,0 +1,115 @@
+@import '@/assets/scss/variables';
+
+.Cart {
+  &__total {
+    padding: 12px;
+    background-color: $primary_100;
+    &-container {
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+      flex-direction: column;
+      margin-top: 50px;
+    }
+  }
+  &__postcode {
+    &-container {
+      margin-top: 30px;
+    }
+    &-prompt {
+      padding-bottom: 10px;
+      &-icon {
+        font-size: 14px;
+      }
+    }
+  }
+  &__quantity-errors {
+    margin-top: 10px;
+  }
+}
+
+.ProductColorsSelector {
+  &__wrapper {
+    margin-top: 35px;
+  }
+  &__controls {
+    display: flex;
+  }
+  &__add-btn {
+    flex-grow: 1;
+    .Btn__wrapper {
+      width: 100%;
+    }
+  }
+  &__head {
+    height: 50px;
+    flex-grow: 2;
+    background: $gray;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 22px;
+    text-transform: uppercase;
+    color: $black;
+    cursor: pointer;
+
+    i {
+      &:before {
+        transform: rotate(180deg);
+        transition: transform .22s ease-in-out;
+      }
+    }
+    &--opened {
+      i {
+        &:before {
+          transform: rotate(0);
+        }
+      }
+    }
+  }
+  &__section {
+    margin-top: 24px;
+  }
+  &__option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &-preview {
+      width: 30px;
+      height: 30px;
+      margin-right: 10px;
+    }
+  }
+}
+
+::v-deep .ProductColorsSelectorOptions {
+  &__wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fill,42px);
+    grid-column-gap: 9px;
+    grid-row-gap: 9px;
+    padding-top: 0;
+  }
+  &__color {
+    width: 42px;
+    height: 42px;
+    &::before,
+    &-inner {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: 0;
+    }
+  }
+}
+
+::v-deep {
+  .multiselect__input {
+    color: $black;
+  }
+}

package/components/checkout/cart/cart.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="Cart__wrapper">
+    <div
+      v-if="entities.length">
+      <div class="form-row Cart__products">
+        <div class="d-flex">
+          <btn
+            v-if="hasSelectedEntities"
+            btn-class="green"
+            btn-label="Remove Selected"
+            @onclick="removeSelectedEntities" />
+          <btn
+            v-if="hasGroupEntities"
+            btn-class="green"
+            btn-label="Clear Cart"
+            @onclick="removeAllEntities" />
+        </div>
+        <slot name="cart-entities-groups" v-bind="{ groupedEntities, selectedEntities }">
+          <cart-entities-group
+            v-for="[groupKey, group] in groupedEntities"
+            :key="groupKey"
+            :group="group"
+            :selected-entities="selectedEntities"
+            @remove="removeGroupEntities" />
+        </slot>
+      </div>
+      <div class="Cart__postcode-container">
+        <div
+          v-if="!suburb"
+          class="lc_regular16 Cart__postcode-prompt">
+          <i class="icon-attention-circled Cart__postcode-prompt-icon"></i>
+          Enter postcode to calculate delivery
+        </div>
+        <postcode-select
+          :suburb="suburb"
+          @select="handleSuburbChange">
+        </postcode-select>
+      </div>
+      <div class="Cart__total-container">
+        <cart-price-info :items-label="itemsLabel" />
+      </div>
+      <div class="Cart__quantity-errors">
+        <cart-quantity-errors />
+      </div>
+    </div>
+    <div
+      v-else
+      class="lc_caption lc_text-centered Cart__no-entities">
+      Your cart is empty.
+    </div>
+  </div>
+</template>
+
+<script>
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import CartEntitiesGroup from './cart_entities_group/cart-entities-group';
+import CartPriceInfo from './cart_price_info/cart-price-info';
+import CartQuantityErrors from './cart_quantity_errors/cart-quantity-errors.vue';
+import CartMixin from './cart.mixin';
+
+export default {
+  name: 'CheckoutCart',
+  components: {
+    CartEntitiesGroup,
+    CartPriceInfo,
+    CartQuantityErrors,
+    PostcodeSelect
+  },
+  filters: { price },
+  mixins: [CartMixin]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart.scss';
+</style>

package/components/checkout/cart/cart_entities_group/cart-entities-group.mixin.js

@@ -0,0 +1,114 @@
+import { mapGetters } from 'vuex';
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+import ImageViewer from '@lancom/shared/components/common/image_viewer/image-viewer';
+import { SIDE_TYPES } from '@lancom/shared/assets/js/constants/sides';
+import { price, sizesRange, side, staticLink } from '@lancom/shared/assets/js/utils/filters';
+import { getProductColorImages } from '@lancom/shared/assets/js/utils/product';
+import CartEntitiesGroupSizeCell from './cart_entities_group_size_cell/cart-entities-group-size-cell';
+
+export default {
+  components: {
+    ProductSideWithPrint,
+    CartEntitiesGroupSizeCell
+  },
+  filters: {
+    price,
+    sizesRange,
+    side
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    selectedGroups: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    ...mapGetters('cart', [
+      'cartPricing',
+      'cartProductsPricing'
+    ]),
+    images() {
+      return getProductColorImages(this.entity, this.entity.color);
+    },
+    entity() {
+      return this.group.entities[0];
+    },
+    product() {
+      return this.entity.product;
+    },
+    sumPrints() {
+      return (this.entity.prints || []).length;
+    },
+    hasPrints() {
+      return this.sumPrints > 0;
+    },
+    totalPrice() {
+      const predicate = (sum, e) => {
+        const { totalPrice = 0 } = this.cartProductsPricing[e.guid] || {};
+        return sum + totalPrice;
+      };
+      return this.group.entities.reduce(predicate, 0);
+    },
+    printsTotalPrice() {
+      const predicate = (sum, e) => {
+        const { prints = {} } = this.cartProductsPricing[e.guid] || {};
+        return sum + (prints.totalPrice || 0);
+      };
+      return this.group.entities.reduce(predicate, 0);
+    },
+    productUnitPrice() {
+      const { product } = this.cartProductsPricing[this.entity.guid] || {};
+      return product?.price;
+    },
+    productsTotalPrice() {
+      const predicate = (sum, e) => {
+        const { product = {} } = this.cartProductsPricing[e.guid] || {};
+        return sum + (product.totalPrice || 0);
+      };
+      return this.group.entities.reduce(predicate, 0);
+    },
+    entitiesWithAmount() {
+      return this.group.entities.filter(e => e.amount > 0);
+    },
+    totalAmount() {
+      return this.entitiesWithAmount.reduce((amount, entity) => {
+        return amount + entity.amount;
+      }, 0);
+    }
+  },
+  methods: {
+    remove() {
+      this.$emit('remove', this.group);
+    },
+    showImage(images, index) {
+      this.$modal.show(
+        ImageViewer,
+        {
+          items: images.map(({ origin, type }) => ({
+            src: staticLink(origin),
+            color: this.entity.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'
+        }
+      );
+    }
+  }
+};

package/components/checkout/cart/cart_entities_group/cart-entities-group.scss

@@ -0,0 +1,74 @@
+@import "@/assets/scss/variables";
+
+.CartEntitiesGroup {
+  &__wrapper {
+    padding-bottom: 20px;
+    border-bottom: 1px solid $grey_3;
+    & + & {
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 2px solid #FFF;
+    }
+  }
+
+  &__main {
+    display: grid;
+    grid-template-columns: 100px  100px 1fr;
+    grid-column-gap: 5px;
+    grid-row-gap: 5px;
+
+    @media (max-width: $bp-extra-small-max) {
+      grid-template-columns: repeat(2, 50%);
+      grid-gap: 1em;
+    }
+  }
+
+  &__amount {
+    display: flex;
+    flex-direction: row;
+    margin-top: 16px;
+  }
+  &__thumbnails {
+    display: flex;
+  }
+  &__thumbnail {
+    width: 100px;
+    height: 100px;
+    position: relative;
+    text-align: center;
+    font-size: 12px;
+    color: $grey_1;
+    cursor: pointer;
+    & + & {
+      margin-left: 4px;
+    }
+  }
+  &__info {
+    padding: 0 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    @media (max-width: $bp-extra-small-max) {
+      grid-column: 1/3;
+    }
+    &-row {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+  &__product-groups {
+    margin-bottom: 10px;
+  }
+  &__wrapper:hover &__remove {
+    opacity: 1;
+  }
+  &__field-action {
+    cursor: pointer;
+  }
+  &__remove {
+    cursor: pointer;
+    color: $grey_5;
+    font-size: 24px;
+  }
+}

package/components/checkout/cart/cart_entities_group/cart-entities-group.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="CartEntitiesGroup__wrapper">
+    <div class="CartEntitiesGroup__main">
+      <div
+        v-for="(thumbnail, index) in images"
+        :key="index"
+        class="CartEntitiesGroup__thumbnail"
+        @click="showImage(images, index)">
+        <product-side-with-print
+          :product="entity"
+          :side="thumbnail.type" />
+        {{ thumbnail.type | side }}
+      </div>
+      <div class="CartEntitiesGroup__info">
+        <div class="CartEntitiesGroup__info-row">
+          <div class="lc_overline">
+            {{ entity.product.name }} | {{ (entity.product.brand && entity.product.brand.name) }} | {{ entity.product.style }}
+          </div>
+          <i
+            class="icon-delete CartEntitiesGroup__remove"
+            @click="remove"></i>
+        </div>
+        <div class="CartEntitiesGroup__info-row">
+          <div class="lc_regular14 lc_grey1">
+            Color: {{ group.color.name }}
+          </div>
+        </div>
+        <div v-if="cartPricing">
+          <div class="CartEntitiesGroup__info-row">
+            <div class="lc_regular14 lc_black">
+              Print cost: {{ printsTotalPrice | price }}
+            </div>
+            <div class="lc_regular14 lc_black">
+              {{ totalAmount }} items
+            </div>
+          </div>
+          <div class="CartEntitiesGroup__info-row">
+            <div class="lc_regular14 lc_black">
+              Tee cost: {{ productsTotalPrice | price }}
+            </div>
+            <div class="lc_medium16 lc_black">
+              Cost: {{ totalPrice | price }}
+            </div>
+          </div>
+        </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>
+    </div>
+    <div class="CartEntitiesGroup__amount">
+      <cart-entities-group-size-cell
+        v-for="groupEntity in group.entities"
+        :key="groupEntity._id"
+        :entity="groupEntity" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CartEntitiesGroup from './cart-entities-group.mixin';
+
+export default {
+  name: 'CartEntitiesGroup',
+  mixins: [
+    CartEntitiesGroup
+  ]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-entities-group.scss';
+</style>

package/components/checkout/cart/cart_entities_group/cart_entities_group_prints/cart-entities-group-prints.scss

@@ -0,0 +1,29 @@
+@import "@/assets/scss/variables";
+
+.CartEntitiesGroupPrints {
+  &__table {
+    ::v-deep {
+      tr {
+        height: 38px;
+      }
+      td {
+        border: 1px solid $gray;
+        text-align: center;
+        strong {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  &__th {
+    font-weight: bold !important;
+    background: $gray;
+  }
+  &__name {
+    width: 35px;
+    span {
+      writing-mode: vertical-lr;
+      transform: rotate(180deg);
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="CartEntitiesGroupPrints__wrapper">
+    <table class="lc_table tight-rows CartEntitiesGroupPrints__table">
+      <tbody>
+        <tr>
+          <td
+            :rowspan="sumPrints + 1"
+            class="CartEntitiesGroupPrints__name">
+            <span class="lc_title-small">
+              Decoration
+            </span>
+          </td>
+          <td class="CartEntitiesGroupPrints__th lc_title-small">
+            Type
+          </td>
+          <td class="CartEntitiesGroupPrints__th lc_title-small">
+            location
+          </td>
+          <td class="CartEntitiesGroupPrints__th lc_title-small">
+            size
+          </td>
+          <td class="CartEntitiesGroupPrints__th lc_title-small">
+            Setup cost
+          </td>
+          <td class="CartEntitiesGroupPrints__th lc_title-small">
+            QTY
+          </td>
+          <td class="CartEntitiesGroupPrints__th lc_title-small">
+            Price
+          </td>
+          <td class="CartEntitiesGroupPrints__th lc_title-small">
+            Total
+          </td>
+        </tr>
+        <cart-entities-group-print
+          v-for="(print, index) in entity.prints"
+          :key="`${entity.guid}_${index}`"
+          :group="group"
+          :print="print" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import CartEntitiesGroupPrint from '@lancom/shared/components/checkout/cart/cart_entities_group/cart_entities_group_prints/cart_entities_group_print/cart-entities-group-print';
+
+export default {
+  name: 'CartEntitiesGroupPrints',
+  components: {
+    CartEntitiesGroupPrint
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    entity() {
+      return this.group.entities[0];
+    },
+    product() {
+      return this.entity.product;
+    },
+    sumPrints() {
+      return (this.entity.prints || []).length;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-entities-group-prints.scss';
+</style>