@lancom/shared 0.0.278 → 0.0.279

package/components/product/wizard/wizard_print/wizard-print.scss

@@ -0,0 +1,94 @@
+@import "@/assets/scss/variables";
+
+.WizardPrint {
+  &__title {
+    font-weight: 800;
+    font-size: 28px;
+    line-height: 38px;
+    color: $black;  
+    margin-bottom: 26px; 
+  }
+  &__items {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin: -10px 0 0 -10px;
+    width: calc(100% + 10px);
+  }
+  &__item {
+    width: 190px;
+    margin: 10px 0 0 4px;
+    border: 1px solid $grey_3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    position: relative;
+    @media (max-width: $bp-large-max) {
+      width: 175px;
+    }
+    &::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;
+      font-weight: bold;
+      text-transform: uppercase;
+      padding: 30px 15px 15px 15px;
+      display: flex;
+      flex-direction: column;
+      @media (max-width: $bp-large-max) {
+        padding: 30px 12px 15px 12px;
+      }
+      small {
+        font-size: 10px;
+        text-align: center;
+      }
+    }
+    &-description {
+      padding: 15px;
+      border-top: 1px solid $grey_2;
+      &--selected {
+        border-top: 1px solid $green;
+      }
+      ul {
+        list-style: circle;
+        margin-left: 13px;
+        li {
+          margin-bottom: 8px;
+        }
+      }
+    }
+    &-info {
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      .Info__content {
+        font-size: 17px;
+      }
+    }
+  }
+}

package/components/product/wizard/wizard_print/wizard-print.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="WizardPrint__wrapper">
+    <div class="WizardPrint__items">
+      <div
+        v-for="(orderPrintType, index) in avilableOrderPrintTypes"
+        :key="index"
+        class="WizardPrint__item"
+        :class="{
+          'WizardPrint__item--selected': isSelectedPrintTypes(orderPrintType.types)
+        }"
+        @click="setAvailablePrintTypes(orderPrintType.types)">
+        <info
+          v-if="orderPrintType.info"
+          :has-popover="true"
+          icon-color="black"
+          class="WizardPrint__item-info">
+          <template slot="info">
+            {{ orderPrintType.info }}
+          </template>
+        </info>
+        <div
+          class="WizardPrint__item-name lc_subtitle1">
+          <div
+            v-if="orderPrintType.icon"
+            :class="`WizardPrint__item-icon Wizard__item-icon--${orderPrintType.icon}`"></div>
+          <span>{{ orderPrintType.name }}</span>
+          <small>{{ orderPrintType.subName }}</small>
+        </div>
+        <div
+          class="WizardPrint__item-description"
+          :class="{
+            'WizardPrint__item-description--selected': isSelectedPrintTypes(orderPrintType.types)
+          }">
+          <ul class="lc_regular12">
+            <li
+              v-for="(description, dIndex) in orderPrintType.description"
+              :key="`${index}-${dIndex}`">
+              {{ description }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="ProgressSteps__controls">
+      <btn
+        :btn-block="true"
+        :btn-disabled="!availablePrintTypes"
+        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, mapMutations } from 'vuex';
+import Info from '@lancom/shared/components/common/info-popover';
+
+export default {
+  name: 'WizardPrint',
+  components: {
+    Info
+  },
+  data() {
+    return {
+      orderPrintTypes: [{
+        types: ['black print', 'full colour print'],
+        icon: 'printed',
+        name: 'DIGITAL',
+        subName: 'Minimum 12',
+        description: [
+          'Free Setup on all orders',
+          'Standard turn around time of 5 days',
+          'Same or next day rush service available'
+        ]
+        // info: 'DIGITAL - minimum 12'
+      }, {
+        types: ['embroidery'],
+        name: 'Embroidery',
+        subName: 'Minimum 20',
+        description: [
+          'Free setup on orders over 50 items',
+          'Best for polo or high vis shirts',
+          'Standard turn around time of 8-10 days'
+        ],
+        info: 'Embroidery'
+      }, {
+        types: ['screen print'],
+        name: 'Screen Printing',
+        subName: 'Minimum 25',
+        description: [
+          'Setup cost of $50 per colour',
+          'Most economical for large orders(over 250)',
+          'Free repeat setups for 1 year on same design'
+        ]
+      }]
+    };
+  },
+  computed: {
+    ...mapGetters('product', ['product', 'availablePrintTypes', 'hasUnprintedPrice']),
+    avilableOrderPrintTypes() {
+      return this.orderPrintTypes.filter(orderPrintType => {
+        return (!orderPrintType.types && this.hasUnprintedPrice) || (orderPrintType.types || []).find(type => this.product.printTypes.find(printType => printType.type === type));
+      });
+    }
+  },
+  mounted() {
+    const [defaultPrintTypes] = this.avilableOrderPrintTypes;
+    if (defaultPrintTypes) {
+      this.setAvailablePrintTypes(defaultPrintTypes.types);
+    }
+  },
+  methods: {
+    ...mapMutations('product', [
+      'setAvailablePrintTypes'
+    ]),
+    isSelectedPrintTypes(types) {
+      return (!types && !this.availablePrintTypes) || (types || []).find(type => (this.availablePrintTypes || []).includes(type));
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print';
+</style>

package/components/product/wizard/wizard_print_area/wizard-print-area.scss

@@ -0,0 +1,101 @@
+@import "@/assets/scss/variables";
+
+.WizardPrintArea {
+  &__title {
+    font-weight: 800;
+    font-size: 28px;
+    line-height: 38px;
+    color: $black;  
+    margin-bottom: 26px; 
+  }
+  &__areas {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin: -10px 0 0 -10px;
+    width: calc(100% + 10px);
+  }
+  &__area {
+    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;
+      }
+    }
+    &--disabled {
+      pointer-events: none !important;
+      opacity: 0.4;
+    }
+
+    &-icon {
+      width: 60px;
+      height: 55px;
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: center;
+
+      @each $type in tee {
+        @each $side in front, back, sleeve-left, sleeve-right {
+          &.#{$side}.#{$type} {
+            background-image: url(~/static/icons/#{$side}_#{$type}.svg);
+          }
+        }
+      }
+      
+      // TEE - FRONT
+      @each $position in center, left, right {
+        &.front.tee.#{$position} {
+          background-image: url(~/static/icons/front_tee_#{$position}.svg);
+        }
+      }
+      // TEE - BACK
+      @each $position in center, top, bottom {
+        &.back.tee.#{$position} {
+          background-image: url(~/static/icons/back_tee_#{$position}.svg);
+        }
+      }
+      // TEE - SLEEVE LEFT
+      &.sleeve-left.tee.left {
+        background-image: url(~/static/icons/sleeve-left_tee_left.svg);
+      }
+      &.sleeve-right.tee.right {
+        background-image: url(~/static/icons/sleeve-right_tee_right.svg);
+      }
+    }
+    &-name {
+      font-size: 16px;
+      line-height: 22px;
+      margin-top: 10px;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+  }
+}

package/components/product/wizard/wizard_print_area/wizard-print-area.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="WizardPrintArea__wrapper">
+    <div class="WizardPrintArea__areas">
+      <div
+        v-for="(area, index) in productPrintAreas"
+        :key="index"
+        class="WizardPrintArea__area"
+        :class="{
+          'WizardPrintArea__area--selected': isSelectedPrintArea(area),
+          'WizardPrintArea__area--disabled': isDisabledPrintArea(area)
+        }"
+        @click="toggleEditablePrintArea(area)">
+        <div
+          class="WizardPrintArea__area-icon"
+          :class="{
+            [area.alias]: true,
+            [area.side]: true,
+            [productType]: true
+          }">
+        </div>
+        <div class="WizardPrintArea__area-name">
+          {{ area.name }}
+        </div>
+      </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, mapMutations } from 'vuex';
+
+export default {
+  name: 'WizardPrintArea',
+  data() {
+    return {
+      printAreas: []
+    };
+  },
+  computed: {
+    ...mapGetters('layers', ['editableLayer']),
+    ...mapGetters('product', ['product', 'editablePrintAreas', 'selectedPrintAreas', 'layers']),
+    productType() {
+      return 'tee' || this.product.productType.alias;
+    },
+    productPrintAreas() {
+      return this.product.printAreas || [];
+    }
+  },
+  mounted() {
+    if (!this.editablePrintAreas.length) {
+      const first = this.productPrintAreas.find(pa => !this.isDisabledPrintArea(pa));
+      if (first) {
+        this.addEditablePrintArea(first);
+      }
+    }
+  },
+  methods: {
+    ...mapMutations('product', ['addEditablePrintArea', 'toggleEditablePrintArea']),
+    isSelectedPrintArea(printArea) {
+      return this.editablePrintAreas.some(pa => pa._id === printArea._id);
+    },
+    isDisabledPrintArea(printArea) {
+      return !this.isSelectedPrintArea(printArea) && this.editableLayer?.printArea !== printArea._id && this.layers.find(layer => layer.printArea === printArea._id);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print-area';
+</style>

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