From 8a8db0dc7e588fa86dbc5122819cbdbcef7d584a Mon Sep 17 00:00:00 2001
From: sankalp <sankalp123427@gmail.com>
Date: Tue, 24 Aug 2021 21:00:25 +0530
Subject: [PATCH] [change] Reusable fuction for errors #357

Added get-error-field to remove repeated code.

Closes #357
---
 client/components/login/login.js              |  29 +---
 .../mobile-phone-change.js                    |  16 +-
 .../mobile-phone-verification.js              |  16 +-
 .../password-change/password-change.js        |  25 +--
 .../password-confirm/password-confirm.js      |  24 +--
 .../password-reset/password-reset.js          |   8 +-
 .../components/registration/registration.js   | 151 +++++-------------
 client/utils/get-error-field.js               |  11 ++
 8 files changed, 72 insertions(+), 208 deletions(-)
 create mode 100644 client/utils/get-error-field.js

diff --git a/client/components/login/login.js b/client/components/login/login.js
index 6a29f2c5..520573f4 100644
--- a/client/components/login/login.js
+++ b/client/components/login/login.js
@@ -25,6 +25,7 @@ import handleChange from "../../utils/handle-change";
 import Contact from "../contact-box";
 import Modal from "../modal";
 import {Status} from "../organization-wrapper/lazy-import";
+import getErrorField from "../../utils/get-error-field";
 
 const PhoneInput = React.lazy(() => import("react-phone-input-2"));
 
@@ -111,12 +112,7 @@ export default class Login extends React.Component {
     return (
       <div className="row username">
         <label htmlFor="username">{label}</label>
-        {errors.username && (
-          <div className="error">
-            <span className="icon">!</span>
-            <span className="text">{errors.username}</span>
-          </div>
-        )}
+        {getErrorField(errors, "username")}
         <input
           className={`input ${errors.username ? "error" : ""}`}
           type={input_fields.username.type}
@@ -139,12 +135,7 @@ export default class Login extends React.Component {
     return (
       <div className="row phone-number">
         <label htmlFor="phone-number">{t`PHONE_LBL`}</label>
-        {errors.username && (
-          <div className="error">
-            <span className="icon">!</span>
-            <span className="text">{errors.username}</span>
-          </div>
-        )}
+        {getErrorField(errors, "username")}
         <Suspense
           fallback={
             <input
@@ -340,23 +331,13 @@ export default class Login extends React.Component {
                 {getHtml(help_html, language, "help-container")}
 
                 <div className="fieldset">
-                  {errors.nonField && (
-                    <div className="error non-field">
-                      <span className="icon">!</span>
-                      <span className="text">{errors.nonField}</span>
-                    </div>
-                  )}
+                  {getErrorField(errors, "nonField", true)}
 
                   {this.getUsernameField(input_fields)}
 
                   <div className="row password">
                     <label htmlFor="password">{t`PWD_LBL`}</label>
-                    {errors.password && (
-                      <div className="error">
-                        <span className="icon">!</span>
-                        <span className="text">{errors.password}</span>
-                      </div>
-                    )}
+                    {getErrorField(errors, "password")}
                     <input
                       className={`input ${errors.password ? "error" : ""}`}
                       type="password"
diff --git a/client/components/mobile-phone-change/mobile-phone-change.js b/client/components/mobile-phone-change/mobile-phone-change.js
index 4e3d9117..cb52220a 100644
--- a/client/components/mobile-phone-change/mobile-phone-change.js
+++ b/client/components/mobile-phone-change/mobile-phone-change.js
@@ -20,6 +20,7 @@ import submitOnEnter from "../../utils/submit-on-enter";
 import Contact from "../contact-box";
 import handleSession from "../../utils/session";
 import validateToken from "../../utils/validate-token";
+import getErrorField from "../../utils/get-error-field";
 
 const PhoneInput = React.lazy(() => import("react-phone-input-2"));
 
@@ -127,21 +128,10 @@ class MobilePhoneChange extends React.Component {
           >
             <div className="inner">
               <div className="fieldset row">
-                {errors.nonField && (
-                  <div className="error non-field">
-                    <span className="icon">!</span>
-                    <span className="text">{errors.nonField}</span>
-                  </div>
-                )}
-
+                {getErrorField(errors, "nonField", true)}
                 <div className="row phone-number">
                   <label htmlFor="phone-number">{t`PHONE_LBL`}</label>
-                  {errors.phone_number && (
-                    <div className="error">
-                      <span className="icon">!</span>
-                      <span className="text">{errors.phone_number}</span>
-                    </div>
-                  )}
+                  {getErrorField(errors, "phone_number")}
                   <Suspense
                     fallback={
                       <input
diff --git a/client/components/mobile-phone-verification/mobile-phone-verification.js b/client/components/mobile-phone-verification/mobile-phone-verification.js
index 0bbc7cf2..281aba14 100644
--- a/client/components/mobile-phone-verification/mobile-phone-verification.js
+++ b/client/components/mobile-phone-verification/mobile-phone-verification.js
@@ -22,6 +22,7 @@ import Contact from "../contact-box";
 import handleSession from "../../utils/session";
 import validateToken from "../../utils/validate-token";
 import handleLogout from "../../utils/handle-logout";
+import getErrorField from "../../utils/get-error-field";
 
 export default class MobilePhoneVerification extends React.Component {
   phoneTokenSentKey = "owPhoneTokenSent";
@@ -189,21 +190,10 @@ export default class MobilePhoneVerification extends React.Component {
               >
                 <div className="row fieldset code">
                   <p className="label">{t`PHONE_VERIFY (${phone_number})`}</p>
-
-                  {errors.nonField && (
-                    <div className="error non-field">
-                      <span className="icon">!</span>
-                      <span className="text">{errors.nonField}</span>
-                    </div>
-                  )}
+                  {getErrorField(errors, "nonField", true)}
 
                   <div className="row">
-                    {errors.code && (
-                      <div className="error">
-                        <span className="icon">!</span>
-                        <span className="text">{errors.code}</span>
-                      </div>
-                    )}
+                    {getErrorField(errors, "code")}
                     <input
                       className={`input ${
                         errors.code || errors.nonField ? "error" : ""
diff --git a/client/components/password-change/password-change.js b/client/components/password-change/password-change.js
index e67c21c9..ef25a202 100644
--- a/client/components/password-change/password-change.js
+++ b/client/components/password-change/password-change.js
@@ -17,6 +17,7 @@ import logError from "../../utils/log-error";
 import handleChange from "../../utils/handle-change";
 import handleSession from "../../utils/session";
 import validateToken from "../../utils/validate-token";
+import getErrorField from "../../utils/get-error-field";
 
 export default class PasswordChange extends React.Component {
   constructor(props) {
@@ -102,23 +103,11 @@ export default class PasswordChange extends React.Component {
           <form className="main-column" onSubmit={this.handleSubmit}>
             <div className="inner">
               <h1>{t`PWD_CHANGE_TITL`}</h1>
-
-              {errors.nonField && (
-                <div className="error">
-                  <span className="icon">!</span>
-                  <span className="text">{errors.nonField}</span>
-                </div>
-              )}
+              {getErrorField(errors, "nonField", true)}
 
               <div className="row password">
                 <label htmlFor="password">{t`PWD1_LBL`}</label>
-
-                {errors.newPassword1 && (
-                  <div className="error">
-                    <span className="icon">!</span>
-                    <span className="text">{errors.newPassword1}</span>
-                  </div>
-                )}
+                {getErrorField(errors, "newPassword1")}
 
                 <input
                   className="input"
@@ -144,13 +133,7 @@ export default class PasswordChange extends React.Component {
 
               <div className="row password-confirm">
                 <label htmlFor="password-confirm">{t`CONFIRM_PWD_LBL`}</label>
-
-                {errors.newPassword2 && (
-                  <div className="error">
-                    <span className="icon">!</span>
-                    <span className="text">{errors.newPassword2}</span>
-                  </div>
-                )}
+                {getErrorField(errors, "newPassword2")}
 
                 <input
                   className="input"
diff --git a/client/components/password-confirm/password-confirm.js b/client/components/password-confirm/password-confirm.js
index 4a7062b6..2df70686 100644
--- a/client/components/password-confirm/password-confirm.js
+++ b/client/components/password-confirm/password-confirm.js
@@ -14,6 +14,7 @@ import {confirmApiUrl} from "../../constants";
 import getErrorText from "../../utils/get-error-text";
 import logError from "../../utils/log-error";
 import handleChange from "../../utils/handle-change";
+import getErrorField from "../../utils/get-error-field";
 
 export default class PasswordConfirm extends React.Component {
   constructor(props) {
@@ -136,22 +137,11 @@ export default class PasswordConfirm extends React.Component {
                 )}
 
                 <div className="fieldset">
-                  {errors.nonField && (
-                    <div className="error non-field">
-                      <span className="icon">!</span>
-                      <span className="text">{errors.nonField}</span>
-                    </div>
-                  )}
+                  {getErrorField(errors, "nonField", true)}
 
                   <div className="row password">
                     <label htmlFor="password">{t`PWD_LBL`}</label>
-
-                    {errors.newPassword1 && (
-                      <div className="error">
-                        <span className="icon">!</span>
-                        <span className="text ">{errors.newPassword1}</span>
-                      </div>
-                    )}
+                    {getErrorField(errors, "newPassword1")}
 
                     <input
                       className={`input ${errors.newPassword1 ? "error" : ""}`}
@@ -179,13 +169,7 @@ export default class PasswordConfirm extends React.Component {
 
                   <div className="row password-confirm">
                     <label htmlFor="password-confirm">{t`CONFIRM_PWD_LBL`}</label>
-
-                    {errors.newPassword2 && (
-                      <div className="error">
-                        <span className="icon">!</span>
-                        <span className="text ">{errors.newPassword2}</span>
-                      </div>
-                    )}
+                    {getErrorField(errors, "newPassword2")}
 
                     <input
                       className={`input ${errors.newPassword2 ? "error" : ""}`}
diff --git a/client/components/password-reset/password-reset.js b/client/components/password-reset/password-reset.js
index 7a07fb0b..23cd17ed 100644
--- a/client/components/password-reset/password-reset.js
+++ b/client/components/password-reset/password-reset.js
@@ -12,6 +12,7 @@ import getErrorText from "../../utils/get-error-text";
 import logError from "../../utils/log-error";
 import handleChange from "../../utils/handle-change";
 import Contact from "../contact-box";
+import getErrorField from "../../utils/get-error-field";
 
 export default class PasswordReset extends React.Component {
   constructor(props) {
@@ -101,12 +102,7 @@ export default class PasswordReset extends React.Component {
                 <div className="fieldset">
                   <div className="row email">
                     <label htmlFor="email">{t`EMAIL`}</label>
-                    {errors.email && (
-                      <div className="error">
-                        <span className="icon">!</span>
-                        <span className="text email">{errors.email}</span>
-                      </div>
-                    )}
+                    {getErrorField(errors, "email")}
                     <input
                       className={`input ${errors.email ? "error" : ""}`}
                       type="email"
diff --git a/client/components/registration/registration.js b/client/components/registration/registration.js
index 288ed81d..058a8ee0 100644
--- a/client/components/registration/registration.js
+++ b/client/components/registration/registration.js
@@ -22,6 +22,7 @@ import submitOnEnter from "../../utils/submit-on-enter";
 import renderAdditionalInfo from "../../utils/render-additional-info";
 import Contact from "../contact-box";
 import Modal from "../modal";
+import getErrorField from "../../utils/get-error-field";
 
 const PhoneInput = React.lazy(() => import("react-phone-input-2"));
 
@@ -364,12 +365,7 @@ export default class Registration extends React.Component {
             >
               <div className="inner">
                 <div className="fieldset">
-                  {errors.nonField && (
-                    <div className="error non-field">
-                      <span className="icon">!</span>
-                      <span className="text">{errors.nonField}</span>
-                    </div>
-                  )}
+                  {getErrorField(errors, "nonField", true)}
                   {plans.length > 0 && this.getPlanSelection()}
                   {(plans.length === 0 ||
                     (plans.length > 0 && selectedPlan !== null)) && (
@@ -379,15 +375,7 @@ export default class Registration extends React.Component {
                         input_fields.phone_number && (
                           <div className="row phone-number">
                             <label htmlFor="phone-number">{t`PHONE_LBL`}</label>
-
-                            {errors.phone_number && (
-                              <div className="error">
-                                <span className="icon">!</span>
-                                <span className="text">
-                                  {errors.phone_number}
-                                </span>
-                              </div>
-                            )}
+                            {getErrorField(errors, "phone_number")}
                             <Suspense
                               fallback={
                                 <input
@@ -463,14 +451,7 @@ export default class Registration extends React.Component {
 
                       <div className="row email">
                         <label htmlFor="email">{t`EMAIL`}</label>
-                        {errors.email && (
-                          <div className="error email">
-                            <span className="icon">!</span>
-                            <span className="text text-email">
-                              {errors.email}
-                            </span>
-                          </div>
-                        )}
+                        {getErrorField(errors, "email", false, "email")}
                         <input
                           className={`input ${errors.email ? "error" : ""}`}
                           type="email"
@@ -493,14 +474,7 @@ export default class Registration extends React.Component {
                               ? getText(input_fields.username.label, language)
                               : t`USERNAME_LBL`}
                           </label>
-                          {errors.email && (
-                            <div className="error username">
-                              <span className="icon">!</span>
-                              <span className="text text-username">
-                                {errors.username}
-                              </span>
-                            </div>
-                          )}
+                          {getErrorField(errors, "email", false, "username")}
                           <input
                             className={`input ${
                               errors.username ? "error" : ""
@@ -534,13 +508,11 @@ export default class Registration extends React.Component {
                               ? t`FIRST_NAME_LBL`
                               : `${t`FIRST_NAME_LBL`} (${t`OPTIONAL`})`}
                           </label>
-                          {errors.first_name && (
-                            <div className="error first_name">
-                              <span className="icon">!</span>
-                              <span className="text text-first_name">
-                                {errors.first_name}
-                              </span>
-                            </div>
+                          {getErrorField(
+                            errors,
+                            "first_name",
+                            false,
+                            "first_name",
                           )}
                           <input
                             className={`input ${
@@ -569,13 +541,11 @@ export default class Registration extends React.Component {
                               ? t`LAST_NAME_LBL`
                               : `${t`LAST_NAME_LBL`} (${t`OPTIONAL`})`}
                           </label>
-                          {errors.last_name && (
-                            <div className="error last_name">
-                              <span className="icon">!</span>
-                              <span className="text text-last_name">
-                                {errors.last_name}
-                              </span>
-                            </div>
+                          {getErrorField(
+                            errors,
+                            "last_name",
+                            false,
+                            "last_name",
                           )}
                           <input
                             className={`input ${
@@ -603,13 +573,11 @@ export default class Registration extends React.Component {
                               ? t`BIRTH_DATE_LBL`
                               : `${t`BIRTH_DATE_LBL`} (${t`OPTIONAL`})`}
                           </label>
-                          {errors.birth_date && (
-                            <div className="error birth_date">
-                              <span className="icon">!</span>
-                              <span className="text text-birth_date">
-                                {errors.birth_date}
-                              </span>
-                            </div>
+                          {getErrorField(
+                            errors,
+                            "birth_date",
+                            false,
+                            "birth_date",
                           )}
                           <input
                             className={`input ${
@@ -635,14 +603,7 @@ export default class Registration extends React.Component {
                               ? t`LOCATION_LBL`
                               : `${t`LOCATION_LBL`} (${t`OPTIONAL`})`}
                           </label>
-                          {errors.location && (
-                            <div className="error location">
-                              <span className="icon">!</span>
-                              <span className="text text-location">
-                                {errors.location}
-                              </span>
-                            </div>
-                          )}
+                          {getErrorField(errors, "location", false, "location")}
                           <input
                             className={`input ${
                               errors.location ? "error" : ""
@@ -665,12 +626,7 @@ export default class Registration extends React.Component {
 
                       <div className="row password">
                         <label htmlFor="password">{t`PWD_LBL`}</label>
-                        {errors.password1 && (
-                          <div className="error">
-                            <span className="icon">!</span>
-                            <span className="text">{errors.password1}</span>
-                          </div>
-                        )}
+                        {getErrorField(errors, "password1")}
                         <input
                           className={`input ${errors.password1 ? "error" : ""}`}
                           type="password"
@@ -699,14 +655,7 @@ export default class Registration extends React.Component {
                         <label htmlFor="password-confirm">
                           {t`CONFIRM_PWD_LBL`}
                         </label>
-                        {errors.password2 && (
-                          <div className="error confirm">
-                            <span className="icon">!</span>
-                            <span className="text text-confirm">
-                              {errors.password2}
-                            </span>
-                          </div>
-                        )}
+                        {getErrorField(errors, "password2", false, "confirm")}
                         <input
                           className={`input ${errors.password2 ? "error" : ""}`}
                           type="password"
@@ -736,13 +685,11 @@ export default class Registration extends React.Component {
                           <div className="billing-info">
                             <div className="row country">
                               <label htmlFor="country">{t`COUNTRY_LBL`}</label>
-                              {errors.country && (
-                                <div className="error country">
-                                  <span className="icon">!</span>
-                                  <span className="text text-country">
-                                    {errors.country}
-                                  </span>
-                                </div>
+                              {getErrorField(
+                                errors,
+                                "country",
+                                false,
+                                "country",
                               )}
                               <Select
                                 options={countries}
@@ -752,14 +699,7 @@ export default class Registration extends React.Component {
                             </div>
                             <div className="row city">
                               <label htmlFor="city">{t`CITY_LBL`}</label>
-                              {errors.city && (
-                                <div className="error city">
-                                  <span className="icon">!</span>
-                                  <span className="text text-city">
-                                    {errors.city}
-                                  </span>
-                                </div>
-                              )}
+                              {getErrorField(errors, "city", false, "city")}
                               <input
                                 className={`input ${
                                   errors.city ? "error" : ""
@@ -776,14 +716,7 @@ export default class Registration extends React.Component {
                             </div>
                             <div className="row street">
                               <label htmlFor="street">{t`STREET_LBL`}</label>
-                              {errors.street && (
-                                <div className="error street">
-                                  <span className="icon">!</span>
-                                  <span className="text text-street">
-                                    {errors.street}
-                                  </span>
-                                </div>
-                              )}
+                              {getErrorField(errors, "street", false, "street")}
                               <input
                                 className={`input ${
                                   errors.street ? "error" : ""
@@ -800,13 +733,11 @@ export default class Registration extends React.Component {
                             </div>
                             <div className="row zipcode">
                               <label htmlFor="zipcode">{t`ZIP_CODE_LBL`}</label>
-                              {errors.zipcode && (
-                                <div className="error zipcode">
-                                  <span className="icon">!</span>
-                                  <span className="text text-zipcode">
-                                    {errors.zipcode}
-                                  </span>
-                                </div>
+                              {getErrorField(
+                                errors,
+                                "zipcode",
+                                false,
+                                "zipcode",
                               )}
                               <input
                                 className={`input ${
@@ -825,13 +756,11 @@ export default class Registration extends React.Component {
                               <label htmlFor="tax_number">
                                 {t`TAX_NUMBER_LBL`}
                               </label>
-                              {errors.tax_number && (
-                                <div className="error tax_number">
-                                  <span className="icon">!</span>
-                                  <span className="text text-tax_number">
-                                    {errors.tax_number}
-                                  </span>
-                                </div>
+                              {getErrorField(
+                                errors,
+                                "tax_number",
+                                false,
+                                "tax_number",
                               )}
                               <input
                                 className={`input ${
diff --git a/client/utils/get-error-field.js b/client/utils/get-error-field.js
new file mode 100644
index 00000000..5b898ac6
--- /dev/null
+++ b/client/utils/get-error-field.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const getErrorField = (errors, key, nonField = false, className = "") =>
+  errors[key] ? (
+    <div className={!nonField ? `error ${className}` : "error non-field"}>
+      <span className="icon">!</span>
+      <span className="text">{errors[key]}</span>
+    </div>
+  ) : null;
+
+export default getErrorField;