refactor: preferences - general.

client/src/common/currencies.js

@@ -1,5 +1,5 @@
 export default [
-  { label: 'US Dollar', code: 'USD' },
-  { label: 'Euro', code: 'EUR' },
-  { label: 'Libyan Dinar	', code: 'LYD' },
+  { name: 'US Dollar', code: 'USD' },
+  { name: 'Euro', code: 'EUR' },
+  { name: 'Libyan Dinar	', code: 'LYD' },
 ]

client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js

@@ -9,7 +9,7 @@ import { transformToForm } from 'utils';
 import {
   CreateItemCategoryFormSchema,
   EditItemCategoryFormSchema,
-} from './ItemCategoryForm.schema';
+} from './itemCategoryForm.schema';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import ItemCategoryFormContent from './ItemCategoryFormContent'

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

@@ -1,98 +1,15 @@
-import React, { useEffect } from 'react';
-import { Formik } from 'formik';
-import { mapKeys, snakeCase } from 'lodash';
-import { Intent } from '@blueprintjs/core';
-import classNames from 'classnames';
-import { useQuery, queryCache } from 'react-query';
-import { useIntl } from 'react-intl';
-import { CLASSES } from 'common/classes';
+import React from 'react';
 
-import { compose, optionsMapToArray } from 'utils';
-
-import { AppToaster, LoadingIndicator } from 'components';
-import GeneralForm from './GeneralForm';
-import { PreferencesGeneralSchema } from './General.schema';
-
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withSettings from 'containers/Settings/withSettings';
-import withSettingsActions from 'containers/Settings/withSettingsActions';
-
-import 'style/pages/Preferences/GeneralForm.scss';
+import GeneralFormPage from './GeneralFormPage';
+import { GeneralFormProvider } from './GeneralFormProvider';
 
 /**
  * Preferences - General form.
  */
-function GeneralPreferences({
-  // #withSettings
-  organizationSettings,
-
-  //# withDashboardActions
-  changePreferencesPageTitle,
-
-  // #withSettingsActions
-  requestSubmitOptions,
-  requestFetchOptions,
-}) {
-  const { formatMessage } = useIntl();
-
-  const fetchSettings = useQuery(['settings'], () => requestFetchOptions());
-
-  useEffect(() => {
-    changePreferencesPageTitle(formatMessage({ id: 'general' }));
-  }, [changePreferencesPageTitle, formatMessage]);
-
-  function transformGeneralSettings(data) {
-    return mapKeys(data, (value, key) => snakeCase(key));
-  }
-
-  const initialValues = {
-    ...transformGeneralSettings(organizationSettings),
-  };
-
-  const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
-    const options = optionsMapToArray(values).map((option) => {
-      return { key: option.key, ...option, group: 'organization' };
-    });
-    requestSubmitOptions({ options })
-      .then((response) => {
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_options_has_been_created_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        setSubmitting(false);
-        resetForm();
-        queryCache.invalidateQueries('settings');
-      })
-      .catch((error) => {
-        setSubmitting(false);
-      });
-  };
-
+export default function GeneralPreferences() {
   return (
-    <div
-      className={classNames(
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
-      )}
-    >
-      <div className={classNames(CLASSES.CARD)}>
-        <LoadingIndicator loading={fetchSettings.isFetching} spinnerSize={28}>
-          <Formik
-            initialValues={initialValues}
-            validationSchema={PreferencesGeneralSchema}
-            onSubmit={handleFormSubmit}
-            component={GeneralForm}
-          />
-        </LoadingIndicator>
-      </div>
-    </div>
+    <GeneralFormProvider>
+      <GeneralFormPage />
+    </GeneralFormProvider>
   );
 }
-
-export default compose(
-  withSettings(({ organizationSettings }) => ({ organizationSettings })),
-  withSettingsActions,
-  withDashboardActions,
-)(GeneralPreferences);

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

@@ -36,215 +36,220 @@ export default function PreferencesGeneralForm({}) {
 
   return (
     <Form>
-      <FastField name={'name'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'organization_name'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="name" />}
-            className={'form-group--org-name'}
-          >
-            <InputGroup medium={'true'} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
-
-      <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 })}
-            helperText={<ErrorMessage name="financial_date_start" />}
-            className={classNames('form-group--select-list', CLASSES.FILL)}
-          >
-            <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>
-
-      <FastField name={'industry'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'organization_industry'} />}
-            inline={true}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="industry" />}
-            className={'form-group--org-industry'}
-          >
-            <InputGroup medium={'true'} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
-
-      <FastField name={'location'}>
-        {({ field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'business_location'} />}
-            className={classNames(
-              'form-group--business-location',
-              CLASSES.FILL,
-            )}
-            inline={true}
-            helperText={<ErrorMessage name="location" />}
-            intent={inputIntent({ error, touched })}
-          >
-            <ListSelect
-              items={countriesOptions}
-              onItemSelect={(item) => {}}
-              selectedItem={value}
-              selectedItemProp={'value'}
-              defaultText={<T id={'select_business_location'} />}
-              textProp={'name'}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-
-      <FastField name={'base_currency'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'base_currency'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--base-currency', CLASSES.FILL)}
-            inline={true}
-            helperText={<ErrorMessage name="base_currency" />}
-            intent={inputIntent({ error, touched })}
-          >
-            <ListSelect
-              items={currencies}
-              onItemSelect={(currency) => {
-                form.setFieldValue('base_currency', currency.code);
-              }}
-              selectedItem={value}
-              selectedItemProp={'code'}
-              defaultText={<T id={'select_base_currency'} />}
-              textProp={'label'}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-
-      <FastField name={'fiscal_year'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'fiscal_year'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--fiscal-year', CLASSES.FILL)}
-            inline={true}
-            helperText={<ErrorMessage name="fiscal_year" />}
-            intent={inputIntent({ error, touched })}
-          >
-            <ListSelect
-              items={fiscalYearOptions}
-              selectedItemProp={'value'}
-              textProp={'name'}
-              defaultText={<T id={'select_fiscal_year'} />}
-              selectedItem={value}
-              onItemSelect={(item) => {}}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-
-      <FastField name={'language'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'language'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames('form-group--language', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="language" />}
-          >
-            <ListSelect
-              items={languages}
-              selectedItemProp={'value'}
-              textProp={'name'}
-              defaultText={<T id={'select_language'} />}
-              selectedItem={value}
-              onItemSelect={(item) => {}}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-
-      <FastField name={'time_zone'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'time_zone'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames(
-              'form-group--time-zone',
-              CLASSES.FORM_GROUP_LIST_SELECT,
-              CLASSES.FILL,
-            )}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="time_zone" />}
-          >
-            <TimezonePicker
-              value={value}
-              onChange={(timezone) => {
-                form.setFieldValue('time_zone', timezone);
-              }}
-              valueDisplayFormat="composite"
-              placeholder={<T id={'select_time_zone'} />}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-
-      <FastField name={'date_format'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'date_format'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames('form-group--date-format', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="date_format" />}
-          >
-            <ListSelect
-              items={dateFormatsOptions}
-              onItemSelect={(dateFormat) => {
-                form.setFieldValue('date_format', dateFormat);
-              }}
-              selectedItem={value}
-              selectedItemProp={'value'}
-              defaultText={<T id={'select_date_format'} />}
-              textProp={'name'}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-
-      <div className={'card__footer'}>
-        <Button
-          intent={Intent.PRIMARY}
-          type="submit"
+    <FastField name={'name'}>
+      {({ field, meta: { error, touched } }) => (
+        <FormGroup
+          label={<T id={'organization_name'} />}
+          labelInfo={<FieldRequiredHint />}
+          inline={true}
+          intent={inputIntent({ error, touched })}
+          helperText={<ErrorMessage name="name" />}
+          className={'form-group--org-name'}
         >
-          <T id={'save'} />
-        </Button>
-        <Button onClick={handleCloseClick}>
-          <T id={'close'} />
-        </Button>
-      </div>
-    </Form>
+          <InputGroup medium={'true'} {...field} />
+        </FormGroup>
+      )}
+    </FastField>
+
+    <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 })}
+          helperText={<ErrorMessage name="financial_date_start" />}
+          className={classNames('form-group--select-list', CLASSES.FILL)}
+        >
+          <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>
+
+    <FastField name={'industry'}>
+      {({ field, meta: { error, touched } }) => (
+        <FormGroup
+          label={<T id={'organization_industry'} />}
+          inline={true}
+          intent={inputIntent({ error, touched })}
+          helperText={<ErrorMessage name="industry" />}
+          className={'form-group--org-industry'}
+        >
+          <InputGroup medium={'true'} {...field} />
+        </FormGroup>
+      )}
+    </FastField>
+
+    <FastField name={'location'}>
+      {({ form, field: { value }, meta: { error, touched } }) => (
+        <FormGroup
+          label={<T id={'business_location'} />}
+          className={classNames(
+            'form-group--business-location',
+            CLASSES.FILL,
+          )}
+          inline={true}
+          helperText={<ErrorMessage name="location" />}
+          intent={inputIntent({ error, touched })}
+        >
+          <ListSelect
+            items={countriesOptions}
+            onItemSelect={({ value }) => {
+              form.setFieldValue('location', value);
+            }}
+            selectedItem={value}
+            selectedItemProp={'value'}
+            defaultText={<T id={'select_business_location'} />}
+            textProp={'name'}
+            popoverProps={{ minimal: true }}
+          />
+        </FormGroup>
+      )}
+    </FastField>
+
+    <FastField name={'base_currency'}>
+      {({ form, field: { value }, meta: { error, touched } }) => (
+        <FormGroup
+          label={<T id={'base_currency'} />}
+          labelInfo={<FieldRequiredHint />}
+          className={classNames('form-group--base-currency', CLASSES.FILL)}
+          inline={true}
+          helperText={<ErrorMessage name="base_currency" />}
+          intent={inputIntent({ error, touched })}
+        >
+          <ListSelect
+            items={currencies}
+            onItemSelect={(currency) => {
+              form.setFieldValue('base_currency', currency.code);
+            }}
+            selectedItem={value}
+            selectedItemProp={'code'}
+            defaultText={<T id={'select_base_currency'} />}
+            textProp={'name'}
+            labelProp={'code'}
+            popoverProps={{ minimal: true }}
+          />
+        </FormGroup>
+      )}
+    </FastField>
+
+    <FastField name={'fiscal_year'}>
+      {({ form, field: { value }, meta: { error, touched } }) => (
+        <FormGroup
+          label={<T id={'fiscal_year'} />}
+          labelInfo={<FieldRequiredHint />}
+          className={classNames('form-group--fiscal-year', CLASSES.FILL)}
+          inline={true}
+          helperText={<ErrorMessage name="fiscal_year" />}
+          intent={inputIntent({ error, touched })}
+        >
+          <ListSelect
+            items={fiscalYearOptions}
+            onItemSelect={({ value }) =>
+              form.setFieldValue('fiscal_year', value)
+            }
+            selectedItem={value}
+            selectedItemProp={'value'}
+            defaultText={<T id={'select_fiscal_year'} />}
+            textProp={'name'}
+            popoverProps={{ minimal: true }}
+          />
+        </FormGroup>
+      )}
+    </FastField>
+
+    <FastField name={'language'}>
+      {({ form, field: { value }, meta: { error, touched } }) => (
+        <FormGroup
+          label={<T id={'language'} />}
+          labelInfo={<FieldRequiredHint />}
+          inline={true}
+          className={classNames('form-group--language', CLASSES.FILL)}
+          intent={inputIntent({ error, touched })}
+          helperText={<ErrorMessage name="language" />}
+        >
+          <ListSelect
+            items={languages}
+            selectedItemProp={'value'}
+            textProp={'name'}
+            defaultText={<T id={'select_language'} />}
+            selectedItem={value}
+            onItemSelect={(item) =>
+              form.setFieldValue('language', item.value)
+            }
+            popoverProps={{ minimal: true }}
+          />
+        </FormGroup>
+      )}
+    </FastField>
+
+    <FastField name={'time_zone'}>
+      {({ form, field: { value }, meta: { error, touched } }) => (
+        <FormGroup
+          label={<T id={'time_zone'} />}
+          labelInfo={<FieldRequiredHint />}
+          inline={true}
+          className={classNames(
+            'form-group--time-zone',
+            CLASSES.FORM_GROUP_LIST_SELECT,
+            CLASSES.FILL,
+          )}
+          intent={inputIntent({ error, touched })}
+          helperText={<ErrorMessage name="time_zone" />}
+        >
+          <TimezonePicker
+            value={value}
+            onChange={(timezone) => {
+              form.setFieldValue('time_zone', timezone);
+            }}
+            valueDisplayFormat="composite"
+            placeholder={<T id={'select_time_zone'} />}
+          />
+        </FormGroup>
+      )}
+    </FastField>
+
+    <FastField name={'date_format'}>
+      {({ form, field: { value }, meta: { error, touched } }) => (
+        <FormGroup
+          label={<T id={'date_format'} />}
+          labelInfo={<FieldRequiredHint />}
+          inline={true}
+          className={classNames('form-group--date-format', CLASSES.FILL)}
+          intent={inputIntent({ error, touched })}
+          helperText={<ErrorMessage name="date_format" />}
+        >
+          <ListSelect
+            items={dateFormatsOptions}
+            onItemSelect={(dateFormat) => {
+              form.setFieldValue('date_format', dateFormat.value);
+            }}
+            selectedItem={value}
+            selectedItemProp={'value'}
+            defaultText={<T id={'select_date_format'} />}
+            textProp={'name'}
+            labelProp={'label'}
+            popoverProps={{ minimal: true }}
+          />
+        </FormGroup>
+      )}
+    </FastField>
+
+    <div className={'card__footer'}>
+      <Button intent={Intent.PRIMARY} type="submit">
+        <T id={'save'} />
+      </Button>
+      <Button onClick={handleCloseClick}>
+        <T id={'close'} />
+      </Button>
+    </div>
+  </Form>
   );
 }

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

@@ -0,0 +1,87 @@
+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';
+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 'style/pages/Preferences/GeneralForm.scss';
+
+/**
+ * Preferences - General form Page.
+ */
+function GeneralFormPage({
+  // #withSettings
+  organizationSettings,
+
+  //# withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  const { formatMessage } = useIntl();
+  const { saveSettingMutate } = useGeneralFormContext();
+
+  useEffect(() => {
+    changePreferencesPageTitle(formatMessage({ id: 'general' }));
+  }, [changePreferencesPageTitle, formatMessage]);
+
+  function transformGeneralSettings(data) {
+    return mapKeys(data, (value, key) => snakeCase(key));
+  }
+
+  const initialValues = {
+    ...transformGeneralSettings(organizationSettings),
+  };
+
+  const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
+    const options = optionsMapToArray(values).map((option) => {
+      return { key: option.key, ...option, group: 'organization' };
+    });
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_options_has_been_created_successfully',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      resetForm();
+    };
+    const onError = (errors) => {
+      setSubmitting(false);
+    };
+    saveSettingMutate({ options }).then(onSuccess).catch(onError);
+  };
+
+  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>
+  );
+}
+
+export default compose(
+  withSettings(({ organizationSettings }) => ({ organizationSettings })),
+  withDashboardActions,
+)(GeneralFormPage);

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

@@ -0,0 +1,32 @@
+import React, { createContext } from 'react';
+import { LoadingIndicator } from 'components';
+import { useSaveSettings, useSettings } from 'hooks/query';
+
+const GeneralFormContext = createContext();
+
+/**
+ * General form provider.
+ */
+function GeneralFormProvider({ ...props }) {
+  //Fetches Organization Settings.
+  const { isFetching: isSettingsLoading } = useSettings();
+
+  // Save Organization Settings.
+  const { mutateAsync: saveSettingMutate } = useSaveSettings();
+
+  // Provider state.
+  const provider = {
+    isSettingsLoading,
+    saveSettingMutate,
+  };
+
+  return (
+    <LoadingIndicator loading={isSettingsLoading} spinnerSize={28}>
+      <GeneralFormContext.Provider value={provider} {...props} />
+    </LoadingIndicator>
+  );
+}
+
+const useGeneralFormContext = () => React.useContext(GeneralFormContext);
+
+export { GeneralFormProvider, useGeneralFormContext };

client/src/containers/Subscriptions/BillingPlansForm.js

@@ -5,7 +5,7 @@ import 'style/pages/Subscription/BillingPlans.scss'
 
 import BillingPlansInput from 'containers/Subscriptions/BillingPlansInput';
 import BillingPeriodsInput from 'containers/Subscriptions/BillingPeriodsInput';
-import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentMethod';
+import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentmethod';
 
 /**
  * Billing plans form.