@lancom/shared 0.0.332 → 0.0.334

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

@@ -108,5 +108,5 @@ export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url,
 };
 
 export const cloneLayerModel = layer => {
-  return { ...layer, createdAt: Date.now() };
+  return { ...layer, createdAt: Date.now(), guid: generateGUID() };
 };

package/assets/scss/_common.scss

@@ -133,6 +133,11 @@ body {
     display: none !important;
   }
 }
+.hidden-mini-and-down {
+  @media (max-width: $bp-mini-max) {
+    display: none !important;
+  }
+}
 .hidden-extra-small {
   @media (max-width: $bp-extra-small-max) {
     display: none !important;

package/assets/scss/variables/_breakpoints.scss

@@ -10,3 +10,6 @@ $bp-small-max: 1023px;
 $bp-small-min: 768px;
 
 $bp-extra-small-max: 767px;
+$bp-extra-small-min: 450px;
+
+$bp-mini-max: 449px;

package/components/asides/contact_us/contact-us.vue

@@ -147,11 +147,9 @@
         <div class="ContactUs__contacts-row">
           <div class="ContactUs__contacts-entity">
             <i class="icon-mail-alt ContactUs__contacts-entity-icon"></i>
-            <a
-              :href="`mailto:${contacts.email}`"
-              class="ContactUs__contacts-entity-value">
-              {{ contacts.email }}
-            </a>
+            <email-link
+              :email="contacts.email"
+              class="ContactUs__contacts-entity-value" />
           </div>
           <div class="ContactUs__contacts-entity">
             <i class="icon-phone ContactUs__contacts-entity-icon"></i>
@@ -171,9 +169,13 @@
 import { mapGetters } from 'vuex';
 import api from '@lancom/shared/assets/js/api';
 import gtm from '@lancom/shared/assets/js/utils/gtm';
+import EmailLink from '@lancom/shared/components/email_link/email-link';
 
 export default {
   name: 'LancomContactUs',
+  components: {
+    EmailLink
+  },
   props: {
     btnClass: {
       type: String,

package/components/common/client_settings/client-settings.vue

@@ -8,7 +8,7 @@
         <span v-if="country">
           <img
             v-if="checkedCountry"
-            :src="checkedCountry.icon" />
+            :src="checkedCountry.icon | staticLink" />
           <i
             v-else
             class="icon-globe"></i>
@@ -75,12 +75,16 @@
   
 <script>
 import { mapGetters } from 'vuex';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import CheckedIcon from '@lancom/shared/components/common/checked-icon';
 
 const Cookie = process.client ? require('js-cookie') : undefined;
 
 export default {
   name: 'ClientSettings',
+  filters: {
+    staticLink
+  },
   components: {
     CheckedIcon
   },

package/components/email_link/email-link.vue

@@ -0,0 +1,23 @@
+<template>
+  <a ref="link"></a>
+</template>
+  
+<script>
+export default {
+  name: 'EmailLink',
+  props: {
+    email: {
+      type: Array | String,
+      required: true
+    }
+  },
+  mounted() {
+    if (process.client) {
+      const email = (Array.isArray(this.email) ? this.email : [this.email]).join('@');
+      const linkEl = this.$refs.link;
+      linkEl.href = `mailto:${email}`;
+      linkEl.textContent = email;
+    }
+  }
+};
+</script>

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

@@ -11,7 +11,7 @@
   }
   &__item-wrapper {
     width: 270px;
-    height: 450px;
+    height: 490px;
     margin: 0 0 15px 15px;
     position: relative;
     z-index: 1;

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

@@ -73,7 +73,7 @@
     transition: opacity 0.35s ease-in-out;
     opacity: 1;
     position: absolute;
-    top: 30px;
+    // top: 30px;
     max-width: 250px;
   }
   &__cover-hover {
@@ -81,14 +81,14 @@
     z-index: 2;
     opacity: 0;
     position: absolute;
-    top: 30px;
+    // top: 30px;
     max-width: 250px;
   }
   &__link {
     position: relative;
     transition: background-color 0.5s ease;
     background-color: white;
-    height: 300px;
+    height: 340px;
     width: 270px;
     display: flex;
     align-items: center;

package/feeds/google-shopping.js

@@ -42,7 +42,8 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
               const backImages = filterImagesByType('back');
               const additionalImages = filterImagesByType('additional_image_link');
               const catalogFrontImages = (product.images || []).filter(i => (i.types || []).includes('catalog_front')).map(i => i.image);
-              const image = spliceFirstImage(feedImages) || spliceFirstImage(frontImages) || spliceFirstImage(catalogFrontImages) || spliceFirstImage(backImages) || null;
+              const feedImage = spliceFirstImage(feedImages);
+              const image = feedImage || spliceFirstImage(frontImages) || spliceFirstImage(catalogFrontImages) || spliceFirstImage(backImages) || null;
               const images = [
                 ...additionalImages,
                 ...((!backImages?.includes(image) && getImages(backImages)) || (!frontImages?.includes(image) && getImages(frontImages)) || [])
@@ -78,8 +79,8 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 'g:condition': { _text: 'new' },
                 'g:mpn': { _text: sp.SKU },
                 'g:color': { _text: sp.color.name },
-                'g:image_link': { _text: sp.image || image },
-                'g:additional_image_link': (sp.image ? [image, ...images] : images).map(i => ({ _text: i })),
+                'g:image_link': { _text: staticLink(feedImage || sp.image || image, config) },
+                'g:additional_image_link': ((sp.image || feedImage) ? [image, ...images] : images).map(i => ({ _text: staticLink(i, config) })),
                 'g:price': { _text: `${(sp.price || 0)} ${sp.currencyCode || 'AUD'}` },
                 'g:availability': { _text: sp.quantityStock > 0 ? 'in_stock' : 'out_of_stock' },
                 'g:google_product_category': { _text: product.feedGoogleProductCategory || 2047 },
@@ -159,7 +160,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
               }
 
               if (product.feedLifestyleImage) {
-                info['g:lifestyle_image_link'] = { _text: product.feedLifestyleImage };
+                info['g:lifestyle_image_link'] = { _text: staticLink(product.feedLifestyleImage, config) };
               }
 
               return info;
@@ -208,8 +209,24 @@ function generateProductLink(product, color, toEditor) {
   return `${link}${color ? `?color=${color.alias || color}` : ''}`;
 }
 
+export const staticLink = (link, config) => {
+  const { PROD_S3_BUCKET, DEV_S3_BUCKET, PROD_CDN_URL, DEV_CDN_URL, STATIC_URL } = config || {};
+  if ((link || '').startsWith('http')) {
+    if (PROD_S3_BUCKET && PROD_CDN_URL) {
+      link = link.replace(new RegExp(`https://${PROD_S3_BUCKET}[a-z\-\.0-9]+.amazonaws.com`), PROD_CDN_URL);
+    }
+    if (DEV_S3_BUCKET && PROD_CDN_URL) {
+      link = link.replace(new RegExp(`https://${DEV_S3_BUCKET}[a-z\-\.0-9]+.amazonaws.com`), DEV_CDN_URL);
+    }
+    return link;
+  } else {
+    return `${STATIC_URL || ''}${link}`;
+  };
+}
+
 
 module.exports = {
   googleShoppingFeed,
-  googleLocalShoppingFeed
+  googleLocalShoppingFeed,
+  generateProductLink
 };

package/package.json

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