Fix: Add prepend and money field group to customer & vendors

client/src/containers/Customers/CustomerFinancialPanel.js

@@ -1,9 +1,15 @@
 import React, { useCallback, useState } from 'react';
 import classNames from 'classnames';
-import { FormGroup, Position, Classes } from '@blueprintjs/core';
+import { FormGroup, Position, Classes, ControlGroup } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
-import { MoneyInputGroup, CurrencySelectList, Row, Col } from 'components';
+import {
+  MoneyInputGroup,
+  InputPrependText,
+  CurrencySelectList,
+  Row,
+  Col,
+} from 'components';
 import { FormattedMessage as T } from 'react-intl';
 
 import withCurrencies from 'containers/Currencies/withCurrencies';
@@ -21,20 +27,7 @@ function CustomerFinancialPanel({
 
   customerId,
 }) {
-  const [selectedItems, setSelectedItems] = useState();
 
-  const onItemsSelect = useCallback(
-    (filedName) => {
-      return (filed) => {
-        setSelectedItems({
-          ...selectedItems,
-          [filedName]: filed,
-        });
-        // setFieldValue(filedName, filed.currency_code);
-      };
-    },
-    [selectedItems],
-  );
   return (
     <div className={'tab-panel--financial'}>
       <Row>
@@ -52,7 +45,6 @@ function CustomerFinancialPanel({
                 <DateInput
                   {...momentFormatter('YYYY/MM/DD')}
                   value={tansformDateValue(value)}
-                  // onChange={}
                   popoverProps={{ position: Position.BOTTOM, minimal: true }}
                   disabled={customerId}
                 />
@@ -62,7 +54,12 @@ function CustomerFinancialPanel({
 
           {/*------------ Opening balance  -----------*/}
           <FastField name={'opening_balance'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
+            {({
+              form: { values },
+              field,
+              field: { value },
+              meta: { error, touched },
+            }) => (
               <FormGroup
                 label={<T id={'opening_balance'} />}
                 className={classNames(
@@ -72,13 +69,15 @@ function CustomerFinancialPanel({
                 intent={inputIntent({ error, touched })}
                 inline={true}
               >
-                <MoneyInputGroup
+                <ControlGroup>
-                  value={value}
+                  <InputPrependText text={values.currency_code} />
-                  prefix={'$'}
+                  <MoneyInputGroup
-                  inputGroupProps={{ fill: true }}
+                    value={value}
-                  disabled={customerId}
+                    inputGroupProps={{ fill: true }}
-                  {...field}
+                    disabled={customerId}
-                />
+                    {...field}
+                  />
+                </ControlGroup>
               </FormGroup>
             )}
           </FastField>
@@ -98,7 +97,9 @@ function CustomerFinancialPanel({
                 <CurrencySelectList
                   currenciesList={currenciesList}
                   selectedCurrencyCode={value}
-                  onCurrencySelected={onItemsSelect('currency_code')}
+                  onCurrencySelected={(currency) => {
+                    form.setFieldValue('currency_code', currency.currency_code);
+                  }}
                   disabled={customerId}
                 />
               </FormGroup>

client/src/containers/Customers/CustomerForm.js

@@ -20,6 +20,7 @@ import withCustomerDetail from 'containers/Customers/withCustomerDetail';
 import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withCustomers from 'containers/Customers//withCustomers';
+import withSettings from 'containers/Settings/withSettings';
 import useMedia from 'hooks/useMedia';
 
 import { compose, transformToForm } from 'utils';
@@ -73,6 +74,9 @@ function CustomerForm({
   // #withCustomerDetail
   customer,
 
+  // #withSettings
+  baseCurrency,
+
   // #withCustomersActions
   requestSubmitCustomer,
   requestEditCustomer,
@@ -151,6 +155,7 @@ function CustomerForm({
   const initialValues = useMemo(
     () => ({
       ...defaultInitialValues,
+      currency_code: baseCurrency,
       ...transformToForm(customer, defaultInitialValues),
     }),
     [customer, defaultInitialValues],
@@ -271,6 +276,9 @@ export default compose(
   withCustomers(({ customers }) => ({
     customers,
   })),
+  withSettings(({ organizationSettings }) => ({
+    baseCurrency: organizationSettings?.baseCurrency,
+  })),
   withDashboardActions,
   withCustomersActions,
   withMediaActions,

client/src/containers/Vendors/VendorFinanicalPanelTab.js

@@ -1,9 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
-import { FormGroup, Position, Classes } from '@blueprintjs/core';
+import { FormGroup, ControlGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
-import { MoneyInputGroup, CurrencySelectList, Row, Col } from 'components';
+import {
+  MoneyInputGroup,
+  InputPrependText,
+  CurrencySelectList,
+  Row,
+  Col,
+} from 'components';
 import { FormattedMessage as T } from 'react-intl';
 
 import withCurrencies from 'containers/Currencies/withCurrencies';
@@ -50,7 +56,12 @@ function VendorFinanicalPanelTab({
           </FastField>
           {/*------------ Opening balance  -----------*/}
           <FastField name={'opening_balance'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
+            {({
+              form: { values },
+              field,
+              field: { value },
+              meta: { error, touched },
+            }) => (
               <FormGroup
                 label={<T id={'opening_balance'} />}
                 className={classNames(
@@ -60,16 +71,19 @@ function VendorFinanicalPanelTab({
                 intent={inputIntent({ error, touched })}
                 inline={true}
               >
-                <MoneyInputGroup
+                <ControlGroup>
-                  value={value}
+                  <InputPrependText text={values.currency_code } />
-                  onChange={field.onChange}
+                  <MoneyInputGroup
-                  prefix={'$'}
+                    value={value}
-                  inputGroupProps={{
+                    onChange={field.onChange}
-                    fill: true,
+                    prefix={'$'}
-                    ...field,
+                    inputGroupProps={{
-                  }}
+                      fill: true,
-                  disabled={vendorId}
+                      ...field,
-                />
+                    }}
+                    disabled={vendorId}
+                  />
+                </ControlGroup>
               </FormGroup>
             )}
           </FastField>

client/src/containers/Vendors/VendorForm.js

@@ -22,6 +22,7 @@ import VendorFloatingActions from './VendorFloatingActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withVendorDetail from './withVendorDetail';
 import withVendorActions from './withVendorActions';
+import withSettings from 'containers/Settings/withSettings';
 
 import { compose, transformToForm } from 'utils';
 
@@ -73,6 +74,9 @@ function VendorForm({
   requestSubmitVendor,
   requestEditVendor,
 
+  // #withSettings
+  baseCurrency,
+
   // #OwnProps
   vendorId,
 }) {
@@ -88,6 +92,7 @@ function VendorForm({
   const initialValues = useMemo(
     () => ({
       ...defaultInitialValues,
+      currency_code: baseCurrency,
       ...transformToForm(vendor, defaultInitialValues),
     }),
     [defaultInitialValues],
@@ -181,5 +186,8 @@ function VendorForm({
 export default compose(
   withVendorDetail(),
   withDashboardActions,
+  withSettings(({ organizationSettings }) => ({
+    baseCurrency: organizationSettings?.baseCurrency,
+  })),
   withVendorActions,
 )(VendorForm);