Fix: PaymentReceive & ExchangeRate & itemCategories

client/src/containers/Dialogs/CurrencyDialog.js

@@ -19,7 +19,6 @@ import withDialogRedux from 'components/DialogReduxConnect';
 import ErrorMessage from 'components/ErrorMessage';
 import classNames from 'classnames';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import { getDialogPayload } from 'store/dashboard/dashboard.reducer';
 
 import withCurrency from 'containers/Currencies/withCurrency';
 import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
@@ -27,7 +26,7 @@ import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
 import { compose } from 'utils';
 
 function CurrencyDialog({
-  name,
+  dialogName,
   payload,
   isOpen,
 
@@ -66,6 +65,7 @@ function CurrencyDialog({
   );
 
   const {
+    values,
     errors,
     touched,
     isSubmitting,
@@ -83,7 +83,7 @@ function CurrencyDialog({
       if (payload.action === 'edit') {
         requestEditCurrency(currency.id, values)
           .then((response) => {
-            closeDialog(name);
+            closeDialog(dialogName);
             AppToaster.show({
               message: formatMessage({
                 id: 'the_currency_has_been_successfully_edited',
@@ -99,7 +99,7 @@ function CurrencyDialog({
       } else {
         requestSubmitCurrencies(values)
           .then((response) => {
-            closeDialog(name);
+            closeDialog(dialogName);
             AppToaster.show({
               message: formatMessage({
                 id: 'the_currency_has_been_successfully_created',
@@ -117,8 +117,8 @@ function CurrencyDialog({
   });
 
   const handleClose = useCallback(() => {
-    closeDialog(name);
-  }, [name, closeDialog]);
+    closeDialog(dialogName);
+  }, [dialogName, closeDialog]);
 
   const onDialogOpening = useCallback(() => {
     fetchCurrencies.refetch();
@@ -126,14 +126,14 @@ function CurrencyDialog({
 
   const onDialogClosed = useCallback(() => {
     resetForm();
-    closeDialog(name);
-  }, [closeDialog, name, resetForm]);
+    closeDialog(dialogName);
+  }, [closeDialog, dialogName, resetForm]);
 
   const requiredSpan = useMemo(() => <span className={'required'}>*</span>, []);
 
   return (
     <Dialog
-      name={name}
+      name={dialogName}
       title={
         payload.action === 'edit' ? (
           <T id={'edit_currency'} />
@@ -222,7 +222,7 @@ function CurrencyDialog({
 }
 
 const mapStateToProps = (state, props) => ({
-  dialogName: 'currency-form',
+  currency: 'currency-form',
 });
 
 const withCurrencyFormDialog = connect(mapStateToProps);

client/src/containers/Dialogs/ExchangeRateDialog.container.js

@@ -3,27 +3,31 @@ import { compose } from 'utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDialogRedux from 'components/DialogReduxConnect';
-
+import withExchangeRateDetail from 'containers/ExchangeRates/withExchangeRateDetail';
 import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
-import withExchangeRates from 'containers/ExchangeRates/withExchangeRates';  
+import withExchangeRates from 'containers/ExchangeRates/withExchangeRates';
 import withCurrencies from 'containers/Currencies/withCurrencies';
 
-
 const mapStateToProps = (state, props) => ({
   dialogName: 'exchangeRate-form',
+  exchangeRateId:
+    props.payload.action === 'edit' && props.payload.id
+      ? props.payload.id
+      : null,
 });
 
 const withExchangeRateDialog = connect(mapStateToProps);
 
 export default compose(
-  withExchangeRateDialog,
   withDialogRedux(null, 'exchangeRate-form'),
+  withExchangeRateDialog,
   withCurrencies(({ currenciesList }) => ({
     currenciesList,
   })),
+  withExchangeRatesActions,
+  withExchangeRateDetail,
   withExchangeRates(({ exchangeRatesList }) => ({
     exchangeRatesList,
   })),
-  withExchangeRatesActions,
   withDialogActions,
-);
+);

client/src/containers/Dialogs/ExchangeRateDialog.js

@@ -15,13 +15,8 @@ import { useFormik } from 'formik';
 import { useQuery, queryCache } from 'react-query';
 import moment from 'moment';
 import { DateInput } from '@blueprintjs/datetime';
-import { momentFormatter } from 'utils';
-import { 
-  AppToaster,
-  Dialog,
-  ErrorMessage,
-  ListSelect,
-} from 'components';
+import { momentFormatter, tansformDateValue } from 'utils';
+import { AppToaster, Dialog, ErrorMessage, ListSelect } from 'components';
 import classNames from 'classnames';
 import withExchangeRatesDialog from './ExchangeRateDialog.container';
 
@@ -39,12 +34,13 @@ function ExchangeRateDialog({
   // #withCurrencies
   currenciesList,
 
+  //#WithExchangeRateDetail
+  exchangeRate,
+
   // #withExchangeRatesActions
   requestSubmitExchangeRate,
   requestFetchExchangeRates,
   requestEditExchangeRate,
-  requestFetchCurrencies,
-  editExchangeRate,
 }) {
   const { formatMessage } = useIntl();
   const [selectedItems, setSelectedItems] = useState({});
@@ -90,7 +86,7 @@ function ExchangeRateDialog({
     validationSchema,
     initialValues: {
       ...(payload.action === 'edit' &&
-        pick(editExchangeRate, Object.keys(initialValues))),
+        pick(exchangeRate, Object.keys(initialValues))),
     },
     onSubmit: (values, { setSubmitting, setErrors }) => {
       if (payload.action === 'edit') {
@@ -154,9 +150,9 @@ function ExchangeRateDialog({
   }, [fetchExchangeRatesDialog]);
 
   const handleDateChange = useCallback(
-    (date) => {
+    (date_filed) => (date) => {
       const formatted = moment(date).format('YYYY-MM-DD');
-      setFieldValue('date', formatted);
+      setFieldValue(date_filed, formatted);
     },
     [setFieldValue],
   );
@@ -231,10 +227,10 @@ function ExchangeRateDialog({
           >
             <DateInput
               fill={true}
-              {...momentFormatter('YYYY-MM-DD')}
-              defaultValue={new Date()}
-              onChange={handleDateChange}
-              popoverProps={{ position: Position.BOTTOM }}
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(values.date)}
+              onChange={handleDateChange('date')}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
               disabled={payload.action === 'edit'}
             />
           </FormGroup>

client/src/containers/Dialogs/ItemCategoryDialog.js

@@ -36,7 +36,7 @@ import Icon from 'components/Icon';
 
 function ItemCategoryDialog({
   dialogName,
-  payload,
+  payload = {},
   isOpen,
 
   // #withDialog
@@ -67,9 +67,12 @@ function ItemCategoryDialog({
   const fetchList = useQuery(['items-categories-list'], () =>
     requestFetchItemCategories(),
   );
-  const fetchAccounts = useQuery('accounts-list', (key) =>
-    requestFetchAccounts(),
+  const fetchAccounts = useQuery(
+    'accounts-list',
+    () => requestFetchAccounts(),
+    { enabled: false },
   );
+
   const validationSchema = Yup.object().shape({
     name: Yup.string()
       .required()
@@ -84,7 +87,7 @@ function ItemCategoryDialog({
     inventory_account_id: Yup.number()
       .required()
       .label(formatMessage({ id: 'inventory_account_' })),
-    description: Yup.string().trim(),
+    description: Yup.string().trim().nullable(),
   });
 
   const initialValues = useMemo(
@@ -228,14 +231,14 @@ function ItemCategoryDialog({
       }
       className={classNames(
         {
-          'dialog--loading': fetchList.isFetching,
+          'dialog--loading': fetchList.isFetching || fetchAccounts.isFetching,
         },
         'dialog--category-form',
       )}
       isOpen={isOpen}
       onClosed={onDialogClosed}
       onOpening={onDialogOpening}
-      isLoading={fetchList.isFetching}
+      isLoading={fetchList.isFetching || fetchAccounts.isFetching}
       onClose={handleClose}
     >
       <form onSubmit={handleSubmit}>
@@ -358,12 +361,15 @@ function ItemCategoryDialog({
             label={<T id={'inventory_account'} />}
             inline={true}
             intent={
-              errors.inventory_account &&
-              touched.inventory_account &&
+              errors.inventory_account_id &&
+              touched.inventory_account_id &&
               Intent.DANGER
             }
             helperText={
-              <ErrorMessage {...{ errors, touched }} name="inventory_account" />
+              <ErrorMessage
+                {...{ errors, touched }}
+                name="inventory_account_id"
+              />
             }
             className={classNames(
               'form-group--sell-account',
@@ -373,9 +379,9 @@ function ItemCategoryDialog({
           >
             <AccountsSelectList
               accounts={accountsList}
-              onAccountSelected={onItemAccountSelect('inventory_account')}
+              onAccountSelected={onItemAccountSelect('inventory_account_id')}
               defaultSelectText={<T id={'select_account'} />}
-              selectedAccountId={values.inventory_account}
+              selectedAccountId={values.inventory_account_id}
             />
           </FormGroup>
         </div>
@@ -404,7 +410,8 @@ function ItemCategoryDialog({
 }
 
 const mapStateToProps = (state, props) => ({
-  itemCategoryId: props?.dialogPayload?.id || null,
+  dialogName: 'item-category-form',
+  itemCategoryId: props?.payload?.id || null,
 });
 
 const withItemCategoryDialog = connect(mapStateToProps);