@lancom/shared 0.0.278 → 0.0.279

package/assets/js/api/admin.js

@@ -167,6 +167,9 @@ export default {
   createOrderRefund(order, refund, shop) {
     return _post(`shop/${shop}/order/${order}/refund`, refund);
   },
+  createOrderReturn(order, refund, shop) {
+    return _post(`shop/${shop}/order/${order}/return`, refund);
+  },
   sendOrderRefundRequest(order, refund, shop) {
     return _post(`shop/${shop}/order/${order}/refund/${refund}/send`);
   },

package/components/common/progress_steps/progress-steps.scss

@@ -2,7 +2,9 @@
 
 .ProgressSteps {
   &__wrapper {
-    border: 2px solid $gray;
+    &--border {
+      border: 2px solid $gray;
+    }
   }
   &__steps-wrapper {
     position: relative;

package/components/common/progress_steps/progress-steps.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="ProgressSteps__wrapper">
+  <div
+    class="ProgressSteps__wrapper"
+    :class="{
+      'ProgressSteps__wrapper--border': hasBorder
+    }">
     <div class="ProgressSteps__steps-wrapper">
       <div
         class="ProgressSteps__progress"
@@ -89,6 +93,10 @@ export default {
       type: Boolean,
       default: true
     },
+    hasBorder: {
+      type: Boolean,
+      default: true
+    },
     visibleStepName: {
       type: Boolean,
       default: false

package/components/editor/editor.vue

@@ -13,7 +13,7 @@
             @select="selectTab">
             <template v-slot:default="{ currentTab }">
               <component
-                :is="`editor-${currentTab === 'product' ? 'product-details' : 'layers'}`"
+                :is="editorCurrentTabComponent(currentTab)"
                 v-if="currentTab">
               </component>
             </template>
@@ -83,6 +83,7 @@ import EditorWorkspace from './editor_workspace/editor-workspace';
 import EditorProductDetails from './editor_product_details/editor-product-details';
 import MobileEditorProductDetails from './mobile_editor_product_details/mobile-editor-product-details';
 import EditorLayers from './editor_layers/editor-layers';
+import EditorWizard from './editor_wizard/editor-wizard';
 
 const MIN_SCREEN_AMOUNT = 125;
 
@@ -92,6 +93,7 @@ export default {
     EditorWorkspace,
     EditorProductDetails,
     EditorLayers,
+    EditorWizard,
     MobileEditorProductDetails,
     ProductsListDropdown,
     Tabs
@@ -112,6 +114,11 @@ export default {
         icon: 'icon-edit',
         value: 'design',
         description: 'Add text and upload images'
+      }, {
+        label: 'Easy Design Wizard',
+        icon: 'icon-edit',
+        value: 'wizard',
+        description: 'Create Custom Designs'
       }],
       offerScreenPrintingAmount: 0
     };
@@ -168,6 +175,16 @@ export default {
       'setSelectedTab'
     ]),
     ...mapMutations('layers', ['resetLayers']),
+    editorCurrentTabComponent(currentTab) {
+      switch(currentTab) {
+        case 'product': 
+          return 'editor-product-details';
+        case 'wizard': 
+          return 'editor-wizard';
+        default: 
+          return 'editor-layers';
+      }
+    },
     selectTab(tab) {
       this.setSelectedTab(tab);
       this.setEditModeSelectedLayer(false);

package/components/editor/editor_wizard/editor-wizard.scss

@@ -0,0 +1,22 @@
+@import "@/assets/scss/variables";
+
+.EditorWizard {
+  &__wrapper {
+    padding: 20px 0;
+  }
+  &__list-header {
+    padding: 12px 0;
+    margin-top: 24px;
+    border-top: 1px solid #E5E5E5;
+  }
+  &__close-editable {
+    color: $grey_1;
+    cursor: pointer;
+    &-icon {
+      color: $grey_5;
+    }
+  }
+  &__pricing {
+    margin-top: 30px;
+  }
+}

package/components/editor/editor_wizard/editor-wizard.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="EditorWizard__wrapper">
+    <wizard
+      :hidden-done-step-number="false"
+      :has-border="false" />
+    <div
+      v-if="hasLayers && isPrintPricing"
+      class="EditorWizard__add-btn">
+      <btn
+        btn-class="green"
+        btn-label="Add Another Print"
+        @onclick="addAnotherPrint()">
+        <i
+          slot="icon-before"
+          class="icon-plus"></i>
+      </btn>
+    </div>
+    <editor-pricing
+      v-if="hasPricing"
+      class="EditorWizard__pricing" />
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex';
+import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
+import Wizard from '@lancom/shared/components/product/wizard/wizard';
+
+export default {
+  name: 'EditorWizard',
+  components: {
+    EditorPricing,
+    Wizard
+  },
+  props: {
+    hasPricing: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['hasLayers', 'isPrintPricing'])
+  },
+  methods: {
+    ...mapMutations('product', [
+      'setVisibleSteps',
+      'clearWizardData'
+    ]),
+    ...mapMutations('layers', [
+      'setEditableLayers'
+    ]),
+    addAnotherPrint() {
+      this.setVisibleSteps(false);
+      this.$nextTick(() => {
+        this.setEditableLayers();
+        this.clearWizardData();
+        this.setVisibleSteps(true);
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-wizard.scss';
+</style>

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -151,7 +151,7 @@ export default {
       );
     },
     printAreaIsSmall() {
-      return this.printAreaSize.alias === 'rect10';
+      return this.printAreaSize?.alias === 'rect10';
     },
     backgroundColor() {
       return this.backgroundImageLoaded && this.editableColor?.rgb;

package/components/product/wizard/wizard.scss

@@ -0,0 +1,222 @@
+@import '@/assets/scss/variables';
+
+.Wizard {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 22px;
+    background-color: $wizard_primary;
+    font-weight: 800;
+    font-size: 16px;
+    line-height: 22px;
+    text-transform: uppercase;
+    color: $wizard_primary_text;
+    cursor: pointer;
+    @media (max-width: $bp-extra-small-max) {
+      padding: 14px;
+      font-size: 13px;
+      flex-direction: column;
+      align-items: baseline;
+    }
+    &:hover,
+    &--active {
+      background-color: $green;
+      background-color: $wizard_primary_active;
+    }
+    &-state {
+      text-decoration: underline;
+    }
+  }
+  &__print-types {
+    display: flex;
+    margin: 31px 0 36px -5px;
+    width: calc(100% + 5px);
+  }
+  &__print-type {
+    margin: 5px 0 0 5px;
+    cursor: pointer;
+    &-name {
+      display: flex;
+      text-transform: uppercase;
+      align-items: center;
+      justify-content: center;
+      height: 60px;
+      background-color: $gray;
+      color: $black;
+      &--selected {
+        background-color: $green;
+      }
+    }
+    &-description {
+      padding: 12px 16px;
+      border: 1px solid $gray;
+      color: $gray_main;
+      &--selected {
+        border: 1px solid $green;
+        color: $black;
+      }
+      ul {
+        list-style: circle;
+        margin-left: 13px;
+        li {
+          margin-bottom: 8px;
+        }
+      }
+    }
+    &-icon {
+      width: 22px;
+      height: 22px;
+      background-position: center;
+      background-size: cover;
+      margin-right: 10px;
+      &--blank {
+        background-image: url(~/static/images/blank_tee.svg);
+      }
+      &--printed {
+        background-image: url(~/static/images/printed_tee.svg);
+      }
+    }
+  }
+  &__add-btn {
+    margin-top: 15px;
+    width: 100%;
+    display: flex;
+    .Btn__wrapper {
+      flex-grow: 1;
+    }
+  }
+  &__layers {
+    border: 2px solid $gray;
+    background-color: #FCFCFC;
+    padding: 30px;
+    margin-bottom: 20px;
+    &-info {
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 2px solid $gray;
+      font-size: 14px;
+      line-height: 19px;
+      color: $gray_main;
+      p {
+        margin-bottom: 10px;
+      }
+    }
+  }
+  &__info {
+    display: flex;
+    margin-top: 11px;
+    flex-direction: column;
+    &-item {
+      margin-right: 0;
+      margin: 7px 0;
+    }
+  }
+  &__step {
+    height: 68px;
+    padding: 0 20px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    @media (max-width: $bp-large-max) {
+      padding: 0 10px;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      top: -3px;
+      right: 0px;
+      bottom: -3px;
+      width: 16px;
+      background-image: url(~/static/images/step-arrow.svg);
+      background-position: top right;
+      background-repeat: no-repeat;
+      background-size: cover;
+      z-index: 3;
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      left: -14px;
+      top: 0px;
+      right: 15px;
+      bottom: 0px;
+      background-color: #f4f4f4;
+      z-index: 1;
+    }
+    &--last {
+      &::before {
+        right: 0;
+      }
+      &::after {
+        display: none;
+      }
+    }
+    &-progress {
+      position: relative;
+      z-index: 2;
+    }
+    &-number {
+      font-weight: 800;
+      font-size: 16px;
+      color: $black;
+    }
+    &--active {
+      .Wizard__step-number {
+        color: $wizard_primary_text;
+      }
+      &::before {
+        background-color: $wizard_primary_secondary;
+      }
+      &::after {
+        background-image: url(~/static/images/step-arrow--success.svg);
+      }
+    }
+    &-name {
+      font-weight: bold;
+      font-size: 14px;
+      color: $gray_main;
+      margin-top: 4px;
+      @media (max-width: $bp-large-max) {
+        font-size: 11px;
+      }
+    }
+    &-success {
+      font-size: 19px;
+      width: 40px;
+      height: 40px;
+      background-color: $green;
+      border-radius: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  &__content {
+    display: none;
+    &--visible {
+      display: block;
+    }
+    .ProgressSteps {
+      &__wrapper {
+        margin-top: 12px;
+      }
+      &__steps-wrapper {
+        padding: 0 !important;
+        border-bottom: none;
+        @media (max-width: $bp-extra-small-max) {
+          display: none;
+        }
+      }
+      &__steps {
+        overflow: hidden;
+        padding-left: 15px;
+      }
+      &__step {
+        height: auto;
+      }
+    }
+  }
+}

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>