chore(webapp): refactor the setup organization form to use Formik binded component

packages/webapp/src/containers/Preferences/General/GeneralForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
 import { Form } from 'formik';
-import { Button, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
+import { Button, FormGroup, Intent } from '@blueprintjs/core';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { ErrorMessage, FastField } from 'formik';
 import { useHistory } from 'react-router-dom';
@@ -54,8 +54,9 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
         labelInfo={<FieldRequiredHint />}
         inline={true}
         helperText={<T id={'shown_on_sales_forms_and_purchase_orders'} />}
+        fastField={true}
       >
-        <FInputGroup medium={'true'} name={'name'} />
+        <FInputGroup medium={'true'} name={'name'} fastField={true} />
       </FFormGroup>
 
       {/* ---------- Industry ----------  */}
@@ -63,8 +64,9 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
         name={'industry'}
         label={<T id={'organization_industry'} />}
         inline={true}
+        fastField={true}
       >
-        <FInputGroup name={'industry'} medium={'true'} />
+        <FInputGroup name={'industry'} medium={'true'} fastField={true} />
       </FFormGroup>
 
       {/* ---------- Location ---------- */}
@@ -72,6 +74,7 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
         name={'location'}
         label={<T id={'business_location'} />}
         inline={true}
+        fastField={true}
       >
         <FSelect
           name={'location'}
@@ -81,6 +84,7 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
           textAccessor={'name'}
           placeholder={<T id={'select_business_location'} />}
           popoverProps={{ minimal: true }}
+          fastField={true}
         />
       </FFormGroup>
 
@@ -109,6 +113,8 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
           popoverProps={{ minimal: true }}
           disabled={baseCurrencyDisabled}
           fastField={true}
+          shouldUpdate={shouldBaseCurrencyUpdate}
+          baseCurrencyDisabled={baseCurrencyDisabled}
         />
       </FFormGroup>
 

packages/webapp/src/containers/Setup/SetupOrganizationForm.tsx

@@ -1,18 +1,17 @@
 // @ts-nocheck
 import React from 'react';
 import { FastField, Form, ErrorMessage } from 'formik';
-import {
+import { Button, Intent, FormGroup, Classes } from '@blueprintjs/core';
-  Button,
-  Intent,
-  FormGroup,
-  MenuItem,
-  Classes,
-} from '@blueprintjs/core';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
-import { FFormGroup, FInputGroup, FormattedMessage as T } from '@/components';
+import {
+  FFormGroup,
+  FInputGroup,
+  FSelect,
+  FormattedMessage as T,
+} from '@/components';
 
-import { Col, Row, ListSelect } from '@/components';
+import { Col, Row } from '@/components';
 import { inputIntent } from '@/utils';
 
 import { getFiscalYear } from '@/constants/fiscalYearOptions';
@@ -35,152 +34,88 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
       <h3>
         <T id={'organization_details'} />
       </h3>
-
       {/* ---------- Organization name ----------  */}
-      <FFormGroup name={'name'} label={<T id={'legal_organization_name'} />}>
+      <FFormGroup
-        <FInputGroup name={'name'} />
+        name={'name'}
+        label={<T id={'legal_organization_name'} />}
+        fastField={true}
+      >
+        <FInputGroup name={'name'} fastField={true} />
       </FFormGroup>
 
       {/* ---------- Location ---------- */}
-      <FastField name={'location'}>
+      <FFormGroup
-        {({ form, field: { value }, meta: { error, touched } }) => (
+        name={'location'}
-          <FormGroup
+        label={<T id={'business_location'} />}
-            label={<T id={'business_location'} />}
+        fastField={true}
-            className={classNames(
+      >
-              'form-group--business-location',
+        <FSelect
-              Classes.FILL,
+          name={'location'}
-            )}
+          items={countries}
-            helperText={<ErrorMessage name="location" />}
+          valueAccessor={'countryCode'}
-            intent={inputIntent({ error, touched })}
+          textAccessor={'name'}
-          >
+          placeholder={<T id={'select_business_location'} />}
-            <ListSelect
+          popoverProps={{ minimal: true }}
-              items={countries}
+          fastField={true}
-              onItemSelect={({ countryCode }) => {
+        />
-                form.setFieldValue('location', countryCode);
+      </FFormGroup>
-              }}
-              selectedItem={value}
-              selectedItemProp={'countryCode'}
-              defaultText={<T id={'select_business_location'} />}
-              textProp={'name'}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
 
       <Row>
         <Col xs={6}>
           {/* ----------  Base currency ----------  */}
-          <FastField name={'baseCurrency'}>
+          <FFormGroup
-            {({
+            name={'baseCurrency'}
-              form: { setFieldValue },
+            label={<T id={'base_currency'} />}
-              field: { value },
+            fastField={true}
-              meta: { error, touched },
+          >
-            }) => (
+            <FSelect
-              <FormGroup
+              name={'baseCurrency'}
-                label={<T id={'base_currency'} />}
+              items={currencies}
-                className={classNames(
+              popoverProps={{ minimal: true }}
-                  'form-group--base-currency',
+              valueAccessor={'key'}
-                  'form-group--select-list',
+              textAccessor={'name'}
-                  Classes.FILL,
+              placeholder={<T id={'select_base_currency'} />}
-                )}
+              fastField={true}
-                intent={inputIntent({ error, touched })}
+            />
-                helperText={<ErrorMessage name={'baseCurrency'} />}
+          </FFormGroup>
-              >
-                <ListSelect
-                  items={currencies}
-                  noResults={
-                    <MenuItem disabled={true} text={<T id={'no_results'} />} />
-                  }
-                  popoverProps={{ minimal: true }}
-                  onItemSelect={(item) => {
-                    setFieldValue('baseCurrency', item.key);
-                  }}
-                  selectedItemProp={'key'}
-                  textProp={'name'}
-                  defaultText={<T id={'select_base_currency'} />}
-                  selectedItem={value}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FormGroup>
-            )}
-          </FastField>
         </Col>
 
         {/* ---------- Language ---------- */}
         <Col xs={6}>
-          <FastField name={'language'}>
+          <FFormGroup
-            {({
+            name={'language'}
-              form: { setFieldValue },
+            label={<T id={'language'} />}
-              field: { value },
+            fastField={true}
-              meta: { error, touched },
+          >
-            }) => (
+            <FSelect
-              <FormGroup
+              name={'language'}
-                label={<T id={'language'} />}
+              items={Languages}
-                className={classNames(
+              valueAccessor={'value'}
-                  'form-group--language',
+              textAccessor={'name'}
-                  'form-group--select-list',
+              placeholder={<T id={'select_language'} />}
-                  Classes.FILL,
+              popoverProps={{ minimal: true }}
-                )}
+              fastField={true}
-                intent={inputIntent({ error, touched })}
+            />
-                helperText={<ErrorMessage name={'language'} />}
+          </FFormGroup>
-              >
-                <ListSelect
-                  items={Languages}
-                  noResults={
-                    <MenuItem disabled={true} text={<T id={'no_results'} />} />
-                  }
-                  onItemSelect={(item) => {
-                    setFieldValue('language', item.value);
-                  }}
-                  selectedItem={value}
-                  textProp={'name'}
-                  selectedItemProp={'value'}
-                  defaultText={<T id={'select_language'} />}
-                  popoverProps={{ minimal: true }}
-                  filterable={false}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FormGroup>
-            )}
-          </FastField>
         </Col>
       </Row>
+
       {/* --------- Fiscal Year ----------- */}
-      <FastField name={'fiscalYear'}>
+      <FFormGroup
-        {({
+        name={'fiscalYear'}
-          form: { setFieldValue },
+        label={<T id={'fiscal_year'} />}
-          field: { value },
+        fastField={true}
-          meta: { error, touched },
+      >
-        }) => (
+        <FSelect
-          <FormGroup
+          name={'fiscalYear'}
-            label={<T id={'fiscal_year'} />}
+          items={FiscalYear}
-            className={classNames(
+          valueAccessor={'key'}
-              'form-group--fiscal_year',
+          textAccessor={'name'}
-              'form-group--select-list',
+          placeholder={<T id={'select_fiscal_year'} />}
-              Classes.FILL,
+          popoverProps={{ minimal: true }}
-            )}
+          fastField={true}
-            intent={inputIntent({ error, touched })}
+        />
-            helperText={<ErrorMessage name={'fiscalYear'} />}
+      </FFormGroup>
-          >
-            <ListSelect
-              items={FiscalYear}
-              noResults={
-                <MenuItem disabled={true} text={<T id={'no_results'} />} />
-              }
-              selectedItem={value}
-              selectedItemProp={'key'}
-              textProp={'name'}
-              defaultText={<T id={'select_fiscal_year'} />}
-              popoverProps={{ minimal: true }}
-              onItemSelect={(item) => {
-                setFieldValue('fiscalYear', item.key);
-              }}
-              filterable={false}
-            />
-          </FormGroup>
-        )}
-      </FastField>
 
       {/* ----------  Time zone ----------  */}
       <FastField name={'timezone'}>