@lancom/shared 0.0.62 → 0.0.66

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

@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div class="row PricingScreenPrintSection__print-info">
+      <div class="col-12 lc_text-uppercase">
+        <div class="lc_h3">
+          Screen Printing
+        </div>
+        <ul>
+          <li>
+            Best for up to 6 solid colours
+          </li>
+          <li>
+            Minimum quantity 126
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="row">
+      <transition name="from-right-to-left" appear>
+        <div class="col-12 view-transition">
+          <div class="PricingScreenPrintSection__section">
+            <div class="PricingScreenPrintSection__section-title">
+              Сhoose Product
+            </div>
+            <div class="PricingScreenPrintSection__section-content PricingScreenPrintSection__product-types">
+              <div
+                v-for="item in productTypes"
+                :key="item.type"
+                class="PricingScreenPrintSection__product-type"
+                :class="{
+                  [item.type]: true,
+                  active: product === item.product,
+                  disabled: !item.product
+                }"
+                @click="product = item.product">
+                {{ item.label }}
+              </div>
+            </div>
+          </div>
+          <div class="PricingScreenPrintSection__section">
+            <div class="PricingScreenPrintSection__section-title">
+              How many colours
+            </div>
+            <div class="PricingScreenPrintSection__section-content PricingScreenPrintSection__print-areas">
+              <div class="PricingScreenPrintSection__product-side">
+                <div class="PricingScreenPrintSection__product-side-info">
+                  <div class="PricingScreenPrintSection__product-side-icon-container">
+                    <transition
+                      name="appear-from-top"
+                      appear>
+                      <div
+                        :key="!!front.colors"
+                        class="PricingScreenPrintSection__product-side-icon front view-transition"
+                        :class="{
+                          [!!front.colors && front.printArea]: true,
+                          [productType]: true
+                        }"></div>
+                    </transition>
+                  </div>
+                  <span class="PricingScreenPrintSection__product-side-name">
+                    Front
+                  </span>
+                </div>
+                <div class="PricingScreenPrintSection__print-options">
+                  <multiselect
+                    v-model="frontColors"
+                    :options="colorOptions"
+                    :option-height="35"
+                    value="value"
+                    label="label"
+                    :allow-empty="false"
+                    class="labelless" />
+                </div>
+              </div>
+              <div class="PricingScreenPrintSection__product-side">
+                <div class="PricingScreenPrintSection__product-side-info">
+                  <div class="PricingScreenPrintSection__product-side-icon-container">
+                    <transition
+                      name="appear-from-top"
+                      appear>
+                      <div
+                        :key="!!back.colors"
+                        class="PricingScreenPrintSection__product-side-icon back view-transition"
+                        :class="{
+                          [!!back.colors && back.printArea]: true,
+                          [productType]: true
+                        }">
+                      </div>
+                    </transition>
+                  </div>
+                  <span class="PricingScreenPrintSection__product-side-name">
+                    Back
+                  </span>
+                </div>
+                <div class="PricingScreenPrintSection__print-options">
+                  <multiselect
+                    v-model="backColors"
+                    :options="colorOptions"
+                    :option-height="35"
+                    value="value"
+                    label="label"
+                    :allow-empty="false"
+                    class="labelless" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+      <transition name="from-left-to-right" appear>
+        <div class="col-12 PricingScreenPrintSection__pricing PricingScreenPrintSection__content-col view-transition">
+          <div class="PricingScreenPrintSection__section">
+            <div class="PricingScreenPrintSection__section-title">
+              If you order {{ amount }} Shirts
+            </div>
+            <div class="PricingScreenPrintSection__section-content">
+              <range v-model="amount" :min="126" :max="4000" />
+            </div>
+          </div>
+          <div class="PricingScreenPrintSection__section">
+            <div class="PricingScreenPrintSection__section-title">
+              Delivery
+            </div>
+            <div class="PricingScreenPrintSection__section-content">
+              <div class="form-row">
+                <postcode-select v-model="postcode" />
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="productPricing"
+            class="PricingScreenPrintSection__section">
+            <div class="PricingScreenPrintSection__section-title">
+              Your Quote
+            </div>
+            <div class="PricingScreenPrintSection__section-content">
+              <div class="form-row PricingScreenPrintSection__section-content-row">
+                <div class="PricingScreenPrintSection__section-content-label">
+                  Tees:
+                </div>
+                <div class="PricingScreenPrintSection__section-content-value">
+                  {{ productPricing.amount }} x {{ productPricing.products.products.price | price }} = {{ productPricing.products.products.totalPrice | price }}
+                </div>
+              </div>
+              <div class="form-row PricingScreenPrintSection__section-content-row">
+                <div class="PricingScreenPrintSection__section-content-label">
+                  Front setup:
+                </div>
+                <div class="PricingScreenPrintSection__section-content-value">
+                  {{ printsPricing.front.colors }} x {{ printsPricing.front.setupPrice | price }} = {{ printsPricing.front.totalSetupPrice | price }}
+                </div>
+              </div>
+              <div class="form-row PricingScreenPrintSection__section-content-row">
+                <div class="PricingScreenPrintSection__section-content-label">
+                  Front print:
+                </div>
+                <div class="PricingScreenPrintSection__section-content-value">
+                  {{ productPricing.amount }} x {{ printsPricing.front.price | price }} = {{ printsPricing.front.totalPrice | price }}
+                </div>
+              </div>
+              <div class="form-row PricingScreenPrintSection__section-content-row">
+                <div class="PricingScreenPrintSection__section-content-label">
+                  Back setup:
+                </div>
+                <div class="PricingScreenPrintSection__section-content-value">
+                  {{ printsPricing.back.colors }} x {{ printsPricing.back.setupPrice | price }} = {{ printsPricing.back.totalSetupPrice | price }}
+                </div>
+              </div>
+              <div class="form-row PricingScreenPrintSection__section-content-row">
+                <div class="PricingScreenPrintSection__section-content-label">
+                  Back print:
+                </div>
+                <div class="PricingScreenPrintSection__section-content-value">
+                  {{ productPricing.amount }} x {{ printsPricing.back.price | price }} = {{ printsPricing.back.totalPrice | price }}
+                </div>
+              </div>
+              <div
+                v-if="productPricing.shipping"
+                class="form-row PricingScreenPrintSection__section-content-row">
+                <div class="PricingScreenPrintSection__section-content-label">
+                  Delivery:
+                </div>
+                <div class="PricingScreenPrintSection__section-content-value">
+                  {{ productPricing.shipping.totalPrice | price }}
+                </div>
+              </div>
+              <div
+                v-if="isSelectedPrint"
+                class="form-actions space-between">
+                <div class="PricingScreenPrintSection__total-cost">
+                  <span class="PricingScreenPrintSection__section-content-label">
+                    Total cost:
+                  </span>
+                  <span class="PricingScreenPrintSection__total-cost-value">
+                    {{ productPricing.totalPrice | price }}
+                  </span>
+                </div>
+                <btn
+                  btn-class="green"
+                  btn-label="Go To Editor"
+                  @onclick="goTo(productEditorLink)">
+                </btn>
+              </div>
+              <div
+                v-if="isSelectedPrint"
+                class="form-row">
+                <span class="PricingScreenPrintSection__section-content-label">
+                  Inclusive of GST:
+                </span>
+                <span class="PricingScreenPrintSection__section-content-value">
+                  {{ productPricing.tax.totalPrice | price }}
+                </span>
+              </div>
+              <div
+                v-if="!isSelectedPrint"
+                class="PricingScreenPrintSection__warning">
+                Please choose at least one print location
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import { PRODUCT_TYPES, PRODUCT_TYPES_LIST } from '@lancom/shared/assets/js/constants/product';
+import productsPrice from '@lancom/shared/mixins/products-price';
+import Range from '@lancom/shared/components/common/range/range';
+import ContactUs from '@lancom/shared/components/asides/contact_us/contact-us';
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+
+export default {
+  name: 'PricingScreenPrintSection',
+  components: {
+    Range,
+    PostcodeSelect
+  },
+  mixins: [
+    productsPrice
+  ],
+  props: {
+    products: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      product: null,
+      colorOptions: [{
+        value: 0,
+        label: 'Unprinted'
+      }, {
+        value: 1,
+        label: '1 Colour'
+      }, {
+        value: 2,
+        label: '2 Colours'
+      }, {
+        value: 3,
+        label: '3 Colours'
+      }, {
+        value: 4,
+        label: '4 Colours'
+      }, {
+        value: 5,
+        label: '5 Colours'
+      }, {
+        value: 6,
+        label: '6 Colours'
+      }, {
+        value: 7,
+        label: '7 Colours'
+      }, {
+        value: 8,
+        label: '8 Colours'
+      }, {
+        value: 9,
+        label: '9 Colours'
+      }]
+    };
+  },
+  computed: {
+    productEditorLink() {
+      return `/${this.product.SKU}/${this.product.alias}/editor`;
+    },
+    frontColors: {
+      get() {
+        return this.colorOptions.find(option => this.front.colors === option.value);
+      },
+      set({ value }) {
+        this.front.colors = value;
+      }
+    },
+    backColors: {
+      get() {
+        return this.colorOptions.find(option => this.back.colors === option.value);
+      },
+      set({ value }) {
+        this.back.colors = value;
+      }
+    },
+    productTypes() {
+      return PRODUCT_TYPES_LIST.map(item => ({
+        ...item,
+        product: this.findProductByType(item.type)
+      }));
+    },
+    productType() {
+      const { productType } = this.product || {};
+      return productType?.alias;
+    },
+    isSelectedPrint() {
+      return this.front.colors > 0 || this.back.colors > 0;
+    }
+  },
+  created() {
+    this.screenPrint = true;
+    this.product = this.findProductByType(PRODUCT_TYPES.TEE);
+  },
+  methods: {
+    contactUs() {
+      this.$aside.show(ContactUs);
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+    findProductByType(type) {
+      return this.products.find(p => p.productType.alias === type);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-screen-printing';
+</style>

package/components/product/layouts/product_colors_selector/product-colors-selector.scss

@@ -0,0 +1,15 @@
+@import "@/assets/scss/variables";
+
+.ProductColorsSelector {
+  &__header {
+    display: flex;
+  }
+  &__selected-color {
+    &:before {
+      content: '\00a0';
+    }
+  }
+  &__select-all {
+    margin-top: 8px;
+  }
+}

package/components/product/layouts/product_colors_selector/product-colors-selector.vue

@@ -0,0 +1,55 @@
+<template>
+  <transition
+    appear
+    name="fade">
+    <slot ref="steps" v-bind="{ editableColor }">
+      <div class="ProductColorsSelector__wrapper view-transition">
+        <div class="ProductColorsSelector__header">
+          <h5 class="lc_semibold20 lc_black">
+            Colour Shown:
+          </h5>
+          <transition
+            name="slide-right-to-left">
+            <span
+              v-if="editableColor"
+              :key="editableColor.alias"
+              class="
+                lc_regular18
+                lc_grey1
+                ProductColorsSelector__selected-color
+                view-transition
+              ">
+              {{ editableColor.name }}
+            </span>
+          </transition>
+        </div>
+        <div class="ProductColorsSelector__content">
+          <product-colors-selector-options />
+        </div>
+      </div>
+    </slot>
+  </transition>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+import ProductColorsSelectorOptions from './product_colors_selector_options/product-colors-selector-options';
+
+const { mapGetters } = createNamespacedHelpers('product');
+
+export default {
+  name: 'ProductColorsSelector',
+  components: {
+    ProductColorsSelectorOptions
+  },
+  computed: {
+    ...mapGetters([
+      'editableColor'
+    ])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-colors-selector.scss';
+</style>

package/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options.scss

@@ -0,0 +1,67 @@
+@import "@/assets/scss/variables";
+
+.ProductColorsSelectorOptions {
+  &__wrapper {
+    padding-top: 12px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 28px);
+    grid-column-gap: 9px;
+    grid-row-gap: 9px;
+  }
+  &__color {
+    width: 28px;
+    height: 28px;
+    position: relative;
+    background-color: #FFFFFF;
+    &:before {
+      content: '';
+      cursor: pointer;
+      position: absolute;
+      z-index: 1;
+      top: -4px;
+      right: -4px;
+      bottom: -4px;
+      left: -4px;
+      border-radius: 13px;
+      border: 2px solid $grey_1;
+      transform: scale(0);
+      transition: transform .22s ease-in-out;
+    }
+    &-inner {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: 9px;
+      cursor: pointer;
+    }
+    &.selected {
+      &:before {
+        transform: scale(1);
+      }
+    }
+    &-selected-icon {
+      position: absolute;
+    }
+  }
+  &__products-count {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: center;  
+    span:not(:empty) {
+      background-color: white;
+      border-radius: 50%;
+      width: 16px;
+    }
+  }  
+}

package/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="ProductColorsSelectorOptions__wrapper">
+    <div
+      v-for="color in availableColors"
+      :key="color._id"
+      v-tooltip="color.name"
+      class="ProductColorsSelectorOptions__color"
+      :class="{ selected: editableColor === color }"
+      @click="toggleSelection(color)">
+      <product-color-image
+        :color="color"
+        class="ProductColorsSelectorOptions__color-inner">
+      </product-color-image>
+      <div
+        v-if="displayProductsCount"
+        class="ProductColorsSelectorOptions__products-count">
+        <span>{{ countColorProducts(color) || '' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+
+const { mapGetters, mapMutations, mapActions } = createNamespacedHelpers('product');
+
+export default {
+  name: 'ProductColorsSelector',
+  components: {
+    ProductColorImage
+  },
+  props: {
+    displayProductsCount: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'availableColors',
+      'template',
+      'editableColor',
+      'simpleProducts',
+      'templateColors'
+    ])
+  },
+  mounted() {
+    if (!this.templateColors.length && this.editableColor) {
+      this.selectDefault(this.editableColor.alias);
+    }
+  },
+  methods: {
+    ...mapMutations([
+      'addTemplateColor',
+      'removeTemplateColor',
+      'setEditableColor'
+    ]),
+    ...mapActions(['selectColor']),
+    selectDefault(alias) {
+      this.toggleSelection(this.availableColors.find(c => c.alias === alias));
+    },
+    toggleSelection({ _id }) {
+      this.selectColor(_id);
+    },
+    countColorProducts({ _id }) {
+      return this.simpleProducts.reduce((count, { color, amount }) => color._id === _id ? count + (amount || 0) : count, 0);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-colors-selector-options.scss';
+</style>

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

@@ -0,0 +1,24 @@
+@import "@/assets/scss/variables";
+@import "@lancom/shared/assets/scss/ui_kit";
+
+.ProductFabricAndSizeInfo {
+  &__header {
+    display: flex;
+  }
+  &__content {
+    padding-top: 20px;
+  }
+  &__table {
+    & + & {
+      margin-top: -1px;
+    }
+    th {
+      @extend .lc_medium16;
+      color: $black;
+    }
+    td {
+      @extend .lc_regular14;
+      color: $black;
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="ProductFabricAndSizeInfo__wrapper">
+    <div class="ProductFabricAndSizeInfo__header">
+      <h5 class="lc_semibold20 lc_black">
+        Fabric and Size info
+      </h5>
+    </div>
+    <div class="ProductFabricAndSizeInfo__content">
+      <table class="lc_table bordered ProductFabricAndSizeInfo__table">
+        <thead class="pull-left cell-padding">
+          <tr>
+            <th>
+              Additional Sizing Info
+            </th>
+          </tr>
+        </thead>
+        <tbody class="centered">
+          <tr>
+            <td>
+              {{ product.sizeInfo }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <table class="lc_table bordered ProductFabricAndSizeInfo__table">
+        <thead class="pull-left cell-padding">
+          <tr>
+            <th>
+              Additional Fabric Info
+            </th>
+          </tr>
+        </thead>
+        <tbody class="centered">
+          <tr>
+            <td>{{ product.fabricInfo }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ProductFabricAndSizeInfo',
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-fabric-and-size-info';
+</style>

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

@@ -0,0 +1,39 @@
+@import "@/assets/scss/variables";
+
+.ProductGallery {
+  &__wrapper {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 15px;
+    &:before {
+      content: '';
+      width: 0;
+      padding-bottom: 100%;
+      grid-row: 1 / 5;
+      grid-column: 1 / 5;
+    }
+  }
+  &__current {
+    grid-column: 1 / 5;
+    grid-row: 1 / 5;
+    background-color: $grey_3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity .2s ease-in-out;
+  }
+  &__thumbnail {
+    background-color: $grey_3;
+    cursor: pointer;
+    transition: opacity .2s ease-in-out;
+    &:not(.active) {
+      opacity: .4;
+    }
+  }
+  &__current,
+  &__thumbnail {
+    border: 1px solid $grey_2;
+  }
+}
+
+img {width: 100%; display: block;}