Added the error recovery.

package-lock.json

@@ -1162,6 +1162,84 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/cache": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.1.3.tgz",
+      "integrity": "sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.0.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "^4.0.3"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.1.5",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.1.5.tgz",
+      "integrity": "sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "@emotion/cache": "^11.1.3",
+        "@emotion/serialize": "^1.0.0",
+        "@emotion/sheet": "^1.0.1",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        }
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.1.tgz",
+      "integrity": "sha512-TXlKs5sgUKhFlszp/rg4lIAZd7UUSmJpwaf9/lAEFcUh2vPi32i7x4wk7O8TN8L8v2Ol8k0CxnhRBY0zQalTxA==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz",
+      "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
@@ -10265,6 +10343,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -12987,6 +13070,19 @@
         }
       }
     },
+    "react-hook-form": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.0.0.tgz",
+      "integrity": "sha512-cXoKnNnQe5IxieesTu+enDS7Jfh8lyX8mSMwzNvC4L0k6R6yQ2F8rIhvBbzlFOGSoeEnsR64dvMZ1izWRCAw6A=="
+    },
+    "react-input-autosize": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
+      "integrity": "sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -13137,6 +13233,20 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-4.3.0.tgz",
+      "integrity": "sha512-SBPD1a3TJqE9zoI/jfOLCAoLr/neluaeokjOixr3zZ1vHezkom8K0A9J4QG9IWDqIDE9K/Mv+0y1GjidC2PDtQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.0.0",
+        "@emotion/react": "^11.1.1",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-input-autosize": "^3.0.0",
+        "react-transition-group": "^4.3.0"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -14868,6 +14978,11 @@
         }
       }
     },
+    "stylis": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.9.tgz",
+      "integrity": "sha512-ci7pEFNVW3YJiWEzqPOMsAjY6kgraZ3ZgBfQ5HYbNtLJEsQ0G46ejWZpfSSCp/FaSiCSGGhzL9O2lN+2cB6ong=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",

package.json

@@ -20,8 +20,10 @@
     "react-form-with-constraints": "^0.16.0",
     "react-form-with-constraints-bootstrap4": "^0.16.0",
     "react-google-maps": "^9.4.5",
+    "react-hook-form": "^7.0.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-select": "^4.3.0",
     "spectre.css": "^0.5.9",
     "web-vitals": "^1.1.1"
   },

src/shared-components/contact-us/contact-us.js

@@ -38,8 +38,8 @@ class ContactUs extends Component {
 
                   <div className="row">
                     <div className="col-6">
-                      <select className="form-group" name="agent" id="dropdown" onChange={this.onAgentChange.bind(this)} value={this.state.agent}>
+                      <select className="form-group" name="agent" id="dropdown" required onChange={this.onAgentChange.bind(this)} value={this.state.agent}>
-                        <option selected>Select an Agent</option>
+                        <option value="">Select an Agent</option>
                         <option value="Michael">Michael</option>
                         <option value="Jin">Jin </option>
                         <option value="Anita">Anita</option>
@@ -48,16 +48,22 @@ class ContactUs extends Component {
                         <option value="Walter">Walter</option>
                         <option value="No preference">No preference</option>
                       </select>
+                      <FieldFeedbacks for="agent">
+                        <FieldFeedback when="*" />
+                      </FieldFeedbacks>
                     </div>
                     <div className="col-6">
-                      <select className="form-group" name="house" id="dropdown" onChange={this.onHouseChange.bind(this)} value={this.state.house}>
+                      <select className="form-group" name="house" id="dropdown" required onChange={this.onHouseChange.bind(this)} value={this.state.house}>
-                        <option selected>Select a House</option>
+                        <option value="">Select a House</option>
                         <option value="100 Charlie Rogers">100 Charlie Rogers</option>
                         <option value="1490 Youville Drive">1490 Youville Drive </option>
                         <option value="8720 Russell Road">8720 Russell Road</option>
                         <option value="2785 8th Line Road">2785 8th Line Road</option>
                         <option value="No preference">No preference</option>
                       </select>
+                      <FieldFeedbacks for="house">
+                        <FieldFeedback when="*" />
+                      </FieldFeedbacks>
                     </div>
                   </div>