Validate phone number textellent

app/components/Texting/components/FormView/Form.module.scss

@@ -27,10 +27,38 @@
   }
 }
 
+.phoneInputBox {
+  display: flex;
+  margin-top: 10px;
+  background-color: $color-white;
+  border: 1px solid #DDDDDD;
+  border-radius: 2px;
+  letter-spacing: 1px;
+  &:active, &:hover, &:focus {
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+  }
+}
+
+.phoneInputPrefix {
+  padding: 0.9375rem 0 0.9375rem 0.9375rem;
+  color: $color-grey6;
+  font-size: 1.0625rem;
+}
+
+.phoneInput {
+  border: none;
+  background: $color-white;
+  padding-left: 5px;
+  margin: 0; /* to avoid Safari for adding extra margin */
+  box-shadow: none !important;
+  /* Remove Chrome's autocomplete background color for input */
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 100px white inset !important;
+  }
+}
+
 .input {
   background-color: $color-white;
-  height: 50px;
-  padding: 15px 20px;
   margin-top: 10px;
   @media screen and (max-width: 900px ) {
     height: 35px;

app/components/Texting/components/FormView/FormView.jsx

@@ -1,20 +1,26 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import {
+  normalize,
+  validatePhoneNumber,
+} from '../../../../utils/validatePhoneNumber';
 import Heading from './Heading';
 import Privacy from './Privacy';
 import Buttons from './Buttons';
 import styles from './Form.module.scss';
 
 const initialState = {
   recipientName: '',
-  phoneNumber: '',
   agreed: false,
 };
 
 const FormView = ({ service, handleSubmit, closeModal }) => {
   const [state, setState] = useState(initialState);
-  const { recipientName, phoneNumber, agreed } = state;
+  const { recipientName, agreed } = state;
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [isValidNumber, setIsValidNumber] = useState(false);
   const { serviceName, serviceId } = service;
+
   const onChange = evt => {
     const {
       type,
@@ -26,6 +32,13 @@ const FormView = ({ service, handleSubmit, closeModal }) => {
     setState(prevState => ({ ...prevState, [name]: newValue }));
   };
 
+  const onPhoneNumberChange = evt => {
+    const normalized = normalize(evt.target.value);
+    const isValid = validatePhoneNumber(normalized);
+    setIsValidNumber(isValid);
+    setPhoneNumber(normalized);
+  };
+
   const onSubmit = event => {
     event.preventDefault();
     const data = {
@@ -55,13 +68,17 @@ const FormView = ({ service, handleSubmit, closeModal }) => {
           <div className={styles.dataRates}>
             *Standard text and data rates may apply.
           </div>
-          <input
-            type="text"
-            name="phoneNumber"
-            className={styles.input}
-            value={phoneNumber}
-            onChange={onChange}
-          />
+          <div className={styles.phoneInputBox}>
+            <span className={styles.phoneInputPrefix}>+1</span>
+            <input
+              type="text"
+              name="phoneNumber"
+              className={styles.phoneInput}
+              value={phoneNumber}
+              maxLength="14"
+              onChange={onPhoneNumberChange}
+            />
+          </div>
         </label>
         <label className={styles.checkBox}>
           <input
@@ -74,7 +91,11 @@ const FormView = ({ service, handleSubmit, closeModal }) => {
           I agree to receive text messages from SF Service Guide.
         </label>
       </div>
-      <Buttons disabled={!agreed} closeModal={closeModal} onSubmit={onSubmit} />
+      <Buttons
+        disabled={!agreed || !isValidNumber}
+        closeModal={closeModal}
+        onSubmit={onSubmit}
+      />
       <Privacy />
     </div>
   );

app/utils/validatePhoneNumber.js

@@ -0,0 +1,26 @@
+
+/**
+ *  @module normalize/validatePhoneNumber
+ * Validator for US only phone numbers.
+ */
+
+// eslint-disable-next-line import/no-unused-modules
+const PHONE_REGEX = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
+
+module.exports = {
+  /** @param {string} phoneNumber -  phone number to normalize. */
+  normalize(phoneNumber) {
+    const numbers = phoneNumber.replace(/\D/g, '');
+    const char = { 0: '(', 3: ') ', 6: '-' };
+    let normalized = '';
+    for (let i = 0; i < numbers.length; i += 1) {
+      normalized += (char[i] || '') + numbers[i];
+    }
+    return normalized;
+  },
+  /** @param {string} phoneNumber -  phone number to validate. */
+  validatePhoneNumber(phoneNumber) {
+    return PHONE_REGEX.test(phoneNumber);
+  },
+
+};