BC-5 fix: general tab of preferences form submitting.

client/src/containers/Homepage/Homepage.js

@@ -2,14 +2,25 @@ import React, { useEffect } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 import HomepageContent from './HomepageContent';
+
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../Organization/withCurrentOrganization';
+
 import { compose } from 'utils';
 
-function DashboardHomepage({ changePageTitle, name }) {
+/**
+ * Dashboard homepage.
+ */
+function DashboardHomepage({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withCurrentOrganization
+  organization,
+}) {
   useEffect(() => {
-    changePageTitle(name);
-  }, [name, changePageTitle]);
+    changePageTitle(organization.name);
+  }, [organization.name, changePageTitle]);
 
   return (
     <DashboardInsider name="homepage">
@@ -20,7 +31,5 @@ function DashboardHomepage({ changePageTitle, name }) {
 
 export default compose(
   withDashboardActions,
-  withSettings(({ organizationSettings }) => ({
-    name: organizationSettings.name,
-  })),
+  withCurrentOrganization(({ organization }) => ({ organization })),
 )(DashboardHomepage);

client/src/containers/Organization/withCurrentOrganization.js

@@ -1,12 +1,16 @@
 import { connect } from 'react-redux';
+import { getCurrentOrganizationFactory } from '../../store/authentication/authentication.selectors';
 
 export default (mapState) => {
+  const getCurrentOrganization = getCurrentOrganizationFactory();
+
   const mapStateToProps = (state, props) => {
     const mapped = {
       organizationTenantId: state.authentication.organizationId,
       organizationId: state.authentication.organization,
+      organization: getCurrentOrganization(state, props),
     };
-    return (mapState) ? mapState(mapped, state, props) : mapped;
+    return mapState ? mapState(mapped, state, props) : mapped;
   };
   return connect(mapStateToProps);
-};
+};

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

@@ -5,9 +5,6 @@ const Schema = Yup.object().shape({
   name: Yup.string()
     .required()
     .label(intl.get('organization_name_')),
-  financial_date_start: Yup.date()
-    .required()
-    .label(intl.get('date_start_')),
   industry: Yup.string()
     .nullable()
     .label(intl.get('organization_industry_')),
@@ -23,7 +20,7 @@ const Schema = Yup.object().shape({
   language: Yup.string()
     .required()
     .label(intl.get('language')),
-  time_zone: Yup.string()
+  timezone: Yup.string()
     .required()
     .label(intl.get('time_zone_')),
   date_format: Yup.string()

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

@@ -1,42 +1,35 @@
 import { Form } from 'formik';
 import React from 'react';
-import {
-  Button,
-  FormGroup,
-  InputGroup,
-  Intent,
-  Position,
-} from '@blueprintjs/core';
+import { Button, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { ErrorMessage, FastField } from 'formik';
-import { DateInput } from '@blueprintjs/datetime';
 import { useHistory } from 'react-router-dom';
 
 import { FormattedMessage as T } from 'components';
 import { ListSelect, FieldRequiredHint } from 'components';
-import {
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-} from 'utils';
+import { inputIntent } from 'utils';
 import { CLASSES } from 'common/classes';
 import { getCountries } from 'common/countries';
-import { getCurrencies } from 'common/currencies';
+import { getAllCurrenciesOptions } from 'common/currencies';
 import { getFiscalYear } from 'common/fiscalYearOptions';
 import { getLanguages } from 'common/languagesOptions';
-import { getDateFormats } from 'common/dateFormatsOptions';
+import { useGeneralFormContext } from './GeneralFormProvider';
 
-export default function PreferencesGeneralForm({}) {
+/**
+ * Preferences general form.
+ */
+export default function PreferencesGeneralForm({ isSubmitting }) {
   const history = useHistory();
 
   const FiscalYear = getFiscalYear();
   const Countries = getCountries();
   const Languages = getLanguages();
-  const Currencies = getCurrencies();
-  const DataFormats = getDateFormats();
+  const Currencies = getAllCurrenciesOptions();
 
+  const { dateFormats } = useGeneralFormContext();
+
+  // Handle close click.
   const handleCloseClick = () => {
     history.go(-1);
   };
@@ -59,29 +52,7 @@ export default function PreferencesGeneralForm({}) {
         )}
       </FastField>
 
-      {/* ---------- Financial starting date ----------  */}
-      <FastField name={'financial_date_start'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'financial_starting_date'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            intent={inputIntent({ error, touched })}
-            className={classNames('form-group--select-list', CLASSES.FILL)}
-            helperText={<T id={'for_reporting_you_can_specify_any_month'} />}
-          >
-            <DateInput
-              {...momentFormatter('MMMM Do YYYY')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('financial_date_start', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-
+      {/* ---------- Industry ----------  */}
       <FastField name={'industry'}>
         {({ field, meta: { error, touched } }) => (
           <FormGroup
@@ -147,10 +118,10 @@ export default function PreferencesGeneralForm({}) {
                 form.setFieldValue('base_currency', currency.code);
               }}
               selectedItem={value}
-              selectedItemProp={'code'}
+              selectedItemProp={'key'}
               defaultText={<T id={'select_base_currency'} />}
               textProp={'name'}
-              labelProp={'code'}
+              labelProp={'key'}
               popoverProps={{ minimal: true }}
             />
           </FormGroup>
@@ -165,8 +136,8 @@ export default function PreferencesGeneralForm({}) {
             labelInfo={<FieldRequiredHint />}
             className={classNames('form-group--fiscal-year', CLASSES.FILL)}
             inline={true}
-            helperText={<ErrorMessage name="fiscal_year" />}
             intent={inputIntent({ error, touched })}
+            helperText={<T id={'for_reporting_you_can_specify_any_month'} />}
           >
             <ListSelect
               items={FiscalYear}
@@ -174,7 +145,7 @@ export default function PreferencesGeneralForm({}) {
                 form.setFieldValue('fiscal_year', value)
               }
               selectedItem={value}
-              selectedItemProp={'value'}
+              selectedItemProp={'key'}
               defaultText={<T id={'select_fiscal_year'} />}
               textProp={'name'}
               popoverProps={{ minimal: true }}
@@ -210,7 +181,7 @@ export default function PreferencesGeneralForm({}) {
       </FastField>
 
       {/* ----------  Time zone ----------  */}
-      <FastField name={'time_zone'}>
+      <FastField name={'timezone'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'time_zone'} />}
@@ -222,12 +193,12 @@ export default function PreferencesGeneralForm({}) {
               CLASSES.FILL,
             )}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="time_zone" />}
+            helperText={<ErrorMessage name="timezone" />}
           >
             <TimezonePicker
               value={value}
               onChange={(timezone) => {
-                form.setFieldValue('time_zone', timezone);
+                form.setFieldValue('timezone', timezone);
               }}
               valueDisplayFormat="composite"
               placeholder={<T id={'select_time_zone'} />}
@@ -248,15 +219,14 @@ export default function PreferencesGeneralForm({}) {
             helperText={<ErrorMessage name="date_format" />}
           >
             <ListSelect
-              items={DataFormats}
+              items={dateFormats}
               onItemSelect={(dateFormat) => {
-                form.setFieldValue('date_format', dateFormat.value);
+                form.setFieldValue('date_format', dateFormat.key);
               }}
               selectedItem={value}
-              selectedItemProp={'value'}
+              selectedItemProp={'key'}
               defaultText={<T id={'select_date_format'} />}
-              textProp={'name'}
-              labelProp={'label'}
+              textProp={'label'}
               popoverProps={{ minimal: true }}
             />
           </FormGroup>
@@ -264,7 +234,7 @@ export default function PreferencesGeneralForm({}) {
       </FastField>
 
       <div className={'card__footer'}>
-        <Button intent={Intent.PRIMARY} type="submit">
+        <Button loading={isSubmitting} intent={Intent.PRIMARY} type="submit">
           <T id={'save'} />
         </Button>
         <Button onClick={handleCloseClick}>

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

@@ -1,53 +1,53 @@
 import React, { useEffect } from 'react';
 import { Formik } from 'formik';
-import { mapKeys, snakeCase } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
+import 'style/pages/Preferences/GeneralForm.scss';
+
 import { AppToaster } from 'components';
 import GeneralForm from './GeneralForm';
 import { PreferencesGeneralSchema } from './General.schema';
 import { useGeneralFormContext } from './GeneralFormProvider';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withSettings from 'containers/Settings/withSettings';
 
-import { compose, optionsMapToArray } from 'utils';
+import { compose } from 'utils';
+import { transformToForm } from '../../../utils';
 
-import 'style/pages/Preferences/GeneralForm.scss';
+const defaultValues = {
+  name: '',
+  industry: '',
+  location: '',
+  base_currency: '',
+  language: '',
+  fiscal_year: '',
+  date_format: '',
+  timezone: '',
+};
 
 /**
  * Preferences - General form Page.
  */
 function GeneralFormPage({
-  // #withSettings
-  organizationSettings,
-
-  //# withDashboardActions
+  // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-  
-  const { saveSettingMutate } = useGeneralFormContext();
+  const { updateOrganization, organization } = useGeneralFormContext();
 
   useEffect(() => {
     changePreferencesPageTitle(intl.get('general'));
   }, [changePreferencesPageTitle]);
 
-  function transformGeneralSettings(data) {
-    return mapKeys(data, (value, key) => snakeCase(key));
-  }
-
+  // Initial values.
   const initialValues = {
-    ...transformGeneralSettings(organizationSettings),
+    ...transformToForm(organization.metadata, defaultValues),
   };
 
   const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
-    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.',
+        message: intl.get('preferences.general.success_message'),
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
@@ -57,7 +57,9 @@ function GeneralFormPage({
     const onError = (errors) => {
       setSubmitting(false);
     };
-    saveSettingMutate({ options }).then(onSuccess).catch(onError);
+    updateOrganization({ ...values })
+      .then(onSuccess)
+      .catch(onError);
   };
 
   return (
@@ -70,7 +72,4 @@ function GeneralFormPage({
   );
 }
 
-export default compose(
-  withSettings(({ organizationSettings }) => ({ organizationSettings })),
-  withDashboardActions,
-)(GeneralFormPage);
+export default compose(withDashboardActions)(GeneralFormPage);

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

@@ -1,7 +1,11 @@
 import React, { createContext } from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import { useSaveSettings, useSettings } from 'hooks/query';
+import {
+  useCurrentOrganization,
+  useUpdateOrganization,
+  useDateFormats,
+} from 'hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const GeneralFormContext = createContext();
@@ -10,20 +14,25 @@ const GeneralFormContext = createContext();
  * General form provider.
  */
 function GeneralFormProvider({ ...props }) {
-  // Fetches Organization Settings.
-  const { isLoading: isSettingsLoading } = useSettings();
+  // Fetches current organization information.
+  const { isLoading: isOrganizationLoading, data: organization } =
+    useCurrentOrganization();
 
-  // Save Organization Settings.
-  const { mutateAsync: saveSettingMutate } = useSaveSettings();
+  const { data: dateFormats, isLoading: isDateFormatsLoading } =
+    useDateFormats();
+
+  // Mutate organization information.
+  const { mutateAsync: updateOrganization } = useUpdateOrganization();
 
   // Provider state.
   const provider = {
-    isSettingsLoading,
-    saveSettingMutate,
+    isOrganizationLoading,
+    isDateFormatsLoading,
+    updateOrganization,
+    organization,
+    dateFormats,
   };
 
-  const loading = isSettingsLoading;
-
   return (
     <div
       className={classNames(
@@ -32,7 +41,7 @@ function GeneralFormProvider({ ...props }) {
       )}
     >
       <div className={classNames(CLASSES.CARD)}>
-        {loading ? (
+        {isOrganizationLoading || isDateFormatsLoading ? (
           <PreferencesPageLoader />
         ) : (
           <GeneralFormContext.Provider value={provider} {...props} />

client/src/containers/Setup/SetupOrganization.schema.js

@@ -4,7 +4,7 @@ import intl from 'react-intl-universal';
 // Retrieve the setup organization form validation.
 export const getSetupOrganizationValidation = () =>
   Yup.object().shape({
-    organizationName: Yup.string()
+    name: Yup.string()
       .required()
       .label(intl.get('organization_name_')),
     location: Yup.string()

client/src/containers/Setup/SetupOrganizationForm.js

@@ -36,13 +36,13 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
       </h3>
 
       {/* ---------- Organization name ----------  */}
-      <FastField name={'organizationName'}>
+      <FastField name={'name'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'legal_organization_name'} />}
             className={'form-group--name'}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'organizationName'} />}
+            helperText={<ErrorMessage name={'name'} />}
           >
             <InputGroup {...field} intent={inputIntent({ error, touched })} />
           </FormGroup>

client/src/containers/Setup/SetupOrganizationPage.js

@@ -14,7 +14,7 @@ import { getSetupOrganizationValidation } from './SetupOrganization.schema';
 
 // Initial values.
 const defaultValues = {
-  organizationName: '',
+  name: '',
   location: 'libya',
   baseCurrency: '',
   language: 'en',