@lancom/shared 0.0.62 → 0.0.66

package/assets/js/utils/prints.js

@@ -0,0 +1,53 @@
+export function getPrintAreaSizes({ printSize, sizes = [] }) {
+  return [
+    printSize,
+    ...sizes
+      .map(({ printSize }) => printSize)
+      .filter(({ _id }) => _id !== printSize._id)
+  ].filter(size => !!size);
+};
+
+export const generatePrintLayer = layer => {
+  return {
+    ...layer,
+    text: layer.copy,
+    params: layer
+  };
+};
+
+export function getPrintsFromLayers(layers, product) {
+  const prints = new Map();
+  (layers || []).forEach(layer => {
+    const { printType, printSize, printArea } = layer;
+    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 layerPrintSize = sizes.find(({ _id }) => _id === printSize);
+      const { setupCost, printCost } = getPrintTypeSizePricing(layerPrintType, printSize) || {};
+      const getSimpleObj = i => i && ({ _id: i._id, name: i.name });
+      const data = {
+        printArea: getSimpleObj(layerPrintArea),
+        printType: getSimpleObj(layerPrintType),
+        printSize: getSimpleObj(layerPrintSize),
+        costType: layerPrintType.costType,
+        setupCost,
+        printCost,
+        layers: [generatePrintLayer(layer)]
+      };
+      prints.set(printArea, data);
+    } else {
+      const print = prints.get(printArea);
+      print.layers.push(generatePrintLayer(layer));
+      prints.set(printArea, print);
+    }
+  });
+  return [...prints.values()];
+}
+
+export function getPrintTypeSizePricing(printType, sizeId) {
+  return printType.printAreas
+    .find(({ printSizes }) => {
+      return printSizes.map(size => size?._id || size).includes(sizeId);
+    });
+}

package/assets/js/utils/product.js

@@ -0,0 +1,141 @@
+
+import { generateGUID } from '@lancom/shared/assets/js/utils/guid';
+import { COLORS_IMAGES_TYPES } from '@lancom/shared/assets/js/constants/colors';
+// import { getPrintAreaByName } from '@lancom/shared/assets/js/models/print-area';
+import { getPrintsFromLayers } from './prints';
+import { isValidImageType } from './colors';
+
+export function getProductsForCalculatePricing(mainProduct, simpleProducts, layers, hasPrints, isCLearPrintsLayers) {
+  const prints = getPrintsFromLayers(layers, mainProduct);
+  return [{
+    _id: mainProduct._id,
+    prints: hasPrints ? prints.map(p => isCLearPrintsLayers ? ({ ...p, layers: null }) : p) : null,
+    printSurcharge: mainProduct.printSurcharge || 0,
+    simpleProducts: simpleProducts.map(({ _id, amount, pricing, unprintedPricing, weight }) => ({
+      _id,
+      amount,
+      pricing: hasPrints ? pricing : unprintedPricing,
+      weight: weight || mainProduct.weight
+    }))
+  }];
+}
+
+export function generateCartProducts(mainProduct, simpleProducts, layers, hasPrints, layersThumbnails = [], editorSize = null) {
+  return [{
+    guid: generateGUID(),
+    product: mainProduct,
+    simpleProducts: simpleProducts.map(sp => ({
+      ...sp,
+      guid: generateGUID(),
+      amount: sp.amount || 0
+    })),
+    prints: hasPrints ? getPrintsFromLayers(layers, mainProduct) : []
+  }];
+  // const timestamp = Date.now();
+  // const productsWithPricing = getProductsForCalculatePricing(mainProduct, simpleProducts, layers, hasPrints);
+  // return simpleProducts
+  //   .map(simpleProduct => {
+  //     const product = {
+  //       ...(productsWithPricing.find(({ _id }) => _id === simpleProduct._id)),
+  //       SKU: simpleProduct.SKU,
+  //       color: simpleProduct.color,
+  //       brand: mainProduct.brand,
+  //       style: mainProduct.style,
+  //       size: simpleProduct.size,
+  //       quantityStock: simpleProduct.quantityStock,
+  //       shouldExportToShipService: simpleProduct.shouldExportToShipService,
+  //       images: mainProduct.images,
+  //       name: mainProduct.name,
+  //       guid: `${simpleProduct._id}_${timestamp}`,
+  //       layers: editorSize ? layers.map(layer => getPrintZoneLayer(layer, editorSize, mainProduct)) : layers,
+  //       layersThumbnails,
+  //       weight: mainProduct.weight,
+  //       createdAt: new Date()
+  //     };
+  //     return product;
+  //   });
+}
+
+export function getProductSides({ layers = [] }) {
+  const sidesSet = layers.reduce((sides, layer) => {
+    sides.add(layer.sideId);
+    return sides;
+  }, new Set());
+
+  return [...sidesSet];
+}
+
+// function getPrintZoneLayer(layer, { width: editorWidth, height: editorHeight }, product) {
+//   const printAreaRect = getPrintAreaByName({ printArea: layer.printArea, editorWidth, editorHeight }, product);
+//   return {
+//     ...layer,
+//     top: layer.top - printAreaRect.top,
+//     left: layer.left - printAreaRect.left,
+//     boundingRect: {
+//       ...layer.boundingRect,
+//       top: layer.boundingRect.top - printAreaRect.top,
+//       left: layer.boundingRect.left - printAreaRect.left
+//     },
+//     printAreaSize: {
+//       width: printAreaRect.width,
+//       height: printAreaRect.height
+//     }
+//   };
+// };
+
+export function generateProductsLink($route, data) {
+  let { type, brand, text, sort } = data;
+  type = (type || type === null) ? type : ($route && $route.params.type);
+  brand = (brand || brand === null) ? brand : ($route && $route.params.brand);
+  text = (text || text === '') ? text : ($route && $route.query.text);
+  sort = (sort || sort === '') ? sort : ($route && $route.query.sort);
+
+  const params = [];
+
+  if (text) {
+    params.push(`text=${encodeURIComponent(text)}`);
+  }
+  if (sort) {
+    params.push(`sort=${sort}`);
+  }
+
+  const { page = 1 } = data;
+  if (page > 1) {
+    params.push(`page=${page}`);
+  }
+
+  Object.keys({ ...$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(',');
+      if (items) {
+        params.push(`${key}=${items}`);
+      }
+    }
+  });
+
+  const typeRoute = type ? `/${type}` : '';
+  const brandRoute = brand ? `/brand/${brand}` : '';
+
+  return `/products${typeRoute}${brandRoute}${params.length ? `?${params.join('&')}` : ''}`;
+}
+
+export function generateProductLink(product, color, toEditor = false) {
+  console.log(product);
+  const baseLink = `/${product.brand.alias}/${product.productType.alias}/${product.alias}`;
+  return `${toEditor ? `${baseLink}/editor` : baseLink}${color ? `?color=${color.alias}` : ''}`;
+}
+
+export function getProductColorImages(product, color) {
+  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 images.filter(i => !!i);
+}
+
+export function sortByOrder(items, itemProp) {
+  const getOrder = item => (itemProp ? +(item[itemProp] && item[itemProp].order) : item.order) || 0;
+  return (items || []).sort((a, b) => getOrder(a) - getOrder(b));
+}

package/assets/js/utils/products-grouping/by-colors.js

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

package/assets/js/utils/products-grouping/by-design.js

@@ -0,0 +1,49 @@
+export function groupProductsByDesign(products = [], productsPricing) {
+  const groupProducts = new Map();
+  products.forEach(product => {
+    const productPricing = productsPricing[product.guid] || productsPricing[product._id];
+    if (productPricing) {
+      const {
+        prints: { sides = [] },
+        amount,
+        totalPriceWithoutTax,
+        totalPrice,
+        product: {
+          totalPriceWithoutTax: productsTotalPriceWithoutTax,
+          totalPrice: productsTotalPrice
+        }
+      } = productPricing;
+
+      const defaultGroup = {
+        amount: 0,
+        prints: {
+          amount: 0,
+          totalPrice: 0,
+          totalPriceWithoutTax: 0
+        },
+        products: [],
+        totalPriceWithoutTax: 0,
+        productsTotalPriceWithoutTax: 0,
+        totalPrice: 0,
+        productsTotalPrice: 0
+      };
+      const group = groupProducts.get(product.designId) || defaultGroup;
+
+      group.amount += amount;
+      group.totalPriceWithoutTax += totalPriceWithoutTax;
+      group.productsTotalPriceWithoutTax += productsTotalPriceWithoutTax;
+      group.totalPrice += totalPrice;
+      group.productsTotalPrice += productsTotalPrice;
+      group.prints.amount += amount * sides.length;
+      group.prints.totalPriceWithoutTax += sides.reduce((price, side) => price + side.totalPriceWithoutTax, 0);
+      group.prints.totalPrice += sides.reduce((price, side) => price + side.totalPrice, 0);
+      group.products.push(product);
+      group.sides = sides;
+      group.designId = product.designId;
+
+      groupProducts.set(product.designId, group);
+    }
+  });
+
+  return [...groupProducts];
+}

package/assets/js/utils/products-grouping/by-prints.js

@@ -0,0 +1,43 @@
+export function groupProductsByPrints(products = [], productsPricing) {
+  const groupProducts = new Map();
+  products.forEach(product => {
+    const productPricing = productsPricing[product.guid || product._id];
+    if (productPricing) {
+      const {
+        prints: {
+          sides = []
+        },
+        amount
+      } = productPricing;
+      sides.forEach(({ side, size, totalPriceWithoutTax, totalPrice }) => {
+        const key = product.printIds[side];
+        const defaultGroup = {
+          side,
+          size,
+          products: [],
+          totalPrice: 0,
+          totalPriceWithoutTax: 0,
+          amount: 0
+        };
+        const group = groupProducts.get(key) || defaultGroup;
+
+        const index = group.products.findIndex(p => p.SKU === product.SKU);
+        if (index > -1) {
+          group.products[index].amount += product.amount;
+        } else {
+          group.products.push({ ...product });
+        }
+        group.side = side;
+        group.printId = key;
+        group.designId = product.designId;
+        group.size = size;
+        group.amount += amount;
+        group.totalPriceWithoutTax += totalPriceWithoutTax;
+        group.totalPrice += totalPrice;
+        groupProducts.set(key, group);
+      });
+    }
+  });
+
+  return [...groupProducts].sort(([, a], [, b]) => a.printId - b.printId);
+}

package/assets/js/utils/products-grouping/by-sku.js

@@ -0,0 +1,18 @@
+export function groupProductsBySKU(products = [], productsPricing) {
+  const groupProducts = new Map();
+  products.forEach(product => {
+    const productPricing = productsPricing[product.guid || product._id];
+    if (productPricing) {
+      const { product: { totalPrice, totalPriceWithoutTax }, amount } = productPricing;
+      const defaultGroup = { amount: 0, totalPrice: 0, totalPriceWithoutTax: 0, product: null };
+      const group = groupProducts.get(product.SKU) || defaultGroup;
+      group.product = product;
+      group.amount += amount;
+      group.totalPrice += totalPrice;
+      group.totalPriceWithoutTax += totalPriceWithoutTax;
+      groupProducts.set(product.SKU, group);
+    }
+  });
+
+  return [...groupProducts];
+}

package/assets/js/utils/products-grouping/index.js

@@ -0,0 +1,7 @@
+export * from './sizes-by-price';
+export * from './prints-by-print-area';
+export * from './prints-by-size';
+export * from './by-design';
+export * from './by-prints';
+export * from './by-sku';
+export * from './by-colors';

package/assets/js/utils/products-grouping/prints-by-print-area.js

@@ -0,0 +1,26 @@
+export function groupProductsPrintsByPrintArea(productsPricing) {
+  const printsGroupProducts = new Map();
+  const { prints, amount } = productsPricing;
+  (prints?.prints || []).forEach(({ printSize, printArea, printType, price, priceWithoutTax, basePrice, totalPrice, totalPriceWithoutTax, setupPrice, setupPriceWithoutTax, costType }) => {
+    const defaultGroup = { price, priceWithoutTax, setupPrice: 0, sizes: [], totalPrice: 0, totalPriceWithoutTax: 0, basePrice: 0, amount: 0 };
+    const key = `${printType._id}-${printArea._id}`;
+    const group = printsGroupProducts.get(key) || defaultGroup;
+    if (!group.sizes.some(s => s._id === printSize._id)) {
+      group.sizes.push(printSize);
+    }
+    group.printArea = printArea;
+    group.printType = printType;
+    group.setupPrice = setupPrice;
+    group.setupPriceWithoutTax = setupPriceWithoutTax;
+    group.costType = costType;
+    group.price = price;
+    group.priceWithoutTax = priceWithoutTax;
+    group.amount += amount;
+    group.basePrice = basePrice;
+    group.totalPrice += totalPrice;
+    group.totalPriceWithoutTax += totalPriceWithoutTax;
+    printsGroupProducts.set(key, group);
+  });
+
+  return [...printsGroupProducts];
+}

package/assets/js/utils/products-grouping/prints-by-size.js

@@ -0,0 +1,20 @@
+export function groupProductsPrintsBySize(products = [], productsPricing) {
+  const printsGroupProducts = new Map();
+  products.forEach(product => {
+    const productPricing = productsPricing[product.guid || product._id];
+    if (productPricing) {
+      const { prints: { sides = [] }, amount } = productPricing;
+      sides.forEach(({ size, price, priceWithoutTax, basePrice, totalPrice, totalPriceWithoutTax }) => {
+        const defaultGroup = { price, priceWithoutTax, totalPrice: 0, totalPriceWithoutTax: 0, basePrice: 0, amount: 0 };
+        const group = printsGroupProducts.get(size) || defaultGroup;
+        group.amount += amount;
+        group.basePrice = basePrice;
+        group.totalPrice += totalPrice;
+        group.totalPriceWithoutTax += totalPriceWithoutTax;
+        printsGroupProducts.set(size, group);
+      });
+    }
+  });
+
+  return [...printsGroupProducts];
+}

package/assets/js/utils/products-grouping/sizes-by-price.js

@@ -0,0 +1,21 @@
+export function groupProductsSizesByPrice(products = [], pricing, withPrintsPrice = false) {
+  const priceGroupProducts = new Map();
+  products.forEach(product => {
+    const productPricing = pricing?.products[product.guid || product._id];
+    if (productPricing) {
+      const { prints } = pricing;
+      const { price, priceWithoutTax, totalPrice, totalPriceWithoutTax, basePrice, amount } = productPricing;
+      const defaultGroup = { price, priceWithoutTax, sizes: [], totalPrice: 0, totalPriceWithoutTax: 0, amount: 0, basePrice: 0 };
+      const group = priceGroupProducts.get(priceWithoutTax) || defaultGroup;
+      group.sizes.push(product.size);
+      group.pricing = product.pricing;
+      group.amount += amount;
+      group.basePrice = basePrice;
+      group.totalPrice += withPrintsPrice ? totalPrice + prints.totalPrice : totalPrice;
+      group.totalPriceWithoutTax += withPrintsPrice ? totalPriceWithoutTax + prints.totalPriceWithoutTax : totalPriceWithoutTax;
+      priceGroupProducts.set(priceWithoutTax, group);
+    }
+  });
+
+  return [...priceGroupProducts].sort(([price], [price2]) => price - price2);
+}

package/assets/js/utils/quote.js

@@ -0,0 +1,27 @@
+export function convertQuoteToOrder(quote, option) {
+  return {
+    paymentMethod: 'deposit',
+    billingAddress: quote.address,
+    shippingAddress: quote.address,
+    products: option.products,
+    price: option.total,
+    total: option.total,
+    productsTotal: option.total,
+    printsTotal: option.total,
+    shippingTotal: option.total,
+    adminShippingTotal: option.adminShippingTotal
+  };
+}
+
+export function isExpiredQuote(quote) {
+  return quote.expiredAt && Date.now() > +(new Date(quote.expiredAt));
+}
+
+const getStorageKey = quote => `QUOTE_VIEWED_OPTIONS_${quote._id}`;
+export function saveViewedOptions(quote, options) {
+  localStorage.setItem(getStorageKey(quote), JSON.stringify(options));
+}
+export function getViewedOptions(quote) {
+  const options = localStorage.getItem(getStorageKey(quote));
+  return options && JSON.parse(options);
+}

package/assets/js/utils/sizes.js

@@ -0,0 +1,14 @@
+import { sortByOrder } from './product';
+
+export function sortBySize(items) {
+  return sortByOrder(items, 'size');
+}
+
+export function sortSizes(sizes = []) {
+  return sortByOrder(sizes);
+}
+
+export function getSizesFields(sizes) {
+  const data = sortBySize(sizes).reduce((fields, size) => ({ ...fields, ...(size.info || {}) }), {});
+  return Object.keys(data);
+}

package/assets/scss/_common.scss

@@ -0,0 +1,138 @@
+@import "@/assets/scss/variables";
+
+.content {
+  width: 100%;
+  margin-top: $navbar_height;
+  min-height: calc(100vh - #{$navbar_height});
+  box-sizing: border-box;
+  position: relative;
+  padding:
+    env(safe-area-inset-top)
+    env(safe-area-inset-right)
+    env(safe-area-inset-bottom)
+    env(safe-area-inset-left);
+  @media (max-width: $bp-small-max) {
+    min-height: auto;
+    margin-top: $mobile_navbar_height;
+  }
+}
+.has-notification {
+  .content {
+    margin-top: $navbar_height + $notification_bar_height;
+    min-height: calc(100vh - #{$navbar_height} - #{$notification_bar_height});
+    @media (max-width: $bp-small-max) {
+      margin-top: $mobile_navbar_height + $notification_bar_height;
+      min-height: calc(100vh - #{$mobile_navbar_height} - #{$notification_bar_height});
+    }
+  }
+}
+.content-inner {
+  width: 100%;
+  margin: 0 auto;
+
+  @media (max-width: $bp-small-max) {
+    padding: 0 16px;
+  }
+  @media (min-width: $bp-medium-min) {
+    max-width: 980px;
+  }
+  @media (min-width: $bp-large-min) {
+    max-width: 1200px;
+  }
+  &.extra {
+    @media (min-width: $bp-extra-large-min) {
+      max-width: 1440px;
+    }
+  }
+}
+.invalidate {
+  pointer-events: none;
+  opacity: .6;
+}
+.custom-scrollbar-container {
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: $scrollbar_width;
+    background-color: rgba(0, 0, 0, .1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, .1);
+    border-radius: 2px;
+  }
+}
+.ripple {
+  // ripple 
+  position: relative;
+  overflow: hidden;
+  transform: translate3d(0, 0, 0);
+  transition: box-shadow .2s ease-in-out, background-color .2s ease-in-out;
+  // riple
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    transform: scale(10, 10);
+    opacity: 0;
+    transition: transform .5s, opacity .6s;
+  }
+  &:active:after {
+    transform: scale(0, 0);
+    opacity: .2;
+    transition: 0s;
+  }
+}
+
+.no-select {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none;
+}
+
+// ASIDE
+.v--aside-block-scroll {
+  overflow: hidden;
+  width: 100vw;
+}
+
+// reCaptcha
+.grecaptcha-badge {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.hidden-sm-and-down {
+  @media (max-width: $bp-small-max) {
+    display: none !important;
+  }
+}
+.hidden-extra-small {
+  @media (max-width: $bp-extra-small-max) {
+    display: none !important;
+  }
+}
+.hidden-sm-and-up {
+  @media (min-width: $bp-small-min) {
+    display: none !important;
+  }
+}
+.hidden-md-and-up {
+  @media (min-width: $bp-medium-min) {
+    display: none !important;
+  }
+}
+b {
+  font-weight: bold;
+}
+

package/assets/scss/_reset.scss

@@ -0,0 +1,50 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+  display: block;
+}
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+  display: none;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+*, :after, :before, html {
+  box-sizing: border-box;
+}