@lancom/shared 0.0.464 → 0.0.466

package/assets/js/api/admin.js

@@ -128,6 +128,9 @@ export default {
   orderSubOrders(body) {
     return _post('admin/sub-orders/ordered', body);
   },
+  saveSubOrder(subOrder) {
+    return _put(`admin/sub-order/${subOrder._id}`, subOrder);
+  },
   generateOrderPickPDF(orderId) {
     return _post(`admin/order/${orderId}/pick-pdf`);
   },
@@ -312,7 +315,7 @@ export default {
     return _delete(`admin/inventory-history/${id}`);
   },
   fetchInventory(params) {
-    return _get('admin/inventory');
+    return _get('admin/inventory', params);
   },
   fetchProducts(params) {
     return _get('admin/products', params);

package/assets/js/constants/print-type.js

@@ -2,7 +2,8 @@ export const PRINT_TYPES = {
   BLACK: 'black print',
   FULL_COLOUR: 'full colour print',
   EMBROIDERY: 'embroidery',
-  SCREEN: 'screen print'
+  SCREEN: 'screen print',
+  REFLECTIVE: 'reflective'
 };
 
 export const PRINT_TYPES_LIST = Object.keys(PRINT_TYPES).map(k => PRINT_TYPES[k]);

package/components/checkout/cart/cart.mixin.js

@@ -16,6 +16,7 @@ export default {
     ...mapGetters(['shop', 'country', 'currency']),
     ...mapGetters('auth', ['user']),
     ...mapGetters('cart', [
+      'loadingCart',
       'needToPickup',
       'needToPickupWithoutErrors',
       'entities',
@@ -60,7 +61,10 @@ export default {
     }
   },
   mounted() {
-    this.calculateCartPriceWithDebounce({ shop: this.shop, country: this.country, currency: this.currency });
+    // console.log('this.loadingCart: ', this.loadingCart);
+    // if (!this.loadingCart) {
+    //   this.calculateCartPriceWithDebounce({ shop: this.shop, country: this.country, currency: this.currency });
+    // }
     if (!this.suburb && this.user?.suburb) {
       this.handleSuburbChange(this.user.suburb);
     }

package/components/checkout/cart/cart.vue

@@ -77,7 +77,7 @@
     <div
       v-else
       class="lc_caption lc_text-centered Cart__no-entities">
-      Your cart is empty.
+      {{ loadingCart ? 'Your cart is loading...' : 'Your cart is empty.' }}
     </div>
   </div>
 </template>
@@ -115,7 +115,7 @@ export default {
   },
   computed: {
     ...mapGetters(['MESSAGES', 'SETTINGS', 'currency', 'country']),
-    ...mapGetters('cart', ['isEmpty', 'cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities', 'entitiesWithoutFreeProducts']),
+    ...mapGetters('cart', ['isEmpty', 'cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities', 'entitiesWithoutFreeProducts', 'loadingCart']),
     productsEntities() {
       return this.entitiesWithoutFreeProducts.filter(e => !e.productsKit);
     },

package/components/checkout/order/order.vue

@@ -30,7 +30,7 @@
     <div
       v-else
       class="lc_caption lc_text-centered Cart__no-entities">
-      Your cart is empty.
+      {{ loadingCart ? 'Your cart is loading...' : 'Your cart is empty.' }}
     </div>
   </div>
 </template>
@@ -83,7 +83,7 @@ export default {
   },
   computed: {
     ...mapGetters('country'),
-    ...mapGetters('cart', ['isEmpty']),
+    ...mapGetters('cart', ['isEmpty', 'loadingCart']),
     ...mapGetters('order', ['orderData']),
     ...mapGetters('auth', ['isAuthenticated', 'user']),
     steps() {

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/order/order_view/order-view.vue

@@ -181,7 +181,9 @@
             <div class="lc_regular16">
               Total inc {{ taxName }}: <b>{{ model.totalGST | price(order.currency) }}</b>
             </div>
-            <div class="lc_regular16">
+            <div
+              class="lc_regular16"
+              style="background-color: #000; color: #fff; padding: 4px 8px; display: inline-block;">
               {{ isPaid ? 'Paid' : 'Pending Payment' }}: <b>{{ model.totalGST | price(order.currency) }}</b>
             </div>
           </div>
@@ -229,7 +231,9 @@
           <div class="lc_regular16">
             Total inc {{ taxName }}: <b>{{ model.totalGST | price(order.currency) }}</b>
           </div>
-          <div class="lc_regular16">
+          <div
+            class="lc_regular16"
+            style="background-color: #000; color: #fff; padding: 4px 8px; display: inline-block;">
             {{ isPaid ? 'Paid' : 'Pending Payment' }}: <b>{{ model.totalGST | price(order.currency) }}</b>
           </div>
         </div>

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',
@@ -68,7 +69,7 @@ export default {
   data() {
     return {
       orderPrintTypes: [{
-        types: ['black print', 'full colour print'],
+        types: ['black print', 'full colour print', 'reflective'],
         icon: 'printed',
         name: 'DIGITAL',
         subName: '',
@@ -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/components/products/products_link/products-link.vue

@@ -1,10 +1,10 @@
 <template>
-  <a
-    :href="link"
+  <nuxt-link
+    :to="link"
     class="ProductsLink"
     rel="nofollow">
     <slot></slot>
-  </a>
+  </nuxt-link>
 </template>
 
 <script>

package/mixins/product-preview.js

@@ -43,6 +43,10 @@ const productPreview = {
       type: Boolean,
       default: true
     },
+    visibleQuickView: {
+      type: Boolean,
+      default: false
+    },
     linkTarget: {
       type: String,
       default: '_self'

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.466",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/plugins/save-state.js

@@ -2,7 +2,6 @@ import debounce from 'lodash.debounce';
 
 const STATE_STORAGE_KEY = 'lancom-state-2.3';
 const SAVE_STATE_MODULES = new Map([
-  ['setGoogleClickId', 'googleClickId'],
   ['cart/setId', 'cart.id'],
   ['cart/clearCart', 'cart.id'],
   ['cart/setCoupon', 'cart.coupon'],

package/store/cart.js

@@ -11,6 +11,7 @@ export const state = () => ({
   id: null,
   entities: [],
   needToPickup: false,
+  loadingCart: false,
   suburb: null,
   coupon: null,
   cartPricingCalculating: false,
@@ -103,6 +104,7 @@ export const getters = {
       return freeProducts.length > 0 ? sum + amount : sum;
     }, 0);
   },
+  loadingCart: ({ loadingCart }) => loadingCart,
   coupon: ({ coupon }) => coupon,
   needToPickup: ({ needToPickup }) => needToPickup,
   needToPickupWithoutErrors: (state, { notValidProductsPickup }) => state.needToPickup && notValidProductsPickup?.length === 0,
@@ -229,25 +231,28 @@ export const actions = {
     await api.saveCart(payload, shop._id);
     commit('setCartSaving', false);
   },
-  async calculateCartPrice({ state: { suburb, entities, coupon, cartPricing }, getters: { needToPickup }, commit }, { shop, country, currency }) {
-    let savedSuppliersWithRates = null;
-    try {
-      savedSuppliersWithRates = JSON.parse(localStorage.getItem(SUPPLIERS_WITH_RATES_KEY));
-    } catch (e) {}
-    const selectedSuppliersWithRates = cartPricing?.shipping?.suppliersWithRates || savedSuppliersWithRates;
-    const payload = generateCalculatePriceData(entities, suburb, null, coupon, selectedSuppliersWithRates, country, currency);
-    console.log('calculateCartPrice:payload: ', payload)
-    try {
-      commit('setCartPricingCalculating', true);
-      const response = await api.calculateProductPrice({ ...payload, needToPickup }, shop._id);
-      commit('setCartPricing', response);
-      commit('setCartPricingError', null);
-    } catch (e) {
-      const { error = 'Error calculate pricing' } = e.response?.data || {};
-      commit('setCartPricingError', error);
-      commit('setCartPricing', null);
-    } finally {
-      commit('setCartPricingCalculating', false);
+  async calculateCartPrice({ state: { suburb, entities, coupon, cartPricing, loadingCart }, getters: { needToPickup }, commit }, { shop, country, currency }) {
+    if (!loadingCart) {
+      console.trace();
+      let savedSuppliersWithRates = null;
+      try {
+        savedSuppliersWithRates = JSON.parse(localStorage.getItem(SUPPLIERS_WITH_RATES_KEY));
+      } catch (e) {}
+      const selectedSuppliersWithRates = cartPricing?.shipping?.suppliersWithRates || savedSuppliersWithRates;
+      const payload = generateCalculatePriceData(entities, suburb, null, coupon, selectedSuppliersWithRates, country, currency);
+      console.log('calculateCartPrice:payload: ', payload)
+      try {
+        commit('setCartPricingCalculating', true);
+        const response = await api.calculateProductPrice({ ...payload, needToPickup }, shop._id);
+        commit('setCartPricing', response);
+        commit('setCartPricingError', null);
+      } catch (e) {
+        const { error = 'Error calculate pricing' } = e.response?.data || {};
+        commit('setCartPricingError', error);
+        commit('setCartPricing', null);
+      } finally {
+        commit('setCartPricingCalculating', false);
+      }
     }
   },
   async setSimpleProductAmount({ state, commit }, { guid, amount, shop, currency }) {
@@ -310,6 +315,10 @@ export const actions = {
 };
 
 export const mutations = {
+  setLoadingCart(state, loadingCart) {
+    state.loadingCart = loadingCart;
+    console.log('state.loadingCart: ', state.loadingCart);
+  },
   setCart(state, cart) {
     state.id = cart?._id;
     state.entities = cart?.entities || [];

package/store/index.js

@@ -5,7 +5,18 @@ import { getShopCountrySettings } from '@lancom/shared/assets/js/utils/shop';
 import { MESSAGES, COUNTRIES_MESSAGES } from '@/messages';
 import { SETTINGS, COUNTRIES_SETTINGS } from '@/settings';
 const cookieparser = process.server ? require('cookieparser') : undefined;
+const Cookies = process.browser ? require('js-cookie') : undefined;
 const CLOSED_NOTIFICATION = 'lancom-closed-notification-1.0';
+const GCLID_COOKIE = 'gclid';
+const GCLID_EXPIRE_DAYS = 90;
+
+function getGclidCookie() {
+  return Cookies?.get(GCLID_COOKIE) || null;
+}
+
+function setGclidCookie(value) {
+  Cookies?.set(GCLID_COOKIE, value, { expires: GCLID_EXPIRE_DAYS, path: '/' });
+}
 
 export const state = () => ({
   googleClickId: null,
@@ -108,6 +119,7 @@ export const actions = {
     }
   },
   async loadState({ dispatch, commit, state: { shop, currency, country, notificationBar } }, query) {
+    console.log('loadState...', query);
     const state = await loadState(query);
     if (state) {
       commit('setState', state);
@@ -116,19 +128,31 @@ export const actions = {
           currency: currency?._id,
           country: country?._id
         };
-        const cart = await api.fetchCartById(shop._id, state.cart?.id, params);
-        commit('cart/setCart', cart);
-        if (state.cart?.coupon) {
-          try {
-            const code = state.cart?.coupon.code || state.cart?.coupon;
-            const coupon = await api.fetchCouponByCode(shop._id, code);
-            commit('cart/setCoupon', coupon);
-          } catch (e) {}
+        commit('cart/setLoadingCart', true);
+        try {
+          const cart = await api.fetchCartById(shop._id, state.cart?.id, params);
+          commit('cart/setCart', cart);
+          if (state.cart?.coupon) {
+            try {
+              const code = state.cart?.coupon.code || state.cart?.coupon;
+              const coupon = await api.fetchCouponByCode(shop._id, code);
+              commit('cart/setCoupon', coupon);
+            } catch (e) {}
+          }
+          dispatch('cart/calculateCartPrice', { shop, country });
+        } catch (e) {
+        } finally {
+          commit('cart/setLoadingCart', false);
         }
-        dispatch('cart/calculateCartPrice', { shop, country });
       }
     }
-    commit('setGoogleClickId', query.gclid || state?.googleClickId || null);
+
+    const cookieGclid = getGclidCookie();
+    const googleClickId = query.gclid || cookieGclid || null;
+    commit('setGoogleClickId', googleClickId);
+    if (query.gclid) {
+      setGclidCookie(query.gclid);
+    }
 
     const closedNotification = localStorage.getItem(CLOSED_NOTIFICATION);
     if (notificationBar?.text === closedNotification) {