Unverified Commit e4acf697 authored by Zhou (Link)  Fang's avatar Zhou (Link) Fang Committed by GitHub
Browse files

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
parent 6905b4f3
......@@ -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 = {
......
......@@ -2,6 +2,8 @@ export interface FormValue {
organization: {
id: string;
legalName: string;
revenue: string;
employeeCount: string;
address: {
id: string;
street: string;
......
......@@ -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,
};
......
......@@ -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>
......
......@@ -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>
......
......@@ -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,
......
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>
);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment