fix(preferences): currencies preferences.

client/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.js

@@ -2,7 +2,9 @@ import React from 'react';
 import { Classes, FormGroup, InputGroup } from '@blueprintjs/core';
 import { FastField } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
 
+import { CLASSES } from 'common/classes';
 import { useCurrencyFormContext } from './CurrencyFormProvider';
 import { ErrorMessage, FieldRequiredHint, ListSelect } from 'components';
 
@@ -25,7 +27,7 @@ export default function CurrencyFormFields() {
           field: { value },
           meta: { error, touched },
         }) => (
-          <FormGroup label={'Currency code'}>
+          <FormGroup label={'Currency code'} className={classNames(CLASSES.FILL, 'form-group--type')}>
             <ListSelect
               items={currenciesOptions}
               selectedItemProp={'currency_code'}
@@ -38,6 +40,7 @@ export default function CurrencyFormFields() {
                 setFieldValue('currency_sign', currency.symbol);
               }}
               disabled={isEditMode}
+              popoverProps={{ minimal: true }}
             />
           </FormGroup>
         )}

client/src/containers/Dialogs/CurrencyFormDialog/index.js

@@ -30,7 +30,7 @@ function CurrencyFormDialog({
       isOpen={isOpen}
       autoFocus={true}
       canEscapeKeyClose={true}
-      style={{ width: '450px' }}
+      style={{ width: '400px' }}
     >
       <DialogSuspense>
         <CurrencyFormDialogContent

client/src/containers/Preferences/Accountant/AccountantForm.js

@@ -11,11 +11,13 @@ import {
 import { useHistory } from 'react-router-dom';
 import { AccountsSelectList, FieldRequiredHint } from 'components';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { ACCOUNT_PARENT_TYPE } from 'common/accountTypes';
 import { handleStringChange, inputIntent } from 'utils';
 
 import { useAccountantFormContext } from './AccountantFormProvider';
 
+/**
+ * Accountant form.
+ */
 export default function AccountantForm() {
   const history = useHistory();
 

client/src/containers/Preferences/Accountant/AccountantFormPage.js

@@ -1,9 +1,8 @@
 import React, { useEffect } from 'react';
-import classNames from 'classnames';
 import { Formik } from 'formik';
 import { pick } from 'lodash';
 import { Intent } from '@blueprintjs/core';
-import { CLASSES } from 'common/classes';
+
 import { AppToaster } from 'components';
 import { useIntl } from 'react-intl';
 
@@ -50,6 +49,7 @@ function AccountantFormPage({
 
   const handleFormSubmit = (values, { setSubmitting }) => {
     const options = transformToOptions(values);
+
     setSubmitting(true);
     const onSuccess = () => {
       AppToaster.show({
@@ -68,21 +68,12 @@ function AccountantFormPage({
   };
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
-      )}
-    >
-      <div className={classNames(CLASSES.CARD)}>
     <Formik
       initialValues={initialValues}
       validationSchema={AccountantSchema}
       onSubmit={handleFormSubmit}
       component={AccountantForm}
     />
-      </div>
-    </div>
   );
 }
 

client/src/containers/Preferences/Accountant/AccountantFormProvider.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import { LoadingIndicator } from 'components';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 import { useAccounts, useSaveSettings, useSettings } from 'hooks/query';
+import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const AccountantFormContext = React.createContext();
 
@@ -24,10 +26,23 @@ function AccountantFormProvider({ ...props }) {
     saveSettingMutate,
   };
 
+  const isLoading = isSettingsLoading || isAccountsLoading;
+
   return (
-    <LoadingIndicator loading={isSettingsLoading || isAccountsLoading}>
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
+      )}
+    >
+      <div className={classNames(CLASSES.CARD)}>
+        {isLoading ? (
+          <PreferencesPageLoader />
+        ) : (
           <AccountantFormContext.Provider value={provider} {...props} />
-    </LoadingIndicator>
+        )}
+      </div>
+    </div>
   );
 }
 

client/src/containers/Preferences/General/GeneralForm.js

@@ -59,7 +59,9 @@ export default function PreferencesGeneralForm({}) {
             inline={true}
             intent={inputIntent({ error, touched })}
             className={classNames('form-group--select-list', CLASSES.FILL)}
-          helperText={'For reporting, you can specify any month as the start of your financial year (also called your financial reporting year or accounting year).'}
+            helperText={
+              'For reporting, you can specify any month as the start of your financial year (also called your financial reporting year or accounting year).'
+            }
           >
             <DateInput
               {...momentFormatter('MMMM Do YYYY')}
@@ -122,7 +124,9 @@ export default function PreferencesGeneralForm({}) {
             className={classNames('form-group--base-currency', CLASSES.FILL)}
             inline={true}
             intent={inputIntent({ error, touched })}
-          helperText={"You can't change the base currency as there are transactions recorded in your organization."}
+            helperText={
+              "You can't change the base currency as there are transactions recorded in your organization."
+            }
           >
             <ListSelect
               items={currencies}

client/src/containers/Preferences/General/GeneralFormPage.js

@@ -2,9 +2,7 @@ import React, { useEffect } from 'react';
 import { Formik } from 'formik';
 import { mapKeys, snakeCase } from 'lodash';
 import { Intent } from '@blueprintjs/core';
-import classNames from 'classnames';
 import { useIntl } from 'react-intl';
-import { CLASSES } from 'common/classes';
 
 import { AppToaster } from 'components';
 import GeneralForm from './GeneralForm';
@@ -46,6 +44,7 @@ function GeneralFormPage({
     const options = optionsMapToArray(values).map((option) => {
       return { key: option.key, ...option, group: 'organization' };
     });
+    // Handle request success.
     const onSuccess = (response) => {
       AppToaster.show({
         message: 'The general preferences has been saved.',
@@ -54,6 +53,7 @@ function GeneralFormPage({
       setSubmitting(false);
       resetForm();
     };
+    // Handle request error.
     const onError = (errors) => {
       setSubmitting(false);
     };
@@ -61,21 +61,12 @@ function GeneralFormPage({
   };
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
-      )}
-    >
-      <div className={classNames(CLASSES.CARD)}>
     <Formik
       initialValues={initialValues}
       validationSchema={PreferencesGeneralSchema}
       onSubmit={handleFormSubmit}
       component={GeneralForm}
     />
-      </div>
-    </div>
   );
 }
 

client/src/containers/Preferences/General/GeneralFormProvider.js

@@ -1,6 +1,8 @@
 import React, { createContext } from 'react';
-import { LoadingIndicator } from 'components';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 import { useSaveSettings, useSettings } from 'hooks/query';
+import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const GeneralFormContext = createContext();
 
@@ -8,8 +10,8 @@ const GeneralFormContext = createContext();
  * General form provider.
  */
 function GeneralFormProvider({ ...props }) {
-  //Fetches Organization Settings.
+  // Fetches Organization Settings.
-  const { isFetching: isSettingsLoading } = useSettings();
+  const { isLoading: isSettingsLoading } = useSettings();
 
   // Save Organization Settings.
   const { mutateAsync: saveSettingMutate } = useSaveSettings();
@@ -20,10 +22,23 @@ function GeneralFormProvider({ ...props }) {
     saveSettingMutate,
   };
 
+  const loading = isSettingsLoading;
+
   return (
-    <LoadingIndicator loading={isSettingsLoading} spinnerSize={28}>
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
+      )}
+    >
+      <div className={classNames(CLASSES.CARD)}>
+        {loading ? (
+          <PreferencesPageLoader />
+        ) : (
           <GeneralFormContext.Provider value={provider} {...props} />
-    </LoadingIndicator>
+        )}
+      </div>
+    </div>
   );
 }
 

client/src/containers/Preferences/Item/Item.schema.js

@@ -1,9 +1,9 @@
 import * as Yup from 'yup';
 
 const Schema = Yup.object().shape({
-  sell_account: Yup.number().nullable().required(),
+  sell_account: Yup.number().nullable(),
-  cost_account: Yup.number().nullable().required(),
+  cost_account: Yup.number().nullable(),
-  inventory_account: Yup.number().nullable().required(),
+  inventory_account: Yup.number().nullable(),
 });
 
 export const ItemPreferencesSchema = Schema;

client/src/containers/Preferences/Item/ItemFormPage.js

@@ -1,8 +1,6 @@
 import React, { useEffect } from 'react';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
 import { AppToaster } from 'components';
 import { useIntl } from 'react-intl';
 import { ItemPreferencesSchema } from './Item.schema';
@@ -19,24 +17,28 @@ import 'style/pages/Preferences/Accounting.scss';
 function ItemFormPage({
   // #withSettings
   itemsSettings,
-  //# withDashboardActions
+
+  // #withDashboardActions
   changePreferencesPageTitle,
 }) {
   const { formatMessage } = useIntl();
   const { saveSettingMutate } = useItemFormContext();
 
   const initialValues = {
+    sell_account: '',
+    cost_account: '',
+    inventory_account: '',
     ...transformGeneralSettings(itemsSettings),
   };
 
   useEffect(() => {
     changePreferencesPageTitle(formatMessage({ id: 'items' }));
-  }, [changePreferencesPageTitle]);
+  }, [formatMessage, changePreferencesPageTitle]);
 
+  // Handle form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
-    const options = optionsMapToArray(values).map((option) => {
+    const options = optionsMapToArray(values)
-      return { key: option.key, ...option, group: 'items' };
+      .map((option) => ({ ...option, group: 'items' }));
-    });
 
     const onSuccess = () => {
       AppToaster.show({
@@ -55,21 +57,12 @@ function ItemFormPage({
   };
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
-      )}
-    >
-      <div className={classNames(CLASSES.CARD)}>
     <Formik
       initialValues={initialValues}
       validationSchema={ItemPreferencesSchema}
       onSubmit={handleFormSubmit}
       component={ItemForm}
     />
-      </div>
-    </div>
   );
 }
 

client/src/containers/Preferences/Item/ItemFormProvider.js

@@ -1,7 +1,9 @@
 import React, { useContext, createContext } from 'react';
-import { LoadingIndicator } from 'components';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 
 import { useAccounts, useSaveSettings } from 'hooks/query';
+import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const ItemFormContext = createContext();
 
@@ -22,10 +24,23 @@ function ItemFormProvider({ ...props }) {
     saveSettingMutate,
   };
 
+  const isLoading = isAccountsLoading;
+
   return (
-    <LoadingIndicator loading={isAccountsLoading}>
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
+      )}
+    >
+      <div className={classNames(CLASSES.CARD)}>
+        {isLoading ? (
+          <PreferencesPageLoader />
+        ) : (
           <ItemFormContext.Provider value={provider} {...props} />
-    </LoadingIndicator>
+        )}
+      </div>
+    </div>
   );
 }
 

client/src/containers/Preferences/PreferencesPageLoader.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export default function PreferencesPageLoader(props) {
+  return (
+    <ContentLoader
+      speed={2}
+      width={400}
+      height={250}
+      viewBox="0 0 400 250"
+      backgroundColor="#f3f3f3"
+      foregroundColor="#e6e6e6"
+      {...props}
+    >
+      <rect x="0" y="82" rx="2" ry="2" width="200" height="20" />
+      <rect x="0" y="112" rx="2" ry="2" width="385" height="30" />
+      <rect x="0" y="0" rx="2" ry="2" width="200" height="20" />
+      <rect x="-1" y="30" rx="2" ry="2" width="385" height="30" />
+      <rect x="0" y="164" rx="2" ry="2" width="200" height="20" />
+      <rect x="0" y="194" rx="2" ry="2" width="385" height="30" />
+    </ContentLoader>
+  );
+}

client/src/style/pages/Currency/CurrencyFormDialog.scss

@@ -1,5 +1,7 @@
 .dialog--currency-form {
   .bp3-dialog-body {
+    margin-bottom: 30px;
+
     .bp3-form-group.bp3-inline {
       .bp3-label {
         min-width: 140px;

server/src/api/controllers/Settings.ts

@@ -41,7 +41,7 @@ export default class SettingsController extends BaseController {
     return [
       body('options').isArray({ min: 1 }),
       body('options.*.key').exists().trim().isLength({ min: 1 }),
-      body('options.*.value').exists().trim().isLength({ min: 1 }),
+      body('options.*.value').exists().trim(),
       body('options.*.group').exists().trim().isLength({ min: 1 }),
     ];
   }

server/src/database/seeds/core/20200810121809_seed_settings.js

@@ -5,6 +5,12 @@ exports.up = (knex) => {
   const tenancyService = Container.get(TenancyService);
   const settings = tenancyService.settings(knex.userParams.tenantId);
 
+  // Orgnization settings.
+  settings.set({ group: 'organization', key: 'accounting_basis', value: 'accural' });
+
+  // Accounts settings.
+  settings.set({ group: 'accounts', key: 'account_code_unique', value: true });
+
   // Manual journals settings.
   settings.set({ group: 'manual_journals', key: 'next_number', value: '00001' });
   settings.set({ group: 'manual_journals', key: 'auto_increment', value: true });

server/src/services/Currencies/CurrenciesService.ts

@@ -261,6 +261,7 @@ export default class CurrenciesService implements ICurrenciesService {
       await Currency.query().insert({
         currency_code: currencyMeta.code,
         currency_name: currencyMeta.name,
+        currency_sign: currencyMeta.symbol,
       });
     }
   }