@lancom/shared 0.0.280 → 0.0.281

package/components/product/editor_pricing/editor-pricing.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="EditorPricing__wrapper">
+    <div class="EditorPricing__main">
+      <div
+        v-if="isValidOrderQuantity && showDetails"
+        class="EditorPricing__details">
+        <editor-pricing-details />
+      </div>
+
+      <div
+        v-if="addedToCart"
+        class="EditorPricing__main-alert">
+        <img src="/images/smile.svg" />
+        Products have been added to cart
+      </div>
+
+      <div
+        v-else-if="!hasUsedSimpleProducts && (!layers.length && isPrintPricing)"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+        No products selected and no prints defined
+      </div>
+
+      <div
+        v-else-if="hasUsedSimpleProducts && (!layers.length && isPrintPricing)"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+        No prints defined
+      </div>
+
+      <div
+        v-else-if="!hasUsedSimpleProducts && layers.length"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+        No products selected to view price
+      </div>
+
+      <div
+        v-else-if="!isValidMiltipackOrderQuantity"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+         bulk pack {{ multipack.qty }} - add more x {{ multipack.qty - usedSimpleProductsQuantity }}
+      </div>
+
+      <div
+        v-else-if="!isValidOrderQuantity && isValidBigSizeOrderQuantity && minimumOrderQuantity > 1"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+        Minimum order of these items must be {{ minimumOrderQuantity }} or more
+      </div>
+
+      <div
+        v-else-if="!isValidBigSizeOrderQuantity"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+        Minimum order of 5XL-7XL should be 50%
+      </div>
+
+      <div
+        v-else-if="isValidOrderQuantity"
+        class="EditorPricing__main-alert">
+        <img src="/images/smile.svg" />
+        All good to go!
+      </div>
+
+      <div class="EditorPricing__footer">
+        <div class="EditorPricing__footer-section">
+          <i class="icon-close-r"></i>
+          <div class="EditorPricing__total">
+            Pending:
+            <span v-if="isValidOrderQuantity && productPricing">
+              {{ totalPrice | price(currency) }}
+            </span>
+            <span v-else>
+              -
+            </span>
+          </div>
+        </div>
+        <div class="EditorPricing__footer-section">
+          <div
+            v-if="isValidOrderQuantity"
+            class="lc_medium16 EditorPricing__toggle-details"
+            @click="toggleDetails">
+            {{ showDetails ? 'Hide' : 'Show' }} detail
+          </div>
+          <btn
+            v-if="hasCartBtn"
+            btn-class="green"
+            btn-label="Add to cart"
+            :btn-disabled="addToCartDisabled || !isValidOrderQuantity"
+            class="EditorPricing__add-to-cart-button"
+            @onclick="proceedToCard" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import debounce from 'lodash.debounce';
+import { generateCartProducts } from '@lancom/shared/assets/js/utils/product';
+import { price, sizesRange, printsRange, tax } from '@lancom/shared/assets/js/utils/filters';
+import EditorPricingDetails from '@lancom/shared/components/editor/editor_pricing/editor_pricing_details/editor-pricing-details';
+
+export default {
+  name: 'EditorPricing',
+  filters: {
+    price,
+    tax,
+    sizesRange,
+    printsRange
+  },
+  components: {
+    EditorPricingDetails
+  },
+  data() {
+    return {
+      price: null,
+      showDetails: false,
+      addedToCart: false,
+      calculatePriceWithDebounce: debounce(() => this.calculateProductPrice({ shop: this.shop, country: this.country }), 500)
+    };
+  },
+  props: {
+    hasCartBtn: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters(['shop', 'country', 'currency']),
+    ...mapGetters('product', [
+      'product',
+      'usedSimpleProducts',
+      'usedSimpleProductsQuantity',
+      'usedBigSizeSimpleProductsQuantity',
+      'productPricing',
+      'layers',
+      'selectedPrintAreas',
+      'printsPricing',
+      'template',
+      'editorSize',
+      'availablePrintTypes',
+      'isPrintPricing',
+      'minimumOrderQuantity',
+      'calculatingPrice',
+      'priceIncludeGST',
+      'multipack'
+    ]),
+    isValidOrderQuantity() {
+      return this.isValidBigSizeOrderQuantity && this.isValidMiltipackOrderQuantity && (!this.minimumOrderQuantity || this.usedSimpleProductsQuantity >= this.minimumOrderQuantity);
+    },
+    isValidBigSizeOrderQuantity() {
+      return this.usedSimpleProductsQuantity ? ((this.usedBigSizeSimpleProductsQuantity / this.usedSimpleProductsQuantity * 100) <= 50) : true;
+    },
+    isValidMiltipackOrderQuantity() {
+      return !this.multipack || this.multipack.qty <= this.usedSimpleProductsQuantity;
+    },
+    addToCartDisabled() {
+      return !((this.template.layers.length || !this.isPrintPricing) && this.usedSimpleProducts.length) || this.calculatingPrice;
+    },
+    hasUsedSimpleProducts() {
+      return this.usedSimpleProducts.length > 0;
+    },
+    totalPrice() {
+      const { totalPriceWithoutTax, totalPrice } = this.productPricing;
+      return this.priceIncludeGST ? totalPrice : totalPriceWithoutTax;
+    }
+  },
+  watch: {
+    layers() {
+      this.calculatePriceWithDebounce();
+      this.addedToCart = false;
+      if (!this.layers.length) {
+        this.showDetails = false;
+      }
+    },
+    usedSimpleProducts() {
+      this.calculatePriceWithDebounce();
+      this.addedToCart = false;
+      if (!this.hasUsedSimpleProducts) {
+        this.showDetails = false;
+      }
+    },
+    selectedPrintAreas() {
+      this.calculatePriceWithDebounce();
+    },
+    availablePrintTypes() {
+      this.calculatePriceWithDebounce();
+    },
+    isPrintPricing() {
+      this.calculatePriceWithDebounce();
+    }
+  },
+  mounted() {
+    if (this.usedSimpleProducts.length > 0) {
+      this.calculatePriceWithDebounce();
+    }
+  },
+  methods: {
+    ...mapActions('cart', ['addToCart']),
+    ...mapActions('product', [
+      'calculateProductPrice'
+    ]),
+    ...mapMutations('product', ['clearTemplate', 'setIsPrintPricing']),
+    ...mapMutations('layers', ['resetLayers']),
+    proceedToCard() {
+      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing);
+      this.addToCart({ entities, shop: this.shop, pricing: this.productPricing, country: this.country, currency: this.currency });
+      this.$toastr.s('Products successfully added to cart');
+      this.clearTemplate(true);
+      // this.resetLayers();
+      // this.setIsPrintPricing(false);
+      setTimeout(() => {
+        this.addedToCart = true;
+      });
+    },
+    toggleDetails() {
+      this.showDetails = !this.showDetails;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-pricing';
+</style>

package/components/product/editor_pricing/editor_pricing_details/editor-pricing-details.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="EditorPricingDetails__wrapper">
+    <editor-pricing-details-products />
+    <editor-pricing-details-prints v-if="isPrintPricing" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import EditorPricingDetailsProducts from './editor_pricing_details_products/editor-pricing-details-products';
+import EditorPricingDetailsPrints from './editor_pricing_details_prints/editor-pricing-details-prints';
+
+export default {
+  name: 'EditorPricingDetails',
+  components: {
+    EditorPricingDetailsProducts,
+    EditorPricingDetailsPrints
+  },
+  computed: {
+    ...mapGetters('product', [
+      'isPrintPricing'
+    ])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-pricing-details';
+</style>

package/components/product/editor_pricing/editor_pricing_details/editor_pricing_details_prints/editor-pricing-details-prints.scss

@@ -0,0 +1,41 @@
+@import '@/assets/scss/variables';
+
+.EditorPricingDetailsPrints {
+  &__wrapper td {
+      font-weight: 600;
+    border: 1px solid $gray;
+    font-size: 16px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+    @media (max-width: $bp-extra-small-max) {
+      padding: 2px;
+      font-size: 12px;
+    }
+    strong {
+      font-weight: bold;
+    }
+    &.disabled {
+      color: $gray_main;
+      pointer-events: none !important;
+    }
+  }
+  &__th {
+    font-weight: bold !important;
+    background: $gray;
+    @media (max-width: $bp-extra-small-max) {
+      padding: 2px;
+      font-size: 12px;
+    }
+  }
+  &__name {
+    width: 70px;
+    @media (max-width: $bp-extra-small-max) {
+      width: 30px;
+    }
+    span {
+      writing-mode: vertical-lr;
+      transform: rotate(180deg);
+    }
+  }
+}

package/components/product/editor_pricing/editor_pricing_details/editor_pricing_details_prints/editor-pricing-details-prints.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="EditorPricingDetailsPrints__wrapper">
+    <table class="lc_table EditorPricingDetailsPrints__table">
+      <tbody class="centered">
+        <tr>
+          <td
+            class="EditorPricingDetailsPrints__name"
+            :rowspan="groupedProductsByPrintArea.length + (hasPrintSurcharge ? 3 : 2)">
+            <span>printing</span>
+          </td>
+          <td class="EditorPricingDetailsPrints__th">
+            type of print
+          </td>
+          <td class="EditorPricingDetailsPrints__th">
+            location
+          </td>
+          <td class="EditorPricingDetailsPrints__th">
+            Setup cost
+          </td>
+          <td class="EditorPricingDetailsPrints__th">
+            Price
+          </td>
+        </tr>
+        <tr
+          v-for="([, group], index) in groupedProductsByPrintArea"
+          :key="index">
+          <td>
+            {{ group.printType.name }}
+          </td>
+          <td>
+            {{ group.printArea.name }}
+          </td>
+          <td>
+            <strong>
+              {{ group.setupPriceWithoutTax | price(currency) }}
+            </strong>
+          </td>
+          <td>
+            <span v-if="group.costType !== 'setup only'">
+              <strong>
+                {{ group.totalPriceWithoutTax | price(currency) }}
+              </strong>
+              = {{ group.amount }} x {{ group.priceWithoutTax | price(currency) }}
+            </span>
+            <strong v-else>
+              {{ group.totalPriceWithoutTax | price(currency) }}
+            </strong>
+          </td>
+        </tr>
+        <tr v-if="hasPrintSurcharge">
+          <td colspan="4">
+            {{ printSurchargeNote }}
+          </td>
+        </tr>
+        <tr class="highlighted">
+          <td colspan="3">
+            Prints Subtotal:
+          </td>
+          <td>
+            <strong>
+              {{ productPricing.products.prints.totalPriceWithoutTax | price(currency) }}
+            </strong>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { price, sizesRange } from '@lancom/shared/assets/js/utils/filters';
+import { groupProductsPrintsByPrintArea } from '@lancom/shared/assets/js/utils/products-grouping';
+
+export default {
+  name: 'EditorPricingDetailsPrints',
+  filters: {
+    price,
+    sizesRange
+  },
+  computed: {
+    ...mapGetters(['currency']),
+    ...mapGetters('product', [
+      'product',
+      'usedSimpleProducts',
+      'productPricing',
+      'mainProductPricing'
+    ]),
+    hasPrintSurcharge() {
+      return this.product.printSurcharge > 0;
+    },
+    printSurchargeNote() {
+      const message = this.product.printSurchargeNote || 'surcharge of $x per print';
+      return message.replace(/\$x/, price(this.product.printSurcharge));
+    },
+    hasUsedSimpleProducts() {
+      return this.usedSimpleProducts.length > 0;
+    },
+    products() {
+      return this.hasUsedSimpleProducts
+        ? this.usedSimpleProducts
+        : [];
+    },
+    groupedProductsByPrintArea() {
+      const groups = this.mainProductPricing
+        ? groupProductsPrintsByPrintArea(
+          this.mainProductPricing
+        )
+        : [];
+      return groups;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-pricing-details-prints';
+</style>

package/components/product/editor_pricing/editor_pricing_details/editor_pricing_details_products/editor-pricing-details-products.scss

@@ -0,0 +1,41 @@
+@import '@/assets/scss/variables';
+
+.EditorPricingDetailsProducts {
+    &__wrapper td {
+      font-weight: 600;
+      border: 1px solid $gray;
+      font-size: 16px;
+      line-height: 25px;
+      text-transform: uppercase;
+      color: $black;
+      @media (max-width: $bp-extra-small-max) {
+        padding: 2px;
+        font-size: 12px;
+      }
+      strong {
+        font-weight: bold;
+      }
+      &.disabled {
+        color: $gray_main;
+        pointer-events: none !important;
+      }
+    }
+    &__th {
+      font-weight: bold !important;
+      background: $gray;
+      @media (max-width: $bp-extra-small-max) {
+        padding: 2px;
+        font-size: 12px;
+      }
+    }
+    &__name {
+      width: 70px;
+      @media (max-width: $bp-extra-small-max) {
+        width: 30px;
+      }
+      span {
+        writing-mode: vertical-lr;
+        transform: rotate(180deg);
+      }
+    }
+  }

package/components/product/editor_pricing/editor_pricing_details/editor_pricing_details_products/editor-pricing-details-products.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="EditorPricingDetailsProducts__wrapper">
+    <table class="lc_table EditorPricingDetailsProducts__table">
+      <tbody class="centered">
+        <tr>
+          <td
+            class="EditorPricingDetailsProducts__name"
+            :rowspan="groupedProductsByPrice.length + 2">
+            <span>product</span>
+          </td>
+          <td class="EditorPricingDetailsProducts__th">
+            Products
+          </td>
+          <td class="EditorPricingDetailsProducts__th">
+            Sizes
+          </td>
+          <td class="EditorPricingDetailsProducts__th">
+            Cost
+          </td>
+          <td class="EditorPricingDetailsProducts__th">
+            Total Cost
+          </td>
+        </tr>
+        <tr
+          v-for="([groupPrice, group], index) in groupedProductsByPrice"
+          :key="index">
+          <td>
+            {{ group.amount }}
+          </td>
+          <td>
+            {{ group.sizes | sizesRange }}
+          </td>
+          <td>
+            <span class="EditorPricingDetailsProducts__hoverable">
+              {{ groupPrice | price(currency) }}
+            </span>
+          </td>
+          <td>
+            <strong>
+              {{ group.totalPriceWithoutTax | price(currency) }}
+            </strong>
+          </td>
+        </tr>
+        <tr class="highlighted">
+          <td colspan="3">
+            Products Subtotal:
+          </td>
+          <td>
+            <strong>
+              {{ productPricing.products.products.totalPriceWithoutTax | price(currency) }}
+            </strong>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { price, sizesRange } from '@lancom/shared/assets/js/utils/filters';
+import { groupProductsSizesByPrice } from '@lancom/shared/assets/js/utils/products-grouping';
+
+export default {
+  name: 'EditorPricingDetailsProducts',
+  filters: {
+    price,
+    sizesRange
+  },
+  computed: {
+    ...mapGetters([
+      'currency'
+    ]),
+    ...mapGetters('product', [
+      'product',
+      'usedSimpleProducts',
+      'mainProductPricing',
+      'productPricing'
+    ]),
+    hasUsedSimpleProducts() {
+      return this.usedSimpleProducts.length > 0;
+    },
+    products() {
+      return this.hasUsedSimpleProducts
+        ? this.usedSimpleProducts
+        : [];
+    },
+    groupedProductsByPrice() {
+      return this.mainProductPricing
+        ? groupProductsSizesByPrice(
+          this.products,
+          this.mainProductPricing
+        )
+        : [];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-pricing-details-products';
+</style>

package/components/product/product.vue

@@ -42,7 +42,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import ProductMainInfo from './layouts/product_main_info/product-main-info';
-import ProductColorsSelector from './layouts/product_colors_selector/product-colors-selector';
+import ProductColorsSelector from './product_colors_selector/product-colors-selector';
 import ProductTierPrices from './layouts/product_tier_prices/product-tier-prices';
 import ProductFabricAndSizeInfo from './layouts/product_fabric_and_size_info/product-fabric-and-size-info';
 import ProductPackaging from './layouts/product_packaging/product-packaging';

package/components/product/product_colors_selector/product-colors-selector.scss

@@ -0,0 +1,117 @@
+@import '@/assets/scss/variables';
+
+.ProductColorsSelector {
+  &__wrapper {
+    margin-top: 35px;
+  }
+  &__controls {
+    display: flex;
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column-reverse;
+    }
+  }
+  &__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;
+    flex-grow: 1;
+    opacity: 1;
+    transition: opacity 500ms;
+    &--hidden {
+      opacity: 0;
+    }
+  }
+  &__options {
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
+  &__option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &-preview {
+      width: 30px;
+      height: 30px;
+      margin-right: 10px;
+    }
+  }
+  &__toggle-gst {
+    margin-top: 20px;
+  }
+}
+
+::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__select {
+    display: none;
+  }
+  .multiselect__tags,
+  .multiselect__single,
+  .multiselect__input {
+    border: none;
+    background: transparent;
+  }
+  .multiselect__tags {
+    padding-top: 13px;
+  }
+  .multiselect__single,
+  .multiselect__input {
+    font-weight: bold;
+  }
+}