From 54c872e4cd6b68c640c250bced8a800986b66bf2 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Wed, 22 Jan 2020 20:13:29 +0800
Subject: [PATCH 1/3] #3494 sync businessPhone validation with member api

---
 src/helpers/utils.js                          | 16 ++++++++++++++
 .../components/ProfileSettingsForm.jsx        | 21 ++++++++++---------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/helpers/utils.js b/src/helpers/utils.js
index d38b72ac5..2644f0ca7 100644
--- a/src/helpers/utils.js
+++ b/src/helpers/utils.js
@@ -113,3 +113,19 @@ export const createEvent = (eventName) => {
 export const delay = (milliseconds) => new Promise((resolve) => {
   setTimeout(resolve, milliseconds)
 })
+
+
+/**
+ * format phone bofore send to server
+ * if phone is not head with '+', add '+'
+ *
+ * @param {String}        phone
+ * @returns {String} 
+ */
+export const formatPhone = (phone) => {
+  if(phone[0] === '+') {
+    return phone
+  }else{
+    return '+' + phone
+  }
+}
diff --git a/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx b/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
index 047477884..52e56afbd 100644
--- a/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
+++ b/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
@@ -12,7 +12,7 @@ const Formsy = FormsyForm.Formsy
 import ProfileSettingsAvatar from './ProfileSettingsAvatar'
 import FormsySelect from '../../../../../components/Select/FormsySelect'
 import ISOCountries from '../../../../../helpers/ISOCountries'
-
+import { formatPhone } from '../../../../../helpers/utils'
 import './ProfileSettingsForm.scss'
 
 const countries = _.orderBy(ISOCountries, ['name'], ['asc']).map(country => ({
@@ -52,8 +52,8 @@ class ProfileSettingsForm extends Component {
     }
   }
 
-  onBusinessPhoneCountryChange({ country, externalChange }) {
-    const { businessPhoneValid, countrySelected: previousSelectedCountry } = this.state
+  onBusinessPhoneCountryChange({ country, externalChange, isValid}) {
+    const { countrySelected: previousSelectedCountry } = this.state
 
     if (country && country.code) {
       if (previousSelectedCountry !== country.name && country.name) {
@@ -63,18 +63,17 @@ class ProfileSettingsForm extends Component {
           countrySelected: country.name,
         })
       }
+    }
 
-      if (!businessPhoneValid) {
-        this.setState({
-          businessPhoneValid: true
-        })
-      }
-    } else if (businessPhoneValid) {
+    if (isValid) {
+      this.setState({
+        businessPhoneValid: true
+      })
+    } else {
       this.setState({
         businessPhoneValid: false
       })
     }
-
     // external change means, the user didn't change the phone number field.
     // But it was automatically changed due to country selection change. In such case, we should show
     // the alert under country selection only.
@@ -137,6 +136,8 @@ class ProfileSettingsForm extends Component {
       ...this.props.values.settings,
       ...data,
     }
+
+    updatedData.businessPhone = formatPhone(updatedData.businessPhone)
     this.props.saveSettings(updatedData)
 
     this.setState({

From fd746c6d04536a07fab1bb8ab552046516f9f5ab Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Thu, 23 Jan 2020 20:44:14 +0800
Subject: [PATCH 2/3] #3494 reduce render

---
 .../profile/components/ProfileSettingsForm.jsx     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx b/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
index 52e56afbd..57569acf7 100644
--- a/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
+++ b/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
@@ -63,17 +63,17 @@ class ProfileSettingsForm extends Component {
           countrySelected: country.name,
         })
       }
-    }
-
-    if (isValid) {
-      this.setState({
-        businessPhoneValid: true
-      })
-    } else {
+      if(!this.state.businessPhoneValid && isValid) {
+        this.setState({
+          businessPhoneValid: true
+        })
+      }
+    }else if(this.state.businessPhoneValid){
       this.setState({
         businessPhoneValid: false
       })
     }
+
     // external change means, the user didn't change the phone number field.
     // But it was automatically changed due to country selection change. In such case, we should show
     // the alert under country selection only.

From 03a57c7b37bd9d82e58461fbb570672f03a4d4fd Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Fri, 24 Jan 2020 14:57:44 +0800
Subject: [PATCH 3/3] #3494 fixed bug for phone validate when has country code

---
 .../routes/profile/components/ProfileSettingsForm.jsx         | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx b/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
index 57569acf7..561363e40 100644
--- a/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
+++ b/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
@@ -68,7 +68,9 @@ class ProfileSettingsForm extends Component {
           businessPhoneValid: true
         })
       }
-    }else if(this.state.businessPhoneValid){
+    }
+    
+    if (this.state.businessPhoneValid && !isValid){
       this.setState({
         businessPhoneValid: false
       })