@lancom/shared 0.0.102 → 0.0.106

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

@@ -89,106 +89,7 @@
     <div
       v-if="showDetails"
       class="EditorPricing__details">
-      <table class="lc_table EditorPricing__details-table">
-        <thead class="centered">
-          <tr class="highlighted">
-            <th colspan="6">
-              Tees
-            </th>
-            <th colspan="6">
-              Sizes
-            </th>
-            <th>Cost</th>
-            <th>Total Cost</th>
-          </tr>
-        </thead>
-        <tbody class="centered">
-          <tr
-            v-for="([groupPrice, group], index) in groupedProductsByPrice"
-            :key="index">
-            <td colspan="6">
-              {{ group.amount }}
-            </td>
-            <td colspan="6">
-              ({{ group.sizes | sizesRange }})
-            </td>
-            <td>
-              <v-popover
-                trigger="hover"
-                popover-class="tooltip popover white no-paddings"
-                :delay="{ show: 200, hide: 400 }">
-                <span class="EditorPricing__hoverable">
-                  {{ groupPrice | price }}
-                </span>
-                <template slot="popover">
-                  <pricing-discounts-table
-                    :prices="group.pricing"
-                    :amount="productPricing.amount" />
-                </template>
-              </v-popover>
-            </td>
-            <td>{{ group.totalPrice | price }}</td>
-          </tr>
-          <tr class="highlighted">
-            <td colspan="13">
-              Tee Subtotal:
-            </td>
-            <td>{{ productPricing.products.products.totalPrice | price }}</td>
-          </tr>
-        </tbody>
-        <thead class="centered">
-          <tr class="highlighted">
-            <th colspan="4">
-              Prints
-            </th>
-            <th colspan="4">
-              Quantity
-            </th>
-            <th colspan="4">
-              Sizes
-            </th>
-            <th>Cost</th>
-            <th>Total Cost</th>
-          </tr>
-        </thead>
-        <tbody class="centered">
-          <tr
-            v-for="([printSide, group], index) in groupedProductsByPrintsPrice"
-            :key="index">
-            <td colspan="4">
-              {{ printSide }}
-            </td>
-            <td colspan="4">
-              {{ group.amount }}
-            </td>
-            <td colspan="4">
-              {{ group.sizes | printsRange }}
-            </td>
-            <td>
-              <v-popover
-                trigger="hover"
-                popover-class="tooltip popover white no-paddings"
-                :delay="{ show: 200, hide: 400 }">
-                <span class="EditorPricing__hoverable">
-                  {{ group.price | price }}
-                </span>
-                <template slot="popover">
-                  <pricing-discounts-table
-                    :prices="printsPricing[group.sizes[0]]"
-                    :amount="productPricing.amount" />
-                </template>
-              </v-popover>
-            </td>
-            <td>{{ group.totalPrice | price }}</td>
-          </tr>
-          <tr class="highlighted">
-            <td colspan="13">
-              Prints Subtotal:
-            </td>
-            <td>{{ productPricing.products.prints.totalPrice | price }}</td>
-          </tr>
-        </tbody>
-      </table>
+      <editor-pricing-details />
     </div>
   </div>
 </template>
@@ -196,11 +97,9 @@
 <script>
 import { mapGetters, mapActions, mapMutations } from 'vuex';
 import debounce from 'lodash.debounce';
-import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
-
 import { EventBus } from '@lancom/shared/assets/js/utils/event-bus';
 import { price, sizesRange, printsRange, tax } from '@lancom/shared/assets/js/utils/filters';
-import { groupProductsSizesByPrice, groupProductsPrintsByPrintArea } from '@lancom/shared/assets/js/utils/products-grouping';
+import EditorPricingDetails from '@lancom/shared/components/editor/editor_pricing/editor_pricing_details/editor-pricing-details';
 
 export default {
   name: 'EditorPricing',
@@ -211,7 +110,7 @@ export default {
     printsRange
   },
   components: {
-    PricingDiscountsTable
+    EditorPricingDetails
   },
   data() {
     return {
@@ -237,25 +136,6 @@ export default {
       return this.hasUsedSimpleProducts
         ? this.usedSimpleProducts
         : [this.defaultSimpleProduct];
-    },
-    groupedProductsByPrice() {
-      return this.productPricing
-        ? groupProductsSizesByPrice(
-          this.products,
-          this.productPricing.products
-        )
-        : [];
-    },
-    hasGroupedProductsByPrintsPrice() {
-      return this.groupedProductsByPrintsPrice.length > 0;
-    },
-    groupedProductsByPrintsPrice() {
-      return this.productPricing
-        ? groupProductsPrintsByPrintArea(
-          this.products,
-          this.productPricing.products
-        )
-        : [];
     }
   },
   watch: {

package/components/editor/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/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;
     }
   }