@lancom/shared 0.0.105 → 0.0.106

package/components/editor/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/editor/editor_pricing/editor_pricing_details/editor_pricing_details_prints/editor-pricing-details-prints.vue

@@ -0,0 +1,119 @@
+<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 | priceWithTax(pricingSettings) }}
+            </strong>
+          </td>
+          <td>
+            <span v-if="group.costType !== 'setup only'">
+              <strong>
+                {{ (displayPricingWithTax ? group.totalPrice : group.totalPriceWithoutTax) | price }}
+              </strong>
+              = {{ group.amount }} x {{ (displayPricingWithTax ? group.price : group.priceWithoutTax) | price }}
+            </span>
+            <strong v-else>
+              {{ (displayPricingWithTax ? group.totalPrice : group.totalPriceWithoutTax) | price }}
+            </strong>
+          </td>
+        </tr>
+        <tr v-if="hasPrintSurcharge">
+          <td colspan="4">
+            {{ printSurchargeNote }}
+          </td>
+        </tr>
+        <tr class="highlighted">
+          <td colspan="3">
+            Prints Subtotal:
+          </td>
+          <td>
+            <strong>
+              {{ (displayPricingWithTax ? productPricing.products.prints.totalPrice : productPricing.products.prints.totalPriceWithoutTax) | price }}
+            </strong>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { price, sizesRange, priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import { groupProductsPrintsByPrintArea } from '@lancom/shared/assets/js/utils/products-grouping';
+
+export default {
+  name: 'EditorPricingDetailsPrints',
+  filters: {
+    price,
+    priceWithTax,
+    sizesRange
+  },
+  computed: {
+    ...mapGetters(['displayPricingWithTax', 'pricingSettings']),
+    ...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/editor/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/editor/editor_pricing/editor_pricing_details/editor_pricing_details_products/editor-pricing-details-products.vue

@@ -0,0 +1,101 @@
+<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 | priceWithTax(pricingSettings) }}
+            </span>
+          </td>
+          <td>
+            <strong>
+              {{ (displayPricingWithTax ? group.totalPrice : group.totalPriceWithoutTax) | price }}
+            </strong>
+          </td>
+        </tr>
+        <tr class="highlighted">
+          <td colspan="3">
+            Products Subtotal:
+          </td>
+          <td>
+            <strong>
+              {{ (displayPricingWithTax ? productPricing.products.products.totalPrice : productPricing.products.products.totalPriceWithoutTax) | price }}
+            </strong>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { price, sizesRange, priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import { groupProductsSizesByPrice } from '@lancom/shared/assets/js/utils/products-grouping';
+
+export default {
+  name: 'EditorPricingDetailsProducts',
+  filters: {
+    price,
+    priceWithTax,
+    sizesRange
+  },
+  computed: {
+    ...mapGetters(['displayPricingWithTax', 'pricingSettings']),
+    ...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/editor/editor_print_area_options/editor-print-area-options.vue

@@ -7,14 +7,14 @@
       :key="index"
       class="EditorPrintAreaOptions__option"
       :class="{
-        'EditorPrintAreaOptions__option--no-print': !option.value
+        'EditorPrintAreaOptions__option--no-print': !option.printArea
       }">
       <editor-print-area-option
         :option="option"
         :product="product"
         :selected="
-          (option.value === selected) ||
-            (option.suboptions && option.value.includes(selected))
+          (option.printArea && option.printArea._id === selected) ||
+            (option.suboptions && option.printArea && option.printArea._id === selected)
         "
         @select="select"
         @option-mouseover="$emit('option-mouseover', $event)"
@@ -59,27 +59,28 @@ export default {
   },
   watch: {
     side() {
-      this.setOptions();
+      this.updateOptions();
     }
   },
   mounted() {
-    this.setOptions();
+    this.updateOptions();
   },
   methods: {
-    setOptions() {
-      const options = this.getProductOptions().filter(({ sides }) => sides.includes(this.side));
+    updateOptions() {
+      const productsOptions = this.getProductOptions();
+      const options = productsOptions.filter(({ sides }) => sides.includes(this.side));
       this.options = this.allowNoPrint ? [...options, { label: 'No Print' }] : options;
     },
-    select(value) {
-      this.$emit('select', value);
+    select(option) {
+      this.$emit('select', option);
     },
     getProductOptions() {
-      const groupItemToOption = ({ printArea, name }) => ({ value: printArea.alias, label: name });
-      return (this.product.productType.printGroups || [])
-        .map(group => ({
-          ...groupItemToOption(group),
-          sides: group.sides,
-          suboptions: (group.items || []).map(i => ({ ...groupItemToOption(i), sides: group.sides }))
+      const groupItemToOption = printArea => ({ printArea, label: printArea.name, size: printArea.printSize.alias });
+      return (this.product.printAreas || [])
+        .map(printArea => ({
+          ...groupItemToOption(printArea),
+          sides: [printArea.side],
+          suboptions: (printArea.sizes || []).map(i => ({ ...groupItemToOption(i), sides: [printArea.side] }))
         }));
     }
   }

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.vue

@@ -10,8 +10,8 @@
         {{ option.label }}
       </div>
       <div class="lc_regular10">
-        <span v-if="option.value">
-          {{ calcPrintPrice(option) | tax(gstTax) | price }}
+        <span v-if="option.printArea && calcPrintPrice(option) > 0">
+          {{ calcPrintPrice(option) | priceWithTax(pricingSettings) }}
         </span>
       </div>
     </div>
@@ -36,14 +36,13 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { price, priceInRange, tax } from '@lancom/shared/assets/js/utils/filters';
+import { priceWithTax, priceInRange } from '@lancom/shared/assets/js/utils/filters';
 import { getProductPrintsAreasPrices } from '@lancom/shared/assets/js/models/print-area';
 
 export default {
   name: 'EditorPrintAreaOption',
   filters: {
-    price,
-    tax
+    priceWithTax
   },
   props: {
     product: {
@@ -66,13 +65,14 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'gstTax'
+      'pricingSettings'
     ]),
     ...mapGetters('product', [
-      'usedSimpleProducts'
+      'usedSimpleProducts',
+      'selectedPrintType'
     ]),
     printsPricing() {
-      return getProductPrintsAreasPrices(this.product);
+      return getProductPrintsAreasPrices(this.product, this.selectedPrintType);
     }
   },
   methods: {
@@ -80,16 +80,16 @@ export default {
       if (this.option.suboptions && this.option.suboptions.length) {
         this.showOptions = !this.showOptions;
       } else {
-        this.$emit('select', this.option.value);
+        this.$emit('select', this.option);
       }
     },
-    selectSuboption({ value }) {
+    selectSuboption(option) {
       this.closeSuboptions();
-      this.$emit('select', value);
+      this.$emit('select', option);
     },
     calcPrintPrice(option) {
       const amount = this.usedSimpleProducts.reduce((amount, product) => product.amount + amount, 0);
-      return priceInRange(this.printsPricing[option.value], amount || 1);
+      return option.printArea ? priceInRange(this.printsPricing[option.printArea._id], amount || 1) : null;
     },
     closeSuboptions() {
       this.showOptions = false;

package/components/editor/editor_product_details/editor-product-details.scss

@@ -43,7 +43,7 @@
 
     thead tr,
     tbody td:first-child {
-      background-color: $grey_3 !important;
+      background-color: $grey_4 !important;
       text-align: center;
     }
   }

package/components/editor/editor_product_details/editor-product-details.vue

@@ -20,7 +20,7 @@
               popover-class="tooltip popover white"
               class="EditorProductDetails__discounts-table">
               <span class="lc_semibold22 lc_black EditorProductDetails__dashed-underline">
-                {{ defaultSimpleProduct.pricing[0].price | tax(pricingSettings.gstTax) | price }}
+                {{ defaultSimpleProduct.pricing[0].price | priceWithTax(pricingSettings) }}
               </span>
               <template slot="popover">
                 <pricing-discounts-table :prices="defaultSimpleProduct.pricing" />
@@ -50,9 +50,10 @@
                 Printing
               </span>
               <template slot="popover">
-                <discounts-table
-                  :visible-sleeve="false"
-                  :striped="true"
+                <pricing-table
+                  :items="printTypePrices"
+                  :bordered="true"
+                  :striped="false"
                   class="EditorProductDetails__prints-table" />
               </template>
             </v-popover>
@@ -80,10 +81,10 @@ import { mapGetters } from 'vuex';
 import ProductColorsSelector from '@lancom/shared/components/product/layouts/product_colors_selector/product-colors-selector';
 import ProductSizeSelector from '@lancom/shared/components/product/product_size_selector/product-size-selector';
 import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
-import DiscountsTable from '@lancom/shared/components/pricing/pricing_print/discounts_table/discounts-table.vue';
 import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
 import modals from '@lancom/shared/mixins/modals';
-import { price, tax, staticLink } from '@lancom/shared/assets/js/utils/filters';
+import { staticLink, priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import PricingTable from '@lancom/shared/components/common/pricing_table/pricing-table';
 
 export default {
   name: 'EditorProductDetails',
@@ -92,11 +93,10 @@ export default {
     ProductSizeSelector,
     PricingDiscountsTable,
     EditorPricing,
-    DiscountsTable
+    PricingTable
   },
   filters: {
-    price,
-    tax,
+    priceWithTax,
     staticLink
   },
   mixins: [modals],
@@ -104,7 +104,8 @@ export default {
     ...mapGetters('product', [
       'product',
       'productDetailsLoaded',
-      'defaultSimpleProduct'
+      'defaultSimpleProduct',
+      'selectedPrintType'
     ]),
     ...mapGetters('layers', [
       'layerThumbnails'
@@ -114,6 +115,17 @@ export default {
     ]),
     productLink() {
       return `/${this.product.SKU}/${this.product.alias}`;
+    },
+    printTypePrices() {
+      return [...(this.selectedPrintType?.printAreas || []).reduce((sizes, area) => {
+        (area.printSizes || []).forEach(size => {
+          sizes.set(size._id, {
+            name: size.name,
+            pricing: area.printCost
+          });
+        });
+        return sizes;
+      }, new Map()).values()];
     }
   }
 };

package/components/editor/editor_workspace/editor-workspace.vue

@@ -24,7 +24,8 @@
                   ref="editor"
                   :key="side"
                   :side="side"
-                  :print-area="selectedPrintArea"
+                  :print-area="editablePrintArea"
+                  :print-area-size="selectedPrintArea"
                   :class="side"
                   class="EditorWorkspace__side rotate-y-element">
                 </editor-workspace-side>
@@ -56,7 +57,8 @@
                 ref="editor"
                 :key="editableSide.id"
                 :side="editableSide.id"
-                :print-area="selectedPrintArea"
+                :print-area="editablePrintArea"
+                :print-area-size="selectedPrintArea"
                 :class="editableSide.id"
                 :zoom-size="zoomSize"
                 class="EditorWorkspace__side rotate-y-element"
@@ -139,6 +141,7 @@ export default {
       'product',
       'productDetailsLoaded',
       'selectedPrintArea',
+      'editablePrintArea',
       'editableSide',
       'editableColor'
     ]),
@@ -149,7 +152,8 @@ export default {
   methods: {
     ...mapMutations([
       'setEditableSide',
-      'setSelectedPrintArea'
+      'setSelectedPrintArea',
+      'setEditablePrintArea'
     ]),
     selectTab(value) {
       this.setEditableSide({ id: value }); // todo improve later by adding real sides
@@ -159,8 +163,9 @@ export default {
         id: this.editableSide.id === 'front' ? 'back' : 'front'
       });
     },
-    selectPrintArea(printArea) {
-      this.setSelectedPrintArea({ sideId: this.editableSide.id, printArea });
+    selectPrintArea({ printArea, size }) {
+      this.setEditablePrintArea(printArea);
+      this.setSelectedPrintArea({ sideId: this.editableSide.id, printArea: printArea._id, size });
     },
     toogleBoundBox(state, printAreaOption) {
       if (this.$refs.editor) {

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -86,6 +86,9 @@ export default {
       default: null
     },
     printArea: {
+      type: Object
+    },
+    printAreaSize: {
       type: String,
       required: true
     },
@@ -147,10 +150,10 @@ export default {
       );
     },
     printAreaIsSmall() {
-      return ['rect10_l', 'rect10_r'].includes(this.printArea);
+      return this.printAreaSize === 'rect10';
     },
     backgroundColor() {
-      return this.backgroundImageLoaded && this.editableColor.rgb;
+      return this.backgroundImageLoaded && this.editableColor?.rgb;
     },
     isZoomed() {
       return !!this.zoomSize;
@@ -320,13 +323,13 @@ export default {
     setOffsetWarningVisibility(visible) {
       // this.offsetWarningVisible = visible;
     },
-    toogleBoundBox(state, printArea) {
+    toogleBoundBox(state, option) {
       if (!this.fabricHelper || this.breakpoints.is === 'xs') {
         return;
       }
 
-      if (printArea) {
-        const area = state ? printArea.value : this.printArea;
+      if (option) {
+        const area = state ? option.printArea : this.printArea;
         this.fabricHelper.setPrintArea(area, this.editorSize, this.product);
       }
 

package/components/modals/cart_modal/cart-modal.vue

@@ -31,7 +31,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import Cart from '@lancom/shared/components/checkout/cart/cart';
+import Cart from '@/components/checkout/cart/cart';
 
 export default {
   name: 'CartModal',

package/components/modals/order_modal/order-modal.vue

@@ -295,13 +295,10 @@ export default {
     ...mapGetters(['shop']),
     ...mapGetters('order', ['orderData']),
     ...mapGetters('cart', [
-      'notEmptySimpleProducts',
+      'entities',
       'cartPricing',
       'suburb'
-    ]),
-    numberOfProducts() {
-      return this.notEmptySimpleProducts.length;
-    }
+    ])
   },
   mounted() {
     if (this.orderData) {
@@ -340,8 +337,9 @@ export default {
       try {
         this.processing = true;
         await this.createOrder({
-          ...this.form,
-          products: this.notEmptySimpleProducts,
+          billingAddress: this.form,
+          shippingAddress: this.form,
+          products: this.entities,
           pricing: this.cartPricing,
           shop: this.shop._id
         });

package/components/modals/payment_modal/payment-modal.vue

@@ -155,7 +155,7 @@ export default {
     },
     isSuccessOrderCharge() {
       const { charge, test } = this.orderData;
-      return true || (charge && charge.success) || test;
+      return (charge && charge.success) || test;
     },
     isFailedOrderCharge() {
       const { charge } = this.orderData;

package/components/pricing/pricing_digital_printing/pricing-digital-printing.vue

@@ -250,7 +250,7 @@ export default {
   },
   data() {
     return {
-      product: null
+      product: this.products.find(p => p.productType.alias === PRODUCT_TYPES.TEE)
     };
   },
   computed: {
@@ -271,9 +271,6 @@ export default {
       return productType?.alias;
     }
   },
-  created() {
-    this.product = this.findProductByType(PRODUCT_TYPES.TEE);
-  },
   methods: {
     contactUs() {
       this.$aside.show(ContactUs);