ERP: Modifications in registration form

src/common/utils.ts

@@ -300,3 +300,9 @@ export const updateContactCache = (client: any, id: any) => {
 
   return null;
 };
+
+export const formatString = (str: string) =>
+  str
+    .replace(/_/g, ' ')
+    .replace(/([a-z])([0-9])/gi, '$1 $2')
+    .replace(/\b\w/g, (char) => char.toUpperCase());

src/components/UI/Form/PhoneInput/PhoneInput.tsx

@@ -18,6 +18,7 @@ export interface InputProps {
   form: { touched: any; errors: any; setFieldValue: any };
   inputLabel?: string | null;
   disabled?: boolean;
+  changeHandler?: (event: string, data: {}, formFieldItems: string) => void;
 }
 
 export const PhoneInput = ({
@@ -33,6 +34,7 @@ export const PhoneInput = ({
   inputLabel = null,
   disabled = false,
   helperText,
+  changeHandler,
 }: InputProps) => {
   const errorText = getIn(errors, field.name);
   const touchedVal = getIn(touched, field.name);
@@ -58,7 +60,9 @@ export const PhoneInput = ({
           inputProps={inputProps}
           {...field}
           value={field.value}
-          onChange={(event) => {
+          onChange={(event, data, _, formFieldItems) => {
+            if (changeHandler) changeHandler(event, data, formFieldItems);
+
             setFieldValue(field.name, event);
           }}
         />

src/containers/Organization/Onboarding/Form.test.tsx

@@ -144,9 +144,15 @@ test('it should submit the form', async () => {
 
   const inputFieldsOrgdetails = getAllByRole('textbox');
 
-  const [registeredAddress, gstin] = inputFieldsOrgdetails;
+  const [line1, line2, city, state, country, pincode, gstin] = inputFieldsOrgdetails;
+
+  fireEvent.change(line1, { target: { value: 'line1' } });
+  fireEvent.change(line2, { target: { value: 'line2' } });
+  fireEvent.change(city, { target: { value: 'City' } });
+  fireEvent.change(state, { target: { value: 'State' } });
+  fireEvent.change(country, { target: { value: 'Country' } });
+  fireEvent.change(pincode, { target: { value: '123456' } });
 
-  fireEvent.change(registeredAddress, { target: { value: 'address' } });
   fireEvent.click(screen.getByRole('checkbox'));
   fireEvent.change(gstin, { target: { value: '123456789012345' } });
 
@@ -164,12 +170,13 @@ test('it should submit the form', async () => {
   });
 
   const inputFieldsPaymentdetails = getAllByRole('textbox');
-  const [name, designation, phone, email] = inputFieldsPaymentdetails;
+  const [firstName, lastName, designation, phone, email] = inputFieldsPaymentdetails;
 
   const radioButtons = getAllByTestId('radio-btn');
   fireEvent.click(radioButtons[1]);
 
-  fireEvent.change(name, { target: { value: 'Default finance poc name' } });
+  fireEvent.change(firstName, { target: { value: 'finance poc firstName' } });
+  fireEvent.change(lastName, { target: { value: 'finance poc lastName' } });
   fireEvent.change(designation, { target: { value: 'finance' } });
   fireEvent.change(phone, { target: { value: '09421050449' } });
   fireEvent.change(email, { target: { value: '[email protected]' } });
@@ -189,17 +196,23 @@ test('it should submit the form', async () => {
 
   const inputFieldssigningdetails = getAllByRole('textbox');
   const [
-    submitterName,
+    submitterFirstName,
+    submitterLastName,
+    submitterDesignation,
     submitterEmail,
-    signingAuthorityName,
+    signingAuthorityFirstName,
+    signingAuthorityLastName,
     signingAuthorityDesignation,
     signingAuthorityEmail,
   ] = inputFieldssigningdetails;
 
-  fireEvent.change(submitterName, { target: { value: 'Default submitter' } });
+  fireEvent.change(submitterFirstName, { target: { value: 'first name' } });
+  fireEvent.change(submitterLastName, { target: { value: 'last name' } });
+  fireEvent.change(submitterDesignation, { target: { value: 'submitter' } });
   fireEvent.change(submitterEmail, { target: { value: '[email protected]' } });
 
-  fireEvent.change(signingAuthorityName, { target: { value: 'Default signing' } });
+  fireEvent.change(signingAuthorityFirstName, { target: { value: 'Default signing firstName' } });
+  fireEvent.change(signingAuthorityLastName, { target: { value: 'Default signing lastName' } });
   fireEvent.change(signingAuthorityDesignation, { target: { value: 'signing authority' } });
   fireEvent.change(signingAuthorityEmail, { target: { value: '[email protected]' } });
 
@@ -253,9 +266,14 @@ test('it should disgree and send an email', async () => {
 
   const inputFieldsOrgdetails = getAllByRole('textbox');
 
-  const [registeredAddress, gstin] = inputFieldsOrgdetails;
+  const [line1, line2, city, state, country, pincode, gstin] = inputFieldsOrgdetails;
 
-  fireEvent.change(registeredAddress, { target: { value: 'address' } });
+  fireEvent.change(line1, { target: { value: 'line1' } });
+  fireEvent.change(line2, { target: { value: 'line2' } });
+  fireEvent.change(city, { target: { value: 'City' } });
+  fireEvent.change(state, { target: { value: 'State' } });
+  fireEvent.change(country, { target: { value: 'Country' } });
+  fireEvent.change(pincode, { target: { value: '123456' } });
   fireEvent.click(screen.getByRole('checkbox'));
   fireEvent.change(gstin, { target: { value: '123456789012345' } });
 
@@ -266,12 +284,13 @@ test('it should disgree and send an email', async () => {
   });
 
   const inputFieldsPaymentdetails = getAllByRole('textbox');
-  const [name, designation, phone, email] = inputFieldsPaymentdetails;
+  const [firstName, lastName, designation, phone, email] = inputFieldsPaymentdetails;
 
   const radioButtons = getAllByTestId('radio-btn');
   fireEvent.click(radioButtons[1]);
 
-  fireEvent.change(name, { target: { value: 'Default finance poc name' } });
+  fireEvent.change(firstName, { target: { value: 'finance poc firstName' } });
+  fireEvent.change(lastName, { target: { value: 'finance poc lastName' } });
   fireEvent.change(designation, { target: { value: 'finance' } });
   fireEvent.change(phone, { target: { value: '09421050449' } });
   fireEvent.change(email, { target: { value: '[email protected]' } });

src/containers/Organization/Onboarding/FormLayout/FormLayout.tsx

@@ -30,6 +30,8 @@
   showModal?: boolean;
   isDisabled?: boolean;
   handleEffect?: Function;
+  customError?: null | string;
+  setCustomError?: Function;
 }
 
 export const FormLayout = ({
@@ -52,6 +54,8 @@
   showModal,
   isDisabled,
   handleEffect,
+  customError,
+  setCustomError,
 }: FormLayoutProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -217,16 +221,16 @@
   );
 
   let modal;
-
+  let errorModal;
   if (showModal)
     modal = (
       <DialogBox
         handleCancel={() => setIsModalOpen(false)}
         handleOk={() => {
           saveHandler(formik.values, formik.setErrors);
         }}
-        title={'Confirmation'}
-        buttonOk={'Confirm'}
+        title="Confirmation"
+        buttonOk="Confirm"
         buttonCancel="Cancel"
         buttonOkLoading={loading}
       >
@@ -239,13 +243,31 @@
       </DialogBox>
     );
 
+  if (customError && setCustomError) {
+    errorModal = (
+      <DialogBox
+        handleOk={() => setCustomError(null)}
+        handleCancel={() => setCustomError(null)}
+        title="Something went wrong!"
+        buttonOk="Ok"
+        skipCancel
+        colorOk="warning"
+      >
+        <div className={styles.Modal}>
+          <p>{customError}</p>
+          <p>Please contact the Glific team for support.</p>
+        </div>
+      </DialogBox>
+    );
+  }
   return (
     <FormikProvider value={formik}>
       <div className={styles.FormContainer}>
         {header}
         {form}
       </div>
       {isModalOpen && modal}
+      {errorModal}
     </FormikProvider>
   );
 };

src/containers/Organization/Onboarding/PaymentType/PaymentOptions.tsx

@@ -25,32 +25,32 @@ export const PaymentOptions = ({ form: { setFieldValue, values } }: PaymentOptio
           <div className={`${styles.RadioLabelWrapper} ${styles.Year}`}>
             <FormControlLabel
               data-testid="radio-btn"
-              value={'yearly'}
-              checked={isChecked('yearly')}
+              value={'Annually'}
+              checked={isChecked('Annually')}
               control={<Radio color="primary" />}
-              label={'Yearly'}
-              className={isChecked('yearly') ? styles.Selectedlabel : styles.Label}
+              label={'Annually'}
+              className={isChecked('Annually') ? styles.Selectedlabel : styles.Label}
             />
             <div className={styles.Recommended}>One month fee waived off!</div>
           </div>
           <div className={styles.RadioLabelWrapper}>
             <FormControlLabel
               data-testid="radio-btn"
-              value={'quarterly'}
-              checked={isChecked('quarterly')}
+              value={'Quarterly'}
+              checked={isChecked('Quarterly')}
               control={<Radio color="primary" />}
               label={'Quarterly'}
-              className={isChecked('quarterly') ? styles.Selectedlabel : styles.Label}
+              className={isChecked('Quarterly') ? styles.Selectedlabel : styles.Label}
             />
           </div>
           <div className={styles.RadioLabelWrapper}>
             <FormControlLabel
               data-testid="radio-btn"
-              value={'monthly'}
-              checked={isChecked('monthly')}
+              value={'Monthly'}
+              checked={isChecked('Monthly')}
               control={<Radio color="primary" />}
               label={'Monthly'}
-              className={isChecked('monthly') ? styles.Selectedlabel : styles.Label}
+              className={isChecked('Monthly') ? styles.Selectedlabel : styles.Label}
             />
           </div>
         </RadioGroup>

src/containers/Organization/Onboarding/Steps/Address/Address.module.css

@@ -0,0 +1,45 @@
+.Label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #111;
+    line-height: 22px;
+    margin: 6px 0;
+    display: flex;
+    column-gap: 4px;
+}
+
+.Heading {
+    composes: Label;
+    font-size: 1rem;
+}
+
+.InputBox {
+    width: 100%;
+}
+
+.OutlinedInput {
+    padding: 12.5px 14px;
+}
+
+
+.AddressField {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-gap: 0.5rem;
+
+}
+
+.FullRow {
+    grid-column-start: 1;
+    grid-column-end: 3;
+}
+
+.Errors {
+    font-size: 12px;
+    margin: 0;
+    margin-left: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    color: #fb5c5c;
+}

src/containers/Organization/Onboarding/Steps/Address/Address.tsx

@@ -0,0 +1,77 @@
+import { OutlinedInput, Typography } from '@mui/material';
+import { formatString } from 'common/utils';
+import styles from './Address.module.css';
+
+interface RegisteredAddressProps {
+  inputLabel: string;
+  inputLabelSubtext: any;
+  address: any;
+  disabled: boolean;
+  form: { touched: any; errors: any; setFieldValue: any };
+  field: { name: string; value: any };
+}
+
+export const RegisteredAddress = ({
+  inputLabel,
+  address,
+  disabled,
+  inputLabelSubtext,
+  form,
+  field,
+}: RegisteredAddressProps) => {
+  const handleChange = (e: any, value: any) => {
+    form.setFieldValue(field.name, {
+      ...field.value,
+      [value]: e.target.value,
+    });
+  };
+
+  const errors = form.errors[field.name];
+  const touched = form.touched[field.name];
+
+  return (
+    <div>
+      <Typography variant="caption" className={styles.Heading} data-testid="inputLabel">
+        {inputLabel}
+        {inputLabelSubtext}
+      </Typography>
+
+      <div className={styles.AddressField}>
+        {Object.keys(address)
+          .slice(0, 2)
+          .map((key) => (
+            <div className={styles.FullRow} key={key}>
+              <p className={styles.Label}>{formatString(key)}</p>
+              <OutlinedInput
+                disabled={disabled}
+                className={styles.InputBox}
+                classes={{ input: styles.OutlinedInput }}
+                onChange={(e) => handleChange(e, key)}
+                value={field.value[key]}
+              />
+              <p className={styles.Errors}>
+                {touched && errors && touched[key] && errors[key] ? errors[key] : ''}
+              </p>
+            </div>
+          ))}
+        {Object.keys(address)
+          .slice(2)
+          .map((key) => (
+            <div className={styles.Row} key={key}>
+              <p className={styles.Label}>{formatString(key)}</p>
+              <OutlinedInput
+                disabled={disabled}
+                className={styles.InputBox}
+                classes={{ input: styles.OutlinedInput }}
+                onChange={(e) => handleChange(e, key)}
+                value={field.value[key]}
+              />
+              <p className={styles.Errors}>
+                {touched && errors && touched[key] && errors[key] ? errors[key] : ''}
+              </p>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};