@lancom/shared 0.0.87 → 0.0.91

package/assets/js/api/admin.js

@@ -34,8 +34,11 @@ export default {
   saveOrder(order) {
     return order._id ? _put(`admin/order/${order._id}`, order) : _post('admin/order', order);
   },
-  exportOrderToStarshipit(order) {
-    return _post(`shop/${order.shop}/order/${order._id}/export-to-starshipit`, order);
+  exportOrderToStarshipit(order, shipment) {
+    return _post(`admin/shop/${order.shop}/order/${order._id}/shipment/${shipment._id || shipment.guid}/export-to-starshipit`, shipment);
+  },
+  calculateShipmentRates(order, shipment) {
+    return _get(`admin/shop/${order.shop}/order/${order._id}/shipment/${shipment._id || shipment.guid}/calculate-shipping`);
   },
   createOrderRefund(order, refund, shop) {
     return _post(`shop/${shop}/order/${order}/refund`, refund);

package/assets/js/utils/filters.js

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import DateOnly from 'dateonly';
 
 import currencies from '../constants/currencies';
@@ -16,6 +16,8 @@ export const number = (value, digits = 0) => {
   return fixed.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 };
 
+export const decimal = value => number(value || 0, 2);
+
 export const price = (value = 0, currency = 'USD') => {
   const amount = number(value, 2);
   const cur = currencies.find(c => c.value.toUpperCase() === currency.toUpperCase());
@@ -66,11 +68,11 @@ export const highlight = (string = '', query) => {
   return string.toString().replace(q, matchedTxt => (`<span class="highlight">${matchedTxt}</span>`));
 };
 
-export const date = d => moment(d).format('lll');
+export const date = d => dayjs(d).format('ddd, MMM D, YYYY h:mm A');
 
-export const shortDate = d => moment(d).format('DD/MM/YYYY');
+export const shortDate = d => dayjs(d).format('DD/MM/YYYY');
 
-export const sydneyTime = d => moment(d).utc().utcOffset(10).format('lll');
+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;
 

package/assets/js/utils/product.js

@@ -121,7 +121,6 @@ export function generateProductsLink($route, data) {
 }
 
 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}` : ''}`;
 }

package/components/checkout/cart/cart.mixin.js

@@ -36,7 +36,6 @@ export default {
     if (!this.suburb && this.user?.suburb) {
       this.handleSuburbChange(this.user.suburb);
     }
-    console.log('user: ', this.user);
   },
   methods: {
     ...mapMutations('cart', [

package/components/editor/editor_layers/editor_layers_toolbar/editor-layers-toolbar.vue

@@ -79,12 +79,16 @@
 
 <script>
 import { createNamespacedHelpers, mapGetters } from 'vuex';
+import FileUploader from '@lancom/shared/components/common/file_uploader';
 import modals from '@lancom/shared/mixins/modals';
 
 const { mapActions, mapMutations } = createNamespacedHelpers('product');
 
 export default {
   name: 'EditorLayersToolbar',
+  components: {
+    FileUploader
+  },
   mixins: [
     modals
   ],

package/components/products/product_list/product-list.vue

@@ -14,7 +14,22 @@
         }"
         @mouseenter="setActiveProduct(index)"
         @mouseleave="setActiveProduct(null)">
-        <slot name="product" v-bind="{ product, full: activeProduct === index, toEditor }">
+        <slot
+          v-if="placeholder"
+          name="placeholder"
+          v-bind="{ product, full: activeProduct === index, toEditor }">
+          <product-list-product-placeholder
+            :product="product"
+            :to-editor="toEditor"
+            class="ProductList__item"
+            :class="{
+              'ProductList__item--active': activeProduct === index
+            }" />
+        </slot>
+        <slot
+          v-else
+          name="product"
+          v-bind="{ product, full: activeProduct === index, toEditor }">
           <product-list-product
             :product="product"
             :to-editor="toEditor"
@@ -36,11 +51,13 @@
 
 <script>
 import ProductListProduct from '../product_list_product/product-list-product';
+import ProductListProductPlaceholder from '../product_list_product_placeholder/product-list-product-placeholder';
 
 export default {
   name: 'LancomProductList',
   components: {
-    ProductListProduct
+    ProductListProduct,
+    ProductListProductPlaceholder
   },
   props: {
     products: {
@@ -50,6 +67,10 @@ export default {
     toEditor: {
       type: Boolean,
       default: true
+    },
+    placeholder: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

package/components/products/product_list_product_placeholder/product-list-product-placeholder.scss

@@ -0,0 +1,52 @@
+@import "@/assets/scss/variables";
+
+.ProductListProductPlaceholder {
+  &__wrapper {
+    padding: 30px;
+  }
+  &__link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 30px;
+    text-indent: -99999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  &__image {
+    width: 100%;
+    height: 250px;
+    animation-name: backgroundColorPalette;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
+  &__info {
+    margin-top: 20px;
+    width: 100%;
+    height: 30px;
+    animation-name: backgroundColorPalette;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    &--medium {
+      width: 80%;
+    }
+    &--small {
+      width: 60%;
+    }
+  }
+}
+
+@keyframes backgroundColorPalette {
+  0% {
+    background: #efefef;
+  }
+  100% {
+    background: #d9d9d9;
+  }
+}

package/components/products/product_list_product_placeholder/product-list-product-placeholder.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="ProductListProductPlaceholder__wrapper">
+    <nuxt-link
+      :to="productLink"
+      class="ProductListProductPlaceholder__link">
+      <span class="ProductListProductPlaceholder__image"></span>
+      <span class="ProductListProductPlaceholder__info ProductListProductPlaceholder__info--large"></span>
+      <span class="ProductListProductPlaceholder__info ProductListProductPlaceholder__info--medium"></span>
+      <span class="ProductListProductPlaceholder__info ProductListProductPlaceholder__info--small"></span>
+      {{ product.name }}
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+import productPreview from '@lancom/shared/mixins/product-preview';
+
+export default {
+  name: 'ProductListProductPlaceholder',
+  mixins: [productPreview]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-list-product-placeholder';
+</style>

package/components/products/products_aside/products-aside.scss

@@ -11,4 +11,36 @@
       display: none;
     }
   }
+  &__placeholder {
+    display: flex;
+    flex-direction: column;
+    margin-right: 20px;
+  }
+  &__info {
+    margin-top: 20px;
+    width: 100%;
+    height: 20px;
+    animation-name: backgroundColorPalette;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    &--medium {
+      width: 85%;
+    }
+    &--small {
+      width: 70%;
+    }
+    &--small2 {
+      width: 55%;
+    }
+  }
+}
+
+@keyframes backgroundColorPalette {
+  0% {
+    background: #efefef;
+  }
+  100% {
+    background: #d9d9d9;
+  }
 }

package/components/products/products_aside/products-aside.vue

@@ -2,38 +2,35 @@
   <div
     :data-aos="aosFadeRight"
     class="ProductsAside__wrapper">
-    <!-- <div class="ProductsAside__item hidden-md-and-up">
-      <input
-        v-model="search"
-        name="search"
-        placeholder="Search"
-        type="text"
-        class="form-field no-label tiny-placeholder labelless"
-        @change="goToTextSearch" />
-    </div> -->
-    <!-- <div class="ProductsAside__item">
-      <products-types
-        :has-selected-icon="hasSelectedIcon"
-        :has-thumbs="hasThumbs" />
-    </div> -->
-    <div class="ProductsAside__item">
-      <products-brands
-        :has-selected-icon="hasSelectedIcon" />
+    <div
+      v-if="placeholder"
+      class="ProductsAside__placeholder">
+      <span class="ProductsAside__info ProductsAside__info--large"></span>
+      <span class="ProductsAside__info ProductsAside__info--medium"></span>
+      <span class="ProductsAside__info ProductsAside__info--small"></span>
+      <span class="ProductsAside__info ProductsAside__info--small2"></span>
     </div>
-    <div class="ProductsAside__item">
-      <products-colors />
-    </div>
-    <div class="ProductsAside__item">
-      <products-attributes
-        :has-selected-icon="hasSelectedIcon" />
-      <products-tags
-        :has-selected-icon="hasSelectedIcon" />
+    <div v-else>
+      <div class="ProductsAside__item">
+        <products-brands
+          :has-selected-icon="hasSelectedIcon" />
+      </div>
+      <div class="ProductsAside__item">
+        <products-colors />
+      </div>
+      <div class="ProductsAside__item">
+        <products-attributes
+          :has-selected-icon="hasSelectedIcon" />
+        <products-tags
+          :has-selected-icon="hasSelectedIcon" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import ProductsTypes from '@lancom/shared/components/products/products_types/products-types';
+// import ProductsTypes from '@lancom/shared/components/products/products_types/products-types';
+import { mapGetters } from 'vuex';
 import ProductsBrands from '@lancom/shared/components/products/products_brands/products-brands';
 import ProductsTags from '@lancom/shared/components/products/products_tags/products-tags';
 import ProductsAttributes from '@lancom/shared/components/products/products_attributes/products-attributes';
@@ -43,7 +40,7 @@ import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 export default {
   name: 'ProductsAside',
   components: {
-    ProductsTypes,
+    // ProductsTypes,
     ProductsBrands,
     ProductsTags,
     ProductsAttributes,
@@ -64,6 +61,9 @@ export default {
       search: this.$route.query.text || ''
     };
   },
+  computed: {
+    ...mapGetters('products', ['placeholder'])
+  },
   methods: {
     goToTextSearch() {
       this.goToPageWithFilters({ text: this.search });

package/components/products/products_catalog/products-catalog.vue

@@ -3,8 +3,11 @@
     <div v-if="products">
       <slot
         name="list"
-        v-bind="{ products, toEditor }">
-        <product-list :products="products" :to-editor="toEditor" />
+        v-bind="{ products, toEditor, placeholder }">
+        <product-list
+          :products="products"
+          :to-editor="toEditor"
+          :placeholder="placeholder" />
       </slot>
       <pagination
         v-model="currentPage"
@@ -38,7 +41,8 @@ export default {
       'products',
       'page',
       'count',
-      'perPage'
+      'perPage',
+      'placeholder'
     ]),
     currentPage: {
       get() {
@@ -47,6 +51,7 @@ export default {
       set(page) {
         const link = generateProductsLink(this.$route, { page });
         this.$router.push(link);
+        window.scrollTo(0, 0);
       }
     }
   }

package/components/products/products_colors/products-colors.vue

@@ -31,6 +31,7 @@
               'ProductsColors__color--selected': isSelectedColor(color)
             }">
             <product-color-image
+              v-if="canLoadImages"
               :color="color"
               class="ProductsColors__color-image" />
           </div>
@@ -53,6 +54,11 @@ export default {
     ProductsLink,
     ToggleContent
   },
+  data() {
+    return {
+      canLoadImages: false
+    };
+  },
   computed: {
     ...mapGetters('products', ['colors']),
     selectedColors() {
@@ -60,6 +66,11 @@ export default {
       return this.colors.filter(color => colors.includes(color.alias));
     }
   },
+  mounted() {
+    setTimeout(() => {
+      this.canLoadImages = true;
+    }, 1000);
+  },
   methods: {
     isSelectedColor(color) {
       return this.selectedColors.some(c => c._id === color._id);

package/components/quotes/quote_request/quote-request.vue

@@ -297,11 +297,13 @@
 import api from '@lancom/shared/assets/js/api';
 import { mapGetters } from 'vuex';
 import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+import FileUploader from '@lancom/shared/components/common/file_uploader';
 
 export default {
   name: 'QuoteRequest',
   components: {
-    CheckedIcon
+    CheckedIcon,
+    FileUploader
   },
   data() {
     return {

package/mixins/payment.js

@@ -22,7 +22,6 @@ export default {
     },
     isSuccessOrderCharge() {
       const { charge, test, paymentMethod } = this.orderData || {};
-      console.log('charge...', charge, test, paymentMethod);
       return charge?.success || test || paymentMethod === ORDER_PAYMENT_METHOD.DEPOSIT;
     },
     isFailedOrderCharge() {

package/mixins/product-preview.js

@@ -4,6 +4,12 @@ import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 
 const getBgStyle = img => img && ({ 'background-image': `url("${img}")` });
 
+const loadHolder = {
+  canLoadImages: false,
+  canLoadColorImages: false,
+  canLoadBackImages: false
+};
+
 const productPreview = {
   props: {
     product: {
@@ -21,10 +27,20 @@ const productPreview = {
   data() {
     return {
       currentColor: null,
-      productСoverLoaded: false
+      productСoverLoaded: false,
+      loadHolder
     };
   },
   computed: {
+    canLoadImages() {
+      return this.loadHolder.canLoadImages;
+    },
+    canLoadColorImages() {
+      return this.loadHolder.canLoadColorImages;
+    },
+    canLoadBackImages() {
+      return this.loadHolder.canLoadBackImages;
+    },
     previewTags() {
       return this.product.previewTags || [];
     },
@@ -38,9 +54,6 @@ const productPreview = {
     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);
     },
@@ -63,6 +76,17 @@ const productPreview = {
     hasTags() {
       return this.product?.tags.length > 0;
     }
+  },
+  mounted() {
+    if (process.client) {
+      setTimeout(() => {
+        this.loadHolder.canLoadImages = true;
+      }, 0);
+      setTimeout(() => {
+        this.loadHolder.canLoadBackImages = true;
+        this.loadHolder.canLoadColorImages = true;
+      }, 3000);
+    }
   }
 };
 

package/nuxt.config.js

@@ -47,7 +47,6 @@ module.exports = (config, axios) => ({
     { 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 },
@@ -74,7 +73,11 @@ module.exports = (config, axios) => ({
       '@lancom',
       '@lancom/shared/plugins/aos-animation'
     ],
-    extend(config, ctx) {}
+    extend(config, { isClient }) {
+      if (isClient) {
+        config.devtool = 'source-map';
+      }
+    }
   },
   feed: [{
     path: '/google-shopping.xml',
@@ -118,7 +121,7 @@ module.exports = (config, axios) => ({
                 'g:google_product_category': { _text: 2047 },
                 'g:product_type': { _text: `Home > Products > ${product.productType.name}`, },
                 'g:is_bundle': { _text: product.prePrint ? 'yes' : 'no' },
-                'g:identifier_exists': 'yes',
+                'g:identifier_exists': sp.gtin ? 'yes' : 'no',
                 'g:product_weight': { _text: `${product.weight} kg` }
               };
               if (sp.gtin) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.87",
+  "version": "0.0.91",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/plugins/global-components.js

@@ -1,14 +1,10 @@
 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/vue-recaptcha.js

@@ -1,17 +1,22 @@
 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) {
+        if (!this.$recaptcha) {
+          await this.loadReCaptcha();
+        }
         return process.env.IS_LOCAL === 'true' || await this.$recaptcha(name);
+      },
+      async loadReCaptcha() {
+        const { VueReCaptcha } = await import('vue-recaptcha-v3');
+        Vue.use(VueReCaptcha, {
+          siteKey: process.env.RECAPTCHA_KEY,
+          loaderOptions: {
+            useRecaptchaNet: true
+          }
+        });
       }
     }
   });

package/store/product.js

@@ -133,7 +133,6 @@ export const actions = {
       commit('setProduct', response);
       commit('setPreSetPrint', (response.prints || []).find(({ _id }) => _id === print));
     } catch (e) {
-      console.log(e);
       const { status, data } = e?.response || {};
       const statusCode = status || 500;
       commit('setLoadError', {
@@ -305,7 +304,6 @@ export const mutations = {
       ...(state.template.layers || []).filter(l => l.guid !== layer.guid),
       layer
     ];
-    console.log('addTemplateLayer: ', layer);
     Vue.set(state.template, 'layers', layers);
   },
   removeTemplateLayer(state, layer) {

package/store/products.js

@@ -10,7 +10,8 @@ export const state = () => ({
   brands: [],
   tags: [],
   attributes: [],
-  loadError: null
+  loadError: null,
+  placeholder: false
 });
 
 export const getters = {
@@ -23,7 +24,8 @@ export const getters = {
   page: ({ page }) => page,
   count: ({ count }) => count,
   perPage: ({ perPage }) => perPage,
-  loadError: ({ loadError }) => loadError
+  loadError: ({ loadError }) => loadError,
+  placeholder: ({ placeholder }) => placeholder
 };
 
 export const actions = {
@@ -55,6 +57,9 @@ export const actions = {
 };
 
 export const mutations = {
+  setPlaceholder(state, placeholder) {
+    state.placeholder = placeholder;
+  },
   setProducts(state, products) {
     state.products = products;
   },