@lancom/shared 0.0.62 → 0.0.66

package/mixins/payment.js

@@ -0,0 +1,84 @@
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
+import { ORDER_PAYMENT_METHOD } from '@lancom/shared/assets/js/constants/order';
+
+export default {
+  data() {
+    return {
+      processing: false,
+      loadingFields: false,
+      form: {},
+      fields: null,
+      agreeTermsAndCondition: false,
+      confirmCopyright: false,
+      errorMessage: null
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('order', ['orderData', 'card']),
+    isVisibleChargeMessage() {
+      return this.isSuccessOrderCharge || this.isFailedOrderCharge;
+    },
+    isSuccessOrderCharge() {
+      const { charge, test, paymentMethod } = this.orderData || {};
+      console.log('charge...', charge, test, paymentMethod);
+      return charge?.success || test || paymentMethod === ORDER_PAYMENT_METHOD.DEPOSIT;
+    },
+    isFailedOrderCharge() {
+      const { charge } = this.orderData || {};
+      return (charge && !charge.success) || this.errorMessage;
+    }
+  },
+  methods: {
+    ...mapActions('order', ['submitPayment']),
+    ...mapMutations('order', ['clearCharge']),
+    ...mapActions('cart', ['clearCart']),
+    ...mapMutations('product', ['clearTemplate']),
+    ...mapMutations('layers', ['resetLayers']),
+    handleErrors(err) {
+      // err.messages.forEach(({ message }) => this.$toastr.e(message));
+      const defaultMessage = 'Payment error';
+      this.errorMessage = (err.messages ? err.messages.map(({ message }) => message).join(', ') : (err.error_description)) || defaultMessage;
+    },
+    async proceedPayment(card) {
+      try {
+        this.clearFailedCharge();
+        const data = { card, shop: this.shop._id };
+        await this.submitPayment(data);
+        this.onOrderSucces();
+      } catch (e) {
+        const { message } = (e.response && e.response.data) || e;
+        this.handleErrors({ messages: [{ message }] });
+      } finally {
+        this.processing = false;
+      }
+    },
+    onOrderSucces() {
+      this.clearCart();
+      this.clearTemplate();
+      this.resetLayers();
+      this.sendConversionData();
+      if (this.onSuccessPayment) {
+        this.onSuccessPayment();
+      }
+    },
+    sendConversionData() {
+      gtm.push({
+        id: this.orderData._id,
+        total: this.orderData.total,
+        shipping: this.orderData.shippingAddress.postcode,
+        products: this.orderData.products.map(product => ({
+          sku: product.SKU,
+          name: product.name,
+          category: product.brand,
+          quantity: product.amount
+        }))
+      });
+    },
+    clearFailedCharge() {
+      this.errorMessage = null;
+      this.clearCharge();
+    }
+  }
+};

package/mixins/product-preview.js

@@ -0,0 +1,69 @@
+import { getColorBackgroundStyle, getProductMediumCover, getProductLargeCover, getProductHoverCover } from '@lancom/shared/assets/js/utils/colors';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
+import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
+
+const getBgStyle = img => img && ({ 'background-image': `url("${img}")` });
+
+const productPreview = {
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    full: {
+      type: Boolean
+    },
+    toEditor: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      currentColor: null,
+      productСoverLoaded: false
+    };
+  },
+  computed: {
+    previewTags() {
+      return this.product.previewTags || [];
+    },
+    tags() {
+      const tags = [
+        (this.product.isClearance ? { _id: 1, name: 'CLEARANCE', fontSize: '14px' } : null),
+        ...(this.product.tags || [])
+      ].filter(t => !!t);
+      return this.full ? tags : (tags || []).slice(0, 3);
+    },
+    productLink() {
+      return generateProductLink(this.product, this.currentColor, this.toEditor);
+    },
+    productСoverBig() {
+      return getProductLargeCover(this.product, 'front', this.currentColor);
+    },
+    productСover() {
+      return getProductMediumCover(this.product, 'front', this.currentColor);
+    },
+    productСoverHover() {
+      return getProductHoverCover(this.product, this.currentColor) || getProductMediumCover(this.product, 'back', this.currentColor);
+    },
+    productСoverBg() {
+      return getBgStyle(this.productСover);
+    },
+    productСoverHoverBg() {
+      return getBgStyle(this.productСoverHover);
+    },
+    productBackgroundСover() {
+      return getColorBackgroundStyle(this.currentColor);
+    },
+    productBrand() {
+      const { brand } = this.product;
+      return brand && staticLink(brand.logo);
+    },
+    hasTags() {
+      return this.product?.tags.length > 0;
+    }
+  }
+};
+
+export default productPreview;

package/mixins/products-price.js

@@ -0,0 +1,82 @@
+import { mapGetters } from 'vuex';
+import debounce from 'lodash.debounce';
+import api from '@lancom/shared/assets/js/api';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import { getProductPrintsAreasPrices } from '@lancom/shared/assets/js/models/print-area';
+
+const productsPrice = {
+  filters: {
+    price
+  },
+  data() {
+    return {
+      amount: 10,
+      screenPrint: false,
+      postcode: null,
+      product: null,
+      front: { printArea: 'a4_v', colors: 1 },
+      back: { printArea: 'a4_v', colors: 0 },
+      productPricing: null,
+      defaultProductId: '1',
+      calculatePriceWithDebounce: debounce(this.calculatePrice, 500)
+    };
+  },
+  computed: {
+    ...mapGetters(['pricingSettings', 'shop']),
+    printsPricing() {
+      const pricing = {};
+      if (this.productPricing) {
+        const { prints: { sides } } = this.productPricing.products[this.defaultProductId];
+        sides.forEach(side => {
+          pricing[side.side] = side;
+        });
+      }
+      return pricing;
+    },
+    calcProducts() {
+      return [{
+        _id: '1',
+        amount: this.amount,
+        layers: [{
+          sideId: 'front'
+        }, {
+          sideId: 'back'
+        }],
+        pricing: (this.product && this.product.pricing) || this.pricingSettings.defaultProductPrice,
+        printAreas: {
+          back: this.back.printArea,
+          front: this.front.printArea
+        },
+        printColors: {
+          back: this.back.colors,
+          front: this.front.colors
+        },
+        weight: this.product.weight,
+        printsPricing: getProductPrintsAreasPrices(this.product)
+      }];
+    }
+  },
+  watch: {
+    postcode() {
+      this.calculatePriceWithDebounce();
+    },
+    calcProducts() {
+      this.calculatePriceWithDebounce();
+    }
+  },
+  mounted() {
+    this.calculatePriceWithDebounce();
+  },
+  methods: {
+    async calculatePrice() {
+      const playload = {
+        products: this.calcProducts,
+        postcode: this.postcode,
+        screenPrint: this.screenPrint
+      };
+      this.productPricing = await api.calculateProductPrice(playload, this.shop._id);
+    }
+  }
+};
+
+export default productsPrice;

package/nuxt.config.js

@@ -0,0 +1,119 @@
+module.exports = (config, axios) => ({
+  mode: 'universal',
+  head: {
+    title: config.npm_package_name || '',
+    htmlAttrs: {
+      lang: 'en',
+      dir: 'ltr'
+    },
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1.0,viewport-fit=cover' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/png', href: '/favicon.png' }
+    ]
+  },
+  loading: { color: '#272526' },
+  css: [
+    '@/node_modules/vue-js-modal/dist/styles.css',
+    '@/node_modules/vue-multiselect/dist/vue-multiselect.min',
+    '@assets/scss/main.scss'
+  ],
+  sitemap: {
+    hostname: `https://${config.HOST_NAME}`,
+    defaults: {
+      priority: 1
+    },
+    exclude: [
+      '/faq',
+      '/checkout/**',
+      '/customer/**'
+    ],
+    routes: async () => {
+      const { data } = await axios.get(`${config.API_URL}/feed/sitemap?host=${config.HOST_NAME}`);
+      return data.map(url => ({ url, priority: 0.8 }));
+    }
+  },
+  plugins: [
+    '@/node_modules/@lancom/shared/plugins/jsonld',
+    '@/node_modules/@lancom/shared/plugins/vue-fragment',
+    '@/node_modules/@lancom/shared/plugins/global-components',
+    '@/node_modules/@lancom/shared/plugins/directives',
+    '@/node_modules/@lancom/shared/plugins/vue-js-modal',
+    '@/node_modules/@lancom/shared/plugins/vee-validate',
+    { src: '@/node_modules/@lancom/shared/plugins/vue-toastr', ssr: false },
+    { src: '@/node_modules/@lancom/shared/plugins/vue-hummer', ssr: false },
+    '@/node_modules/@lancom/shared/plugins/vue-multiselect',
+    '@/node_modules/@lancom/shared/plugins/vue-tooltip',
+    '@/node_modules/@lancom/shared/plugins/vue-color',
+    '@/node_modules/@lancom/shared/plugins/vue-click-outside',
+    { src: '@/node_modules/@lancom/shared/plugins/error-handler', ssr: false },
+    { src: '@/node_modules/@lancom/shared/plugins/aos', ssr: false },
+    '@/node_modules/@lancom/shared/plugins/aos-animation',
+    { src: '@/node_modules/@lancom/shared/plugins/vue-recaptcha', ssr: false },
+    // { src: '@/node_modules/@lancom/shared/plugins/vue-tables-2', ssr: false }
+  ],
+  modules: [
+    '@nuxtjs/axios',
+    '@nuxtjs/dotenv',
+    '@nuxtjs/sitemap',
+    '@/node_modules/@lancom/feed/lib/module'
+  ],
+  axios: {
+  },
+  env: {
+    NODE_ENV: config.NODE_ENV || 'development'
+  },
+  build: {
+    publicPath: '/client/',
+    transpile: [
+      'vee-validate/dist/rules',
+      'vue-json-editor',
+      '@lancom',
+      '@lancom/shared/plugins/aos-animation'
+    ],
+    extend(config, ctx) {}
+  },
+  feed: [{
+    path: '/google-shopping.xml',
+    async get() {
+      const { data } = await axios.get(`${config.API_URL}/feed/products?host=${config.HOST_NAME}`);
+      return {
+        title: { _text: 'All products' },
+        link: { _text: `https://${config.HOST_NAME}` },
+        generator: { _text: config.HOST_NAME },
+        item: data.map(item => {
+          const spliceFirstImage = images => (images || []).splice(0, 1)[0];
+          const getImages = images => (images || []).length > 0 ? images : null;
+          const image = spliceFirstImage(item.frontImages) || spliceFirstImage(item.backImages) || {};
+          const images = getImages(item.backImages) || getImages(item.frontImages) || [];
+          return {
+            title: { _text: `${item.name} ${item.color}-${item.size}` },
+            link: { _text: `https://${config.HOST_NAME}${item.link}` },
+            'g:id': { _text: item.id },
+            'g:item_group_id': { _text: item.groupId },
+            'g:size': { _text: item.size },
+            'g:size_system': 'AU',
+            'g:size_type': 'regular',
+            'g:gender': { _text: item.gender },
+            'g:material': { _text: item.material },
+            'g:brand': { _text: item.brand },
+            'g:condition': { _text: item.condition },
+            'g:mpn': { _text: item.mpn },
+            'g:color': { _text: item.color },
+            'g:image_link': { _text: image },
+            'g:additional_image_link': images.map(i => ({ _text: i })),
+            'g:price': { _text: `${(item.maxUnprintedPrice || 0).toFixed(2)}AUD` },
+            'g:availability': { _text: item.availability },
+            'g:google_product_category': { _text: 2047 },
+            'g:product_type': { _text: item.productType },
+            'g:is_bundle': { _text: item.bundle },
+            'g:identifier_exists': 'no',
+            'g:product_weight': { _text: item.weight }
+          };
+        })
+      };
+    }
+  }]
+});

package/package.json

@@ -1,18 +1,24 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.62",
-  "description": "lancom feed scripts",
+  "version": "0.0.66",
+  "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@bitbucket.org/simpletee/lancom-feed.git"
+    "url": "git+ssh://git@bitbucket.org/simpletee/lancom-shared.git"
   },
   "license": "ISC",
-  "homepage": "https://bitbucket.org/simpletee/lancom-feed#readme",
+  "homepage": "https://bitbucket.org/simpletee/lancom-shared#readme",
   "dependencies": {
-    "async-cache": "^1.1.0",
-    "consola": "^2.12.1",
-    "feed": "^4.2.0",
-    "xml-js": "^1.6.11"
+    "lodash.get": "^4.4.2",
+    "vue2-hammer": "^2.1.2"
+  },
+  "devDependencies": {
+    "@nuxtjs/eslint-config": "^5.0.0",
+    "@nuxtjs/eslint-module": "^3.0.1",
+    "@nuxtjs/google-analytics": "^2.2.3",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^7.0.0",
+    "eslint-plugin-nuxt": ">=0.4.2"
   }
 }

package/pages/quotes/view/_id.js

@@ -0,0 +1,20 @@
+import { mapGetters } from 'vuex';
+
+export default {
+  async asyncData({ store, params: { id, option }, error }) {
+    try {
+      const data = { shop: store.getters.shop._id, id, option };
+      await store.dispatch('quote/fetchQuote', data);
+    } catch (e) {
+      const { status, data } = e?.response || {};
+      const statusCode = status || 500;
+      error({
+        statusCode,
+        error: data?.error || 'Quote not found'
+      });
+    }
+  },
+  computed: {
+    ...mapGetters('quote', ['quote', 'option', 'shopContacts'])
+  }
+};

package/plugins/aos-animation.js

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+
+let enabled = null;
+
+export default ({ app }) => {
+  if (!Vue.aosAnimation) {
+    Vue.aosAnimation = true;
+
+    if (process.client) {
+      app.router.beforeEach((to, from, next) => {
+        enabled = true;
+        next();
+      });
+    }
+
+    Vue.mixin({
+      computed: {
+        aosFade() {
+          return enabled ? 'fade' : null;
+        },
+        aosFadeLeft() {
+          return enabled ? 'fade-left' : null;
+        },
+        aosFadeUp() {
+          return enabled ? 'fade-up' : null;
+        },
+        aosFadeRight() {
+          return enabled ? 'fade-right' : null;
+        },
+        aosFadeDown() {
+          return enabled ? 'fade-down' : null;
+        },
+        aosEaseIn() {
+          return enabled ? 'ease-in' : null;
+        }
+      }
+    });
+  }
+};

package/plugins/aos.js

@@ -0,0 +1,12 @@
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+
+export default ({ app }) => {
+  app.AOS = new AOS.init({
+    once: true
+  });
+
+  window.onNuxtReady(() => {
+    AOS.refresh();
+  });
+};

package/plugins/directives.js

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+
+Vue.directive('focus', {
+  inserted: (el, binding) => {
+    const delay = binding.value || 500;
+    setTimeout(() => {
+      el.focus();
+    }, delay);
+  }
+});

package/plugins/error-handler.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+
+Vue.config.errorHandler = function (error) {
+  console.error(error);
+  return true;
+};

package/plugins/global-components.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import Btn from '@lancom/shared/components/common/btn';
+import Spinner from '@lancom/shared/components/common/spinner';
+import FileUploader from '@lancom/shared/components/common/file_uploader';
+import Checkbox from '@lancom/shared/components/common/checkbox';
+import ColorPicker from '@lancom/shared/components/common/color-picker';
+import Breakpoint from '@lancom/shared/components/common/breakpoint';
+
+Vue.component('btn', Btn);
+Vue.component('spinner', Spinner);
+Vue.component('file-uploader', FileUploader);
+Vue.component('Checkbox', Checkbox);
+Vue.component('ColorPicker', ColorPicker);
+Vue.component('breakpoint', Breakpoint);

package/plugins/jsonld.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import NuxtJsonld from 'nuxt-jsonld';
+
+Vue.use(NuxtJsonld);

package/plugins/save-state.js

@@ -0,0 +1,38 @@
+import debounce from 'lodash.debounce';
+
+const STATE_STORAGE_KEY = 'lancom-state-2.1';
+const SAVE_STATE_MODULES = new Map([
+  ['cart/setId', 'cart.id'],
+  ['cart/clearCart', 'cart.id']
+]);
+
+export function saveStatePlugin(store) {
+  const saveStateWithDebounce = debounce(() => saveState(store), 50);
+
+  store.subscribe(mutation => {
+    if (SAVE_STATE_MODULES.has(mutation.type)) {
+      saveStateWithDebounce();
+    }
+  });
+}
+
+export function loadState() {
+  const savedState = localStorage.getItem(STATE_STORAGE_KEY);
+  return savedState && JSON.parse(savedState);
+}
+
+export function saveState(store) {
+  const stateToSave = {};
+  SAVE_STATE_MODULES.forEach((value, key) => {
+    if (!value.includes('.')) {
+      stateToSave[value] = store.state[value];
+    } else {
+      const [key, prop] = value.split('.');
+      if (!stateToSave[key]) {
+        stateToSave[key] = {};
+      }
+      stateToSave[key][prop] = store.state[key] && store.state[key][prop];
+    }
+  });
+  localStorage.setItem(STATE_STORAGE_KEY, JSON.stringify(stateToSave));
+}

package/plugins/vee-validate.js

@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
+import { required, email, max, min_value as minValue, integer } from 'vee-validate/dist/rules';
+import { phone, float } from '@lancom/shared/assets/js/utils/custom-validation-rules';
+
+Vue.component('ValidationProvider', ValidationProvider);
+Vue.component('ValidationObserver', ValidationObserver);
+
+extend('required', {
+  ...required,
+  message(name) {
+    return `${name} attribute is mandatory`;
+  }
+});
+extend('email', email);
+extend('max', max);
+extend('float', float);
+extend('min_value', minValue);
+extend('phone', phone);
+extend('integer', integer);

package/plugins/vue-click-outside.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import vClickOutside from 'v-click-outside';
+
+Vue.use(vClickOutside);

package/plugins/vue-color.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import { Chrome } from 'vue-color';
+
+Vue.component('VColor', Chrome);

package/plugins/vue-fragment.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import { Plugin } from 'vue-fragment';
+
+Vue.use(Plugin);

package/plugins/vue-hummer.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import { VueHammer } from 'vue2-hammer';
+
+VueHammer.config.pan = {
+  threshold: 5
+};
+Vue.use(VueHammer);

package/plugins/vue-js-modal.js

@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import VModal from 'vue-js-modal/dist/ssr.index';
+
+Vue.use(
+  VModal,
+  {
+    dynamic: true,
+    dynamicDefaults: {
+      adaptive: true,
+      scrollable: true,
+      clickToClose: false,
+      classes: 'transparent-overlay'
+    }
+  }
+);

package/plugins/vue-multiselect.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import Multiselect from 'vue-multiselect';
+
+Vue.component('multiselect', Multiselect);

package/plugins/vue-recaptcha.js

@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import { VueReCaptcha } from 'vue-recaptcha-v3';
+
+export default () => {
+  Vue.use(VueReCaptcha, {
+    siteKey: process.env.RECAPTCHA_KEY,
+    loaderOptions: {
+      useRecaptchaNet: true
+    }
+  });
+  Vue.mixin({
+    methods: {
+      async getRecaptcha(name) {
+        return process.env.IS_LOCAL === 'true' || await this.$recaptcha(name);
+      }
+    }
+  });
+};

package/plugins/vue-tables-2.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import { ClientTable } from 'vue-tables-2';
+
+export default () => {
+  Vue.use(ClientTable);
+};

package/plugins/vue-toastr.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Toastr from 'vue-toastr';
+
+Vue.use(Toastr, {
+  defaultProgressBar: false,
+  defaultClassNames: ['animated', 'slideInDown']
+});

package/plugins/vue-tooltip.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import VTooltip from 'v-tooltip';
+
+Vue.use(VTooltip);

package/static/icons/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="23" viewBox="0 0 14 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6963 20.7394L3.64439 11.6999L12.6974 2.66034C13.1289 2.22936 13.1289 1.5322 12.6974 1.10122C12.2659 0.671337 11.5669 0.671337 11.1354 1.10122L1.30249 10.9198C0.871025 11.3497 0.871025 12.0479 1.30249 12.4778L11.1353 22.2964C11.5668 22.7263 12.2669 22.7263 12.6984 22.2964C13.1278 21.8676 13.1278 21.1693 12.6963 20.7394Z" fill="#343750"/>
+</svg>

package/static/icons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.30369 4.26051L16.3556 13.3L7.3026 22.3395C6.87114 22.7705 6.87114 23.4677 7.3026 23.8987C7.73406 24.3285 8.4331 24.3285 8.86457 23.8987L18.6975 14.0801C19.129 13.6502 19.129 12.9519 18.6975 12.5221L8.86466 2.70349C8.43319 2.2736 7.73306 2.2736 7.3016 2.70349C6.87223 3.13228 6.87223 3.83062 7.30369 4.26051Z" fill="#343750"/>
+</svg>