@lancom/shared 0.0.278 → 0.0.279

package/components/product/wizard/wizard_print_text_or_logo/wizard-print-text-or-logo.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="WizardPrintTextOrLogo__wrapper">
+    <div class="WizardPrintTextOrLogo__areas">
+      <div
+        v-for="(layer, index) in layers"
+        :key="index"
+        class="WizardPrintTextOrLogo__area">
+        <div class="WizardPrintTextOrLogo__title">
+          {{ layer.printArea.name }}
+        </div>
+        <wizard-text-or-logo-form :layer="layer" />
+      </div>
+    </div>
+    <div class="ProgressSteps__controls">
+      <btn
+        btn-class="white"
+        btn-label="BACK"
+        @onclick="$emit('prev')">
+      </btn>
+      <btn
+        btn-class="green"
+        btn-label="NEXT"
+        :btn-disabled="!isValidLayers"
+        @onclick="goNext">
+        <i
+          slot="icon-after"
+          class="icon-arrow-right"></i>
+      </btn>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex';
+import { getLayerModel } from '@lancom/shared/assets/js/models/product-layers';
+import WizardTextOrLogoForm from './wizard_text_or_logo_form/wizard-text-or-logo-form';
+
+const DEFAULT_LAYER = {
+  type: 'text',
+  notes: null,
+  copy: null,
+  url: null,
+  file: null
+};
+
+export default {
+  name: 'WizardPrintType',
+  components: {
+    WizardTextOrLogoForm
+  },
+  data() {
+    return {
+      layers: []
+    };
+  },
+  computed: {
+    ...mapGetters('layers', ['editableLayers']),
+    ...mapGetters('product', ['editableColor', 'selectedPrintAreas', 'selectedPrintTypes', 'editablePrintAreas']),
+    isValidLayers() {
+      return !this.layers.some(l => !l.copy && !l.file);
+    }
+  },
+  mounted() {
+
+    if (!this.editableLayers.length) {
+      this.layers = this.editablePrintAreas
+        .reduce((printAreas, printArea) => [...printAreas, { ...DEFAULT_LAYER, printArea }], []);
+    } else {
+      this.layers = this.editableLayers;
+    }
+  },
+  methods: {
+    ...mapMutations('layers', ['setEditableLayers']),
+    async goNext() {
+      const layers = await Promise.all(
+        this.layers.map(async layer => {
+          const printAreaId = layer.printArea?._id || layer.printArea;
+          const editablePrintArea = this.editablePrintAreas.find(pa => pa._id === printAreaId);
+          const selectedPrintArea = this.selectedPrintAreas[printAreaId];
+          const selectedPrintType = this.selectedPrintTypes[printAreaId];
+          const data = {
+            type: layer.type,
+            colorId: this.editableColor?._id,
+            properties: {
+              notes: layer.notes,
+              printArea: editablePrintArea._id,
+              printSize: selectedPrintArea?._id,
+              side: editablePrintArea.side,
+              printType: selectedPrintType._id
+            }
+          };
+          if (layer.type === 'text') {
+            data.properties.copy = layer.copy;
+          } else {
+            data.properties.file = layer.file;
+            data.url = layer.url;
+          }
+
+          if (layer.guid) {
+            data.properties.guid = layer.guid;
+          }
+          return await getLayerModel(data);
+        })
+      );
+      
+      this.setEditableLayers(layers);
+
+      this.$emit('next');
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print-text-or-logo';
+</style>

package/components/product/wizard/wizard_print_text_or_logo/wizard_text_or_logo_form/wizard-text-or-logo-form.scss

@@ -0,0 +1,138 @@
+@import "@/assets/scss/variables";
+.WizardTextOrLogoForm {
+  &__title {
+    font-weight: 800;
+    font-size: 28px;
+    line-height: 38px;
+    color: $black;  
+    margin-bottom: 26px; 
+  }
+  &__types {
+    display: flex;
+    align-content: space-between;
+    justify-content: space-between;
+    @media (max-width: $bp-extra-small-max) {
+      flex-wrap: wrap;
+    }
+  }
+  &__type {
+    flex-grow: 1;
+    height: 167px;
+    border: 1px solid $grey_3;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    cursor: pointer;
+    position: relative;
+    padding: 10px;
+    opacity: 0.6;
+    @media (max-width: $bp-extra-small-max) {
+      margin: 10px 0;
+    }
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      width: 20px;
+      height: 20px;
+      border: 1px solid $grey_2;
+      border-radius: 10px;
+    }
+    &:hover {
+      border: 1px solid $green;
+      opacity: 1;
+    }
+    &--selected {
+      border: 1px solid $green;
+      opacity: 1;
+      &::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-weight: bold;
+      font-size: 20px;
+      line-height: 27px;
+      color: $black;
+    }
+    &-input {
+      margin-top: 14px;
+      display: flex;
+      input {
+        flex-grow: 1;
+        border: 1px solid $gray;
+        font-family: Open Sans;
+        font-size: 13px;
+        line-height: 18px;
+        padding: 11px;
+        outline: none;
+      }
+    }
+    &-upload {
+      display: flex;
+      &--uploading {
+        pointer-events: none;
+        opacity: 0.7;
+      }
+      &-btn {
+        font-weight: bold;
+        font-size: 16px;
+        line-height: 22px;
+        text-transform: uppercase;
+        background-color: $green;
+        padding: 8px 14px;
+        &--disabled {
+          background-color: $gray;
+        }
+        &--uploaded {
+          opacity: 0.5;
+        }
+      }
+      &-info {
+        font-size: 12px;
+        line-height: 16px;
+        color: $black;
+        margin-left: 12px;
+      }
+      &-progress {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+      }
+      &-file {
+        margin-top: 5px;
+        font-size: 12px;
+        a {
+          text-decoration: none;
+          color: $black;
+        }
+      }
+    }
+    &-error {
+      margin-top: 5px;
+      font-size: 12px;
+      color: $error;
+    }
+  }
+  &__description {
+    margin-top: 22px;
+    textarea {
+      height: 60px;
+      width: 100%;
+      border: 1px solid $gray;
+      padding: 11px;
+      font-size: 14px;
+      line-height: 18px;
+      font-family: Open Sans;
+      font-style: normal;
+      outline: none;
+    }
+  }
+}

package/components/product/wizard/wizard_print_text_or_logo/wizard_text_or_logo_form/wizard-text-or-logo-form.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="WizardTextOrLogoForm__wrapper">
+    <div class="WizardTextOrLogoForm__types">
+      <div
+        class="WizardTextOrLogoForm__type"
+        :class="{
+          'WizardTextOrLogoForm__type--selected': layerType === 'text'
+        }"
+        @click="selectLayerType('text')">
+        <div class="WizardTextOrLogoForm__type-name">
+          Add text
+        </div>
+        <div class="WizardTextOrLogoForm__type-input">
+          <input
+            v-model="layer.copy"
+            placeholder="Enter your text"
+            type="text"
+            name="layer-copy" />
+        </div>
+      </div>
+      <div
+        class="WizardTextOrLogoForm__type"
+        :class="{
+          'WizardTextOrLogoForm__type--selected': layerType === 'art'
+        }"
+        @click="selectLayerType('art')">
+        <div class="WizardTextOrLogoForm__type-name">
+          Add logo
+        </div>
+        <div class="WizardTextOrLogoForm__type-input">
+          <file-uploader
+            :multiple="false"
+            :url="`image/editor/${shop._id}/${product._id}`"
+            :has-conversion-error-modal="false"
+            :show-error-message="false"
+            @onchange="handleUploadChange"
+            @onerror="handleUploadError"
+            @onuploaded="handleUploaded">
+            <template v-slot:toggle="{ uploading }">
+              <div
+                class="WizardTextOrLogoForm__type-upload"
+                :class="{
+                  'WizardTextOrLogoForm__type-upload--uploading': uploading
+                }">
+                <div
+                  class="WizardTextOrLogoForm__type-upload-btn"
+                  :class="{
+                    'WizardTextOrLogoForm__type-upload-btn--disabled': uploading,
+                    'WizardTextOrLogoForm__type-upload-btn--uploaded': layer.file
+                  }">
+                  Upload
+                </div>
+                <div class="WizardTextOrLogoForm__type-upload-info">
+                  <div>Note: accepted file types:</div>
+                  <div><b>JPEG / PNG / AI / EPS / PDF</b></div>
+                </div>
+              </div>
+            </template>
+            <template v-slot:progress="{ progress }">
+              <div
+                v-if="progress"
+                class="WizardTextOrLogoForm__type-upload-progress">
+                <spinner background="black" />
+              </div>
+            </template>
+          </file-uploader>
+        </div>
+        <div
+          v-if="uploadError"
+          class="WizardTextOrLogoForm__type-error">
+          {{ uploadError }}
+        </div>
+        <div
+          v-if="layer.file"
+          class="WizardTextOrLogoForm__type-upload-file">
+          <span @click="layer.file = null">x</span>
+          Logo:
+          <a
+            :href="layer.file.origin"
+            target="_blank">
+            {{ layer.file.fileName }}
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="WizardTextOrLogoForm__description">
+      <textarea
+        v-model="layer.notes"
+        name="layer-notes"
+        placeholder="Add notes for us">
+      </textarea>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import FileUploader from '@lancom/shared/components/common/file_uploader';
+
+export default {
+  name: 'WizardTextOrLogoForm',
+  components: {
+    FileUploader
+  },
+  props: {
+    layer: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      layerType: 'text',
+      uploadError: null
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('product', ['product'])
+  },
+  methods: {
+    selectLayerType(type) {
+      if (this.layerType !== type) {
+        this.layerType = type;
+        this.$set(this.layer, 'copy', null);
+        this.$set(this.layer, 'url', null);
+        this.$set(this.layer, 'file', null);
+        this.$set(this.layer, 'type', type);
+      }
+    },
+    handleUploaded(file) {
+      const { url } = file;
+      this.$set(this.layer, 'url', url);
+      this.$set(this.layer, 'file', file);
+    },
+    handleUploadError(e) {
+      const { error, data } = e?.response?.data || {};
+      if (data) {
+        this.$set(this.layer, 'file', {
+          fileName: data.fileName,
+          origin: data.source
+        });
+      } else {
+        this.uploadError = error;
+      }
+    },
+    handleUploadChange() {
+      this.uploadError = null;
+      this.$set(this.layer, 'file', null);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-text-or-logo-form';
+</style>

package/components/product/wizard/wizard_print_type/wizard-print-type.scss

@@ -0,0 +1,65 @@
+@import "@/assets/scss/variables";
+
+.WizardPrintSize {
+  &__title {
+    font-weight: 800;
+    font-size: 28px;
+    line-height: 38px;
+    color: $black;  
+    margin-bottom: 26px; 
+  }
+  &__sizes {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin: -10px 0 0 -10px;
+    width: calc(100% + 10px);
+  }
+  &__size {
+    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;
+      }
+    }
+    &-name {
+      font-size: 16px;
+      line-height: 22px;
+      margin-top: 10px;
+      font-weight: bold;
+    }
+  }
+  &__see-price {
+    margin-top: 5px;
+    font-size: 12px;
+    color: $gray_main;
+  }
+}

package/components/product/wizard/wizard_print_type/wizard-print-type.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="WizardPrintSize__wrapper">
+    <div class="WizardPrintSize__areas">
+      <div
+        v-for="(editablePrintArea, index) in editablePrintAreas"
+        :key="index"
+        class="WizardPrintSize__area">
+        <div class="WizardPrintSize__title">
+          {{ editablePrintArea.name }}
+        </div>
+        <wizard-print-area-print-type :editable-print-area="editablePrintArea" />
+      </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 } from 'vuex';
+import WizardPrintAreaPrintType from './wizard_print_area_print_type/wizard-print-area-print-type';
+
+export default {
+  name: 'WizardPrintType',
+  components: {
+    WizardPrintAreaPrintType
+  },
+  computed: {
+    ...mapGetters('product', ['editablePrintAreas'])
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print-type';
+</style>

package/components/product/wizard/wizard_print_type/wizard_print_area_print_type/wizard-print-area-print-type.scss

@@ -0,0 +1,87 @@
+@import "@/assets/scss/variables";
+.WizardPrintAreaPrintType {
+  &__title {
+    font-weight: 800;
+    font-size: 28px;
+    line-height: 38px;
+    color: $black;  
+    margin-bottom: 26px; 
+  }
+  &__types {
+    display: inline-flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin: -10px 0 0 -10px;
+    width: calc(100% + 10px);
+  }
+  &__type {
+    width: 194px;
+    min-height: 122px;
+    margin: 10px 0 0 10px;
+    padding: 20px 0;
+    border: 1px solid $grey_3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    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;
+      }
+    }
+    &-name {
+      font-size: 16px;
+      line-height: 22px;
+      margin-top: 10px;
+      font-weight: bold;
+      text-align: center;
+      text-transform: uppercase;
+    }
+    &-checkbox {
+      position: absolute;
+      top: 10px;
+      right: 0px;
+      pointer-events: none;
+    }
+    &-icon {
+      height: 50px;
+      width: 130px;
+      background-position: center;
+      background-size: contain;
+      background-repeat: no-repeat;
+      margin: 3px 0;
+    }
+    &-description {
+      font-size: 12px;
+      line-height: 16px;
+      text-align: center;
+      color: $gray_main;
+    }
+  }
+  &__see-price {
+    margin-top: 5px;
+    font-size: 12px;
+    color: $gray_main;
+  }
+}