@lancom/shared 0.0.280 → 0.0.282

package/components/common/postcode_select/postcode-select.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="PostcodeSelect form-row">
+  <div class="PostcodeSelect">
     <validation-provider
       v-slot="{ errors }"
       tag="div"
       :rules="required ? 'required' : ''"
       name="Postcode"
-      class="form-group form-row">
+      class="form-group">
       <label
         v-if="labelless"
         class="form-label"
@@ -76,6 +76,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import debounce from 'lodash.debounce';
 import Multiselect from 'vue-multiselect';
 import api from '@lancom/shared/assets/js/api';
@@ -88,7 +89,7 @@ export default {
   },
   filters: { highlight },
   props: {
-    country: {
+    codeCountry: {
       type: Object
     },
     value: {
@@ -128,14 +129,13 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['shop']),
     model: {
       get() {
-        return this.selected?.value ? this.selected : null;
+        return this.selected?._id ? this.selected : null;
       },
       set(option) {
-        this.selected = option;
-        this.$emit('input', option.value);
-        this.$emit('select', this.suburbs.find(({ _id }) => _id === option._id));
+        this.updatePostcode(option);
       }
     }
   },
@@ -150,20 +150,32 @@ export default {
     async handleSearch(query) {
       if (query.length) {
         this.isLoading = true;
-        const country = this.country ? (this.country.isoCode === 'GB' ? 'England' : (this.country.name || this.country)) : 'Australia';
-        this.suburbs = await api.fetchSuburbs({ query, country });
+        const country = this.codeCountry || this.country;
+        const countryName = country ? (country.isoCode === 'GB' ? 'England' : (country.name || country)) : 'Australia';
+        this.suburbs = await api.fetchSuburbs({ query, country: countryName }, this.shop?._id);
         this.options = this.suburbs.map(this.createOptionFromSuburb);
         this.isLoading = false;
       } else {
         this.options = [];
       }
     },
-    createOptionFromSuburb({ locality, state, postcode, city, _id }) {
+    createOptionFromSuburb({ locality, state, postcode, city, _id, address, id }) {
       return {
-        label: [locality || city, state, postcode].filter(i => !!i).join(', '),
+        label: address || [locality || city, state, postcode].filter(i => !!i).join(', '),
         value: postcode,
-        _id: _id
+        _id: id || _id
       };
+    },
+    async updatePostcode(option) {
+      this.selected = option;
+      if (!option.value) {
+        const suburb = await api.fetchAddressInfo(option._id, this.shop?._id);
+        this.$emit('input', suburb.postcode);
+        this.$emit('select', suburb);
+      } else {
+        this.$emit('input', option.value);
+        this.$emit('select', this.suburbs.find(({ _id }) => _id === option._id));
+      }
     }
   }
 };

package/components/common/price.vue

@@ -19,7 +19,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['pricingSettings'])
+    ...mapGetters(['pricingSettings', 'currency'])
   }
 };
 </script>

package/components/common/pricing_table/pricing-table.vue

@@ -71,7 +71,8 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'pricingSettings'
+      'pricingSettings',
+      'currency'
     ]),
     thList() {
       return this.items.map(item => get(item, this.nameAttr));
@@ -138,7 +139,7 @@ export default {
       const printType = this.items.find(item => printTypeName === get(item, this.nameAttr));
       const pricing = get(printType, this.pricingAttr);
       const item = pricing.find(({ min, max }) => (!min || range.min >= min) && (!max || range.min <= max));
-      return item ? (this.withGst ? priceWithTax(item.price, this.pricingSettings) : price(item.price)) : '-';
+      return item ? (this.withGst ? priceWithTax(item.price, this.pricingSettings, this.currency) : price(item.price, this.currency)) : '-';
     }
   }
 };

package/components/common/tabs.vue

@@ -10,7 +10,7 @@
           shadow: btnsShadow
         }"
         @click="select(tab)">
-        <div class="lc_medium18 tab-label">
+        <div class="lc_medium16 tab-label">
           <i
             v-if="tab.icon"
             :class="[tab.icon, 'tab-icon']">
@@ -19,7 +19,7 @@
         </div>
         <div
           v-if="tab.description"
-          class="lc_regular12 lc_grey1 mt-5">
+          class="tab-description lc_regular12 lc_grey1 mt-5">
           {{ tab.description }}
         </div>
       </div>
@@ -98,7 +98,7 @@ export default {
 @import "@/assets/scss/variables";
 
 .tab {
-  flex-grow: .2;
+  flex-basis: 100%;
   display: flex;
   align-items: center;
   border-radius: 2px;
@@ -124,10 +124,10 @@ export default {
     transition: background-color .22s ease-in-out;
   }
   &s--large & {
-    height: 80px;
+    height: 85px;
     flex-direction: column;
     padding: 10px;
-    min-width: 190px;
+    min-width: 130px;
     white-space: normal;
   }
   &s--primary & {
@@ -153,9 +153,6 @@ export default {
     padding: 0 12px;
     position: relative;
   }
-  &-icon {
-    font-size: 26px;
-  }
   &s--large &-label,
   &s--primary &-label,
   &s--secondary &-label {
@@ -180,6 +177,18 @@ export default {
   &.shadow {
     box-shadow: 1px 1px 2px rgb(214, 214, 214);
   }
+  @media (max-width: $bp-medium-max) {
+    .tab-label {
+      font-size: 14px !important;
+      line-height: 20px !important;
+    }
+    .tab-icon {
+      font-size: 14px !important;
+    }
+    .tab-description {
+      font-size: 11px !important;
+    }
+  }
 }
 .fullWidth .tab {
   flex-grow: 1;

package/components/editor/editor.scss

@@ -6,6 +6,12 @@
     justify-content: flex-start;
     padding: 12px 0;
   }
+  &__workspace {
+    @media (min-width: $bp-medium-min) {
+      position: sticky;
+      top: calc(#{$navbar_height} + 20px);
+    }
+  }
   &__content {
     margin-top: -12px;
   }

package/components/editor/editor.vue

@@ -4,7 +4,7 @@
       <breakpoint
         name="md"
         mode="up">
-        <div class="col-md-5 col-12 Editor__col">
+        <div class="col-md-6 col-12 Editor__col">
           <tabs
             :tabs="tabs"
             :selected="selectedTab"
@@ -55,8 +55,10 @@
           </div>
         </div>
       </breakpoint>
-      <div class="col-md-7 col-12 Editor__col">
-        <editor-workspace />
+      <div class="col-md-6 col-12 Editor__col">
+        <client-only>
+          <editor-workspace class="Editor__workspace" />
+        </client-only>
       </div>
     </div>
     <breakpoint
@@ -84,6 +86,7 @@ import EditorProductDetails from './editor_product_details/editor-product-detail
 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';
+import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
 
 const MIN_SCREEN_AMOUNT = 125;
 
@@ -100,7 +103,8 @@ export default {
   },
   mixins: [
     modals,
-    confirmModal
+    confirmModal,
+    addToCartMixin
   ],
   data() {
     return {
@@ -147,9 +151,6 @@ export default {
     productAvailableInCurrentCountry() {
       const { countries } = this.product;
       return !(countries || []).length || countries.includes(this.country._id);
-    },
-    addToCartDisabled() {
-      return !this.usedSimpleProducts.length || (this.product.printOnly && !this.template.layers.length);
     }
   },
   watch: {
@@ -190,7 +191,7 @@ export default {
       this.setEditModeSelectedLayer(false);
     },
     async showResetAllConfirm() {
-      const message = 'Are you sure? Confirmation will delete all layers, quantities and set a T-shirt to white one';
+      const message = 'This will reset the current design. Are you sure?';
       const reset = await this.showConfirmationModal(message);
 
       if (reset) {
@@ -198,23 +199,6 @@ export default {
         this.resetLayers();
       }
     },
-    proceedToCard() {
-      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing, this.layerThumbnails);
-      this.addToCart({ entities, shop: this.shop, pricing: this.productPricing, country: this.country, currency: this.currency });
-      this.showCartModal(async () => {
-        const message = 'Do you wish to continue with editing the current design or reset the editor?';
-        const reset = await this.showConfirmationModal(message, {
-          cancelLabel: 'Keep design',
-          submitLabel: 'Reset editor'
-        });
-        if (reset) {
-          this.clearTemplate();
-          this.resetLayers();
-        } else {
-          this.clearTemplate(true);
-        }
-      });
-    },
     goToDesignAndClosePopover() {
       this.selectTab('design');
       if (this.$refs.popover) {

package/components/editor/editor_layers/editor-layers.scss

@@ -19,4 +19,22 @@
   &__pricing {
     margin-top: 30px;
   }
+}
+.EditorLayersGroup {
+  &__wrapper {
+    margin: 5px 0;
+  }
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: $light_gray;
+    cursor: pointer;
+  }
+  &__arrow {
+    &.opened {
+      transform: rotateZ(-90deg);
+    }
+  }
 }

package/components/editor/editor_layers/editor-layers.vue

@@ -30,37 +30,56 @@
         <editor-layers-toolbar
           @layer-added="handleLayerAdded">
         </editor-layers-toolbar>
-        <div
-          v-if="editableLayers.length"
-          class="EditorLayers__list-content">
-          <div class="EditorLayers__list-header">
-            <h5 class="lc_h5">
-              Layers:
-            </h5>
+        <div v-if="editableLayersGroups.length > 0">
+          <div
+            v-for="group in editableLayersGroups"
+            :key="group.printArea._id"
+            class="EditorLayersGroup__wrapper">
+            <div
+              @click="toggleOpenedGroup(group.printArea)"
+              class="EditorLayersGroup__header">
+              <div>
+                <h5 class="lc_h5">
+                   {{ group.printArea.name }} ({{ group.layers.length }})
+                </h5>
+                <div class="lc_caption">{{ group.printArea.side }}</div>
+              </div>
+              <div
+                class="EditorLayersGroup__arrow"
+                :class="{ opened: openedGroup === group.printArea._id }">
+                <i class="icon-arrow-left"></i>
+              </div>
+            </div>
+            <div
+              class="EditorLayers__list-content"
+              v-if="openedGroup === group.printArea._id">
+              <editor-layers-layer
+                v-for="(layer, index) in group.layers"
+                :key="`${layer.createdAt}-${index}`"
+                :layer="layer"
+                :active="selectedLayer && selectedLayer.createdAt === layer.createdAt"
+                @select="setSelectedLayer(layer)"
+                @edit="editLayer(layer)"
+                @duplicate="duplicateLayer(layer)"
+                @remove="removeLayer(layer)">
+              </editor-layers-layer>
+            </div>
           </div>
-          <editor-layers-layer
-            v-for="(layer, index) in editableLayers"
-            :key="`${layer.createdAt}-${index}`"
-            :layer="layer"
-            :active="selectedLayer && selectedLayer.createdAt === layer.createdAt"
-            @select="setSelectedLayer(layer)"
-            @edit="editLayer(layer)"
-            @duplicate="duplicateLayer(layer)"
-            @remove="removeLayer(layer)">
-          </editor-layers-layer>
         </div>
       </div>
     </transition>
     <editor-pricing
       v-if="hasPricing"
-      class="EditorLayers__pricing" />
+      class="EditorLayers__pricing"
+      :has-cart-btn="false" />
   </div>
 </template>
 
 <script>
 import { createNamespacedHelpers } from 'vuex';
-import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
+import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import { cloneLayerModel } from '@lancom/shared/assets/js/models/product-layers';
+import { getAllPrintAreas } from '@lancom/shared/assets/js/utils/product';
 import EditorLayerForms from './editor_layer_forms';
 import EditorLayersLayer from './editor_layers_layer/editor-layers-layer';
 import EditorLayersToolbar from './editor_layers_toolbar/editor-layers-toolbar';
@@ -75,6 +94,11 @@ export default {
     EditorLayersToolbar,
     EditorPricing
   },
+  data() {
+    return {
+      openedGroup: null
+    };
+  },
   props: {
     hasPricing: {
       type: Boolean,
@@ -83,6 +107,7 @@ export default {
   },
   computed: {
     ...mapGetters([
+      'product',
       'template',
       'editableLayers',
       'selectedLayer',
@@ -91,6 +116,20 @@ export default {
     ]),
     editableLayerType() {
       return this.selectedLayer ? `editor-layer-form-${this.selectedLayer.type}` : null;
+    },
+    editableLayersGroups() {
+      const printAreas = getAllPrintAreas(this.product);
+      const groups = new Map();
+      this.editableLayers.forEach(layer => {
+        const printArea = printAreas.find(pa => pa._id === layer.printArea);
+        if (printArea) {
+          const defaultGroup = { layers: [], printArea };
+          const group = groups.get(printArea._id) || defaultGroup;
+          group.layers.push(layer);
+          groups.set(printArea._id, group);
+        }
+      });
+      return Array.from(groups.values());
     }
   },
   watch: {
@@ -110,9 +149,26 @@ export default {
       'setSelectedLayerField',
       'addTemplateLayer',
       'removeTemplateLayer',
-      'updateTemplateLayer'
+      'updateTemplateLayer',
+      'setEditableSide',
+      'setSelectedPrintArea',
+      'setEditablePrintArea'
     ]),
     ...mapActions(['increaseLayersUpdatesCount']),
+    toggleOpenedGroup(printArea) {
+      this.openedGroup = printArea?._id === this.openedGroup ? null : printArea?._id;
+      if (printArea) {
+        if (this.editableSide.id !== printArea.side) {
+          this.setEditableSide({ id: printArea.side });
+        }
+        this.setEditablePrintArea(printArea);
+        this.setSelectedPrintArea({
+          sideId: printArea.side,
+          printArea: printArea._id,
+          size: printArea.printSize
+        });
+      }
+    },
     handleLayerAdded({ layer, toEditMode }) {
       if (toEditMode) {
         this.editLayer(layer);

package/components/editor/editor_layers/editor_layers_layer/editor-layers-layer.vue

@@ -17,6 +17,12 @@
       </div>
     </div>
     <div class="EditorLayersLayer__content">
+      <!-- <div>
+        <div v-if="layerPrintArea">layerPrintArea: {{ layerPrintArea.name }}</div>
+        <div v-if="layerPrintType">layerPrintType: {{ layerPrintType.name }}</div>
+        <div v-if="layerPrintSize">layerPrintSize: {{ layerPrintSize.name }}</div>
+        <div v-if="side">side: {{ side }}</div>
+      </div> -->
       <div class="EditorLayersLayer__info">
         <div class="EditorLayersLayer__info-row">
           <div class="EditorLayersLayer__badge">
@@ -62,16 +68,14 @@
 </template>
 
 <script>
+import printLayerMixin from '@lancom/shared/mixins/print-layer';
 import { number } from '@lancom/shared/assets/js/utils/filters';
 
 export default {
   name: 'EditorLayersLayer',
+  mixins: [printLayerMixin],
   filters: { number },
   props: {
-    layer: {
-      type: Object,
-      required: true
-    },
     active: {
       type: Boolean,
       default: false
@@ -118,6 +122,9 @@ export default {
         value: `${quality} / ${this.layer.dpi} DPI`
       };
     }
+  },
+  mounted() {
+    console.log('layer: ', this.layer);
   }
 };
 </script>

package/components/editor/editor_print_area_options/editor-print-area-options.vue

@@ -70,6 +70,8 @@ export default {
       const productsOptions = this.getProductOptions();
       const options = productsOptions.filter(({ sides }) => sides.includes(this.side));
       this.options = this.allowNoPrint ? [...options, { label: 'No Print' }] : options;
+
+      this.select(this.options[0]);
     },
     select(option) {
       this.$emit('select', option);
@@ -80,7 +82,10 @@ export default {
         .map(printArea => ({
           ...groupItemToOption(printArea),
           sides: [printArea.side],
-          suboptions: (printArea.sizes || []).map(i => ({ ...groupItemToOption(i), sides: [printArea.side] }))
+          suboptions: [
+            { ...groupItemToOption(printArea), sides: [printArea.side] },
+            ...(printArea.sizes || []).map(i => ({ ...groupItemToOption(i), sides: [printArea.side] }))
+          ]
         }));
     }
   }

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.vue

@@ -100,7 +100,7 @@ export default {
   },
   methods: {
     handleClick() {
-      if (this.option.suboptions && this.option.suboptions.length) {
+      if (this.option.suboptions && this.option.suboptions.length > 1) {
         this.showOptions = !this.showOptions;
       } else {
         this.$emit('select', this.option);
@@ -108,7 +108,7 @@ export default {
     },
     selectSuboption(option) {
       this.closeSuboptions();
-      this.$emit('select', { ...option, printArea: { ...option.printArea, _id: this.option.printArea._id } });
+      this.$emit('select', option);
     },
     calcPrintPrice(option) {
       const amount = this.usedSimpleProducts.reduce((amount, product) => product.amount + amount, 0);

package/components/editor/editor_product_details/editor-product-details.scss

@@ -6,14 +6,20 @@
   &__header {
     display: flex;
     align-items: center;
+    margin-top: 5px;
+    &-logo {
+      img {
+        max-width: 75px;
+        max-height: 55px;
+      }
+    }
     &-info {
-      margin-left: 19px;
+      margin-left: 10px;
       flex-grow: 1;
     }
     &-row {
       display: flex;
       align-items: center;
-      justify-content: space-between;
       & + & {
         margin-top: 5px;
       }

package/components/editor/editor_product_details/editor-product-details.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="EditorProductDetails__wrapper">
+    <h3 class="lc_h3 lc_black">
+      {{ product.name }}
+    </h3>
     <div class="EditorProductDetails__header">
-      <div class="EditorProductDetails__header-logo">
+      <div
+        v-if="product.brand.logo"
+        class="EditorProductDetails__header-logo">
         <img :src="product.brand.logo | staticLink" />
       </div>
       <div class="EditorProductDetails__header-info">
         <div class="EditorProductDetails__header-row">
-          <h3 class="lc_h3 lc_black">
-            {{ product.name }}
-          </h3>
           <span
             v-if="defaultSimpleProduct && defaultSimpleProduct.pricing[0]"
             class="lc_regular16 lc_grey1">
@@ -27,18 +29,7 @@
               </template>
             </v-popover>
           </span>
-        </div>
-        <div class="EditorProductDetails__header-row">
-          <span class="EditorProductDetails__product-link">
-            SKU:
-            <a
-              :href="productLink"
-              target="_blank">
-              {{ product.SKU }}
-              <i class="icon-blank"></i>
-            </a>
-          </span>
-          <span class="lc_regular16 lc_grey1">
+          <span class="lc_regular16 lc_grey1 ml-6">
             +
             <v-popover
               ref="popover"
@@ -59,6 +50,17 @@
             </v-popover>
           </span>
         </div>
+        <div class="EditorProductDetails__header-row">
+          <span class="EditorProductDetails__product-link">
+            SKU:
+            <a
+              :href="productLink"
+              target="_blank">
+              {{ product.SKU }}
+              <i class="icon-blank"></i>
+            </a>
+          </span>
+        </div>
       </div>
     </div>
     <div
@@ -69,13 +71,10 @@
     <fragment
       v-if="productDetailsLoaded && productAvailableInCurrentCountry">
       <div class="EditorProductDetails__section">
-        <product-colors-selector />
-      </div>
-      <div class="EditorProductDetails__section">
-        <editor-pricing />
+        <product-colors-selector :has-another-print-btn="false" />
       </div>
       <div class="EditorProductDetails__section">
-        <product-size-selector />
+        <editor-pricing :has-cart-btn="false" />
       </div>
     </fragment>
   </div>
@@ -83,9 +82,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import ProductColorsSelector from '@lancom/shared/components/product/layouts/product_colors_selector/product-colors-selector';
-import ProductSizeSelector from '@lancom/shared/components/product/product_size_selector/product-size-selector';
-import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
+import ProductColorsSelector from '@lancom/shared/components/product/product_colors_selector/product-colors-selector';
+import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
 import modals from '@lancom/shared/mixins/modals';
 import { staticLink, priceWithTax } from '@lancom/shared/assets/js/utils/filters';
@@ -96,7 +94,6 @@ export default {
   name: 'EditorProductDetails',
   components: {
     ProductColorsSelector,
-    ProductSizeSelector,
     PricingDiscountsTable,
     EditorPricing,
     PricingTable

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

@@ -17,13 +17,14 @@
     </div>
     <editor-pricing
       v-if="hasPricing"
+      :has-cart-btn="false"
       class="EditorWizard__pricing" />
   </div>
 </template>
 
 <script>
 import { mapGetters, mapMutations } from 'vuex';
-import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
+import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import Wizard from '@lancom/shared/components/product/wizard/wizard';
 
 export default {