@lancom/shared 0.0.62 → 0.0.66

package/components/editor/editor_layers/editor_layers_toolbar/editor-layers-toolbar.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="EditorLayersToolbar__wrapper">
+    <div
+      class="EditorLayersToolbar__option"
+      @click="addTextLayer">
+      <i class="icon-layer-text EditorLayersToolbar__option-icon"></i>
+      <div class="lc_black">
+        Add text
+      </div>
+      <div class="lc_regular14 lc_grey1 mt-5 hidden-sm-and-down">
+        Create a text-based design
+      </div>
+      <v-popover
+        trigger="hover"
+        class="EditorLayersToolbar__popover hidden-sm-and-down">
+        <i class="icon-info-circled EditorLayersToolbar__info"></i>
+        <template slot="popover">
+          <p>add any word or phrase to your garment. custom font style, colour and size or upload your own</p>
+        </template>
+      </v-popover>
+    </div>
+
+    <file-uploader
+      :multiple="false"
+      :url="`image/editor/${shop._id}/${product._id}`"
+      @onuploaded="handleUploaded">
+      <div
+        slot="toggle"
+        class="EditorLayersToolbar__option">
+        <i class="icon-layer-art EditorLayersToolbar__option-icon"></i>
+        <div class="lc_black">
+          Add art
+        </div>
+        <div class="lc_regular14 lc_grey1 mt-5 hidden-sm-and-down">
+          Create a image-based design
+        </div>
+        <v-popover
+          trigger="hover"
+          class="EditorLayersToolbar__popover hidden-sm-and-down">
+          <i class="icon-info-circled EditorLayersToolbar__info"></i>
+          <template slot="popover">
+            <p>upload your art in jpg, gif, png, svg, pdf, eps or ai. other file types upon request.</p>
+          </template>
+        </v-popover>
+      </div>
+      <template v-slot:progress="{ progress }">
+        <div
+          v-if="progress"
+          class="EditorLayersToolbar__option-progress">
+          <div
+            :style="{ width: `${progress}%`}"
+            class="EditorLayersToolbar__option-progress-indicator"></div>
+          <spinner v-if="progress >= 100" background="white" style="margin-top: 50px" />
+        </div>
+      </template>
+    </file-uploader>
+
+    <div
+      class="EditorLayersToolbar__option"
+      @click="openPrintTemplates()">
+      <i class="icon-layer-templates EditorLayersToolbar__option-icon"></i>
+      <div class="lc_black">
+        Templates
+      </div>
+      <div class="lc_regular14 lc_grey1 mt-5 hidden-sm-and-down">
+        Get inspired
+      </div>
+      <v-popover
+        trigger="hover"
+        class="EditorLayersToolbar__popover hidden-sm-and-down">
+        <i class="icon-info-circled EditorLayersToolbar__info"></i>
+        <template slot="popover">
+          <p>Start your design from our premade templates</p>
+        </template>
+      </v-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers, mapGetters } from 'vuex';
+import modals from '@lancom/shared/mixins/modals';
+
+const { mapActions, mapMutations } = createNamespacedHelpers('product');
+
+export default {
+  name: 'EditorLayersToolbar',
+  mixins: [
+    modals
+  ],
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('product', ['product'])
+  },
+  methods: {
+    ...mapActions(['createLayer']),
+    ...mapMutations(['setSelectedLayerField']),
+    async addTextLayer() {
+      const layer = await this.createLayer({ type: 'text' });
+      this.$emit('layer-added', { layer, toEditMode: true });
+    },
+    async handleUploaded({ url, size }) {
+      const layer = await this.createLayer({ type: 'art', url, size });
+      this.$emit('layer-added', { layer, toEditMode: false });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-layers-toolbar.scss';
+</style>

package/components/editor/editor_pricing/editor-pricing.scss

@@ -0,0 +1,56 @@
+@import "@lancom/shared/assets/scss/ui_kit";
+@import "@/assets/scss/variables";
+.EditorPricing {
+  &__main {
+    padding: 16px 20px;
+    border: 1px solid $grey_3;
+    color: $grey_1;
+    &-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    &-alert {
+      @extend .lc_medium16;
+      padding: 12px 20px;
+      margin: -16px -20px 18px -20px;
+      border-radius: 0 0 5px 5px;
+      background-color: $green;
+      color: $white_high_emphasis;
+      box-shadow: 0px 0px 30px rgba(75, 75, 75, 0.1);
+      @media (max-width: $bp-medium-max) {
+        font-size: 10px;
+      }
+      @media (max-width: $bp-large-max) {
+        font-size: 12px;
+      }
+      a {
+        color: $white_high_emphasis;
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+  &__toggle-details {
+    color: $green;
+    cursor: pointer;
+    user-select: none;
+  }
+  &__details {
+    margin-top: 10px;
+    &-table {
+      thead {
+        background-color: $grey_3;
+      }
+      &, tr, td {
+        border: 1px solid $grey_3;
+;
+      }
+    }
+  }
+  &__hoverable {
+    border-bottom: 1px dashed $grey_1;
+    cursor: help
+  }
+}

package/components/editor/editor_pricing/editor-pricing.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="EditorPricing__wrapper">
+    <div class="EditorPricing__main">
+      <!-- no qty, no layers -->
+      <fragment v-if="!hasUsedSimpleProducts && !layers.length">
+        <div class="EditorPricing__main-alert">
+          <i class="icon-attention-circled"></i>
+          <a href="#" @click.prevent="focusOnDefaultProduct()">Update quantities</a> and enter text or upload art to show cost
+        </div>
+        <div class="EditorPricing__main-row">
+          <div class="lc_regular14 EditorPricing__main-col">
+            Cost per unit: &mdash;
+          </div>
+          <div class="lc_regular14 EditorPricing__main-col">
+            Total Cost: &mdash;
+          </div>
+        </div>
+      </fragment>
+
+      <!-- has qty, no layers -->
+      <fragment v-else-if="hasUsedSimpleProducts && !layers.length">
+        <div class="EditorPricing__main-alert">
+          <i class="icon-attention-circled"></i>
+          Upload art or enter text to show total cost
+        </div>
+        <div class="EditorPricing__main-row">
+          <div class="lc_regular14 EditorPricing__main-col">
+            Cost per unit:
+            <b v-if="productPricing">
+              {{ productPricing.products.price | price }}
+            </b>
+            (excluding print)
+          </div>
+          <div class="lc_regular14 EditorPricing__main-col">
+            Total Cost: &mdash;
+          </div>
+        </div>
+      </fragment>
+      <!-- no qty, has layers -->
+      <fragment v-else-if="!hasUsedSimpleProducts && layers.length">
+        <div class="EditorPricing__main-alert">
+          <i class="icon-attention-circled"></i>
+          <a href="#" @click.prevent="focusOnDefaultProduct()">Update quantities</a> to show total cost
+        </div>
+        <div class="EditorPricing__main-row">
+          <div class="lc_regular14 EditorPricing__main-col">
+            Cost per unit:
+            <b v-if="productPricing">
+              {{ productPricing.products.price | price }}
+            </b>
+            (excluding garment cost)
+          </div>
+          <div class="lc_regular14 EditorPricing__main-col">
+            Total Cost: &mdash;
+          </div>
+        </div>
+      </fragment>
+      <!-- has qty, has layers -->
+      <fragment v-else>
+        <div class="EditorPricing__main-row">
+          <div class="lc_regular14 EditorPricing__main-col">
+            Cost per unit:
+            <b>{{ productPricing.products.price | price }}</b>
+          </div>
+          <div class="lc_regular14 EditorPricing__main-col">
+            Total Quantity:
+            <b>{{ productPricing.amount }}</b>
+          </div>
+        </div>
+        <div class="EditorPricing__main-row">
+          <div class="EditorPricing__main-col"></div>
+          <div class="lc_regular16 EditorPricing__main-col">
+            Total Cost:
+            <span class="lc_semibold22">
+              {{ productPricing.totalPrice | price }}
+            </span>
+          </div>
+        </div>
+        <div class="EditorPricing__main-row">
+          <div
+            class="lc_medium16 EditorPricing__main-col EditorPricing__toggle-details"
+            @click="toggleDetails">
+            {{ showDetails ? 'Hide' : 'Show' }} detail
+          </div>
+          <div class="lc_regular14 EditorPricing__main-col">
+            Incl. tax ({{ productPricing.tax.percent }}) {{ productPricing.tax.totalPrice | price }}
+          </div>
+        </div>
+      </fragment>
+    </div>
+    <div
+      v-if="showDetails"
+      class="EditorPricing__details">
+      <table class="lc_table EditorPricing__details-table">
+        <thead class="centered">
+          <tr class="highlighted">
+            <th colspan="6">
+              Tees
+            </th>
+            <th colspan="6">
+              Sizes
+            </th>
+            <th>Cost</th>
+            <th>Total Cost</th>
+          </tr>
+        </thead>
+        <tbody class="centered">
+          <tr
+            v-for="([groupPrice, group], index) in groupedProductsByPrice"
+            :key="index">
+            <td colspan="6">
+              {{ group.amount }}
+            </td>
+            <td colspan="6">
+              ({{ group.sizes | sizesRange }})
+            </td>
+            <td>
+              <v-popover
+                trigger="hover"
+                popover-class="tooltip popover white no-paddings"
+                :delay="{ show: 200, hide: 400 }">
+                <span class="EditorPricing__hoverable">
+                  {{ groupPrice | price }}
+                </span>
+                <template slot="popover">
+                  <pricing-discounts-table
+                    :prices="group.pricing"
+                    :amount="productPricing.amount" />
+                </template>
+              </v-popover>
+            </td>
+            <td>{{ group.totalPrice | price }}</td>
+          </tr>
+          <tr class="highlighted">
+            <td colspan="13">
+              Tee Subtotal:
+            </td>
+            <td>{{ productPricing.products.products.totalPrice | price }}</td>
+          </tr>
+        </tbody>
+        <thead class="centered">
+          <tr class="highlighted">
+            <th colspan="4">
+              Prints
+            </th>
+            <th colspan="4">
+              Quantity
+            </th>
+            <th colspan="4">
+              Sizes
+            </th>
+            <th>Cost</th>
+            <th>Total Cost</th>
+          </tr>
+        </thead>
+        <tbody class="centered">
+          <tr
+            v-for="([printSide, group], index) in groupedProductsByPrintsPrice"
+            :key="index">
+            <td colspan="4">
+              {{ printSide }}
+            </td>
+            <td colspan="4">
+              {{ group.amount }}
+            </td>
+            <td colspan="4">
+              {{ group.sizes | printsRange }}
+            </td>
+            <td>
+              <v-popover
+                trigger="hover"
+                popover-class="tooltip popover white no-paddings"
+                :delay="{ show: 200, hide: 400 }">
+                <span class="EditorPricing__hoverable">
+                  {{ group.price | price }}
+                </span>
+                <template slot="popover">
+                  <pricing-discounts-table
+                    :prices="printsPricing[group.sizes[0]]"
+                    :amount="productPricing.amount" />
+                </template>
+              </v-popover>
+            </td>
+            <td>{{ group.totalPrice | price }}</td>
+          </tr>
+          <tr class="highlighted">
+            <td colspan="13">
+              Prints Subtotal:
+            </td>
+            <td>{{ productPricing.products.prints.totalPrice | price }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import debounce from 'lodash.debounce';
+import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
+
+import { EventBus } from '@lancom/shared/assets/js/utils/event-bus';
+import { price, sizesRange, printsRange, tax } from '@lancom/shared/assets/js/utils/filters';
+import { groupProductsSizesByPrice, groupProductsPrintsByPrintArea } from '@lancom/shared/assets/js/utils/products-grouping';
+
+export default {
+  name: 'EditorPricing',
+  filters: {
+    price,
+    tax,
+    sizesRange,
+    printsRange
+  },
+  components: {
+    PricingDiscountsTable
+  },
+  data() {
+    return {
+      price: null,
+      showDetails: false,
+      calculatePriceWithDebounce: debounce(() => this.calculateProductPrice(this.shop), 500)
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('product', [
+      'defaultSimpleProduct',
+      'usedSimpleProducts',
+      'productPricing',
+      'layers',
+      'selectedPrintAreas',
+      'printsPricing'
+    ]),
+    hasUsedSimpleProducts() {
+      return this.usedSimpleProducts.length > 0;
+    },
+    products() {
+      return this.hasUsedSimpleProducts
+        ? this.usedSimpleProducts
+        : [this.defaultSimpleProduct];
+    },
+    groupedProductsByPrice() {
+      return this.productPricing
+        ? groupProductsSizesByPrice(
+          this.products,
+          this.productPricing.products
+        )
+        : [];
+    },
+    hasGroupedProductsByPrintsPrice() {
+      return this.groupedProductsByPrintsPrice.length > 0;
+    },
+    groupedProductsByPrintsPrice() {
+      return this.productPricing
+        ? groupProductsPrintsByPrintArea(
+          this.products,
+          this.productPricing.products
+        )
+        : [];
+    }
+  },
+  watch: {
+    layers() {
+      this.calculatePriceWithDebounce();
+      if (!this.layers.length) {
+        this.showDetails = false;
+      }
+    },
+    usedSimpleProducts() {
+      this.calculatePriceWithDebounce();
+      if (!this.hasUsedSimpleProducts) {
+        this.showDetails = false;
+      }
+    },
+    selectedPrintAreas() {
+      this.calculatePriceWithDebounce();
+    }
+  },
+  mounted() {
+    if (this.usedSimpleProducts.length > 0) {
+      this.calculatePriceWithDebounce();
+    }
+  },
+  methods: {
+    ...mapActions('product', [
+      'calculateProductPrice'
+    ]),
+    ...mapMutations('product', [
+      'setSelectedTab'
+    ]),
+    toggleDetails() {
+      this.showDetails = !this.showDetails;
+    },
+    focusOnDefaultProduct() {
+      this.setSelectedTab('product');
+      EventBus.$emit('focus-on-default-product');
+      setTimeout(() => {
+        const input = document.querySelector('.ProductSizeSelectorColorCell__wrapper input');
+        if (input) {
+          input.focus();
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-pricing';
+</style>

package/components/editor/editor_print_area_options/editor-print-area-options.scss

@@ -0,0 +1,28 @@
+@import "@/assets/scss/variables";
+
+.EditorPrintAreaOptions {
+  &__wrapper {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 8px;
+    grid-row-gap: 8px;
+    padding: 8px 0;
+    &.singleRow {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 2px;
+    background-color: $light_gray;
+    cursor: pointer;
+    transition: background-color .22s ease-in-out;
+    &--no-print {
+      grid-column: 1/3;
+      grid-row: 3/3;
+    }
+  }
+}

package/components/editor/editor_print_area_options/editor-print-area-options.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="EditorPrintAreaOptions__wrapper"
+    :class="{ singleRow, allowNoPrint }">
+    <div
+      v-for="(option, index) in options"
+      :key="index"
+      class="EditorPrintAreaOptions__option"
+      :class="{
+        'EditorPrintAreaOptions__option--no-print': !option.value
+      }">
+      <editor-print-area-option
+        :option="option"
+        :product="product"
+        :selected="
+          (option.value === selected) ||
+            (option.suboptions && option.value.includes(selected))
+        "
+        @select="select"
+        @option-mouseover="$emit('option-mouseover', $event)"
+        @option-mouseleave="$emit('option-mouseleave', $event)" />
+    </div>
+  </div>
+</template>
+
+<script>
+import EditorPrintAreaOption from './editor_print_area_option/editor-print-area-option';
+
+export default {
+  name: 'EditorPrintAreaOptions',
+  components: {
+    EditorPrintAreaOption
+  },
+  props: {
+    selected: {
+      type: String
+    },
+    side: {
+      type: String,
+      required: true
+    },
+    product: {
+      type: Object,
+      required: true
+    },
+    singleRow: {
+      type: Boolean,
+      default: true
+    },
+    allowNoPrint: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      options: []
+    };
+  },
+  watch: {
+    side() {
+      this.setOptions();
+    }
+  },
+  mounted() {
+    this.setOptions();
+  },
+  methods: {
+    setOptions() {
+      const options = this.getProductOptions().filter(({ sides }) => sides.includes(this.side));
+      this.options = this.allowNoPrint ? [...options, { label: 'No Print' }] : options;
+    },
+    select(value) {
+      this.$emit('select', value);
+    },
+    getProductOptions() {
+      const groupItemToOption = ({ printArea, name }) => ({ value: printArea.alias, label: name });
+      return (this.product.productType.printGroups || [])
+        .map(group => ({
+          ...groupItemToOption(group),
+          sides: group.sides,
+          suboptions: (group.items || []).map(i => ({ ...groupItemToOption(i), sides: group.sides }))
+        }));
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-print-area-options';
+</style>

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.scss

@@ -0,0 +1,28 @@
+@import "@/assets/scss/variables";
+
+.EditorPrintAreaOption {
+  &__wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  &__content {
+    text-align: center;
+    padding: 8px 0;
+    &:hover {
+      background-color: $green_lighter;
+    }
+    &.selected {
+      background-color: $green;
+    }
+  }
+  &__suboptions {
+    position: absolute;
+    bottom: 100%;
+    width: 100%;
+    background-color: $grey_4;
+  }
+  &__suboptions &__content {
+    padding: 12px 0;
+  }
+}