@lancom/shared 0.0.278 → 0.0.280

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/assets/js/utils/order.js

@@ -73,7 +73,7 @@ export function populateProductsFields(products, pricing) {
   });
 };
 
-function populatePrints(products) {
+export function populatePrints(products) {
   return products.reduce((prints, { guid, product }) => {
     return [
       ...prints,

package/assets/js/utils/quote.js

@@ -1,3 +1,5 @@
+import { populatePrints } from './order';
+
 export function convertQuoteToOrder(quote, option) {
   const files = [quote.file, ...(quote.files || [])].filter(f => !!f);
   return {
@@ -13,7 +15,10 @@ export function convertQuoteToOrder(quote, option) {
       ...p,
       prints: p.prints.filter(print => !(option.prints || []).some(({ _id }) => print._id === _id))
     })),
-    prints: option.prints,
+    prints: [
+      ...(option.prints || []),
+      ...populatePrints(option.products)
+    ],
     total: option.total,
     totalGST: option.totalGST,
     productsTotal: option.productsTotal,

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/related_products/related-products.vue

@@ -7,7 +7,7 @@
     </div>
     <product-list
       :products="products"
-      :lazy="true" />
+      :lazy="false" />
   </div>
 </template>
 

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