@lancom/shared 0.0.277 → 0.0.279

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

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

@@ -0,0 +1,114 @@
+<template>
+  <div class="WizardPrintAreaPrintType__wrapper">
+    <div class="WizardPrintAreaPrintType__types">
+      <div
+        v-for="(type, index) in types"
+        :key="index"
+        class="WizardPrintAreaPrintType__type"
+        :class="{
+          'WizardPrintAreaPrintType__type--selected': isSelectedType(type)
+        }"
+        @click="selectPrintType(type)">
+        <div
+          v-if="type.icon"
+          class="WizardPrintAreaPrintType__type-icon"
+          :style="{
+            'background-image': `url('${type.icon}')`
+          }"></div>
+        <div class="WizardPrintAreaPrintType__type-name">
+          {{ type.displayName || type.name }}
+        </div>
+        <div
+          v-if="type.description"
+          class="WizardPrintAreaPrintType__type-description mt-7">
+          {{ type.description }}
+        </div>
+        <div class="WizardPrintAreaPrintType__type-price mt-7">
+          <span>
+            {{ getPrinTypePricing(type) | pricingRange }}
+          </span>
+        </div>
+        <v-popover
+          ref="popover"
+          trigger="hover"
+          :delay="{ show: 200, hide: 400 }"
+          popover-class="tooltip popover white"
+          class="WizardPrintAreaPrintType__see-price">
+          see prices
+          <template slot="popover">
+            <pricing-discounts-table :prices="getPrinTypePricing(type)" />
+          </template>
+        </v-popover>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex';
+import { sortByOrder } from '@lancom/shared/assets/js/utils/product';
+import { pricingRange } from '@lancom/shared/assets/js/utils/filters';
+import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
+
+export default {
+  name: 'WizardPrintAreaPrintType',
+  components: {
+    PricingDiscountsTable
+  },
+  filters: {
+    pricingRange
+  },
+  props: {
+    editablePrintArea: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['selectedPrintAreas', 'selectedPrintTypes', 'product', 'availablePrintTypes', 'selectedPrintUnderbases']),
+    selectedPrintArea() {
+      return this.selectedPrintAreas[this.editablePrintArea._id];
+    },
+    selectedPrintType() {
+      return this.selectedPrintTypes[this.editablePrintArea._id];
+    },
+    selectedPrintUnderbase() {
+      return this.selectedPrintUnderbases[this.editablePrintArea._id];
+    },
+    types() {
+      const available = this.availablePrintTypes || [];
+      const isScreenPrint = available.includes('screen print');
+      const types = this.product.printTypes
+        .filter(printType => this.availablePrintTypes.includes(printType.type) && !!this.getPrinTypeArea(printType) && (!isScreenPrint || !!printType.hasUnderbase === this.selectedPrintUnderbase));
+      return sortByOrder(types);
+    }
+  },
+  mounted() {
+    if (!this.selectedPrintType) {
+      const type = this.types[0];
+      if (type) {
+        this.selectPrintType(type);
+      }
+    }
+  },
+  methods: {
+    ...mapMutations('product', ['setSelectedPrintTypes']),
+    isSelectedType(type) {
+      return this.selectedPrintType && this.selectedPrintType._id === type._id;
+    },
+    selectPrintType(type) {
+      this.setSelectedPrintTypes({ printArea: this.editablePrintArea._id, type });
+    },
+    getPrinTypePricing(printType) {
+      return this.getPrinTypeArea(printType)?.printCost;
+    },
+    getPrinTypeArea({ printAreas }) {
+      return printAreas.find(({ printSizes }) => printSizes.map(({ _id }) => _id).includes(this.selectedPrintArea?._id)) || printAreas[0];
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print-area-print-type';
+</style>

package/components/product/wizard/wizard_print_underbase/wizard-print-underbase.scss

@@ -0,0 +1,65 @@
+@import "@/assets/scss/variables";
+
+.WizardPrintUnderbase {
+  &__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_underbase/wizard-print-underbase.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="WizardPrintUnderbase__wrapper">
+    <div class="WizardPrintUnderbase__areas">
+      <div
+        v-for="(editablePrintArea, index) in editablePrintAreas"
+        :key="index"
+        class="WizardPrintUnderbase__area">
+        <div class="WizardPrintUnderbase__title">
+          {{ editablePrintArea.name }}
+        </div>
+        <wizard-print-area-print-underbase :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 WizardPrintAreaPrintUnderbase from './wizard_print_area_print_underbase/wizard-print-area-print-underbase';
+
+export default {
+  name: 'WizardPrintUnderbase',
+  components: {
+    WizardPrintAreaPrintUnderbase
+  },
+  computed: {
+    ...mapGetters('product', ['editablePrintAreas'])
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print-underbase';
+</style>

package/components/product/wizard/wizard_print_underbase/wizard_print_area_print_underbase/wizard-print-area-print-underbase.scss

@@ -0,0 +1,87 @@
+@import "@/assets/scss/variables";
+.WizardPrintType {
+  &__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: 234px;
+    min-height: 122px;
+    margin: 10px 0 0 10px;
+    padding: 10px 0;
+    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;
+      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;
+  }
+}

package/components/product/wizard/wizard_print_underbase/wizard_print_area_print_underbase/wizard-print-area-print-underbase.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="WizardPrintAreaPrintType__wrapper">
+    <div class="WizardPrintAreaPrintType__types">
+      <div
+        v-for="(type, index) in types"
+        :key="index"
+        class="WizardPrintAreaPrintType__type"
+        :class="{
+          'WizardPrintAreaPrintType__type--selected': type.value === selectedPrintUnderbase
+        }"
+        @click="selectPrintUnderbase(type)">
+        <div
+          class="WizardPrintAreaPrintType__type-icon"
+          :style="{
+            'background-image': `url('/images/${ type.value ? 'white-base-crop.jpg' : 'no-base-crop.jpg' }')`
+          }"
+          @click="previewUnderbase(type.value ? 1 : 0)"></div>
+        <div class="WizardPrintAreaPrintType__type-name">
+          {{ type.label }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex';
+import ImageViewer from '@lancom/shared/components/common/image_viewer/image-viewer';
+
+export default {
+  name: 'WizardPrintAreaPrintUnderbase',
+  props: {
+    editablePrintArea: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['selectedPrintUnderbases']),
+    selectedPrintUnderbase() {
+      return this.selectedPrintUnderbases[this.editablePrintArea._id];
+    },
+    types() {
+      return [{
+        label: 'base layer not required',
+        value: false
+      }, {
+        label: 'add white ink base',
+        value: true
+      }];
+    }
+  },
+  mounted() {
+    this.setSelectedPrintTypes({ printArea: this.editablePrintArea._id, type: null });
+    this.selectPrintUnderbase(true);
+  },
+  methods: {
+    ...mapMutations('product', ['setSelectedPrintTypes', 'setSelectedPrintUnderbases', 'setSelectedPrintType']),
+    selectPrintUnderbase(type) {
+      this.setSelectedPrintUnderbases({ printArea: this.editablePrintArea._id, underbase: type.value });
+    },
+    previewUnderbase(index) {
+      this.$modal.show(
+        ImageViewer,
+        {
+          items: [{
+            src: '/images/no-base.jpg'
+          }, {
+            src: '/images/white-base.jpg'
+          }],
+          index
+        },
+        {
+          name: 'image-viewer-modal',
+          root: this.$root,
+          width: '100%',
+          height: 'auto',
+          adaptive: true,
+          clickToClose: true,
+          transition: 'from-top-to-bottom'
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-print-area-print-underbase';
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.277",
+  "version": "0.0.279",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/store/layers.js

@@ -4,12 +4,14 @@ import Vue from 'vue';
 
 export const state = () => ({
   editableLayer: null,
+  editableLayers: [],
   layerThumbnails: {}
 });
 
 export const getters = {
   layerThumbnails: ({ layerThumbnails }) => layerThumbnails,
-  editableLayer: ({ editableLayer }) => editableLayer
+  editableLayer: ({ editableLayer }) => editableLayer,
+  editableLayers: ({ editableLayers }) => editableLayers
 };
 
 export const actions = {
@@ -22,6 +24,9 @@ export const mutations = {
   setEditableLayer(state, layer) {
     state.editableLayer = layer;
   },
+  setEditableLayers(state, editableLayers) {
+    state.editableLayers = editableLayers;
+  },
   resetLayers(state) {
     state.layerThumbnails = {};
   }

package/store/product.js

@@ -35,7 +35,10 @@ export const state = () => ({
   editableColor: null,
   selectedLayer: null,
   editablePrintArea: null,
+  editablePrintAreas: [],
   selectedPrintType: null,
+  selectedPrintTypes: {},
+  selectedPrintUnderbases: {},
   selectedPrintUnderbase: false,
   editModeSelectedLayer: false,
   selectedPrintAreas: {},
@@ -109,8 +112,11 @@ export const getters = {
   },
   printsPricing: ({ product }) => getProductPrintsAreasPrices(product),
   editablePrintArea: ({ editablePrintArea }) => editablePrintArea,
+  editablePrintAreas: ({ editablePrintAreas }) => editablePrintAreas,
   selectedPrintType: ({ selectedPrintType }) => selectedPrintType,
+  selectedPrintTypes: ({ selectedPrintTypes }) => selectedPrintTypes,
   selectedPrintUnderbase: ({ selectedPrintUnderbase }) => selectedPrintUnderbase,
+  selectedPrintUnderbases: ({ selectedPrintUnderbases }) => selectedPrintUnderbases,
   availablePrintTypes: ({ availablePrintTypes }) => availablePrintTypes,
   isPrintPricing: ({ isPrintPricing }) => isPrintPricing,
   minimumOrderQuantity: ({ product, template }) => {
@@ -431,9 +437,45 @@ export const mutations = {
   setEditablePrintArea(state, printArea) {
     state.editablePrintArea = printArea;
   },
+  addEditablePrintArea(state, printArea) {
+    state.editablePrintAreas = [
+      ...state.editablePrintAreas.filter(pa => pa._id !== printArea._id),
+      printArea
+    ];
+  },
+  toggleEditablePrintArea(state, printArea) {
+    const isExist = state.editablePrintAreas.some(pa => pa._id === printArea._id);
+    if (isExist) {
+      state.editablePrintAreas = state.editablePrintAreas.filter(pa => pa._id !== printArea._id);
+    } else {
+      state.editablePrintAreas = [
+        ...state.editablePrintAreas,
+        printArea
+      ];
+    }
+  },
   setSelectedPrintType(state, printType) {
     state.selectedPrintType = printType;
   },
+  setSelectedPrintTypes(state, { printArea, type }) {
+    state.selectedPrintTypes = {
+      ...state.selectedPrintTypes,
+      [printArea]: type
+    };
+  },
+  setSelectedPrintUnderbases(state, { printArea, underbase }) {
+    state.selectedPrintUnderbases = {
+      ...state.selectedPrintUnderbases,
+      [printArea]: underbase
+    };
+  },
+  clearWizardData(state) {
+    state.editablePrintAreas = [];
+    state.selectedPrintTypes = {};
+    state.selectedPrintUnderbases = {};
+    state.selectedPrintAreas = {};
+    state.editablePrintAreas = [];
+  },
   setSelectedPrintUnderbase(state, printUnderbase) {
     state.selectedPrintUnderbase = printUnderbase;
   },