@lancom/shared 0.0.104 → 0.0.107

package/assets/js/api/admin.js

@@ -415,5 +415,8 @@ export default {
   },
   sendToPrinter(job) {
     return _post('admin/printers/job', job);
+  },
+  findResources(query) {
+    return _get(`admin/order/resources?search=${query || ''}`);
   }
 };

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,27 +32,31 @@ 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;
 };
 
-export const getPrintAreaByName = ({ printArea, editorWidth, editorHeight }, product) => {
+export const getPrintAreaByName = ({ printArea, editorWidth, editorHeight, printSize, printAreaOffsets }, product) => {
   const printAreas = getProductPrintAreas(product);
-  const { printSize, printAreaOffsets } = printAreas[printArea] || DEFAULT_PRINT_AREA;
-  const pxPerCm = (editorWidth * product.productToImageRatio) / product.productWidthInCm;
-  const widthCm = printSize ? printSize.width : DEFAULT_PRINT_SIZE_CM;
-  const heightCm = printSize ? printSize.height : DEFAULT_PRINT_SIZE_CM;
+  const pa = printAreas[printArea] || DEFAULT_PRINT_AREA;
+  const size = printSize || pa.printSize;
+  const offsets = printAreaOffsets || pa.printAreaOffsets;
+  const pxPerCm = (editorWidth * product.productToImageRatio) / (product.productWidthInCm || 60);
+  const widthCm = size ? size.width : DEFAULT_PRINT_SIZE_CM;
+  const heightCm = size ? size.height : DEFAULT_PRINT_SIZE_CM;
   let width = widthCm * pxPerCm;
   let height = heightCm * pxPerCm;
   let top = 0;
   let left = 0;
-  if (printAreaOffsets) {
-    top = (editorHeight - height) / (100 / printAreaOffsets.top);
-    left = (editorWidth - width) / (100 / printAreaOffsets.left);
+  if (offsets) {
+    top = (editorHeight - height) / (100 / offsets.top);
+    left = (editorWidth - width) / (100 / offsets.left);
   } else {
     left = 30;
     top = 30;

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

@@ -4,6 +4,7 @@ import { generateGUID } from '@lancom/shared/assets/js/utils/guid';
 export class Layer {
   type = null;
   colorId = null;
+  sideId = null;
   angle = 0;
   alignVertically = 'center';
   alignHorizontally = 'center';
@@ -78,13 +79,13 @@ export class ArtLayer extends Layer {
   }
 };
 
-export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url, originalSize, properties = {} }) => {
+export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url, originalSize, sideId, properties = {} }) => {
   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':
@@ -100,7 +101,7 @@ export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url,
       throw new Error(`Layer type '${type}' not found or not supported.`);
   }
 
-  Object.assign(layer, properties);
+  Object.assign(layer, properties, { sideId });
   return layer;
 };
 

package/assets/js/utils/cart.js

@@ -10,6 +10,7 @@ export function groupSimpleProducts(entity, isGroupByColor, isPopulateEmptyProdu
         color: simpleProduct.color,
         images: entity.product?.images || [],
         prints: entity.prints,
+        printsThumbnails: entity.printsThumbnails,
         product: entity.product,
         simpleProducts: [],
         amount: 0,

package/assets/js/utils/custom-validation-rules.js

@@ -11,3 +11,10 @@ export const float = {
   },
   message: 'Float number is not valid'
 };
+
+export const maxValue = {
+  validate: value => {
+    return +value <= 1;
+  },
+  message: 'Max number is not valid'
+};

package/assets/js/utils/fabric/wireframe.js

@@ -3,9 +3,9 @@ import { fabric } from 'fabric';
 
 const sizes = [];
 
-export const buildWireframe = ({ width, height, editor, area = 'a4_v', product }) => {
+export const buildWireframe = ({ width, height, editor, print }) => {
   const layers = editor.getObjects();
-  const printAreaSize = layers[0].printAreaSize;
+  const printAreaSize = print.printSize;
   const group = new fabric.Group(layers);
   const groupBounding = group.getBoundingRect();
   const ratioX = (width / groupBounding.width) * 0.8;
@@ -108,8 +108,8 @@ export const buildWireframe = ({ width, height, editor, area = 'a4_v', product }
   ], 'h');
   verticalArrow.set({ selectable: false });
   horizontalArrow.set({ selectable: false });
-  const W = Math.round(groupBounding.width / printAreaSize.width * sizes[area][0]);
-  const H = Math.round(groupBounding.height / printAreaSize.height * sizes[area][1]);
+  const W = Math.round(groupBounding.width / printAreaSize.width);
+  const H = Math.round(groupBounding.height / printAreaSize.height);
   const verticalSize = new fabric.Text(`H: ${H * 10}mm`, {
     top: bounding.top + (bounding.height / 2),
     left: 0,

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,11 @@ 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,
+      printSize: printArea?.printSize,
+      printAreaOffsets: printArea?.printAreaOffsets,
       editorWidth: size.width,
       editorHeight: size.height
     }, product);
@@ -191,7 +191,7 @@ export default class FabricHelper {
   }
 
   createObject({ layer, active }) {
-    const initial = !layer.modifiedAt;
+    const initial = false; // !layer.modifiedAt;
     return new Promise(resolve => {
       const methods = {
         text: 'createTextObject',
@@ -218,8 +218,8 @@ export default class FabricHelper {
     });
   }
 
-  buildWireframe({ width, height, area }) {
-    buildWireframe({ width, height, editor: this.editor, area });
+  buildWireframe({ width, height, print }) {
+    buildWireframe({ width, height, editor: this.editor, print });
   }
 
   checkAnyBoundingIntersection() {

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

@@ -43,13 +43,13 @@ export function populateProductsFields(products, pricing) {
     }, []);
 
     if (pricing) {
-      const productPricing = pricing.products[product.guid];
+      const productPricing = pricing.products[product.guid] || pricing.products[product?.product._id];
       product.totalPrice = productPricing.totalPriceWithoutTax;
       product.printsTotalPrice = productPricing.prints.totalPriceWithoutTax;
       product.productsTotalPrice = productPricing.products.totalPriceWithoutTax;
 
       (product.simpleProducts || []).forEach(sp => {
-        const spPricing = productPricing.products[sp.guid];
+        const spPricing = productPricing.products[sp.guid] || productPricing.products[sp._id];
         if (spPricing) {
           sp.totalPrice = spPricing.totalPriceWithoutTax;
           sp.productCost = spPricing.priceWithoutTax;
@@ -57,7 +57,7 @@ export function populateProductsFields(products, pricing) {
       });
 
       (product.prints || []).forEach(p => {
-        const pPricing = productPricing.prints[p.printArea._id];
+        const pPricing = productPricing.prints[p.printArea?._id];
         if (pPricing) {
           p.totalPrice = pPricing.totalPriceWithoutTax;
           p.printCost = pPricing.priceWithoutTax;

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

@@ -21,7 +21,7 @@ export function getProductsForCalculatePricing(mainProduct, simpleProducts, laye
   }];
 }
 
-export function generateCartProducts(mainProduct, simpleProducts, layers, hasPrints, layersThumbnails = [], editorSize = null) {
+export function generateCartProducts(mainProduct, simpleProducts, layers, hasPrints, printsThumbnails = {}, editorSize = null) {
   return [{
     guid: generateGUID(),
     product: mainProduct,
@@ -30,7 +30,8 @@ export function generateCartProducts(mainProduct, simpleProducts, layers, hasPri
       guid: generateGUID(),
       amount: sp.amount || 0
     })),
-    prints: hasPrints ? getPrintsFromLayers(layers, mainProduct) : []
+    prints: hasPrints ? getPrintsFromLayers(layers, mainProduct) : [],
+    printsThumbnails
   }];
   // const timestamp = Date.now();
   // const productsWithPricing = getProductsForCalculatePricing(mainProduct, simpleProducts, layers, hasPrints);
@@ -105,7 +106,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 +127,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 +143,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/js/utils/products-grouping/by-colors.js

@@ -1,23 +1,27 @@
-export function groupProductsByColor(products = [], productsPricing) {
+export function groupProductsByColor(products = []) {
   const groupProducts = new Map();
-  products.forEach(product => {
-    const productPricing = productsPricing[product.guid] || productsPricing[product._id];
-    if (productPricing) {
-      const { amount } = productPricing;
+  products
+    .forEach(product => {
+      product.simpleProducts.forEach(sp => {
+        const defaultGroup = {
+          amount: 0,
+          products: []
+        };
+        const colorId = sp?.color._id || sp.color;
+        const group = groupProducts.get(colorId) || defaultGroup;
 
-      const defaultGroup = {
-        amount: 0,
-        products: []
-      };
-      const group = groupProducts.get(product.color._id) || defaultGroup;
+        if (sp.amount > 0) {
+          group.amount += (sp.productCost || 0) * (sp.amount || 0);
+          group.product = {
+            ...product.product,
+            printsThumbnails: (product.printsThumbnails || {})
+          };
+          group.color = sp.color;
+          group.products.push(sp);
 
-      group.amount += amount;
-      group.product = product;
-      group.color = product.color;
-      group.products.push(product);
-
-      groupProducts.set(product.color._id, group);
-    }
-  });
+          groupProducts.set(colorId, group);
+        }
+      });
+    });
   return [...groupProducts];
 }

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/asides/contact_us/contact-us.vue

@@ -182,6 +182,9 @@ export default {
   computed: {
     ...mapGetters(['contacts', 'shop'])
   },
+  mounted() {
+    this.preloadReCaptcha();
+  },
   methods: {
     async submit() {
       try {

package/components/asides/offer_screen_printing/offer-screen-printing.vue

@@ -11,25 +11,25 @@
       <validation-provider
         v-slot="{ errors }"
         tag="div"
-        name="Name"
+        name="Full Name"
         rules="required"
         class="form-row">
         <input
           id="name"
           ref="name"
-          v-model="form.name"
+          v-model="form.fullName"
           name="name"
           type="text"
           class="form-field"
           :class="{
             'is-danger': errors.length,
-            filled: form.name
+            filled: form.fullName
           }"
           @keyup.enter="$refs.email.focus()" />
         <label
           for="name"
           class="form-label label-inner">
-          Name
+          Full Name
         </label>
         <span
           v-if="errors.length"
@@ -104,12 +104,12 @@
         <textarea
           id="body"
           ref="body"
-          v-model="form.body"
+          v-model="form.description"
           name="body"
           class="form-textarea--size3"
           :class="{
             'is-danger': errors.length,
-            filled: form.body
+            filled: form.description
           }">
         </textarea>
         <label
@@ -161,6 +161,7 @@ export default {
     ]),
     ...mapGetters('product', [
       'product',
+      'template',
       'layers',
       'usedSimpleProducts',
       'selectedPrintAreas',
@@ -174,19 +175,28 @@ export default {
       try {
         this.processing = true;
         const recaptchaToken = await this.getRecaptcha('offer_screen_printing');
-        const products = generateCartProducts(this.product, this.layers, this.usedSimpleProducts, this.layerThumbnails, this.selectedPrintAreas, this.editorSize, this.printsPricing);
-        populateProductsFields(products);
+        let products = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, true, this.layerThumbnails);
+        products = populateProductsFields(products, this.productPricing);
+        products.forEach(p => {
+          p.prints.forEach(print => {
+            delete print.printType;
+            delete print.printCost;
+            delete print.setupCost;
+            delete print.pricing;
+          });
+        });
         const body = {
           recaptchaToken,
+          address: this.form,
           ...this.form,
-          products,
-          shop: this.shop._id,
-          price: await api.calculateProductPrice({ products, screenPrint: true }, this.shop._id)
+          options: [{ products, index: 0 }],
+          shop: this.shop._id
         };
-        await api.screenPrintingQuote(body, this.shop._id);
+        await api.saveQuoteRequest(body, this.shop._id);
         this.$toastr.s('We will review your design and advise if we can screen print you design and offer better pricing');
         this.$emit('close');
       } catch (error) {
+        console.log(error);
         this.$toastr.e(error);
       } finally {
         this.processing = false;

package/components/checkout/cart/cart_entity/cart_entity_color_simple_products/cart-entity-color-simple-products.mixin.js

@@ -61,10 +61,12 @@ export default {
       this.$modal.show(
         ImageViewer,
         {
-          items: images.map(({ origin, type }) => ({
+          items: images.map(({ origin, types = [] }) => ({
             src: staticLink(origin),
-            color: this.group.color.rgb
-            // print: this.entity.prints[SIDE_TYPES[type]]
+            color: this.group.color.rgb,
+            print: Object.keys((this.entity.printsThumbnails || {}))
+              .filter(type => types.includes(type))
+              .map(type => this.entity.printsThumbnails[type])[0]
           })),
           index
         },

package/components/checkout/cart/cart_entity/cart_entity_prints/cart-entity-prints.vue

@@ -63,6 +63,9 @@ export default {
     sumPrints() {
       return (this.entity.prints || []).length;
     }
+  },
+  mounted() {
+    console.log(this.entity);
   }
 };
 </script>

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

@@ -1,6 +1,7 @@
 <template>
   <component
-    :is="to ? 'nuxt-link' : 'div'"
+    :is="to ? 'nuxt-link' : (btnType || btnTag || 'div')"
+    :type="btnType"
     class="Btn__wrapper"
     :class="{
       block: btnBlock,
@@ -56,6 +57,12 @@ export default {
     to: {
       type: String
     },
+    btnTag: {
+      type: String
+    },
+    btnType: {
+      type: String
+    },
     btnClass: {
       type: String,
       default: 'white'

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/coupon_select/coupon-select.vue

@@ -9,19 +9,35 @@
         class="form-label">
         {{ labelText }}
       </label>
-      <input
-        id="coupon"
-        ref="coupon"
-        v-model="code"
-        placeholder="Coupon"
-        name="coupon"
-        type="text"
-        class="form-field labelless"
-        :class="{
-          'is-danger': code && notValidCoupon,
-          filled: code
-        }"
-        @change="validateCoupon" />
+      <div class="row">
+        <div class="col-7">
+          <input
+            id="coupon"
+            ref="coupon"
+            v-model="code"
+            placeholder="Coupon"
+            name="coupon"
+            type="text"
+            class="form-field labelless"
+            :class="{
+              'is-danger': code && notValidCoupon,
+              filled: code
+            }"
+            @keydown.enter="validateCoupon" />
+        </div>
+        <div class="col-5">
+          <btn
+            btn-class="green"
+            :btn-block="true"
+            :btn-disabled="isLoading"
+            btn-label="Apply"
+            @onclick="validateCoupon">
+            <i
+              slot="icon-after"
+              class="icon-arrow-right"></i>
+          </btn>
+        </div>
+      </div>
       <span
         v-if="code && notValidCoupon"
         class="form-help is-danger">

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/postcode_select/postcode-select.vue

@@ -56,7 +56,8 @@
         type="text"
         :value="value"
         :class="{ 'filled': value || selected }"
-        class="form-hidden-validator form-field" />
+        class="form-hidden-validator form-field"
+        style="display: none" />
       <label
         v-if="!labelless"
         class="form-label label-inner"