@lancom/shared 0.0.434 → 0.0.436

package/assets/js/models/product-layers.js

@@ -26,7 +26,7 @@ export class Layer {
   cornerSize = 13;
   cornerStyle = 'circle';
   lockScalingFlip = true;
-  padding = 0;
+  padding = 5;
   selectionDashArray = [10, 5];
   borderDashArray = [5, 3];
   cornerDashArray = [10, 5];

package/components/common/file_uploader.vue

@@ -11,6 +11,7 @@
         <slot name="toggle" :uploading="uploading"></slot>
         <slot name="progress" :progress="progress"></slot>
         <input
+          :id="'fileUpload' + uniqueKey"
           ref="fileUploaderField"
           class="FileUploader__input"
           type="file"
@@ -20,6 +21,10 @@
           :required="required"
           :disabled="disabled || uploading"
           @change="fileChange" />
+        <label
+          :for="'fileUpload' + uniqueKey"
+          class="FileUploader__input-label">
+        </label>
       </div>
     </div>
     <div v-if="hasUploadLink">
@@ -59,14 +64,14 @@ export default {
       rendered: null,
       error: null,
       progress: 0,
-      // timelineLite: new TimelineLite()
+      uniqueKey: Math.random()
     };
   },
   methods: {
     async onPastLink(event) {
       const url = event.target.value?.trim();
       if (!url) return;
-      
+
       try {
         const response = await fetch(url);
         const blob = await response.blob();
@@ -167,7 +172,9 @@ export default {
     display: inline-block;
     position: relative;
     width: inherit;
+    cursor: pointer !important;
     &:before {
+      cursor: pointer !important;
       content: '';
       position: absolute;
       width: 100%;
@@ -209,10 +216,19 @@ export default {
     width: 100%;
     height: 100%;
     position: absolute;
-    cursor: pointer;
     &.disabled {
       cursor: default;
     }
+
+    &-label {
+      opacity: 0;
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
   }
 }
 </style>

package/components/common/payment/payment_card/googlepay/googlepay.vue

@@ -17,7 +17,7 @@
         </label>
         <input
           id="payment-amount"
-          :value="`${amount} AUD`"
+          :value="`${amount} ${currency ? currency.isoCode : 'AUD'}`"
           name="payment-amount"
           placeholder="payment-amount"
           disabled

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

@@ -63,6 +63,16 @@
       }
     }
   }
+  &__controls {
+    display: flex;
+    gap: 20px;
+    .EditorPrintAreaOptions__wrapper {
+      padding: 0;
+    }
+    .Btn__wrapper {
+      height: 44px;
+    }
+  }
 }
 .EditorLayersGroup {
   &__wrapper {

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

@@ -21,7 +21,16 @@
                   <i class="icon-arrow-left EditorLayers__close-editable-icon"></i>
                   See all design layers
                 </div>
-                <div>
+                <div class="EditorLayers__controls">
+                  <editor-print-area-options
+                    v-if="selectedLayer"
+                    :selected="selectedLayerPrintArea"
+                    :side="selectedLayer.sideId"
+                    :product="product"
+                    :layers="editableLayers"
+                    @select="handlePrintAreaSelect"
+                    @option-mouseover="toogleBoundBox(true, $event)"
+                    @option-mouseleave="toogleBoundBox(false, $event)" />
                   <btn
                     btn-class="green"
                     btn-label="Save"
@@ -29,15 +38,6 @@
                 </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
@@ -163,7 +163,8 @@ export default {
       'selectedLayer',
       'editModeSelectedLayer',
       'editableSide',
-      'selectedPrintArea'
+      'selectedPrintArea',
+      'editablePrintArea'
     ]),
     editableLayerType() {
       return this.selectedLayer ? `editor-layer-form-${this.selectedLayer.type}` : null;
@@ -217,7 +218,8 @@ export default {
       'updateTemplateLayer',
       'setEditableSide',
       'setSelectedPrintArea',
-      'setEditablePrintArea'
+      'setEditablePrintArea',
+      'setPreviewPrintArea'
     ]),
     ...mapActions(['increaseLayersUpdatesCount']),
     openSelectedLayerGroup(selected) {
@@ -284,7 +286,14 @@ export default {
 
       const printSize = printArea.printSize._id;
       this.setLayerField({ field: 'printSize', value: printSize });
-      console.log('handlePrintAreaSelect: ', option, this.selectedLayer);
+
+      this.toggleOpenedGroup(printArea, true);
+    },
+    toogleBoundBox(state, option) {
+      if (option) {
+        const printArea = state ? option.printArea : this.editablePrintArea;
+        this.setPreviewPrintArea(printArea);
+      }
     }
   }
 };

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

@@ -19,6 +19,17 @@
       }
     }
   }
+  &__placeholder {
+    position: absolute;
+    text-transform: uppercase;
+    font-size: 22px;
+    font-weight: 800;
+    left: 0;
+    right: 0;
+    text-align: center;
+    top: 50%;
+    z-index: 1;
+  }
   &__content {
     padding-top: 24px;
   }

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

@@ -7,6 +7,12 @@
       </slot>
 
       <div class="EditorLayerFormText__preview">
+        <div
+          v-if="isVisiblePlaceholder"
+          class="EditorLayerFormText__placeholder"
+          @click="editText()">
+          Add Text
+        </div>
         <canvas ref="previewCanvas"></canvas>
       </div>
 
@@ -171,19 +177,23 @@ 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';
 
-const editableModel = (field, prop) => ({
-  get() {
-    return prop
-      ? this[`${field}_options`].find(o => o[prop] === this.layer[field])
-      : this.layer[field];
-  },
-  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();
-  }
-});
+const editableModel = function (field, prop) {
+  return {
+    get() {
+      return prop
+        ? this[`${field}_options`].find(o => o[prop] === this.layer[field])
+        : this.layer[field];
+    },
+    set(v) {
+      const value = prop && Object.prototype.hasOwnProperty.call(v, prop) ? v[prop] : v;
+      this.$emit('set-layer-field', { field, value });
+      if (field !== 'copy') {
+        this.textObject[field] = value;
+      }
+      this.fabricCanvas.renderAll();
+    }
+  };
+};
 export default {
   name: 'EditorLayerFormText',
   components: {
@@ -249,6 +259,9 @@ export default {
     },
     fontFamily_options() {
       return availableFonts.map(({ label, alias }) => ({ label, value: alias }));
+    },
+    isVisiblePlaceholder() {
+      return !this.copy?.trim() && !this.isEditing;
     }
   },
   mounted() {
@@ -261,6 +274,14 @@ export default {
     }
   },
   methods: {
+    editText() {
+      if (!this.isEditing) {
+        this.fabricCanvas.setActiveObject(this.textObject);
+        this.textObject.enterEditing();
+        this.textObject.hiddenTextarea.focus();
+        this.isEditing = true;
+      }
+    },
     async selectFont({ value }) {
       const font = await loadFont(value);
       Object.keys(font).forEach(field => this.$emit('set-layer-field', {
@@ -288,7 +309,7 @@ export default {
     initFabricCanvas() {
       if (this.$refs.previewCanvas) {
         this.fabricCanvas = new fabric.Canvas(this.$refs.previewCanvas, {
-          width: 300,
+          width: this.$refs.previewCanvas.parentElement.offsetWidth - 100,
           height: 200,
           uniScaleTransform: false
         });
@@ -311,6 +332,11 @@ export default {
           this.syncTextFromCanvas();
         }
       });
+      this.fabricCanvas.on('mouse:down', options => {
+        if (options.target === this.textObject) {
+          this.editText();
+        }
+      });
     },
     async renderLayer() {
       try {
@@ -347,12 +373,10 @@ export default {
 
         this.fabricCanvas.add(textObj);
         this.fabricCanvas.renderAll();
+
         this.textObject = textObj;
 
-        this.$nextTick(() => {
-          this.fabricCanvas.setActiveObject(textObj);
-          textObj.enterEditing();
-        });
+        this.editText();
       } catch (error) {
         console.error('Error rendering layer:', error);
       }

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

@@ -21,12 +21,11 @@
     </div>
 
     <file-uploader
+      class="EditorLayersToolbar__option"
       :multiple="false"
       :url="`image/editor/${shop._id}/${product._id}`"
       @onuploaded="handleUploaded">
-      <div
-        slot="toggle"
-        class="EditorLayersToolbar__option">
+      <div slot="toggle">
         <i class="icon-layer-art EditorLayersToolbar__option-icon"></i>
         <div class="lc_black">
           Add art

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

@@ -17,6 +17,9 @@
     &.selected {
       background-color: $green;
     }
+    > * {
+      pointer-events: none;
+    }
   }
   &__info {
     text-align: center;
@@ -51,7 +54,7 @@
         }
       }
     }
-    
+
     // TEE - FRONT
     @each $position in center, left, right {
       &.front.tee.#{$position} {
@@ -72,4 +75,4 @@
       background-image: url(./../../../../static/icons/print-area/sleeve-right_tee_right.svg);
     }
   }
-}
+}

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

@@ -224,7 +224,7 @@ export default {
       const name = this.product.name;
       const color = this.availableColors?.find(c => c.alias === this.$route.query?.color);
       const size = this.availableSizes?.find(c => c.shortName === this.$route.query?.size);
-      return `${name}${(color || size) ? ` | ${[color?.name, size?.shortName].filter(i => !!i).join(', ') || ''}` : ''}`;
+      return `${name}${(color || size) ? ` | ${[color?.name, size?.name].filter(i => !!i).join(', ') || ''}` : ''}`;
     },
     hasImages() {
       return this.modelImages.length > 0;

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

@@ -29,6 +29,7 @@
                 <editor-workspace-side
                   ref="editor"
                   :key="side"
+                  :is-edit-mode="isEditMode"
                   :side="side"
                   :print-area="editablePrintArea"
                   :zoom-size="sideZoomSize"
@@ -65,6 +66,7 @@
               <editor-workspace-side
                 ref="editor"
                 :key="editableSide.id"
+                :is-edit-mode="isEditMode"
                 :side="editableSide.id"
                 :print-area="editablePrintArea"
                 :print-area-size="selectedPrintArea"
@@ -153,6 +155,10 @@ export default {
     visibleBackgroundImage: {
       type: Boolean,
       default: true
+    },
+    isEditMode: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

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

@@ -64,6 +64,24 @@
     bottom: 0;
     z-index: 1000;
   }
+  &__add-btn {
+    background-color: white;
+    opacity: 0.8;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border-radius: 3px;
+    box-shadow: 0px 0px 0px rgba(75, 75, 75, 0.2);
+    margin: 3px 0;
+    padding: 5px;
+    min-width: 73px;
+    &:nth-child(3) {
+      padding: 5px 5px 3px 5px;
+    }
+    &:hover {
+      opacity: 1;
+      transform: translateY(-1px);
+      box-shadow: 0px 5px 15px rgba(75, 75, 75, 0.2);
+    }
+  }
   &__placeholder {
     position: absolute;
     z-index: 999;
@@ -72,6 +90,7 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    font-size: 12px;
 
     // @media (max-width: $bp-extra-small-max) {
     //   font-size: 10px;
@@ -86,8 +105,8 @@
     letter-spacing: -0.5px;
     &-option {
       cursor: pointer;
-      margin: 5px 0;
       text-transform: uppercase;
+      display: inline-block;
       span {
         &:last-child {
           display: none;
@@ -102,6 +121,10 @@
     }
     &-divider {
       color: $grey_1;
+      padding: 2px;
+      background-color: white;
+      border-radius: 2px;
+      opacity: 0.7;
     }
     &-progress {
       position: absolute;
@@ -185,4 +208,4 @@
       background-color: #EB5757;
     }
   }
-}
+}

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

@@ -1,13 +1,12 @@
 <template>
   <div
+    v-click-outside="onOutsideClick"
     class="EditorWorkspaceSide__wrapper"
     :style="backgroundColor"
     :class="{
       'EditorWorkspaceSide__wrapper--zoom-in': isZoomed
     }"
-    v-click-outside="onOutsideClick"
     @mouseover="toogleBoundBox(true)"
-    @mouseleave="toogleBoundBox(false)"
     @mouseup="toggleOnpressImage(false)">
     <div
       v-if="hasOnpressImage || hasWireframeImage"
@@ -60,15 +59,23 @@
       ignore-document-click
       :style="positionPlaceholder">
       <div
-        @click="createTextLayer"
-        class="EditorWorkspaceSide__placeholder-option">
-        <span>Type here</span>
+        class="EditorWorkspaceSide__placeholder-option"
+        :class="{
+          'EditorWorkspaceSide__add-btn': !printAreaLayers.length
+        }"
+        @click="createTextLayer">
+        <span>
+          <i class="icon-layer-text"></i> Add Text
+        </span>
         <span style="margin-top: -0.5px;">Text</span>
       </div>
       <div class="EditorWorkspaceSide__placeholder-divider">
         or
       </div>
-      <div>
+      <div
+        :class="{
+          'EditorWorkspaceSide__add-btn': !printAreaLayers.length
+        }">
         <file-uploader
           :multiple="false"
           :url="`image/editor/${shop._id}/${product._id}`"
@@ -165,6 +172,10 @@ export default {
     visibleBackgroundImage: {
       type: Boolean,
       default: true
+    },
+    isEditMode: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -199,7 +210,8 @@ export default {
       'editModeSelectedLayer',
       'offsetWarningVisible',
       'showRecommendationToUseLargerImage',
-      'showErrorAboutSmallImage'
+      'showErrorAboutSmallImage',
+      'previewPrintArea'
     ]),
     editableLayersCount() {
       return this.editableLayers?.length;
@@ -235,16 +247,22 @@ export default {
     },
     positionPlaceholder() {
       const { center, left, top, width, height } = this.fabricHelper.printAreaRect;
-      // console.log('this.fabricHelper.printAreaRect: ', this.fabricHelper.printAreaRect);
       const ratio = this.calcWorkspaceSize() / this.editorSize.width;
-      return this.printAreaLayers.length > 0 ? {
-        top: `${(top + height) * ratio}px`,
-        left: `${left * ratio}px`
-      } : {
-        top: `${top * ratio}px`,
-        left: `${left * ratio}px`,
-        width: `${Math.max(60, width * ratio)}px`,
-        height: `${height * ratio}px`,
+      if (this.printAreaLayers.length > 0) {
+        return {
+          top: `${(top + height) * ratio}px`,
+          left: `${left * ratio}px`
+        };
+      }
+      const centerX = center?.x ?? (left + width / 2);
+      const centerY = center?.y ?? (top + height / 2);
+      const placeholderWidth = Math.max(100, width * ratio);
+      const placeholderHeight = height * ratio;
+      return {
+        top: `${(centerY * ratio) - (placeholderHeight / 2)}px`,
+        left: `${(centerX * ratio) - (placeholderWidth / 2)}px`,
+        width: `${placeholderWidth}px`,
+        height: `${placeholderHeight}px`
       };
     },
     printAreaIsSmall() {
@@ -284,6 +302,10 @@ export default {
       this.fabricHelper.setPrintArea(value, this.editorSize, this.product);
       this.redraw();
     },
+    previewPrintArea(value) {
+      this.fabricHelper.setPrintArea(value, this.editorSize, this.product);
+      this.redraw();
+    },
     zoomSize() {
       this.handleWorkspaceSize();
     }
@@ -346,15 +368,12 @@ export default {
       this.$emit('workspace', { size: this.calcWorkspaceSize(true), fabricHelper: this.fabricHelper });
     },
     initEventsListeners() {
-      // document.addEventListener('mousedown', this.onDocumentStartClick);
       window.addEventListener('resize', this.onResize);
     },
     clearEventsListeners() {
-      // document.removeEventListener('mousedown', this.onDocumentStartClick);
       window.removeEventListener('resize', this.onResize);
     },
     onDocumentStartClick({ target }) {
-      // todo: replace by click outside plugin?
       console.log('target: ', target);
       const isCanvasElement = target.tagName === 'CANVAS';
       const isIgnoreClick = !!findParentByPredicate(target, element => element.hasAttribute('ignore-document-click'));
@@ -386,7 +405,7 @@ export default {
       });
       this.fabricHelper.on('setDeleteButtonPosition', this.setDeleteButtonPosition);
       this.fabricHelper.on('outOfPrintArea', this.setOffsetWarningVisibility);
-      // todo center to print area
+
       this.updateBackgroundImage();
       this.redrawWithThrottle();
     },
@@ -451,11 +470,18 @@ export default {
       const image = this.fabricHelper.getLayersAsImage();
       this.setLayersThumbnail({ side: this.side, value: image });
     },
-    createTextLayer() {
+    async createTextLayer() {
       this.addedFromCanvas = true;
       window.scrollTo(0, 0);
-      this.createLayer({ type: 'text', isEditMode: true });
+      const layer = await this.createLayer({ type: 'text', isEditMode: this.isEditMode });
       this.visibleWireframe = true;
+      if (!this.isEditMode) {
+        setTimeout(() => {
+          this.setSelectedLayer(layer);
+          this.setEditModeSelectedLayer(true);
+          this.toogleBoundBox(true);
+        });
+      }
     },
     async handleUploaded({ url, size, fileName }) {
       window.scrollTo(0, 0);
@@ -477,8 +503,6 @@ export default {
         const area = state ? option.printArea : this.printArea;
         this.fabricHelper.setPrintArea(area, this.editorSize, this.product);
       }
-
-      this.fabricHelper.background.toggleBorder(state);
     }
   }
 };

package/components/email_link/email-link.vue

@@ -1,22 +1,37 @@
 <template>
-  <a ref="link"></a>
+  <a
+    v-if="emailDisplaySSR"
+    :href="`mailto:${emailAddress}`">{{ emailAddress }}</a>
+  <a
+    v-else
+    ref="link"></a>
 </template>
-  
+
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   name: 'EmailLink',
   props: {
     email: {
-      type: Array | String,
+      type: [Array, String],
       required: true
     }
   },
+  computed: {
+    ...mapGetters(['SETTINGS']),
+    emailAddress() {
+      return (Array.isArray(this.email) ? this.email : [this.email]).join('@');
+    },
+    emailDisplaySSR() {
+      return !!this.SETTINGS?.EMAIL_DISPLAY_SSR;
+    }
+  },
   mounted() {
-    if (process.client) {
-      const email = (Array.isArray(this.email) ? this.email : [this.email]).join('@');
+    if (!this.emailDisplaySSR) {
       const linkEl = this.$refs.link;
-      linkEl.href = `mailto:${email}`;
-      linkEl.textContent = email;
+      linkEl.href = `mailto:${this.emailAddress}`;
+      linkEl.textContent = this.emailAddress;
     }
   }
 };

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

@@ -2,7 +2,7 @@
   <btn
     :btn-class="btnClass"
     btn-label="Add to cart"
-    :btn-disabled="addToCartDisabled"
+    :btn-disabled="!allowClick && addToCartDisabled"
     :btn-processing="addingToCart"
     @onclick="proceedToCard">
     <template slot="icon-before">
@@ -21,6 +21,10 @@ export default {
     btnClass: {
       type: String,
       default: 'green'
+    },
+    allowClick: {
+      type: Boolean,
+      default: false
     }
   }
 };

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

@@ -1,6 +1,9 @@
 @import "@/assets/scss/variables";
 .EditorPricing {
   &__main {
+    &-alerts-wrapper {
+      display: contents;
+    }
     &-alert {
       display: flex;
       align-items: center;

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

@@ -6,65 +6,68 @@
         class="EditorPricing__details">
         <editor-pricing-details />
       </div>
-
       <div
-        v-if="addedToCart"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/smile.svg" />
-        Products have been added to cart
-      </div>
+        v-if="visibleAlert"
+        class="EditorPricing__alerts-wrapper">
+        <div
+          v-if="addedToCart"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/smile.svg" />
+          Products have been added to cart
+        </div>
 
-      <div
-        v-else-if="!hasUsedSimpleProducts && (!layers.length && isPrintPricing)"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/sad.svg" />
-        No products selected and no prints defined
-      </div>
+        <div
+          v-else-if="!hasUsedSimpleProducts && (!layers.length && isPrintPricing)"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/sad.svg" />
+          No products selected and no prints defined
+        </div>
 
-      <div
-        v-else-if="hasUsedSimpleProducts && ((!isValidPrintOnly || !layers.length && isPrintPricing))"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/sad.svg" />
-        No prints defined
-      </div>
+        <div
+          v-else-if="hasUsedSimpleProducts && ((!isValidPrintOnly || !layers.length && isPrintPricing))"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/sad.svg" />
+          No prints defined
+        </div>
 
-      <div
-        v-else-if="!hasUsedSimpleProducts && layers.length"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/sad.svg" />
-        <a
-          href="#"
-          @click.prevent.stop="$emit('choose-products')">
-          Choose products here to continue
-        </a>
-      </div>
+        <div
+          v-else-if="!hasUsedSimpleProducts && layers.length"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/sad.svg" />
+          <a
+            href="#"
+            @click.prevent.stop="$emit('choose-products')">
+            Please enter the quantity required
+          </a>
+        </div>
 
-      <div
-        v-else-if="!isValidMiltipackOrderQuantity"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/sad.svg" />
-         bulk pack {{ multipack.qty }} - add more x {{ multipack.qty - usedSimpleProductsQuantity }}
-      </div>
+        <div
+          v-else-if="!isValidMiltipackOrderQuantity"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/sad.svg" />
+          bulk pack {{ multipack.qty }} - add more x {{ multipack.qty - usedSimpleProductsQuantity }}
+        </div>
 
-      <div
-        v-else-if="!isValidOrderQuantity && isValidBigSizeOrderQuantity && minimumOrderQuantity > 1"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/sad.svg" />
-        Minimum order of these items must be {{ minimumOrderQuantity }} or more
-      </div>
+        <div
+          v-else-if="!isValidOrderQuantity && isValidBigSizeOrderQuantity && minimumOrderQuantity > 1"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/sad.svg" />
+          Minimum order of these items must be {{ minimumOrderQuantity }} or more
+        </div>
 
-      <div
-        v-else-if="!isValidBigSizeOrderQuantity"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/sad.svg" />
-        Minimum order of 5XL-7XL should be 50%
-      </div>
+        <div
+          v-else-if="!isValidBigSizeOrderQuantity"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/sad.svg" />
+          Minimum order of 5XL-7XL should be 50%
+        </div>
 
-      <div
-        v-else-if="isValidOrderQuantity"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/smile.svg" />
-        {{ hasPrintIssues ? 'Proceed with order, Will be in touch regarding print issue' : 'All good to go!' }}
+        <div
+          v-else-if="isValidOrderQuantity"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/smile.svg" />
+          {{ hasPrintIssues ? 'Proceed with order, Will be in touch regarding print issue' : 'All good to go!' }}
+        </div>
       </div>
 
       <div
@@ -129,10 +132,15 @@ export default {
     hasPricing: {
       type: Boolean,
       default: true
+    },
+    visibleAlert: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
+      clickedAddToCart: false,
       price: null,
       showDetails: false,
       calculatePriceWithDebounce: debounce(() => this.calculateProductPrice({ shop: this.shop, country: this.country, currency: this.currency }), 500)

package/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options.scss

@@ -45,6 +45,18 @@
     &-selected-icon {
       position: absolute;
     }
+    &>i {
+      position: absolute;
+      z-index: 3;
+      top: -3px;
+      right: -5px;
+      color: $purple;
+      background-color: white;
+      border-radius: 50%;
+      padding: 3px 0;
+      font-size: 15px;
+      box-shadow: 0 0 2px grey;
+    }
   }
   &__products-count {
     position: absolute;
@@ -58,11 +70,11 @@
     font-weight: bold;
     font-size: 12px;
     line-height: 16px;
-    text-align: center;  
+    text-align: center;
     span:not(:empty) {
       background-color: white;
       border-radius: 50%;
       width: 16px;
     }
-  }  
-}
+  }
+}

package/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options.vue

@@ -7,6 +7,10 @@
       class="ProductColorsSelectorOptions__color"
       :class="{ selected: editableColor === color }"
       @click="toggleSelection(color)">
+      <i
+        v-if="isClearanceColor(color)"
+        v-tooltip="'Clearance'"
+        class="icon-percent"></i>
       <product-color-image
         :color="color"
         :lazy="true"
@@ -44,7 +48,8 @@ export default {
       'template',
       'editableColor',
       'simpleProducts',
-      'templateColors'
+      'templateColors',
+      'product'
     ])
   },
   mounted() {
@@ -67,6 +72,9 @@ export default {
     },
     countColorProducts({ _id }) {
       return this.simpleProducts.reduce((count, { color, amount }) => color._id === _id ? count + (amount || 0) : count, 0);
+    },
+    isClearanceColor(color) {
+      return this.product.colorsPricing?.some(c => c.colors?.includes(color._id) && c.clearance);
     }
   }
 };

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

@@ -14,7 +14,7 @@
     </div>
     <div class="ProductCheckDelivery__postcode">
       <postcode-select
-        v-model="postcode"
+        v-model="suburb.postcode"
         :suburb="suburb"
         :only-postcode="true"
         label-text="Postcode"

package/components/product/product_color_image/product-color-image.scss

@@ -5,4 +5,4 @@
   &.zoomedIn {
     background-size: 200%;
   }
-}
+}

package/components/product/product_pricing_tiers/product-pricing-tiers.vue

@@ -5,7 +5,7 @@
     </h3>
     <div class="ProductPricingTiers__tiers">
       <div
-        v-for="(tier, index) in defaultSimpleProduct.pricing"
+        v-for="(tier, index) in visibleTiers"
         :key="index"
         class="ProductPricingTiers__tier"
         @click="selectTier(tier)">
@@ -41,8 +41,12 @@ export default {
   },
   mixins: [MultipackMixin],
   computed: {
-    ...mapGetters('product', ['product', 'editableColor', 'priceIncludeGST', 'defaultSimpleProduct']),
-    ...mapGetters(['pricingSettings', 'currency'])
+    ...mapGetters('product', ['product', 'editableColor', 'priceIncludeGST', 'isPrintPricing', 'printsPrice', 'defaultSimpleProduct']),
+    ...mapGetters(['pricingSettings', 'currency']),
+    visibleTiers() {
+      const pricing = this.defaultSimpleProduct?.pricing || [];
+      return pricing.map(p => ({ ...p, price: p.price + this.printsPrice }));
+    }
   },
   methods: {
     selectTier(tier) {

package/components/product/products_multipacks_size_selector_color/products-multipacks-size-selector-color.vue

@@ -78,7 +78,7 @@ export default {
       return sortBySize(this.editableColorSimpleProducts);
     },
     pricing() {
-      return this.defaultSimpleProduct.pricing;
+      return this.defaultSimpleProduct?.pricing || [];
     }
   },
   methods: {

package/components/product/products_size_selector_color/product_size_selector_color/product-size-selector-color.vue

@@ -46,16 +46,42 @@
               </div>
             </template>
           </v-popover>
-          <span
+          <v-popover
             v-if="printsPrice > 0"
-            class="lc_regular13">
-            +
-            <price
-              :price="printsPrice"
-              :with-gst="withGst" />
-          </span>
+            trigger="hover"
+            :delay="{ show: 200, hide: 400 }"
+            popover-class="tooltip popover white"
+            class="ProductSizeSelectorColor__price ml-6"
+            style="display: inline-block;">
+            <span class="lc_regular13">
+              {{ productPrintsPrice | price(currency) }}
+            </span>
+            <template slot="popover">
+              <div>
+                <table class="lc_table bordered">
+                  <thead>
+                    <tr class="highlighted">
+                      <th>Area</th>
+                      <th>Size</th>
+                      <th>Type</th>
+                      <th>Price</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="(print, index) in productPricingPrints"
+                      :key="index">
+                      <td>{{ print.printArea ? print.printArea.name : '' }}</td>
+                      <td>{{ print.printSize ? print.printSize.name : '' }}</td>
+                      <td>{{ print.printType ? print.printType.name : '' }}</td>
+                      <td>{{ (withGst ? print.price : print.priceWithoutTax) | price(currency) }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </template>
+          </v-popover>
         </div>
-
       </div>
       <div class="hidden-md-and-up">
         <div
@@ -126,7 +152,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('product', ['isPrintPricing', 'usedSimpleProductsQuantity', 'printsPrice']),
+    ...mapGetters('product', ['isPrintPricing', 'usedSimpleProductsQuantity', 'printsPrice', 'productPricingPrints']),
     ...mapGetters(['gstTax', 'currency']),
     currentQuantityStockLabel() {
       return this.currentQuantityStock > 100 ? '100+' : this.currentQuantityStock;

package/feeds/google-shopping.js

@@ -106,7 +106,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 info['g:sale_price'] = { _text: `${(sp.clearancePrice)} ${sp.currencyCode || 'AUD'}` };
               }
 
-              if (sp.storeCode) {
+              if (sp.storeCode && !config.IGNORE_STORE_CODE) {
                 info['g:store_code'] = { _text: sp.storeCode };
                 info['g:link_template'] = { _text: `${link}&store={store_code}` };
                 if (availableStores) {

package/mixins/add-to-cart.js

@@ -51,6 +51,7 @@ export default {
     ...mapMutations('layers', ['resetLayers']),
     async proceedToCard() {
       if (this.addingToCart || this.addToCartDisabled) {
+        this.$emit('proceed', false);
         return;
       }
       try {
@@ -65,20 +66,21 @@ export default {
           googleClickId: this.googleClickId
         });
         this.$toastr.s('Products successfully added to cart');
-  
+
         this.clearTemplate(true);
-  
+
         this.calculateCartPrice({ shop: this.shop, country: this.country, currency: this.currency });
-  
+
         // this.resetLayers();
         // this.setIsPrintPricing(false);
         setTimeout(() => {
           this.addedToCart = true;
         });
-      } catch (e) { 
+      } catch (e) {
       } finally {
         this.addingToCart = false;
       }
+      this.$emit('proceed', true);
     }
   }
-};
+};

package/mixins/product-view.js

@@ -289,7 +289,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
           url,
           availability: `https://schema.org/${availability}`,
           price: +tax(maxPrice, this.gstTax).toFixed(2),
-          priceCurrency: 'AUD',
+          priceCurrency: this.currency?.isoCode || 'AUD',
           priceValidUntil: '31-12-2030',
           sku: sp.SKU,
           ...(brandAdditionalProductsRichSnippet.offers || {})

package/package.json

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

package/pages/checkout/order.vue

@@ -43,6 +43,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['currency']),
     ...mapGetters('cart', ['entitiesWithoutFreeProducts', 'entities', 'coupon', 'cartPricing'])
   },
   methods: {
@@ -50,7 +51,7 @@ export default {
       gtm.push({
         event: 'begin_checkout',
         value: this.cartPricing.totalPriceWithoutTax,
-        currency: 'AUD',
+        currency: this.currency ? this.currency.isoCode : 'AUD',
         coupon: this.cartPricing.coupon?.code,
         items: this.entitiesWithoutFreeProducts.reduce((products, { guid: productGuid, product, simpleProducts }) => {
           return [
@@ -62,7 +63,7 @@ export default {
                 item_name: product.name,
                 item_brand: product.brand.name,
                 price: this.cartPricing.products[productGuid]?.products[guid]?.totalPriceWithoutTax,
-                currency: 'AUD',
+                currency: this.currency ? this.currency.isoCode : 'AUD',
                 quantity: amount
               }))
           ];

package/store/product.js

@@ -17,7 +17,7 @@ export const state = () => ({
   loadingProductDetails: false,
   productDetailsKey: Date.now(),
   images: [],
-  priceIncludeGST: false,
+  priceIncludeGST: true,
   product: null,
   preSetPrints: null,
   loadError: null,
@@ -58,6 +58,7 @@ export const state = () => ({
   selectedPrintAreas: {},
   productPricing: null,
   selectedTab: null,
+  previewPrintArea: null,
   layersUpdatesCount: 0,
   editableSide: { id: 'front' }
 });
@@ -173,6 +174,10 @@ export const getters = {
     const pricePrintsPrice = pricing?.prints?.prints?.reduce((sum, print) => sum + (+print.priceWithoutTax || 0), 0);
     return pricePrintsPrice >= 0 ? pricePrintsPrice : maxPrintsPrice;
   },
+  productPricingPrints: ({ productPricing, product }) => {
+    const pricing = (productPricing?.products || {})[product._id];
+    return pricing?.prints?.prints || [];
+  },
   offsetWarningVisible: ({ offsetWarningVisible }) => offsetWarningVisible,
   showRecommendationToUseLargerImage: ({ selectedLayer }) => {
     return (
@@ -208,7 +213,8 @@ export const getters = {
     } else {
       return PRODUCT_STOCK_STATUS.NOT_IN_STOCK;
     }
-  }
+  },
+  previewPrintArea: ({ previewPrintArea }) => previewPrintArea
 };
 
 export const actions = {
@@ -634,6 +640,9 @@ export const mutations = {
   },
   setCalculatingPrice(state, calculatingPrice) {
     state.calculatingPrice = calculatingPrice;
+  },
+  setPreviewPrintArea(state, previewPrintArea) {
+    state.previewPrintArea = previewPrintArea;
   }
 };