@lancom/shared 0.0.62 → 0.0.66

package/components/common/pricing_table/pricing-table.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <table
+      class="lc_table striped">
+      <thead class="centered">
+        <tr
+          class="highlighted"
+          :class="{ bordered }">
+          <th></th>
+          <th
+            v-for="(name, index) in thList"
+            :key="index">
+            {{ name }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="centered">
+        <tr
+          v-for="(tr, index) in pricingRangesTable"
+          :key="index"
+          :class="{
+            bordered
+          }">
+          <td
+            v-for="(td, tdIndex) in tr"
+            :key="`td-${tdIndex}`"
+            :colspan="td.colspan">
+            {{ td.value }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import get from 'lodash.get';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'PricingTable',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    nameAttr: {
+      type: String,
+      default: 'name'
+    },
+    pricingAttr: {
+      type: String,
+      default: 'pricing'
+    },
+    bordered: {
+      type: Boolean
+    }
+  },
+  computed: {
+    thList() {
+      return this.items.map(item => get(item, this.nameAttr));
+    },
+    pricingRanges() {
+      const list = new Set();
+      let maxPrice = 0;
+      this.items.forEach(item => {
+        const pricing = get(item, this.pricingAttr);
+        pricing.forEach(({ min, max }) => {
+          if (min) {
+            list.add(min);
+            maxPrice = Math.max(maxPrice, min);
+          }
+          if (max) {
+            list.add(max + 1);
+            maxPrice = Math.max(maxPrice, min);
+          }
+        });
+      });
+      const sorted = [...list]
+        .sort((a, b) => a - b);
+
+      // if (minListSorted.length > 1) {
+      //   minListSorted.pop();
+      // }
+      const ranges = sorted.map((min, index) => {
+        const next = sorted[index + 1];
+        return {
+          min,
+          max: next ? next - 1 : null
+        };
+      });
+      return ranges.filter(r => r.min <= maxPrice);
+    },
+    pricingRangesTable() {
+      const table = this.pricingRanges.reduce((trList, range) => {
+        const tr = this.thList.reduce((tdList, name, index) => {
+          const td = { value: this.getPrintTipePriceInRange(name, range) };
+          let checked = false;
+          const colspan = this.thList.reduce((colspan, n, i) => {
+            if (i > index && !checked) {
+              if (td.value === this.getPrintTipePriceInRange(n, range)) {
+                colspan++;
+              } else {
+                checked = true;
+              }
+            }
+            return colspan;
+          }, 1);
+          if (colspan > 1) {
+            td.colspan = colspan;
+          }
+          const isEqualPrev = (index > 0 && td.value === this.getPrintTipePriceInRange(this.thList[index - 1], range));
+          return isEqualPrev ? tdList : [...tdList, td];
+        }, [{ value: (range.max >= 9999 || !range.max) ? `${range.min}+` : `${range.min}-${range.max}` }]);
+        return [...trList, tr];
+      }, []);
+      return table;
+    }
+  },
+  methods: {
+    getPrintTipePriceInRange(printTypeName, range) {
+      const printType = this.items.find(item => printTypeName === get(item, this.nameAttr));
+      const pricing = get(printType, this.pricingAttr);
+      const item = pricing.find(({ min, max }) => (!min || range.min >= min) && (!max || range.min <= max));
+      return item ? price(item.price) : '-';
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-table';
+</style>

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

@@ -0,0 +1,19 @@
+.ProductSideWithPrint__wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  &.preview {
+    cursor: pointer;
+  }
+}
+
+.ProductSideWithPrint__thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}

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

@@ -0,0 +1,128 @@
+<template>
+  <div
+    class="ProductSideWithPrint__wrapper"
+    :class="{ preview }"
+    @click="showImage()">
+    <div
+      class="ProductSideWithPrint__thumb"
+      :style="{
+        'background-image': imageBackground,
+        'background-color': colorBackground
+      }"></div>
+    <div
+      v-if="print"
+      class="ProductSideWithPrint__thumb ProductSideWithPrint__thumb--print"
+      :style="{ 'background-image': printImageBackground }"></div>
+  </div>
+</template>
+
+<script>
+import { getProductCover, getColorImage } from '@lancom/shared/assets/js/utils/colors';
+import ImageViewer from '@lancom/shared/components/common/image_viewer/image-viewer';
+
+export default {
+  name: 'ProductSideWithPrint',
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    side: {
+      type: String,
+      required: true
+    },
+    size: {
+      default: 'small',
+      validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    },
+    preview: {
+      type: Boolean,
+      default: false
+    },
+    fillBackground: {
+      type: Boolean,
+      default: false
+    },
+    priviewProducts: {
+      type: Array,
+      default: null
+    },
+    defaultPreview: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    products() {
+      if (!this.priviewProducts) {
+        return [this.product];
+      }
+
+      const predicate = (map, product) => {
+        const { _id } = product.color;
+        if (!map.has(_id) || this.product === product) {
+          map.set(_id, product);
+        }
+
+        return map;
+      };
+
+      return [...this.priviewProducts.reduce(predicate, new Map()).values()];
+    },
+    colorBackground() {
+      return this.fillBackground && this.product.color.rgb;
+    },
+    imageBackground() {
+      return this.image && this.getImageBackground(this.image);
+    },
+    printImageBackground() {
+      return this.print && this.getImageBackground(this.print);
+    },
+    image() {
+      const color = this.defaultPreview ? null : this.product.color;
+      return getColorImage(this.product, this.size, this.side, color) || getProductCover(this.product, this.size, this.side, color);
+    },
+    print() {
+      const { layersThumbnails = {} } = this.product || {};
+      return layersThumbnails[this.side];
+    }
+  },
+  methods: {
+    getImageBackground(image) {
+      return `url('${image}')`;
+    },
+    showImage() {
+      if (!this.preview) {
+        return;
+      }
+
+      this.$modal.show(
+        ImageViewer,
+        {
+          items: this.products.map(product => ({
+            src: getColorImage(product, 'large', this.side),
+            print: this.print,
+            color: product.color.rgb
+          })),
+          index: this.products.indexOf(this.product)
+        },
+        {
+          name: 'image-viewer-modal',
+          root: this.$root,
+          width: '100%',
+          height: 'auto',
+          adaptive: true,
+          clickToClose: true,
+          transition: 'from-top-to-bottom'
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-side-with-print.scss';
+</style>

package/components/common/products_list_dropdown/products-list-dropdown.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="ProductsListDropdown__wrapper">
+    <multiselect
+      v-model="selected"
+      class="labelless"
+      value="_id"
+      label="name"
+      track-by="_id"
+      placeholder="Edit another product"
+      :options="products"
+      :loading="loading"
+      :searchable="true"
+      :allow-empty="false"
+      :internal-search="false"
+      :option-height="60"
+      @search-change="loadProducts"
+      @select="select"
+      @open="loadProducts">
+      <div
+        slot="option"
+        slot-scope="{ option }"
+        class="ProductsListDropdown__option">
+        <products-list-dropdown-option :product="option" />
+      </div>
+    </multiselect>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import ProductsListDropdownOption from './products_list_dropdown_option/products-list-dropdown-option';
+
+export default {
+  name: 'ProductsListDropdown',
+  components: {
+    ProductsListDropdownOption
+  },
+  data() {
+    return {
+      products: [],
+      loading: false,
+      loadedProducts: false,
+      selected: null
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    select(product) {
+      this.$router.push(`/${product.SKU}/${product.alias}/editor`);
+    },
+    async loadProducts(text) {
+      try {
+        this.loading = true;
+        this.products = (await api.fetchProducts(this.shop._id, { text })).products;
+      } catch (e) {
+      } finally {
+        this.loading = true;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-list-dropdown';
+</style>

package/components/common/products_list_dropdown/products_list_dropdown_option/products-list-dropdown-option.scss

@@ -0,0 +1,30 @@
+.ProductsListDropdownOption {
+  &__wrapper {
+    display: flex;
+    align-items: center;
+  }
+  &__cover {
+    width: 50px;
+    height: 50px;
+    position: relative;
+  }
+  &__cover-image {
+    width: 100%;
+    object-fit: contain;
+    position: relative;
+    z-index: 1;
+  }
+  &__cover-color {
+    top: 0px;
+    left: 0px;
+    bottom: 0px;
+    right: 0px;
+    position: absolute;
+    z-index: 0;
+    opacity: 0;
+    transition: opacity 1s;
+    &--visible {
+      opacity: 1;
+    }
+  }
+}

package/components/common/products_list_dropdown/products_list_dropdown_option/products-list-dropdown-option.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="ProductsListDropdownOption__wrapper">
+    <div
+      v-if="productСover"
+      class="ProductsListDropdownOption__cover">
+      <img
+        v-if="productСover"
+        class="ProductsListDropdownOption__cover-image"
+        :src="productСover"
+        @load="productСoverLoaded = true" />
+      <div
+        class="ProductsListDropdownOption__cover-color"
+        :class="{
+          'ProductsListDropdownOption__cover-color--visible': productСoverLoaded
+        }"
+        :style="productBackgroundСover"></div>
+    </div>
+    <div class="ProductsListDropdownOption__name ml-10">
+      {{ product.name }}
+    </div>
+  </div>
+</template>
+
+<script>
+import productPreview from '@lancom/shared/mixins/product-preview';
+
+export default {
+  name: 'ProductsListDropdown',
+  mixins: [productPreview]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-list-dropdown-option';
+</style>

package/components/common/products_total_pricing/products-total-pricing.scss

@@ -0,0 +1,12 @@
+.ProductsTotalPricing {
+  &__wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+  &__total {
+    text-align: right;
+  }
+}

package/components/common/products_total_pricing/products-total-pricing.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="lc_subtitle1 ProductsTotalPricing__wrapper">
+    <div class="ProductsTotalPricing__subtotal">
+      <div class="lc_regular14">
+        {{ itemsLabel }} cost: {{ pricing.products.products.totalPrice | price }}
+      </div>
+      <div class="lc_regular14 mt-4">
+        Print cost: {{ pricing.products.prints.totalPrice | price }}
+      </div>
+      <div class="lc_medium18 mt-8">
+        Subtotal: {{ pricing.products.totalPrice | price }}
+      </div>
+    </div>
+    <div class="ProductsTotalPricing__total">
+      <div
+        v-if="pricing.shipping"
+        class="lc_regular14 mb-4">
+        Delivery: {{ pricing.shipping.totalPrice | price }} ({{ pricing.shipping.weight }})
+      </div>
+      <div class="lc_semibold22">
+        Total: {{ pricing.totalPrice | price }} <br />
+      </div>
+      <div class="lc_regular14 mt-4">
+        Incl. GST ({{ pricing.tax.percent }}) {{ pricing.tax.totalPrice | price }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { price } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'ProductsTotalPricing',
+  filters: {
+    price
+  },
+  props: {
+    pricing: {
+      type: Object,
+      required: true
+    },
+    itemsLabel: {
+      type: String,
+      default: 'Tee'
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-total-pricing';
+</style>

package/components/common/progress_steps/progress-steps.scss

@@ -0,0 +1,169 @@
+@import '@/assets/scss/variables';
+
+.ProgressSteps {
+  &__wrapper {
+    border: 2px solid $gray;
+  }
+  &__steps-wrapper {
+    position: relative;
+    background-color: #FCFCFC;
+    border-bottom: 2px solid $gray;
+    padding-top: 35px;
+    padding-bottom: 25px;
+  }
+  &__description {
+    background-color: #FCFCFC;
+    border-bottom: 2px solid $gray;
+    padding: 20px 50px;
+    font-size: 14px;
+    line-height: 19px;
+    color: $gray_main;
+    p {
+      margin-bottom: 10px;
+    }
+  }
+  &__content-wrapper {
+    padding: 51px;
+    position: relative;
+    @media (max-width: $bp-extra-small-max) {
+      padding: 15px;
+    }
+  }
+  &__steps {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column;
+    }
+  }
+  &__step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-grow: 1;
+    height: 111px;
+    @media (max-width: $bp-extra-small-max) {
+      margin: 0 !important;
+      height: 70px;
+    }
+      &-progress {
+        display: flex;
+        width: 100%;
+        align-items: center;
+      }
+      &-number {
+        width: 75px;
+        height: 75px;
+        @media (max-width: $bp-small-max) {
+          width: 55px;
+          height: 55px;
+        }
+        border-radius: 50%;
+        border: 3px solid $gray;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        span {
+          width: 57px;
+          height: 57px;
+          @media (max-width: $bp-small-max) {
+            width: 35px;
+            height: 35px;
+          }
+          background-color: $gray;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+          font-weight: 800;
+          font-size: 30px;
+          line-height: 41px;
+          @media (max-width: $bp-small-max) {
+            font-size: 21px;
+          }
+        }
+
+        i {
+          font-size: 23px;
+        }
+      }
+      &-line-prev,
+      &-line-next {
+        height: 3px;
+        flex-grow: 1;
+        background-color: $gray;
+      }
+      &-name {
+        margin-top: 14px;
+        font-weight: bold;
+        font-size: 16px;
+        line-height: 22px;
+        text-align: center;
+        text-transform: uppercase;    
+        position: absolute;
+        bottom: 0;
+      }
+    &:first-child {
+      .ProgressSteps__step-line-prev {
+        opacity: 0;
+      }
+    }
+    &:last-child {
+      .ProgressSteps__step-line-next {
+        opacity: 0;
+      }
+    }
+    &--active {
+      cursor: pointer;
+      .ProgressSteps__step {
+        &-number {
+          border: 3px solid $green;
+  
+          span {
+            background-color: $green;
+          }
+        }
+        &-line-prev,
+        &-line-next {
+          background-color: $green;
+        }
+      }
+    }
+  }
+  &__content {
+    &-title {
+      font-size: 18px;
+      line-height: 25px;
+      color: $gray_main;
+      margin-bottom: 12px;
+    }
+    &-steps {
+      display: flex;
+      @media (max-width: $bp-small-max) {
+        flex-direction: column;
+      }
+    }
+    &-main {
+      flex-grow: 1;
+    }
+  }
+  &__controls {
+    margin-top: 36px;
+    display: flex;
+    .Btn__wrapper {
+      flex-grow: 1;
+    }
+  }
+  // &__progress {
+  //     position: absolute;
+  //     top: 0;
+  //     right: 0;
+  //     bottom: 0;
+  //     left: 0;
+  //     background-color: $green;
+  //     z-index: 1;
+  // }
+}