display errors in fab-input

app/frontend/src/javascript/components/base/fab-input.tsx

@@ -16,13 +16,14 @@ interface FabInputProps {
   maxLength?: number,
   pattern?: string,
   placeholder?: string,
+  error?: string,
   type?: 'text' | 'date' | 'password' | 'url' | 'time' | 'tel' | 'search' | 'number' | 'month' | 'email' | 'datetime-local' | 'week',
 }
 
 /**
  * This component is a template for an input component that wraps the application style
  */
-export const FabInput: React.FC<FabInputProps> = ({ id, onChange, defaultValue, icon, className, disabled, type, required, debounce, addOn, addOnClassName, readOnly, maxLength, pattern, placeholder }) => {
+export const FabInput: React.FC<FabInputProps> = ({ id, onChange, defaultValue, icon, className, disabled, type, required, debounce, addOn, addOnClassName, readOnly, maxLength, pattern, placeholder, error }) => {
   const [inputValue, setInputValue] = useState<any>(defaultValue);
 
   /**
@@ -52,6 +53,13 @@ export const FabInput: React.FC<FabInputProps> = ({ id, onChange, defaultValue,
     return !!addOn;
   }
 
+  /**
+   * Check if the current component was provided an error string to display, on the input
+   */
+  const hasError = (): boolean => {
+    return !!error;
+  }
+
   /**
    * Debounced (ie. temporised) version of the 'on change' callback.
    */
@@ -74,19 +82,22 @@ export const FabInput: React.FC<FabInputProps> = ({ id, onChange, defaultValue,
 
   return (
     <div className={`fab-input ${className ? className : ''}`}>
-      {hasIcon() && <span className="fab-input--icon">{icon}</span>}
+      <div className={`input-wrapper ${hasError() ? 'input-error' : ''}`}>
-      <input id={id}
+        {hasIcon() && <span className="fab-input--icon">{icon}</span>}
-             type={type}
+        <input id={id}
-             className="fab-input--input"
+               type={type}
-             value={inputValue}
+               className="fab-input--input"
-             onChange={handleChange}
+               value={inputValue}
-             disabled={disabled}
+               onChange={handleChange}
-             required={required}
+               disabled={disabled}
-             readOnly={readOnly}
+               required={required}
-             maxLength={maxLength}
+               readOnly={readOnly}
-             pattern={pattern}
+               maxLength={maxLength}
-             placeholder={placeholder} />
+               pattern={pattern}
-      {hasAddOn() && <span className={`fab-input--addon ${addOnClassName ?  addOnClassName : ''}`}>{addOn}</span>}
+               placeholder={placeholder} />
+        {hasAddOn() && <span className={`fab-input--addon ${addOnClassName ?  addOnClassName : ''}`}>{addOn}</span>}
+      </div>
+      {hasError() && <span className="fab-input--error">{error}</span> }
     </div>
   );
 }

app/frontend/src/javascript/components/payzen-settings.tsx

@@ -130,7 +130,6 @@ export const PayzenSettings: React.FC<PayzenSettingsProps> = ({ onEditKeys, onCu
         <p className="currency-info">
           <HtmlTranslate trKey="app.admin.invoices.payment.payzen.currency_info_html" />
         </p>
-        {error && <p className="currency-error">{error}</p>}
         <div className="payzen-currency-form">
           <div className="currency-wrapper">
             <label htmlFor="payzen_currency">{t('app.admin.invoices.payment.payzen.payzen_currency')}</label>
@@ -139,7 +138,8 @@ export const PayzenSettings: React.FC<PayzenSettingsProps> = ({ onEditKeys, onCu
                       icon={<i className="fas fa-money-bill" />}
                       onChange={handleCurrencyUpdate}
                       maxLength={3}
-                      pattern="[A-Z]{3}" />
+                      pattern="[A-Z]{3}"
+                      error={error} />
           </div>
           <FabButton className="save-currency" onClick={saveCurrency}>{t('app.admin.invoices.payment.payzen.save')}</FabButton>
         </div>

app/frontend/src/stylesheets/modules/fab-input.scss

@@ -1,7 +1,9 @@
 .fab-input {
-  position: relative;
+  .input-wrapper {
-  display: table;
+    position: relative;
-  border-collapse: separate;
+    display: table;
+    border-collapse: separate;
+  }
 
   &--icon {
     min-width: 40px;
@@ -65,4 +67,22 @@
     }
 
   }
+
+  .input-error {
+    .fab-input--icon {
+      color: #a94442;
+      background-color: #f2dede;
+      border-color: #a94442;
+    }
+    .fab-input--input {
+      border-color: #a94442;
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
+    }
+  }
+  &--error {
+    display: block;
+    color: #a94442;
+    margin-top: 5px;
+    margin-bottom: 10px;
+  }
 }

app/frontend/src/stylesheets/modules/payzen-settings.scss

@@ -24,24 +24,17 @@
       color: #8a6d3b;
       background-color: #fcf8e3;
     }
-    .currency-error {
-      padding: 15px;
-      margin-bottom: 24px;
-      border: 1px solid #ebccd1;
-      color: #a94442;
-      background-color: #f2dede;
-    }
     .payzen-currency-form {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
-      align-items: flex-end;
+      align-items: flex-start;
 
       .currency-wrapper {
         padding: 5px 15px;
       }
       .save-currency {
-        margin: 5px 15px;
+        margin: 34px 15px 5px;
       }
     }
   }