@lancom/shared 0.0.432 → 0.0.433

package/assets/js/api/index.js

@@ -42,7 +42,7 @@ const api = {
     return _get(`shop/${shop}/customer/${customer._id}/coupons`);
   },
   fetchChildrenCategories(category, params) {
-    return _get(`category/${category}/children`, params);
+    return _get(`category/${category || 'null'}/children`, params);
   },
   searchProducts(shop, text, save) {
     return _get(`shop/${shop}/products/search`, { text, save });

package/components/checkout/cart/cart.vue

@@ -31,9 +31,7 @@
               @suburb="handleSuburbChange" />
             <cart-price-info @loaded="loadedPricing($event)" />
           </div>
-          <div class="Cart__postcode-container">
-
-          </div>
+          <div class="Cart__postcode-container"></div>
           <div class="Cart__coupon-container">
             <coupon-select
               v-model="cartCoupon"

package/components/checkout/cart/cart_entity/cart_entity_color_simple_products/cart-entity-color-simple-products.mixin.js

@@ -33,7 +33,9 @@ export default {
   computed: {
     ...mapGetters('cart', [
       'cartPricing',
-      'cartProductsPricing'
+      'cartProductsPricing',
+      'cartPricingCalculating',
+      'cartSaving'
     ]),
     images() {
       return getProductColorImages(this.group, this.group.color);

package/components/checkout/cart/cart_entity/cart_entity_color_simple_products/cart-entity-color-simple-products.scss

@@ -3,9 +3,9 @@
 .CartEntityColorSimpleProducts {
   &__wrapper {
     display: flex;
-    position: relative; 
+    position: relative;
     @media (max-width: $bp-extra-small-max) {
-      flex-direction: column; 
+      flex-direction: column;
       align-items: center;
     }
   }
@@ -98,4 +98,16 @@
     font-size: 20px;
     cursor: pointer;
   }
+  &__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }

package/components/checkout/cart/cart_entity/cart_entity_color_simple_products/cart-entity-color-simple-products.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="CartEntityColorSimpleProducts__wrapper">
+    <div
+      v-if="isLoading"
+      class="CartEntityColorSimpleProducts__overlay">
+      <spinner />
+    </div>
     <div class="CartEntityColorSimpleProducts__image-wrapper">
       <div
         class="CartEntityColorSimpleProducts__image"
@@ -52,7 +57,6 @@
               class="lc_title-small mt-8">
               &nbsp;
             </div>
-            
           </div>
           <cart-entity-color-simple-product
             v-for="simpleProduct in group.simpleProducts"
@@ -97,6 +101,7 @@
 <script>
 import { price } from '@lancom/shared/assets/js/utils/filters';
 import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+import Spinner from '@lancom/shared/components/common/spinner';
 import CartEntityColorSimpleProduct from './cart_entity_color_simple_product/cart-entity-color-simple-product';
 import CartEntityColorSimpleProducts from './cart-entity-color-simple-products.mixin';
 
@@ -107,11 +112,17 @@ export default {
   },
   components: {
     CartEntityColorSimpleProduct,
-    ProductSideWithPrint
+    ProductSideWithPrint,
+    Spinner
   },
   mixins: [
     CartEntityColorSimpleProducts
   ],
+  computed: {
+    isLoading() {
+      return this.cartPricingCalculating || this.cartSaving;
+    }
+  },
   methods: {
     onChangeQty() {}
   }

package/components/checkout/cart/cart_entity/cart_entity_color_simple_products/cart_entity_color_simple_product/cart-entity-color-simple-product.scss

@@ -32,7 +32,7 @@
     font-size: 14px;
     line-height: 19px;
     text-align: center;
-    color: #A2A2A2;
+    color: #232323;
     border-radius: 0;
     padding: 2px !important;
 
@@ -82,4 +82,4 @@
       left: 0px;
     }
   }
-}
+}

package/components/checkout/cart/cart_shipping/cart-shipping.vue

@@ -88,7 +88,7 @@ export default {
       return this.MESSAGES.CART_POSTCODE_INFO || 'Enter postcode to calculate shipping';
     },
     onlyPostcode() {
-      return !!this.SETTINGS.CART_ONLY_POSTCODE && this.country?.isoCode === 'UK';
+      return !!this.SETTINGS.CART_ONLY_POSTCODE && this.country?.isoCode === 'GB';
     },
     postcodeLabel() {
       return this.onlyPostcode ? 'Postcode' : (this.MESSAGES.CART_POSTCODE || 'Postcode');

package/components/checkout/order/order-payment-information/order-payment-information.vue

@@ -35,6 +35,7 @@
             </span>
           </label>
           <label
+            v-if="availableApplePayment"
             class="form-label OrderPaymentInformation__checkbox"
             @click="updatePaymentType('apple')">
             <checked-icon :checked="paymentMethod === 'apple'" />
@@ -43,6 +44,7 @@
             </span>
           </label>
           <label
+            v-if="availablePaypalPayment"
             class="form-label OrderPaymentInformation__checkbox"
             @click="updatePaymentType('paypal')">
             <checked-icon :checked="paymentMethod === 'paypal'" />
@@ -143,11 +145,17 @@ export default {
   },
   computed: {
     ...mapGetters('auth', ['user']),
-    ...mapGetters(['MESSAGES']),
+    ...mapGetters(['MESSAGES', 'SETTINGS']),
     ...mapGetters(['country', 'currency', 'app', 'googleClickId']),
     ...mapGetters(['orderSettings']),
     ...mapGetters('order', ['card']),
-    ...mapGetters('cart', ['entities', 'notEmptySimpleProducts', 'cartPricing'])
+    ...mapGetters('cart', ['entities', 'notEmptySimpleProducts', 'cartPricing']),
+    availableApplePayment() {
+      return !this.SETTINGS?.HIDDEN_APPLE_PAYMENT
+    },
+    availablePaypalPayment() {
+      return !this.SETTINGS?.HIDDEN_PAYPAL_PAYMENT
+    }
   },
   watch: {
     isDepositPayment() {

package/components/customer/customer.vue

@@ -1,23 +1,19 @@
 <template>
   <div class="CustomerPage__wrapper">
     <div class="row">
-      <div class="col-12">
-        <div class="CustomerPage__controls">
-          <div>
-            <btn
-              :btn-class="isRegister ? 'white' : 'green'"
-              btn-label="LOG IN"
-              :btn-block="true"
-              @onclick="isRegister = false" />
-          </div>
-          <div>
-            <btn
-              :btn-class="isRegister ? 'green' : 'white'"
-              btn-label="REGISTER"
-              :btn-block="true"
-              @onclick="isRegister = true" />
-          </div>
-        </div>
+      <div class="col-sm-6 col-12">
+        <btn
+          :btn-class="isRegister ? 'white' : 'green'"
+          btn-label="LOG IN"
+          :btn-block="true"
+          @onclick="isRegister = false" />
+      </div>
+      <div class="col-sm-6 col-12">
+        <btn
+          :btn-class="isRegister ? 'green' : 'white'"
+          btn-label="REGISTER"
+          :btn-block="true"
+          @onclick="isRegister = true" />
       </div>
     </div>
     <div class="row">

package/components/customer/customer_form/customer-form.vue

@@ -172,8 +172,10 @@
           <div class="col-12">
             <postcode-select
               :suburb="customer.suburb"
+              :only-postcode="onlyPostcode"
               :labelless="true"
-              placeholder="Suburb"
+              :label-text="onlyPostcode ? 'Postcode' : 'Address'"
+              :placeholder="onlyPostcode ? 'Postcode' : 'Suburb'"
               @select="handleSuburbChange">
             </postcode-select>
             <div class="form-row">
@@ -232,7 +234,10 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop'])
+    ...mapGetters(['shop', 'SETTINGS', 'country']),
+    onlyPostcode() {
+      return !!this.SETTINGS.CART_ONLY_POSTCODE && this.country?.isoCode === 'GB';
+    }
   },
   methods: {
     async submit() {

package/components/editor/editor_colors/editor-colors.scss

@@ -14,7 +14,7 @@
   }
   &__color {
     width: 114px;
-    height: 142px;
+    min-height: 142px;
     border-radius: 12px;
     border: #EFEFEF;
     background: #EFEFEF;
@@ -26,15 +26,18 @@
       margin: 0px;
       border-radius: 12px;
       overflow: hidden;
+      background: #fff;
     }
     &-name {
       display: flex;
       padding: 4px 10px;
       text-align: center;
       overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       margin-top: 2px;
+      color: #000;
+      font-size: 14px;
+      font-weight: 300;
+      line-height: 20px;
     }
   }
   &__divider {

package/components/editor/editor_colors/editor-colors.vue

@@ -12,7 +12,7 @@
           :product="product"
           :side="editableSide.id"
           :color="color"
-          :fill-background="true"
+          :fill-background="false"
           :default-preview="false"
           class="EditorColors__color-image">
         </product-side-with-print>

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

@@ -24,6 +24,45 @@
   &__pricing {
     margin-top: 30px;
   }
+  &__list {
+    &--placeholder {
+      height: 350px;
+      background-image: url(~/static/images/empty-layers.png);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 374px 98px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  &__empty {
+    width: 306px;
+    margin-top: 175px;
+    &-header {
+      color: #18181B;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 22px;
+    }
+    &-description {
+      color: #71717A;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 300;
+      line-height: 20px;
+    }
+  }
+  &__workspace {
+    height: 700px;
+    position: relative;
+    ::v-deep {
+      .tabs--primary {
+        display:  none !important;
+      }
+    }
+  }
 }
 .EditorLayersGroup {
   &__wrapper {
@@ -42,4 +81,4 @@
       transform: rotateZ(-90deg);
     }
   }
-}
+}

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

@@ -3,79 +3,105 @@
     <transition
       name="fade"
       mode="out-in">
-      <div
-        v-if="editModeSelectedLayer"
-        key="edit"
-        ignore-document-click
-        class="EditorLayers__edit-layer-container view-transition">
-        <component
-          :is="editableLayerType"
-          :layer="selectedLayer"
-          @set-layer-field="setLayerField">
-          <template v-slot:header="{ invalid }">
-            <div class="EditorLayers__close-wrapper">
-              <div
-                class="lc_regular16 EditorLayers__close-editable"
-                @click="closeEditableLayer(invalid)">
-                <i class="icon-arrow-left EditorLayers__close-editable-icon"></i>
-                See all design layers
+      <div>
+        <div
+          v-if="editModeSelectedLayer"
+          key="edit"
+          ignore-document-click
+          class="EditorLayers__edit-layer-container view-transition">
+          <component
+            :is="editableLayerType"
+            :layer="selectedLayer"
+            @set-layer-field="setLayerField">
+            <template #header="{ invalid }">
+              <div class="EditorLayers__close-wrapper">
+                <div
+                  class="lc_regular16 EditorLayers__close-editable"
+                  @click="closeEditableLayer(invalid)">
+                  <i class="icon-arrow-left EditorLayers__close-editable-icon"></i>
+                  See all design layers
+                </div>
+                <div>
+                  <btn
+                    btn-class="green"
+                    btn-label="Save"
+                    @onclick="closeEditableLayer(invalid)" />
+                </div>
+              </div>
+            </template>
+            <template #after-canvas="{ invalid }">
+              <editor-print-area-options
+                v-if="selectedLayer"
+                :selected="selectedLayerPrintArea"
+                :side="selectedLayer.sideId"
+                :product="product"
+                :layers="editableLayers"
+                @select="handlePrintAreaSelect" />
+            </template>
+          </component>
+        </div>
+        <div
+          v-else
+          key="list"
+          ignore-document-click
+          class="EditorLayers__list-wrapper">
+          <editor-layers-toolbar
+            :disabled-templates="disabledTemplates"
+            @layer-added="handleLayerAdded">
+          </editor-layers-toolbar>
+          <div
+            v-if="editableLayersGroups.length === 0"
+            class="EditorLayers__list EditorLayers__list--placeholder">
+            <div class="EditorLayers__empty">
+              <div class="EditorLayers__empty-header">
+                No layers yet
               </div>
-              <div>
-                <btn
-                  btn-class="green"
-                  btn-label="Save"
-                  @onclick="closeEditableLayer(invalid)" />
+              <div class="EditorLayers__empty-description">
+                Start building your design by adding text or artwork. Your layers will appear here.
               </div>
             </div>
-          </template>
-        </component>
-      </div>
-      <div
-        v-else
-        key="list"
-        ignore-document-click
-        class="EditorLayers__list-wrapper view-transition">
-        <editor-layers-toolbar
-          @layer-added="handleLayerAdded">
-        </editor-layers-toolbar>
-        <div v-if="editableLayersGroups.length > 0">
+          </div>
           <div
-            v-for="group in editableLayersGroups"
-            :key="group.printArea._id"
-            class="EditorLayersGroup__wrapper">
+            v-else
+            class="EditorLayers__list">
             <div
-              @click="toggleOpenedGroup(group.printArea)"
-              class="EditorLayersGroup__header">
-              <div>
-                <h5 class="lc_h5">
-                  {{ group | groupLabel }}
-                </h5>
-                <div class="lc_caption">{{ group.printArea.side }}</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 | groupLabel }}
+                  </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="EditorLayersGroup__arrow"
-                :class="{ opened: openedGroup === group.printArea._id }">
-                <i class="icon-arrow-left"></i>
+                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"
+                  :visible-move-up="layer !== group.layers[0]"
+                  :visible-move-down="layer !== group.layers[group.layers.length - 1]"
+                  @select="setSelectedLayer(layer)"
+                  @edit="editLayer(layer)"
+                  @duplicate="duplicateLayer(layer)"
+                  @remove="removeLayer(layer)"
+                  @up="moveUp(layer)"
+                  @down="moveDown(layer)">
+                </editor-layers-layer>
               </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"
-                :visible-move-up="layer !== group.layers[0]"
-                :visible-move-down="layer !== group.layers[group.layers.length - 1]"
-                @select="setSelectedLayer(layer)"
-                @edit="editLayer(layer)"
-                @duplicate="duplicateLayer(layer)"
-                @remove="removeLayer(layer)"
-                @up="moveUp(layer)"
-                @down="moveDown(layer)">
-              </editor-layers-layer>
-            </div>
           </div>
         </div>
       </div>
@@ -91,6 +117,7 @@
 <script>
 import { createNamespacedHelpers } from 'vuex';
 import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
+import EditorPrintAreaOptions from '@lancom/shared/components/editor/editor_print_area_options/editor-print-area-options';
 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';
@@ -108,6 +135,7 @@ export default {
   },
   components: {
     ...EditorLayerForms,
+    EditorPrintAreaOptions,
     EditorLayersLayer,
     EditorLayersToolbar,
     EditorPricing
@@ -116,6 +144,10 @@ export default {
     hasPricing: {
       type: Boolean,
       default: true
+    },
+    disabledTemplates: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -130,7 +162,8 @@ export default {
       'editableLayers',
       'selectedLayer',
       'editModeSelectedLayer',
-      'editableSide'
+      'editableSide',
+      'selectedPrintArea'
     ]),
     editableLayerType() {
       return this.selectedLayer ? `editor-layer-form-${this.selectedLayer.type}` : null;
@@ -138,8 +171,9 @@ export default {
     editableLayersGroups() {
       const printAreas = getAllPrintAreas(this.product);
       const groups = new Map();
+      console.log('this.editableLayers: ', this.editableLayers);
       this.editableLayers.forEach(layer => {
-        const printArea = printAreas.find(pa => (pa.parentPrintArea || pa._id) === layer.printArea && pa.printSize._id === layer.printSize) || { _id: null, name: 'Layers'};
+        const printArea = printAreas.find(pa => (pa.parentPrintArea || pa._id) === layer.printArea && pa.printSize._id === layer.printSize) || { _id: null, name: 'Layers' };
         if (printArea) {
           const defaultGroup = { layers: [], printArea };
           const group = groups.get(printArea._id) || defaultGroup;
@@ -148,6 +182,9 @@ export default {
         }
       });
       return Array.from(groups.values());
+    },
+    selectedLayerPrintArea() {
+      return this.selectedLayer.printArea;
     }
   },
   watch: {
@@ -192,7 +229,7 @@ export default {
     toggleOpenedGroup(printArea, foreOpen) {
       this.openedGroup = (printArea?._id === this.openedGroup && !foreOpen) ? null : printArea?._id;
       if (printArea) {
-        if (this.editableSide.id !== printArea.side) {
+        if (printArea.side && this.editableSide.id !== printArea.side) {
           this.setEditableSide({ id: printArea.side });
         }
         this.setEditablePrintArea(printArea);
@@ -240,6 +277,14 @@ export default {
         this.setSelectedLayer(null);
       }
       this.setEditModeSelectedLayer(false);
+    },
+    handlePrintAreaSelect(option) {
+      const printArea = option.printArea;
+      this.setLayerField({ field: 'printArea', value: printArea.parentPrintArea || printArea._id });
+
+      const printSize = printArea.printSize._id;
+      this.setLayerField({ field: 'printSize', value: printSize });
+      console.log('handlePrintAreaSelect: ', option, this.selectedLayer);
     }
   }
 };

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/editor-layer-form-text.scss

@@ -1,6 +1,24 @@
 @import "@/assets/scss/variables";
 
 .EditorLayerFormText {
+  &__preview {
+    padding: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 16px;
+    background: #fff;
+    position: relative;
+    canvas {
+      background: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: border-color 0.2s ease;
+      &:hover {
+        border-color: #7D6AEF;
+      }
+    }
+  }
   &__content {
     padding-top: 24px;
   }
@@ -46,4 +64,4 @@
     align-items: center;
     justify-content: space-between;
   }
-}
+}