@lancom/shared 0.0.430 → 0.0.432

package/assets/js/api/index.js

@@ -134,8 +134,8 @@ const api = {
   calculateProductPrice(data, shop) {
     return _post(`shop/${shop}/order/calculate-price`, data);
   },
-  fetchFAQ(shop) {
-    return _get(`shop/${shop}/faq`);
+  fetchFAQ(shop, params) {
+    return _get(`shop/${shop}/faq`, params);
   },
   contactUs(data, shop) {
     return _post(`shop/${shop}/contact`, data);

package/assets/js/constants/product.js

@@ -9,3 +9,17 @@ export const PRODUCT_TYPES_LIST = [
   { type: PRODUCT_TYPES.HOODIE, label: 'Pullover Hoodie' },
   { type: PRODUCT_TYPES.POLO, label: 'Classic Polo' }
 ];
+
+export const PRODUCT_STOCK_STATUS = {
+  ALL_IN_STOCK: 'all in stock',
+  MOSTLY_IN_STOCK: 'mostly in stock',
+  PARTIALLY_IN_STOCK: 'partially in stock',
+  NOT_IN_STOCK: 'not in stock'
+};
+
+export const PRODUCT_STOCK_STATUS_COLORS = {
+  [PRODUCT_STOCK_STATUS.ALL_IN_STOCK]: 'green',
+  [PRODUCT_STOCK_STATUS.MOSTLY_IN_STOCK]: 'orange',
+  [PRODUCT_STOCK_STATUS.PARTIALLY_IN_STOCK]: 'orange',
+  [PRODUCT_STOCK_STATUS.NOT_IN_STOCK]: 'red'
+};

package/assets/scss/_common.scss

@@ -57,6 +57,14 @@ body {
       max-width: 1440px;
     }
   }
+  &.ultra {
+    @media (min-width: $bp-extra-large-min) {
+      max-width: 1440px;
+    }
+    @media (min-width: $bp-ultra-large-min) {
+      max-width: 1920px;
+    }
+  }
   &.full {
     max-width: none;
   }
@@ -78,7 +86,7 @@ body {
   }
 }
 .ripple {
-  // ripple 
+  // ripple
   position: relative;
   overflow: hidden;
   transform: translate3d(0, 0, 0);

package/assets/scss/variables/_breakpoints.scss

@@ -1,3 +1,5 @@
+$bp-ultra-large-min: 1920px;
+
 $bp-extra-large-min: 1600px;
 
 $bp-large-max: 1599px;

package/components/common/breadcrumbs/breadcrumbs.scss

@@ -14,7 +14,10 @@
   &__item-wrapper {
     margin-right: 8px;
   }
+  &__item-last {
+    font-weight: bold;
+  }
   &__divider {
     margin-left: 5px;
   }
-}
+}

package/components/common/breadcrumbs/breadcrumbs.vue

@@ -15,7 +15,10 @@
     <div
       v-for="(item, index) in items"
       :key="index"
-      class="Breadcrumbs__item-wrapper">
+      class="Breadcrumbs__item-wrapper"
+      :class="{
+        'Breadcrumbs__item-last': index === (items.length - 1)
+      }">
       <a
         v-if="item.to"
         class="Breadcrumbs__item"

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

@@ -73,7 +73,7 @@
     </div>
   </div>
 </template>
-  
+
 <script>
 import { mapGetters } from 'vuex';
 import { staticLink } from '@lancom/shared/assets/js/utils/filters';
@@ -133,8 +133,7 @@ export default {
   }
 };
 </script>
-  
+
 <style lang="scss">
 @import 'client-settings';
 </style>
-  

package/components/common/client_settings_tax/client-settings-tax.vue

@@ -3,6 +3,7 @@
     <div class="ClientSettingsTax__toggle">
       <toggle-switch
         v-model="inclGST"
+        size="sm"
         left-label="Ex VAT"
         right-label="Inc VAT" />
     </div>

package/components/common/price.vue

@@ -3,7 +3,7 @@
     {{ displayPrice }}
   </span>
 </template>
-  
+
 <script>
 import { priceWithTax, price } from '@lancom/shared/assets/js/utils/filters';
 import { mapGetters } from 'vuex';
@@ -30,4 +30,3 @@ export default {
   }
 };
 </script>
-  

package/components/common/pricing_discounts_table/pricing-discounts-table.vue

@@ -1,16 +1,17 @@
 <template>
   <table
-    class="lc_table"
+    class="lc_table PricingDiscountsTable__wrapper"
     :class="{ bordered, striped }">
     <thead class="centered">
       <tr class="highlighted">
-        <th>Items</th>
-        <th>Price</th>
+        <th>{{ itemsLabel }}</th>
+        <th>{{ priceLabel }}</th>
+        <th v-if="visibleDiscount"></th>
       </tr>
     </thead>
     <tbody class="centered">
       <tr
-        v-for="range in prices"
+        v-for="(range, index) in prices"
         :key="range.min"
         :class="{
           active: amount >= range.min && ((range.max && amount <= range.max) || !range.max)
@@ -32,6 +33,13 @@
             {{ range.price | price(currency) }}
           </span>
         </td>
+        <td
+          v-if="visibleDiscount"
+          class="PricingDiscountsTable__discount">
+          <span v-if="index > 0 && range.price && maxPrice">
+            -{{ (100 - (range.price / maxPrice) * 100).toFixed(2) }}%
+          </span>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -67,12 +75,27 @@ export default {
     withGst: {
       type: Boolean,
       default: true
+    },
+    visibleDiscount: {
+      type: Boolean,
+      default: false
+    },
+    itemsLabel: {
+      type: String,
+      default: 'Items'
+    },
+    priceLabel: {
+      type: String,
+      default: 'Price'
     }
   },
   computed: {
     ...mapGetters([
       'pricingSettings'
-    ])
+    ]),
+    maxPrice() {
+      return this.prices?.[0]?.price || 0;
+    }
   }
 };
 </script>

package/components/common/product_side_with_print/product-side-with-print.vue

@@ -17,9 +17,8 @@
 </template>
 
 <script>
-import { getProductCover, getColorImage } from '@lancom/shared/assets/js/utils/colors';
+import { getProductCover, getColorImage, getColorBackgroundStyle } from '@lancom/shared/assets/js/utils/colors';
 import ImageViewer from '@lancom/shared/components/common/image_viewer/image-viewer';
-import { getColorBackgroundStyle } from '@lancom/shared/assets/js/utils/colors';
 
 export default {
   name: 'ProductSideWithPrint',
@@ -80,7 +79,8 @@ export default {
       return [...this.priviewProducts.reduce(predicate, new Map()).values()];
     },
     colorBackground() {
-      return this.fillBackground && getColorBackgroundStyle(this.product.color, false, this.originBackground);
+      const color = this.color || this.product.color;
+      return this.fillBackground && getColorBackgroundStyle(color, false, this.originBackground);
     },
     imageBackground() {
       return this.image && this.getImageBackground(this.image);

package/components/common/stars-mark.vue

@@ -3,12 +3,13 @@
     ref="mark"
     class="StarsMark__wrapper"
     :class="{ disabled }"
+    :style="starStyle"
     @mouseenter="onMouseenter"
     @mousemove="onMousemove"
     @mouseleave="onMouseleave"
     @click="onSelect">
     <div
-      :style="{ width }"
+      :style="starValueStyle"
       class="StarsMark__value"></div>
   </div>
 </template>
@@ -22,6 +23,10 @@ export default {
     value: {
       type: Number
     },
+    size: {
+      type: Number,
+      default: STAR_WIDTH
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -42,8 +47,18 @@ export default {
         this.$emit('input', val);
       }
     },
-    width() {
-      return `${(this.hoverValue || this.model) * STAR_WIDTH}px`;
+    starStyle() {
+      return {
+        width: `${this.size * 5}px`,
+        height: `${this.size}px`,
+        'background-size': `${this.size}px ${this.size}px`
+      };
+    },
+    starValueStyle() {
+      return {
+        ...this.starStyle,
+        width: `${(this.hoverValue || this.model) * this.size}px`
+      };
     }
   },
   methods: {
@@ -65,7 +80,7 @@ export default {
     getMarkFromEvent(e) {
       const markWrapperRect = this.$refs.mark.getBoundingClientRect();
       const x = e.clientX - markWrapperRect.left;
-      return Math.max(1, Math.min(5, Number.parseInt(x / STAR_WIDTH) + 1));
+      return Math.max(1, Math.min(5, Number.parseInt(x / this.size) + 1));
     }
   }
 };
@@ -80,18 +95,15 @@ export default {
   }
   &__wrapper,
   &__value  {
-    height: 24px;
     background-position: top left;
     background-repeat: repeat-x;
-    background-size: 24px 24px;
     cursor: pointer;
   }
   &__wrapper  {
-    width: 120px;
-    background-image: url(./../../static/icons/star_gray.svg);
+    background-image: url(~/static/icons/star_gray.svg);
   }
   &__value {
-    background-image: url(./../../static/icons/star_green.svg);
+    background-image: url(~/static/icons/star_active.svg);
     pointer-events: none;
   }
 }

package/components/common/tabs.vue

@@ -7,6 +7,8 @@
         class="tab ripple"
         :class="{
           active: currentTab === tab.value,
+          disabled: tab.disabled,
+          short: tab.short,
           shadow: btnsShadow
         }"
         @click="select(tab)">
@@ -19,9 +21,8 @@
         </div>
         <div
           v-if="tab.description"
-          class="tab-description lc_regular12 lc_grey1 mt-5">
-          {{ tab.description }}
-        </div>
+          class="tab-description lc_regular12 lc_grey1 mt-5"
+          v-html="tab.description"></div>
       </div>
     </div>
     <slot :current-tab="currentTab"></slot>
@@ -174,6 +175,19 @@ export default {
     background-color: $grey_4;
     color: $black;
   }
+  &s--large &.disabled,
+  &s--primary &.disabled,
+  &s--secondary &.disabled {
+    pointer-events: none;
+  }
+  &s--large &.short,
+  &s--primary &.short,
+  &s--secondary &.short {
+    width: auto;
+    min-width: 41px;
+    flex: 0 0 0 !important;
+    padding: 0;
+  }
   &.shadow {
     box-shadow: 1px 1px 2px rgb(214, 214, 214);
   }

package/components/editor/editor_colors/editor-colors.scss

@@ -0,0 +1,79 @@
+@import "@/assets/scss/variables";
+
+.EditorColors {
+  &__wrapper {
+    position: relative;
+  }
+  &__colors {
+    overflow: hidden;
+    position: relative;
+    margin: 20px 0;
+    z-index: 1;
+    display: flex;
+    gap: 24px;
+  }
+  &__color {
+    width: 114px;
+    height: 142px;
+    border-radius: 12px;
+    border: #EFEFEF;
+    background: #EFEFEF;
+    cursor: pointer;
+    padding: 2px;
+    &-image {
+      width: 110px;
+      height: 106px;
+      margin: 0px;
+      border-radius: 12px;
+      overflow: hidden;
+    }
+    &-name {
+      display: flex;
+      padding: 4px 10px;
+      text-align: center;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-top: 2px;
+    }
+  }
+  &__divider {
+    height: 1px;
+    width: 100%;
+    background-color: $gray;
+    margin-top: 20px;
+  }
+  &__arrow {
+    position: absolute;
+    top: 50%;
+    border-radius: 8px;
+    background: #EFEFEF !important;
+    color: black !important;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    width: 24px;
+    height: 24px;
+    margin-top: -12px;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    z-index: 2;
+    i {
+      font-size: 15px;
+    }
+
+    &--left {
+      left: 0;
+      transform: rotate(90deg);
+    }
+    &--right {
+      right: 0;
+      transform: rotate(270deg);
+    }
+    &:hover {
+      box-shadow: 0 0 3px $grey_2;
+    }
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/components/editor/editor_colors/editor-colors.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="EditorColors__wrapper">
+    <div class="EditorColors__colors">
+      <div
+        v-for="color in visibleColors"
+        :key="color._id"
+        v-tooltip="color.name"
+        class="EditorColors__color"
+        :class="{ 'EditorColors__color-active': editableColor === color }"
+        @click="toggleSelection(color)">
+        <product-side-with-print
+          :product="product"
+          :side="editableSide.id"
+          :color="color"
+          :fill-background="true"
+          :default-preview="false"
+          class="EditorColors__color-image">
+        </product-side-with-print>
+        <div class="EditorColors__color-name">
+          <span>{{ color.name || '' }}</span>
+        </div>
+      </div>
+      <button
+        v-if="hasThumbsArrows"
+        type="button"
+        class="EditorColors__arrow EditorColors__arrow--left"
+        @click="goToPrevPage()">
+        <i class="icon-angle-down"></i>
+      </button>
+      <button
+        v-if="hasThumbsArrows"
+        type="button"
+        class="EditorColors__arrow EditorColors__arrow--right"
+        @click="goToNextPage()">
+        <i class="icon-angle-down"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+
+export default {
+  name: 'EditorColors',
+  components: {
+    ProductSideWithPrint
+  },
+  props: {
+    slidesPerRow: {
+      type: Number,
+      default: 6
+    }
+  },
+  data() {
+    return {
+      thumbsPage: 0
+    };
+  },
+  computed: {
+    ...mapGetters('product', ['editableColor', 'availableColors', 'editableSide', 'product']),
+    visibleColorsFrom() {
+      return this.thumbsPage * this.slidesPerRow;
+    },
+    visibleColors() {
+      return this.availableColors.slice(this.visibleColorsFrom, this.visibleColorsFrom + this.slidesPerRow);
+    },
+    hasThumbsArrows() {
+      return this.availableColors.length > this.slidesPerRow;
+    }
+  },
+  methods: {
+    ...mapActions('product', ['selectColor']),
+    toggleSelection({ _id }) {
+      this.selectColor(_id);
+    },
+    goToPrevPage() {
+      this.thumbsPage = Math.max(0, this.thumbsPage - 1);
+    },
+    goToNextPage() {
+      this.thumbsPage = Math.min(Math.ceil((this.availableColors.length) / this.slidesPerRow) - 1, this.thumbsPage + 1);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-colors';
+</style>

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

@@ -48,7 +48,7 @@
               class="EditorLayersGroup__header">
               <div>
                 <h5 class="lc_h5">
-                   {{ group.printArea.name }} | {{ group.printArea.printSize.name }} ({{ group.layers.length }})
+                  {{ group | groupLabel }}
                 </h5>
                 <div class="lc_caption">{{ group.printArea.side }}</div>
               </div>
@@ -101,23 +101,28 @@ const { mapGetters, mapActions, mapMutations } = createNamespacedHelpers('produc
 
 export default {
   name: 'EditorLayers',
+  filters: {
+    groupLabel(group) {
+      return `${group.printArea.name} | ${group.printArea.printSize?.name} (${group.layers.length})`;
+    }
+  },
   components: {
     ...EditorLayerForms,
     EditorLayersLayer,
     EditorLayersToolbar,
     EditorPricing
   },
-  data() {
-    return {
-      openedGroup: null
-    };
-  },
   props: {
     hasPricing: {
       type: Boolean,
       default: true
     }
   },
+  data() {
+    return {
+      openedGroup: null
+    };
+  },
   computed: {
     ...mapGetters([
       'product',

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

@@ -15,7 +15,7 @@
         :full-width="false"
         @select="selectTab">
         <template
-          v-slot:default="{ currentTab: side }">
+          #default="{ currentTab: side }">
           <div class="EditorWorkspace__sides-container">
             <div
               v-if="side"
@@ -97,7 +97,7 @@
       </client-only>
     </breakpoint>
     <div
-      v-if="!isZoomIn"
+      v-if="!isZoomIn && visiblePrintAreaOptions"
       class="EditorWorkspace__print-area-options"
       :class="{
         'EditorWorkspace__print-area-options--bottom': isZoomIn
@@ -120,7 +120,6 @@
 <script>
 import { createNamespacedHelpers } from 'vuex';
 import EditorPrintAreaOptions from '@lancom/shared/components/editor/editor_print_area_options/editor-print-area-options';
-import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import Tabs from '@lancom/shared/components/common/tabs';
 import Placeholder from '@lancom/shared/components/placeholder/placeholder';
 import EditorWorkspaceSide from './editor_workspace_side/editor-workspace-side';
@@ -133,9 +132,18 @@ export default {
     Placeholder,
     EditorWorkspaceSide,
     EditorPrintAreaOptions,
-    EditorPricing,
     Tabs
   },
+  props: {
+    zoomPrintArea: {
+      type: Boolean,
+      default: false
+    },
+    visiblePrintAreaOptions: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     return {
       size: null,
@@ -144,12 +152,6 @@ export default {
       isRotating: false
     };
   },
-  props: {
-    zoomPrintArea: {
-      type: Boolean,
-      default: false
-    }
-  },
   computed: {
     ...mapGetters([
       'product',
@@ -167,7 +169,7 @@ export default {
       const sides = [
         { label: 'Front', value: 'front' },
         { label: 'Back', value: 'back' }
-      ]
+      ];
       const validSides = sides.filter(s => this.product.printAreas?.some(pa => pa.side === s.value));
       return validSides[0] ? validSides : [sides[0]];
     },
@@ -184,7 +186,7 @@ export default {
           height: `${this.printAreaZoomSize.height}px`,
           left: `${this.printAreaZoomSize.left}px`,
           top: `${this.printAreaZoomSize.top}px`
-        }
+        };
       }
 
       return {};
@@ -210,7 +212,7 @@ export default {
           height: newHeight,
           left,
           top
-        }
+        };
       }
       return null;
     }
@@ -240,7 +242,7 @@ export default {
       this.preloading = true;
       const sides = ['back', 'front'];
       for (const side of sides) {
-        await (new Promise((resolve) => {
+        await (new Promise(resolve => {
           setTimeout(() => {
             this.toggleSide(side);
             resolve();
@@ -277,7 +279,7 @@ export default {
           if (layer.printArea === paId) {
             layer.printSize = printArea.printSize?._id;
           }
-        })
+        });
       }
       this.setSelectedPrintArea({ sideId: this.editableSide.id, printArea: printArea?._id, parentPrintArea: printArea?.parentPrintArea, size });
     },

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

@@ -191,6 +191,7 @@ export default {
       'selectedLayer',
       'selectedLayerCopy',
       'editorSize',
+      'editorSizeBreakpoints',
       'editModeSelectedLayer',
       'offsetWarningVisible',
       'showRecommendationToUseLargerImage',
@@ -333,15 +334,7 @@ export default {
       this.saveLayersAsImageWithDebounce();
     },
     calcWorkspaceSize(skipZoom) {
-      const sizes = {
-        mini: 350,
-        xs: 400,
-        sm: 580,
-        md: 430,
-        lg: 600,
-        xl: 720
-      };
-      return (!skipZoom && this.zoomSize) || sizes[this.breakpoints.is] || 430;
+      return (!skipZoom && this.zoomSize) || this.editorSizeBreakpoints[this.breakpoints.is] || 430;
     },
     handleWorkspaceSize() {
       const size = this.calcWorkspaceSize();