@lancom/shared 0.0.278 → 0.0.280

package/components/product/wizard/wizard_print_layers/wizard-print-layers.scss

@@ -0,0 +1,60 @@
+@import "@/assets/scss/variables";
+
+.WizardPrintLayers {
+  &__wrapper {
+    position: relative;
+  }
+  &__title {
+    font-weight: 800;
+    font-size: 28px;
+    line-height: 38px;
+    color: $black;  
+    margin-bottom: 26px; 
+  }
+  &__table {
+    text-align: center;
+    @media (max-width: $bp-extra-small-max) {
+      width: 100%;
+    }
+    thead {
+      @media (max-width: $bp-extra-small-max) {
+        display: none;
+      }
+    }
+    tr {
+      @media (max-width: $bp-extra-small-max) {
+        border-top: 1px solid $gray;
+        padding-top: 20px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    td,
+    th {
+      padding: 3px 6px;
+    }
+    th {
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 22px;
+      color: $black;
+    }
+    td {
+      font-weight: bold;
+      font-size: 17px;
+      line-height: 27px;
+      color: $black;
+    }
+  }
+  &__modify {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    &-delete {
+      cursor: pointer;
+      margin-left: 10px;
+    }
+  }
+}

package/components/product/wizard/wizard_print_layers/wizard-print-layers.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="WizardPrintLayers__wrapper">
+    <table class="WizardPrintLayers__table">
+      <thead>
+        <tr>
+          <th>
+            Printable area
+          </th>
+          <th>
+            Print size
+          </th>
+          <th>
+            Print type
+          </th>
+          <th>
+            Print option
+          </th>
+          <th>
+            Price
+          </th>
+          <th></th>
+        </tr>
+      </thead>
+      <wizard-print-layer
+        v-for="(layer, index) in layers"
+        :key="index"
+        :layer="layer"
+        :editable="editable"
+        @edit="$emit('edit', layer)"
+        @delete="$emit('delete', layer)">
+      </wizard-print-layer>
+      <slot name="see-pricing"></slot>
+    </table>
+  </div>
+</template>
+
+<script>
+import WizardPrintLayer from './wizard_print_layer/wizard-print-layer';
+
+export default {
+  name: 'WizardPrintLayers',
+  components: {
+    WizardPrintLayer
+  },
+  props: {
+    layers: {
+      type: Array,
+      required: true
+    },
+    editable: {
+      type: Boolean
+    }
+  },
+  computed: {
+    hasSingleLayer() {
+      return this.layers.length === 1;
+    },
+    isMultipleLayers() {
+      return this.layers.length > 1;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print-layers';
+</style>

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

@@ -0,0 +1,47 @@
+@import "@/assets/scss/variables";
+
+.WizardPrintLayer {
+  &__wrapper {
+    a {
+      text-decoration: none;
+      color: $black;
+    }
+  }
+  &__info {
+    width: 300px;
+    &-type {
+      text-transform: uppercase;
+    }
+    &-text {
+      &-item {
+        margin-bottom: 10px;
+        text-align: left;
+      }
+      &-title {
+        font-size: 12px;
+        color: $grey_1;
+        margin-bottom: 5px;
+      }
+      &-content {
+        font-size: 14px;
+        color: $black;
+        white-space: pre;
+      }
+    }
+    &-art {
+      img {
+        width: 100%;
+        margin: 10px 0;
+      }
+      a {
+        text-decoration: none;
+        color: $black;
+      }
+    }
+  }
+  &__layer-form {
+    margin: 20px 0;
+    // padding-bottom: 20px;
+    // border-bottom: 1px solid $gray;
+  }
+}

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;
+  }
+}