@lancom/shared 0.0.475 → 0.0.478

package/assets/js/api/admin.js

@@ -296,8 +296,8 @@ export default {
   removeUser(id) {
     return _delete(`admin/user/${id}`);
   },
-  fetchCustomers() {
-    return _get('admin/customers');
+  fetchCustomers(params) {
+    return _get('admin/customers', params);
   },
   fetchCustomerById(id) {
     return _get(`admin/customer/${id}`);
@@ -398,6 +398,18 @@ export default {
   removeContact(id) {
     return _delete(`admin/contact/${id}`);
   },
+  fetchTradeAccountRequests(params) {
+    return _get('admin/trade-account', params);
+  },
+  fetchTradeAccountRequestById(id) {
+    return _get(`admin/trade-account/${id}`);
+  },
+  saveTradeAccountRequest(item) {
+    return _put(`admin/trade-account/${item._id}`, item);
+  },
+  removeTradeAccountRequest(id) {
+    return _delete(`admin/trade-account/${id}`);
+  },
   fetchLeadById(id) {
     return _get(`admin/lead/${id}`);
   },

package/assets/js/api/index.js

@@ -147,6 +147,9 @@ const api = {
   contactUs(data, shop) {
     return _post(`shop/${shop}/contact`, data);
   },
+  requestTradeAccount(data, shop) {
+    return _post(`shop/${shop}/trade-account`, data);
+  },
   fetchQuoteById(id, params) {
     return _get(`quotes/${id}`, params);
   },

package/assets/js/utils/colors.js

@@ -1,17 +1,23 @@
 
 import { staticLink } from './filters';
 import { COLORS_IMAGES_TYPES } from './../constants/colors';
+import { getCloudflareImageSrc } from './image';
 
 export const isValidImageType = (i, type) => i.type === type || (i.types || []).includes(type);
 
 export const isValidImageTypes = (i, types) => types.some(type => isValidImageType(i, type));
 
 export const getColorImage = (product = {}, size = 'small', type, color, allowAnyColor = false, excludeType = []) => {
+  const image = getColorImageObject(product, type, color, allowAnyColor, excludeType);
+  return image && ((image[size] && staticLink(image[size])) || getCloudflareImageSrc(image.cloudflareImageId, size));
+};
+
+export const getColorImageObject = (product = {}, type, color, allowAnyColor = false, excludeType = []) => {
   const excludeTypes = (excludeType && Array.isArray(excludeType) ? excludeType : [excludeType]) || [];
   const validImages = (product.images || []).filter(i => !excludeTypes.some(type => isValidImageType(i, type)));
   const colorImage = color && validImages.find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (color?._id === i.color || color?._id === i.color?._id));
   const image = colorImage || validImages.find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (allowAnyColor || !i.color));
-  return image && image[size] && staticLink(image[size]);
+  return image;
 };
 
 export const getProductCover = (product = {}, size = 'small', type = COLORS_IMAGES_TYPES.FRONT, color, allowAnyColor = false) => {
@@ -49,6 +55,20 @@ export const getProductMediumCover = (product, type, color) => getProductCover(p
 export const getProductLargeCover = (product, type, color) => getProductCover(product, 'large', type, color);
 export const getProductOriginCover = (product, type, color) => getProductCover(product, 'origin', type, color);
 
+export const getProductCoverObject = (product, type = COLORS_IMAGES_TYPES.FRONT, color) =>
+  (color && getColorImageObject(product, `catalog_${type}`, color)) ||
+  (color && getColorImageObject(product, type, color)) ||
+  getColorImageObject(product, `catalog_${type}`, null, true) ||
+  getColorImageObject(product, type, color) ||
+  getColorImageObject(product, type, null, true) ||
+  null;
+
+export const getProductHoverCoverObject = (product, currentColor) =>
+  getColorImageObject(product, 'catalog_hover', currentColor) ||
+  (currentColor && getColorImageObject(product, 'back', currentColor)) ||
+  getColorImageObject(product, 'catalog_hover', null, true) ||
+  null;
+
 export const getBgStyle = img => img && ({ 'background-image': `url("${img}")` });
 
 export function getColorBackgroundStyle(color, skipPattern, originBackground) {

package/assets/js/utils/image.js

@@ -11,7 +11,7 @@ export function getCloudflareImageSrc(cloudflareImageId, variant = IMAGE_VARIANT
 }
 
 export function getCloudflareImageSrcset(cloudflareImageId) {
-  const lines = (cloudflareImageId || '').split("\n").map(l => l.trim()).filter(Boolean);
+  const lines = (cloudflareImageId || '').split(/\n/g).map(l => l.trim()).filter(Boolean);
   if (lines.length < 2) {
     return null;
   }

package/components/common/lancom-image.vue

@@ -5,7 +5,8 @@
     :alt="alt"
     :loading="loading"
     :decoding="decoding"
-    :class="imgClass" />
+    :class="imgClass"
+    @load="$emit('load', $event)" />
 </template>
 
 <script>
@@ -45,13 +46,19 @@ export default {
   },
   computed: {
     resolvedSrc() {
-      if (this.overrideSrc) return this.overrideSrc;
-      if (!this.image) return null;
+      if (this.overrideSrc) {
+        return this.overrideSrc;
+      }
+      if (!this.image) {
+        return null;
+      }
       const { large, medium, small, thumb, origin, cloudflareImageId } = this.image;
-      return this.image[this.size] || large || medium || small || thumb || origin || getCloudflareImageSrc(cloudflareImageId);
+      return this.image[this.size] || large || medium || small || thumb || origin || getCloudflareImageSrc(cloudflareImageId, this.size);
     },
     resolvedSrcset() {
-      if (this.overrideSrc) return null;
+      if (this.overrideSrc) {
+        return null;
+      }
       return getCloudflareImageSrcset(this.image?.cloudflareImageId);
     }
   }

package/components/products/products_autocomplete/products-autocomplete.vue

@@ -5,7 +5,7 @@
         v-model="text"
         :autofocus="autofocus"
         name="search"
-        :placeholder="placeholder"
+        :placeholder="focused ? '' : placeholder"
         type="text"
         class="form-field no-label tiny-placeholder labelless"
         autocomplete="off"
@@ -13,8 +13,8 @@
         autocapitalize="off"
         spellcheck="false"
         @input="searchWithDebounce"
-        @focus="showResults"
-        @blur="hideResults"
+        @focus="focused = true; showResults()"
+        @blur="focused = false; hideResults()"
         @keydown.enter="goToSearch" />
       <i
         v-if="hasSearchIcon"
@@ -81,6 +81,7 @@ export default {
     return {
       searching: false,
       visibleResult: false,
+      focused: false,
       text: '',
       products: [],
       searchWithDebounce: debounce(this.search, 1000),

package/components/trade_account_request/trade-account-request.vue

@@ -0,0 +1,524 @@
+<template>
+  <div class="TradeAccountRequest__wrapper">
+    <div
+      v-if="!submitted"
+      class="TradeAccountRequest__form-container">
+      <slot name="header">
+        <div class="TradeAccountRequest__header">
+          <h1 class="TradeAccountRequest__title">
+            Request Trade Account
+          </h1>
+          <p class="TradeAccountRequest__description">
+            For businesses making regular purchases, a 30-day trade account offers a seamless and efficient way to order your workwear and supplies.
+            Please complete the form below to apply.
+          </p>
+          <p class="TradeAccountRequest__note">
+            <strong>Please note:</strong> 30-day trade accounts are available for businesses with a minimum monthly spend of $500.
+          </p>
+        </div>
+      </slot>
+
+      <validation-observer
+        ref="form"
+        v-slot="{ handleSubmit, errors: submittedErrors }"
+        tag="form"
+        class="TradeAccountRequest__form">
+        <div class="TradeAccountRequest__section-title">
+          Contact Details
+        </div>
+        <div class="row">
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="First Name"
+              rules="required"
+              class="form-row">
+              <label class="form-label">First Name</label>
+              <input
+                v-model="form.firstName"
+                type="text"
+                class="form-field labelless"
+                placeholder="First name"
+                :class="{ 'is-danger': errors.length, filled: form.firstName }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Last Name"
+              rules="required"
+              class="form-row">
+              <label class="form-label">Last Name</label>
+              <input
+                v-model="form.lastName"
+                type="text"
+                class="form-field labelless"
+                placeholder="Last name"
+                :class="{ 'is-danger': errors.length, filled: form.lastName }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Phone"
+              rules="required"
+              class="form-row">
+              <label class="form-label">Phone Number</label>
+              <input
+                v-model="form.phone"
+                type="tel"
+                class="form-field labelless"
+                placeholder="0400 000 000"
+                :class="{ 'is-danger': errors.length, filled: form.phone }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Email"
+              rules="required|email"
+              class="form-row">
+              <label class="form-label">Email Address</label>
+              <input
+                v-model="form.email"
+                type="email"
+                class="form-field labelless"
+                placeholder="your@email.com.au"
+                :class="{ 'is-danger': errors.length, filled: form.email }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+        </div>
+
+        <div class="TradeAccountRequest__section-title">
+          Business Information
+        </div>
+        <div class="row">
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Company Name"
+              rules="required"
+              class="form-row">
+              <label class="form-label">Company Name</label>
+              <input
+                v-model="form.businessName"
+                type="text"
+                class="form-field labelless"
+                placeholder="Your company name"
+                :class="{ 'is-danger': errors.length, filled: form.businessName }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="ABN"
+              class="form-row">
+              <label class="form-label">ABN</label>
+              <input
+                v-model="form.abn"
+                type="text"
+                class="form-field labelless"
+                placeholder="Australian Business Number"
+                :class="{ 'is-danger': errors.length, filled: form.abn }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Industry"
+              class="form-row">
+              <label class="form-label">Industry / Business Type</label>
+              <input
+                v-model="form.industry"
+                type="text"
+                class="form-field labelless"
+                placeholder="e.g. Construction, Hospitality, Healthcare"
+                :class="{ 'is-danger': errors.length, filled: form.industry }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Company Size"
+              class="form-row">
+              <label class="form-label">Company Size</label>
+              <input
+                v-model="form.companySize"
+                type="text"
+                class="form-field labelless"
+                placeholder="e.g. 1–10, 11–50, 50+"
+                :class="{ 'is-danger': errors.length, filled: form.companySize }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+        </div>
+
+        <div class="TradeAccountRequest__section-title">
+          Delivery Address
+        </div>
+        <div class="row">
+          <div class="col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Street Address"
+              class="form-row">
+              <label class="form-label">Street Address</label>
+              <input
+                v-model="form.streetAddress"
+                type="text"
+                class="form-field labelless"
+                placeholder="Street address"
+                :class="{ 'is-danger': errors.length, filled: form.streetAddress }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-12">
+            <div class="form-row">
+              <postcode-select
+                :suburb="form.suburb"
+                :required="false"
+                :labelless="true"
+                placeholder="Suburb"
+                @select="handleSuburbChange" />
+            </div>
+          </div>
+        </div>
+
+        <div class="TradeAccountRequest__section-title">
+          Additional Information
+        </div>
+        <div class="row">
+          <div class="col-12">
+            <div class="form-row">
+              <label class="form-label">Have you purchased from us before?</label>
+              <div class="TradeAccountRequest__radio-group">
+                <label class="TradeAccountRequest__radio-label">
+                  <input
+                    v-model="form.previousCustomer"
+                    type="radio"
+                    :value="true" />
+                  Yes
+                </label>
+                <label class="TradeAccountRequest__radio-label">
+                  <input
+                    v-model="form.previousCustomer"
+                    type="radio"
+                    :value="false" />
+                  No
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Credit Line Request"
+              class="form-row">
+              <label class="form-label">Credit Line Request</label>
+              <textarea
+                v-model="form.creditLineRequest"
+                class="form-field labelless"
+                rows="4"
+                placeholder="Please describe your credit line requirements and any additional information about your business needs."
+                :class="{ 'is-danger': errors.length, filled: form.creditLineRequest }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+        </div>
+
+        <div
+          v-if="errorMessage"
+          class="TradeAccountRequest__error">
+          {{ errorMessage }}
+        </div>
+
+        <div class="form-actions full">
+          <btn
+            btn-class="green"
+            btn-label="Submit Application"
+            :btn-disabled="submitting"
+            :btn-processing="submitting"
+            :btn-block="true"
+            @onclick="handleSubmit(submit)" />
+        </div>
+      </validation-observer>
+    </div>
+
+    <div
+      v-else
+      class="TradeAccountRequest__success">
+      <div class="TradeAccountRequest__success-icon">
+        ✓
+      </div>
+      <h2 class="TradeAccountRequest__success-title">
+        Received!
+      </h2>
+      <p class="TradeAccountRequest__success-text">
+        Thank you for applying for a trade account. We've received your application
+        (ref: <strong>{{ submittedCode }}</strong>) and will be in touch within 1–2 business days.
+      </p>
+      <btn
+        to="/"
+        btn-class="green"
+        btn-label="Continue Shopping" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import Btn from '@lancom/shared/components/common/btn';
+
+export default {
+  name: 'TradeAccountRequest',
+  components: {
+    PostcodeSelect,
+    Btn
+  },
+  data() {
+    return {
+      submitted: false,
+      submitting: false,
+      submittedCode: null,
+      errorMessage: null,
+      form: {
+        businessName: '',
+        firstName: '',
+        lastName: '',
+        email: '',
+        phone: '',
+        abn: '',
+        industry: '',
+        companySize: '',
+        streetAddress: '',
+        suburb: null,
+        state: '',
+        postcode: '',
+        previousCustomer: null,
+        creditLineRequest: ''
+      }
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    handleSuburbChange(suburb) {
+      this.form.suburb = suburb;
+      this.form.state = suburb?.state || '';
+      this.form.postcode = suburb?.postcode || '';
+    },
+    async submit() {
+      this.errorMessage = null;
+      this.submitting = true;
+      try {
+        let recaptchaToken = null;
+        if (this.$recaptcha) {
+          recaptchaToken = await this.$recaptcha('trade_account');
+        }
+        const payload = {
+          ...this.form,
+          suburb: this.form.suburb?.locality || this.form.suburb?.city || '',
+          recaptchaToken
+        };
+        const result = await api.requestTradeAccount(payload, this.shop._id);
+        this.submittedCode = result.code;
+        this.submitted = true;
+      } catch (e) {
+        this.errorMessage = 'Something went wrong. Please try again or contact us directly.';
+      } finally {
+        this.submitting = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.TradeAccountRequest {
+  &__form-container {
+    background: #fff;
+    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+    padding: 48px 40px 56px;
+
+    @media (max-width: 576px) {
+      padding: 32px 20px 40px;
+    }
+  }
+
+  &__header {
+    margin-bottom: 36px;
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+  }
+
+  &__description {
+    font-size: 15px;
+    color: #555;
+    margin-bottom: 10px;
+    line-height: 1.6;
+  }
+
+  &__note {
+    font-size: 14px;
+    color: #777;
+    background: #f8f8f8;
+    border-left: 3px solid #ccc;
+    padding: 10px 14px;
+    border-radius: 0 4px 4px 0;
+  }
+
+  &__section-title {
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #999;
+    margin: 28px 0 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #eee;
+  }
+
+  &__radio-group {
+    display: flex;
+    gap: 24px;
+    margin-top: 4px;
+  }
+
+  &__radio-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: #333;
+    cursor: pointer;
+
+    input[type="radio"] {
+      margin: 0;
+      cursor: pointer;
+    }
+  }
+
+  &__error {
+    margin-top: 16px;
+    padding: 12px 16px;
+    background: #fff5f5;
+    border: 1px solid #f5c6c6;
+    border-radius: 4px;
+    color: #c0392b;
+    font-size: 14px;
+  }
+
+  &__success {
+    text-align: center;
+    padding: 80px 40px;
+    background: #fff;
+    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+  }
+
+  &__success-icon {
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    background: #38c88d;
+    color: #fff;
+    font-size: 36px;
+    line-height: 72px;
+    margin: 0 auto 24px;
+  }
+
+  &__success-title {
+    font-size: 26px;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+
+  &__success-text {
+    font-size: 15px;
+    color: #555;
+    margin-bottom: 32px;
+    line-height: 1.6;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+</style>

package/mixins/product-preview.js

@@ -1,5 +1,5 @@
 import { mapGetters } from 'vuex';
-import { getColorBackgroundStyle, getProductMediumCover, getBgStyle, getProductHoverCover } from '@lancom/shared/assets/js/utils/colors';
+import { getColorBackgroundStyle, getProductMediumCover, getBgStyle, getProductHoverCover, getProductCoverObject, getProductHoverCoverObject } from '@lancom/shared/assets/js/utils/colors';
 import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 import { sortSizes } from '@lancom/shared/assets/js/utils/sizes';
@@ -99,6 +99,12 @@ const productPreview = {
     productСoverHover() {
       return getProductHoverCover(this.product, this.currentColor) || getProductMediumCover(this.product, 'back', this.currentColor);
     },
+    productСoverImage() {
+      return getProductCoverObject(this.product, 'front', this.currentColor);
+    },
+    productСoverHoverImage() {
+      return getProductHoverCoverObject(this.product, this.currentColor);
+    },
     productСoverBg() {
       return getBgStyle(this.productСover);
     },

package/package.json

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