wip

packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx

@@ -1,76 +1,44 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
-import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
-import { inputIntent } from '@/utils';
+import { ControlGroup } from '@blueprintjs/core';
+import { FormattedMessage as T, FFormGroup, FInputGroup } from '@/components';
 
 /**
  * Vendor form  after primary section.
  */
 function VendorFormAfterPrimarySection() {
-  
-
   return (
-    <div class="customer-form__after-primary-section-content">
+    <div className={'customer-form__after-primary-section-content'}>
       {/*------------ Vendor email -----------*/}
-      <FastField name={'email'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'email'} />}
-            className={'form-group--email'}
-            label={<T id={'vendor_email'} />}
-            inline={true}
-          >
-            <InputGroup {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'email'}
+        label={<T id={'vendor_email'} />}
+        inline={true}
+      >
+        <FInputGroup name={'email'} />
+      </FFormGroup>
 
       {/*------------ Phone number -----------*/}
-      <FormGroup
+      <FFormGroup
+        name={'work_phone'}
         className={'form-group--phone-number'}
         label={<T id={'phone_number'} />}
         inline={true}
       >
         <ControlGroup>
-          <FastField name={'work_phone'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                intent={inputIntent({ error, touched })}
-                placeholder={intl.get('work')}
-                {...field}
-              />
-            )}
-          </FastField>
-          <FastField name={'personal_phone'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                intent={inputIntent({ error, touched })}
-                placeholder={intl.get('mobile')}
-                {...field}
-              />
-            )}
-          </FastField>
+          <FInputGroup name={'work_phone'} placeholder={intl.get('work')} />
+          <FInputGroup
+            name={'personal_phone'}
+            placeholder={intl.get('mobile')}
+          />
         </ControlGroup>
-      </FormGroup>
+      </FFormGroup>
 
       {/*------------ Vendor website -----------*/}
-      <FastField name={'website'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'website'} />}
-            className={'form-group--website'}
-            label={<T id={'website'} />}
-            inline={true}
-          >
-            <InputGroup placeholder={'http://'} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'website'} label={<T id={'website'} />} inline={true}>
+        <FInputGroup name={'website'} placeholder={'http://'} />
+      </FFormGroup>
     </div>
   );
 }

packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx

@@ -2,18 +2,18 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
-import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
-import { FastField, Field, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
-import { CLASSES } from '@/constants/classes';
-import { inputIntent } from '@/utils';
-import { useAutofocus } from '@/hooks';
+import { ControlGroup } from '@blueprintjs/core';
 import {
+  FormattedMessage as T,
+  FFormGroup,
+  FInputGroup,
   Hint,
   FieldRequiredHint,
   SalutationList,
   DisplayNameList,
 } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import { useAutofocus } from '@/hooks';
 
 /**
  * Vendor form primary section.
@@ -24,99 +24,58 @@ function VendorFormPrimarySection() {
   return (
     <div className={'customer-form__primary-section-content'}>
       {/**----------- Vendor name -----------*/}
-      <FormGroup
+      <FFormGroup
+        name={'salutation'}
         className={classNames('form-group--contact_name')}
         label={<T id={'contact_name'} />}
         inline={true}
       >
         <ControlGroup>
-          <FastField name={'salutation'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <SalutationList
-                onItemSelect={(salutation) => {
-                  form.setFieldValue('salutation', salutation.label);
-                }}
-                selectedItem={value}
-                popoverProps={{ minimal: true }}
-                className={classNames(
-                  CLASSES.FORM_GROUP_LIST_SELECT,
-                  CLASSES.FILL,
-                  'input-group--salutation-list',
-                  'select-list--fill-button',
-                )}
-              />
-            )}
-          </FastField>
-
-          <FastField name={'first_name'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                placeholder={intl.get('first_name')}
-                intent={inputIntent({ error, touched })}
-                className={classNames('input-group--first-name')}
-                inputRef={(ref) => (firstNameFieldRef.current = ref)}
-                {...field}
-              />
-            )}
-          </FastField>
-
-          <FastField name={'last_name'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                placeholder={intl.get('last_name')}
-                intent={inputIntent({ error, touched })}
-                className={classNames('input-group--last-name')}
-                {...field}
-              />
-            )}
-          </FastField>
+          <SalutationList
+            name={'salutation'}
+            popoverProps={{ minimal: true }}
+          />
+          <FInputGroup
+            name={'first_name'}
+            placeholder={intl.get('first_name')}
+            className={classNames('input-group--first-name')}
+            inputRef={(ref) => (firstNameFieldRef.current = ref)}
+          />
+          <FInputGroup
+            name={'last_name'}
+            placeholder={intl.get('last_name')}
+            className={classNames('input-group--last-name')}
+          />
         </ControlGroup>
-      </FormGroup>
+      </FFormGroup>
 
       {/*----------- Company Name -----------*/}
-      <FastField name={'company_name'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            className={classNames('form-group--company_name')}
-            label={<T id={'company_name'} />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'company_name'} />}
-            inline={true}
-          >
-            <InputGroup {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'company_name'}
+        className={classNames('form-group--company_name')}
+        label={<T id={'company_name'} />}
+        inline={true}
+      >
+        <FInputGroup name={'company_name'} />
+      </FFormGroup>
       {/*----------- Display Name -----------*/}
-      <Field name={'display_name'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            helperText={<ErrorMessage name={'display_name'} />}
-            intent={inputIntent({ error, touched })}
-            label={
-              <>
-                <T id={'display_name'} />
-                <FieldRequiredHint />
-                <Hint />
-              </>
-            }
-            className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
-            inline={true}
-          >
-            <DisplayNameList
-              firstName={form.values.first_name}
-              lastName={form.values.last_name}
-              company={form.values.company_name}
-              salutation={form.values.salutation}
-              onItemSelect={(displayName) => {
-                form.setFieldValue('display_name', displayName.label);
-              }}
-              selectedItem={value}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </Field>
+      <FFormGroup
+        name={'display_name'}
+        label={
+          <>
+            <T id={'display_name'} />
+            <FieldRequiredHint />
+            <Hint />
+          </>
+        }
+        className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
+        inline={true}
+      >
+        <DisplayNameList
+          name={'display_name'}
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
     </div>
   );
 }