@lancom/shared 0.0.409 → 0.0.410

package/assets/js/api/index.js

@@ -1,4 +1,3 @@
-
 import { _get, _post, _put, _delete, _patch } from './helpers';
 import adminApi from './admin';
 import { unminifySimpleProducts } from './utils/simple-products';
@@ -20,6 +19,9 @@ const api = {
   saveCustomer(customer, shop) {
     return customer._id ? _patch(`shop/${shop}/customer/${customer.accessToken}`, customer) : _post(`shop/${shop}/customer`, customer);
   },
+  fetchCustomer(accessToken, shop) {
+    return _get(`shop/${shop}/customer/${accessToken}`);
+  },
   authCustomer(customer, shop) {
     return _post(`shop/${shop}/customer/login`, customer);
   },

package/components/common/coupon_select/coupon-select.vue

@@ -74,7 +74,7 @@
       <div
         v-else
         class="lc_caption form-help is-danger">
-        Invalid coupon: Min Order for Coupon: {{ value.minOrderValue | price(currency) }}
+        Invalid coupon: Min Order for Coupon: {{ minOrderValue | price(currency) }}
       </div>
       <div v-if="hasQualifyingProducts" class="lc_caption mb-10">
         <div v-if="noQualifyingProductsInCart">
@@ -129,8 +129,18 @@ export default {
     hasQualifyingProductsInCart() {
       return this.sumQualifyingProductsInCart > 0;
     },
+    minOrderValue() {
+      const value = [
+        this.value,
+        ...(this.value?.values || [])
+      ]
+      .filter(v => v?.minOrderValue > 0)
+      .sort((a, b) => a.minOrderValue - b.minOrderValue)[0];
+
+      return value?.minOrderValue || 0;
+    },
     isValidPricing() {
-      return !this.value?.minOrderValue || this.pricing.coupon;
+      return !this.minOrderValue || this.pricing.coupon;
     },
     model: {
       get() {

package/components/common/phone_input/phone-input.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="form-row">
+    <div :class="containerClassname">
       <label
         v-if="labelless"
-        class="form-label"
+        :class="labelClassname"
         @click="$refs.phone.$el.focus()">
         {{ displayLabelText }}
       </label>
@@ -31,8 +31,8 @@
               :disabled="disabled"
               :name="'phone' + uniqueKey"
               type="text"
-              class="form-field"
               :class="{
+                [inputClassname]: true,
                 'is-danger': errors.length,
                 filled: model,
                 labelless
@@ -115,6 +115,18 @@ export default {
     namePrefix: {
       type: String,
       default: ''
+    },
+    containerClassname: {
+      type: String,
+      default: 'form-row'
+    },
+    labelClassname: {
+      type: String,
+      default: 'form-label'
+    },
+    inputClassname: {
+      type: String,
+      default: 'form-field'
     }
   },
   data() {

package/components/customer/customer_navigation_menu/customer-navigation-menu.vue

@@ -15,6 +15,12 @@
 <script>
 export default {
   name: 'CustomerMenu',
+  props: {
+    activeMenuItem: {
+      type: String,
+      required: true
+    }
+  },
   data() {
     return {
       menuItems: [{
@@ -29,14 +35,12 @@ export default {
         label: 'Coupons',
         key: 'coupons',
         url: '/customer/coupons'
+      }, {
+        label: 'Preferences',
+        key: 'preferences',
+        url: '/customer/preferences'
       }]
     };
-  },
-  props: {
-    activeMenuItem: {
-      type: String,
-      required: true
-    }
   }
 };
 </script>
@@ -68,5 +72,5 @@ export default {
       background-color: $green;
     }
   }
-} 
+}
 </style>

package/components/customer/customer_preferences_form/customer-preferences-form.scss

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

package/components/customer/customer_preferences_form/customer-preferences-form.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="form__wrapper CustomerFrom__wrapper">
+    <validation-observer ref="form">
+      <div class="mt-10">
+        <div
+          class="row"
+          style="margin-top: -20px">
+          <div class="col-12">
+            <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-black"
+            :btn-processing="processing"
+            :btn-disabled="processing"
+            :btn-label="customer._id ? 'Save' : 'Create Account'"
+            @onclick="submit()">
+          </btn>
+        </div>
+      </div>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'CustomerPreferencesForm',
+  props: {
+    customer: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      errorMessage: null,
+      processing: false
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    async submit() {
+      this.errorMessage = null;
+
+      const isValid = await this.$refs.form.validate();
+      if (!isValid) {
+        return;
+      }
+
+      try {
+        this.processing = true;
+        const result = await api.saveCustomer(this.customer, this.shop._id);
+        this.$emit('save', result);
+      } catch ({ response }) {
+        const { data } = response || {};
+        this.errorMessage = data && data.error;
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'customer-preferences-form.scss';
+</style>

package/components/pages/customer/preferences/preferences.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="CustomerPreferences__wrapper">
+    <customer-preferences-form
+      v-if="customer"
+      ref="customerForm"
+      :customer="customer"
+      @save="onSave"
+      @customer-loaded="onCustomerLoaded" />
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+import { mapGetters, mapActions } from 'vuex';
+import CustomerPreferencesForm from '@lancom/shared/components/customer/customer_preferences_form/customer-preferences-form';
+
+export default {
+  name: 'CustomerPreferences',
+  components: {
+    CustomerPreferencesForm
+  },
+  data() {
+    return {
+      customer: null,
+      loading: false,
+      error: null
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('auth', ['user'])
+  },
+  async created() {
+    await this.loadCustomerData();
+  },
+  methods: {
+    ...mapActions('auth', ['update_user']),
+    async loadCustomerData() {
+      try {
+        this.processing = true;
+        const customer = await api.fetchCustomer(this.user.accessToken, this.shop._id);
+        console.log('customer: ', customer);
+        this.customer = customer;
+      } catch (e) {
+        console.log(e);
+        const errorMessage = e?.response?.data?.error;
+        this.$toastr.e(errorMessage || 'Customer failed to load');
+      } finally {
+        this.processing = false;
+      }
+    },
+    onSave({ customer: user, token }) {
+      this.$toastr.s('Customer successfully saved');
+      this.update_user({ user, token });
+    },
+    onCustomerLoaded(customer) {
+      this.customer = customer;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.loading-message {
+  text-align: center;
+  padding: 2rem;
+  font-size: 1.1rem;
+  color: #666;
+}
+
+.error-message {
+  text-align: center;
+  padding: 2rem;
+  color: #d32f2f;
+  background-color: #ffebee;
+  border-radius: 4px;
+  margin: 1rem 0;
+}
+</style>

package/package.json

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

package/pages/customer/preferences.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    :data-aos="aosFadeLeft"
+    class="CustomerPreferencesPage__wrapper">
+    <customer-preferences />
+  </div>
+</template>
+
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+
+export default {
+  name: 'CustomerPreferencesPage',
+  components: {
+    CustomerPreferences: () => import('@lancom/shared/components/pages/customer/preferences/preferences')
+  },
+  mixins: [metaInfo]
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/scss/variables";
+
+  .CustomerPreferencesPage {
+    &__wrapper {
+      margin: 100px auto;
+      width: 500px;
+      @media (max-width: $bp-extra-small-max) {
+        width: auto;
+      }
+    }
+  }
+</style>

package/routes/index.js

@@ -122,6 +122,11 @@ module.exports = function(routes, resolve, config) {
     path: '/customer/coupons',
     component: resolve('@lancom/shared/pages/customer/coupons.vue'),
     chunkName: 'pages/customer/coupons'
+  }, {
+    name: 'customer-preferences',
+    path: '/customer/preferences',
+    component: resolve('@lancom/shared/pages/customer/preferences.vue'),
+    chunkName: 'pages/customer/preferences'
   }, {
     name: 'customer-recovery',
     path: '/customer/recovery',
@@ -137,6 +142,11 @@ module.exports = function(routes, resolve, config) {
     path: '/customer/password/:token',
     component: resolve('@lancom/shared/pages/customer/password/_token.vue'),
     chunkName: 'pages/customer/password/reset'
+  }, {
+    name: 'customer-preferences',
+    path: '/customer/preferences',
+    component: resolve('@lancom/shared/pages/customer/preferences.vue'),
+    chunkName: 'pages/customer/preferences'
   }, {
     name: 'checkout-cart',
     path: '/checkout/cart',