@lancom/shared 0.0.62 → 0.0.66

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

@@ -0,0 +1,73 @@
+<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>
+          <tr v-if="sizeImage">
+            <td :colspan="product.sizes.length + 1">
+              <img
+                :src="sizeImage"
+                class="ProductSizeTable__icon" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'ProductSizeTable',
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    sizeImage() {
+      const image = (this.product.images || []).find(image => image.type === 'size');
+      return image && staticLink(image.large);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-size-table';
+</style>

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

@@ -0,0 +1,23 @@
+@import "@/assets/scss/variables";
+.ProductTierPrices {
+  &__header {
+    display: flex;
+  }
+  &__toggle {
+    font-size: 22px;
+    color: $grey_1;
+    cursor: pointer;
+    &:before {
+      content: '\00a0';
+    }
+    & > i:before {
+      transform: rotate(0);
+      transition: transform .22s ease-in-out;
+    }
+    &.isOpen {
+      & > i:before {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+<template>
+  <div class="ProductTierPrices__wrapper">
+    <div class="ProductTierPrices__header">
+      <h5 class="lc_semibold20 lc_black">
+        Tier Prices
+      </h5>
+      <div
+        class="ProductTierPrices__toggle"
+        :class="{ isOpen }"
+        @click="toggle">
+        <i class="icon-angle-down"></i>
+      </div>
+    </div>
+    <transition
+      appear
+      name="fade">
+      <div
+        v-if="isOpen"
+        class="ProductTierPrices__content row">
+        <div class="col-sm-8 col-12">
+          <pricing-discounts-table
+            v-if="hasPrices"
+            :prices="prices" />
+          <div v-else>
+            No prices
+          </div>
+        </div>
+        <div class="col-sm-4 col-12">
+          &nbsp;
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
+
+export default {
+  name: 'ProductTierPrices',
+  components: {
+    PricingDiscountsTable
+  },
+  props: {
+    product: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      isOpen: true
+    };
+  },
+  computed: {
+    ...mapGetters(['pricingSettings']),
+    hasPrices() {
+      return this.prices.length > 0;
+    },
+    prices() {
+      return (this.product ? this.product.pricing : this.pricingSettings.defaultProductPrice) || [];
+    }
+  },
+  methods: {
+    toggle() {
+      this.isOpen = !this.isOpen;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-tier-prices';
+</style>

package/components/product/product.scss

@@ -0,0 +1,24 @@
+@import "@/assets/scss/variables";
+
+.Product {
+  &__section {
+    & + & {
+      margin-top: 50px;
+    }
+    &-row {
+      & + & {
+        margin-top: 150px;
+      }
+    }
+  }
+  &__col {
+    @media (min-width: $bp-large-min) {
+      &:first-of-type {
+        padding-right: 30px;
+      }
+      &:last-of-type {
+        padding-left: 30px;
+      }
+    }
+  }
+}

package/components/product/product.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="Product__wrapper">
+    <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" />
+        </section>
+        <section class="Product__section">
+          <product-model-measurements />
+        </section>
+        <section class="Product__section">
+          <product-size-table :product="product" />
+        </section>
+      </div>
+      <div class="col-sm-6 col-12 Product__col">
+        <section class="Product__section">
+          <product-main-info :product="product" />
+        </section>
+        <section class="Product__section">
+          <product-colors-selector v-if="productDetails" />
+        </section>
+        <section class="Product__section">
+          <product-tier-prices :product="product" />
+        </section>
+        <section class="Product__section">
+          <product-fabric-and-size-info :product="product" />
+        </section>
+        <section class="Product__section">
+          <product-packaging :product="product" />
+        </section>
+      </div>
+    </div>
+    <!-- <div class="row Product__section-row">
+      <div class="col-12">
+        <section class="Product__section">
+          <product-labels-customization />
+        </section>
+      </div>
+    </div> -->
+  </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';
+import ProductFabricAndSizeInfo from './layouts/product_fabric_and_size_info/product-fabric-and-size-info';
+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
+    // ProductLabelsCustomization
+  },
+  computed: {
+    ...mapGetters('product', [
+      'product',
+      'productDetails',
+      'editableColor'
+    ])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product';
+</style>

package/components/product/product_color_image/product-color-image.scss

@@ -0,0 +1,8 @@
+.ProductColorImage {
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  &.zoomedIn {
+    background-size: 200%;
+  }
+}

package/components/product/product_color_image/product-color-image.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="ProductColorImage"
+    :class="{ zoomedIn }"
+    :style="style">
+  </div>
+</template>
+
+<script>
+import { getColorBackgroundStyle } from '@lancom/shared/assets/js/utils/colors';
+
+export default {
+  name: 'ProductColorImage',
+  props: {
+    color: {
+      type: Object,
+      required: true
+    },
+    zoomedIn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    style() {
+      return getColorBackgroundStyle(this.color);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-color-image.scss';
+</style>

package/components/product/product_color_thumbnails/product-color-thumbnails.scss

@@ -0,0 +1,61 @@
+@import "@/assets/scss/variables";
+
+.ProductColorThumbnails {
+  &__wrapper {
+    padding: 12px 0;
+  }
+  &__content {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 85px);
+    grid-column-gap: 5px;
+    grid-row-gap: 5px;
+  }
+  &__entity {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: center;
+    padding: 6px 0;
+    cursor: pointer;
+    position: relative;
+    &:before {
+      content: '';
+      border: 1px solid transparent;
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      bottom: -1px;
+      left: -1px;
+      transition: border-color .2s ease-in-out, opacity .22s ease-in-out;
+    }
+    &-thumbnail {
+      width: 78px;
+      height: 78px;
+      margin-bottom: 3px;
+    }
+    &:hover:before, &.active:before {
+      border-color: #222;
+    }
+    &-remove {
+      background-color: $error;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      position: absolute;
+      z-index: 1;
+      top: -8px;
+      right: -8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #FFFFFF;
+      font-size: 10px;
+      transform: scale(0);
+      transition: transform .2s ease-in-out;
+    }
+    &:hover &-remove {
+      transform: scale(1);
+    }
+  }
+}

package/components/product/product_color_thumbnails/product-color-thumbnails.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    v-if="hasSelectedColors"
+    class="ProductColorThumbnails__wrapper">
+    <div class="ProductColorThumbnails__content">
+      <div
+        v-for="color in selectedColors"
+        :key="color._id"
+        class="ProductColorThumbnails__entity"
+        :class="{ active: color._id === editableColor._id }"
+        @click="setEditableColor(color)">
+        <div
+          class="ProductColorThumbnails__entity-remove"
+          @click="unselectColor(color)">
+          <i class="icon-cancel"></i>
+        </div>
+        <product-color-image
+          :color="color"
+          class="ProductColorThumbnails__entity-thumbnail">
+        </product-color-image>
+        <div class="lc_caption">
+          {{ color.name }}
+        </div>
+        {{ color.alias }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+import ProductColorImage from './../product_color_image/product-color-image';
+
+const { mapGetters, mapMutations } = createNamespacedHelpers('product');
+
+export default {
+  name: 'ProductColorThumbnails',
+  components: {
+    ProductColorImage
+  },
+  computed: {
+    ...mapGetters([
+      'editableColor',
+      'selectedColors'
+    ]),
+    hasSelectedColors() {
+      return this.selectedColors.length > 1;
+    }
+  },
+  methods: {
+    ...mapMutations([
+      'setEditableColor',
+      'removeTemplateColor'
+    ]),
+    unselectColor({ _id }) {
+      this.removeTemplateColor(_id);
+      if (this.editableColor._id === _id) {
+        this.setEditableColor(this.selectedColors[0]);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-color-thumbnails.scss';
+</style>

package/components/product/product_info_tabs/product-info-tabs.scss

@@ -0,0 +1,24 @@
+@import "@/assets/scss/variables";
+
+.ProductInfoTabs {
+  &__wrapper {
+    ::v-deep {
+      .tab-label,
+      .lc_table th,
+      .ProductSizeInfo__main-info {
+        @media (max-width: $bp-large-max) {
+          font-size: 14px; 
+        }
+      }
+
+      .tabs,
+      .tabs--secondary,
+      .tabs--primary,
+      .tabs--large {
+        @media (max-width: $bp-extra-small-max) {
+          flex-direction: column;
+        }
+      }
+    }
+  }
+}

package/components/product/product_info_tabs/product-info-tabs.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="ProductInfoTabs__wrapper">
+    <tabs
+      :tabs="tabs"
+      :selected="selectedTab"
+      @select="selectedTab = $event">
+      <template #default="{ currentTab }">
+        <component
+          :is="currentTab"
+          v-if="currentTab"
+          :product="product"
+          :simple-products="simpleProducts">
+        </component>
+      </template>
+    </tabs>
+  </div>
+</template>
+
+<script>
+import Tabs from '@lancom/shared/components/common/tabs';
+import ProductSizesInfo from '@lancom/shared/components/product/product_sizes_info/product-sizes-info';
+import SimpleProductsPriceInfo from '@lancom/shared/components/product/simple_products_price_info/simple-products-price-info';
+import ProductPrintsPriceInfo from '@lancom/shared/components/product/product_prints_price_info/product-prints-price-info';
+
+export default {
+  name: 'ProductInfoTabs',
+  components: {
+    ProductSizesInfo,
+    SimpleProductsPriceInfo,
+    ProductPrintsPriceInfo,
+    Tabs
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    simpleProducts: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tabs: [{
+        label: 'Size Chart',
+        value: 'product-sizes-info'
+      }, {
+        label: 'Product price details',
+        value: 'simple-products-price-info'
+      }, {
+        label: 'Garment print price details',
+        value: 'product-prints-price-info'
+      }],
+      selectedTab: 'product-sizes-info'
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-info-tabs';
+</style>

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

@@ -0,0 +1,79 @@
+<template>
+  <div
+    class="ProductPriceRange__wrapper">
+    <div
+      v-if="product[minPriceAttr] === product[maxPriceAttr]"
+      class="ProductPriceRange__price lc_h4">
+      <div
+        v-if="withGst"
+        class="lc_h4">
+        {{ product[minPriceAttr] | tax(gstTax) | price }}
+        <span class="lc_regular11 lc_bold">inc. GST</span>
+      </div>
+      <div :class="withGst ? 'lc_regular11' : 'lc_h4'">
+        {{ prePriceText }} {{ product[minPriceAttr] | price }} + GST
+      </div>
+    </div>
+    <div
+      v-else
+      class="ProductPriceRange__price">
+      <div
+        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>
+      </div>
+      <div :class="withGst ? 'lc_regular11' : 'lc_h4'">
+        {{ prePriceText }} {{ product[minPriceAttr] | price }} {{ rangeDivider }} {{ product[maxPriceAttr] | price }} + GST
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { price, tax } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'ProductPriceRange',
+  filters: {
+    price,
+    tax
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    withGst: {
+      type: Object,
+      required: true
+    },
+    minPriceAttr: {
+      type: String,
+      default: 'minPrice'
+    },
+    maxPriceAttr: {
+      type: String,
+      default: 'maxPrice'
+    },
+    prePriceText: {
+      type: String,
+      default: ''
+    },
+    rangeDivider: {
+      type: String,
+      default: '-'
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'gstTax'
+    ])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-price-range';
+</style>

package/components/product/product_prints_price_info/product-prints-price-info.scss

@@ -0,0 +1,25 @@
+@import "@/assets/scss/variables";
+
+::v-deep {
+  tr {
+    border: 1px solid $gray !important;
+    &, th {
+      font-weight: bold !important;
+      font-size: 16px;
+      text-transform: uppercase;
+    }
+  }
+}
+
+.ProductPrintsPriceInfo {
+  &__print-pricing {
+    margin-top: 30px;
+  }
+  &__print-name {
+    margin: 10px 0;
+    text-align: center;
+  }
+  &__item {
+    margin-bottom: 30px;
+  }
+}

package/components/product/product_prints_price_info/product-prints-price-info.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="ProductPrintsPriceInfo__wrapper">
+    <product-print-price-info
+      v-for="(print, index) in printTypes"
+      :key="index"
+      :product="product"
+      :print-type="print"
+      class="ProductPrintsPriceInfo__item" />
+  </div>
+</template>
+
+<script>
+import ProductPrintPriceInfo from './product_print_price_info/product-print-price-info';
+
+export default {
+  name: 'ProductPrintsPriceInfo',
+  components: {
+    ProductPrintPriceInfo
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    printTypes() {
+      return this.product.printTypes;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-prints-price-info';
+</style>