Added revenue and currency field

src/main/www/src/Constants/Constants.js

@@ -85,6 +85,11 @@ export const OPTIONS_FOR_PURCHASING_PROCESS = [
   { label: 'Not Applicable', value: 'na' },
 ];
 
+export const OPTIONS_FOR_REVENUE_CURRENCY = [
+  { label: 'USD', value: 'usd' },
+  { label: 'EUR', value: 'eur' },
+];
+
 export const END_POINT = {
   organizations: 'organizations',
   contacts: 'contacts',

src/main/www/src/components/Application/CompanyInformation/CompanyInformationCompany.js

@@ -2,6 +2,8 @@ import Input from '../../UIComponents/Inputs/Input';
 import { formField } from '../../UIComponents/FormComponents/formFieldModel';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { TextField } from '@material-ui/core';
+import DropdownMenu from '../../UIComponents/Inputs/DropdownMenu';
+import { OPTIONS_FOR_REVENUE_CURRENCY } from '../../../Constants/Constants';
 
 /**
  * Render Oraganization selector (used React-Select)
@@ -14,30 +16,37 @@ import { TextField } from '@material-ui/core';
 
 const CompanyInformationCompany = ({ formik, useStyles }) => {
   const classes = useStyles();
-  const { organizationName, organizationTwitter, organizationAddress } =
-    formField;
+  const { organizationName, organizationTwitter, organizationAddress, organizationRevenue } = formField;
 
   // get country list library and map as option pass to the React-Select
   const countryList = require('country-list')
     .getNames()
     .map((item) => ({ label: item, value: item }));
 
+  const handleRevenueChange = (value) => {
+    formik.setFieldValue('organization.revenue', value);
+  };
+
+  const handleCurrencyChange = (value) => {
+    formik.setFieldValue('organization.currency', value);
+  };
   return (
     <>
       <h2 className="fw-600 h4" id={organizationName.name}>
         Organization
       </h2>
-
-      <Input
-        name={organizationName.name}
-        labelName={organizationName.label}
-        placeholder={organizationName.placeholder}
-        ariaLabel={organizationName.name}
-        requiredMark={true}
-        value={formik.values.organization.legalName}
-        onChange={formik.handleChange}
-      />
       <div className="row">
+        <div className="col-md-16">
+          <Input
+            name={organizationName.name}
+            labelName={organizationName.label}
+            placeholder={organizationName.placeholder}
+            ariaLabel={organizationName.name}
+            requiredMark={true}
+            value={formik.values.organization.legalName}
+            onChange={formik.handleChange}
+          />
+        </div>
         <div className="col-md-8">
           <Input
             name={organizationTwitter.name}
@@ -52,6 +61,30 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
           />
         </div>
       </div>
+      <p>Let us know your corporate revenue from all the Affiliates.</p>
+      <div className="row">
+        <div className="col-md-8">
+          <Input
+            name={organizationRevenue.revenue.name}
+            labelName={organizationRevenue.revenue.label}
+            placeholder={organizationRevenue.revenue.placeholder}
+            requiredMark={true}
+            type={'number'}
+            value={formik.values.organization.revenue}
+            onChange={(ev) => handleRevenueChange(ev.target.value)}
+            ariaLabel={`${organizationRevenue.revenue.name}`}
+          />
+        </div>
+        <div className="col-md-4">
+          <DropdownMenu
+            inputLabel={organizationRevenue.currency.label}
+            inputName={organizationRevenue.currency.name}
+            inputValue={formik.values.organization.currency}
+            optionsArray={OPTIONS_FOR_REVENUE_CURRENCY}
+            handleChange={(ev) => handleCurrencyChange(ev.target.value)}
+          />
+        </div>
+      </div>
 
       <h2 className="fw-600 h4" id={`${organizationName.name}-address`}>
         Address
@@ -93,16 +126,10 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
             openOnFocus={true}
             onChange={(ev, value) => {
               // this is only for display
-              formik.setFieldValue(
-                `${organizationAddress.country.name}-label`,
-                value || null
-              );
+              formik.setFieldValue(`${organizationAddress.country.name}-label`, value || null);
 
               // this is the data will be actually used
-              formik.setFieldValue(
-                organizationAddress.country.name,
-                value ? value.value : null
-              );
+              formik.setFieldValue(organizationAddress.country.name, value?.value || null);
             }}
             value={formik.values.organization.address['country-label'] || null}
             renderInput={(params) => {
@@ -114,10 +141,7 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
                 <TextField
                   {...params}
                   onChange={(ev) => {
-                    formik.setFieldValue(
-                      organizationAddress.country.name,
-                      ev.target.value || null
-                    );
+                    formik.setFieldValue(organizationAddress.country.name, ev.target.value || null);
                   }}
                   label="Country"
                   placeholder="Country"

src/main/www/src/components/UIComponents/FormComponents/formFieldModel.js

@@ -14,6 +14,8 @@ const jobtitle = 'Job Title';
 const purchasingProcess = 'Require or Not';
 const vatNumber = 'VAT Number';
 const countryOfRegistration = 'Country of Registration';
+const REVENUE = 'Revenue';
+const CURRENCY = 'Currency';
 
 export const requiredErrorMsg = 'is required';
 
@@ -24,6 +26,8 @@ export const initialValues = {
   organization: {
     id: '',
     legalName: '',
+    revenue: '',
+    currency: '',
     address: {
       id: '',
       street: '',
@@ -128,6 +132,18 @@ export const formField = {
     placeholder: orgName,
     requiredErrorMsg: requiredErrorMsg,
   },
+  organizationRevenue: {
+    revenue: {
+      name: 'revenue',
+      label: REVENUE,
+      placeholder: REVENUE,
+    },
+    currency: {
+      name: 'currency',
+      label: CURRENCY,
+      placeholder: CURRENCY,
+    },
+  },
   organizationAddress: {
     address: {
       name: 'organization.address',

src/main/www/src/components/UIComponents/Inputs/DropdownMenu.js

-import {
-  FormControl,
-  InputLabel,
-  makeStyles,
-  MenuItem,
-  Select,
-} from '@material-ui/core';
+import { FormControl, InputLabel, makeStyles, MenuItem, Select } from '@material-ui/core';
 
 const useStyles = makeStyles(() => ({
   formControl: {
     width: '100%',
+    marginBottom: 14,
+    marginTop: 6,
   },
   selectField: {
     backgroundColor: 'white',
@@ -18,22 +14,11 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-export default function DropdownMenu({
-  inputLabel,
-  inputName,
-  inputValue,
-  optionsArray,
-  handleChange,
-}) {
+export default function DropdownMenu({ inputLabel, inputName, inputValue, optionsArray, handleChange }) {
   const classes = useStyles();
 
   return (
-    <FormControl
-      margin="dense"
-      variant="outlined"
-      required={true}
-      className={classes.formControl}
-    >
+    <FormControl margin="dense" variant="outlined" required={true} className={classes.formControl}>
       <InputLabel>{inputLabel}</InputLabel>
       <Select
         name={inputName}

src/main/www/src/components/UIComponents/Inputs/Input.js

@@ -38,12 +38,14 @@ export default function Input(props) {
     onChange,
     error,
     helperText,
+    type,
   } = props;
   const classes = useStyles();
 
   return (
     <TextField
       name={name}
+      type={type || 'text'}
       required={requiredMark}
       disabled={disableInput}
       value={value}