@lancom/shared 0.0.62 → 0.0.66

package/components/order/order_view/order_product_color_simple_products/order-product-color-simple-products.scss

@@ -0,0 +1,95 @@
+@import "@/assets/scss/variables";
+
+.OrderProductColorSimpleProducts {
+  &__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: 7px;
+    padding-bottom: 7px;
+    display: flex;
+    border-bottom: 1px solid #F4F4F4;
+  }
+  &__feature {
+    margin-right: 19px;
+    display: flex;
+    &>div:first-child {
+      margin-right: 6px;
+    }
+  }
+
+  &__sum-wrapper {
+    margin-top: 7px;
+    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;
+    &-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/order/order_view/order_product_color_simple_products/order-product-color-simple-products.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="OrderProductColorSimpleProducts__wrapper">
+    <div class="OrderProductColorSimpleProducts__image-wrapper">
+      <div
+        class="OrderProductColorSimpleProducts__image"
+        @click="showImage(images, 0)">
+        <product-side-with-print
+          :product="group"
+          :default-preview="defaultPreview"
+          side="front"
+          size="medium" />
+      </div>
+    </div>
+    <div class="OrderProductColorSimpleProducts__info">
+      <div class="OrderProductColorSimpleProducts__features">
+        <div
+          v-if="group.color"
+          class="OrderProductColorSimpleProducts__feature">
+          <div class="lc_title-small">
+            Colour:
+          </div>
+          <div class="lc_body-small">
+            {{ group.color.name }}
+          </div>
+        </div>
+      </div>
+      <div class="OrderProductColorSimpleProducts__sum-wrapper">
+        <div class="OrderProductColorSimpleProducts__amount">
+          <div class="OrderProductColorSimpleProducts__amount-labels hidden-sm-and-down">
+            <div class="lc_title-small ">
+              Size:
+            </div>
+            <div class="lc_title-small mt-8">
+              Qty:
+            </div>
+          </div>
+          <order-product-color-simple-product
+            v-for="simpleProduct in group.simpleProducts"
+            :key="simpleProduct._id"
+            :simple-product="simpleProduct" />
+        </div>
+        <div class="OrderProductColorSimpleProducts__totals">
+          <div class="OrderProductColorSimpleProducts__total">
+            <div class="lc_title-small">
+              Total Qty:
+            </div>
+            <div class="lc_body-small">
+              {{ group.amount }}
+            </div>
+          </div>
+          <div class="OrderProductColorSimpleProducts__total mt-6">
+            <div class="lc_title-small">
+              Total price:
+            </div>
+            <div class="lc_body-small">
+              {{ group.productsTotal | 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 OrderProductColorSimpleProduct from './order_product_color_simple_product/order-product-color-simple-product';
+import OrderProductColorSimpleProducts from './order-product-color-simple-products.mixin';
+
+export default {
+  name: 'OrderProductColorSimpleProducts',
+  filters: {
+    price
+  },
+  components: {
+    OrderProductColorSimpleProduct,
+    ProductSideWithPrint
+  },
+  mixins: [
+    OrderProductColorSimpleProducts
+  ]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-product-color-simple-products.scss';
+</style>

package/components/order/order_view/order_product_color_simple_products/order_product_color_simple_product/order-product-color-simple-product.scss

@@ -0,0 +1,32 @@
+@import "@/assets/scss/variables";
+
+.OrderProductColorSimpleProduct {
+  &__wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-right: 4px;
+  }
+  &__label {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    color: $black;
+    margin-bottom: 6px;
+    margin-top: 0px;
+  }
+  &__field {
+    width: 32px;
+    height: 28px;
+    background: #efefef;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    color: #A2A2A2;
+    border-radius: 0;
+    padding: 2px !important;
+  }
+}

package/components/order/order_view/order_product_color_simple_products/order_product_color_simple_product/order-product-color-simple-product.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="OrderProductColorSimpleProduct__wrapper">
+    <div class="lc_regular16 OrderProductColorSimpleProduct__label">
+      {{ simpleProduct.size.shortName }}
+    </div>
+    <div
+      class="centered OrderProductColorSimpleProduct__field">
+      {{ simpleProduct.amount || '-' }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderProductColorSimpleProduct',
+  props: {
+    simpleProduct: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-product-color-simple-product.scss';
+</style>

package/components/order/order_view/order_product_prints/order-product-prints.scss

@@ -0,0 +1,67 @@
+@import "@/assets/scss/variables";
+
+.OrderProductPrints {
+  &__title {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 10px 0 10px 0;
+  }
+  &__table {
+    min-height: 100px;
+    width: 100%;
+    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 #efefef;
+        text-align: center;
+        vertical-align: middle;
+        @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: #efefef;
+  }
+  &__name {
+    width: 35px;
+    span {
+      writing-mode: vertical-lr;
+      transform: rotate(180deg);
+    }
+  }
+}

package/components/order/order_view/order_product_prints/order-product-prints.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="OrderProductPrints__wrapper">
+    <div class="OrderProductPrints__title">
+      Decoration
+    </div>
+    <table class="lc_table tight-rows OrderProductPrints__table">
+      <tbody>
+        <tr class="OrderProductPrints__head">
+          <td class="OrderProductPrints__th lc_title-small">
+            Type
+          </td>
+          <td class="OrderProductPrints__th lc_title-small">
+            location
+          </td>
+          <td class="OrderProductPrints__th lc_title-small">
+            size
+          </td>
+          <td class="OrderProductPrints__th lc_title-small">
+            Setup cost
+          </td>
+          <td class="OrderProductPrints__th lc_title-small">
+            QTY
+          </td>
+          <td class="OrderProductPrints__th lc_title-small">
+            Price
+          </td>
+          <td class="OrderProductPrints__th lc_title-small">
+            Total
+          </td>
+        </tr>
+        <order-product-print
+          v-for="(print, index) in entity.prints"
+          :key="`${entity.guid}_${index}`"
+          :entity="entity"
+          :print="print" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import OrderProductPrint from './order_product_print/order-product-print';
+
+export default {
+  name: 'OrderProductPrints',
+  components: {
+    OrderProductPrint
+  },
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-product-prints.scss';
+</style>

package/components/order/order_view/order_product_prints/order_product_print/order-product-print.scss

@@ -0,0 +1,31 @@
+@import "@/assets/scss/variables";
+
+.OrderProductPrint {
+  &__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/order/order_view/order_product_prints/order_product_print/order-product-print.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="OrderProductPrint__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>
+        {{ print.setupCost | price }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">QTY</span>
+        {{ amount }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Price</span>
+        {{ print.printCost | price }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Total</span>
+        <strong>
+          {{ total | price }}
+        </strong>
+      </td>
+    </tr>
+  </div>
+</template>
+
+<script>
+import { price } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'OrderProductPrint',
+  filters: {
+    price
+  },
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    },
+    print: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    simpleProducts() {
+      return (this.entity.simpleProducts || []).filter(sp => sp.amount > 0);
+    },
+    amount() {
+      return this.simpleProducts.reduce((sum, { amount }) => sum + amount, 0);
+    },
+    printCost() {
+      return this.print.printCost || 0;
+    },
+    setupCost() {
+      return this.print.setupCost || 0;
+    },
+    total() {
+      return this.amount * this.printCost + this.setupCost;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'order-product-print.scss';
+</style>

package/components/order/order_view/order_view_product/order-view-product.scss

@@ -0,0 +1,29 @@
+.OrderViewProduct {
+  &__simple-products {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    &-labels {
+      margin-right: 26px;
+    }
+  }
+  &__features {
+    margin-top: 4px;
+    padding-bottom: 4px;
+    display: flex;
+  }
+  &__feature {
+    margin-right: 19px;
+    display: flex;
+    &>div:first-child {
+      margin-right: 6px;
+    }
+  }
+  &__decorations {
+    margin-bottom: 20px;
+  }
+  &__subtotal {
+    text-align: right;
+  }
+}

package/components/order/order_view/order_view_product/order-view-product.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="OrderViewProduct__wrapper">
+    <div class="OrderViewProduct__info">
+      <div class="lc_title">
+        {{ product.isCustom ? product.SKU : product.product.name }}
+      </div>
+      <div
+        v-if="!product.isCustom"
+        class="OrderViewProduct__features">
+        <div class="OrderViewProduct__feature">
+          <div class="lc_title-small">
+            SKU:
+          </div>
+          <div class="lc_body-small">
+            {{ product.product.SKU }}
+          </div>
+        </div>
+      </div>
+      <div v-if="product.isCustom">
+        <div class="OrderViewProduct__feature">
+          <div class="lc_title-small">
+            QTY:
+          </div>
+          <div class="lc_body-small">
+            {{ amount }}
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <order-product-color-simple-products
+          v-for="[groupKey, group] in groupedProducts"
+          :key="groupKey"
+          :entity="product"
+          :group="group"
+          :default-preview="groupedProducts.size === 1"
+          class="OrderViewProduct__item" />
+      </div>
+      <div
+        v-if="hasPrints"
+        class="OrderViewProduct__decorations">
+        <order-product-prints :entity="product" />
+      </div>
+      <div class="OrderViewProduct__subtotal lc_title">
+        Subtotal: {{ totalPrice | price }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { price, sizesRange } from '@lancom/shared/assets/js/utils/filters';
+import { groupSimpleProducts } from '@lancom/shared/assets/js/utils/cart';
+import OrderProductColorSimpleProducts from './../order_product_color_simple_products/order-product-color-simple-products';
+import OrderProductPrints from './../order_product_prints/order-product-prints';
+
+export default {
+  name: 'LancomOrderViewProduct',
+  components: {
+    OrderProductColorSimpleProducts,
+    OrderProductPrints
+  },
+  filters: {
+    price,
+    sizesRange,
+    printLabel(print) {
+      const { printArea, printSize, printType } = print;
+      return `${printType?.name}. ${printArea?.name}. ${printSize?.name}`;
+    }
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    withDivider: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    hasPrints() {
+      return (this.product.prints || []).length > 0;
+    },
+    simpleProducts() {
+      return (this.product.simpleProducts || []).filter(sp => sp.amount > 0);
+    },
+    amount() {
+      return this.simpleProducts.reduce((sum, { amount }) => sum + amount, 0);
+    },
+    SKU() {
+      return this.product.product?.SKU || this.product.SKU;
+    },
+    groupedProducts() {
+      return [...groupSimpleProducts(this.product, !this.product.isCustom, true)].filter(([, g]) => g.amount > 0);
+    },
+    totalPrice() {
+      const printsTotal = (this.product.prints || []).reduce((total, print) => {
+        const { setupCost = 0, printCost = 0 } = print;
+        return total + this.amount * printCost + setupCost;
+      }, 0);
+      const productsTotal = this.simpleProducts.reduce((total, { amount = 0, productCost = 0 }) => total + amount * productCost, 0);
+      return this.amount > 0 ? (printsTotal + productsTotal) : 0;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-view-product.scss';
+</style>

package/components/pages/customer/confirm_email/confirm-email.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="CustomerConfirmEmail__wrapper">
+    <div
+      v-if="customer"
+      class="CustomerConfirmEmail__success">
+      <div class="CustomerConfirmEmail__success-message">
+        Customer email successfully confirmed
+      </div>
+      <btn
+        btn-class="green CustomerConfirmEmail__btn"
+        btn-label="Sign In"
+        to="/cusomer/sign-in" />
+    </div>
+    <div
+      v-else
+      class="CustomerConfirmEmail__fail">
+      <div class="CustomerConfirmEmail__fail-message">
+        Not valid confirm token
+      </div>
+      <btn
+        btn-class="green CustomerConfirmEmail__btn"
+        btn-label="Go Home"
+        to="/" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+// import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'CustomerConfirmEmail',
+  data() {
+    return {
+      customer: null
+    };
+  },
+  fetch({ params, store }) {
+    // try {
+    //   const { token } = params;
+    //   const shop = store.getters.shop._id;
+    //   const customer = await api.confirmCustomerEmail(token, shop);
+    //   return { customer };
+    // } catch (e) {
+    // }
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  }
+};
+</script>