@lancom/shared 0.0.104 → 0.0.107

package/components/common/pricing_discounts_table/pricing-discounts-table.vue

@@ -1,5 +1,7 @@
 <template>
-  <table class="lc_table">
+  <table
+    class="lc_table"
+    :class="{ bordered, striped }">
     <thead class="centered">
       <tr class="highlighted">
         <th>Items</th>
@@ -14,7 +16,7 @@
           active: amount >= range.min && ((range.max && amount <= range.max) || !range.max)
         }">
         <td>{{ (range.max >= 9999 || !range.max) ? `${range.min}+` : `${range.min}-${range.max}` }}</td>
-        <td>{{ range.price | price }}</td>
+        <td>{{ range.price | priceWithTax(pricingSettings) }}</td>
       </tr>
     </tbody>
   </table>
@@ -22,13 +24,12 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { price, tax } from '@lancom/shared/assets/js/utils/filters';
+import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
 
 export default {
   name: 'PricingDiscountsTable',
   filters: {
-    price,
-    tax
+    priceWithTax
   },
   props: {
     prices: {
@@ -38,6 +39,14 @@ export default {
     amount: {
       type: Number,
       default: 0
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    striped: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

package/components/common/pricing_table/pricing-table.scss

@@ -2,7 +2,5 @@
 
 table {
   min-width: 200px;
-  td, th {
-    border: 1px solid $gray;
-  }
+  background-color: $white;
 }

package/components/common/pricing_table/pricing-table.vue

@@ -1,7 +1,8 @@
 <template>
-  <div>
+  <div class="PricingTable_wrapper">
     <table
-      class="lc_table striped">
+      class="lc_table"
+      :class="{ bordered, striped }">
       <thead class="centered">
         <tr
           class="highlighted"
@@ -35,7 +36,8 @@
 
 <script>
 import get from 'lodash.get';
-import { price } from '@lancom/shared/assets/js/utils/filters';
+import { mapGetters } from 'vuex';
+import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
 
 export default {
   name: 'PricingTable',
@@ -55,11 +57,18 @@ export default {
     bordered: {
       type: Boolean
     },
+    striped: {
+      type: Boolean,
+      default: true
+    },
     trLabel: {
       type: String
     }
   },
   computed: {
+    ...mapGetters([
+      'pricingSettings'
+    ]),
     thList() {
       return this.items.map(item => get(item, this.nameAttr));
     },
@@ -125,7 +134,7 @@ export default {
       const printType = this.items.find(item => printTypeName === get(item, this.nameAttr));
       const pricing = get(printType, this.pricingAttr);
       const item = pricing.find(({ min, max }) => (!min || range.min >= min) && (!max || range.min <= max));
-      return item ? price(item.price) : '-';
+      return item ? priceWithTax(item.price, this.pricingSettings) : '-';
     }
   }
 };

package/components/common/product_side_with_print/product-side-with-print.vue

@@ -85,8 +85,8 @@ export default {
       return getColorImage(this.product, this.size, this.side, color) || getProductCover(this.product, this.size, this.side, color);
     },
     print() {
-      const { layersThumbnails = {} } = this.product || {};
-      return layersThumbnails[this.side];
+      const { printsThumbnails = {} } = this.product || {};
+      return printsThumbnails[this.side];
     }
   },
   methods: {

package/components/common/products_list_dropdown/products-list-dropdown.vue

@@ -29,6 +29,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import api from '@lancom/shared/assets/js/api';
+import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 import ProductsListDropdownOption from './products_list_dropdown_option/products-list-dropdown-option';
 
 export default {
@@ -49,7 +50,8 @@ export default {
   },
   methods: {
     select(product) {
-      this.$router.push(`/${product.SKU}/${product.alias}/editor`);
+      const link = generateProductLink(product, null, true);
+      this.$router.push(link);
     },
     async loadProducts(text) {
       try {

package/components/common/range/range.scss

@@ -48,4 +48,27 @@ $height: 8px;
     cursor: pointer;
     z-index: 51;
   }
+  &__from,
+  &__to {
+    position: absolute;
+    top: 20px;
+    font-size: 11px;
+    opacity: 0.7;
+  }
+  &__from {
+    left: -3px;
+  }
+  &__to {
+    right: -3px;
+  }
+  &__current-value {
+    bottom: -20px;
+    font-size: 14px;
+    font-weight: bold;
+    left: 0;
+    right: 0;
+    text-align: center;
+    position: absolute;
+    pointer-events: none;
+  }
 }

package/components/common/range/range.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="Range__wrapper no-select">
+    <div
+      v-if="visibleSteps"
+      class="Range__from">
+      {{ min }}
+    </div>
     <div
       ref="indicator"
       class="Range__indicator">
@@ -17,6 +22,16 @@
         class="Range__indicator-after"
         :style="{ width: after }"
         @click="handleClick"></div>
+      <div
+        v-if="visibleSteps"
+        class="Range__current-value">
+        {{ model }}
+      </div>
+    </div>
+    <div
+      v-if="visibleSteps"
+      class="Range__to">
+      {{ max }}
     </div>
   </div>
 </template>
@@ -40,6 +55,10 @@ export default {
     step: {
       type: Number,
       default: 1
+    },
+    visibleSteps: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

package/components/customer/signin_form/signin-form.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="form__wrapper SignInFrom__wrapper">
-    <validation-observer ref="form" @submit="submit()">
+    <validation-observer
+      ref="form"
+      @keyup.enter="submit">
       <div class="form__content mt-4">
         <div class="row">
           <div class="col-sm-6 col-12">
@@ -84,6 +86,7 @@
             :btn-processing="processing"
             :btn-disabled="processing"
             :btn-block="true"
+            btn-type="button"
             btn-label="Log in"
             @onclick="submit()">
             <i
@@ -121,7 +124,7 @@ export default {
       this.error = null;
 
       const isValid = await this.$refs.form.validate();
-      if (!isValid) {
+      if (!isValid || this.processing) {
         return;
       }
 

package/components/design/approve_design_tables/approve-design-tables.scss

@@ -20,10 +20,10 @@
     }
   }
   &__thumbnail {
-    width: 250px;
-    height: 250px;
+    width: 210px;
+    height: 210px;
     &-cell {
-      width: 250px;
+      width: 210px;
       position: relative;
       padding: 5px;
     }

package/components/design/approve_design_tables/approve-design-tables.vue

@@ -3,7 +3,7 @@
     <table class="lc_table bordered ApproveDesignTables__table">
       <thead class="centered">
         <tr class="stripped">
-          <th>Tee Color</th>
+          <th>Color</th>
           <th>Design Front</th>
           <th>Design Back</th>
           <th>Products</th>
@@ -22,12 +22,12 @@
               size="medium"
               class="ApproveDesignTables__thumbnail" />
             <div
-              v-if="!group.product.prints.front"
+              v-if="!group.product.printsThumbnails.front"
               class="ApproveDesignTables__no-design">
               No design
             </div>
-            <div v-if="group.product.printAreas.front">
-              {{ group.product.printAreas.front | print }}
+            <div v-if="group.product.printsThumbnails.front">
+              {{ group.product.printsThumbnails.front | print }}
             </div>
           </td>
           <td class="ApproveDesignTables__thumbnail-cell">
@@ -37,12 +37,12 @@
               size="medium"
               class="ApproveDesignTables__thumbnail" />
             <div
-              v-if="!group.product.prints.back"
+              v-if="!group.product.printsThumbnails.back"
               class="ApproveDesignTables__no-design">
               No design
             </div>
-            <div v-if="group.product.printAreas.back">
-              {{ group.product.printAreas.back | print }}
+            <div v-if="group.product.printsThumbnails.back">
+              {{ group.product.printsThumbnails.back | print }}
             </div>
           </td>
           <td>
@@ -75,12 +75,12 @@
       </thead>
       <tbody class="centered">
         <tr
-          v-for="product in products"
+          v-for="product in simpleProducts"
           :key="product._id">
-          <td>{{ product.brand }}</td>
+          <td>{{ product.brand.name }}</td>
           <td>{{ product.style }}</td>
           <td>{{ product.color.name }}</td>
-          <td>{{ product.size.name }}</td>
+          <td>{{ product.size.shortName }}</td>
           <td>{{ product.amount }}</td>
         </tr>
         <tr>
@@ -119,14 +119,25 @@ export default {
     }
   },
   computed: {
+    simpleProducts() {
+      return this.products
+        .reduce((items, { product, simpleProducts }) => ([
+          ...items,
+          ...simpleProducts.map(sp => ({ ...product, ...sp }))
+        ]), [])
+        .filter(({ amount }) => amount > 0);
+    },
     totalAmount() {
-      return this.products.reduce((amount, product) => {
-        return amount + product.amount;
+      return this.simpleProducts.reduce((amount, product) => {
+        return amount + (product.amount * product.productCost);
       }, 0);
     },
     productsByColor() {
-      return groupProductsByColor(this.products, this.order.price.products);
+      return groupProductsByColor(this.products);
     }
+  },
+  mounted() {
+    groupProductsByColor(this.products);
   }
 };
 </script>

package/components/design/approve_design_tees/approve-design-tees.vue

@@ -7,11 +7,11 @@
         </div>
         <div class="ApproveDesignTees__container">
           <product-side-with-print
-            :product="product"
+            :product="productWithPrint"
             side="front"
             size="large" />
           <div
-            v-if="!product.prints.front"
+            v-if="!hasFrontPrint"
             class="ApproveDesignTees__no-design">
             No design
           </div>
@@ -23,11 +23,11 @@
         </div>
         <div class="ApproveDesignTees__container">
           <product-side-with-print
-            :product="product"
+            :product="productWithPrint"
             side="back"
             size="large" />
           <div
-            v-if="!product.prints.back"
+            v-if="!hasBackPrint"
             class="ApproveDesignTees__no-design">
             No design
           </div>
@@ -50,6 +50,20 @@ export default {
       type: Object,
       required: true
     }
+  },
+  computed: {
+    hasFrontPrint() {
+      return this.product.prints.some(({ printArea }) => printArea.side === 'front');
+    },
+    hasBackPrint() {
+      return this.product.prints.some(({ printArea }) => printArea.side === 'back');
+    },
+    productWithPrint() {
+      return {
+        ...this.product.product,
+        printsThumbnails: (this.product.printsThumbnails || {})
+      };
+    }
   }
 };
 </script>

package/components/editor/editor.vue

@@ -129,7 +129,8 @@ export default {
       'editorSize',
       'selectedTab',
       'productPricing',
-      'printsPricing'
+      'printsPricing',
+      'isPrintPricing'
     ]),
     ...mapGetters('layers', [
       'layerThumbnails'
@@ -175,7 +176,7 @@ export default {
       }
     },
     proceedToCard() {
-      const entities = generateCartProducts(this.product, this.template.layers, this.template.simpleProducts, this.layerThumbnails, this.selectedPrintAreas, this.editorSize, this.printsPricing);
+      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing, this.layerThumbnails);
       this.addToCart({ entities, shop: this.shop });
       this.showCartModal(async () => {
         const message = 'Do you wish to continue with editing the current design or reset the editor?';

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/editor-layer-form-text.vue

@@ -151,6 +151,7 @@
 <script>
 import { inRange } from '@lancom/shared/assets/js/utils/filters';
 import { availableFonts, loadFont } from '@lancom/shared/assets/js/utils/fonts-helper';
+import ColorPicker from '@lancom/shared/components/common/color-picker';
 import EditorLayerCommonFields from '../editor_layer_common_fields/editor-layer-common-fields';
 import FontFamilySelect from './font-family_select/font-family-select';
 
@@ -169,7 +170,8 @@ export default {
   name: 'EditorLayerFormText',
   components: {
     EditorLayerCommonFields,
-    FontFamilySelect
+    FontFamilySelect,
+    ColorPicker
   },
   props: {
     layer: {

package/components/editor/editor_layers/editor_layers_toolbar/editor-layers-toolbar.vue

@@ -104,6 +104,7 @@ export default {
       this.$emit('layer-added', { layer, toEditMode: true });
     },
     async handleUploaded({ url, size }) {
+      debugger
       const layer = await this.createLayer({ type: 'art', url, size });
       this.$emit('layer-added', { layer, toEditMode: false });
     }

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);
+    }
+  }
+}