@lancom/shared 0.0.341 → 0.0.342

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

@@ -109,7 +109,7 @@ export default {
   },
   mounted() {
     if (this.country) {
-      Cookie.set('country', this.country._id);
+      Cookie.set('country', this.country._id, { expires: 365 });
     }
   },
   methods: {
@@ -123,11 +123,11 @@ export default {
       this.visibleCurrencies = !this.visibleCurrencies;
     },
     selectCountry(country) {
-      Cookie.set('country', country._id);
+      Cookie.set('country', country._id, { expires: 365 });
       window.location.reload();
     },
     selectCurrency(currency) {
-      Cookie.set('currency', currency._id);
+      Cookie.set('currency', currency._id, { expires: 365 });
       window.location.reload();
     }
   }

package/components/common/rich-text.vue

@@ -1,7 +1,18 @@
 <template>
-  <div
-    class="RichText__wrapper"
-    v-html="text"></div>
+  <div class="RichText__wrapper">
+    <div
+      ref="text"
+      class="RichText__text"
+      :class="{ 'RichText__text--short': shortView && !expanded }"
+      :style="shortView && !expanded ? `max-height: ${height}px` : ''"
+      v-html="text"></div>
+    <div
+      v-if="shortView && shouldShowMore"
+      class="RichText__show-more"
+      @click="expanded = !expanded">
+      {{ expanded ? 'Hide full' : 'Show full' }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -10,7 +21,29 @@ export default {
   props: {
     text: {
       type: String
+    },
+    shortView: {
+      type: Boolean,
+      default: false
+    },
+    height: {
+      type: Number,
+      default: 100
     }
+  },
+  data() {
+    return {
+      expanded: false,
+      shouldShowMore: false
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.shortView) {
+        const textHeight = this.$refs.text.scrollHeight;
+        this.shouldShowMore = textHeight > this.height;
+      }
+    });
   }
 };
 </script>
@@ -19,11 +52,44 @@ export default {
 
 .RichText {
   &__wrapper {
+    position: relative
+  }
+  &__text {
     @import "@lancom/shared/assets/scss/normalize";
     letter-spacing: -0.02em !important;
     p {
       margin: 10px 0;
     }
+
+    &--short {
+      overflow: hidden;
+      position: relative;
+      
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 40px;
+        background: linear-gradient(transparent, white);
+      }
+    }
+  }
+  &__show-more {
+    color: $grey_1;
+    cursor: pointer;
+    margin-top: 10px;
+    display: inline-block;
+    border-bottom: 1px dashed $grey_1;
+    position: absolute;
+    right: 0px;
+    bottom: 10px;
+    font-size: 12px;
+    
+    &:hover {
+      color: $black;
+    }
   }
 }
 </style>

package/components/editor/editor_product_details/editor-product-details.scss

@@ -1,8 +1,17 @@
 @import "@/assets/scss/variables";
 
 .EditorProductDetails {
+  &__name {
+    @media (max-width: $bp-extra-small-max) {
+      line-height: 30px;
+    }
+  }
   &__wrapper {
     padding-top: 36px;
+    @media (max-width: $bp-extra-small-max) {
+      padding-top: 0px;
+      margin-top: -10px;
+    }
   }
   &__description {
     margin-top: 15px;
@@ -15,9 +24,14 @@
     @media (max-width: $bp-extra-small-max) {
       flex-direction: column;
       align-items: start;
-      margin-top: 10px;
+      padding-left: 155px;
+      position: relative;
+      margin-bottom: 10px;
     }
     &-logo {
+      @media (max-width: $bp-extra-small-max) {
+        margin-top: 3px;
+      }
       img {
         max-width: 75px;
         max-height: 55px;
@@ -28,6 +42,7 @@
       flex-grow: 1;
       @media (max-width: $bp-extra-small-max) {
         margin-left: 0px;
+        margin-top: -5px;
       }
     }
     &-row {
@@ -106,20 +121,31 @@
     padding: 10px;
     cursor: pointer;
   }
-  &__quote-botton {
-    font-weight: 800;
-    font-size: 14px;
-    line-height: 19px;
-    text-align: center;
-    color: $black;
-    background-color: $green;
-    text-transform: uppercase;
-    padding: 4px 15px;
-    margin-top: 7px;
-    cursor: pointer;
-    &:hover {
-      background-color: $black;
-      color: $white;
+  &__quote {
+    @media (max-width: $bp-extra-small-max) {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+    &-botton {
+      font-weight: 800;
+      font-size: 14px;
+      line-height: 19px;
+      text-align: center;
+      color: $black;
+      background-color: $green;
+      text-transform: uppercase;
+      padding: 4px 15px;
+      margin-top: 7px;
+      cursor: pointer;
+      @media (max-width: $bp-extra-small-max) {
+        padding: 12px 15px;
+        margin-top: 5px;
+      }
+      &:hover {
+        background-color: $black;
+        color: $white;
+      }
     }
   }
 }

package/components/editor/editor_product_details/editor-product-details.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="EditorProductDetails__wrapper">
-    <h3 class="lc_h3 lc_black">
+    <h3 class="lc_h3 lc_black EditorProductDetails__name">
       {{ product.name }}
     </h3>
     <div class="EditorProductDetails__header">
@@ -22,7 +22,7 @@
           </span>
         </div>
       </div>
-      <div>
+      <div class="EditorProductDetails__quote">
         <div
           class="EditorProductDetails__quote-botton"
           @click="showQuoteRequestModal()">
@@ -102,6 +102,7 @@
       class="EditorProductDetails__description">
       <rich-text
         :text="product.description"
+        :short-view="true"
         class="EditorProductDetails__description-text" />
     </div>
     <div class="EditorProductDetails__product-image">

package/components/editor/editor_workspace/editor-workspace.scss

@@ -24,8 +24,8 @@
       height: 290px;
       max-width: 100%;
       @media (min-width: $bp-extra-small-min) {
-        width: 330px;
-        height: 330px;
+        width: 400px;
+        height: 400px;
       }
       @media (min-width: $bp-small-min) {
         width: 580px;
@@ -124,13 +124,13 @@
 
     &--bottom {
       position: fixed;
-      bottom: 90px;
+      bottom: 130px;
       left: 0;
       right: 0;
       background-color: white;
       width: auto;
       padding: 0 10px;
-      z-index: 104;
+      z-index: 9999;
     }
   }
 }

package/components/editor/editor_workspace/editor-workspace.vue

@@ -48,8 +48,9 @@
         <div
           class="EditorWorkspace__sides-container"
           :class="{
-            'EditorWorkspace__sides-container--zoom-in': isZoomIn
-          }">
+            'EditorWorkspace__sides-container--zoom-in': zoomPrintArea || isZoomIn
+          }"
+          :style="printAreaZoomInStyles">
           <div
             v-if="editableSide && editableColor"
             class="EditorWorkspace__sides rotate-y-container"
@@ -66,16 +67,17 @@
                 :print-area="editablePrintArea"
                 :print-area-size="selectedPrintArea"
                 :class="editableSide.id"
-                :zoom-size="zoomSize"
+                :zoom-size="sideZoomSize"
                 class="EditorWorkspace__side rotate-y-element"
-                @zoom-in="zoomIn()">
+                @zoom-in="zoomIn()"
+                @workspace="onWorkspaceChange($event)">
               </editor-workspace-side>
             </transition>
           </div>
           <div
             class="EditorWorkspace__sides-toggle"
             :class="{
-              'EditorWorkspace__sides-toggle--fixed': isZoomIn
+              'EditorWorkspace__sides-toggle--fixed': zoomPrintArea || isZoomIn
             }"
             @click="toggleSide()">
             <i class="icon-rotate-tee"></i>
@@ -92,7 +94,7 @@
     <div
       class="EditorWorkspace__print-area-options"
       :class="{
-        'EditorWorkspace__print-area-options--bottom': isZoomIn
+        'EditorWorkspace__print-area-options--bottom': zoomPrintArea || isZoomIn
       }">
       <editor-print-area-options
         v-if="productDetailsLoaded"
@@ -130,6 +132,8 @@ export default {
   },
   data() {
     return {
+      size: null,
+      fabricHelper: null,
       preloading: true,
       isRotating: false,
       zoomSize: null,
@@ -142,6 +146,12 @@ export default {
       ]
     };
   },
+  props: {
+    zoomPrintArea: {
+      type: Boolean,
+      default: false
+    }
+  },
   computed: {
     ...mapGetters([
       'product',
@@ -150,10 +160,52 @@ export default {
       'editablePrintArea',
       'editableSide',
       'editableColor',
-      'editableLayers'
+      'editableLayers',
+      'editorSize'
     ]),
+    sideZoomSize() {
+      return this.printAreaZoomSize?.width || this.zoomSize;
+    },
     isZoomIn() {
       return !!this.zoomSize;
+    },
+    printAreaZoomInStyles() {
+      if (this.fabricHelper && this.zoomPrintArea) {
+        return {
+          width: `${this.printAreaZoomSize.width}px`,
+          height: `${this.printAreaZoomSize.height}px`,
+          left: `${this.printAreaZoomSize.left}px`,
+          top: `${this.printAreaZoomSize.top}px`
+        }
+      }
+
+      return {};
+    },
+    printAreaZoomSize() {
+      if (this.fabricHelper && this.zoomPrintArea) {
+        const { printAreaRect } = this.fabricHelper;
+        const printAreaWidth = printAreaRect.width;
+        const printAreaHeight = printAreaRect.height;
+
+
+        const targetWidth = this.editorSize.width * 0.6;
+        const targetHeight = this.editorSize.height * 0.6;
+        const scaleX = targetWidth / printAreaWidth;
+        const scale = scaleX;
+
+        const newWidth = this.editorSize.width * scale;
+        const newHeight = this.editorSize.height * scale;
+
+        const left = -printAreaRect.left * scale + (window.innerWidth - printAreaWidth * scale) / 2;
+        const top = -printAreaRect.top * scale + (window.innerHeight - 200 - printAreaHeight * scale) / 2;
+        return {
+          width: newWidth,
+          height: newHeight,
+          left,
+          top
+        }
+      }
+      return null;
     }
   },
   mounted() {
@@ -165,7 +217,11 @@ export default {
       'setSelectedPrintArea',
       'setEditablePrintArea'
     ]),
-   async preloadingEditor() {
+    onWorkspaceChange({ size, fabricHelper }) {
+      this.fabricHelper = fabricHelper;
+      this.size = size;
+    },
+    async preloadingEditor() {
       this.preloading = true;
       const sides = ['back', 'front'];
       for (const side of sides) {

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.scss

@@ -65,9 +65,9 @@
     justify-content: center;
     flex-direction: column;
 
-    @media (max-width: $bp-extra-small-max) {
-      font-size: 10px;
-    }
+    // @media (max-width: $bp-extra-small-max) {
+    //   font-size: 10px;
+    // }
 
     &.tighten {
       font-size: 10px;
@@ -131,10 +131,11 @@
       right: 40px;
       left: 40px;
       z-index: 1;
-
       @media (max-width: $bp-extra-small-max) {
         left: 0;
         right: 0;
+        top: -30px;
+        font-size: 12px;
       }
     }
     &-warning,
@@ -144,6 +145,10 @@
       border-radius: 5px;
       color: #FFFFFF;
       cursor: pointer;
+      @media (max-width: $bp-extra-small-max) {
+        font-size: 13px;
+        padding: 6px;
+      }
       & + & {
         margin-top: 3px;
       }

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -36,7 +36,7 @@
       v-if="fabricHelper"
       class="EditorWorkspaceSide__placeholder"
       :class="{
-        tighten: printAreaIsSmall,
+        tighten: !isZoomed && printAreaIsSmall,
         side: printAreaLayers.length
       }"
       ignore-document-click
@@ -82,34 +82,27 @@
       v-show="isVisibleOverlay"
       class="EditorWorkspaceSide__overlay"
       @mousedown="$emit('zoom-in')"></div>
-    <transition-group
-      name="fade"
-      appear
-      tag="div"
-      class="EditorWorkspaceSide__alert-container">
+    <div class="EditorWorkspaceSide__alert-container">
       <div
         v-if="showErrorAboutSmallImage"
-        key="imageError"
-        class="EditorWorkspaceSide__alert-error view-transition"
+        class="EditorWorkspaceSide__alert-error"
         @click="adjustSelectedArtDPI">
         <i class="icon-attention-circled"></i>
         Your image doesn't meet our print requirements.
       </div>
       <div
         v-else-if="showRecommendationToUseLargerImage"
-        key="imageRecommendation"
-        class="EditorWorkspaceSide__alert-warning view-transition">
+        class="EditorWorkspaceSide__alert-warning">
         <i class="icon-info-circled"></i>
         we recommend using a higher quality image.
       </div>
       <div
         v-if="offsetWarningVisible"
-        key="offset"
-        class="EditorWorkspaceSide__alert-error view-transition">
+        class="EditorWorkspaceSide__alert-error">
         <i class="icon-attention-circled"></i>
         Part of your design layer is outside the print area.
       </div>
-    </transition-group>
+    </div>
   </div>
 </template>
 
@@ -238,7 +231,7 @@ export default {
       return !!this.zoomSize;
     },
     isVisibleOverlay() {
-      return !this.isZoomed && this.breakpoints.is === 'xs';
+      return !this.isZoomed && [].includes(this.breakpoints.is);
     }
   },
   watch: {
@@ -302,20 +295,21 @@ export default {
       this.setSelectedLayerField({ field: 'scaleY', value: scale });
       this.saveLayersAsImageWithDebounce();
     },
-    calcWorkspaceSize() {
+    calcWorkspaceSize(skipZoom) {
       const sizes = {
         mini: 290,
-        xs: 330,
+        xs: 400,
         sm: 580,
         md: 430,
         lg: 600,
         xl: 720
       };
-      return this.zoomSize || sizes[this.breakpoints.is] || 430;
+      return (!skipZoom && this.zoomSize) || sizes[this.breakpoints.is] || 430;
     },
     handleWorkspaceSize() {
       const size = this.calcWorkspaceSize();
       this.fabricHelper.scaleWorkspace({ width: size, height: size });
+      this.$emit('workspace', { size: this.calcWorkspaceSize(true), fabricHelper: this.fabricHelper });
     },
     initEventsListeners() {
       // document.addEventListener('mousedown', this.onDocumentStartClick);
@@ -434,7 +428,7 @@ export default {
       this.offsetWarningVisible = visible;
     },
     toogleBoundBox(state, option) {
-      if (!this.fabricHelper || this.breakpoints.is === 'xs') {
+      if (!this.fabricHelper || ['mini', 'xs'].includes(this.breakpoints.is)) {
         return;
       }
 
@@ -449,6 +443,6 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import 'editor-workspace-side.scss';
 </style>

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

@@ -2,6 +2,13 @@
 @import "@lancom/shared/assets/scss/ui_kit";
 
 .MobileEditorProductDetails {
+  &__info {
+    position: absolute;
+    top: -63px;
+    background: white;
+    left: 0;
+    right: 0;
+  }
   &__menu {
     position: fixed;
     // right: 0;
@@ -36,6 +43,12 @@
         color: $white_high_emphasis;
         background-color: $green;
         border-color: $green;
+        &.invalidate {
+          pointer-events: all !important;
+          border-color: $grey_4;
+          background-color: $grey_4;
+          color: $grey_1;
+        }
       }
 
       &.cart &-icon {

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

@@ -4,9 +4,23 @@
       v-if="width"
       class="MobileEditorProductDetails__menu"
       :style="{ width, top }">
+      <editor-pricing
+        class="MobileEditorProductDetails__info"
+        :has-cart-btn="false"
+        :has-pricing="false"
+        @choose-products="chooseProducts()" />
       <div
+        v-if="!!currentTab"
+        class="MobileEditorProductDetails__menu-action"
+        @click="hide()">
+        <i class="icon-blank MobileEditorProductDetails__menu-action-icon"></i>
+        <span class="MobileEditorProductDetails__menu-action-label">
+          Product
+        </span>
+      </div>
+      <div
+        v-if="currentTab !== 'details'"
         class="MobileEditorProductDetails__menu-action"
-        :class="{ active: currentTab === 'details' }"
         @click="show('details')">
         <i class="icon-product MobileEditorProductDetails__menu-action-icon"></i>
         <span class="MobileEditorProductDetails__menu-action-label">
@@ -14,8 +28,8 @@
         </span>
       </div>
       <div
+        v-if="currentTab !== 'layers'"
         class="MobileEditorProductDetails__menu-action"
-        :class="{ active: currentTab === 'layers' }"
         @click="showLayers">
         <i class="icon-edit MobileEditorProductDetails__menu-action-icon"></i>
         <span class="MobileEditorProductDetails__menu-action-label">
@@ -52,24 +66,23 @@
         key="container"
         class="MobileEditorProductDetails__container"
         @close="hide">
-        <div class="MobileEditorProductDetails__header">
-          <div
-            v-if="currentTab === 'details'"
-            class="MobileEditorProductDetails__header-title">
-            &nbsp;
-          </div>
-          <div
-            v-if="currentTab === 'layers'"
-            class="MobileEditorProductDetails__header-title">
+        <div v-if="currentTab === 'layers'" class="MobileEditorProductDetails__header">
+          <div class="MobileEditorProductDetails__header-title">
             Text & Art
           </div>
-          <i
+          <!-- <i
             class="icon-cancel MobileEditorProductDetails__close"
-            @click="hide"></i>
+            @click="hide"></i> -->
         </div>
-        <div class="MobileEditorProductDetails__content custom-scrollbar-container">
-          <editor-workspace v-show="currentTab === 'details'" />
-          <editor-layers v-show="currentTab === 'layers'" />
+        <div
+          class="MobileEditorProductDetails__content custom-scrollbar-container">
+          <editor-workspace
+            v-show="currentTab === 'details'"
+            :zoom-print-area="true"
+            style="margin-top: 40px;" />
+          <editor-layers
+            v-show="currentTab === 'layers'"
+            :hasPricing="false" />
         </div>
       </div>
     </transition-group>
@@ -82,6 +95,7 @@ import { EventBus } from '@lancom/shared/assets/js/utils/event-bus';
 import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
 import EditorWorkspace from '../editor_workspace/editor-workspace';
 import EditorLayers from '../editor_layers/editor-layers';
+import EditorPricing from '../../product/editor_pricing/editor-pricing';
 
 const { mapMutations, mapGetters } = createNamespacedHelpers('product');
 
@@ -90,7 +104,8 @@ export default {
   mixins: [addToCartMixin],
   components: {
     EditorWorkspace,
-    EditorLayers
+    EditorLayers,
+    EditorPricing
   },
   data() {
     return {
@@ -114,6 +129,21 @@ export default {
   },
   methods: {
     ...mapMutations(['setEditModeSelectedLayer', 'removeTemplateLayer', 'setSelectedLayer']),
+    chooseProducts() {
+      this.hide();
+      setTimeout(() => {
+        const element = document.getElementById('EditorProductDetails');
+        if (element) {
+          const offset = 100;
+          const elementPosition = element.getBoundingClientRect().top;
+          const offsetPosition = elementPosition + window.pageYOffset - offset;
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: 'smooth'
+          });
+        }
+      }, 250);
+    },
     updateMobileMenuPosition() {
       this.top = `${window.outerHeight - 78}px`;
       this.width = `${window.outerWidth}px`;
@@ -147,6 +177,7 @@ export default {
     },
     async saveToCart() {
       if (this.addToCartDisabled) {
+        this.$toastr.e(this.addToCartDisabledMessage);
         return;
       }
       await this.proceedToCard();

package/components/product/editor_pricing/editor-pricing.vue

@@ -67,7 +67,9 @@
         All good to go!
       </div>
 
-      <div class="EditorPricing__footer">
+      <div
+        v-if="hasPricing"
+        class="EditorPricing__footer">
         <div class="EditorPricing__footer-section">
           <i class="icon-close-r"></i>
           <div class="EditorPricing__total">
@@ -128,6 +130,10 @@ export default {
     hasCartBtn: {
       type: Boolean,
       default: true
+    },
+    hasPricing: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

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

@@ -83,12 +83,12 @@
       </div>
       <div
         v-if="minPrice === maxPrice"
-        class="ProductListProduct__info-item lc_h4">
+        class="ProductListProduct__info-item ProductListProduct__info-price lc_h4">
         {{ minPrice | price(currency) }}
       </div>
       <div
         v-else
-        class="ProductListProduct__info-item lc_h4">
+        class="ProductListProduct__info-item ProductListProduct__info-price lc_h4">
         {{ minPrice | price(currency) }} - {{ maxPrice | price(currency) }}
       </div>
       <div class="ProductListProduct__info-item mt-2 lc_caption">

package/package.json

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

package/store/auth.js

@@ -30,7 +30,7 @@ export const actions = {
     const request = customer ? api.authCustomer(customer, shop._id) : api.admin.authUser(user);
     try {
       const { token, user, customer } = await request;
-      Cookie.set('auth', token);
+      Cookie.set('auth', token, { expires: 365 });
       this.$axios.defaults.headers.authorization = token;
       commit('AUTH_SUCCESS', token, customer || user);
       return customer || user;
@@ -44,7 +44,7 @@ export const actions = {
     Cookie.remove('auth');
   },
   update_user({ commit }, { token, user }) {
-    Cookie.set('auth', token);
+    Cookie.set('auth', token, { expires: 365 });
     this.$axios.defaults.headers.authorization = token;
     commit('AUTH_SUCCESS', token, user);
   }