@lancom/shared 0.0.62 → 0.0.66

package/assets/js/constants/fonts.js

@@ -0,0 +1,137 @@
+export const FONTS = {
+  acme: '/assets/fonts/Acme_Regular.ttf',
+  allan: '/assets/fonts/Allan-Regular.ttf',
+  'allan-bold': '/assets/fonts/Allan-Bold.ttf',
+  amaranth: '/assets/fonts/Amaranth_Regular.ttf',
+  anton: '/assets/fonts/Anton_Regular.ttf',
+  'archivo-black': '/assets/fonts/ArchivoBlack-Regular.ttf',
+  'asap-medium': '/assets/fonts/Asap_Medium.ttf',
+  'assistant-semibold': '/assets/fonts/Assistant_SemiBold.ttf',
+  'baloo-bhaina': '/assets/fonts/BalooBhaina-Regular.ttf',
+  bangers: '/assets/fonts/Bangers_Regular.ttf',
+  baumans: '/assets/fonts/Baumans-Regular.ttf',
+  'berkshire-swash': '/assets/fonts/BerkshireSwash_Regular.ttf',
+  bevan: '/assets/fonts/Bevan_Regular.ttf',
+  'black-ops-one': '/assets/fonts/BlackOpsOne_Regular.ttf',
+  bonbon: '/assets/fonts/Bonbon_Regular.ttf',
+  boongaloo: '/assets/fonts/Boogaloo_Regular.ttf',
+  'bree-serif': '/assets/fonts/BreeSerif_Regular.ttf',
+  'bubblegum-sans': '/assets/fonts/BubblegumSans-Regular.ttf',
+  'carter-one': '/assets/fonts/CarterOne-Regular.ttf',
+  'caveat-b': '/assets/fonts/Caveat_Bold.ttf',
+  'caveat-brush': '/assets/fonts/CaveatBrush_Regular.ttf',
+  'chela-one': '/assets/fonts/ChelaOne_Regular.ttf',
+  'cherry-swash-bold': '/assets/fonts/CherrySwash_Bold.ttf',
+  chewy: '/assets/fonts/Chewy_Regular.ttf',
+  coiny: '/assets/fonts/Coiny_Regular.ttf',
+  'concert-one': '/assets/fonts/ConcertOne_Regular.ttf',
+  cookie: '/assets/fonts/Cookie_Regular.ttf',
+  creepster: '/assets/fonts/Creepster_Regular.ttf',
+  cutive: '/assets/fonts/Cutive_Regular.ttf',
+  'dancing-script_bold': '/assets/fonts/DancingScript_Bold.ttf',
+  'dr-sugiyama': '/assets/fonts/DrSugiyama_Regular.ttf',
+  'eagle-lake': '/assets/fonts/EagleLake_Regular.ttf',
+  fascinate: '/assets/fonts/Fascinate_Regular.ttf',
+  'fredoka-one': '/assets/fonts/FredokaOne_Regular.ttf',
+  'fugaz-one': '/assets/fonts/FugazOne-Regular.ttf',
+  'germania-one': '/assets/fonts/GermaniaOne_Regular.ttf',
+  graduate: '/assets/fonts/Graduate_Regular.ttf',
+  'grand-hotel': '/assets/fonts/GrandHotel_Regular.ttf',
+  'hanalei-fill': '/assets/fonts/HanaleiFill_Regular.ttf',
+  'josefin-sans': '/assets/fonts/JosefinSans-Regular.ttf',
+  'just-me-again': '/assets/fonts/JustMeAgainDownHere_Regular.ttf',
+  'kaushan-script': '/assets/fonts/KaushanScript_Regular.ttf',
+  knewave: '/assets/fonts/Knewave_Regular.ttf',
+  'leckerli-one': '/assets/fonts/LeckerliOne_Regular.ttf',
+  lemonada: '/assets/fonts/Lemonada_Regular.ttf',
+  'lemonada-bold': '/assets/fonts/Lemonada_Bold.ttf',
+  'lexend-deca': '/assets/fonts/LexendDeca-Regular.ttf',
+  'londrina-solid': '/assets/fonts/LondrinaSolid_Regular.ttf',
+  'love-ya': '/assets/fonts/LoveYaLikeASister_Regular.ttf',
+  'luckiest-guy': '/assets/fonts/LuckiestGuy_Regular.ttf',
+  mclaren: '/assets/fonts/McLaren-Regular.ttf',
+  molle: '/assets/fonts/Molle_RegularItalic.ttf',
+  'montserrat-b': '/assets/fonts/Montserrat_Bold.ttf',
+  'montserrat-m': '/assets/fonts/Montserrat_Medium.ttf',
+  'mountains-of-christmas-bold': '/assets/fonts/MountainsofChristmas_Bold.ttf',
+  notable: '/assets/fonts/Notable-Regular.ttf',
+  'noto-sans-jp': '/assets/fonts/NotoSansJP-Regular.otf',
+  'noto-sans-jp-black': '/assets/fonts/NotoSansJP-Black.otf',
+  'oleo-script': '/assets/fonts/OleoScript-Regular.ttf',
+  'open-sans-b': '/assets/fonts/OpenSans_Bold.ttf',
+  'open-sans-eb': '/assets/fonts/OpenSans_ExtraBold.ttf',
+  'orbitron-medium': '/assets/fonts/Orbitron_Medium.ttf',
+  'oswald-b': '/assets/fonts/Oswald_Bold.ttf',
+  'oswald-m': '/assets/fonts/Oswald_Medium.ttf',
+  pacifico: '/assets/fonts/Pacifico_Regular.ttf',
+  'passion-one': '/assets/fonts/PassionOne-Regular.ttf',
+  'passion-one-bold': '/assets/fonts/PassionOne-Bold.ttf',
+  pattaya: '/assets/fonts/Pattaya_Regular.ttf',
+  'patua-one': '/assets/fonts/PatuaOne_Regular.ttf',
+  'permanent-marker': '/assets/fonts/PermanentMarker_Regular.ttf',
+  'playfair-display-bold': '/assets/fonts/PlayfairDisplay_Bold.ttf',
+  'poppins-medium': '/assets/fonts/Poppins_Medium.ttf',
+  'press-start-2p': '/assets/fonts/PressStart2P_Regular.ttf',
+  'princess-sofia': '/assets/fonts/PrincessSofia_Regular.ttf',
+  'pt-sans-bold': '/assets/fonts/PTSans_Bold.ttf',
+  quantico: '/assets/fonts/Quantico_Regular.ttf',
+  'quicksand-bold': '/assets/fonts/Quicksand_Bold.ttf',
+  rakkas: '/assets/fonts/Rakkas-Regular.ttf',
+  'rammetto-one': '/assets/fonts/RammettoOne_Regular.ttf',
+  shojumaru: '/assets/fonts/Shojumaru_Regular.ttf',
+  shrikhand: '/assets/fonts/Shrikhand_Regular.ttf',
+  'spicy-rice': '/assets/fonts/SpicyRice_Regular.ttf',
+  'squada-one': '/assets/fonts/SquadaOne-Regular.ttf',
+  swanky: '/assets/fonts/SwankyandMooMoo_Regular.ttf',
+  'vampiro-one': '/assets/fonts/VampiroOne_Regular.ttf',
+  'vollkorn-b': '/assets/fonts/Vollkorn_Bold.ttf',
+  'vollkorn-sb': '/assets/fonts/Vollkorn_SemiBold.ttf',
+  'wendy-one': '/assets/fonts/WendyOne_Regular.ttf',
+  'yeseva-one': '/assets/fonts/YesevaOne-Regular.ttf'
+};
+
+export const FONTS_HEBREW = {
+  secular_one: '/assets/fonts/hebrew/SecularOne-Regular.ttf',
+  frank_ruhl_libre: '/assets/fonts/hebrew/FrankRuhlLibre-Medium.ttf',
+  rubik: '/assets/fonts/hebrew/Rubik-Medium.ttf',
+  bellefair: '/assets/fonts/hebrew/Bellefair-Regular.ttf',
+  amatic_sc: '/assets/fonts/hebrew/AmaticSC-Bold.ttf'
+};
+
+export const FONTS_HINDI = {
+  hind: '/assets/fonts/hindi/Hind-Regular.ttf',
+  kalam: '/assets/fonts/hindi/Kalam-Bold.ttf'
+};
+
+export const FONTS_BENGALI = {
+  hind_siliguri: '/assets/fonts/bengali/HindSiliguri-Medium.ttf'
+};
+
+export const FONTS_GUJARATI = {
+  kumar_one: '/assets/fonts/gujarati/KumarOne-Regular.ttf'
+};
+
+export const FONTS_KANNADA = {
+  baloo_tamma2: '/assets/fonts/kannada/BalooTamma2-SemiBold.ttf'
+};
+
+export const FONTS_MALYALAM = {
+  gayathri: '/assets/fonts/malyalam/Gayathri-Bold.ttf'
+};
+
+export const FONTS_MARATHI = {
+  lohit_marathi: '/assets/fonts/marathi/Lohit-Marathi.ttf'
+};
+
+export const FONTS_TAMIL = {
+  pavanam: '/assets/fonts/tamil/Pavanam-Regular.ttf'
+};
+
+export const FONTS_TELUGU = {
+  suranna: '/assets/fonts/telugu/Suranna-Regular.ttf',
+  timmana: '/assets/fonts/telugu/Timmana-Regular.ttf'
+};
+
+export const FONTS_ORIYA = {
+  baloo_bhaina2: '/assets/fonts/oriya/BalooBhaina2-SemiBold.ttf'
+};

package/assets/js/constants/order.js

@@ -0,0 +1,26 @@
+export const ORDER_STATUS = {
+  PENDING_STAFF_REVIEW: 'pending staff review',
+  PENDING_CUSTOMER_APPROVAL: 'pending customer approval',
+  ORDER_PICKING_FOR_PRINT: 'order picking for print',
+  MANUAL_EXCEPTION: 'manual exception',
+  CANCELLED: 'cancelled',
+  PRINTED: 'printed, awaiting courier',
+  DISPATCHED: 'dispatched'
+};
+export const ORDER_STATUSES_LIST = Object.keys(ORDER_STATUS).map(key => ORDER_STATUS[key]);
+
+export const ORDER_STEPS = {
+  CHECKOUT_METHOD: 'Checkout Method',
+  BILLING_INFORMATION: 'Delivery Address',
+  // SHIPPING_INFORMATION: 'Shipping Information',
+  // SHIPPING_METHOD: 'Shipping Method',
+  PAYMENT_INFORMATION: 'Payment Info',
+  // ORDER_REVIEW: 'Order Review',
+  SUCCESS: 'Success'
+};
+export const ORDER_STEPS_LIST = Object.keys(ORDER_STEPS).map(k => ORDER_STEPS[k]);
+
+export const ORDER_PAYMENT_METHOD = {
+  CARD: 'card',
+  DEPOSIT: 'deposit'
+};

package/assets/js/constants/print-type.js

@@ -0,0 +1,16 @@
+const PRINT_TYPES = {
+  BLACK: 'black print',
+  FULL_COLOUR: 'full colour print',
+  EMBROIDERY: 'embroidery',
+  SCREEN: 'screen print'
+};
+
+export const PRINT_TYPES_LIST = Object.keys(PRINT_TYPES).map(k => PRINT_TYPES[k]);
+
+export const COST_TYPES = {
+  SETUP_AND_ITEM_COST: 'setup and item cost',
+  SETUP_ONLY: 'setup only',
+  ITEM_COST_ONLY: 'item cost only'
+};
+
+export const COST_TYPES_LIST = Object.keys(COST_TYPES).map(k => COST_TYPES[k]);

package/assets/js/constants/prints.js

@@ -0,0 +1,17 @@
+export const printsLabels = {
+  a3: 'A3',
+  a4_v: 'A4 Vertical',
+  a4_h: 'A4 Horizontal',
+  half_a4_h: 'Half A4 Horizontal',
+  rect6: '6x6',
+  rect10_l: '10x10 Left',
+  rect10_r: '10x10 Right'
+};
+
+export const COST_TYPES = {
+  SETUP_AND_ITEM_COST: 'setup and item cost',
+  SETUP_ONLY: 'setup only',
+  ITEM_COST_ONLY: 'item cost only'
+};
+
+export const COST_TYPES_LIST = Object.keys(COST_TYPES).map(k => COST_TYPES[k]);

package/assets/js/constants/product.js

@@ -0,0 +1,11 @@
+export const PRODUCT_TYPES = {
+  TEE: 'tee',
+  HOODIE: 'hoodie',
+  POLO: 'polo'
+};
+
+export const PRODUCT_TYPES_LIST = [
+  { type: PRODUCT_TYPES.TEE, label: 'Classic Unisex Tee' },
+  { type: PRODUCT_TYPES.HOODIE, label: 'Pullover Hoodie' },
+  { type: PRODUCT_TYPES.POLO, label: 'Classic Polo' }
+];

package/assets/js/constants/sides.js

@@ -0,0 +1,6 @@
+import { COLORS_IMAGES_TYPES } from './colors';
+
+export const SIDE_TYPES = {
+  [COLORS_IMAGES_TYPES.FRONT]: 'front',
+  [COLORS_IMAGES_TYPES.BACK]: 'back'
+};

package/assets/js/constants/sizes.js

@@ -0,0 +1 @@
+export const cmToInchesRatio = 0.393701;

package/assets/js/constants/states.js

@@ -0,0 +1,10 @@
+export const STATES = [
+  'ACT',
+  'NT',
+  'SA',
+  'WA',
+  'NSW',
+  'VIC',
+  'QLD',
+  'TAS'
+];

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

@@ -0,0 +1,72 @@
+import { cmToInchesRatio } from '../constants/sizes';
+
+const DEFAULT_PRINT_SIZE_CM = 21;
+
+const DEFAULT_PRINT_AREA = {
+  printArea: {
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0
+  }
+};
+
+export const PIXELS_PER_CM = 37.795275591;
+
+export const getProductPrintAreas = product => {
+  if (!product) {
+    return {};
+  }
+  const getSizesFromAreas = (areas, map) => (areas || []).reduce((list, { printSize, printAreaOffsets, sizes }) => {
+    if (printSize) {
+      list[printSize.alias] = { printSize, printAreaOffsets };
+    }
+
+    if (sizes) {
+      getSizesFromAreas(sizes, list);
+    }
+
+    return list;
+  }, map || {});
+
+  return getSizesFromAreas(product.printAreas);
+};
+
+export const getProductPrintsAreasPrices = product => {
+  const areas = getProductPrintAreas(product);
+  Object.keys(areas).forEach(key => {
+    areas[key] = areas[key].printArea?.pricing || [];
+  });
+  return areas;
+};
+
+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 widthCm = printSize ? printSize.width : DEFAULT_PRINT_SIZE_CM;
+  const heightCm = printSize ? printSize.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);
+  } else {
+    left = 30;
+    top = 30;
+    height = editorHeight - 60;
+    width = editorWidth - 60;
+  }
+
+  const center = {
+    top: top + height / 2,
+    left: left + width / 2
+  };
+
+  const widthInInches = widthCm * cmToInchesRatio;
+  const heightInInches = heightCm * cmToInchesRatio;
+
+  return { width, height, top, left, center, printArea, widthInInches, heightInInches };
+};

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

@@ -0,0 +1,108 @@
+
+import { filesLoader } from '@lancom/shared/assets/js/utils/fabric/files-loader';
+import { generateGUID } from '@lancom/shared/assets/js/utils/guid';
+export class Layer {
+  type = null;
+  colorId = null;
+  angle = 0;
+  alignVertically = 'center';
+  alignHorizontally = 'center';
+  originX = 'center';
+  originY = 'center';
+  fill = 'black';
+  top = null;
+  left = null;
+  centeredScaling = true;
+  lockUniScaling = true;
+
+  // selection style
+  rotatingPointOffset = 30;
+  transparentCorners = false;
+  borderColor = '#38C88D';
+  cornerColor = '#38C88D';
+  cornerStrokeColor = '#38C88D';
+  cornerSize = 13;
+  cornerStyle = 'circle';
+  lockScalingFlip = true;
+  padding = 0;
+  selectionDashArray = [10, 5];
+  borderDashArray = [5, 3];
+  cornerDashArray = [10, 5];
+
+  constructor(colorId, top, left) {
+    this.guid = generateGUID();
+    this.createdAt = new Date().getTime();
+    this.colorId = colorId;
+    this.top = top;
+    this.left = left;
+  }
+};
+
+export class TextLayer extends Layer {
+  copy = '';
+  editableDetails = true;
+  isEditMode = false;
+  textAlign = 'center';
+  fontFamily = 'acme';
+  fontStyle = 'normal';
+  fontSize = 16;
+  lineHeight = 1;
+  fill = 'rgb(0, 0, 0)';
+  stroke = 'rgb(255, 255, 255)';
+  enableOutline = false;
+  strokeWidth = 1;
+  paintFirst = 'stroke'; // stroke behind fill
+
+  constructor(type, colorId, top, left, isEditMode) {
+    super(colorId, top, left);
+    this.type = type;
+    this.isEditMode = isEditMode;
+  }
+};
+
+export class ArtLayer extends Layer {
+  url = null;
+  fileName = 'default';
+  editableDetails = true;
+  scaleX = 1;
+  scaleY = 1;
+  width = null;
+  height = null;
+
+  constructor(type, colorId, top, left, url, originalSize) {
+    super(colorId, top, left);
+    this.type = type;
+    this.url = url;
+    this.originalSize = originalSize;
+  }
+};
+
+export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url, originalSize, 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');
+  }
+  let layer;
+  switch (type) {
+    case 'text':
+      layer = new TextLayer(type, colorId, top, left, isEditMode);
+      if (properties.fontFamily) {
+        await filesLoader.loadFont(properties.fontFamily);
+      }
+      break;
+    case 'art':
+      layer = new ArtLayer(type, colorId, top, left, url, originalSize);
+      break;
+    default:
+      throw new Error(`Layer type '${type}' not found or not supported.`);
+  }
+
+  Object.assign(layer, properties);
+  return layer;
+};
+
+export const cloneLayerModel = layer => {
+  return { ...layer, createdAt: Date.now() };
+};

package/assets/js/utils/breakpoints.js

@@ -0,0 +1,67 @@
+import Vue from 'vue';
+import debounce from 'lodash.debounce';
+
+class Breakpoints {
+  screens = {
+    sm: 768,
+    md: 1024,
+    lg: 1280,
+    xl: 1600
+  };
+
+  constructor() {
+    this.breakpoints = Vue.observable({
+      w: window.innerWidth,
+      h: window.innerHeight,
+      is: this.getBreakpoint(window.innerWidth)
+    });
+    window.addEventListener(
+      'resize',
+      debounce(() => {
+        this.breakpoints.w = window.innerWidth;
+        this.breakpoints.h = window.innerHeight;
+        this.breakpoints.is = this.getBreakpoint(window.innerWidth);
+      }, 50),
+      false
+    );
+    return this.breakpoints;
+  }
+
+  getBreakpoint(w) {
+    if (this.isXs(w)) {
+      return 'xs';
+    } else if (this.isSm(w)) {
+      return 'sm';
+    } else if (this.isMd(w)) {
+      return 'md';
+    } else if (this.isLg(w)) {
+      return 'lg';
+    } else if (this.isXl(w)) {
+      return 'xl';
+    } else {
+      return 'all';
+    }
+  }
+
+  isXs(val) {
+    return val < this.screens.sm;
+  }
+
+  isSm(val) {
+    return val >= this.screens.sm && val < this.screens.md;
+  }
+
+  isMd(val) {
+    return val >= this.screens.md && val < this.screens.lg;
+  }
+
+  isLg(val) {
+    return val >= this.screens.lg && val < this.screens.xl;
+  }
+
+  isXl(val) {
+    return val >= this.screens.xl;
+  }
+}
+
+export default Breakpoints;

package/assets/js/utils/cart.js

@@ -0,0 +1,31 @@
+import { sortBySize } from './sizes';
+
+export function groupSimpleProducts(entity, isGroupByColor, isPopulateEmptyProducts = false, onlyColors) {
+  const groups = new Map();
+  (entity.simpleProducts || [])
+    .filter(sp => (isGroupByColor && onlyColors) ? onlyColors.some(c => c._id === sp.color._id) : true)
+    .forEach(simpleProduct => {
+      const key = isGroupByColor ? simpleProduct.color._id : simpleProduct.guid;
+      const defaultGroup = {
+        color: simpleProduct.color,
+        images: entity.product?.images || [],
+        prints: entity.prints,
+        product: entity.product,
+        simpleProducts: [],
+        amount: 0,
+        productsTotal: 0
+      };
+      const group = groups.get(key) || defaultGroup;
+
+      if (isPopulateEmptyProducts || simpleProduct.amount > 0) {
+        group.simpleProducts = sortBySize([...group.simpleProducts, simpleProduct]);
+        const amount = simpleProduct.amount || 0;
+        group.amount += amount;
+
+        group.productsTotal += amount * (simpleProduct.productCost || 0);
+        groups.set(key, group);
+      }
+    });
+
+  return groups;
+}

package/assets/js/utils/colors.js

@@ -0,0 +1,71 @@
+
+import { staticLink } from './filters';
+import { COLORS_IMAGES_TYPES } from './../constants/colors';
+
+export const isValidImageType = (i, type) => i.type === type || (i.types || []).includes(type);
+
+export const isValidImageTypes = (i, types) => types.some(type => isValidImageType(i, type));
+
+export const getColorImage = (product = {}, size = 'small', type, color, allowAnyColor = false) => {
+  const colorImage = color && (product.images || []).find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && color._id === i.color);
+  const image = colorImage || (product.images || []).find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (allowAnyColor || !i.color));
+  return image && staticLink(image[size]);
+};
+
+export const getProductCover = (product = {}, size = 'small', type = COLORS_IMAGES_TYPES.FRONT, color, allowAnyColor = false) => {
+  let getFunc = getMediumColorImage;
+  switch (size) {
+    case 'fill':
+      getFunc = getFillColorImage;
+      break;
+    case 'small':
+      getFunc = getSmallColorImage;
+      break;
+    case 'large':
+      getFunc = getLargeColorImage;
+      break;
+    case 'origin':
+      getFunc = getOriginColorImage;
+      break;
+  }
+  return (color && getFunc(product, `catalog_${type}`, color)) ||
+  (color && getFunc(product, type, color)) ||
+  getFunc(product, `catalog_${type}`, null, true) ||
+  getFunc(product, type, color) ||
+  getFunc(product, type, null, true);
+};
+
+export const getFillColorImage = (product, type, color, allowAnyColor) => getColorImage(product, 'color', type, color, allowAnyColor);
+export const getSmallColorImage = (product, type, color, allowAnyColor) => getColorImage(product, 'small', type, color, allowAnyColor);
+export const getMediumColorImage = (product, type, color, allowAnyColor) => getColorImage(product, 'medium', type, color, allowAnyColor);
+export const getLargeColorImage = (product, type, color, allowAnyColor) => getColorImage(product, 'large', type, color, allowAnyColor);
+export const getOriginColorImage = (product, type, color, allowAnyColor) => getColorImage(product, 'origin', type, color, allowAnyColor);
+
+export const getProductFillCover = (product, type, color) => getProductCover(product, 'color', type, color);
+export const getProductSmallCover = (product, type, color) => getProductCover(product, 'small', type, color);
+export const getProductMediumCover = (product, type, color) => getProductCover(product, 'medium', type, color);
+export const getProductLargeCover = (product, type, color) => getProductCover(product, 'large', type, color);
+export const getProductOriginCover = (product, type, color) => getProductCover(product, 'origin', type, color);
+
+export function getColorBackgroundStyle(color) {
+  const { rgb, pattern, name } = color || {};
+
+  if (pattern) {
+    return {
+      'background-image': `url("${pattern}")`
+    };
+  }
+
+  return {
+    'background-color': rgb || (name || '').replace(/\s+/g, '-').toLowerCase()
+  };
+}
+
+export function getProductHoverCover(product, currentColor) {
+  return getMediumColorImage(product, 'catalog_hover', currentColor) || (currentColor && getMediumColorImage(product, 'back', currentColor)) || getMediumColorImage(product, 'catalog_hover', null, true);
+}
+
+export function getColorOfDefaultCatalogFrontImage(product) {
+  const { color } = (product?.images || []).find(i => i.color && isValidImageType(i, 'catalog_front')) || {};
+  return color;
+}

package/assets/js/utils/copy-to-clipboard.js

@@ -0,0 +1,10 @@
+export function copyToClipboard(str) {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style = { position: 'absolute', left: '-9999px' };
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+}

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

@@ -0,0 +1,13 @@
+export const phone = {
+  validate: value => {
+    return /^[0-9]+$/.test(`${value}`); // todo add validation for phone number
+  },
+  message: 'Phone number is not valid'
+};
+
+export const float = {
+  validate: value => {
+    return /^[-0-9.]+$/.test(value || value === 0 ? value : '');
+  },
+  message: 'Float number is not valid'
+};

package/assets/js/utils/dom.js

@@ -0,0 +1,12 @@
+export function findParentByPredicate(el, predicate) {
+  let parent = el;
+  while (parent && parent !== document) {
+    if (predicate(parent)) {
+      return parent;
+    }
+
+    parent = parent.parentElement;
+  }
+
+  return null;
+}

package/assets/js/utils/event-bus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export const EventBus = new Vue();

package/assets/js/utils/event-dispatcher.js

@@ -0,0 +1,22 @@
+export default class EventDispatcher {
+  constructor(eventName) {
+    this.eventName = eventName;
+    this.callbacks = [];
+  }
+
+  registerCallback(callback) {
+    this.callbacks.push(callback);
+  }
+
+  unregisterCallback(callback) {
+    const index = this.callbacks.indexOf(callback);
+    if (index > -1) {
+      this.callbacks.splice(index, 1);
+    }
+  }
+
+  fire(data) {
+    const callbacks = this.callbacks.slice(0);
+    callbacks.forEach(callback => callback(data));
+  }
+};