fix(webapp): general, accoutant and items preferences

packages/webapp/src/containers/Preferences/Accountant/Accountant.schema.tsx

@@ -2,12 +2,18 @@
 import * as Yup from 'yup';
 
 const Schema = Yup.object().shape({
-  accounting_basis: Yup.string().required(),
-  account_code_required: Yup.boolean().nullable(),
-  account_code_unique: Yup.boolean().nullable(),
-  withdrawal_account: Yup.number().nullable(),
-  preferred_deposit_account: Yup.number().nullable(),
-  preferred_advance_deposit: Yup.number().nullable(),
+  organization: Yup.object({
+    accountingBasis: Yup.string().required(),
+  }),
+  accounts: Yup.object({
+    accountCodeRequired: Yup.boolean().nullable(),
+    accountCodeUnique: Yup.boolean().nullable(),
+  }),
+  paymentReceives: Yup.object({
+    preferredDepositAccount: Yup.number().nullable(),
+    preferredAdvanceDeposit: Yup.number().nullable(),
+    withdrawalAccount: Yup.number().nullable(),
+  })
 });
 
 export const AccountantSchema = Schema;

packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx

@@ -1,16 +1,9 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Form, FastField, useFormikContext } from 'formik';
+import { Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
-import {
-  FormGroup,
-  RadioGroup,
-  Radio,
-  Checkbox,
-  Button,
-  Intent,
-} from '@blueprintjs/core';
+import { FormGroup, Radio, Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 
 import {
@@ -19,8 +12,9 @@ import {
   FieldRequiredHint,
   CardFooterActions,
   FFormGroup,
+  FCheckbox,
+  FRadioGroup,
 } from '@/components';
-import { handleStringChange, inputIntent } from '@/utils';
 import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
 import { useAccountantFormContext } from './AccountantFormProvider';
 
@@ -30,7 +24,6 @@ import { useAccountantFormContext } from './AccountantFormProvider';
 export default function AccountantForm() {
   const history = useHistory();
   const { accounts } = useAccountantFormContext();
-
   const { isSubmitting } = useFormikContext();
 
   const handleCloseClick = () => {
@@ -48,78 +41,54 @@ export default function AccountantForm() {
         }
         className={'accounts-checkbox'}
       >
-        {/*------------ Account code (required) -----------*/}
-        <FastField name={'account_code_required'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Checkbox
-                inline={true}
-                label={
-                  <T
-                    id={'make_account_code_required_when_create_a_new_accounts'}
-                  />
-                }
-                name={'account_code_required'}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        {/*------------ Account Code (required) -----------*/}
+        <FFormGroup inline={true} name={'accounts.accountCodeRequired'}>
+          <FCheckbox
+            inline={true}
+            label={
+              <T id={'make_account_code_required_when_create_a_new_accounts'} />
+            }
+            name={'accounts.accountCodeRequired'}
+          />
+        </FFormGroup>
 
-        {/*------------ Account code (unique) -----------*/}
-        <FastField name={'account_code_unique'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Checkbox
-                inline={true}
-                label={
-                  <T
-                    id={
-                      'should_account_code_be_unique_when_create_a_new_account'
-                    }
-                  />
-                }
-                name={'account_code_unique'}
-                {...field}
+        {/*------------ Account Code (unique) -----------*/}
+        <FFormGroup
+          name={'accounts.accountCodeUnique'}
+          type={'checkbox'}
+          inline={true}
+        >
+          <FCheckbox
+            inline={true}
+            label={
+              <T
+                id={'should_account_code_be_unique_when_create_a_new_account'}
               />
-            </FormGroup>
-          )}
-        </FastField>
+            }
+            name={'accounts.accountCodeUnique'}
+          />
+        </FFormGroup>
       </FormGroup>
 
-      {/* ----------- Accounting basis ----------- */}
-      <FastField name={'accounting_basis'}>
-        {({
-          form: { setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            label={
-              <strong>
-                <T id={'accounting_basis_'} />
-              </strong>
-            }
-          >
-            <RadioGroup
-              inline={true}
-              selectedValue={value}
-              onChange={handleStringChange((_value) => {
-                setFieldValue('accounting_basis', _value);
-              })}
-            >
-              <Radio label={intl.get('cash')} value="cash" />
-              <Radio label={intl.get('accrual')} value="accrual" />
-            </RadioGroup>
-          </FormGroup>
-        )}
-      </FastField>
+      {/* ----------- Accounting Basis ----------- */}
+      <FormGroup
+        name={'organization.accountingBasis'}
+        labelInfo={<FieldRequiredHint />}
+        label={
+          <strong>
+            <T id={'accounting_basis_'} />
+          </strong>
+        }
+      >
+        <FRadioGroup name={'organization.accountingBasis'} inline={true}>
+          <Radio label={intl.get('cash')} value="cash" />
+          <Radio label={intl.get('accrual')} value="accrual" />
+        </FRadioGroup>
+      </FormGroup>
 
-      {/* ----------- Deposit customer account ----------- */}
+      {/* ----------- Deposit Customer Account ----------- */}
       <AccountantFormGroup
-        name={'preferred_deposit_account'}
+        name={'paymentReceives.preferredDepositAccount'}
         label={
           <strong>
             <T id={'deposit_customer_account'} />
@@ -136,7 +105,7 @@ export default function AccountantForm() {
         fastField={true}
       >
         <AccountsSelect
-          name={'preferred_deposit_account'}
+          name={'paymentReceives.preferredDepositAccount'}
           items={accounts}
           placeholder={<T id={'select_payment_account'} />}
           filterByTypes={[
@@ -148,9 +117,9 @@ export default function AccountantForm() {
         />
       </AccountantFormGroup>
 
-      {/* ----------- Withdrawal vendor account ----------- */}
+      {/* ----------- Withdrawal Vendor Account ----------- */}
       <AccountantFormGroup
-        name={'withdrawal_account'}
+        name={'billPayments.withdrawalAccount'}
         label={
           <strong>
             <T id={'withdrawal_vendor_account'} />
@@ -167,7 +136,7 @@ export default function AccountantForm() {
         fastField={true}
       >
         <AccountsSelect
-          name={'withdrawal_account'}
+          name={'billPayments.withdrawalAccount'}
           items={accounts}
           placeholder={<T id={'select_payment_account'} />}
           filterByTypes={[
@@ -179,9 +148,9 @@ export default function AccountantForm() {
         />
       </AccountantFormGroup>
 
-      {/* ----------- Withdrawal customer account ----------- */}
+      {/* ----------- Withdrawal Customer Account ----------- */}
       <AccountantFormGroup
-        name={'preferred_advance_deposit'}
+        name={'paymentReceives.preferredAdvanceDeposit'}
         label={
           <strong>
             <T id={'customer_advance_deposit'} />
@@ -198,7 +167,7 @@ export default function AccountantForm() {
         fastField={true}
       >
         <AccountsSelect
-          name={'preferred_advance_deposit'}
+          name={'paymentReceives.preferredAdvanceDeposit'}
           items={accounts}
           placeholder={<T id={'select_payment_account'} />}
           filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}

packages/webapp/src/containers/Preferences/Accountant/AccountantFormPage.tsx

@@ -1,55 +1,66 @@
 // @ts-nocheck
 import React, { useEffect } from 'react';
+import * as R from 'ramda';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
-import { pick } from 'lodash';
 import { Intent } from '@blueprintjs/core';
+import { flatten, unflatten } from 'flat';
 
 import { AppToaster } from '@/components';
-
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import withSettings from '@/containers/Settings/withSettings';
 
 import AccountantForm from './AccountantForm';
 import { AccountantSchema } from './Accountant.schema';
 import { useAccountantFormContext } from './AccountantFormProvider';
-import { transformToOptions } from './utils';
-import { compose, transformGeneralSettings } from '@/utils';
+import { transferObjectOptionsToArray } from './utils';
+import { compose, transformToForm, transfromToSnakeCase } from '@/utils';
 
 import '@/style/pages/Preferences/Accounting.scss';
 
+const defaultFormValues = flatten({
+  organization: {
+    accountingBasis: '',
+  },
+  accounts: {
+    accountCodeRequired: false,
+    accountCodeUnique: false,
+  },
+  billPayments: {
+    withdrawalAccount: '',
+  },
+  paymentReceives: {
+    preferredDepositAccount: '',
+    preferredAdvanceDeposit: '',
+  },
+});
+
 // Accountant preferences.
 function AccountantFormPage({
   //# withDashboardActions
   changePreferencesPageTitle,
 
   // #withSettings
-  organizationSettings,
-  paymentReceiveSettings,
-  accountsSettings,
-  billPaymentSettings,
+  allSettings,
 }) {
   const { saveSettingMutate } = useAccountantFormContext();
 
-  const accountantSettings = {
-    ...billPaymentSettings,
-    ...accountsSettings,
-    ...pick(organizationSettings, ['accountingBasis']),
-    ...pick(paymentReceiveSettings, ['preferredDepositAccount', 'preferredAdvanceDeposit']),
-  };
-
-  const initialValues = {
-    ...transformGeneralSettings(accountantSettings),
-  };
-
   useEffect(() => {
     changePreferencesPageTitle(intl.get('accountant'));
   }, [changePreferencesPageTitle]);
 
+  const initialValues = unflatten({
+    ...defaultFormValues,
+    ...transformToForm(flatten(allSettings), defaultFormValues),
+  });
+  // Handle the form submitting.
   const handleFormSubmit = (values, { setSubmitting }) => {
-    const options = transformToOptions(values);
-
+    const options = R.compose(
+      transferObjectOptionsToArray,
+      transfromToSnakeCase,
+    )(values);
     setSubmitting(true);
+
     const onSuccess = () => {
       AppToaster.show({
         message: intl.get('the_accountant_preferences_has_been_saved'),
@@ -57,8 +68,7 @@ function AccountantFormPage({
       });
       setSubmitting(false);
     };
-
-    const onError = (errors) => {
+    const onError = () => {
       setSubmitting(false);
     };
     saveSettingMutate({ options }).then(onSuccess).catch(onError);
@@ -75,18 +85,8 @@ function AccountantFormPage({
 }
 
 export default compose(
-  withSettings(
-    ({
-      organizationSettings,
-      paymentReceiveSettings,
-      accountsSettings,
-      billPaymentSettings,
-    }) => ({
-      organizationSettings,
-      paymentReceiveSettings,
-      accountsSettings,
-      billPaymentSettings,
-    }),
-  ),
+  withSettings(({ allSettings }) => ({
+    allSettings,
+  })),
   withDashboardActions,
 )(AccountantFormPage);

packages/webapp/src/containers/Preferences/Accountant/AccountantFormProvider.tsx

@@ -17,7 +17,7 @@ function AccountantFormProvider({ ...props }) {
   // Fetches the accounts list.
   const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
 
-  //Fetches Organization Settings.
+  // Fetches Organization Settings.
   const { isLoading: isSettingsLoading } = useSettings();
 
   // Save Organization Settings.
@@ -29,7 +29,7 @@ function AccountantFormProvider({ ...props }) {
     isAccountsLoading,
     saveSettingMutate,
   };
-
+  // Detarmines whether if any query is loading.
   const isLoading = isSettingsLoading || isAccountsLoading;
 
   return (

packages/webapp/src/containers/Preferences/Accountant/utils.tsx

@@ -1,38 +1,6 @@
 // @ts-nocheck
-export const transformToOptions = (option) => {
-  return [
-    {
-      key: 'accounting_basis',
-      value: option.accounting_basis,
-      group: 'organization',
-    },
-    {
-      key: 'withdrawal_account',
-      value: option.withdrawal_account,
-      group: 'bill_payments',
-    },
-    {
-      key: 'preferred_deposit_account',
-      value: option.preferred_deposit_account,
-      group: 'payment_receives',
-    },
-    {
-      key: 'preferred_advance_deposit',
-      value: option.preferred_advance_deposit,
-      group: 'payment_receives',
-    },
-    {
-      key: 'account_code_required',
-      value: option.account_code_required,
-      group: 'accounts',
-    },
-    {
-      
-      key: 'account_code_unique',
-      value: option.account_code_unique,
-      group: 'accounts',
-    },
-  ];
-};
-
 
+export const transferObjectOptionsToArray = (input) =>
+  Object.entries(input).flatMap(([group, options]) =>
+    Object.entries(options).map(([key, value]) => ({ group, key, value })),
+  );