@lancom/shared 0.0.347 → 0.0.349

package/components/common/client_settings_stock_country/client-settings-stock-country.scss

@@ -0,0 +1,41 @@
+@import "@/assets/scss/variables";
+
+.ClientSettingsStockCountry {
+  &__wrapper {
+    display: flex;
+  }
+  &__field-item {
+    font-size: 12px;
+    cursor: pointer;
+    border-bottom: 1px dashed grey;
+    color: grey;
+    margin: 0 3px;
+    &--active {
+      border-bottom: 1px dashed black;
+      color: black;
+    }
+  }
+  &__countries {
+    display: flex;
+    position: absolute;
+    top: 280px;
+    left: 0px;
+    right: 0px;
+    justify-content: center;
+    z-index: 999;
+  }
+  &__country {
+    width: 32px;
+    height: 26px;
+    margin: 0 3px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+    cursor: pointer;
+    border: 2px solid rgba(189, 189, 189, 0);
+    border-radius: 3px;
+    &--active {
+      border: 2px solid $green;
+    }
+  }
+}

package/components/common/client_settings_stock_country/client-settings-stock-country.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="ClientSettingsStockCountry__wrapper">
+    <div
+      v-for="country in countries"
+      :key="country._id"
+      class="ClientSettingsStockCountry__country"
+      :style="{
+        'background-image': `url(${country.icon})`
+      }"
+      :class="{
+        'ClientSettingsStockCountry__country--active': country === checkedStockCountry
+      }"
+      @click="selectStockCountry(country)">
+    </div>
+  </div>
+</template>
+  
+<script>
+import { mapGetters } from 'vuex';
+
+const Cookie = process.client ? require('js-cookie') : undefined;
+
+export default {
+  name: 'ClientSettingsStockCountry',
+  computed: {
+    ...mapGetters([
+      'stockCountry',
+      'countries'
+    ]),
+    worldCountry() {
+      return this.countries.find(c => c.isoCode === 'world');
+    },
+    isExistsWorldCountry() {
+      return !!this.worldCountry;
+    },
+    checkedStockCountry() {
+      const country = this.countries.find(c => c._id === this.stockCountry?._id);
+      return country || (!this.stockCountry && this.worldCountry);
+    }
+  },
+  mounted() {
+    if (this.stockCountry) {
+      this.saveStockCountry(this.stockCountry);
+    }
+  },
+  methods: {
+    selectStockCountry(stockCountry) {
+      this.saveStockCountry(stockCountry);
+      window.location.reload();
+    },
+    saveStockCountry(stockCountry) {
+      const value = (stockCountry && stockCountry.isoCode !== 'world') ? stockCountry?._id : null
+      Cookie.set('stockCountry', value, { expires: 365 });
+    }
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'client-settings-stock-country';
+</style>
+  

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.vue

@@ -6,6 +6,11 @@
       @click="handleClick"
       @mouseover="$emit('option-mouseover', option)"
       @mouseleave="$emit('option-mouseleave', option)">
+      <div
+        v-if="option.suboptions.length > 1"
+        style="margin-right: -13px;">
+        <i class="icon-angle-down"></i>
+      </div>
       <div
         v-if="option.printArea"
         class="EditorPrintAreaOption__icon"

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.vue

@@ -30,7 +30,7 @@
       <div
         :class="{ active: currentTab === 'layers' }"
         class="MobileEditorProductDetails__menu-action"
-        @click="showLayers">
+        @click="show('layers')">
         <i class="icon-edit MobileEditorProductDetails__menu-action-icon"></i>
         <span class="MobileEditorProductDetails__menu-action-label">
           Text & Art
@@ -122,13 +122,15 @@ export default {
     window.addEventListener('resize', this.updateMobileMenuPositionWithThrottle);
     window.addEventListener('scroll', this.updateMobileMenuPositionWithThrottle);
     window.addEventListener('orientationchange', this.updateMobileMenuPositionWithThrottle);
+    window.addEventListener('popstate', this.popStateHandler);
     this.updateMobileMenuPosition();
   },
   beforeDestroy() {
     EventBus.$off('focus-on-default-product', this.focusOnDefaultProduct);
     window.removeEventListener('resize', this.updateMobileMenuPositionWithThrottle);
-    window.addEventListener('scroll', this.updateMobileMenuPositionWithThrottle);
-    window.addEventListener('orientationchange', this.updateMobileMenuPositionWithThrottle);
+    window.removeEventListener('scroll', this.updateMobileMenuPositionWithThrottle);
+    window.removeEventListener('orientationchange', this.updateMobileMenuPositionWithThrottle);
+    window.removeEventListener('popstate', this.popStateHandler);
   },
   methods: {
     ...mapMutations(['setEditModeSelectedLayer', 'removeTemplateLayer', 'setSelectedLayer']),
@@ -155,29 +157,60 @@ export default {
     focusOnDefaultProduct() {
       this.show('details');
     },
-    showLayers() {
-      this.setEditModeSelectedLayer(false);
-      this.show('layers');
-    },
-    show(tab) {
+    show(tab, skipPushState) {
       if (tab === this.currentTab) {
         return;
       }
+
+      const prevTab = this.currentTab;
+
       if (this.isOpen) {
-        this.hide();
+        this.hide(true);
       }
+
       this.$nextTick(() => {
         this.isOpen = true;
+
+        if(tab === 'layers') {
+          this.setEditModeSelectedLayer(false);
+        }
+
         this.currentTab = tab;
+
+        if (!skipPushState) {
+          this.pushState(this.currentTab);
+        }
       });
     },
-    hide() {
+    hide(skipPushState) {
       if (this.selectedLayer?.type === 'text' &&  !this.selectedLayer.copy) {
         this.removeTemplateLayer(this.selectedLayer);
       }
+
       this.setSelectedLayer(null);
       this.isOpen = false;
+
       this.currentTab = null;
+
+      if (!skipPushState) {
+        this.pushState(this.currentTab);
+      }
+    },
+    pushState(tab) {
+      const state = { tab };
+      const title = '';
+      const url = `${window.location.href.replace(/#(.*)/, '')}#${tab || 'product'}`;
+      history.pushState(state, title, url);
+      console.log('state: ', state);
+    },
+    popStateHandler(event) {
+      const { tab } = event.state || {};
+      console.log('popStateHandler:tab: ', tab, event);
+      if (tab) {
+        this.show(tab, true);
+      } else {
+        this.hide(true);
+      }
     },
     async saveToCart() {
       if (this.addToCartDisabled) {

package/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options.scss

@@ -23,8 +23,8 @@
       bottom: -4px;
       left: -4px;
       border-radius: 13px;
-      border: 2px solid $grey_1;
-      transform: scale(0);
+      border: 2px solid $grey_4;
+      transform: scale(1);
       transition: transform .22s ease-in-out;
     }
     &-inner {
@@ -39,6 +39,7 @@
     &.selected {
       &:before {
         transform: scale(1);
+        border: 2px solid $grey_1;
       }
     }
     &-selected-icon {

package/components/product/product_color_image/product-color-image.vue

@@ -3,6 +3,20 @@
     class="ProductColorImage"
     :class="{ zoomedIn }"
     :style="style">
+    <div
+      v-if="hasAdditionalColors"
+      :style="{
+        'top': additionalColorHeight,
+        width: '100%',
+        height: '100%',
+        position: 'relative'
+      }">
+      <div
+        v-for="(additionalColorsThumb, index) of additionalColorsThumbs"
+        :key="index"
+        :style="additionalColorsThumb">
+      </div>
+    </div>
   </div>
 </template>
 
@@ -32,6 +46,23 @@ export default {
     },
     style() {
       return getColorBackgroundStyle(this.color);
+    },
+    hasAdditionalColors() {
+      return this.additionalColors.length > 0;
+    },
+    additionalColors() {
+      return (this.color.additionalColors || []);
+    },
+    additionalColorHeight() {
+      return `${100 / (this.additionalColors.length + 1)}%`;
+    },
+    additionalColorsThumbs() {
+      return (this.color.additionalColors || [])
+        .map(c => ({
+          ...getColorBackgroundStyle(c.color || c),
+          height: this.additionalColorHeight,
+          width: '100%'
+        }))
     }
   }
 };

package/components/product/product_colors_selector/product-colors-selector.scss

@@ -72,6 +72,14 @@
   &__toggle-gst {
     margin-top: 20px;
   }
+  &__countries {
+    position: relative;
+    bottom: -13px;
+    display: flex;
+    justify-content: end;
+    font-size: 13px;
+    align-items: center;
+  }
 }
 
 ::v-deep .ProductColorsSelectorOptions {

package/components/product/product_colors_selector/product-colors-selector.vue

@@ -73,6 +73,14 @@
               </checkbox>
             </div>
           </div>
+          <div class="ProductColorsSelector__countries">
+            <div>
+              Stock by countries: 
+            </div>
+            <div>
+              <client-settings-stock-country />
+            </div>
+          </div>
           <products-size-selector-color
             :with-gst="inclGSTFinal"
             class="ProductColorsSelector__section"
@@ -92,6 +100,7 @@ import ProductColorsSelector from '@lancom/shared/components/product/layouts/pro
 import ProductColorsSelectorOptions from '@lancom/shared/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options';
 import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
 import ProductsSizeSelectorColor from '@lancom/shared/components/product/products_size_selector_color/products-size-selector-color';
+import ClientSettingsStockCountry from '@lancom/shared/components/common/client_settings_stock_country/client-settings-stock-country';
 
 export default {
   name: 'WorkdepotProductColorsSelector',
@@ -100,7 +109,8 @@ export default {
     ProductColorsSelectorOptions,
     ProductsSizeSelectorColor,
     ProductColorImage,
-    Multiselect
+    Multiselect,
+    ClientSettingsStockCountry
   },
   data() {
     return {

package/components/products/product_list_product/product-list-product.scss

@@ -14,6 +14,22 @@
       }
     }
   }
+  &__countries {
+    display: flex;
+    position: absolute;
+    top: 280px;
+    left: 0px;
+    right: 0px;
+    justify-content: center;
+    z-index: 999;
+  }
+  &__country {
+    width: 22px;
+    height: 16px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+  }
   &__tag {
     position: absolute;
     top: 14px;

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

@@ -94,6 +94,16 @@
       <div class="ProductListProduct__info-item mt-2 lc_caption">
         {{ product.colors.length }} {{ product.colors.length === 1 ? 'Colour' : 'Colours' }} | Size: {{ product.sizes | sizesRange }}
       </div>
+      <div class="ProductListProduct__countries">
+        <div
+          v-for="country in productCountries"
+          :key="country._id"
+          class="ProductListProduct__country"
+          :style="{
+            'background-image': `url(${country.icon})`
+          }">
+        </div>
+      </div>
       <div
         v-if="full"
         class="ProductListProduct__info-item mt-2 lc_caption visible-full">

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

@@ -38,11 +38,13 @@
     width: 36px;
     height: 36px;
     border-radius: 13px;
+    overflow: hidden;
     flex-shrink: 0;
     &-image {
       width: 100%;
       height: 100%;
       border-radius: 11px;
+      overflow: hidden;
     }
     &--selected {
       border: 2px solid $grey_1;

package/components/products/products_link/products-link.vue

@@ -2,7 +2,7 @@
   <a
     :href="link"
     class="ProductsLink"
-    rel=”nofollow”>
+    rel="nofollow">
     <slot></slot>
   </a>
 </template>

package/layouts/products.vue

@@ -222,7 +222,7 @@
         name: this.pageTitle,
         numberOfItems: this.count,
         itemListOrder: 'ItemListUnordered',
-        itemListElement: this.products.map(product => {
+        itemListElement: this.products?.map(product => {
           const minPrintsPrice = product.minPrintsPrice || 0;
           const minProductPrice = product.isClearance ? product.minPriceWithoutClearance : product.minPrice;
           const minPrice = minProductPrice + minPrintsPrice;
@@ -259,7 +259,7 @@
           }
   
           return schema;
-        })
+        }) || []
       };
   
       const breadcrumbSchema = {

package/mixins/product-preview.js

@@ -1,3 +1,4 @@
+import { mapGetters } from 'vuex';
 import { getColorBackgroundStyle, getProductMediumCover, getBgStyle, 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';
@@ -34,6 +35,10 @@ const productPreview = {
     };
   },
   computed: {
+    ...mapGetters(['countries']),
+    productCountries() {
+      return this.countries.filter(c => this.product.countries?.includes(c._id));
+    },
     noMinimum() {
       return !(this.product.minimumPrintOrderQuantity > 1) && !(this.product.minimumOrderQuantity > 1);
     },

package/mixins/product-view.js

@@ -20,10 +20,11 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
   async asyncData({ store, params, error, query, redirect }) {
     try {
       const { print, color, colour } = query;
-      const { shop, country, currency } = store.getters;
+      const { shop, country, stockCountry, currency } = store.getters;
       const data = {
         shop: shop._id,
         slug: params.slug,
+        stockCountry: stockCountry?._id,
         country: country?._id,
         currency: currency?._id,
         print,
@@ -75,7 +76,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     };
   },
   computed: {
-    ...mapGetters(['shop', 'gstTax', 'country', 'currency']),
+    ...mapGetters(['shop', 'gstTax', 'country', 'stockCountry', 'currency']),
     ...mapGetters('product', ['product', 'simpleProducts', 'productDetails', 'editableColor', 'images', 'preSetPrints', 'editorSize', 'printsPrice']),
     pageItemImage() {
       return this.mainProductImageSrc;
@@ -115,6 +116,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
       shop: this.shop._id,
       slug,
       country: this.country?._id,
+      stockCountry: this.stockCountry?._id,
       currency: this.currency?._id,
       defaultColor: color || colour
     };

package/nuxt.config.js

@@ -1,7 +1,7 @@
 const sharedRoutes = require('./routes');
 const feeds = require('./feeds');
 
-module.exports = (config, axios, { raygunClient, publicPath } = {}) => ({
+module.exports = (config, axios, { raygunClient, publicPath, productUrlToEditor } = {}) => ({
   globalName: 'appLancom',
   mode: 'universal',
   head: {
@@ -38,7 +38,7 @@ module.exports = (config, axios, { raygunClient, publicPath } = {}) => ({
       '/customer/**'
     ],
     routes: async () => {
-      const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/sitemap?host=${config.HOST_NAME}`);
+      const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/sitemap?host=${config.HOST_NAME}&toEditor=${!!productUrlToEditor}`);
       return [
         ...data.map(url => ({ url, priority: 0.8 })),
         // { url: `https://${config.HOST_NAME}`, priority: 1 }

package/package.json

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

package/store/index.js

@@ -7,6 +7,7 @@ const CLOSED_NOTIFICATION = 'lancom-closed-notification-1.0';
 import { getShopCountrySettings } from '@lancom/shared/assets/js/utils/shop';
 
 export const state = () => ({
+  stockCountry: null,
   country: null,
   currency: null,
   payment: null,
@@ -22,6 +23,7 @@ export const state = () => ({
 });
 
 export const getters = {
+  stockCountry: ({ stockCountry }) => stockCountry,
   country: ({ country }) => country,
   countries: ({ shop }) => (shop.countries || []).map(({ country }) => country).filter(c => !!c),
   currency: ({ currency }) => currency,
@@ -53,12 +55,14 @@ export const actions = {
     commit('setMenus', menus);
     commit('setShop', shop);
     // if (req.headers.cookie) {
-    const { country, currency } = (req.headers.cookie && cookieparser.parse(req.headers.cookie)) || {};
+    const { country, currency, stockCountry } = (req.headers.cookie && cookieparser.parse(req.headers.cookie)) || {};
     const headers = (req && req.headers) ? Object.assign({}, req.headers) : {};
-    const params = { country, currency, ip: headers['x-real-ip'] || req.ip };
+    const params = { country, currency, stockCountry, ip: headers['x-real-ip'] || req.ip };
     const settings = await api.fetchClientSettings(shop._id, params);
+    // console.log('settings: ', settings);
     commit('setCountry', settings.country);
     commit('setCurrency', settings.currency);
+    commit('setStockCountry', settings.stockCountry);
 
     const countrySetting = getShopCountrySettings(shop, settings.country);
     commit('setSettings', countrySetting);
@@ -137,6 +141,9 @@ export const mutations = {
   setCountry(state, country) {
     state.country = country;
   },
+  setStockCountry(state, stockCountry) {
+    state.stockCountry = stockCountry;
+  },
   setCurrency(state, currency) {
     state.currency = currency;
   },

package/store/product.js

@@ -175,8 +175,8 @@ export const actions = {
       });
     }
   },
-  async fetchProductDetails({ commit, state }, { shop, slug, country, currency, defaultColor = 'white' }) {
-    const params = { country, currency };
+  async fetchProductDetails({ commit, state }, { shop, slug, country, stockCountry, currency, defaultColor = 'white' }) {
+    const params = { country, currency, stockCountry };
     const response = await api.fetchProductDetails(shop, slug, params);
     commit('setProductDetails', response);
 

package/store/products.js

@@ -70,6 +70,7 @@ export const actions = {
     } catch (e) {
       const { status, data } = e?.response || {};
       const statusCode = status || 500;
+      // console.log('statusCode: ', statusCode, data?.error || 'Post not found');
       commit('setLoadError', {
         statusCode,
         error: data?.error || 'Post not found'