Commit 5ae9742d authored by Zhou Fang's avatar Zhou Fang Committed by Martin Lowe
Browse files

Added revenue and currency field

parent 90b89b2a
......@@ -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',
......
......@@ -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"
......
......@@ -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',
......
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}
......
......@@ -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}
......
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