Finished the contact-form.

package-lock.json

@@ -1305,6 +1305,15 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@hypnosphi/create-react-context": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
+      "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
+      "requires": {
+        "gud": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -7335,6 +7344,11 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "optional": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -11539,6 +11553,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -12856,6 +12875,20 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-alert": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/react-alert/-/react-alert-7.0.2.tgz",
+      "integrity": "sha512-oUxPk9DMaEm93Y33mdAmy4vDPZauMj30di4p4+QuZ3JOyoFSFteLSsjlhTkDjkyvJuVxToi3bbnsxehRHEPpeg==",
+      "requires": {
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.1"
+      }
+    },
+    "react-alert-template-basic": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-alert-template-basic/-/react-alert-template-basic-1.0.0.tgz",
+      "integrity": "sha512-6x5Us0oc+jj8BDNkvSWfQMESk5SdyGKitXdLb7CwIlIlecyATjCTKSWpLABg8tpKAPOSJu4Dv/fYUqxXEio/XA=="
+    },
     "react-app-polyfill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz",
@@ -13108,6 +13141,20 @@
         "warning": "^4.0.3"
       }
     },
+    "react-popper": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
+      "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "@hypnosphi/create-react-context": "^0.3.1",
+        "deep-equal": "^1.1.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -13258,6 +13305,39 @@
         "prop-types": "^15.6.2"
       }
     },
+    "reactstrap": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz",
+      "integrity": "sha512-pmf33YjpNZk1IfrjqpWCUMq9hk6GzSnMWBAofTBNIRJQB1zQ0Au2kzv3lPUAFsBYgWEuI9iYa/xKXHaboSiMkQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "classnames": "^2.2.3",
+        "prop-types": "^15.5.8",
+        "react-popper": "^1.3.6",
+        "react-transition-group": "^2.3.1"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+          "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+          "requires": {
+            "@babel/runtime": "^7.1.2"
+          }
+        },
+        "react-transition-group": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+          "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+          "requires": {
+            "dom-helpers": "^3.4.0",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2",
+            "react-lifecycles-compat": "^3.0.4"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -15508,6 +15588,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",

package.json

@@ -13,6 +13,8 @@
     "joi-browser": "^13.4.0",
     "nodemailer": "^6.5.0",
     "react": "^17.0.2",
+    "react-alert": "^7.0.2",
+    "react-alert-template-basic": "^1.0.0",
     "react-bootstrap": "^1.5.2",
     "react-bootstrap-carousel": "^4.1.1",
     "react-dom": "^17.0.2",
@@ -24,6 +26,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-select": "^4.3.0",
+    "reactstrap": "^8.9.0",
     "spectre.css": "^0.5.9",
     "web-vitals": "^1.1.1"
   },

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

@@ -6,6 +6,9 @@ import {
   FieldFeedbacks,
   FormWithConstraints
 } from 'react-form-with-constraints';
+import Alert from 'react-bootstrap/Alert';
+
+
 
 class ContactUs extends Component {
   constructor(props) {
@@ -16,7 +19,10 @@ class ContactUs extends Component {
       email: "",
       message: "",
       agent: "",
-      house: ""
+      house: "",
+      alertBad: false,
+      alertSucess: false,
+      time: false
     };
   }
 
@@ -24,6 +30,18 @@ class ContactUs extends Component {
   render() {
     return (
       <div className="contact-us">
+        <Alert variant="danger" style={{ display: this.state.alertBad ? "block" : "none" }} onClose={() => this.setState({ alertBad: false })} dismissible>
+          <Alert.Heading>Message could not send.</Alert.Heading>
+          <p>
+            There are some errors in your contact form.
+        </p>
+        </Alert>
+        <Alert variant="success" style={{ display: this.state.alertSucess ? "block" : "none" }} onClose={() => this.setState({ alertSucess: false })} dismissible>
+          <Alert.Heading>The message is successfully sent.</Alert.Heading>
+          <p>
+            You contact form will be delivered to our support team.
+        </p>
+        </Alert>
         <div className="container">
           <section class="colored-section" id="contact">
             <div className="container-fluid">
@@ -166,27 +184,35 @@ class ContactUs extends Component {
     this.form.validateFields();
 
     if (!this.form.isValid()) {
+      this.alertBad();
       return;
     } else {
+      this.alertSuccess();
       axios({
         method: "POST",
         url: "http://localhost:3002/send",
         data: this.state
       }).then((response) => {
         if (response.data.status === 'success') {
-          alert("Message Sent.");
           this.resetForm();
         } else if (response.data.status === 'fail') {
-          alert("Message failed to send.");
+          return;
         }
       })
     }
 
+  }
 
+  alertSuccess(){
+    this.setState({ alertBad: false, alertSucess: true })
+  }
+
+  alertBad(){
+    this.setState({ alertSucess: false, alertBad: true  })
   }
 
   resetForm() {
-    this.setState({ firstname: '', lastname: '', email: '', message: '',  agent: '', house: '' })
+    this.setState({ firstname: '', lastname: '', email: '', message: '', agent: '', house: '' })
   }
 }