Merge branch 'develop' into rename-payment-receives-to-payment-received

packages/webapp/src/components/Customers/CustomersSelect.tsx

@@ -1,9 +1,11 @@
 // @ts-nocheck
 import React from 'react';
 import * as R from 'ramda';
+import { useFormikContext } from 'formik';
 import { createNewItemFromQuery, createNewItemRenderer } from './utils';
 import { FSelect } from '../Forms';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { useCreateAutofillListener } from '@/hooks/state/autofill';
 import { DRAWERS } from '@/constants/drawers';
 
 /**
@@ -17,6 +19,7 @@ function CustomerSelectRoot({
   // #ownProps
   items,
   allowCreate,
+  name,
   ...props
 }) {
   // Maybe inject create new item props to suggest component.
@@ -24,14 +27,21 @@ function CustomerSelectRoot({
   const maybeCreateNewItemFromQuery = allowCreate
     ? createNewItemFromQuery
     : null;
+  const { setFieldValue } = useFormikContext();
 
+  // Creates autofill listener once the quick customer drawer submit the form.
+  const autofillRef = useCreateAutofillListener((payload: any) => {
+    setFieldValue(name, payload.customerId);
+  });
   // Handles the create item click.
-  const handleCreateItemClick = () => {
+  const handleCreateItemClick = (item) => {
-    openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
+    const displayName = item.name;
+    openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER, { autofillRef, displayName });
   };
 
   return (
     <FSelect
+      name={name}
       items={items}
       textAccessor={'display_name'}
       labelAccessor={'formatted_balance'}

packages/webapp/src/components/Vendors/VendorsSelect.tsx

@@ -1,9 +1,11 @@
 // @ts-nocheck
 import React from 'react';
 import * as R from 'ramda';
+import { useFormikContext } from 'formik';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { createNewItemFromQuery, createNewItemRenderer } from './utils';
 import { FSelect } from '../Forms';
+import { useCreateAutofillListener } from '@/hooks/state/autofill';
 import { DRAWERS } from '@/constants/drawers';
 
 /**
@@ -15,6 +17,7 @@ function VendorsSelectRoot({
   openDrawer,
 
   // #ownProps
+  name,
   items,
   allowCreate,
 
@@ -25,14 +28,24 @@ function VendorsSelectRoot({
   const maybeCreateNewItemFromQuery = allowCreate
     ? createNewItemFromQuery
     : null;
+  const { setFieldValue } = useFormikContext();
+
+  // Creates a new autofill listener once the quick vendor drawer submits the form.
+  const autofillRef = useCreateAutofillListener((payload: any) => {
+    setFieldValue(name, payload.vendorId);
+  });
 
   // Handles the create item click.
-  const handleCreateItemClick = () => {
+  const handleCreateItemClick = (item) => {
-    openDrawer(DRAWERS.QUICK_WRITE_VENDOR);
+    openDrawer(DRAWERS.QUICK_WRITE_VENDOR, {
+      autofillRef,
+      displayName: item.name,
+    });
   };
 
   return (
     <FSelect
+      name={name}
       items={items}
       textAccessor={'display_name'}
       labelAccessor={'formatted_balance'}

packages/webapp/src/constants/homepageOptions.tsx

@@ -88,7 +88,7 @@ export const accountsPayable = [
       {
         title: <T id={'vendors_payments'} />,
         description: <T id={'manage_payments_transactions_to_your_vendors'} />,
-        link: '/payment-mades',
+        link: '/payments-made',
         subject: AbilitySubject.PaymentMade,
         ability: PaymentMadeAction.View,
       },

packages/webapp/src/constants/sidebarMenu.tsx

@@ -74,7 +74,7 @@ export const SidebarMenu = [
                 },
               },
               {
-                text: <T id={'category_list'} />,
+                text: <T id={'categories_list'} />,
                 href: '/items/categories',
                 type: ISidebarMenuItemType.Link,
                 permission: {
@@ -265,8 +265,8 @@ export const SidebarMenu = [
             type: ISidebarMenuItemType.Link,
           },
           {
-            text: <T id={'payment_mades'} />,
+            text: <T id={'payments_made'} />,
-            href: '/payment-mades',
+            href: '/payments-made',
             type: ISidebarMenuItemType.Link,
             permission: {
               subject: AbilitySubject.PaymentMade,
@@ -299,7 +299,7 @@ export const SidebarMenu = [
           },
           {
             text: <T id={'sidebar.new_payment_made'} />,
-            href: '/payment-mades/new',
+            href: '/payments-made/new',
             type: ISidebarMenuItemType.Link,
             permission: {
               subject: AbilitySubject.PaymentMade,

packages/webapp/src/containers/AlertsContainer/registered.tsx

@@ -8,7 +8,7 @@ import InvoicesAlerts from '@/containers/Sales/Invoices/InvoicesAlerts';
 import ReceiptsAlerts from '@/containers/Sales/Receipts/ReceiptsAlerts';
 import PaymentsReceivedAlerts from '@/containers/Sales/PaymentsReceived/PaymentsReceivedAlerts';
 import BillsAlerts from '@/containers/Purchases/Bills/BillsLanding/BillsAlerts';
-import PaymentMadesAlerts from '@/containers/Purchases/PaymentMades/PaymentMadesAlerts';
+import PaymentsMadeAlerts from '@/containers/Purchases/PaymentsMade/PaymentsMadeAlerts';
 import CustomersAlerts from '@/containers/Customers/CustomersAlerts';
 import VendorsAlerts from '@/containers/Vendors/VendorsAlerts';
 import ManualJournalsAlerts from '@/containers/Accounting/JournalsLanding/ManualJournalsAlerts';
@@ -40,7 +40,7 @@ export default [
   ...ReceiptsAlerts,
   ...PaymentsReceivedAlerts,
   ...BillsAlerts,
-  ...PaymentMadesAlerts,
+  ...PaymentsMadeAlerts,
   ...CustomersAlerts,
   ...VendorsAlerts,
   ...ManualJournalsAlerts,

packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx

@@ -52,7 +52,7 @@ function CustomerFormFormik({
       ...defaultInitialValues,
       currency_code: base_currency,
       ...transformToForm(contactDuplicate || customer, defaultInitialValues),
-      ...initialCustomerValues,
+      ...transformToForm(initialCustomerValues, defaultInitialValues),
     }),
     [customer, contactDuplicate, base_currency, initialCustomerValues],
   );
@@ -62,7 +62,7 @@ function CustomerFormFormik({
     const { setSubmitting, resetForm } = formArgs;
     const formValues = { ...values };
 
-    const onSuccess = () => {
+    const onSuccess = (res) => {
       AppToaster.show({
         message: intl.get(
           isNewMode
@@ -73,8 +73,7 @@ function CustomerFormFormik({
       });
       setSubmitting(false);
       resetForm();
-
+      saveInvoke(onSubmitSuccess, values, formArgs, submitPayload, res.data);
-      saveInvoke(onSubmitSuccess, values, formArgs, submitPayload);
     };
 
     const onError = () => {

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx

@@ -7,7 +7,7 @@ import { useFormikContext } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from '@/components';
 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
-import { PAYMENT_MADE_ERRORS } from '@/containers/Purchases/PaymentMades/constants';
+import { PAYMENT_MADE_ERRORS } from '@/containers/Purchases/PaymentsMade/constants';
 
 // Default initial values of payment made.
 export const defaultPaymentMade = {

packages/webapp/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.tsx

@@ -48,7 +48,7 @@ function BillPaymentTransactionTable({
 
   // Handles edit  bill payment transactions.
   const handleEditBillPaymentTransactions = ({ bill_payment_id }) => {
-    history.push(`/payment-mades/${bill_payment_id}/edit`);
+    history.push(`/payments-made/${bill_payment_id}/edit`);
     closeDrawer(DRAWERS.BILL_DETAILS);
   };
 

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx

@@ -42,7 +42,7 @@ function PaymentMadeDetailActionsBar({
 
   // Handle edit payment made.
   const handleEditPaymentMade = () => {
-    history.push(`/payment-mades/${paymentMadeId}/edit`);
+    history.push(`/payments-made/${paymentMadeId}/edit`);
     closeDrawer(DRAWERS.PAYMENT_MADE_DETAILS);
   };
 

packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.tsx

@@ -5,14 +5,16 @@ import {
   DrawerBody,
   FormattedMessage as T,
 } from '@/components';
-
 import QuickCustomerFormDrawer from './QuickCustomerFormDrawer';
 import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Quick create/edit customer drawer.
  */
-export default function QuickCreateCustomerDrawerContent({ displayName }) {
+export default function QuickCreateCustomerDrawerContent({
+  displayName,
+  autofillRef,
+}) {
   return (
     <React.Fragment>
       <DrawerHeaderContent
@@ -20,7 +22,10 @@ export default function QuickCreateCustomerDrawerContent({ displayName }) {
         title={<T id={'create_a_new_customer'} />}
       />
       <DrawerBody>
-        <QuickCustomerFormDrawer displayName={displayName} />
+        <QuickCustomerFormDrawer
+          displayName={displayName}
+          autofillRef={autofillRef}
+        />
       </DrawerBody>
     </React.Fragment>
   );

packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.tsx

@@ -14,6 +14,7 @@ import CustomerFormFormik, {
 
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { DRAWERS } from '@/constants/drawers';
+import { useAddAutofillRef } from '@/hooks/state/autofill';
 
 /**
  * Drawer customer form loading wrapper.
@@ -28,9 +29,22 @@ function DrawerCustomerFormLoading({ children }) {
 /**
  * Quick customer form of the drawer.
  */
-function QuickCustomerFormDrawer({ displayName, closeDrawer, customerId }) {
+function QuickCustomerFormDrawer({
+  displayName,
+  autofillRef,
+  closeDrawer,
+  customerId,
+}) {
+  const addAutofillRef = useAddAutofillRef();
+
   // Handle the form submit request success.
-  const handleSubmitSuccess = () => {
+  const handleSubmitSuccess = (values, formArgs, submitPayload, res) => {
+    if (autofillRef) {
+      addAutofillRef(autofillRef, {
+        displayName: values.display_name,
+        customerId: res.id,
+      });
+    }
     closeDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
   };
   // Handle the form cancel action.
@@ -43,7 +57,7 @@ function QuickCustomerFormDrawer({ displayName, closeDrawer, customerId }) {
       <DrawerCustomerFormLoading>
         <CustomerFormCard>
           <CustomerFormFormik
-            initialValues={{ display_name: displayName }}
+            initialValues={{ first_name: displayName }}
             onSubmitSuccess={handleSubmitSuccess}
             onCancel={handleCancelForm}
           />

packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/index.tsx

@@ -2,11 +2,10 @@
 import React from 'react';
 import { Drawer, DrawerSuspense } from '@/components';
 import withDrawers from '@/containers/Drawer/withDrawers';
-
 import { compose } from '@/utils';
 
-const QuickCreateCustomerDrawerContent = React.lazy(() =>
+const QuickCreateCustomerDrawerContent = React.lazy(
-  import('./QuickCreateCustomerDrawerContent'),
+  () => import('./QuickCreateCustomerDrawerContent'),
 );
 
 /**
@@ -17,7 +16,7 @@ function QuickCreateCustomerDrawer({
 
   // #withDrawer
   isOpen,
-  payload,
+  payload: { autofillRef, displayName },
 }) {
   return (
     <Drawer
@@ -27,7 +26,10 @@ function QuickCreateCustomerDrawer({
       size={'80%'}
     >
       <DrawerSuspense>
-        <QuickCreateCustomerDrawerContent displayName={payload.displayName} />
+        <QuickCreateCustomerDrawerContent
+          displayName={displayName}
+          autofillRef={autofillRef}
+        />
       </DrawerSuspense>
     </Drawer>
   );

packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx

@@ -16,6 +16,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { useAddAutofillRef } from '@/hooks/state/autofill';
 import { DRAWERS } from '@/constants/drawers';
 
 /**
@@ -36,17 +37,20 @@ function QuickVendorFormDrawer({
   closeDrawer,
   vendorId,
   addQuickActionEvent,
+  autofillRef,
 }) {
   const { payload } = useDrawerContext();
+  const addAutofillRef = useAddAutofillRef();
 
   // Handle the form submit request success.
-  const handleSubmitSuccess = (values, form, submitPayload, response) => {
+  const handleSubmitSuccess = (values, form, submitPayload, res) => {
     if (!submitPayload.noRedirect) {
       closeDrawer(DRAWERS.QUICK_WRITE_VENDOR);
     }
-    if (payload.quickActionEvent) {
+    if (autofillRef) {
-      addQuickActionEvent(payload.quickActionEvent, {
+      addAutofillRef(autofillRef, {
-        vendorId: response.data.id,
+        displayName: values.display_name,
+        vendorId: res.id,
       });
     }
   };
@@ -60,7 +64,7 @@ function QuickVendorFormDrawer({
       <DrawerVendorFormLoading>
         <VendorFormCard>
           <VendorFormFormik
-            initialValues={{ display_name: displayName }}
+            initialValues={{ first_name: displayName }}
             onSubmitSuccess={handleSubmitSuccess}
             onCancel={handleCancelForm}
           />

packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx

@@ -12,7 +12,7 @@ import { DRAWERS } from '@/constants/drawers';
 /**
  * Quick create/edit vendor drawer.
  */
-export default function QuickWriteVendorDrawerContent({ displayName }) {
+export default function QuickWriteVendorDrawerContent({ displayName, autofillRef }) {
   return (
     <React.Fragment>
       <DrawerHeaderContent
@@ -21,7 +21,7 @@ export default function QuickWriteVendorDrawerContent({ displayName }) {
 
       />
       <DrawerBody>
-        <QuickVendorFormDrawer displayName={displayName} />
+        <QuickVendorFormDrawer displayName={displayName} autofillRef={autofillRef} />
       </DrawerBody>
     </React.Fragment>
   );

packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/index.tsx

@@ -17,7 +17,7 @@ function QuickWriteVendorDrawer({
 
   // #withDrawer
   isOpen,
-  payload,
+  payload: { displayName, autofillRef },
 }) {
   return (
     <Drawer
@@ -25,10 +25,9 @@ function QuickWriteVendorDrawer({
       name={name}
       style={{ minWidth: '700px', maxWidth: '900px' }}
       size={'80%'}
-      payload={payload}
     >
       <DrawerSuspense>
-        <QuickWriteVendorDrawerContent displayName={payload.displayName} />
+        <QuickWriteVendorDrawerContent displayName={displayName} autofillRef={autofillRef} />
       </DrawerSuspense>
     </Drawer>
   );

packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx

@@ -71,7 +71,7 @@ function VendorDetailsActionsBar({
   };
 
   const handleNewPaymentClick = () => {
-    history.push('/payment-mades/new');
+    history.push('/payments-made/new');
     closeDrawer(DRAWERS.VENDOR_DETAILS);
   };
 

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeForm.tsx

@@ -120,7 +120,7 @@ function PaymentMadeForm({
       });
       setSubmitting(false);
 
-      submitPayload.redirect && history.push('/payment-mades');
+      submitPayload.redirect && history.push('/payments-made');
       submitPayload.resetForm && resetForm();
     };
 

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsLanding/PaymentMadeActionsBar.tsx

@@ -68,7 +68,7 @@ function PaymentMadeActionsBar({
 
   // Handle new payment made button click.
   const handleClickNewPaymentMade = () => {
-    history.push('/payment-mades/new');
+    history.push('/payments-made/new');
   };
   // Handle tab changing.
   const handleTabChange = (viewSlug) => {
@@ -84,7 +84,7 @@ function PaymentMadeActionsBar({
   };
   // Handle the import button click.
   const handleImportBtnClick = () => {
-    history.push('/payment-mades/import');
+    history.push('/payments-made/import');
   };
   // Handle the export button click.
   const handleExportBtnClick = () => {

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsLanding/PaymentMadeViewTabs.tsx

@@ -37,7 +37,7 @@ function PaymentMadeViewTabs({
   );
 
   const handleClickNewView = () => {
-    history.push('/custom_views/payment-mades/new');
+    history.push('/custom_views/payments-made/new');
   };
 
   return (

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsLanding/PaymentMadesEmptyStatus.tsx

@@ -23,7 +23,7 @@ export default function PaymentMadesEmptyStatus() {
               intent={Intent.PRIMARY}
               large={true}
               onClick={() => {
-                history.push('/payment-mades/new');
+                history.push('/payments-made/new');
               }}
             >
               <T id={'new_bill_payment'} />

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsLanding/PaymentMadesTable.tsx

@@ -61,7 +61,7 @@ function PaymentMadesTable({
 
   // Handles the edit payment made action.
   const handleEditPaymentMade = (paymentMade) => {
-    history.push(`/payment-mades/${paymentMade.id}/edit`);
+    history.push(`/payments-made/${paymentMade.id}/edit`);
   };
 
   // Handles the delete payment made action.

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsLanding/PaymentMadesView.tsx

@@ -20,7 +20,7 @@ function PaymentMadesViewPage({
     <Switch>
       <Route
         exact={true}
-        path={['/payment-mades/:custom_view_id/custom_view', '/payment-mades']}
+        path={['/payments-made/:custom_view_id/custom_view', '/payments-made']}
       >
         
         {/* <PaymentMadeDataTable

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsMadeImport.tsx

@@ -3,14 +3,14 @@ import { useHistory } from 'react-router-dom';
 import { DashboardInsider } from '@/components';
 import { ImportView } from '@/containers/Import';
 
-export default function PaymentMadesImport() {
+export default function PaymentsMadeImport() {
   const history = useHistory();
 
   const handleCancelBtnClick = () => {
-    history.push('/payment-mades');
+    history.push('/payments-made');
   };
   const handleImportSuccess = () => {
-    history.push('/payment-mades');
+    history.push('/payments-made');
   };
 
   return (

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsMadeUniversalSearch.tsx

@@ -13,7 +13,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 /**
  * Universal search bill item select action.
  */
-function PaymentMadeUniversalSearchSelectComponent({
+function PaymentsMadeUniversalSearchSelectComponent({
   // #ownProps
   resourceType,
   resourceId,
@@ -27,14 +27,14 @@ function PaymentMadeUniversalSearchSelectComponent({
   return null;
 }
 
-export const PaymentMadeUniversalSearchSelect = withDrawerActions(
+export const PaymentsMadeUniversalSearchSelect = withDrawerActions(
-  PaymentMadeUniversalSearchSelectComponent,
+  PaymentsMadeUniversalSearchSelectComponent,
 );
 
 /**
  * Payment made universal search item.
  */
-export function PaymentMadeUniversalSearchItem(
+export function PaymentsMadeUniversalSearchItem(
   { text, label, reference },
   { handleClick, modifiers, query },
 ) {
@@ -78,9 +78,9 @@ const paymentMadeToSearch = (payment) => ({
  */
 export const universalSearchPaymentMadeBind = () => ({
   resourceType: RESOURCES_TYPES.PAYMENT_MADE,
-  optionItemLabel: intl.get('payment_mades'),
+  optionItemLabel: intl.get('payments_made'),
-  selectItemAction: PaymentMadeUniversalSearchSelect,
+  selectItemAction: PaymentsMadeUniversalSearchSelect,
-  itemRenderer: PaymentMadeUniversalSearchItem,
+  itemRenderer: PaymentsMadeUniversalSearchItem,
   itemSelect: paymentMadeToSearch,
   permission: {
     ability: PaymentMadeAction.View,

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.tsx

@@ -5,7 +5,6 @@ import { DashboardPageContent } from '@/components';
 import '@/style/pages/SaleReceipt/List.scss';
 
 import ReceiptActionsBar from './ReceiptActionsBar';
-import ReceiptViewTabs from './ReceiptViewTabs';
 import ReceiptsTable from './ReceiptsTable';
 
 import withReceipts from './withReceipts';
@@ -42,7 +41,6 @@ function ReceiptsList({
         <ReceiptActionsBar />
 
         <DashboardPageContent>
-          <ReceiptViewTabs />
           <ReceiptsTable />
         </DashboardPageContent>
       </DashboardPageContent>

packages/webapp/src/containers/UniversalSearch/DashboardUniversalSearchBinds.tsx

@@ -4,7 +4,7 @@ import { universalSearchReceiptBind } from '../Sales/Receipts/ReceiptUniversalSe
 import { universalSearchBillBind } from '../Purchases/Bills/BillUniversalSearch';
 import { universalSearchEstimateBind } from '../Sales/Estimates/EstimatesLanding/EstimateUniversalSearch';
 import { universalSearchPaymentReceiveBind } from '../Sales/PaymentsReceived/PaymentReceiveUniversalSearch';
-import { universalSearchPaymentMadeBind } from '../Purchases/PaymentMades/PaymentMadeUniversalSearch';
+import { universalSearchPaymentMadeBind } from '../Purchases/PaymentsMade/PaymentsMadeUniversalSearch';
 import { universalSearchItemBind } from '../Items/ItemsUniversalSearch';
 import { universalSearchCustomerBind } from '../Customers/CustomersUniversalSearch';
 import { universalSearchJournalBind } from '../Accounting/ManualJournalUniversalSearch';

packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx

@@ -34,6 +34,7 @@ function VendorFormFormik({
   organization: { base_currency },
 
   // #ownProps
+  initialValues,
   onSubmitSuccess,
   onSubmitError,
   onCancel,
@@ -54,14 +55,15 @@ function VendorFormFormik({
   /**
    * Initial values in create and edit mode.
    */
-  const initialValues = useMemo(
+  const initialFormValues = useMemo(
     () => ({
       ...defaultInitialValues,
+      ...transformToForm(initialValues, defaultInitialValues),
       currency_code: base_currency,
       ...transformToForm(vendor, defaultInitialValues),
       ...transformToForm(contactDuplicate, defaultInitialValues),
     }),
-    [vendor, contactDuplicate, base_currency],
+    [vendor, contactDuplicate, base_currency, initialValues],
   );
 
   // Handles the form submit.
@@ -84,7 +86,7 @@ function VendorFormFormik({
       setSubmitting(false);
       resetForm();
 
-      safeInvoke(onSubmitSuccess, values, form, submitPayload, response);
+      safeInvoke(onSubmitSuccess, values, form, submitPayload, response.data);
     };
 
     const onError = () => {
@@ -112,7 +114,7 @@ function VendorFormFormik({
         validationSchema={
           isNewMode ? CreateVendorFormSchema : EditVendorFormSchema
         }
-        initialValues={initialValues}
+        initialValues={initialFormValues}
         onSubmit={handleFormSubmit}
       >
         <Form>

packages/webapp/src/hooks/state/autofill.ts

@@ -0,0 +1,94 @@
+// @ts-nocheck
+import { useCallback, useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import {
+  addAutofill,
+  removeAutofill,
+  resetAutofill,
+} from '@/store/dashboard/dashboard.actions';
+
+const getAutofillPayload = (state, autofillRef) => {
+  return typeof state.dashboard.autofill[autofillRef + ''] !== 'undefined'
+    ? state.dashboard.autofill[autofillRef]
+    : null;
+};
+
+const getAutofillPayloadSelectorFactory = () =>
+  createSelector(getAutofillPayload, (payload) => payload);
+
+/**
+ *
+ * @param {number} autofillRef
+ * @returns {any}
+ */
+const useGetAutofillPayload = (autofillRef: number) => {
+  const getAutofillPayloadSelector = getAutofillPayloadSelectorFactory();
+
+  return useSelector((state) => getAutofillPayloadSelector(state, autofillRef));
+};
+
+/**
+ *
+ * @returns
+ */
+export const useAddAutofillRef = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (autofillRef: number, payload: any) => {
+      return dispatch(addAutofill(autofillRef, payload));
+    },
+    [dispatch],
+  );
+};
+
+/**
+ *
+ * @returns
+ */
+export const useRemoveAutofillRef = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (autofillRef: number) => {
+      return dispatch(removeAutofill(autofillRef));
+    },
+    [dispatch],
+  );
+};
+
+/**
+ *
+ * @returns
+ */
+export const useResetAutofillRefs = () => {
+  const dispatch = useDispatch();
+
+  return () => {
+    return dispatch(resetAutofill());
+  };
+};
+
+/**
+ *
+ * @param {(payload: any, ref: number) => void} callback
+ * @returns {number}
+ */
+export const useCreateAutofillListener = (
+  callback: (payload: any, ref: number) => void,
+): number => {
+  const ref = useRef<number>(Date.now());
+  const autofillPayload = useGetAutofillPayload(ref.current);
+  const removeAutofill = useRemoveAutofillRef();
+
+  useEffect(() => {
+    if (autofillPayload) {
+      callback(autofillPayload, ref.current);
+      removeAutofill(ref.current);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autofillPayload, removeAutofill]);
+
+  return ref.current;
+};

packages/webapp/src/lang/ar/index.json

@@ -161,7 +161,7 @@
   "edit_expense_details": "تعديل المصروف",
   "expenses_list": "قائمة المصروفات",
   "edit_category_details": "تعديل التصنيف",
-  "category_list": "قائمة التصنيفات",
+  "categories_list": "قائمة التصنيفات",
   "edit_item_details": "تعديل المنتج",
   "items_list": "قائمة المنتجات",
   "edit_custom_view": "تعديل العرض المخصص",
@@ -618,7 +618,7 @@
   "bill_amount": "مبلغ الفاتورة",
   "payment_no_": "رقم سند الدفع",
   "new_payment_made": "سند موردين جديد",
-  "payment_made_list": "قائمة سندات الموردين",
+  "payments_made_list": "قائمة سندات الموردين",
   "select_vender_account": "اختار حساب المورد",
   "the_payment_made_has_been_edited_successfully": "تم تعديل سند المورد التي تم إجراؤه بنجاح.",
   "the_payment_made_has_been_created_successfully": "تم إنشاء سند مورد بنجاح.",

packages/webapp/src/lang/en/index.json

@@ -157,7 +157,7 @@
   "manual_journals": "Manual Journals",
   "edit_expense_details": "Edit Expense Details",
   "edit_category_details": "Edit Category Details",
-  "category_list": "Category List",
+  "categories_list": "Categories List",
   "edit_item_details": "Edit Item Details",
   "items_list": "Items List",
   "edit_custom_view": "Edit Custom View",
@@ -586,7 +586,7 @@
   "the_payment_received_transaction_has_been_edited": "The payment received transaction has been edited successfully.",
   "once_delete_this_payment_received_you_will_able_to_restore_it": "Once you delete this payment received, you won't be able to restore it later. Are you sure you want to delete this payment transaction?",
   "select_invoice": "Select Invoice",
-  "payment_mades": "Payment Mades",
+  "payments_made": "Payments Made",
   "subscription": "Subscription",
   "plan_slug": "Plan slug",
   "billing": "Billing",
@@ -615,14 +615,14 @@
   "bill_amount": "Bill Amount",
   "payment_no_": "Payment number",
   "new_payment_made": "New Payment Made",
-  "payment_made_list": "Payment Made List",
+  "payments_made_list": "Payments Made List",
   "payment_account": "Payment Account",
   "select_vender_account": "Select Vender Account...",
   "select_payment_account": "Select Payment Account...",
   "the_payment_made_has_been_edited_successfully": "The payment made has been edited successfully.",
   "the_payment_made_has_been_created_successfully": "The payment made has been created successfully.",
   "the_payment_made_has_been_deleted_successfully": "The payment made has been deleted successfully.",
-  "once_delete_this_payment_made_you_will_able_to_restore_it": "Once you delete this payment made, you won't be able to restore it later. Are you sure you want to delete this payment made?",
+  "once_delete_this_payment_made_you_will_able_to_restore_it": "Once you delete this payment transaction, you won't be able to restore it later. Are you sure you want to delete this payment made?",
   "sellable": "Sellable",
   "purchasable": "Purchasable",
   "sell_account": "Sell Account",
@@ -941,7 +941,7 @@
   "new_sale_invoice": " New sale invoice",
   "there_is_no_payable_bills_for_this_vendor_that_can_be_applied_for_this_payment": "There is no payable bills for this vendor that can be applied for this payment",
   "please_select_a_vendor_to_display_all_open_bills_for_it": "Please select a vendor to display all open bills for it.",
-  "payment_made_details": "Payment made details",
+  "payment_made_details": "Payment Made Details",
   "there_is_no_inventory_adjustments_transactions_yet": "There is no inventory adjustments transactions yet.",
   "create_and_manage_your_organization_s_customers": "Create and manage your organization's customers.",
   "salutation": "Salutation",
@@ -1741,7 +1741,7 @@
   "credit_note.drawer.subtitle": "Branch: {value}",
   "payment_received.drawer.title": "Payment Received Details ({number})",
   "payment_received.drawer.subtitle": "Branch: {value}",
-  "payment_made.drawer.title": "Payment made details {number}",
+  "payment_made.drawer.title": "Payment Made Details {number}",
   "payment_made.drawer.subtitle": "Branch: {value}",
   "manual_journal.drawer.title": "Manual journal details ({number})",
   "expense.drawer.title": "Expense details",
@@ -2197,7 +2197,7 @@
   "sidebar.purchases": "Purchases",
   "sidebar.bills": "Bills",
   "sidebar.vendor_credits": "Vendor Credits",
-  "sidebar.payment_mades": "Payment Mades",
+  "sidebar.payments_made": "Payments Made",
   "sidebar.new_purchase_invoice": "New Purchase Invoice",
   "sidebar.new_vendor_credit": "New Vendor Credit",
   "sidebar.new_payment_made": "New Payment Made",

packages/webapp/src/routes/dashboard.tsx

@@ -90,7 +90,7 @@ export const getDashboardRoutes = () => [
       () => import('@/containers/ItemsCategories/ItemCategoriesList'),
     ),
     breadcrumb: intl.get('categories'),
-    pageTitle: intl.get('category_list'),
+    pageTitle: intl.get('categories_list'),
     defaultSearchResource: RESOURCES_TYPES.ITEM,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
@@ -1095,9 +1095,9 @@ export const getDashboardRoutes = () => [
 
   // Payment modes.
   {
-    path: `/payment-mades/import`,
+    path: `/payments-made/import`,
     component: lazy(
-      () => import('@/containers/Purchases/PaymentMades/PaymentMadesImport'),
+      () => import('@/containers/Purchases/PaymentsMade/PaymentsMadeImport'),
     ),
     name: 'payment-made-edit',
     breadcrumb: intl.get('edit'),
@@ -1107,11 +1107,11 @@ export const getDashboardRoutes = () => [
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
   {
-    path: `/payment-mades/:id/edit`,
+    path: `/payments-made/:id/edit`,
     component: lazy(
       () =>
         import(
-          '@/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage'
+          '@/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormPage'
         ),
     ),
     name: 'payment-made-edit',
@@ -1123,11 +1123,11 @@ export const getDashboardRoutes = () => [
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
   {
-    path: `/payment-mades/new`,
+    path: `/payments-made/new`,
     component: lazy(
       () =>
         import(
-          '@/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage'
+          '@/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormPage'
         ),
     ),
     name: 'payment-made-new',
@@ -1139,15 +1139,15 @@ export const getDashboardRoutes = () => [
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
   {
-    path: `/payment-mades`,
+    path: `/payments-made`,
     component: lazy(
       () =>
         import(
-          '@/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList'
+          '@/containers/Purchases/PaymentsMade/PaymentsLanding/PaymentMadeList'
         ),
     ),
-    breadcrumb: intl.get('payment_made_list'),
+    breadcrumb: intl.get('payments_made_list'),
-    pageTitle: intl.get('payment_made_list'),
+    pageTitle: intl.get('payments_made_list'),
     defaultSearchResource: RESOURCES_TYPES.PAYMENT_MADE,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },

packages/webapp/src/store/dashboard/dashboard.actions.tsx

@@ -125,3 +125,23 @@ export function closeSidebarSubmenu() {
     type: t.SIDEBAR_SUBMENU_CLOSE,
   };
 }
+
+export function addAutofill(autofillRef: number, payload: any) {
+  return {
+    type: t.ADD_AUTOFILL_REF,
+    payload: { ref: autofillRef, payload }
+  }
+}
+
+export function removeAutofill(autofillRef: number) {
+  return {
+    type: t.REMOVE_AUTOFILL_REF,
+    payload: { ref: autofillRef}
+  }
+}
+
+export function resetAutofill() {
+  return {
+    type: t.RESET_AUTOFILL_REF,
+  }
+}

packages/webapp/src/store/dashboard/dashboard.reducer.tsx

@@ -1,11 +1,10 @@
 // @ts-nocheck
 import { createReducer } from '@reduxjs/toolkit';
-import { isUndefined, isNumber } from 'lodash';
+import { isUndefined, isNumber, omit } from 'lodash';
 import t from '@/store/types';
 import { persistReducer, purgeStoredState } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 
-
 const initialState = {
   pageTitle: '',
   pageSubtitle: '',
@@ -23,6 +22,7 @@ const initialState = {
   appIntlIsLoading: true,
   sidebarSubmenu: { isOpen: false, submenuId: null },
   features: {},
+  autofill: {},
 };
 
 const STORAGE_KEY = 'bigcapital:dashboard';
@@ -143,6 +143,18 @@ const reducerInstance = createReducer(initialState, {
   [t.RESET]: () => {
     purgeStoredState(CONFIG);
   },
+
+  [t.ADD_AUTOFILL_REF]: (state, action) => {
+    state.autofill[action.payload.ref] = action.payload.payload || null;
+  },
+
+  [t.REMOVE_AUTOFILL_REF]: (state, action) => {
+    state.autofill = omit(state.autofill, [action.payload.ref]);
+  },
+
+  [t.RESET_AUTOFILL_REF]: (state, action) => {
+    state.autofill = {};
+  },
 });
 
 export default persistReducer(CONFIG, reducerInstance);

packages/webapp/src/store/dashboard/dashboard.types.tsx

@@ -21,4 +21,7 @@ export default {
   SPLASH_START_LOADING: 'SPLASH_START_LOADING',
   SPLASH_STOP_LOADING: 'SPLASH_STOP_LOADING',
   SET_FEATURE_DASHBOARD_META: 'SET_FEATURE_DASHBOARD_META',
+  ADD_AUTOFILL_REF: 'ADD_AUTOFILL_REF',
+  REMOVE_AUTOFILL_REF: 'REMOVE_AUTOFILL_REF',
+  RESET_AUTOFILL_REF: 'RESET_AUTOFILL_REF'
 };