@lancom/shared 0.0.278 → 0.0.280

package/components/product/wizard/wizard.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="Wizard__wrapper">
+    <div
+      v-if="preSetPrint"
+      class="Wizard__header Wizard__header--active">
+      <div class="Wizard__header-name">
+        PRINT OPTIONS
+      </div>
+      <div
+        class="Wizard__header-state"
+        @click="removePreSetPrint()">
+        remove
+      </div>
+    </div>
+    <div
+      v-else
+      class="Wizard__header"
+      :class="{
+        'Wizard__header--active': isVisible
+      }"
+      @click="toggleVisible()">
+      <div class="Wizard__header-name">
+        {{ product.prePrint ? 'CLICK TO ADD ADDITIONAL PRINT OR LOGO' : 'CLICK TO ADD LOGO OR PRINT TO ORDER' }}
+      </div>
+      <div
+        v-if="!product.printOnly"
+        class="Wizard__header-state">
+        {{ isVisible ? 'CANCEL PRINT' : 'ADD PRINT' }}
+      </div>
+    </div>
+    <div
+      v-if="isVisible"
+      class="Wizard__content"
+      :class="{
+        'Wizard__content--visible': isVisible
+      }">
+      <div
+        v-if="hasLayers"
+        class="Wizard__layers">
+        <wizard-print-layers
+          :layers="layers"
+          :editable="true"
+          @edit="editLayer($event)"
+          @delete="removeTemplateLayer($event)" />
+        <div
+          v-if="!preSetPrint"
+          class="Wizard__layers-info">
+          <p>1. Note final print price will be calculated once garment quantity is finalised</p>
+          <p>2. PDF mockup will be provided for approval prior to printing</p>
+        </div>
+      </div>
+      <progress-steps
+        v-if="(visibleSteps || !hasLayers)"
+        ref="progressSteps"
+        :steps="steps"
+        :has-border="hasBorder"
+        :visible-current-step="false"
+        :hidden-done-step-number="hiddenDoneStepNumber"
+        :step-offset="1"
+        :hidden-steps="hiddenSteps"
+        step-label="Step"
+        @finish="setVisibleSteps(false)">
+        <div
+          slot="step-progress"
+          slot-scope="{ currentStepIndex, stepOffset, index, step }"
+          class="Wizard__step"
+          :class="{
+            'Wizard__step--last': (steps.length - stepOffset) === (index + 1),
+            'Wizard__step--active': index <= (currentStepIndex - stepOffset)
+          }">
+          <div class="Wizard__step-progress">
+            <div class="Wizard__step-number">
+              <i
+                v-if="index <= (currentStepIndex - stepOffset)"
+                class="icon-ok"></i>
+              Step {{ index + 1 }}
+            </div>
+            <div class="Wizard__step-name">
+              {{ step }}
+            </div>
+          </div>
+        </div>
+        <div slot-scope="{ currentStep }">
+          <transition>
+            <component
+              :is="stepComponents[currentStep]"
+              ref="steps"
+              @next="goToNextStep"
+              @prev="goToPrevStep"></component>
+          </transition>
+          <div class="Wizard__info">
+            <info
+              v-if="product.prePrint"
+              class="Wizard__info-item">
+              <template slot="text">
+                You can add your own logo to this product as well if you order 12 or more.
+              </template>
+            </info>
+            <info class="Wizard__info-item">
+              <template slot="text">
+                {{ product.prePrint ? 'Once we review your order and check the logo, we will send a you PDF mockup for approval' : 'Free PDF mockup for approval' }}
+              </template>
+            </info>
+            <info class="Wizard__info-item">
+              <template slot="text">
+                Express* prints in 3 days
+              </template>
+            </info>
+          </div>
+        </div>
+      </progress-steps>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations, mapActions } from 'vuex';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
+import Info from '@lancom/shared/components/common/info-popover';
+import { getPrintAreaSizes } from '@lancom/shared/assets/js/utils/prints';
+import ProgressSteps from '@lancom/shared/components/common/progress_steps/progress-steps';
+import WizardPrintArea from './wizard_print_area/wizard-print-area';
+import WizardPrintSize from './wizard_print_size/wizard-print-size';
+import WizardPrintType from './wizard_print_type/wizard-print-type';
+import WizardPrintUnderbase from './wizard_print_underbase/wizard-print-underbase';
+import WizardPrintTextOrLogo from './wizard_print_text_or_logo/wizard-print-text-or-logo';
+import WizardPrintReview from './wizard_print_review/wizard-print-review';
+import WizardPrintLayers from './wizard_print_layers/wizard-print-layers';
+import WizardPrint from './wizard_print/wizard-print';
+
+const WIZARD_STEPS = {
+  PRINT: 'Print',
+  PRINT_AREA: 'Printable area',
+  PRINT_SIZE: 'Print size',
+  PRINT_UNDERBASE: 'Print underbase',
+  PRINT_TYPE: 'Print type',
+  TEXT_OR_LOGO: 'Text or logo',
+  REVIEW: 'Print review'
+};
+const WIZARD_STEPS_LIST = Object.keys(WIZARD_STEPS).map(k => WIZARD_STEPS[k]);
+
+export default {
+  name: 'Editor',
+  components: {
+    ProgressSteps,
+    WizardPrintArea,
+    WizardPrintSize,
+    WizardPrintType,
+    WizardPrintUnderbase,
+    WizardPrintTextOrLogo,
+    WizardPrintReview,
+    WizardPrintLayers,
+    WizardPrint,
+    Info
+  },
+  data() {
+    return {
+      isVisible: false,
+      hiddenSteps: [WIZARD_STEPS.PRINT],
+      stepComponents: {
+        [WIZARD_STEPS.PRINT]: 'wizard-print',
+        [WIZARD_STEPS.PRINT_AREA]: 'wizard-print-area',
+        [WIZARD_STEPS.PRINT_SIZE]: 'wizard-print-size',
+        [WIZARD_STEPS.PRINT_TYPE]: 'wizard-print-type',
+        [WIZARD_STEPS.PRINT_UNDERBASE]: 'wizard-print-underbase',
+        [WIZARD_STEPS.TEXT_OR_LOGO]: 'wizard-print-text-or-logo',
+        [WIZARD_STEPS.REVIEW]: 'wizard-print-review'
+      }
+    };
+  },
+  props: {
+    hiddenDoneStepNumber: {
+      type: Boolean,
+      default: false
+    },
+    hasBorder: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('product', ['product', 'layers', 'visibleSteps', 'hasLayers', 'isPrintPricing', 'availablePrintTypes', 'preSetPrint']),
+    steps() {
+      const isScreenPrint = (this.availablePrintTypes || []).includes('screen print');
+      return isScreenPrint ? WIZARD_STEPS_LIST.filter(s => s !== WIZARD_STEPS.PRINT_SIZE) : WIZARD_STEPS_LIST.filter(s => s !== WIZARD_STEPS.PRINT_UNDERBASE);
+    },
+    printTypes() {
+      return this.product.printTypes || [];
+    },
+    productPrintAreas() {
+      return this.product.printAreas || [];
+    }
+  },
+  mounted() {
+    if (this.product.printOnly || this.preSetPrint || this.layers.length > 0) {
+      this.isVisible = true;
+      this.setIsPrintPricing(this.isVisible);
+    }
+
+    this.loadHelpMessages({
+      shop: this.shop._id,
+      group: 'wizard-steps'
+    });
+  },
+  methods: {
+    ...mapActions(['loadHelpMessages']),
+    ...mapMutations('product', [
+      'removeTemplateLayer',
+      'clearWizardData',
+      'addEditablePrintArea',
+      'setSelectedPrintArea',
+      'setSelectedPrintType',
+      'setVisibleSteps',
+      'setIsPrintPricing',
+      'clearTemplateLayers',
+      'setPreSetPrint'
+    ]),
+    ...mapMutations('layers', ['setEditableLayers']),
+    goToNextStep() {
+      if (this.$refs.progressSteps) {
+        this.$refs.progressSteps.goToNextStep();
+      }
+    },
+    goToPrevStep() {
+      if (this.$refs.progressSteps) {
+        this.$refs.progressSteps.goToPrevStep();
+      }
+    },
+    editLayer(layer) {
+      this.clearWizardData();
+      
+      this.setEditableLayers([layer]);
+      const printArea = this.productPrintAreas.find(pa => pa._id === layer.printArea);
+      this.addEditablePrintArea(printArea);
+      const sizes = getPrintAreaSizes(printArea);
+      const size = sizes.find(s => s._id === layer.printSize);
+      this.setSelectedPrintArea({ printArea: printArea._id, size });
+      const type = this.product.printTypes.find(pt => pt._id === layer.printType);
+      this.setSelectedPrintType({ printArea: printArea._id, type });
+      this.setVisibleSteps(true);
+    },
+    toggleVisible() {
+      if (!this.product.printOnly) {
+        if (this.isVisible && this.visibleSteps) {
+          this.setVisibleSteps(false);
+          this.$nextTick(() => {
+            this.setEditableLayers([]);
+            this.clearWizardData();
+          });
+        } else {
+          this.isVisible = !this.isVisible;
+          this.setIsPrintPricing(this.isVisible);
+          this.clearTemplateLayers();
+          gtm.push({
+            event: this.isVisible ? 'start_printing_wizard' : 'cancel_printing_wizard',
+            item_id: this.product.SKU,
+            item_name: this.product.name,
+            item_brand: this.product.brand.name
+          });
+        }
+      }
+    },
+    removePreSetPrint() {
+      this.setPreSetPrint(null);
+      this.clearTemplateLayers();
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard';
+</style>

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>