@lancom/shared 0.0.277 → 0.0.279

package/assets/js/api/admin.js

@@ -140,6 +140,9 @@ export default {
   exportOrderToShippingService(order, shipment) {
     return _post(`admin/shop/${order.shop?._id || order.shop}/order/${order._id}/shipment/${shipment._id || shipment.guid}/export-to-shipping-service`, shipment);
   },
+  returnShipments(body) {
+    return _post('admin/shipments/return', body);
+  },
   markShipmentAsDispatched(order, shipment) {
     return _post(`admin/shop/${order.shop?._id || order.shop}/order/${order._id}/shipment/${shipment._id || shipment.guid}/dispatched`, shipment);
   },
@@ -164,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/quote.js

@@ -1,6 +1,9 @@
 export function convertQuoteToOrder(quote, option) {
   const files = [quote.file, ...(quote.files || [])].filter(f => !!f);
   return {
+    isUrgent: quote.isUrgent,
+    deliveryBy: quote.deliveryBy,
+    deliveryAfter: quote.deliveryAfter,
     referenceField: quote.reference,
     paymentMethod: option.paymentMethod || 'deposit',
     billingAddress: quote.address,

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/order/order_view/order-view.scss

@@ -44,7 +44,7 @@
       background-image: url(../../../static/images/paid.svg);
       background-repeat: no-repeat;    
       background-position: 0px 0px;
-      background-size: contain;
+      background-size: 500px;
     }
     &--small {
       margin: 0 0;

package/components/product/gallery/gallery.scss

@@ -50,11 +50,15 @@
 }
 
 .Gallery {
+  &__wrapper {
+    position: relative;
+  }
   &__big,
   &__small {
     overflow: hidden;
     position: relative;
     margin: 20px 0;
+    z-index: 1;
   }
   &__zoom {
     position: absolute;
@@ -195,4 +199,21 @@
     background-color: $gray;
     margin-top: 20px;
   }
+  &__zoom-image {
+    position: absolute;
+    right: -250px;
+    top: 0;
+    width: 350px;
+    height: 350px;
+    z-index: 2;
+    background-color: white;
+    box-shadow: 0 0 10px gray;
+    overflow: hidden;
+    pointer-events: none;
+    img {
+      position: absolute;
+      max-width: 800px;
+      max-height: 800px;
+    }
+  }
 }

package/components/product/gallery/gallery.vue

@@ -5,9 +5,10 @@
         <img
           :src="staticLink(currentImage.large)"
           :alt="product.name"
-          width="400"
-          height="400"
-          class="Gallery__big-image-src" />
+          class="Gallery__big-image-src"
+          @mouseenter="startZoom"
+          @mousemove="updateZoomWithThrottle"
+          @mouseleave="stopZoom" />
         <div
           v-if="currentImage.print"
           class="Gallery__big-print">
@@ -37,6 +38,14 @@
         Next
       </button>
     </div>
+    <div
+      v-if="isZooming"
+      class="Gallery__zoom-image">
+      <img
+        :src="staticLink(currentImage.large)"
+        :style="zoomImageStyles"
+        class="Gallery__zoom-image-src" />
+    </div>
     <div class="Gallery__small">
       <div
         v-for="(image, index) in visibleImages"
@@ -96,6 +105,7 @@ import { mapGetters, mapActions } from 'vuex';
 import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import { isValidImageTypes } from '@lancom/shared/assets/js/utils/colors';
 import Price from '@lancom/shared/components/common/price';
+import throttle from 'lodash.throttle';
 
 export default {
   name: 'Gallery',
@@ -127,7 +137,10 @@ export default {
       galerySize: null,
       backgroundSize: null,
       backgroundPosition: null,
-      skipUpdateGallery: false
+      skipUpdateGallery: false,
+      zoomImageStyles: null,
+      isZooming: false,
+      updateZoomWithThrottle: throttle(this.updateZoom, 50, { trailing: false }),
     };
   },
   computed: {
@@ -183,6 +196,22 @@ export default {
   methods: {
     ...mapActions('product', ['selectColor']),
     staticLink,
+    startZoom() {
+      this.isZooming = true;
+    },
+    stopZoom() {
+      this.isZooming = false;
+      this.zoomImageStyles = null;
+    },
+    updateZoom(e) {
+      if (this.isZooming) {
+        const { offsetX, offsetY } = e;
+        this.zoomImageStyles = {
+          top: `${-offsetY * 2 + 175}px`,
+          left: `${-offsetX * 2 + 175}px`
+        };
+      }
+    },
     goToSlideAndChangeColor(index) {
       this.skipUpdateGallery = true;
       const { color } = this.filteredImages[index] || {};

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