@ecomplus/storefront-components 1.0.0-beta.19 → 1.0.0-beta.191

package/src/js/AccountForm.js

@@ -0,0 +1,312 @@
+import {
+  i19a,
+  i19birthdate,
+  i19cellphone,
+  i19companyRegistration,
+  i19contactPhone,
+  i19corporateName,
+  i19docNumber,
+  i19emailAddress,
+  i19female,
+  i19fullName,
+  i19Gender,
+  i19inscriptionNumber,
+  i19InscriptionType,
+  i19iReadAndAccept,
+  i19male,
+  i19nickname,
+  i19emailMarketingOptInMsg,
+  i19personalRegistration,
+  i19privacyPolicy,
+  i19save,
+  i19saved
+} from '@ecomplus/i18n'
+
+import {
+  $ecomConfig,
+  i18n,
+  fullName as getFullName,
+  birthDate as getBirthDate,
+  phone as getPhone
+} from '@ecomplus/utils'
+
+import cloneDeep from 'lodash.clonedeep'
+import checkFormValidity from './helpers/check-form-validity'
+import InputDocNumber from './../InputDocNumber.vue'
+import InputPhone from './../InputPhone.vue'
+import InputDate from './../InputDate.vue'
+
+const countryCode = $ecomConfig.get('country_code')
+
+const { sessionStorage } = window
+const storageKey = 'ecomCustomerAccount'
+
+const countInvalidInputs = (attr = ':invalid') => {
+  return document.querySelectorAll(`.account-form input${attr}`).length
+}
+const formValidateClass = 'was-validated'
+
+export default {
+  name: 'AccountForm',
+
+  components: {
+    InputDocNumber,
+    InputPhone,
+    InputDate
+  },
+
+  props: {
+    isShort: Boolean,
+    isGuestAccess: Boolean,
+    customer: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    privacyPolicyUrl: {
+      type: String,
+      default: typeof window === 'object' ? window.privacyPolicyUrl : null
+    },
+    hasSubmitBtn: {
+      type: Boolean,
+      default: true
+    },
+    btnText: {
+      type: String,
+      default () {
+        return i18n(i19save)
+      }
+    }
+  },
+
+  data () {
+    return {
+      localCustomer: cloneDeep(this.customer),
+      fullName: getFullName(this.customer),
+      storageInterval: null,
+      btnLabel: this.btnText,
+      isPrivacyOptIn: Boolean(this.customer._id)
+    }
+  },
+
+  computed: {
+    i19a: () => i18n(i19a),
+    i19birthdate: () => i18n(i19birthdate),
+    i19cellphone: () => i18n(i19cellphone),
+    i19companyRegistration: () => i18n(i19companyRegistration),
+    i19contactPhone: () => i18n(i19contactPhone),
+    i19corporateName: () => i18n(i19corporateName),
+    i19docNumber: () => i18n(i19docNumber),
+    i19emailAddress: () => i18n(i19emailAddress),
+    i19female: () => i18n(i19female),
+    i19fullName: () => i18n(i19fullName),
+    i19Gender: () => i18n(i19Gender),
+    i19inscriptionNumber: () => i18n(i19inscriptionNumber),
+    i19InscriptionType: () => i18n(i19InscriptionType),
+    i19iReadAndAccept: () => i18n(i19iReadAndAccept),
+    i19male: () => i18n(i19male),
+    i19nickname: () => i18n(i19nickname),
+    i19emailMarketingOptInMsg: () => i18n(i19emailMarketingOptInMsg),
+    i19personalRegistration: () => i18n(i19personalRegistration),
+    i19privacyPolicy: () => i18n(i19privacyPolicy),
+
+    birthdate: {
+      get () {
+        return getBirthDate(this.localCustomer)
+      },
+      set (dateStr) {
+        if (dateStr.length === 8) {
+          const dateNumber = (start, ln) => parseInt(dateStr.substr(start, ln), 10)
+          let day, month, year
+          if (countryCode === 'BR') {
+            day = dateNumber(0, 2)
+            month = dateNumber(2, 2)
+            year = dateNumber(4, 4)
+          } else {
+            day = dateNumber(6, 2)
+            month = dateNumber(4, 2)
+            year = dateNumber(0, 4)
+          }
+          const currentYear = new Date().getFullYear()
+          if (year < currentYear - 125) {
+            year = currentYear - 125
+          } else if (year > currentYear) {
+            year = currentYear
+          }
+          this.localCustomer.birth_date = { day, month, year }
+        }
+      }
+    },
+
+    phoneNumber: {
+      get () {
+        return this.getPhoneStr(0)
+      },
+      set (phoneStr) {
+        this.localCustomer.phones[0] = this.parsePhoneStr(phoneStr)
+      }
+    },
+
+    secondPhoneNumber: {
+      get () {
+        return this.getPhoneStr(1)
+      },
+      set (phoneStr) {
+        const { phones } = this.localCustomer
+        phones[phones.length > 0 ? 1 : 0] = this.parsePhoneStr(phoneStr)
+      }
+    }
+  },
+
+  methods: {
+    getPhoneStr (index = 0) {
+      const { phones } = this.localCustomer
+      if (phones[index] && phones[index].number.charAt(0) !== '*') {
+        return getPhone(this.localCustomer.phones[index])
+      }
+      return ''
+    },
+
+    parsePhoneStr (phoneStr) {
+      let code, number
+      if (phoneStr.charAt(0) === '+') {
+        code = parseInt(phoneStr.substr(1, 2))
+        number = phoneStr.substr(3)
+      } else {
+        number = phoneStr
+      }
+      const phoneObj = { number }
+      if (code >= 1 && code <= 999) {
+        phoneObj.country_code = code
+      }
+      return phoneObj
+    },
+
+    update () {
+      if (this.$el.checkValidity()) {
+        this.$emit('update:customer', this.localCustomer)
+      }
+    },
+
+    mergeLocalCustomer (newCustomer) {
+      for (const field in newCustomer) {
+        if (newCustomer[field]) {
+          const localValue = this.localCustomer[field]
+          if (
+            !localValue ||
+            (typeof localValue === 'object' && !Object.keys(localValue).length) ||
+            ['addresses', 'orders', 'loyalty_points_entries'].includes(field)
+          ) {
+            if (field === 'name') {
+              this.fullName = getFullName({
+                name: newCustomer[field]
+              })
+            } else {
+              this.localCustomer[field] = newCustomer[field]
+            }
+          }
+        }
+      }
+    },
+
+    saveToStorage () {
+      sessionStorage.setItem(storageKey, JSON.stringify(this.localCustomer))
+    },
+
+    submit () {
+      this.$nextTick(() => {
+        const $form = this.$el
+        if (!countInvalidInputs('.is-invalid')) {
+          if (!this.localCustomer.display_name) {
+            this.localCustomer.display_name = this.localCustomer.name.given_name
+          }
+          if (checkFormValidity($form)) {
+            this.saveToStorage()
+            this.save()
+          } else if ($form.classList.contains(formValidateClass) && !countInvalidInputs()) {
+            this.save()
+          }
+          $form.classList.add(formValidateClass)
+        } else {
+          $form.classList.remove(formValidateClass)
+        }
+      })
+    },
+
+    save () {
+      this.update()
+      this.$emit('submit', this.localCustomer)
+      this.btnLabel = i18n(i19saved) + '...'
+      setTimeout(() => {
+        this.btnLabel = this.btnText
+      }, 3000)
+    }
+  },
+
+  watch: {
+    fullName (nameStr) {
+      const fixedFullName = nameStr.replace(/\s{2,}/g, ' ')
+      if (fixedFullName !== this.fullName) {
+        this.fullName = fixedFullName
+      } else {
+        const names = fixedFullName.trim().split(' ')
+        this.localCustomer.name = {
+          given_name: names.shift()
+        }
+        const { name } = this.localCustomer
+        if (names.length) {
+          name.family_name = names.pop()
+          if (names.length) {
+            name[name.family_name ? 'middle_name' : 'family_name'] = names.join(' ')
+          }
+        }
+      }
+    },
+
+    customer: {
+      handler () {
+        this.mergeLocalCustomer(this.customer)
+      },
+      deep: true
+    },
+
+    localCustomer: {
+      handler () {
+        if (this.isGuestAccess) {
+          this.$nextTick(this.update)
+        }
+      },
+      deep: true
+    }
+  },
+
+  created () {
+    const sessionCustomer = JSON.parse(sessionStorage.getItem(storageKey))
+    if (sessionCustomer) {
+      this.mergeLocalCustomer(sessionCustomer)
+    }
+    this.storageInterval = setInterval(() => {
+      if (Object.keys(this.localCustomer).length) {
+        this.saveToStorage()
+      }
+    }, 7000)
+    if (!this.localCustomer._id) {
+      this.localCustomer.accepts_marketing = true
+    }
+  },
+
+  mounted () {
+    const $inputs = this.$el.querySelectorAll('input')
+    for (let i = 0; i < $inputs.length; i++) {
+      if (!$inputs[i].value) {
+        $inputs[i].focus()
+        break
+      }
+    }
+  },
+
+  destroyed () {
+    clearInterval(this.storageInterval)
+  }
+}

package/src/js/AccountPoints.js

@@ -0,0 +1,63 @@
+import {
+  i19available,
+  i19loyaltyPoints,
+  i19pointsEarned,
+  i19upTo
+} from '@ecomplus/i18n'
+
+import {
+  i18n,
+  formatDate,
+  formatMoney
+} from '@ecomplus/utils'
+
+export default {
+  name: 'AccountPoints',
+
+  props: {
+    customer: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+
+  computed: {
+    i19available: () => i18n(i19available),
+    i19loyaltyPoints: () => i18n(i19loyaltyPoints),
+    i19pointsEarned: () => i18n(i19pointsEarned),
+    i19upTo: () => i18n(i19upTo),
+
+    validPointsEntries () {
+      const pointsEntries = this.customer.loyalty_points_entries
+      if (pointsEntries) {
+        return pointsEntries.filter(pointsEntry => {
+          const validThru = pointsEntry.valid_thru
+          return (!validThru || new Date(validThru).getTime() >= Date.now()) &&
+            pointsEntry.active_points > 0
+        })
+      }
+      return []
+    },
+
+    totalPoints () {
+      if (this.validPointsEntries.length) {
+        return this.validPointsEntries.reduce((prev, curr) => (prev + curr.active_points), 0)
+      }
+      return 0
+    },
+
+    totalCashback () {
+      if (this.validPointsEntries.length) {
+        return this.validPointsEntries.reduce((prev, curr) => (prev + (curr.active_points * curr.ratio)), 0)
+      }
+      return 0
+    }
+  },
+
+  methods: {
+    formatDate,
+    formatMoney
+  }
+}

package/src/js/AddressForm.js

@@ -20,6 +20,7 @@ import {
 } from '@ecomplus/utils'
 
 import axios from 'axios'
+import checkFormValidity from './helpers/check-form-validity'
 import InputZipCode from '../InputZipCode.vue'
 
 const countryCode = $ecomConfig.get('country_code')
@@ -38,19 +39,32 @@ export default {
         return {}
       }
     },
-    zipCode: String
+    zipCode: String,
+    btnText: {
+      type: String,
+      default () {
+        return i18n(i19save)
+      }
+    }
   },
 
   data () {
+    const localAddress = {
+      _id: getRandomObjectId(),
+      zip: '',
+      province_code: '',
+      ...this.address
+    }
+    if (localAddress.name && localAddress.name.endsWith('*')) {
+      delete localAddress.name
+    }
+    if (localAddress.line_address && localAddress.line_address.endsWith('*')) {
+      delete localAddress.line_address
+    }
     return {
-      localAddress: {
-        _id: getRandomObjectId(),
-        zip: '',
-        province_code: '',
-        ...this.address
-      },
+      localAddress,
       isZipReady: countryCode !== 'BR',
-      isZipLoading: false,
+      zipLoading: null,
       addressFromZip: {},
       isNoNumber: false
     }
@@ -66,7 +80,6 @@ export default {
     i19provinceCode: () => i18n(i19provinceCode),
     i19recipient: () => i18n(i19recipient),
     i19reference: () => i18n(i19reference),
-    i19save: () => i18n(i19save),
     i19street: () => i18n(i19street),
     i19zipCode: () => i18n(i19zipCode),
 
@@ -77,39 +90,35 @@ export default {
       set (value) {
         this.localAddress.province_code = value.toUpperCase().slice(0, 2)
       }
+    },
+
+    zipInfoLink () {
+      return countryCode === 'BR'
+        ? 'https://buscacepinter.correios.com.br/app/endereco/index.php'
+        : null
     }
   },
 
   methods: {
     updateZipState () {
-      this.isZipLoading = (countryCode === 'BR' && this.localAddress.zip.length === 8)
-    },
-
-    submit (ev) {
-      const $form = this.$el
-      if ($form.checkValidity()) {
-        this.$emit('update:address', this.localAddress)
+      if (countryCode === 'BR' && this.localAddress.zip.length >= 8) {
+        if (this.zipLoading !== this.localAddress.zip) {
+          this.addressFromZip = {}
+          setTimeout(() => {
+            this.fetchAddressInfo(this.localAddress.zip)
+          }, this.zipLoading ? 150 : 50)
+        }
+      } else {
+        this.zipLoading = null
       }
-      $form.classList.add('was-validated')
-    }
-  },
-
-  watch: {
-    zipCode (zip) {
-      this.localAddress.zip = zip
-    },
-
-    'localAddress.zip' () {
-      this.updateZipState()
     },
 
-    isZipLoading (load) {
-      if (load) {
-        this.isZipReady = false
-        this.addressFromZip = {}
-        axios.get(`https://viacep.com.br/ws/${this.localAddress.zip}/json/`)
+    fetchAddressInfo (zipCode, isRetry = false) {
+      if (zipCode === this.localAddress.zip) {
+        this.zipLoading = zipCode
+        axios.get(`https://viacep.com.br/ws/${zipCode}/json/`, { timeout: 4000 })
           .then(({ data }) => {
-            if (!data.erro) {
+            if (!data.erro && zipCode === this.localAddress.zip) {
               ;[
                 ['province_code', data.uf],
                 ['city', data.localidade],
@@ -130,14 +139,50 @@ export default {
           })
           .catch(err => {
             console.error(err)
+            if (!isRetry) {
+              setTimeout(() => {
+                this.fetchAddressInfo(zipCode, true)
+              }, 300)
+            }
           })
           .finally(() => {
-            this.isZipLoading = false
-            this.isZipReady = true
+            if (zipCode === this.zipLoading) {
+              this.zipLoading = null
+            }
           })
       }
     },
 
+    submit (ev) {
+      const $form = this.$el
+      if (checkFormValidity($form)) {
+        this.$emit('update:address', this.localAddress)
+      }
+      $form.classList.add('was-validated')
+    }
+  },
+
+  watch: {
+    zipCode (zip) {
+      this.localAddress.zip = zip
+    },
+
+    'localAddress.zip' (zip) {
+      this.updateZipState()
+      this.$emit('update:zip-code', zip)
+    },
+
+    zipLoading (zip) {
+      if (zip) {
+        this.isZipReady = false
+        setTimeout(() => {
+          this.isZipReady = true
+        }, 1500)
+      } else {
+        this.isZipReady = true
+      }
+    },
+
     isNoNumber (isNoNumber) {
       if (isNoNumber) {
         delete this.localAddress.number