@lancom/shared 0.0.105 → 0.0.106

package/components/product/product_sizes_info/product-sizes-info.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="ProductSizesInfo__wrapper">
-    <table class="ProductSizeInfo__table lc_table striped">
+    <table
+      v-if="sizesTable.length > 0"
+      class="ProductSizeInfo__table lc_table"
+      :class="{ striped }">
       <thead class="centered">
         <tr class="ProductSizeInfo__main-info">
           <th>
@@ -34,7 +37,7 @@
         </tr>
         <tr>
           <td
-            :colspan="product.sizes.length + 1"
+            :colspan="colspan"
             class="ProductSizeInfo__sub-info-wrapper">
             <div class="ProductSizeInfo__sub-info">
               <div class="ProductSizeInfo__sub-info-item">
@@ -46,6 +49,7 @@
             </div>
           </td>
         </tr>
+        <slot name="footer" v-bind="{ colspan }"></slot>
       </tbody>
     </table>
   </div>
@@ -60,9 +64,16 @@ export default {
     product: {
       type: Object,
       required: true
+    },
+    striped: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
+    colspan() {
+      return this.product.sizes.length + 1;
+    },
     sizesFields() {
       return getSizesFields(this.product.sizes);
     },

package/components/product/related_products/related-products.scss

@@ -0,0 +1,34 @@
+@import "@/assets/scss/variables";
+
+.RelatedProducts {
+  &__products {
+    display: flex;
+    margin: -32px 0 0 -32px;
+    width: calc(100% + 32px);
+  }
+  &__product {
+    margin: 32px 0 0 32px;
+  }
+}
+::v-deep {
+  @media (max-width: $bp-large-max) {
+    .ProductList__item-wrapper:nth-child(6) {
+      display: none;
+    }
+  }
+  @media (max-width: $bp-medium-max) {
+    .ProductList__item-wrapper:nth-child(5) {
+      display: none;
+    }
+  }
+  @media (max-width: $bp-small-max) {
+    .ProductList__item-wrapper:nth-child(4) {
+      display: none;
+    }
+  }
+  @media (max-width: $bp-extra-small-max) {
+    .ProductList__item-wrapper:nth-child(3) {
+      display: none;
+    }
+  }
+}

package/components/product/related_products/related-products.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    v-if="hasProducts"
+    class="RelatedProducts__wrapper">
+    <div class="RelatedProducts__title lc_h2">
+      Related Products
+    </div>
+    <product-list :products="products" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import ProductList from '@/components/products/product_list/product-list';
+
+export default {
+  name: 'RelatedProducts',
+  components: {
+    ProductList
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    toEditor: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      products: []
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    hasProducts() {
+      return this.products.length > 0;
+    }
+  },
+  async mounted() {
+    const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias);
+    this.products = products;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'related-products';
+</style>

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

@@ -4,12 +4,13 @@
   &__wrapper {
     display: flex;
     flex-wrap: wrap;
+    margin-top: 20px;
     @media (max-width: $bp-small-max) {
       justify-content: center;
     }
   }
   &__item-wrapper {
-    width: 340px;
+    width: 330px;
     height: 450px;
     margin: 0 0 25px 25px;
     position: relative;

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

@@ -36,39 +36,63 @@
       border: 2px solid $grey_1;
     }
   }
+  &__cover {
+    transition: opacity 0.35s ease-in-out;
+    opacity: 1;
+    position: absolute;
+    top: 30px;
+  }
+  &__cover-hover {
+    transition: opacity 0.45s ease-in-out;
+    z-index: 2;
+    opacity: 0;
+    position: absolute;
+    top: 30px;
+  }
   &__link {
     position: relative;
-    display: block;
     transition: background-color 0.5s ease;
     background-color: white;
-    height: 340px;
+    height: 330px;
     width: 340px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    &:hover {
+      .ProductListProduct {
+        &__cover {
+          opacity: 0;
+        }
+        &__cover-hover {
+          opacity: 1;
+        }
+      }
+    }
   }
   &__brand {
     width: 54px;
     top: 10px;
     left: 5px;
     position: absolute;
-    z-index: 2;
+    z-index: 10;
     opacity: 0.7;
   }
-  &__cover {
-    width: 100%;
-    object-fit: contain;
-    position: relative;
-    z-index: 1;
-  }
-  &__cover-hover {
-    top: 0;
-    left: 0;
-    position: absolute;
-    z-index: 1;
-    display: none;
-    width: 100%;
-    &--visible {
-      display: block;
-    }
-  }
+  // &__cover {
+  //   object-fit: contain;
+  //   position: relative;
+  //   z-index: 1;
+  // }
+  // &__cover-hover {
+  //   top: 0;
+  //   left: 0;
+  //   position: absolute;
+  //   z-index: 1;
+  //   display: none;
+  //   &--visible {
+  //     display: block;
+  //   }
+  // }
   &__cover-color {
     top: 5px;
     left: 5px;

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

@@ -15,6 +15,7 @@
         v-if="productСover"
         class="ProductListProduct__cover"
         :src="productСover"
+        :style="productBackgroundСover"
         @load="productСoverLoaded = true" />
       <img
         v-if="productСoverLoaded && productСoverHover"
@@ -22,13 +23,14 @@
         :class="{
           'ProductListProduct__cover-hover--visible': full
         }"
+        :style="productBackgroundСover"
         :src="productСoverHover" />
-      <div
+      <!-- <div
         class="ProductListProduct__cover-color"
         :class="{
           'ProductListProduct__cover-color--visible': productСoverLoaded
         }"
-        :style="productBackgroundСover"></div>
+        :style="productBackgroundСover"></div> -->
       <img
         v-if="product.isTearAwayTag"
         class="ProductListProduct__tear-away-tag"
@@ -71,7 +73,7 @@
       <div
         v-if="full"
         class="ProductListProduct__info-item mt-9 lc_caption visible-full">
-        {{ product.material }} | {{ product.weight }} gsm
+        {{ product.fabricInfoShort }} | {{ product.materialWeight }} gsm
       </div>
       <div
         v-if="full"
@@ -81,7 +83,7 @@
           :key="color._id"
           class="ProductListProduct__color"
           :class="{
-            'ProductListProduct__color--selected': color._id === currentColor._id
+            'ProductListProduct__color--selected': currentColor && color._id === currentColor._id
           }"
           @click="currentColor = color">
           <product-color-image

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

@@ -11,9 +11,17 @@
       <span class="ProductsAside__info ProductsAside__info--small2"></span>
     </div>
     <div v-else>
+      <div
+        v-if="hasProductTypes"
+        class="ProductsAside__item">
+        <products-types
+          :has-selected-icon="hasSelectedIcon"
+          :selected-icon-circle="selectedIconCircle" />
+      </div>
       <div class="ProductsAside__item">
         <products-brands
-          :has-selected-icon="hasSelectedIcon" />
+          :has-selected-icon="hasSelectedIcon"
+          :selected-icon-circle="selectedIconCircle" />
       </div>
       <div class="ProductsAside__item">
         <products-colors />
@@ -22,14 +30,15 @@
         <products-attributes
           :has-selected-icon="hasSelectedIcon" />
         <products-tags
-          :has-selected-icon="hasSelectedIcon" />
+          :has-selected-icon="haAttributesSelectedIcon"
+          :has-remove-icon="hasRemoveIcon" />
       </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';
@@ -40,7 +49,7 @@ import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 export default {
   name: 'ProductsAside',
   components: {
-    // ProductsTypes,
+    ProductsTypes,
     ProductsBrands,
     ProductsTags,
     ProductsAttributes,
@@ -51,9 +60,25 @@ export default {
       type: Boolean,
       default: false
     },
+    hasRemoveIcon: {
+      type: Boolean,
+      default: false
+    },
+    selectedIconCircle: {
+      type: Boolean,
+      default: true
+    },
+    haAttributesSelectedIcon: {
+      type: Boolean,
+      default: false
+    },
     hasThumbs: {
       type: Boolean,
       default: true
+    },
+    hasProductTypes: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

package/components/products/products_brands/products-brands.vue

@@ -10,10 +10,13 @@
         :class="{
           'ProductsBrands__item--active': brand.alias === currentBrand
         }">
-        <products-link :brand="brand.alias === currentBrand ? null : brand.alias">
+        <products-link
+          class="ProductsBrands__more"
+          :brand="brand.alias === currentBrand ? null : brand.alias">
           <checked-icon
             v-if="hasSelectedIcon"
-            :checked="brand.alias === currentBrand" />
+            :checked="brand.alias === currentBrand"
+            :circle="selectedIconCircle" />
           {{ brand.name }}
         </products-link>
       </div>
@@ -38,6 +41,10 @@ export default {
     hasSelectedIcon: {
       type: Boolean,
       default: false
+    },
+    selectedIconCircle: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

package/components/products/products_filters/products-filters.vue

@@ -11,6 +11,16 @@
         class="labelless">
       </multiselect>
     </div>
+    <div class="ProductsFilters__search hidden-sm-and-down">
+      <input
+        v-model="search"
+        name="search"
+        placeholder="Search"
+        type="text"
+        class="form-field no-label tiny-placeholder labelless"
+        @change="goToTextSearch" />
+      <i class="icon-search"></i>
+    </div>
     <div
       class="ProductsFilters__filter hidden-md-and-up"
       :class="{

package/components/products/products_tags/products-tags.vue

@@ -15,6 +15,9 @@
         }">
         <products-link :tags="tag.alias">
           {{ tag.name }}
+          <i
+            v-if="hasRemoveIcon && selectedTags.includes(tag.alias)"
+            class="icon-cancel"></i>
         </products-link>
       </div>
     </div>
@@ -34,6 +37,10 @@ export default {
     hasSelectedIcon: {
       type: Boolean,
       default: false
+    },
+    hasRemoveIcon: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

package/components/products/products_types/products-types.vue

@@ -13,7 +13,8 @@
           class="ProductsTypes__more">
           <checked-icon
             v-if="hasSelectedIcon"
-            :checked="type.alias === currentType" />
+            :checked="type.alias === currentType"
+            :circle="selectedIconCircle" />
           <div
             v-if="hasThumbs && type.icon"
             class="ProductsTypes__item-icon"
@@ -46,6 +47,10 @@ export default {
       type: Boolean,
       default: false
     },
+    selectedIconCircle: {
+      type: Boolean,
+      default: false
+    },
     hasThumbs: {
       type: Boolean,
       default: true

package/mixins/product-preview.js

@@ -67,7 +67,7 @@ const productPreview = {
       return getBgStyle(this.productСoverHover);
     },
     productBackgroundСover() {
-      return getColorBackgroundStyle(this.currentColor);
+      return this.productСoverLoaded ? getColorBackgroundStyle(this.currentColor) : null;
     },
     productBrand() {
       const { brand } = this.product;

package/package.json

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

package/store/index.js

@@ -25,6 +25,7 @@ export const getters = {
   pricingSettings: ({ pricing }) => pricing || {},
   orderSettings: ({ orderInfo }) => orderInfo || {},
   gstTax: ({ pricing }) => pricing?.gstTax || 0,
+  displayPricingWithTax: ({ pricing }) => !!pricing?.displayPricingWithTax,
   screenPrintsPrices: ({ pricing }) => pricing?.screenPrintsPrices || {},
   depositInfo: ({ depositInfo }) => depositInfo || {}
 };
@@ -46,13 +47,14 @@ export const actions = {
       }
     } catch (e) {}
   },
-  async loadState({ commit, state: { shop, notificationBar } }) {
+  async loadState({ dispatch, commit, state: { shop, notificationBar } }) {
     const state = await loadState();
     if (state) {
       commit('setState', state);
       if (state.cart?.id) {
         const cart = await api.fetchCartById(shop._id, state.cart?.id);
         commit('cart/setCart', cart);
+        dispatch('cart/calculateCartPrice', { shop });
       }
     }
     const closedNotification = localStorage.getItem(CLOSED_NOTIFICATION);

package/store/product.js

@@ -5,7 +5,7 @@ import { getLayerModel } from '@lancom/shared/assets/js/models/product-layers';
 import { getPrintAreaByName, getProductPrintsAreasPrices } from '@lancom/shared/assets/js/models/print-area';
 import { sortSizes } from '@lancom/shared/assets/js/utils/sizes';
 import { isValidImageTypes, getColorOfDefaultCatalogFrontImage } from '@lancom/shared/assets/js/utils/colors';
-import { getProductsForCalculatePricing } from '../assets/js/utils/product';
+import { getProductsForCalculatePricing } from '@lancom/shared/assets/js/utils/product';
 import { sortByName } from '../assets/js/utils/filters';
 
 export const state = () => ({
@@ -36,7 +36,8 @@ export const state = () => ({
   selectedPrintAreas: {},
   productPricing: null,
   selectedTab: null,
-  layersUpdatesCount: 0
+  layersUpdatesCount: 0,
+  editableSide: { id: 'front' }
 });
 
 export const getters = {
@@ -72,7 +73,7 @@ export const getters = {
   editableLayers: ({ template, editableColor, editablePrintArea }) => template.layers
     .filter(({ printArea }) => (
       // colorId === editableColor._id &&
-      printArea === editablePrintArea.id
+      printArea === editablePrintArea?._id
     )),
   selectedLayer: ({ selectedLayer }) => selectedLayer,
   editModeSelectedLayer: ({ editModeSelectedLayer }) => editModeSelectedLayer,
@@ -90,10 +91,9 @@ export const getters = {
   },
   selectedTab: ({ selectedTab }) => selectedTab,
   layersUpdatesCount: ({ layersUpdatesCount }) => layersUpdatesCount,
-  printArea: ({ editablePrintArea, selectedPrintAreas, editorSize: { width, height }, product }) => {
-    const selectedPrintArea = (!!editablePrintArea && selectedPrintAreas[editablePrintArea._id]);
+  printArea: ({ editablePrintArea, editorSize: { width, height }, product }) => {
     return getPrintAreaByName({
-      name: selectedPrintArea,
+      printArea: editablePrintArea?._id,
       editorWidth: width,
       editorHeight: height
     }, product);
@@ -122,16 +122,24 @@ export const getters = {
         imagesGroups.set(i.color, [...(imagesGroups.get(i.color) || []), i]);
       });
     return [...imagesGroups.values()].reduce((images, group) => [...images, ...group], []);
-  }
+  },
+  editableSide: ({ editableSide }) => editableSide,
+  hasUnprintedPrice: ({ product }) => product.minUnprintedPrice || product.maxUnprintedPrice
 };
 
 export const actions = {
   async fetchProduct({ commit }, { shop, slug, print }) {
     try {
       commit('setLoadError', null);
-      const response = await api.fetchProduct(shop, slug);
-      commit('setProduct', response);
-      commit('setPreSetPrint', (response.prints || []).find(({ _id }) => _id === print));
+      const product = await api.fetchProduct(shop, slug);
+      commit('setProduct', product);
+      commit('setPreSetPrint', (product.prints || []).find(({ _id }) => _id === print));
+
+      const [first] = (product.printAreas || []);
+      if (first) {
+        commit('setEditablePrintArea', first);
+        commit('setSelectedPrintArea', { printArea: first._id, size: first.printSize.alias });
+      }
     } catch (e) {
       const { status, data } = e?.response || {};
       const statusCode = status || 500;
@@ -179,7 +187,7 @@ export const actions = {
     const { selectedPrintArea } = getters;
     const layer = await getLayerModel({
       type,
-      colorId: editableColor._id,
+      colorId: editableColor?._id,
       top,
       left,
       isEditMode,
@@ -187,9 +195,9 @@ export const actions = {
       originalSize: size,
       properties: {
         ...(properties || {}),
-        printArea: editablePrintArea._id,
-        printSize: selectedPrintArea._id,
-        printType: selectedPrintType._id
+        printArea: editablePrintArea?._id,
+        printSize: selectedPrintArea?._id,
+        printType: selectedPrintType?._id
       }
     });
     if (preselect) {
@@ -383,6 +391,9 @@ export const mutations = {
   },
   setPreSetPrint(state, preSetPrint) {
     state.preSetPrint = preSetPrint;
+  },
+  setEditableSide(state, side) {
+    state.editableSide = side;
   }
 };
 

package/components/pricing/pricing_print/discounts_table/discounts-table.scss

@@ -1,8 +0,0 @@
-@import "@/assets/scss/variables";
-
-.DiscountsTable {
-  &__info {
-    color: $green;
-    cursor: pointer;
-  }
-}