@lancom/shared 0.0.102 → 0.0.106

package/components/pricing/pricing_screen_print/pricing-screen-print.vue

@@ -9,7 +9,10 @@
           <div
             data-aos="aosFadeLeft"
             class="col-12 PricingPrint__col">
-            <discounts-table :product="product" />
+            <product-screen-print-price-info
+              :product="product"
+              :bordered="true"
+              :tabs="true" />
           </div>
         </div>
       </div>
@@ -18,12 +21,12 @@
 </template>
 
 <script>
-import DiscountsTable from './discounts_table/discounts-table';
+import ProductScreenPrintPriceInfo from '@lancom/shared/components/product/product_prints_price_info/product_screen_print_price_info/product-screen-print-price-info';
 
 export default {
   name: 'PricingScreenPrint',
   components: {
-    DiscountsTable
+    ProductScreenPrintPriceInfo
   },
   props: {
     product: {

package/components/pricing/pricing_screen_printing/pricing-screen-printing.vue

@@ -248,7 +248,7 @@ export default {
   },
   data() {
     return {
-      product: null,
+      product: this.findProductByType(PRODUCT_TYPES.TEE),
       colorOptions: [{
         value: 0,
         label: 'Unprinted'
@@ -318,7 +318,6 @@ export default {
   },
   created() {
     this.screenPrint = true;
-    this.product = this.findProductByType(PRODUCT_TYPES.TEE);
   },
   methods: {
     contactUs() {

package/components/product/gallery/gallery.scss

@@ -0,0 +1,168 @@
+@import "@/assets/scss/variables";
+
+::v-deep .slick-dots {
+  display: none !important;
+}
+::v-deep .slick-arrow {
+  position: absolute;
+  top: 50%;
+  background-color: $black;
+  background-image: url(../../../static/icons/arrow-left.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 25px 25px;
+  width: 51px;
+  height: 90px;
+  margin-top: -45px;
+  text-indent: -9999px;
+  border: none;
+  cursor: pointer;
+  z-index: 2;
+  @media (max-width: $bp-medium-max) {
+    width: 41px;
+    height: 67px;
+  }
+
+  &.slick-prev {
+    left: 0;
+    transform: rotate(180deg);
+  }
+  &.slick-next {
+    right: 0;
+  }
+  &:hover {
+    box-shadow: 0 0 3px $grey_2;
+  }
+  &:focus {
+    outline: none;
+  }
+}
+::v-deep .slick-slider,
+::v-deep .slick-slide {
+  touch-action: auto;
+  -ms-touch-action: auto;
+}
+::v-deep .Gallery__small .slick-arrow {
+  width: 31px;
+  height: 50px;
+  margin-top: -25px;
+}
+
+.Gallery {
+  &__big,
+  &__small {
+    overflow: hidden;
+    position: relative;
+  }
+  &__zoom {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    background: white;
+    opacity: 0.6;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    display: flex;
+    border: 1px solid grey;
+  }
+  &__big-image,
+  &__small-image {
+    width: 100%;
+    position: relative;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+    touch-action: auto !important;
+    -ms-touch-action: auto !important;
+    &::after {
+      content: ' ';
+      display: block;
+      padding-top: 100%;
+    }
+  }
+  &__big {
+    &-image {
+      max-height: 600px;
+    }
+    &-print {
+      background-color: $gray;
+      padding: 16px 20px;
+      position: absolute;
+      bottom: 60px;
+      left: 0px;
+      pointer-events: none;
+      &-name {
+        font-weight: 800;
+        font-size: 18px;
+        color: $black;
+      }
+      &-price {
+        font-weight: 600;
+        font-size: 18px;
+        color: $gray_main;
+        margin-top: 4px;
+      }
+    }
+  }
+  &__small {
+    &-image {
+      cursor: pointer;
+      margin-top: 30px;
+      border-bottom: 2px solid $white;
+      &--active {
+        border-bottom: 2px solid $black;
+      }
+    }
+    &-printed {
+      font-weight: bold;
+      font-size: 10px;
+      color: $black;
+      background: $gray;
+      padding: 6px;
+      text-align: center;
+      position: absolute;
+      bottom: 12px;
+      right: 20px;
+      left: 20px;
+      text-transform: uppercase;
+      @media (max-width: $bp-medium-max) {
+        bottom: 6px;
+        right: 3px;
+        left: 3px;
+        opacity: 0.7;
+      }
+    }
+  }
+  &__filters {
+    margin-top: 28px;
+    display: flex;
+  }
+  &__filter {
+    flex-grow: 1;
+    font-weight: 800;
+    font-size: 16px;
+    text-align: center;
+    color: $black;
+    padding: 19px 0;
+    background-color: $gray;
+    cursor: pointer;
+    margin-left: 7px;
+    &:first-child {
+      margin-left: 0;
+    }
+    &--active {
+      background-color: $black;
+      color: $gray;
+    }
+  }
+  &__divider {
+    height: 1px;
+    width: 100%;
+    background-color: $gray;
+    margin-top: 20px;
+  }
+}

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: {