Merge pull request #19 from lob/verification-result

Address forms clean up input values after verification

Author: mmrtnz

example/src/AddressFormDemo.js

@@ -1,6 +1,6 @@
 // External Dependencies
 import React, { useState } from 'react';
-import { AddressForm, verify } from '@lob/react-address-autocomplete'
+import { AddressForm } from '@lob/react-address-autocomplete'
 
 // Internal Dependencies
 import VerificationResult from './VerificationResult'
@@ -25,10 +25,9 @@ const AddressFormDemo = ({ apiKey }) => {
     resetApiResult()
   }
 
-  const handleSubmit = () =>
+  const handleSubmit = verificationResult =>
     resetApiResult()
-      .then(() => verify(apiKey, selectedResult.value))
-      .then(res => setVerificationResult(res))
+      .then(() => setVerificationResult(verificationResult))
       .catch(err => setErrorMessage(err.message))
 
   return (
@@ -38,13 +37,12 @@ const AddressFormDemo = ({ apiKey }) => {
         apiKey={apiKey}
         onFieldChange={handleChange}
         onSelection={handleSelect}
+        onSubmit={handleSubmit}
+        submitLabel="Verify"
+        styles={{
+          'lob-submit': { width: '100%' }
+        }}
       />
-      <button
-        onClick={handleSubmit}
-        style={{ width: '100%' }}
-      >
-        Verify
-      </button>
       <VerificationResult apiResponse={verificationResult} error={errorMessage} />
     </div>
   );

example/src/App.js

@@ -6,7 +6,7 @@ import AddressFormDemo from './AddressFormDemo'
 // import DomesticDemo from './DomesticDemo'
 // import InternationalDemo from './InternationalDemo'
 
-const API_KEY = 'live_pub_16d30adbb46a1c360ebf7d1e6b48361'
+const API_KEY = 'YOUR_API_KEY_HERE'
 
 const App = () => {
 
@@ -18,8 +18,8 @@ const App = () => {
         alt='Lob'
       />
       <h1>React Address Autocomplete Demo</h1>
-      {/* <DomesticDemo apiKey={API_KEY} />
-      <InternationalDemo apiKey={API_KEY} /> */}
+      {/* <DomesticDemo apiKey={API_KEY} /> */}
+      {/* <InternationalDemo apiKey={API_KEY} /> */}
       <AddressFormDemo apiKey={API_KEY} />
     </div>
   );

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@lob/react-address-autocomplete",
-    "version": "2.1.1",
+    "version": "2.1.2",
     "description": "A collection of components and utility functions for verifying and suggesting addresses using Lob",
     "author": "Lob",
     "license": "MIT",
@@ -42,7 +42,6 @@
         "cross-env": "^7.0.2",
         "eslint": "^8.14.0",
         "eslint-config-prettier": "^8.3.0",
-        "eslint-config-react-app": "^7.0.1",
         "eslint-config-standard-react": "^11.0.1",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-promise": "^5.1.0",

package.json

@@ -4,6 +4,7 @@
 import React, { useState } from 'react'
 
 // Internal Dependencies
+import { verify } from '../verify'
 import Autocomplete from '../Autocomplete'
 import useMergedStyles from './useMergedStyles'
 
@@ -22,12 +23,15 @@ const customStyles = {
 /**
  * Similar to Autocomplete except each address component is given its own input. Autocomplete
  * occurs on the primary line but the results are inserted into each component.
- * @param {string} apiKey - Public API key to your Lob account.
- * @param {onSelection?} onSelection -
- *  Callback function when the select component changes.
- * @param {onInputChange?} onInputChange -
- *  Callback function when any input value changes. Includes both the event object and address form.
- *  Use event.target.id to determine which component is being updated.
+ * @param {String} apiKey - Public API key to your Lob account.
+ * @param {Array?} children - These elements get rendered between the address form inputs and
+ *  submit button
+ * @param {Boolean} hideSubmitButton - Hides the submit button and its behavior
+ * @param {Function} onInputChange - Callback when any input value changes. Includes both the event
+ *  object and address form. Use event.target.id to determine which component is being updated.
+ * @param {Function} onSelection - Callback when the select component changes.
+ * @param {Function} onSubmit - Callback after the submit button is clicked and the form inputs
+ *  are updated. Passes the verification result from the API.
  * @param {Object} styles - Override the default styles by providing an object similar to the
  *  styling framework used by react-select. Each key corresponds to a component and maps to a
  *  function that returns the new styles.lob_ Here is an example:
@@ -43,14 +47,20 @@ const customStyles = {
  *  - lob_input
  *  - lob_label
  *  - lob_row
+ *  - lob_submit
  *
  *  For more details visit https://react-select.com/styles
+ * @param {String} submitButtonLabel
  */
 const AddressForm = ({
   apiKey,
+  children,
+  hideSubmitButton = false,
   onFieldChange = () => {},
   onSelection = () => {},
+  onSubmit = () => {},
   styles = {},
+  submitButtonLabel = 'Submit',
   ...additionalProps
 }) => {
   const [form, setForm] = useState(defaultForm)
@@ -98,6 +108,23 @@ const AddressForm = ({
     })
   }
 
+  const handleSubmit = () =>
+    verify(apiKey, form).then((verificationResult) => {
+      const {
+        primary_line,
+        secondary_line,
+        components: { city, state, zip_code, zip_code_plus_4 }
+      } = verificationResult
+      setForm({
+        primary_line,
+        secondary_line,
+        city,
+        state,
+        zip_code: `${zip_code}-${zip_code_plus_4}`
+      })
+      onSubmit(verificationResult)
+    })
+
   const mergedStyles = useMergedStyles(styles, false /* isInternational */)
 
   return (
@@ -163,6 +190,12 @@ const AddressForm = ({
           value={zip_code}
         />
       </div>
+      {children}
+      {!hideSubmitButton && (
+        <button onClick={handleSubmit} style={mergedStyles.lob_submit}>
+          {submitButtonLabel}
+        </button>
+      )}
     </div>
   )
 }

src/AddressForm/AddressForm.js

@@ -4,6 +4,7 @@
 import React, { useState } from 'react'
 
 // Internal Dependencies
+import { verifyInternational } from '../verify'
 import CountrySelect from '../CountrySelect'
 import useMergedStyles from './useMergedStyles'
 
@@ -12,15 +13,20 @@ const defaultForm = {
   secondary_line: '',
   city: '',
   state: '',
-  zip_code: ''
+  postal_code: ''
 }
 
 /**
  * Renders a group of inputs for each address component including a select input for country code.
  * Does not perform any address autocompletion.
- * @param {onInputChange?} onInputChange -
- *  Callback function when any input value changes. Use e.target.id to determine which component
- *  is being updated.
+ * @param {String?} apiKey - Public API key to your Lob account.
+ * @param {Array?} children - These elements get rendered between the address form inputs and
+ *  submit button
+ * @param {Boolean} hideSubmitButton - Hides the submit button and its behavior
+ * @param {Function?} onFieldChange - Callback when any input value changes. Use e.target.id
+ *  to determine which component is being updated.
+ * @param {Function?} onSubmit - Callback after the submit button is clicked and the form inputs
+ *  are updated. Passes the verification result from the API.
  * @param {Object} styles - Override the default styles by providing an object similar to the
  *  styling framework used by react-select. Each key corresponds to a component and maps to a
  *  function that returns the new styles.lob_ Here is an example:
@@ -38,19 +44,56 @@ const defaultForm = {
  *  - lob_row
  *
  *  For more details visit https://react-select.com/styles
+ * @param {String} submitButtonLabel
  */
 const AddressFormInternational = ({
+  apiKey = null,
+  children,
+  hideSubmitButton = false,
   onFieldChange = () => {},
-  styles = {}
+  onSubmit = () => {},
+  styles = {},
+  submitButtonLabel = 'Submit'
 }) => {
   const [form, setForm] = useState(defaultForm)
-  const { primary_line, secondary_line, city, state, zip_code, country } = form
+  const { primary_line, secondary_line, city, state, postal_code, country } =
+    form
 
   const handleChange = (e) => {
     setForm({ ...form, [e.target.id]: e.target.value })
     onFieldChange(e)
   }
 
+  const handleSubmit = () => {
+    // apiKey wasn't used is previous versions of AddressFormInternational so we made the prop
+    // optional to not introduce a breaking change.
+    if (!apiKey) {
+      console.error(
+        '[@lob/react-address-autocomplete] ' +
+          'AddressFormInternational requires props apiKey for verifications'
+      )
+      return
+    }
+
+    verifyInternational(apiKey, form, form.country).then(
+      (verificationResult) => {
+        const {
+          primary_line,
+          secondary_line,
+          components: { city, state, postal_code }
+        } = verificationResult
+        setForm({
+          primary_line,
+          secondary_line,
+          city,
+          state,
+          postal_code
+        })
+        onSubmit(verificationResult)
+      }
+    )
+  }
+
   const mergedStyles = useMergedStyles(styles, true /* isInternational */)
 
   return (
@@ -100,14 +143,14 @@ const AddressFormInternational = ({
         />
       </div>
       <div style={mergedStyles.lob_row}>
-        <label style={mergedStyles.lob_label} htmlFor='zip_code'>
+        <label style={mergedStyles.lob_label} htmlFor='postal_code'>
           Zip / Postal Code
         </label>
         <input
           style={{ ...mergedStyles.lob_input }}
-          id='zip_code'
+          id='postal_code'
           onChange={handleChange}
-          value={zip_code}
+          value={postal_code}
         />
       </div>
       <div style={mergedStyles.lob_row}>
@@ -121,6 +164,12 @@ const AddressFormInternational = ({
           value={country}
         />
       </div>
+      {children}
+      {!hideSubmitButton && (
+        <button onClick={handleSubmit} style={mergedStyles.lob_submit}>
+          {submitButtonLabel}
+        </button>
+      )}
     </div>
   )
 }

src/AddressForm/AddressFormInternational.js

@@ -48,6 +48,7 @@ export const postVerifyInternationalAddress = (
   address,
   countryCode
 ) => {
+  const payload = typeof address === 'string' ? { address } : address
   const url = new URL('https://api.lob.com/v1/intl_verifications')
   url.searchParams.append('av_integration_origin', window.location.href)
   url.searchParams.append('integration', 'react-address-autocomplete')
@@ -57,7 +58,7 @@ export const postVerifyInternationalAddress = (
       Authorization: `Basic ${base64.encode(apiKey + ':')}`,
       'Content-Type': 'application/json'
     },
-    body: JSON.stringify({ address, country: countryCode })
+    body: JSON.stringify({ ...payload, country: countryCode })
   }
 
   return fetch(url, init)