update the phone number on CallToolView and show validation errors

SumOfUs · Jul 26, 2017 · 075cc25 · 075cc25
1 parent 3232254
commit 075cc25
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/app/javascript/call_tool/CallToolView.js b/app/javascript/call_tool/CallToolView.js
@@ -146,15 +146,6 @@ class CallToolView extends Component {
     });
   }
 
-  memberPhoneCountryCodeChanged(memberPhoneCountryCode: string) {
-    this.setState(prevState => {
-      return {
-        form: { ...prevState.form, memberPhoneCountryCode },
-        errors: { ...prevState.errors, memberPhoneCountryCode: null },
-      };
-    });
-  }
-
   selectNewTarget() {
     return sample(this.props.targets);
   }
@@ -289,13 +280,9 @@ class CallToolView extends Component {
               ? this.prefilledTargetForDisplay()
               : this.state.selectedTarget
           }
-          form={this.state.form}
           errors={this.state.errors}
           onCountryCodeChange={this.countryCodeChanged.bind(this)}
           onMemberPhoneNumberChange={this.memberPhoneNumberChanged.bind(this)}
-          onMemberPhoneCountryCodeChange={this.memberPhoneCountryCodeChanged.bind(
-            this
-          )}
           onTargetSelected={id => this.selectTarget(id)}
           onSubmit={this.submit.bind(this)}
           loading={this.state.loading}

diff --git a/app/javascript/components/CallTool/Form.js b/app/javascript/components/CallTool/Form.js
@@ -17,7 +17,6 @@ import type {
   Country,
   CountryPhoneCode,
   Target,
-  FormType,
   Errors,
 } from '../../call_tool/CallToolView';
 
@@ -26,9 +25,9 @@ type Props = {
   selectedTarget: Target,
   restrictedCountryCode?: string,
   targetByAttributes: string[],
-  form: FormType,
   errors: Errors,
   onTargetSelected: (id: ?string) => void,
+  onMemberPhoneNumberChange: string => void,
   onSubmit: any => void,
   loading: boolean,
   filters?: Filters,
@@ -81,6 +80,7 @@ class Form extends Component {
   }
 
   updatePhoneNumber(memberPhoneNumber: string) {
+    this.props.onMemberPhoneNumberChange(memberPhoneNumber);
     this.setState(prevState => ({
       ...prevState,
       memberPhoneNumber,
@@ -112,6 +112,7 @@ class Form extends Component {
           }
           onChange={(number: string) => this.updatePhoneNumber(number)}
           restrictedCountryCode={this.props.restrictedCountryCode}
+          errors={this.props.errors}
         />
 
         <Button

diff --git a/app/javascript/components/SweetPhoneInput/SweetPhoneInput.js b/app/javascript/components/SweetPhoneInput/SweetPhoneInput.js
@@ -11,11 +11,14 @@ import SelectCountry from '../SelectCountry/SelectCountry';
 
 import './SweetPhoneInput.scss';
 
+import type { Errors } from '../../call_tool/CallToolView';
+
 type Props = {
   value: string,
   onChange: (number: string) => void,
   title?: any,
   className?: string,
+  errors: Errors,
   defaultCountryCode?: string,
   restrictedCountryCode?: string,
 };
@@ -116,6 +119,7 @@ class SweetPhoneInput extends Component {
       {
         SweetPhoneInput__root: true,
         'selecting-country': this.state.selectingCountry,
+        'has-error': this.props.errors.memberPhoneNumber,
       },
       this.props.className
     );
@@ -163,6 +167,10 @@ class SweetPhoneInput extends Component {
             onChange={code => this.onCountryCodeChange(code)}
           />
         </div>
+        {this.props.errors.memberPhoneNumber !== undefined &&
+          <div className="base-errors">
+            {this.props.errors.memberPhoneNumber}
+          </div>}
       </div>
     );
   }

diff --git a/app/javascript/components/SweetPhoneInput/SweetPhoneInput.scss b/app/javascript/components/SweetPhoneInput/SweetPhoneInput.scss
@@ -52,6 +52,10 @@
   display: none;
 }
 
+.has-error .SweetPhoneInput {
+  border: 2px solid #f8492e;
+}
+
 .selecting-country {
   .SweetPhoneInput {
     border: 2px solid #00c0cf;