@lancom/shared 0.0.464 → 0.0.465

package/components/common/pricing_discounts_table/pricing-discounts-table.scss

@@ -2,4 +2,17 @@
 
 table {
   min-width: 200px;
-}
+}
+
+.PricingDiscountsTable__see-more {
+  text-align: center;
+  cursor: pointer;
+  font-size: 12px;
+  color: $link;
+  padding: 4px 0;
+  user-select: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

package/components/common/pricing_discounts_table/pricing-discounts-table.vue

@@ -11,7 +11,7 @@
     </thead>
     <tbody class="centered">
       <tr
-        v-for="(range, index) in prices"
+        v-for="(range, index) in visiblePrices"
         :key="range.min"
         :class="{
           active: amount >= range.min && ((range.max && amount <= range.max) || !range.max)
@@ -46,6 +46,16 @@
         </td>
       </tr>
     </tbody>
+    <tfoot v-if="limit && prices.length > limit">
+      <tr>
+        <td
+          :colspan="visibleDiscount ? 3 : 2"
+          class="PricingDiscountsTable__see-more"
+          @click="showAll = !showAll">
+          {{ showAll ? 'Show less' : `See more (${prices.length - limit})` }}
+        </td>
+      </tr>
+    </tfoot>
   </table>
 </template>
 
@@ -91,14 +101,26 @@ export default {
     priceLabel: {
       type: String,
       default: 'Price'
+    },
+    limit: {
+      type: Number,
+      default: 4
     }
   },
+  data() {
+    return {
+      showAll: false
+    };
+  },
   computed: {
     ...mapGetters([
       'pricingSettings'
     ]),
     maxPrice() {
       return this.prices?.[0]?.price || 0;
+    },
+    visiblePrices() {
+      return this.limit && !this.showAll ? this.prices.slice(0, this.limit) : this.prices;
     }
   }
 };

package/components/order/order_view/order-view.scss

@@ -1,7 +1,4 @@
 .OrderView {
-  &__wrapper {
-    margin-top: 50px;
-  }
   &__logo {
     margin-bottom: 10px;
   }
@@ -12,7 +9,7 @@
   }
   &__table {
     margin-top: 20px;
-    td { 
+    td {
       width: 50%;
       padding: 20px;
     }
@@ -42,7 +39,7 @@
     align-items: flex-end;
     &--paid {
       background-image: url(../../../static/images/paid.svg);
-      background-repeat: no-repeat;    
+      background-repeat: no-repeat;
       background-position: 0px 0px;
       background-size: 500px;
     }
@@ -54,4 +51,4 @@
 }
 .uppercase {
     text-transform: uppercase;
-}
+}

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="AddToCartBtnGuarded__wrapper">
+    <add-to-cart-btn
+      v-if="!addToCartDisabled || !clicked"
+      :btn-class="btnClass"
+      :allow-click="!clicked"
+      @proceed="onProceed">
+      <template
+        v-if="$slots['icon-before']"
+        #icon-before>
+        <slot name="icon-before" />
+      </template>
+    </add-to-cart-btn>
+    <v-popover
+      v-else
+      trigger="hover"
+      :delay="{ hide: 400, show: 400 }">
+      <add-to-cart-btn :btn-class="btnClass">
+        <template
+          v-if="$slots['icon-before']"
+          #icon-before>
+          <slot name="icon-before" />
+        </template>
+      </add-to-cart-btn>
+      <template slot="popover">
+        <slot name="popover-message">
+          <p>You've not added any art or text to print. We only sell custom printed products.</p>
+        </slot>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<script>
+import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
+import AddToCartBtn from '@lancom/shared/components/product/add-to-cart-btn';
+
+export default {
+  name: 'AddToCartBtnGuarded',
+  components: {
+    AddToCartBtn
+  },
+  mixins: [addToCartMixin],
+  props: {
+    btnClass: {
+      type: String,
+      default: 'green'
+    }
+  },
+  data() {
+    return {
+      clicked: false
+    };
+  },
+  methods: {
+    onProceed(result) {
+      this.clicked = true;
+      this.$emit('proceed', result);
+    }
+  }
+};
+</script>

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

@@ -7,7 +7,7 @@
         <editor-pricing-details />
       </div>
       <div
-        v-if="visibleAlert"
+        v-if="visibleAlert || forceAlert"
         class="EditorPricing__alerts-wrapper">
         <div
           v-if="addedToCart"
@@ -52,7 +52,7 @@
           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
+          Minimum order {{ selectedPrintTypeNames.length ? `for ${selectedPrintTypeNames.join(', ')}` : 'of these items' }} must be {{ minimumOrderQuantity }} or more
         </div>
 
         <div
@@ -68,6 +68,13 @@
           <img src="~static/images/smile.svg" />
           {{ hasPrintIssues ? 'Proceed with order, Will be in touch regarding print issue' : 'All good to go!' }}
         </div>
+
+        <div
+          v-else-if="!hasUsedSimpleProducts && forceAlert"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/sad.svg" />
+          No products selected
+        </div>
       </div>
       <div
         v-if="product.isClearance || clearanceColorsWithQty.length > 0"
@@ -106,9 +113,14 @@
             {{ showDetails ? 'Hide' : 'Show' }} detail
           </div>
           <slot>
-            <add-to-cart-btn
+            <add-to-cart-btn-guarded
               v-if="hasCartBtn"
-              class="EditorPricing__add-to-cart-button" />
+              class="EditorPricing__add-to-cart-button"
+              @proceed="forceAlert = !$event">
+              <template #popover-message>
+                <p>Please select your product colours &amp; quantities and add your artwork or text before adding to cart.</p>
+              </template>
+            </add-to-cart-btn-guarded>
           </slot>
         </div>
       </div>
@@ -121,6 +133,7 @@ import { mapGetters, mapActions } from 'vuex';
 import debounce from 'lodash.debounce';
 import { price, sizesRange, printsRange, tax } from '@lancom/shared/assets/js/utils/filters';
 import AddToCartBtn from '@lancom/shared/components/product/add-to-cart-btn';
+import AddToCartBtnGuarded from '@lancom/shared/components/product/add-to-cart-btn-guarded/add-to-cart-btn-guarded';
 import EditorPricingDetails from '@lancom/shared/components/editor/editor_pricing/editor_pricing_details/editor-pricing-details';
 import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
 
@@ -134,7 +147,8 @@ export default {
   },
   components: {
     EditorPricingDetails,
-    AddToCartBtn
+    AddToCartBtn,
+    AddToCartBtnGuarded
   },
   mixins: [addToCartMixin],
   props: {
@@ -154,6 +168,7 @@ export default {
   data() {
     return {
       clickedAddToCart: false,
+      forceAlert: false,
       price: null,
       showDetails: false,
       calculatePriceWithDebounce: debounce(() => this.calculateProductPrice({ shop: this.shop, country: this.country, currency: this.currency }), 500)
@@ -181,6 +196,13 @@ export default {
     hasPrintIssues() {
       return this.offsetWarningVisible || this.showRecommendationToUseLargerImage || this.showErrorAboutSmallImage;
     },
+    selectedPrintTypeNames() {
+      const layerPrintTypeIds = (this.layers || []).map(l => l.printType?._id || l.printType).filter(Boolean);
+      return (this.product.printTypes || [])
+        .filter(pt => layerPrintTypeIds.includes(pt._id || pt))
+        .map(pt => pt.name)
+        .filter(Boolean);
+    },
     hasUsedSimpleProducts() {
       return this.usedSimpleProducts.length > 0;
     },

package/components/product/gallery/gallery.scss

@@ -201,10 +201,10 @@
   }
   &__zoom-image {
     position: absolute;
-    right: -250px;
+    right: -200px;
     top: 0;
-    width: 350px;
-    height: 350px;
+    width: 500px;
+    height: 500px;
     z-index: 2;
     background-color: white;
     box-shadow: 0 0 10px gray;
@@ -212,14 +212,14 @@
     pointer-events: none;
     img {
       position: absolute;
-      max-width: 800px;
-      max-height: 800px;
+      max-width: 1000px;
+      max-height: 1000px;
     }
     &.preview {
       img {
-        max-width: 350px;
-        max-height: 350px;
+        max-width: 500px;
+        max-height: 500px;
       }
     }
   }
-}
+}

package/components/product/product_size_selector/product_size_selector_color/product_size_selector_color_cell/product-size-selector-color-cell.vue

@@ -28,7 +28,7 @@
         :aria-label="size.name"
         :disabled="disabled"
         @wheel="onWheel"
-        @focus="onFocus()"
+        @focus="onFocus($event)"
         @blur="onBlur()" />
       <div
         class="ProductSizeSelectorColorCell__side-control ProductSizeSelectorColorCell__side-control--right"
@@ -141,7 +141,8 @@ export default {
     onWheel(e) {
       e.target.blur();
     },
-    onFocus() {
+    onFocus(e) {
+      this.$nextTick(() => e.target.select());
       this.defaultValue = '';
     },
     onBlur() {

package/components/product/wizard/wizard_print/wizard-print.vue

@@ -59,6 +59,7 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex';
 import Info from '@lancom/shared/components/common/info-popover';
+import { SETTINGS } from '@/settings';
 
 export default {
   name: 'WizardPrint',
@@ -76,7 +77,7 @@ export default {
           'Free Setup on all Black prints',
           'Standard turn around time of 5-10 days',
           'Same or next day rush service available',
-          'Pickup from warehouse in Mount Druitt'
+          `Pickup from warehouse in ${SETTINGS?.DEFAULT_PICKUP_WAREHOUSE || 'Mount Druitt'}`
         ]
         // info: 'DIGITAL - minimum 12'
       }, {

package/components/products/products_aside/products-aside.vue

@@ -126,7 +126,7 @@ export default {
     },
     hasProductionTime: {
       type: Boolean,
-      default: true
+      default: false
     },
     hasMinimumQty: {
       type: Boolean,

package/mixins/product-view.js

@@ -144,6 +144,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     if (!this.product) {
       const query = this.getProductQuery();
       await this.fetchProduct(query);
+      await this.fetchProductDetails(query);
     }
 
     await this.loadProductStockDetails();
@@ -213,7 +214,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     ...mapMutations(['clearProduct', 'clearTemplate', 'addTemplateLayer', 'setSimpleProductAmount', 'setPriceIncludeGST']),
     staticLink,
     getProductQuery() {
-      const { slug } = this.$route.params;
+      const slug = this.slug || this.$route.params.slug;
       const { color, colour, size } = this.$route.query;
       const data = {
         shop: this.shop._id,
@@ -221,8 +222,8 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
         country: this.country?._id,
         stockCountry: this.stockCountry?._id,
         currency: this.currency?._id,
-        defaultColor: color || colour,
-        defaultSize: size
+        defaultColor: this.defaultColor || color || colour,
+        defaultSize: this.defaultSize || size
       };
 
       return data;

package/package.json

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