@lancom/shared 0.0.58 → 0.0.64

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

@@ -7,6 +7,7 @@ export default {
   ],
   computed: {
     ...mapGetters(['shop']),
+    ...mapGetters('auth', ['user']),
     ...mapGetters('cart', [
       'entities',
       'simpleProducts',
@@ -32,6 +33,10 @@ export default {
   },
   mounted() {
     this.calculateCartPrice(this.shop);
+    if (!this.suburb && this.user?.suburb) {
+      this.handleSuburbChange(this.user.suburb);
+    }
+    console.log('user: ', this.user);
   },
   methods: {
     ...mapMutations('cart', [

package/components/checkout/order/address-form/address-form.vue

@@ -259,9 +259,15 @@ export default {
     ...mapGetters(['shop']),
     ...mapGetters('cart', [
       'suburb'
+    ]),
+    ...mapGetters('auth', [
+      'user'
     ])
   },
-  mounted() {
+  created() {
+    if (!this.address.suburb && !this.suburb &&  this.user?.suburb) {
+      this.handleSuburbChange(this.user.suburb);
+    }
     if (!this.address.suburb) {
       this.setAddressSuburb(this.suburb);
     }

package/components/checkout/order/order-checkout-method/order-checkout-method.scss

@@ -0,0 +1,9 @@
+.OrderCheckoutMethod {
+  &__controls {
+    display: flex;
+    width: 100%;
+    > div {
+      flex-grow: 1;
+    }
+  }
+}

package/components/checkout/order/order-checkout-method/order-checkout-method.vue

@@ -1,11 +1,34 @@
 <template>
   <div class="OrderCheckoutMethod__wrapper">
-    <div class="lc_h3 lc_uppercase lc_bold">
-      Log In
+    <div class="row">
+      <div class="col-12">
+        <div class="OrderCheckoutMethod__controls">
+          <div>
+            <btn
+              :btn-class="isRegister ? 'white' : 'green'"
+              btn-label="LOG IN"
+              :btn-block="true"
+              @onclick="isRegister = false" />
+          </div>
+          <div>
+            <btn
+              :btn-class="isRegister ? 'green' : 'white'"
+              btn-label="REGISTER"
+              :btn-block="true"
+              @onclick="isRegister = true" />
+          </div>
+        </div>
+      </div>
     </div>
     <div class="row">
       <div class="col-12">
-        <signin-form @signin="$emit('next')" />
+        <customer-form
+          v-if="isRegister"
+          :customer="customer"
+          @save="createdCustomer($event)" />
+        <signin-form
+          v-else
+          @signin="signin()" />
       </div>
     </div>
     <progress-steps-controls
@@ -16,14 +39,60 @@
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex';
 import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
 import SigninForm from '@lancom/shared/components/customer/signin_form/signin-form';
+import CustomerForm from '@lancom/shared/components/customer/customer_form/customer-form';
 
 export default {
   name: 'OrderCheckoutMethod',
   components: {
     ProgressStepsControls,
-    SigninForm
+    SigninForm,
+    CustomerForm
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isRegister: false,
+      customer: {
+        firstName: null,
+        lastName: null,
+        email: null,
+        phone: null,
+        password: null
+      }
+    };
+  },
+  computed: {
+    ...mapGetters('auth', ['user'])
+  },
+  methods: {
+    ...mapActions('auth', ['update_user']),
+    createdCustomer({ customer: user, token }) {
+      this.update_user({ user, token });
+
+      this.updateorderData(user);
+
+      this.$emit('next');
+    },
+    signin() {
+      this.updateorderData(this.user);
+      this.$emit('next');
+    },
+    updateorderData(user) {
+      if (user) {
+        this.order.billingAddress.fullName = this.order.billingAddress.fullName || `${user.firstName} ${user.lastName}`;
+        this.order.billingAddress.phone = this.order.billingAddress.phone || user.phone;
+        this.order.billingAddress.email =  this.order.billingAddress.email || user.email;
+        this.order.billingAddress.company =  this.order.billingAddress.company || user.company;
+      }
+    }
   }
 };
 </script>

package/components/checkout/order/order.vue

@@ -109,7 +109,8 @@ export default {
         ...(this.user ? {
           fullName: `${this.user.firstName} ${this.user.lastName}`,
           phone: this.user.phone,
-          email: this.user.email
+          email: this.user.email,
+          company: this.user.company
         } : {})
       },
       shippingAddress: {

package/components/common/stars-mark.vue

@@ -83,6 +83,7 @@ export default {
     height: 24px;
     background-position: top left;
     background-repeat: repeat-x;
+    background-size: 24px 24px;
     cursor: pointer;
   }
   &__wrapper  {

package/components/customer/customer.scss

@@ -0,0 +1,9 @@
+.CustomerPage {
+  &__controls {
+    display: flex;
+    width: 100%;
+    > div {
+      flex-grow: 1;
+    }
+  }
+}

package/components/customer/customer.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="CustomerPage__wrapper">
+    <div class="row">
+      <div class="col-12">
+        <div class="CustomerPage__controls">
+          <div>
+            <btn
+              :btn-class="isRegister ? 'white' : 'green'"
+              btn-label="LOG IN"
+              :btn-block="true"
+              @onclick="isRegister = false" />
+          </div>
+          <div>
+            <btn
+              :btn-class="isRegister ? 'green' : 'white'"
+              btn-label="REGISTER"
+              :btn-block="true"
+              @onclick="isRegister = true" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <customer-form
+          v-if="isRegister"
+          :customer="customer"
+          @save="createdCustomer($event)" />
+        <signin-form
+          v-else
+          @signin="signin()" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import SigninForm from '@lancom/shared/components/customer/signin_form/signin-form';
+import CustomerForm from '@lancom/shared/components/customer/customer_form/customer-form';
+
+export default {
+  name: 'Customer',
+  components: {
+    SigninForm,
+    CustomerForm
+  },
+  props: {
+    activeRegister: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isRegister: this.activeRegister,
+      customer: {
+        firstName: null,
+        lastName: null,
+        email: null,
+        phone: null,
+        password: null,
+        company: null,
+        suburb: null,
+        signUpForNewsletter: false
+      }
+    };
+  },
+  methods: {
+    ...mapActions('auth', ['update_user']),
+    createdCustomer({ customer: user, token }) {
+      this.update_user({ user, token });
+      this.$router.push('/');
+    },
+    signin() {
+      this.$router.push('/');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'customer.scss';
+</style>

package/components/customer/customer_form/customer-form.scss

@@ -0,0 +1,12 @@
+@import "@/assets/scss/variables";
+
+.CustomerForm {
+  &__error {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 18px 10px;
+    text-align: center;
+    color: $white;
+    background: #EA3434;
+  }
+}

package/components/customer/customer_form/customer-form.vue

@@ -1,161 +1,213 @@
 <template>
   <div class="form__wrapper CustomerFrom__wrapper">
     <validation-observer ref="form">
-      <div
-        v-if="errorMessage"
-        class="alert alert-danger">
-        Save error: {{ errorMessage }}
-      </div>
       <div class="mt-10">
-        <validation-provider
-          v-slot="{ errors }"
-          tag="div"
-          name="First Name"
-          rules="required"
-          class="form-row">
-          <label
-            for="firstName"
-            class="form-label">
-            First Name
-          </label>
-          <input
-            id="firstName"
-            v-model="customer.firstName"
-            name="firstName"
-            type="text"
-            class="form-field labelless"
-            placeholder="First Name"
-            :class="{
-              'is-invalid': errors.length,
-              filled: customer.firstName
-            }" />
-          <span
-            v-if="errors.length"
-            class="form-help is-danger">
-            {{ errors[0] }}
-          </span>
-        </validation-provider>
-        <validation-provider
-          v-slot="{ errors }"
-          tag="div"
-          name="Last Name"
-          rules="required"
-          class="form-row">
-          <label
-            for="lastName"
-            class="form-label">
-            Last Name
-          </label>
-          <input
-            id="lastName"
-            v-model="customer.lastName"
-            name="lastName"
-            type="text"
-            class="form-field labelless"
-            placeholder="Last Name"
-            :class="{
-              'is-invalid': errors.length,
-              filled: customer.lastName
-            }" />
-          <span
-            v-if="errors.length"
-            class="form-help is-danger">
-            {{ errors[0] }}
-          </span>
-        </validation-provider>
-        <validation-provider
-          v-slot="{ errors }"
-          tag="div"
-          name="Phone"
-          rules="required"
-          class="form-row">
-          <label
-            for="phone"
-            class="form-label">
-            Phone
-          </label>
-          <input
-            id="phone"
-            v-model="customer.phone"
-            name="phone"
-            type="text"
-            class="form-field labelless"
-            placeholder="Phone"
-            :class="{
-              'is-invalid': errors.length,
-              filled: customer.phone
-            }" />
-          <span
-            v-if="errors.length"
-            class="form-help is-danger">
-            {{ errors[0] }}
-          </span>
-        </validation-provider>
-        <validation-provider
-          v-slot="{ errors }"
-          tag="div"
-          name="Email"
-          rules="required|email"
-          class="form-row">
-          <label
-            for="email"
-            class="form-label">
-            Email
-          </label>
-          <input
-            id="email"
-            ref="email"
-            v-model="customer.email"
-            name="email"
-            type="text"
-            class="form-field labelless"
-            placeholder="Email"
-            :disabled="customer._id"
-            :class="{
-              'is-invalid': errors.length,
-              filled: customer.email
-            }" />
-          <span
-            v-if="errors.length"
-            class="form-help is-danger">
-            {{ errors[0] }}
-          </span>
-        </validation-provider>
-        <validation-provider
-          v-if="!customer._id"
-          v-slot="{ errors }"
-          tag="div"
-          name="Password"
-          rules="required"
-          class="form-row">
-          <label
-            for="password"
-            class="form-label">
-            Password
-          </label>
-          <input
-            id="password"
-            ref="password"
-            v-model="customer.password"
-            name="password"
-            type="password"
-            class="form-field labelless"
-            placeholder="Password"
-            :class="{
-              'is-invalid': errors.length,
-              filled: customer.password
-            }" />
-          <span
-            v-if="errors.length"
-            class="form-help is-danger">
-            {{ errors[0] }}
-          </span>
-        </validation-provider>
+        <div class="row">
+          <div class="col-6">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Email"
+              rules="required|email"
+              class="form-row">
+              <label
+                for="email"
+                class="form-label">
+                Email
+              </label>
+              <input
+                id="email"
+                ref="email"
+                v-model="customer.email"
+                name="email"
+                type="text"
+                class="form-field labelless"
+                placeholder="Email"
+                :disabled="customer._id"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.email
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="First Name"
+              rules="required"
+              class="form-row">
+              <label
+                for="firstName"
+                class="form-label">
+                First Name
+              </label>
+              <input
+                id="firstName"
+                v-model="customer.firstName"
+                name="firstName"
+                type="text"
+                class="form-field labelless"
+                placeholder="First Name"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.firstName
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Phone"
+              class="form-row">
+              <label
+                for="phone"
+                class="form-label">
+                Phone (optional)
+              </label>
+              <input
+                id="phone"
+                v-model="customer.phone"
+                name="phone"
+                type="number"
+                class="form-field labelless"
+                placeholder="Phone"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.phone
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+          <div class="col-6">
+            <validation-provider
+              v-if="!customer._id"
+              v-slot="{ errors }"
+              tag="div"
+              name="Password"
+              rules="required"
+              class="form-row">
+              <label
+                for="password"
+                class="form-label">
+                Password
+              </label>
+              <input
+                id="password"
+                ref="password"
+                v-model="customer.password"
+                name="password"
+                type="password"
+                class="form-field labelless"
+                placeholder="Password"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.password
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Last Name"
+              rules="required"
+              class="form-row">
+              <label
+                for="lastName"
+                class="form-label">
+                Last Name
+              </label>
+              <input
+                id="lastName"
+                v-model="customer.lastName"
+                name="lastName"
+                type="text"
+                class="form-field labelless"
+                placeholder="Last Name"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.lastName
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Company"
+              class="form-row">
+              <label
+                for="company"
+                class="form-label">
+                Company (optional)
+              </label>
+              <input
+                id="company"
+                v-model="customer.company"
+                name="company"
+                type="text"
+                class="form-field labelless"
+                placeholder="Company"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.company
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+        </div>
+        <div
+          class="row"
+          style="margin-top: -20px">
+          <div class="col-12">
+            <postcode-select
+              :suburb="customer.suburb"
+              :labelless="true"
+              placeholder="Suburb"
+              @select="handleSuburbChange">
+            </postcode-select>
+            <div class="form-row">
+              <label class="form-label">
+                <checkbox v-model="customer.signUpForNewsletter" />
+                <span class="lc_regular12 lc__grey1">
+                  Sign up for newsletter
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="form__footer mt-5">
+        <div
+          v-if="errorMessage"
+          class="CustomerForm__error">
+          {{ errorMessage }}
+        </div>
         <div class="form-actions full">
           <btn
-            class="btn btn-green"
+            class="btn btn-black"
             :btn-processing="processing"
             :btn-disabled="processing"
             :btn-label="customer._id ? 'Save' : 'Create Account'"
@@ -169,10 +221,14 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
 import api from '@lancom/shared/assets/js/api';
 
 export default {
   name: 'CustomerForm',
+  components: {
+    PostcodeSelect
+  },
   props: {
     customer: {
       type: Object,
@@ -190,6 +246,8 @@ export default {
   },
   methods: {
     async submit() {
+      this.errorMessage = null;
+
       const isValid = await this.$refs.form.validate();
       if (!isValid) {
         return;
@@ -205,6 +263,9 @@ export default {
       } finally {
         this.processing = false;
       }
+    },
+    handleSuburbChange(suburb) {
+      this.$set(this.customer, 'suburb', suburb);
     }
   }
 };

package/components/customer/signin_form/signin-form.vue

@@ -118,6 +118,8 @@ export default {
   methods: {
     ...mapActions('auth', ['auth_request']),
     async submit() {
+      this.error = null;
+
       const isValid = await this.$refs.form.validate();
       if (!isValid) {
         return;
@@ -125,8 +127,6 @@ export default {
 
       try {
         this.processing = true;
-
-        this.error = null;
         const data = { customer: this.customer, shop: this.shop };
         const customer = await this.auth_request(data);
         if (this.authStatus === 'error') {

package/components/pages/customer/create/create.vue

@@ -22,7 +22,10 @@ export default {
         lastName: null,
         email: null,
         phone: null,
-        password: null
+        password: null,
+        company: null,
+        suburb: null,
+        signUpForNewsletter: false
       }
     };
   },

package/components/quotes/quote_request/quote-request.scss

@@ -35,8 +35,8 @@
     margin-bottom: 10px;
   }
   &__content {
-    margin-top: 20px;
-    border-top: 2px solid #F4F4F4;
+    // margin-top: 20px;
+    // border-top: 2px solid #F4F4F4;
     padding-top: 20px;
   }
   &__btn {

package/components/quotes/quote_request/quote-request.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="QuoteRequest__wrapper">
-    <div class="QuoteRequest__title">
+    <!-- <div class="QuoteRequest__title">
       Quick Quote
     </div>
     <div class="QuoteRequest__info">
       Fill our the form below and one of our team members will respond with a Quote ASAP!
-    </div>
+    </div> -->
     <div class="QuoteRequest__content">
       <validation-observer
         v-slot="{ invalid, handleSubmit, errors: submittedErrors }"

package/nuxt.config.js

@@ -31,7 +31,7 @@ module.exports = (config, axios) => ({
       '/customer/**'
     ],
     routes: async () => {
-      const { data } = await axios.get(`${config.API_URL}/sitemap?host=${config.HOST_NAME}`);
+      const { data } = await axios.get(`${config.API_URL}/feed/sitemap?host=${config.HOST_NAME}`);
       return data.map(url => ({ url, priority: 0.8 }));
     }
   },
@@ -56,7 +56,8 @@ module.exports = (config, axios) => ({
   modules: [
     '@nuxtjs/axios',
     '@nuxtjs/dotenv',
-    '@nuxtjs/sitemap'
+    '@nuxtjs/sitemap',
+    '@/node_modules/@lancom/feed/lib/module'
   ],
   axios: {
   },
@@ -71,5 +72,45 @@ module.exports = (config, axios) => ({
       '@lancom'
     ],
     extend(config, ctx) {}
-  }
+  },
+  feed: [{
+    path: '/google-shopping.xml',
+    async get() {
+      const { data } = await axios.get(`${config.API_URL}/feed/products?host=${config.HOST_NAME}`);
+      return {
+        title: { _text: 'All products' },
+        link: { _text: `https://${config.HOST_NAME}` },
+        generator: { _text: config.HOST_NAME },
+        item: data.map(item => {
+          const spliceFirstImage = images => (images || []).splice(0, 1)[0];
+          const getImages = images => (images || []).length > 0 ? images : null;
+          const image = spliceFirstImage(item.colorImages) || spliceFirstImage(item.frontImages) || spliceFirstImage(item.backImages) || {};
+          const images = getImages(item.colorImages) || getImages(item.frontImages) || getImages(item.backImages) || [];
+          return {
+            title: { _text: `${item.name} ${item.color}-${item.size}` },
+            link: { _text: `https://${config.HOST_NAME}${item.link}` },
+            'g:id': { _text: item.id },
+            'g:item_group_id': { _text: item.groupId },
+            'g:size': { _text: item.size },
+            'g:size_system': 'AU',
+            'g:size_type': 'regular',
+            'g:gender': { _text: item.gender },
+            'g:material': { _text: item.naterial },
+            'g:brand': { _text: item.brand },
+            'g:condition': { _text: item.condition },
+            'g:mpn': { _text: item.mpn },
+            'g:color': { _text: item.color },
+            'g:image_link': image.medium,
+            'g:additional_image_link': images.map(i => i.medium),
+            // 'g:google_product_category': 'Business & Industrial>Work Safety Protective Equipment>High-Visibility Clothing',
+            // 'g:product_type': 'WDP AU ROOT > Day Night Safety Vests',
+            // 'g:availability': 'in stock',
+            // 'g:price': '5.49AUD',
+            // 'g:identifier_exists': true,
+            // 'g:shipping_weight': { _text: item.weight }
+          };
+        })
+      };
+    }
+  }]
 });

package/package.json

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

package/store/auth.js

@@ -23,20 +23,19 @@ export const getters = {
   stateError: state => state.err
 };
 export const actions = {
-  auth_request({ commit }, { user, customer, shop }) {
+  async auth_request({ commit }, { user, customer, shop }) {
     commit('AUTH_REQUEST');
     const request = customer ? api.authCustomer(customer, shop._id) : api.admin.authUser(user);
-    return request
-      .then(({ token, user }) => {
-        Cookie.set('auth', token);
-        this.$axios.defaults.headers.authorization = token;
-        commit('AUTH_SUCCESS', token, user);
-        return user;
-      })
-      .catch(err => {
-        commit('AUTH_ERROR', err);
-        Cookie.remove('auth');
-      });
+    try {
+      const { token, user, customer } = await request;
+      Cookie.set('auth', token);
+      this.$axios.defaults.headers.authorization = token;
+      commit('AUTH_SUCCESS', token, customer || user);
+      return customer || user;
+    } catch (err) {
+      commit('AUTH_ERROR', err);
+      Cookie.remove('auth');
+    }
   },
   auth_logout({ commit }) {
     commit('AUTH_LOGOUT');