@lancom/shared 0.0.278 → 0.0.279

package/components/product/wizard/wizard_print_layers/wizard_print_layer/wizard-print-layer.vue

@@ -0,0 +1,210 @@
+<template>
+  <div style="display: contents">
+    <tr class="WizardPrintLayer__wrapper">
+      <td>
+        <div class="lc_regular14 hidden-sm-and-up">
+          Printable area
+        </div>
+        {{ layerPrintArea.name }}
+      </td>
+      <td>
+        <div class="lc_regular14 hidden-sm-and-up">
+          Print size
+        </div>
+        {{ layerPrintSize ? layerPrintSize.name : '-' }}
+      </td>
+      <td>
+        <div class="lc_regular14 hidden-sm-and-up">
+          Print type
+        </div>
+        {{ layerPrintType.name }}
+      </td>
+      <td>
+        <div class="lc_regular14 hidden-sm-and-up">
+          Print option
+        </div>
+        <v-popover
+          ref="popover"
+          trigger="hover"
+          :delay="{ show: 200, hide: 400 }"
+          popover-class="tooltip popover white">
+          <span
+            v-if="type === 'art'"
+            class="WizardPrintLayer__info-type">
+            <a
+              v-if="layer.file"
+              :href="layer.file.origin"
+              target="_blank">
+              Logo
+            </a>
+            <span v-else>
+              Logo
+            </span>
+          </span>
+          <span
+            v-else
+            class="WizardPrintLayer__info-type">
+            Text
+          </span>
+          <template slot="popover">
+            <div class="WizardPrintLayer__info">
+              <div
+                v-if="layer.type === 'text'"
+                class="WizardPrintLayer__info-text">
+                <div class="WizardPrintLayer__info-text-item">
+                  <div class="WizardPrintLayer__info-text-title">
+                    Text
+                  </div>
+                  <div class="WizardPrintLayer__info-text-content">
+                    <span>{{ layer.copy }}</span>
+                  </div>
+                </div>
+                <div
+                  v-if="layer.notes"
+                  class="WizardPrintLayer__info-text-item">
+                  <div class="WizardPrintLayer__info-text-title">
+                    Notes
+                  </div>
+                  <div class="WizardPrintLayer__info-text-content">
+                    <span>{{ layer.notes }}</span>
+                  </div>
+                </div>
+              </div>
+              <div
+                v-else-if="layer.type === 'art'">
+                <div class="WizardPrintLayer__info-art">
+                  <a
+                    :href="layer.file.origin"
+                    target="_blank">
+                    <img
+                      v-if="layer.url"
+                      :src="layer.url" />
+                    <span v-else>
+                      <i class="icon-blank"></i> Download logo
+                    </span>
+                  </a>
+                </div>
+                <div
+                  v-if="layer.notes"
+                  class="WizardPrintLayer__info-text">
+                  <div class="WizardPrintLayer__info-text-item">
+                    <div class="WizardPrintLayer__info-text-title">
+                      Notes
+                    </div>
+                    <div class="WizardPrintLayer__info-text-content">
+                      <span>{{ layer.notes }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </v-popover>
+      </td>
+      <td>
+        <div class="lc_regular14 hidden-sm-and-up">
+          Price
+        </div>
+        <div>
+          {{ layerPrintPricing | pricingRange }}
+        </div>
+        <v-popover
+          ref="popover"
+          trigger="hover"
+          :delay="{ show: 200, hide: 400 }"
+          popover-class="tooltip popover white"
+          class="WizardPrintLayer__layer-price">
+          <slot name="see-pricing">
+            <span class="lc_regular12 lc_gray-main">
+              see prices
+            </span>
+          </slot>
+          <template slot="popover">
+            <pricing-discounts-table :prices="layerPrintPricing" />
+          </template>
+        </v-popover>
+      </td>
+      <td v-if="editable && !layer.required">
+        <span
+          class="WizardPrintLayer__control"
+          @click="$emit('edit')">
+          <i class="icon-edit"></i>
+        </span>
+        <span
+          class="WizardPrintLayer__control"
+          @click="$emit('delete')">
+          <i class="icon-delete"></i>
+        </span>
+      </td>
+    </tr>
+    <tr v-if="layer.required">
+      <td colspan="6">
+        <div class="WizardPrintLayer__layer-form">
+          <wizard-text-or-logo-form :layer="layer" />
+        </div>
+      </td>
+    </tr>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { pricingRange } from '@lancom/shared/assets/js/utils/filters';
+import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
+import WizardTextOrLogoForm from './../../wizard_print_text_or_logo/wizard_text_or_logo_form/wizard-text-or-logo-form';
+
+export default {
+  name: 'WizardPrintLayer',
+  components: {
+    PricingDiscountsTable,
+    WizardTextOrLogoForm
+  },
+  filters: {
+    pricingRange
+  },
+  props: {
+    layer: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['product']),
+    type() {
+      return this.layer.type;
+    },
+    productPrintAreas() {
+      return this.product.printAreas || [];
+    },
+    layerPrintArea() {
+      return this.productPrintAreas.find(({ _id }) => _id === this.layer.printArea);
+    },
+    layerPrintSizes() {
+      const { printSize, sizes = [] } = this.layerPrintArea;
+      return [
+        printSize,
+        ...sizes
+          .map(({ printSize }) => printSize)
+          .filter(({ _id }) => _id !== printSize._id)
+      ];
+    },
+    layerPrintType() {
+      return this.product.printTypes.find(({ _id }) => _id === this.layer.printType);
+    },
+    layerPrintSize() {
+      return this.layerPrintSizes.find(({ _id }) => _id === this.layer.printSize);
+    },
+    layerPrintPricing() {
+      const printArea = this.layerPrintType.printAreas.find(({ printSizes }) => printSizes.map(({ _id }) => _id).includes(this.layer.printSize)) || this.layerPrintType.printAreas[0];
+      return printArea.printCost;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print-layer';
+</style>

package/components/product/wizard/wizard_print_review/wizard-print-review.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="WizardPrintReview__wrapper">
+    <wizard-print-layers :layers="layers">
+      <template #see-pricing>
+        <span
+          style="position: absolute; left: 0; line-height: 16px; right: 0; font-style: italic; margin-top: -5px;"
+          class="lc_regular12 lc_gray-main lc_bold">
+          The final price is based on quantity of products printed, and will be calculated once product quantities are added below
+        </span>
+      </template>
+    </wizard-print-layers>
+    <div class="ProgressSteps__controls">
+      <btn
+        btn-class="white"
+        btn-label="BACK"
+        @onclick="$emit('prev')">
+      </btn>
+      <btn
+        btn-class="green"
+        btn-label="Add to order"
+        @onclick="goNext">
+        <i
+          slot="icon-after"
+          class="icon-arrow-right"></i>
+      </btn>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
+import WizardPrintLayers from './../wizard_print_layers/wizard-print-layers';
+
+export default {
+  name: 'WizardPrintReview',
+  components: {
+    WizardPrintLayers
+  },
+  computed: {
+    ...mapGetters('layers', ['editableLayers']),
+    layers() {
+      return this.editableLayers;
+    }
+  },
+  methods: {
+    ...mapMutations('product', ['addTemplateLayer', 'clearWizardData']),
+    ...mapMutations('layers', ['setEditableLayers']),
+    goNext() {
+      this.editableLayers.forEach(editableLayer => {
+        gtm.push({
+          event: 'complete_printing_wizard',
+          type: editableLayer.type,
+          text: editableLayer.copy,
+          file: editableLayer.file,
+          notes: editableLayer.notes
+        });
+        this.addTemplateLayer(editableLayer);
+      });
+      this.clearWizardData();
+      this.setEditableLayers([]);
+
+      this.$emit('next');
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print-review';
+</style>

package/components/product/wizard/wizard_print_size/wizard-print-size.scss

@@ -0,0 +1,68 @@
+@import "@/assets/scss/variables";
+
+.WizardPrintSize {
+  &__title {
+    font-weight: 800;
+    font-size: 28px;
+    line-height: 38px;
+    color: $black; 
+    margin-bottom: 26px; 
+  }
+  &__area {
+    margin-bottom: 20px;
+  }
+  &__sizes {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin: -10px 0 0 -10px;
+    width: calc(100% + 10px);
+  }
+  &__size {
+    width: 140px;
+    height: 122px;
+    margin: 10px 0 0 10px;
+    border: 1px solid $grey_3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    position: relative;
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 20px;
+      height: 20px;
+      background: $gray;
+      border: 1px solid $grey_2;
+      border-radius: 10px;
+    }
+    &:hover {
+      border: 1px solid $green;
+    }
+    &--selected {
+      border: 1px solid $green;
+      &::after {
+        background-color: $green;
+        border: 1px solid $green;
+        background-image: url(/static/icons/checked.svg);
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
+    }
+    &-name {
+      font-size: 16px;
+      line-height: 22px;
+      margin-top: 10px;
+      font-weight: bold;
+    }
+  }
+  &__see-price {
+    margin-top: 5px;
+    font-size: 12px;
+    color: $gray_main;
+  }
+}

package/components/product/wizard/wizard_print_size/wizard-print-size.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="WizardPrintSize__wrapper">
+    <div class="WizardPrintSize__areas">
+      <div
+        v-for="(editablePrintArea, index) in editablePrintAreas"
+        :key="index"
+        class="WizardPrintSize__area">
+        <div class="WizardPrintSize__title">
+          {{ editablePrintArea.name }}
+        </div>
+        <wizard-print-area-print-size :editable-print-area="editablePrintArea" />
+      </div>
+    </div>
+    <div class="ProgressSteps__controls">
+      <btn
+        btn-class="white"
+        btn-label="BACK"
+        @onclick="$emit('prev')">
+      </btn>
+      <btn
+        btn-class="green"
+        btn-label="NEXT"
+        @onclick="$emit('next')">
+        <i
+          slot="icon-after"
+          class="icon-arrow-right"></i>
+      </btn>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import WizardPrintAreaPrintSize from './wizard_print_area_print_size/wizard-print-area-print-size';
+
+export default {
+  name: 'WizardPrintSize',
+  components: {
+    WizardPrintAreaPrintSize
+  },
+  computed: {
+    ...mapGetters('product', ['editablePrintAreas'])
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print-size';
+</style>

package/components/product/wizard/wizard_print_size/wizard_print_area_print_size/wizard-print-area-print-size.scss

@@ -0,0 +1,65 @@
+@import "@/assets/scss/variables";
+
+.WizardPrintAreaPrintSize {
+  &__title {
+    font-weight: 800;
+    font-size: 28px;
+    line-height: 38px;
+    color: $black;  
+    margin-bottom: 26px; 
+  }
+  &__sizes {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin: -10px 0 0 -10px;
+    width: calc(100% + 10px);
+  }
+  &__size {
+    width: 140px;
+    height: 122px;
+    margin: 10px 0 0 10px;
+    border: 1px solid $grey_3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    position: relative;
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 20px;
+      height: 20px;
+      background: $gray;
+      border: 1px solid $grey_2;
+      border-radius: 10px;
+    }
+    &:hover {
+      border: 1px solid $green;
+    }
+    &--selected {
+      border: 1px solid $green;
+      &::after {
+        background-color: $green;
+        border: 1px solid $green;
+        background-image: url(/static/icons/checked.svg);
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
+    }
+    &-name {
+      font-size: 16px;
+      line-height: 22px;
+      margin-top: 10px;
+      font-weight: bold;
+    }
+  }
+  &__see-price {
+    margin-top: 5px;
+    font-size: 12px;
+    color: $gray_main;
+  }
+}

package/components/product/wizard/wizard_print_size/wizard_print_area_print_size/wizard-print-area-print-size.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="WizardPrintAreaPrintSize__wrapper">
+    <div class="WizardPrintAreaPrintSize__sizes">
+      <div
+        v-for="(size, index) in sizes"
+        :key="index"
+        class="WizardPrintAreaPrintSize__size"
+        :class="{
+          'WizardPrintAreaPrintSize__size--selected': isSelectedSize(size)
+        }"
+        @click="selectPrintAreaSize(size)">
+        <div class="WizardPrintAreaPrintSize__size-name">
+          {{ size.name }}
+        </div>
+        <div class="WizardPrintAreaPrintSize__type-price mt-3">
+          <span>
+            {{ getSizePricing(size) | pricingRange }}
+          </span>
+        </div>
+        <v-popover
+          ref="popover"
+          trigger="hover"
+          :delay="{ show: 200, hide: 400 }"
+          popover-class="tooltip popover white"
+          class="WizardPrintAreaPrintSize__see-price">
+          see prices
+          <template slot="popover">
+            <pricing-table
+              :items="getSizePrintTypes(size)"
+              pricing-attr="sizePrintArea.printCost" />
+          </template>
+        </v-popover>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex';
+import { pricingRange } from '@lancom/shared/assets/js/utils/filters';
+import { getPrintAreaSizes } from '@lancom/shared/assets/js/utils/prints';
+import PricingTable from '@lancom/shared/components/common/pricing_table/pricing-table';
+
+export default {
+  name: 'WizardPrintAreaPrintSize',
+  components: {
+    PricingTable
+  },
+  filters: {
+    pricingRange
+  },
+  props: {
+    editablePrintArea: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['product', 'selectedPrintAreas', 'availablePrintTypes']),
+    selectedPrintArea() {
+      return this.selectedPrintAreas[this.editablePrintArea._id];
+    },
+    sizes() {
+      return getPrintAreaSizes(this.editablePrintArea);
+    }
+  },
+  mounted() {
+    if (!this.selectedPrintArea) {
+      const first = this.sizes[0];
+      if (first) {
+        this.selectPrintAreaSize(first);
+      }
+    }
+  },
+  methods: {
+    ...mapMutations('product', ['setSelectedPrintArea']),
+    isSelectedSize(printArea) {
+      return this.selectedPrintArea?._id === printArea._id;
+    },
+    selectPrintAreaSize(size) {
+      this.setSelectedPrintArea({ printArea: this.editablePrintArea._id, size });
+    },
+    getSizePrintTypes({ _id }) {
+      return this.product.printTypes
+        .map(type => ({
+          ...type,
+          sizePrintArea: type.printAreas.find(({ printSizes }) => printSizes.map(({ _id }) => _id).includes(_id))
+        }))
+        .filter(printType => this?.availablePrintTypes.includes(printType.type) && !!printType.sizePrintArea);
+    },
+    getSizePricing(size) {
+      const sizePrintTypes = this.getSizePrintTypes(size);
+      return sizePrintTypes.reduce((pricing, { sizePrintArea }) => {
+        return [
+          ...pricing,
+          ...sizePrintArea.printCost
+        ];
+      }, []);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print-area-print-size';
+</style>

package/components/product/wizard/wizard_print_text_or_logo/wizard-print-text-or-logo.scss

@@ -0,0 +1,65 @@
+@import "@/assets/scss/variables";
+
+.WizardPrintTextOrLogo {
+  &__title {
+    font-weight: 800;
+    font-size: 28px;
+    line-height: 38px;
+    color: $black;  
+    margin-bottom: 26px; 
+  }
+  &__sizes {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin: -10px 0 0 -10px;
+    width: calc(100% + 10px);
+  }
+  &__size {
+    width: 140px;
+    height: 122px;
+    margin: 10px 0 0 10px;
+    border: 1px solid $grey_3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    position: relative;
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 20px;
+      height: 20px;
+      background: $gray;
+      border: 1px solid $grey_2;
+      border-radius: 10px;
+    }
+    &:hover {
+      border: 1px solid $green;
+    }
+    &--selected {
+      border: 1px solid $green;
+      &::after {
+        background-color: $green;
+        border: 1px solid $green;
+        background-image: url(/static/icons/checked.svg);
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
+    }
+    &-name {
+      font-size: 16px;
+      line-height: 22px;
+      margin-top: 10px;
+      font-weight: bold;
+    }
+  }
+  &__see-price {
+    margin-top: 5px;
+    font-size: 12px;
+    color: $gray_main;
+  }
+}