re-structure to monorepo.

packages/webapp/src/containers/Preferences/Item/ItemPreferences.schema.tsx

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+
+const Schema = Yup.object().shape({
+  preferred_sell_account: Yup.number().nullable(),
+  preferred_cost_account: Yup.number().nullable(),
+  preferred_inventory_account: Yup.number().nullable(),
+});
+
+export const ItemPreferencesSchema = Schema;

packages/webapp/src/containers/Preferences/Item/ItemPreferencesForm.tsx

@@ -0,0 +1,150 @@
+// @ts-nocheck
+import React from 'react';
+import { Form, FastField, useFormikContext } from 'formik';
+import { FormGroup, Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import {
+  AccountsSelectList,
+  FieldRequiredHint,
+  FormattedMessage as T,
+  CardFooterActions
+} from '@/components';
+import { inputIntent } from '@/utils';
+import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
+
+import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider';
+
+/**
+ * Item preferences form.
+ */
+export default function ItemForm() {
+  const history = useHistory();
+  const { accounts } = useItemPreferencesFormContext();
+
+  const { isSubmitting } = useFormikContext();
+
+  const handleCloseClick = () => {
+    history.go(-1);
+  };
+
+  return (
+    <Form>
+      {/* ----------- preferred sell account ----------- */}
+      <FastField name={'preferred_sell_account'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={
+              <strong>
+                <T id={'preferred_sell_account'} />
+              </strong>
+            }
+            helperText={
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
+                }
+              />
+            }
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+          >
+            <AccountsSelectList
+              accounts={accounts}
+              onAccountSelected={({ id }) => {
+                setFieldValue('preferred_sell_account', id);
+              }}
+              selectedAccountId={value}
+              defaultSelectText={<T id={'select_payment_account'} />}
+              filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- preferred cost account ----------- */}
+      <FastField name={'preferred_cost_account'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={
+              <strong>
+                <T id={'preferred_cost_account'} />
+              </strong>
+            }
+            helperText={
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
+                }
+              />
+            }
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+          >
+            <AccountsSelectList
+              accounts={accounts}
+              onAccountSelected={({ id }) => {
+                setFieldValue('preferred_cost_account', id);
+              }}
+              selectedAccountId={value}
+              defaultSelectText={<T id={'select_payment_account'} />}
+              filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- preferred inventory account ----------- */}
+      <FastField name={'preferred_inventory_account'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={
+              <strong>
+                <T id={'preferred_inventory_account'} />
+              </strong>
+            }
+            helperText={
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
+                }
+              />
+            }
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+          >
+            <AccountsSelectList
+              accounts={accounts}
+              onAccountSelected={({ id }) => {
+                setFieldValue('preferred_inventory_account', id);
+              }}
+              selectedAccountId={value}
+              defaultSelectText={<T id={'select_payment_account'} />}
+              filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <CardFooterActions>
+        <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
+          <T id={'save'} />
+        </Button>
+        <Button onClick={handleCloseClick} disabled={isSubmitting}>
+          <T id={'close'} />
+        </Button>
+      </CardFooterActions>
+    </Form>
+  );
+}

packages/webapp/src/containers/Preferences/Item/ItemPreferencesFormPage.tsx

@@ -0,0 +1,78 @@
+// @ts-nocheck
+import React, { useEffect } from 'react';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from '@/components';
+import { omit } from 'lodash';
+import { ItemPreferencesSchema } from './ItemPreferences.schema';
+import ItemPreferencesForm from './ItemPreferencesForm';
+
+import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withSettings from '@/containers/Settings/withSettings';
+import { compose, optionsMapToArray, transformGeneralSettings } from '@/utils';
+
+import '@/style/pages/Preferences/Accounting.scss';
+
+// item form page preferences.
+function ItemPreferencesFormPage({
+  // #withSettings
+  itemsSettings,
+
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  const { saveSettingMutate } = useItemPreferencesFormContext();
+
+  const itemPerferencesSettings = {
+    ...omit(itemsSettings, ['tableSize']),
+  };
+
+  // Initial values.
+  const initialValues = {
+    preferred_sell_account: '',
+    preferred_cost_account: '',
+    preferred_inventory_account: '',
+    ...transformGeneralSettings(itemPerferencesSettings),
+  };
+
+  useEffect(() => {
+    changePreferencesPageTitle(intl.get('items'));
+  }, [changePreferencesPageTitle]);
+
+  // Handle form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const options = optionsMapToArray(values).map((option) => ({
+      ...option,
+      group: 'items',
+    }));
+
+    const onSuccess = () => {
+      AppToaster.show({
+        message: intl.get('the_items_preferences_has_been_saved'),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+    };
+
+    const onError = (errors) => {
+      setSubmitting(false);
+    };
+    saveSettingMutate({ options }).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={ItemPreferencesSchema}
+      onSubmit={handleFormSubmit}
+      component={ItemPreferencesForm}
+    />
+  );
+}
+
+export default compose(
+  withSettings(({ itemsSettings }) => ({ itemsSettings })),
+  withDashboardActions,
+)(ItemPreferencesFormPage);

packages/webapp/src/containers/Preferences/Item/ItemPreferencesFormProvider.tsx

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import React, { useContext, createContext } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { CLASSES } from '@/constants/classes';
+import { Card } from '@/components';
+import { useSettingsItems, useAccounts, useSaveSettings } from '@/hooks/query';
+import PreferencesPageLoader from '../PreferencesPageLoader';
+
+const ItemFormContext = createContext();
+
+/**
+ * Item data provider.
+ */
+
+function ItemPreferencesFormProvider({ ...props }) {
+  // Fetches the accounts list.
+  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
+
+  const {
+    isLoading: isItemsSettingsLoading,
+    isFetching: isItemsSettingsFetching,
+  } = useSettingsItems();
+
+  // Save Organization Settings.
+  const { mutateAsync: saveSettingMutate } = useSaveSettings();
+
+  // Provider state.
+  const provider = {
+    accounts,
+    saveSettingMutate,
+  };
+
+  const isLoading = isAccountsLoading || isItemsSettingsLoading;
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
+      )}
+    >
+      <ItemsPreferencesCard>
+        {isLoading ? (
+          <PreferencesPageLoader />
+        ) : (
+          <ItemFormContext.Provider value={provider} {...props} />
+        )}
+      </ItemsPreferencesCard>
+    </div>
+  );
+}
+
+const useItemPreferencesFormContext = () => useContext(ItemFormContext);
+
+export { useItemPreferencesFormContext, ItemPreferencesFormProvider };
+
+const ItemsPreferencesCard = styled(Card)`
+  padding: 25px;
+`;

packages/webapp/src/containers/Preferences/Item/index.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import React from 'react';
+import ItemPreferencesFormPage from './ItemPreferencesFormPage';
+import { ItemPreferencesFormProvider } from './ItemPreferencesFormProvider';
+
+/**
+ * items preferences.
+ */
+export default function ItemsPreferences() {
+  return (
+    <ItemPreferencesFormProvider>
+      <ItemPreferencesFormPage />
+    </ItemPreferencesFormProvider>
+  );
+}