@lancom/shared 0.0.105 → 0.0.108

package/components/product/gallery/gallery.vue

@@ -0,0 +1,252 @@
+<template>
+  <div
+    class="Gallery__wrapper">
+    <div class="Gallery__big">
+      <vue-slick-carousel
+        ref="bigCarousel"
+        :key="updateCarouselTime"
+        :arrows="true"
+        :dots="true"
+        :swipe="false"
+        :speed="800"
+        @beforeChange="onChange">
+        <div
+          v-for="image in filteredImages"
+          :key="image.large"
+          v-hammer:press="onPanstart"
+          v-hammer:pan="onPan"
+          v-hammer:pressup="onPanend"
+          v-hammer:panend="onPanend"
+          class="Gallery__big-image"
+          :style="{
+            'background-image': `url('${staticLink(image.large)}')`,
+            'background-size': backgroundSize,
+            'background-position': backgroundPosition,
+            'touch-action': zoomEnable ? 'none' : 'auto'
+          }"
+          @mousedown="onMouseDown"
+          @mouseenter="onMouseEnter"
+          @mouseleave="onMouseLeave"
+          @mousemove="onMouseMove">
+          <div
+            v-if="image.print"
+            class="Gallery__big-print">
+            <div class="Gallery__big-print-name">
+              {{ image.print.name }}
+            </div>
+            <div
+              v-if="image.print.pricing"
+              class="Gallery__big-print-price">
+              {{ image.print.pricing.price | price }} for ({{ image.print.pricing.min || 1 }}+)
+            </div>
+          </div>
+        </div>
+      </vue-slick-carousel>
+      <div
+        v-if="!isTouch"
+        class="Gallery__zoom"
+        @click="onMouseDown($event)">
+        <i :class="zoomEnable ? 'icon-zoom-out' : 'icon-zoom-in'"></i>
+      </div>
+    </div>
+    <div class="Gallery__small">
+      <vue-slick-carousel
+        ref="smallCarousel"
+        :key="updateCarouselTime"
+        :slides-per-row="slidesPerRow"
+        :arrows="true"
+        :dots="true"
+        :speed="800">
+        <div
+          v-for="(image, index) in filteredImages"
+          :key="image.large"
+          class="Gallery__small-image"
+          :class="{
+            'Gallery__small-image--active': index === activeIndex
+          }"
+          :style="{
+            'background-image': `url('${staticLink(image.small)}')`
+          }"
+          @click="goToSlideAndChangeColor(index)">
+          <div class="Gallery__small-printed">
+            {{ image.printType ? 'Printed' : (product.prePrint ? product.prePrintText : 'Blank') }}
+          </div>
+        </div>
+      </vue-slick-carousel>
+    </div>
+    <div
+      v-if="hasValidFilters"
+      class="Gallery__filters">
+      <div
+        v-for="filter in validFilters"
+        :key="filter.name"
+        class="Gallery__filter"
+        :class="{
+          'Gallery__filter--active': filter === filterType
+        }"
+        @click="toggleFilterType(filter)">
+        {{ filter.name }}
+      </div>
+    </div>
+    <div
+      v-else
+      class="Gallery__divider"></div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import VueSlickCarousel from 'vue-slick-carousel';
+import 'vue-slick-carousel/dist/vue-slick-carousel.css';
+import { staticLink, price } from '@lancom/shared/assets/js/utils/filters';
+import { isValidImageTypes } from '@lancom/shared/assets/js/utils/colors';
+
+export default {
+  name: 'Gallery',
+  filters: {
+    price
+  },
+  components: {
+    VueSlickCarousel
+  },
+  props: {
+    slidesPerRow: {
+      type: Number,
+      default: 6
+    }
+  },
+  data() {
+    return {
+      isTouch: ('ontouchstart' in window),
+      zoomEnable: false,
+      activeIndex: 0,
+      updateCarouselTime: Date.now(),
+      filters: [{
+        name: 'FRONT / BACK',
+        types: ['front', 'back']
+      }, {
+        name: 'MODEL',
+        types: ['model']
+      }, {
+        name: 'PRINTS',
+        filterBy: image => !!image.printType
+      }],
+      filterType: null,
+      galerySize: null,
+      backgroundSize: null,
+      backgroundPosition: null,
+      skipUpdateGallery: false
+    };
+  },
+  computed: {
+    ...mapGetters('product', ['product', 'images', 'editableColor']),
+    hasValidFilters() {
+      return this.validFilters.length > 1;
+    },
+    validFilters() {
+      return this.filters.filter(filter => (this.images || []).some(i => this.isValidImageByFilter(filter, i)));
+    },
+    filteredImages() {
+      const images = this.filterType ? this.images.filter(i => this.isValidImageByFilter(this.filterType, i)) : this.images;
+      return images.map(image => {
+        const printType = this.product?.printTypes.find(({ _id }) => _id === image.printType);
+        const { printCost } = printType?.printAreas.find(({ printSizes }) => (printSizes || []).some(({ _id }) => _id === image.printSize)) || printType?.printAreas[0] || { printCost: [] };
+        const pricing = printCost[printCost.length - 1];
+        const print = printType && {
+          name: printType.name,
+          pricing
+        };
+        return { ...image, print };
+      });
+    }
+  },
+  watch: {
+    editableColor() {
+      if (!this.skipUpdateGallery) {
+        const index = this.filteredImages.findIndex(i => i.color === this.editableColor?._id);
+        if (index > -1) {
+          this.goToSlide(index, true);
+        }
+      }
+      this.skipUpdateGallery = false;
+    }
+  },
+  methods: {
+    ...mapActions('product', ['selectColor']),
+    staticLink,
+    goToSlideAndChangeColor(index) {
+      this.skipUpdateGallery = true;
+      const { color } = this.filteredImages[index] || {};
+      this.goToSlide(index);
+      if (color) {
+        this.selectColor(color);
+      }
+    },
+    goToSlide(index, dontAnimate = false) {
+      this.$refs.bigCarousel.goTo(index, dontAnimate);
+      this.$emit('selected', this.filteredImages[index]);
+    },
+    onChange(prev, current) {
+      this.activeIndex = current;
+      const smallIndex = Number.parseInt(current / this.slidesPerRow);
+      this.$refs.smallCarousel.goTo(smallIndex);
+    },
+    isValidImageByFilter(filterType, image) {
+      return filterType.filterBy ? filterType.filterBy(image) : isValidImageTypes(image, filterType.types);
+    },
+    toggleFilterType(filterType) {
+      this.filterType = this.filterType === filterType ? null : filterType;
+      this.updateCarouselTime = Date.now();
+      this.activeIndex = 0;
+    },
+    onPanstart(e) {
+      if (this.isTouch) {
+        this.zoomEnable = true;
+        this.onMouseEnter(e.srcEvent);
+      }
+    },
+    onPan(e) {
+      if (this.isTouch) {
+        this.onMouseMove(e.srcEvent);
+      }
+    },
+    onPanend(e) {
+      if (this.isTouch) {
+        this.zoomEnable = false;
+        this.onMouseLeave(e.srcEvent);
+      }
+    },
+    onMouseDown(e) {
+      if (!this.isTouch) {
+        this.zoomEnable = !this.zoomEnable;
+        if (this.zoomEnable) {
+          this.onMouseEnter(e);
+        } else {
+          this.onMouseLeave();
+        }
+      }
+    },
+    onMouseEnter(e) {
+      if (this.zoomEnable) {
+        this.backgroundSize = '1000px';
+        this.galerySize = e.target.getBoundingClientRect();
+      }
+    },
+    onMouseLeave() {
+      this.backgroundSize = null;
+      this.backgroundPosition = null;
+      this.galerySize = null;
+    },
+    onMouseMove({ offsetX, offsetY }) {
+      if (this.galerySize) {
+        const { width, height } = this.galerySize;
+        this.backgroundPosition = `${offsetX / width * 100}% ${offsetY / height * 100}%`;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'gallery';
+</style>

package/components/product/layouts/product_fabric_and_size_info/product-fabric-and-size-info.vue

@@ -6,7 +6,9 @@
       </h5>
     </div>
     <div class="ProductFabricAndSizeInfo__content">
-      <table class="lc_table bordered ProductFabricAndSizeInfo__table">
+      <table
+        v-if="product.sizeInfo"
+        class="lc_table bordered ProductFabricAndSizeInfo__table">
         <thead class="pull-left cell-padding">
           <tr>
             <th>
@@ -16,13 +18,13 @@
         </thead>
         <tbody class="centered">
           <tr>
-            <td>
-              {{ product.sizeInfo }}
-            </td>
+            <td v-html="product.sizeInfo"></td>
           </tr>
         </tbody>
       </table>
-      <table class="lc_table bordered ProductFabricAndSizeInfo__table">
+      <table
+        v-if="product.fabricInfo"
+        class="lc_table bordered ProductFabricAndSizeInfo__table">
         <thead class="pull-left cell-padding">
           <tr>
             <th>
@@ -32,7 +34,7 @@
         </thead>
         <tbody class="centered">
           <tr>
-            <td>{{ product.fabricInfo }}</td>
+            <td v-html="product.fabricInfo"></td>
           </tr>
         </tbody>
       </table>

package/components/product/layouts/product_gallery/product-gallery.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="ProductGallery__wrapper">
+    {{ color.name }}<br>
+    {{ thumbnails }}
     <transition
       appear
       name="fade">
       <div
-        :key="currentIndex"
+        :key="current"
         class="ProductGallery__current"
         :style="{
           'background-color': color && color.rgb
@@ -15,7 +17,7 @@
     </transition>
     <div
       v-for="thumbnail in thumbnails"
-      :key="thumbnail.index"
+      :key="thumbnail.url"
       class="ProductGallery__thumbnail ripple"
       :class="{ active: currentIndex === thumbnail.index }"
       :style="{
@@ -49,7 +51,7 @@ export default {
   },
   computed: {
     images() {
-      return getProductColorImages(this.product, this.color);
+      return getProductColorImages(this.product, this.color, true);
     },
     current() {
       if (!this.images[this.currentIndex]) {
@@ -66,6 +68,11 @@ export default {
         .slice(0, 4);
     }
   },
+  watch: {
+    color() {
+      this.currentIndex = 0;
+    }
+  },
   methods: {
     select(index) {
       this.currentIndex = index;

package/components/product/layouts/product_size_table/product-size-table.vue

@@ -1,58 +1,35 @@
 <template>
   <div class="ProductSizeTable__wrapper">
     <div class="ProductSizeTable__content">
-      <table class="lc_table bordered ProductSizeTable__table">
-        <thead>
-          <tr class="stripped">
-            <th class="pull-left cell-padding">
-              Size
-            </th>
-            <th
-              v-for="(size, index) of product.sizes"
-              :key="`size${index}`">
-              {{ size.size ? size.size.shortName : '' }}
-            </th>
-          </tr>
-        </thead>
-        <tbody class="centered">
-          <tr>
-            <td class="pull-left cell-padding">
-              Length (cm)
-            </td>
-            <td
-              v-for="(size, index) of product.sizes"
-              :key="`length${index}`">
-              {{ size.length }}
-            </td>
-          </tr>
-          <tr>
-            <td class="pull-left cell-padding">
-              Width (cm)
-            </td>
-            <td
-              v-for="(size, index) of product.sizes"
-              :key="`width${index}`">
-              {{ size.width }}
-            </td>
-          </tr>
+      <product-sizes-info
+        :product="product"
+        :striped="false">
+        <template #footer="{ colspan }">
           <tr v-if="sizeImage">
-            <td :colspan="product.sizes.length + 1">
+            <td :colspan="colspan">
               <img
                 :src="sizeImage"
                 class="ProductSizeTable__icon" />
             </td>
           </tr>
-        </tbody>
-      </table>
+        </template>
+      </product-sizes-info>
+      <div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { staticLink } from '@lancom/shared/assets/js/utils/filters';
+import { getColorImage } from '@lancom/shared/assets/js/utils/colors';
+import ProductSizesInfo from '@lancom/shared/components/product/product_sizes_info/product-sizes-info';
 
 export default {
   name: 'ProductSizeTable',
+  components: {
+    ProductSizesInfo
+  },
   props: {
     product: {
       type: Object,
@@ -61,8 +38,8 @@ export default {
   },
   computed: {
     sizeImage() {
-      const image = (this.product.images || []).find(image => image.type === 'size');
-      return image && staticLink(image.large);
+      const image = getColorImage(this.product, 'large', 'size');
+      return image && staticLink(image);
     }
   }
 };

package/components/product/layouts/product_tier_prices/product-tier-prices.vue

@@ -1,3 +1,4 @@
+
 <template>
   <div class="ProductTierPrices__wrapper">
     <div class="ProductTierPrices__header">
@@ -53,12 +54,12 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['pricingSettings']),
+    ...mapGetters('product', ['defaultSimpleProduct']),
     hasPrices() {
       return this.prices.length > 0;
     },
     prices() {
-      return (this.product ? this.product.pricing : this.pricingSettings.defaultProductPrice) || [];
+      return this.defaultSimpleProduct?.pricing || [];
     }
   },
   methods: {

package/components/product/product.vue

@@ -3,7 +3,9 @@
     <div class="row Product__section-row">
       <div class="col-sm-6 col-12 Product__col">
         <section class="Product__section">
-          <product-gallery v-if="editableColor" :product="product" :color="editableColor" />
+          <client-only>
+            <gallery v-if="hasImages" />
+          </client-only>
         </section>
         <section class="Product__section">
           <product-model-measurements />
@@ -30,12 +32,15 @@
         </section>
       </div>
     </div>
+    <related-products
+      class="EditorPage__related"
+      :product="product"
+      :to-editor="false" />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import ProductGallery from './layouts/product_gallery/product-gallery';
 import ProductMainInfo from './layouts/product_main_info/product-main-info';
 import ProductColorsSelector from './layouts/product_colors_selector/product-colors-selector';
 import ProductTierPrices from './layouts/product_tier_prices/product-tier-prices';
@@ -43,27 +48,33 @@ import ProductFabricAndSizeInfo from './layouts/product_fabric_and_size_info/pro
 import ProductPackaging from './layouts/product_packaging/product-packaging';
 import ProductModelMeasurements from './layouts/product_model_measurements/product-model-measurements';
 import ProductSizeTable from './layouts/product_size_table/product-size-table';
+
 // import ProductLabelsCustomization from './layouts/product_labels_customization/product-labels-customization';
 
 export default {
   name: 'Product',
   components: {
-    ProductGallery,
     ProductMainInfo,
     ProductColorsSelector,
     ProductTierPrices,
     ProductFabricAndSizeInfo,
     ProductPackaging,
     ProductModelMeasurements,
-    ProductSizeTable
+    ProductSizeTable,
+    RelatedProducts: () => import('@lancom/shared/components/product/related_products/related-products'),
+    Gallery: () => import('@lancom/shared/components/product/gallery/gallery'),
     // ProductLabelsCustomization
   },
   computed: {
     ...mapGetters('product', [
       'product',
+      'images',
       'productDetails',
       'editableColor'
-    ])
+    ]),
+    hasImages() {
+      return this.images.length > 0;
+    }
   }
 };
 </script>

package/components/product/product_price_range/product-price-range.vue

@@ -8,9 +8,13 @@
         v-if="withGst"
         class="lc_h4">
         {{ product[minPriceAttr] | tax(gstTax) | price }}
-        <span class="lc_regular11 lc_bold">inc. GST</span>
+        <span
+          v-if="visiblePriceInfo"
+          class="lc_regular11 lc_bold">inc. GST</span>
       </div>
-      <div :class="withGst ? 'lc_regular11' : 'lc_h4'">
+      <div
+        v-if="withoutGst"
+        :class="withGst ? 'lc_regular11' : 'lc_h4'">
         {{ prePriceText }} {{ product[minPriceAttr] | price }} + GST
       </div>
     </div>
@@ -21,9 +25,13 @@
         v-if="withGst"
         class="lc_h4">
         {{ product[minPriceAttr] | tax(gstTax) | price }} {{ rangeDivider }} {{ product[maxPriceAttr] | tax(gstTax) | price }}
-        <span class="lc_regular11 lc_bold"> inc. GST</span>
+        <span
+          v-if="visiblePriceInfo"
+          class="lc_regular11 lc_bold"> inc. GST</span>
       </div>
-      <div :class="withGst ? 'lc_regular11' : 'lc_h4'">
+      <div
+        v-if="withoutGst"
+        :class="withGst ? 'lc_regular11' : 'lc_h4'">
         {{ prePriceText }} {{ product[minPriceAttr] | price }} {{ rangeDivider }} {{ product[maxPriceAttr] | price }} + GST
       </div>
     </div>
@@ -49,6 +57,10 @@ export default {
       type: Boolean,
       required: true
     },
+    withoutGst: {
+      type: Boolean,
+      default: true
+    },
     minPriceAttr: {
       type: String,
       default: 'minPrice'
@@ -64,6 +76,10 @@ export default {
     rangeDivider: {
       type: String,
       default: '-'
+    },
+    visiblePriceInfo: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

package/components/product/product_prints_price_info/product_print_price_info/product_print_price_info_item/product-print-price-info-item.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="ProductPrintPriceInfoItem__wrapper">
-    <div class="ProductPrintPriceInfoItem__table-name">
+    <div
+      v-if="visibleTableName"
+      class="ProductPrintPriceInfoItem__table-name">
       {{ print.name }}
     </div>
-    <pricing-table :items="pricing" />
+    <pricing-table
+      :items="pricing"
+      :bordered="bordered" />
     <div
       v-if="print.setupCost > 0"
       class="mt-10 lc_h4">
@@ -33,6 +37,14 @@ export default {
     print: {
       type: Object,
       required: true
+    },
+    visibleTableName: {
+      type: Boolean,
+      default: true
+    },
+    bordered: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

package/components/product/product_prints_price_info/product_screen_print_price_info/product-screen-print-price-info.scss

@@ -7,4 +7,9 @@
     text-transform: uppercase;
     font-size: 13px;
   }
+  &__tabs {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
 }

package/components/product/product_prints_price_info/product_screen_print_price_info/product-screen-print-price-info.vue

@@ -1,21 +1,49 @@
 <template>
   <div class="ProductScreenPrintPriceInfo__wrapper">
-    <div class="ProductScreenPrintPriceInfo__table-name">
+    <div
+      v-if="tabs"
+      class="ProductScreenPrintPriceInfo__tabs">
+      <btn
+        :btn-class="activeWithUnderbase ? 'green' : 'white'"
+        btn-label="With Underbase"
+        @onclick="activeWithUnderbase = true">
+      </btn>
+      <btn
+        :btn-class="activeWithUnderbase ? 'white' : 'green'"
+        btn-label="Without Underbase"
+        @onclick="activeWithUnderbase = false">
+      </btn>
+    </div>
+    <div
+      v-if="!tabs"
+      class="ProductScreenPrintPriceInfo__table-name">
       With Underbase
     </div>
-    <pricing-table :items="withUnderbasePricing" />
-    <pricing-table
-      :items="withUnderbaseSetupPricing"
-      tr-label="Setup Cost"
-      class="mt-10" />
-    <div class="ProductScreenPrintPriceInfo__table-name">
+    <div v-if="!tabs || activeWithUnderbase">
+      <pricing-table
+        :items="withUnderbasePricing"
+        :bordered="bordered" />
+      <pricing-table
+        :items="withUnderbaseSetupPricing"
+        :bordered="bordered"
+        tr-label="Setup Cost"
+        class="mt-10" />
+    </div>
+    <div
+      v-if="!tabs"
+      class="ProductScreenPrintPriceInfo__table-name">
       Without Underbase
     </div>
-    <pricing-table :items="withoutUnderbasePricing" />
-    <pricing-table
-      :items="withoutUnderbaseSetupPricing"
-      tr-label="Setup Cost"
-      class="mt-10" />
+    <div v-if="!tabs || !activeWithUnderbase">
+      <pricing-table
+        :items="withoutUnderbasePricing"
+        :bordered="bordered" />
+      <pricing-table
+        :items="withoutUnderbaseSetupPricing"
+        :bordered="bordered"
+        tr-label="Setup Cost"
+        class="mt-10" />
+    </div>
   </div>
 </template>
 
@@ -33,8 +61,21 @@ export default {
     product: {
       type: Object,
       required: true
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    tabs: {
+      type: Boolean,
+      default: false
     }
   },
+  data() {
+    return {
+      activeWithUnderbase: true
+    };
+  },
   computed: {
     screenPrints() {
       const types = (this.product.printTypes || []).filter(({ type }) => type === PRINT_TYPES.SCREEN);