@lancom/shared 0.0.431 → 0.0.433

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

@@ -5,28 +5,17 @@
         name="header"
         :invalid="invalid">
       </slot>
+
+      <div class="EditorLayerFormText__preview">
+        <canvas ref="previewCanvas"></canvas>
+      </div>
+
+      <slot
+        name="after-canvas"
+        :invalid="invalid">
+      </slot>
+
       <div class="EditorLayerFormText__content" @click.stop>
-        <validation-provider
-          tag="div"
-          name="Copy"
-          rules="required|max:100"
-          class="form-row">
-          <label
-            for="copy"
-            class="form-label">
-            Write your text
-          </label>
-          <textarea
-            id="copy"
-            ref="copy"
-            v-model="copy"
-            type="text"
-            name="copy"
-            style="height: 100px;"
-            class="form-field bordered labelless"
-            placeholder="Your text here"
-            :class="{ filled: copy }"></textarea>
-        </validation-provider>
         <div>
           <div
             v-if="copy.includes('\n')"
@@ -174,8 +163,10 @@
 </template>
 
 <script>
+import { fabric } from 'fabric';
 import { inRange } from '@lancom/shared/assets/js/utils/filters';
 import { availableFonts, loadFont } from '@lancom/shared/assets/js/utils/fonts-helper';
+import { createText } from '@lancom/shared/assets/js/utils/fabric/object-factory';
 import ColorPicker from '@lancom/shared/components/common/color-picker';
 import EditorLayerCommonFields from '../editor_layer_common_fields/editor-layer-common-fields';
 import FontFamilySelect from './font-family_select/font-family-select';
@@ -189,6 +180,8 @@ const editableModel = (field, prop) => ({
   set(v) {
     const value = prop && Object.prototype.hasOwnProperty.call(v, prop) ? v[prop] : v;
     this.$emit('set-layer-field', { field, value });
+    this.textObject[field] = value;
+    this.fabricCanvas.renderAll();
   }
 });
 export default {
@@ -204,6 +197,15 @@ export default {
       required: true
     }
   },
+  data() {
+    return {
+      fabricCanvas: null,
+      textObject: null,
+      isEditing: false,
+      isUpdatingFromLayer: false,
+      shouldAutoFocus: true
+    };
+  },
   computed: {
     copy: editableModel('copy'),
     textAlign: editableModel('textAlign'),
@@ -229,6 +231,8 @@ export default {
         value = inRange(value || 0, -300, 300);
         this.$emit('set-layer-field', { field: 'charSpacing', value });
         this.$refs.charSpacing.value = value;
+
+        this.textObject.charSpacing = value;
       }
     },
     strokeWidth: {
@@ -239,12 +243,23 @@ export default {
         value = inRange(value, 1, 30);
         this.$emit('set-layer-field', { field: 'strokeWidth', value });
         this.$refs.strokeWidth.value = value;
+
+        this.textObject.strokeWidth = value;
       }
     },
     fontFamily_options() {
       return availableFonts.map(({ label, alias }) => ({ label, value: alias }));
     }
   },
+  mounted() {
+    this.initFabricCanvas();
+    this.renderLayer();
+  },
+  beforeDestroy() {
+    if (this.fabricCanvas) {
+      this.fabricCanvas.dispose();
+    }
+  },
   methods: {
     async selectFont({ value }) {
       const font = await loadFont(value);
@@ -269,6 +284,84 @@ export default {
     },
     decreaseStrokeWidth() {
       this.strokeWidth -= 1;
+    },
+    initFabricCanvas() {
+      if (this.$refs.previewCanvas) {
+        this.fabricCanvas = new fabric.Canvas(this.$refs.previewCanvas, {
+          width: 300,
+          height: 200,
+          uniScaleTransform: false
+        });
+        this.fabricCanvas.renderOnAddRemove = false;
+        this.setupCanvasListeners();
+      }
+    },
+    setupCanvasListeners() {
+      this.fabricCanvas.on('text:editing:entered', () => {
+        this.isEditing = true;
+      });
+      this.fabricCanvas.on('text:editing:exited', () => {
+        this.isEditing = false;
+        if (this.textObject) {
+          this.syncTextFromCanvas();
+        }
+      });
+      this.fabricCanvas.on('object:modified', () => {
+        if (this.textObject) {
+          this.syncTextFromCanvas();
+        }
+      });
+    },
+    async renderLayer() {
+      try {
+        const layerWithDefaults = {
+          ...this.layer,
+          fontSize: 60,
+          copy: this.layer.copy || ' '
+        };
+        const textObj = await createText(layerWithDefaults);
+
+        const canvasCenterX = this.fabricCanvas.width / 2;
+        const canvasCenterY = this.fabricCanvas.height / 2;
+        textObj.set({
+          left: canvasCenterX,
+          top: canvasCenterY,
+          originX: 'center',
+          originY: 'center',
+          selectable: true,
+          evented: true,
+          hasControls: false,
+          hasBorders: false,
+          lockMovementX: true,
+          lockMovementY: true,
+          lockScalingX: true,
+          lockScalingY: true,
+          lockRotation: true,
+          lockUniScaling: true,
+          hoverCursor: 'text'
+        });
+
+        textObj.on('changed', () => {
+          this.syncTextFromCanvas();
+        });
+
+        this.fabricCanvas.add(textObj);
+        this.fabricCanvas.renderAll();
+        this.textObject = textObj;
+
+        this.$nextTick(() => {
+          this.fabricCanvas.setActiveObject(textObj);
+          textObj.enterEditing();
+        });
+      } catch (error) {
+        console.error('Error rendering layer:', error);
+      }
+    },
+    syncTextFromCanvas() {
+      if (!this.textObject || this.isUpdatingFromLayer) {
+        return;
+      }
+      this.copy = this.textObject.text;
     }
   }
 };

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

@@ -71,5 +71,19 @@
         background-color: $green;
       }
     }
+    &-message {
+      padding: 8px 10px;
+      justify-content: center;
+      align-items: center;
+      background: linear-gradient(180deg, #2254BD 50%, #194BB3 50%);
+      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
+      color: #FFF;
+      font-size: 14px;
+      font-weight: 300;
+      line-height: 20px;
+      display: block;
+      width: 100%;
+      margin-bottom: 10px;
+    }
   }
-}
+}

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

@@ -57,15 +57,26 @@
 
     <div
       class="EditorLayersToolbar__option"
+      :class="{
+        disabled: disabledTemplates
+      }"
       @click="openPrintTemplates()">
-      <i class="icon-layer-templates EditorLayersToolbar__option-icon"></i>
+      <div
+        v-if="disabledTemplates"
+        class="EditorLayersToolbar__option-message">
+        Coming Soon
+      </div>
+      <i
+        v-else
+        class="icon-layer-templates EditorLayersToolbar__option-icon"></i>
       <div class="lc_black">
-        Templates
+        Stock Artwork
       </div>
       <div class="lc_regular14 lc_grey1 mt-5 hidden-sm-and-down">
-        Get inspired
+        Add stars, hearts and other special effects
       </div>
       <v-popover
+        v-if="!disabledTemplates"
         trigger="hover"
         class="EditorLayersToolbar__popover hidden-sm-and-down">
         <i class="icon-info-circled EditorLayersToolbar__info"></i>
@@ -92,6 +103,12 @@ export default {
   mixins: [
     modals
   ],
+  props: {
+    disabledTemplates: {
+      type: Boolean,
+      default: false
+    }
+  },
   computed: {
     ...mapGetters(['shop']),
     ...mapGetters('product', ['product'])

package/components/editor/editor_workspace/editor-workspace.vue

@@ -31,7 +31,9 @@
                   :key="side"
                   :side="side"
                   :print-area="editablePrintArea"
+                  :zoom-size="sideZoomSize"
                   :print-area-size="selectedPrintArea"
+                  :visible-background-image="visibleBackgroundImage"
                   :class="side"
                   class="EditorWorkspace__side rotate-y-element">
                 </editor-workspace-side>
@@ -68,6 +70,7 @@
                 :print-area-size="selectedPrintArea"
                 :class="editableSide.id"
                 :zoom-size="sideZoomSize"
+                :visible-background-image="visibleBackgroundImage"
                 class="EditorWorkspace__side rotate-y-element"
                 @workspace="onWorkspaceChange($event)">
               </editor-workspace-side>
@@ -142,6 +145,14 @@ export default {
     visiblePrintAreaOptions: {
       type: Boolean,
       default: true
+    },
+    skipPreloadingEditor: {
+      type: Boolean,
+      default: false
+    },
+    visibleBackgroundImage: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -218,7 +229,12 @@ export default {
     }
   },
   mounted() {
-    this.preloadingEditor();
+    if (this.skipPreloadingEditor) {
+      this.preloading = false;
+      this.toggleSide(this.editableSide.id);
+    } else {
+      this.preloadingEditor();
+    }
   },
   methods: {
     ...mapMutations([
@@ -266,11 +282,6 @@ export default {
     selectPrintArea(pa) {
       const { printArea, size } = pa || {};
       const oldPrintArea = this.editablePrintArea;
-      // console.log('');
-      // console.log('selectPrintArea: ');
-      // console.log('oldPrintArea: ', oldPrintArea);
-      // console.log('printArea: ', printArea);
-      // console.log('this.editableLayers: ', this.editableLayers);
       this.setEditablePrintArea(printArea);
       const oldPaId = oldPrintArea?.parentPrintArea || oldPrintArea?._id;
       const paId = printArea?.parentPrintArea || printArea?._id;

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -161,6 +161,10 @@ export default {
     },
     zoomSize: {
       type: Number
+    },
+    visibleBackgroundImage: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -411,27 +415,28 @@ export default {
       return this.selectedLayer && this.selectedLayer.createdAt === layer.createdAt;
     },
     updateBackgroundImage() {
-      // console.log(this.calcWorkspaceSize(true));
-      const isMedium = this.calcWorkspaceSize(true) <= 400;
-      const type = this.side === 'front' ? COLORS_IMAGES_TYPES.FRONT : COLORS_IMAGES_TYPES.BACK;
-      const wireframeImageUrl = this.visibleWireframe && (isMedium ? this.wireframeImage?.medium : this.wireframeImage?.large);
-      const onpressImageUrl = this.visibleOnpress && (isMedium ? this.onpressImage?.medium : this.onpressImage?.large);
-      const getter = isMedium ? getMediumColorImage : getLargeColorImage;
-      const imageUrl = wireframeImageUrl || onpressImageUrl || getter(this.product, type, this.editableColor, false, ['wireframe']);
-      if (this.backgroundImage && this.backgroundImageUrl === imageUrl) {
-        return this.fabricHelper.setBackgroundImage(this.backgroundImage);
-      }
-
-      this.backgroundImageLoaded = false;
-      this.backgroundImageUrl = imageUrl;
-      fabric.Image.fromURL(imageUrl, image => {
-        if (this.backgroundImageUrl === imageUrl) {
-          image.scale(this.editorSize.width / image.width);
-          this.backgroundImage = image;
-          this.backgroundImageLoaded = true;
-          this.fabricHelper.setBackgroundImage(this.backgroundImage);
+      if (this.visibleBackgroundImage) {
+        const isMedium = this.calcWorkspaceSize(true) <= 400;
+        const type = this.side === 'front' ? COLORS_IMAGES_TYPES.FRONT : COLORS_IMAGES_TYPES.BACK;
+        const wireframeImageUrl = this.visibleWireframe && (isMedium ? this.wireframeImage?.medium : this.wireframeImage?.large);
+        const onpressImageUrl = this.visibleOnpress && (isMedium ? this.onpressImage?.medium : this.onpressImage?.large);
+        const getter = isMedium ? getMediumColorImage : getLargeColorImage;
+        const imageUrl = wireframeImageUrl || onpressImageUrl || getter(this.product, type, this.editableColor, false, ['wireframe']);
+        if (this.backgroundImage && this.backgroundImageUrl === imageUrl) {
+          return this.fabricHelper.setBackgroundImage(this.backgroundImage);
         }
-      });
+
+        this.backgroundImageLoaded = false;
+        this.backgroundImageUrl = imageUrl;
+        fabric.Image.fromURL(imageUrl, image => {
+          if (this.backgroundImageUrl === imageUrl) {
+            image.scale(this.editorSize.width / image.width);
+            this.backgroundImage = image;
+            this.backgroundImageLoaded = true;
+            this.fabricHelper.setBackgroundImage(this.backgroundImage);
+          }
+        });
+      }
     },
     removeSelected() {
       this.removeTemplateLayer(this.selectedLayer);

package/components/product/add-to-cart-btn.vue

@@ -1,10 +1,14 @@
 <template>
   <btn
-    btn-class="green"
+    :btn-class="btnClass"
     btn-label="Add to cart"
     :btn-disabled="addToCartDisabled"
     :btn-processing="addingToCart"
-    @onclick="proceedToCard" />
+    @onclick="proceedToCard">
+    <template slot="icon-before">
+      <slot name="icon-before"></slot>
+    </template>
+  </btn>
 </template>
 
 <script>
@@ -12,7 +16,13 @@ import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
 
 export default {
   name: 'AddToCartBtn',
-  mixins: [addToCartMixin]
+  mixins: [addToCartMixin],
+  props: {
+    btnClass: {
+      type: String,
+      default: 'green'
+    }
+  }
 };
 </script>
 

package/components/product/editor_pricing/editor-pricing.scss

@@ -31,6 +31,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    position: relative;
     @media (max-width: $bp-extra-small-max) {
       flex-wrap: wrap;
       justify-content: center;
@@ -75,4 +76,4 @@
   &.disabled {
     background-color: $gray;
   }
-}
+}

package/components/product/editor_pricing/editor-pricing.vue

@@ -89,9 +89,11 @@
             @click="toggleDetails">
             {{ showDetails ? 'Hide' : 'Show' }} detail
           </div>
-          <add-to-cart-btn
-            v-if="hasCartBtn"
-            class="EditorPricing__add-to-cart-button" />
+          <slot>
+            <add-to-cart-btn
+              v-if="hasCartBtn"
+              class="EditorPricing__add-to-cart-button" />
+          </slot>
         </div>
       </div>
     </div>

package/components/product/other_products/other_product/other-product.scss

@@ -40,6 +40,15 @@
     text-decoration: none;
   }
 
+  &__sku {
+    color: #6b7280;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+    margin-top: 4px;
+  }
+
   &__pill {
     padding: 8px 14px;
     background: #e9efff;

package/components/product/other_products/other_product/other-product.vue

@@ -16,21 +16,34 @@
           {{ product.name }}
         </a>
       </div>
+      <div
+        v-if="product.SKU"
+        class="OtherProduct__sku">
+        sku: {{ product.SKU }}
+      </div>
       <div
         v-if="product.isClearance"
         class="OtherProduct__price">
-        <span v-if="product.oldPrice" class="OtherProduct__price-old">
-          {{ minPrice | price }}
+        <span
+          v-if="product.oldPrice"
+          class="OtherProduct__price-old">
+          <price
+            :price="minPrice"
+            :with-gst="priceIncludeGST" />
         </span>
         <span class="OtherProduct__price-current">
-          {{ product.minPrice | price }}
+          <price
+            :price="product.minPrice"
+            :with-gst="priceIncludeGST" />
         </span>
       </div>
       <div
         v-else
         class="OtherProduct__price">
         <span class="OtherProduct__price-current">
-          {{ minPrice | price }}
+          <price
+            :price="minPrice"
+            :with-gst="priceIncludeGST" />
         </span>
       </div>
     </div>
@@ -39,18 +52,14 @@
 
 <script>
 import productPreview from '@lancom/shared/mixins/product-preview';
-import { mapGetters } from 'vuex';
-import { price } from '@lancom/shared/assets/js/utils/filters';
+import Price from '@lancom/shared/components/common/price';
 
 export default {
   name: 'OtherProduct',
-  filters: {
-    price
+  components: {
+    Price
   },
-  mixins: [productPreview],
-  computed: {
-    ...mapGetters(['currency'])
-  }
+  mixins: [productPreview]
 };
 </script>
 

package/components/product/product_check_delivery/product-check-delivery.scss

@@ -28,4 +28,119 @@
   &__postcode {
     margin-top: 18px;
   }
+
+  &__warning {
+    margin-top: 18px;
+    padding: 12px 16px;
+    background-color: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+
+    i {
+      color: #856404;
+      font-size: 18px;
+    }
+
+    span {
+      color: #856404;
+      font-size: 14px;
+      flex: 1;
+    }
+  }
+
+  &__recalculate-btn {
+    background-color: #ffc107;
+    color: #856404;
+    border: 1px solid #ffc107;
+    padding: 6px 12px;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: #ffb300;
+    }
+
+    &:active {
+      background-color: #ffa000;
+    }
+  }
+
+  &__pricing {
+    margin-top: 18px;
+    padding: 16px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+  }
+
+  &__pricing-title {
+    font-weight: 600;
+    font-size: 14px;
+    color: #0A0A0A;
+    margin-bottom: 12px;
+  }
+
+  &__pricing-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__pricing-item {
+    font-size: 12px;
+    color: #737373;
+  }
+
+  &__pricing-total {
+    margin-top: 8px;
+    font-weight: 700;
+    font-size: 14px;
+    color: #0A0A0A;
+    padding-top: 8px;
+    border-top: 1px solid #e0e0e0;
+  }
+
+  &__calculating {
+    margin-top: 18px;
+    padding: 12px;
+    text-align: center;
+    color: #737373;
+    font-size: 14px;
+  }
+
+  &__recalc-warning {
+    margin-top: 18px;
+    margin-bottom: 8px;
+    padding: 12px 16px;
+    background-color: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+
+    span {
+      color: #856404;
+      font-size: 14px;
+      flex: 1;
+    }
+    .Btn__wrapper {
+      font-size: 12px;
+      padding: 6px;
+      height: 30px;
+    }
+  }
+
+  &__shipping {
+    margin-top: -8px;
+  }
 }
+
+@import '../../checkout/cart/cart_shipments_pricing/cart-shipments-pricing.scss';