Updated revenue and employee count field (#269)

* Updated revenue and employee count field

* Cleared currency related code

* Added revenue and employee count to review page

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

@@ -85,9 +85,31 @@ 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 OPTIONS_FOR_REVENUE = [
+  { label: '> €1 billion', value: '> €1 billion' },
+  { label: '€250 million - €1 billion', value: '€250 million - €1 billion' },
+  { label: '€100 million - €250 million', value: '€100 million - €250 million' },
+  { label: '€50 million - €100 million', value: '€50 million - €100 million' },
+  { label: '€10 million - €50 million', value: '€10 million - €50 million' },
+  { label: '€1 million - €10 million', value: '€1 million - €10 million' },
+  { label: '< €1 million', value: '< €1 million' },
+  { label: 'Not Applicable', value: 'Not Applicable' },
+];
+
+export const HELPERTEXT_FOR_REVENUE = (
+  <>
+    Choose Not Applicable if your organization is: <br />
+    Govt, Govt agencies, Research Organizations, NGOs, etc. <br />
+    Academic, Publishing Organizations, User Groups, etc.
+  </>
+);
+
+export const OPTIONS_FOR_EMPLOYEE_COUNT = [
+  { label: '1 - 10', value: '1 - 10' },
+  { label: '10 - 100', value: '10 - 100' },
+  { label: '100 - 1000', value: '100 - 1000' },
+  { label: '1000 - 10,000', value: '1000 - 10,000' },
+  { label: '> 10,000', value: '> 10,000' },
 ];
 
 export const END_POINT = {

src/main/www/src/Interfaces/form_interface.tsx

@@ -2,6 +2,8 @@ export interface FormValue {
   organization: {
     id: string;
     legalName: string;
+    revenue: string;
+    employeeCount: string;
     address: {
       id: string;
       street: string;

src/main/www/src/Utils/formFunctionHelpers.js

@@ -74,8 +74,7 @@ export function matchCompanyFields(existingOrganizationData) {
     // Step1: company Info
     id: existingOrganizationData?.id || '',
     legalName: existingOrganizationData?.legal_name || '',
-    revenue: Number(existingOrganizationData?.aggregate_revenue?.slice(0, -4)) || '',
-    currency: existingOrganizationData?.aggregate_revenue?.slice(-3) || '',
+    revenue: existingOrganizationData?.aggregate_revenue || '',
     employeeCount: existingOrganizationData?.employee_count || '',
     address: {
       id: existingOrganizationData?.address?.id || '',
@@ -231,7 +230,7 @@ export function matchCompanyFieldsToBackend(organizationData, formId) {
     id: organizationData.id,
     legal_name: organizationData.legalName,
     twitter: organizationData.twitterHandle || '',
-    aggregate_revenue: `${organizationData.revenue} ${organizationData.currency}`,
+    aggregate_revenue: organizationData.revenue,
     employee_count: organizationData.employeeCount,
   };
 

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

@@ -3,7 +3,7 @@ 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';
+import { OPTIONS_FOR_REVENUE, OPTIONS_FOR_EMPLOYEE_COUNT, HELPERTEXT_FOR_REVENUE } from '../../../Constants/Constants';
 
 /**
  * Render Oraganization selector (used React-Select)
@@ -71,37 +71,23 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
         .
       </p>
       <div className="row">
-        <div className="col-md-10">
-          <Input
-            name={organizationRevenue.revenue.name}
-            labelName={organizationRevenue.revenue.label}
-            placeholder={organizationRevenue.revenue.placeholder}
-            requiredMark={true}
-            type={'number'}
-            value={formik.values.organization.revenue}
-            onChange={(ev) => handleFieldChange(ev.target.value, 'organization.revenue')}
-            ariaLabel={`${organizationRevenue.revenue.name}`}
-          />
-        </div>
-        <div className="col-md-6">
+        <div className="col-md-16">
           <DropdownMenu
-            inputLabel={organizationRevenue.currency.label}
-            inputName={organizationRevenue.currency.name}
-            inputValue={formik.values.organization.currency}
-            optionsArray={OPTIONS_FOR_REVENUE_CURRENCY}
-            handleChange={(ev) => handleFieldChange(ev.target.value, 'organization.currency')}
+            inputLabel={organizationRevenue.revenue.label}
+            inputName={organizationRevenue.revenue.name}
+            inputValue={formik.values.organization.revenue}
+            optionsArray={OPTIONS_FOR_REVENUE}
+            helperText={HELPERTEXT_FOR_REVENUE}
+            handleChange={(ev) => handleFieldChange(ev.target.value, 'organization.revenue')}
           />
         </div>
         <div className="col-md-8">
-          <Input
-            name={organizationRevenue.employeeCount.name}
-            labelName={organizationRevenue.employeeCount.label}
-            placeholder={organizationRevenue.employeeCount.placeholder}
-            requiredMark={true}
-            type={'number'}
-            value={formik.values.organization.employeeCount}
-            onChange={(ev) => handleFieldChange(ev.target.value, 'organization.employeeCount')}
-            ariaLabel={`${organizationRevenue.employeeCount.name}`}
+          <DropdownMenu
+            inputLabel={organizationRevenue.employeeCount.label}
+            inputName={organizationRevenue.employeeCount.name}
+            inputValue={formik.values.organization.employeeCount}
+            optionsArray={OPTIONS_FOR_EMPLOYEE_COUNT}
+            handleChange={(ev) => handleFieldChange(ev.target.value, 'organization.employeeCount')}
           />
         </div>
       </div>

src/main/www/src/components/Application/Review/Review.tsx

@@ -47,7 +47,18 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setI
           </div>
         </div>
 
-        <h3 className="fw-600 h4">Address</h3>
+        <div className="row margin-top-15">
+          <div className="col-md-8">
+            <label>Organization Revenue</label>
+            <div className="preview-field">{values.organization.revenue}</div>
+          </div>
+          <div className="col-md-8">
+            <label>Employee Count</label>
+            <div className="preview-field">{values.organization.employeeCount}</div>
+          </div>
+        </div>
+
+        <h3 className="fw-600 h4 margin-top-20">Address</h3>
         <div className="row margin-bottom-30">
           <div className="col-md-8">
             <label>Street</label>

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

@@ -15,7 +15,6 @@ const purchasingProcess = 'Require or Not';
 const vatNumber = 'VAT Number';
 const countryOfRegistration = 'Country of Registration';
 const REVENUE = 'Revenue';
-const CURRENCY = 'Currency';
 const EMPLOYEE_COUNT = 'Employee Count';
 
 export const requiredErrorMsg = 'is required';
@@ -28,7 +27,6 @@ export const initialValues = {
     id: '',
     legalName: '',
     revenue: '',
-    currency: '',
     employeeCount: '',
     address: {
       id: '',
@@ -140,11 +138,6 @@ export const formField = {
       label: REVENUE,
       placeholder: REVENUE,
     },
-    currency: {
-      name: 'currency',
-      label: CURRENCY,
-      placeholder: CURRENCY,
-    },
     employeeCount: {
       name: 'employeeCount',
       label: EMPLOYEE_COUNT,

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

-import { FormControl, InputLabel, makeStyles, MenuItem, Select } from '@material-ui/core';
+import { FormControl, FormHelperText, InputLabel, makeStyles, MenuItem, Select } from '@material-ui/core';
 
 const useStyles = makeStyles(() => ({
   formControl: {
@@ -14,7 +14,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-export default function DropdownMenu({ inputLabel, inputName, inputValue, optionsArray, handleChange }) {
+export default function DropdownMenu({ inputLabel, inputName, inputValue, optionsArray, handleChange, helperText }) {
   const classes = useStyles();
 
   return (
@@ -33,6 +33,7 @@ export default function DropdownMenu({ inputLabel, inputName, inputValue, option
           </MenuItem>
         ))}
       </Select>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </FormControl>
   );
 }