@lancom/shared 0.0.105 → 0.0.106

package/assets/js/models/print-area.js

@@ -17,9 +17,9 @@ export const getProductPrintAreas = product => {
   if (!product) {
     return {};
   }
-  const getSizesFromAreas = (areas, map) => (areas || []).reduce((list, { printSize, printAreaOffsets, sizes }) => {
-    if (printSize) {
-      list[printSize.alias] = { printSize, printAreaOffsets };
+  const getSizesFromAreas = (areas, map) => (areas || []).reduce((list, { printSize, printAreaOffsets, sizes, _id }) => {
+    if (_id && printSize) {
+      list[_id] = { printSize, printAreaOffsets };
     }
 
     if (sizes) {
@@ -32,10 +32,12 @@ export const getProductPrintAreas = product => {
   return getSizesFromAreas(product.printAreas);
 };
 
-export const getProductPrintsAreasPrices = product => {
+export const getProductPrintsAreasPrices = (product, printType) => {
   const areas = getProductPrintAreas(product);
   Object.keys(areas).forEach(key => {
-    areas[key] = areas[key].printArea?.pricing || [];
+    const { printSize } = areas[key];
+    const { printCost } = (printType?.printAreas || []).find(pa => pa.printSizes.some(({ _id }) => _id === printSize._id)) || {};
+    areas[key] = printCost || [];
   });
   return areas;
 };
@@ -43,7 +45,7 @@ export const getProductPrintsAreasPrices = product => {
 export const getPrintAreaByName = ({ printArea, editorWidth, editorHeight }, product) => {
   const printAreas = getProductPrintAreas(product);
   const { printSize, printAreaOffsets } = printAreas[printArea] || DEFAULT_PRINT_AREA;
-  const pxPerCm = (editorWidth * product.productToImageRatio) / product.productWidthInCm;
+  const pxPerCm = (editorWidth * product.productToImageRatio) / (product.productWidthInCm || 60);
   const widthCm = printSize ? printSize.width : DEFAULT_PRINT_SIZE_CM;
   const heightCm = printSize ? printSize.height : DEFAULT_PRINT_SIZE_CM;
   let width = widthCm * pxPerCm;

package/assets/js/models/product-layers.js

@@ -82,9 +82,9 @@ export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url,
   if (!type) {
     throw new Error('When creating a new layer, you must specify its type');
   }
-  if (!colorId) {
-    throw new Error('When creating a new layer, you must specify coresponding colorId');
-  }
+  // if (!colorId) {
+  //   throw new Error('When creating a new layer, you must specify coresponding colorId');
+  // }
   let layer;
   switch (type) {
     case 'text':

package/assets/js/utils/fabric-helper.js

@@ -64,7 +64,6 @@ class Background {
 export default class FabricHelper {
   editor = null;
   background = null;
-  printAreaName = 'a3';
   printAreaRect = null;
 
   constructor({ editor, background, size }) {
@@ -135,10 +134,9 @@ export default class FabricHelper {
     this.background.setImage(image);
   }
 
-  setPrintArea(name, size, product) {
-    this.printAreaName = name;
+  setPrintArea(printArea, size, product) {
     this.printAreaRect = getPrintAreaByName({
-      name: this.printAreaName,
+      printArea: printArea?._id,
       editorWidth: size.width,
       editorHeight: size.height
     }, product);

package/assets/js/utils/filters.js

@@ -18,6 +18,12 @@ export const number = (value, digits = 0) => {
 
 export const decimal = (value, digits = 2) => number(value || 0, digits);
 
+export const priceWithTax = (value, settings) => {
+  const { gstTax = 0, displayPricingWithTax = false } = settings || {};
+  const valueWithTask = displayPricingWithTax ? tax(value, gstTax) : value;
+  return price(valueWithTask);
+};
+
 export const price = (value = 0, currency = 'USD') => {
   const amount = number(value, 2);
   const cur = currencies.find(c => c.value.toUpperCase() === currency.toUpperCase());
@@ -78,7 +84,7 @@ export const shortDate = d => dayjs(d).format('DD/MM/YYYY');
 
 export const sydneyTime = d => dayjs(d).utc().utcOffset(10).format('MMM D, YYYY h:mm A');
 
-export const priceInRange = (prices, amount) => (prices.find(({ min, max }) => min <= amount && (!max || max >= amount)) || { price: 0 }).price;
+export const priceInRange = (prices, amount) => ((prices || []).find(({ min, max }) => min <= amount && (!max || max >= amount)) || { price: 0 }).price;
 
 export const staticLink = link => (link || '').startsWith('http') ? link : `${process.env.STATIC_URL}${link}`;
 

package/assets/js/utils/prints.js

@@ -1,3 +1,14 @@
+export function getPrintAreasSizes(printAreas, side) {
+  return printAreas
+    .filter(printArea => !side || printArea.side === side)
+    .reduce((sizes, printArea) => {
+      return [
+        ...sizes,
+        ...getPrintAreaSizes(printArea).filter(({ _id }) => !sizes.some(size => size._id === _id))
+      ];
+    }, []);
+}
+
 export function getPrintAreaSizes({ printSize, sizes = [] }) {
   return [
     printSize,
@@ -22,7 +33,7 @@ export function getPrintsFromLayers(layers, product) {
     if (!prints.has(printArea)) {
       const layerPrintType = product.printTypes.find(({ _id }) => _id === printType);
       const layerPrintArea = product.printAreas.find(({ _id }) => _id === printArea);
-      const sizes = getPrintAreaSizes(layerPrintArea);
+      const sizes = layerPrintArea ? getPrintAreaSizes(layerPrintArea) : [];
       const layerPrintSize = sizes.find(({ _id }) => _id === printSize);
       const { setupCost, printCost, freeSetupOver } = getPrintTypeSizePricing(layerPrintType, printSize) || {};
       const getSimpleObj = i => i && ({ _id: i._id, name: i.name });
@@ -30,7 +41,7 @@ export function getPrintsFromLayers(layers, product) {
         printArea: getSimpleObj(layerPrintArea),
         printType: getSimpleObj(layerPrintType),
         printSize: getSimpleObj(layerPrintSize),
-        costType: layerPrintType.costType,
+        costType: layerPrintType?.costType,
         setupCost,
         freeSetupOver,
         printCost,
@@ -47,8 +58,8 @@ export function getPrintsFromLayers(layers, product) {
 }
 
 export function getPrintTypeSizePricing(printType, sizeId) {
-  return printType.printAreas
+  return printType?.printAreas
     .find(({ printSizes }) => {
       return printSizes.map(size => size?._id || size).includes(sizeId);
-    }) || printType.printAreas[0];
+    }) || printType?.printAreas[0];
 }

package/assets/js/utils/product.js

@@ -105,7 +105,7 @@ export function generateProductsLink($route, data) {
     params.push(`page=${page}`);
   }
 
-  Object.keys({ ...$route.query, ...data }).forEach(key => {
+  Object.keys({ ...(($route && $route.query) || {}), ...data }).forEach(key => {
     if (!['text', 'sort', 'page', 'type', 'brand'].includes(key)) {
       let items = ($route && $route.query[key]) ? $route.query[key].split(',') : [];
       items = (data[key] ? (items.includes(data[key]) ? items.filter(c => c !== data[key]) : [...items, data[key]]) : items).join(',');
@@ -126,11 +126,11 @@ export function generateProductLink(product, color, toEditor = false) {
   return `${toEditor ? `${baseLink}/editor` : baseLink}${color ? `?color=${color.alias}` : ''}`;
 }
 
-export function getProductColorImages(product, color) {
+export function getProductColorImages(product, color, skipDefault = false) {
   const types = [COLORS_IMAGES_TYPES.FRONT, COLORS_IMAGES_TYPES.BACK];
   const images = types.map(type => {
     const validImages = (product.images || []).filter(i => isValidImageType(i, type));
-    return (color && validImages.find(i => i.color === color._id)) || validImages[0];
+    return (color && validImages.find(i => i.color === color._id)) || (!skipDefault && validImages[0]);
   });
   return images.filter(i => !!i);
 }
@@ -142,5 +142,5 @@ export function sortByOrder(items, itemProp) {
 
 export function sortByOrderASC(items, itemProp) {
   const getOrder = item => (itemProp ? +(item[itemProp] && item[itemProp].order) : item.order) || 0;
-  return (items || []).sort((a, b) => getOrder(a) - getOrder(b));
+  return [...(items || [])].sort((a, b) => getOrder(a) - getOrder(b));
 }

package/assets/scss/ui_kit/_table.scss

@@ -3,6 +3,9 @@
 .lc_table {
   width: 100%;
   table-layout: fixed;
+  &.layout-auto {
+    table-layout: auto
+  }
   &.bordered {
     border-collapse: collapse;
     &, th, td {

package/assets/scss/ui_kit/_typography.scss

@@ -205,6 +205,12 @@
     font-size: 12px;
     line-height: 130%;
   }
+  &_regular13 {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 13px;
+    line-height: 130%;
+  }
   &_regular14 {
     font-style: normal;
     font-weight: normal;

package/components/checkout/payment/payment-cart/payment-cart.scss

@@ -4,8 +4,8 @@
 .Payment {
   &__wrapper {
     .pin-form-field {
-      @extend .form-field;
-      @extend .labelless;
+      // @extend .form-field;
+      // @extend .labelless;
       border-radius: 0px;
       background-color: #F4F4F4;
     }

package/components/common/color-picker.vue

@@ -16,7 +16,7 @@
       v-if="isOpen"
       v-click-outside="close"
       class="ColorPicker__dropdown">
-      <v-color
+      <chrome
         v-model="model"
         :disable-alpha="true" />
     </div>
@@ -24,8 +24,13 @@
 </template>
 
 <script>
+import { Chrome } from 'vue-color';
+
 export default {
   name: 'ColorPicker',
+  components: {
+    Chrome
+  },
   props: {
     value: {
       type: String,

package/components/common/file_uploader.vue

@@ -80,7 +80,7 @@ export default {
       try {
         const image = await api.uploadImage(this.file, this.onProgress, this.url);
         this.onProgress(0);
-        const url = image && staticLink(image.thumb);
+        const url = image && staticLink(image.thumb || image.origin);
         this.$emit('onuploaded', { ...image, url });
       } catch (e) {
         console.dir(e);

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/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/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.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>