Fix: PaymentReceive Number Dialog

client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js

@@ -23,30 +23,16 @@ import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withPaymentReceiveDetail from './withPaymentReceiveDetail';
+import withPaymentReceives from './withPaymentReceives';
+import withSettings from 'containers/Settings/withSettings';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import { AppToaster } from 'components';
 
 import { compose } from 'utils';
 
-// Default payment receive entry.
-const defaultPaymentReceiveEntry = {
-  id: null,
-  payment_amount: null,
-  invoice_id: null,
-  due_amount: null,
-};
-
-// Form initial values.
-const defaultInitialValues = {
-  customer_id: '',
-  deposit_account_id: '',
-  payment_date: moment(new Date()).format('YYYY-MM-DD'),
-  reference_no: '',
-  payment_receive_no: '',
-  description: '',
-  full_amount: '',
-  entries: [],
-};
-
+/**
+ * Payment Receive form.
+ */
 function PaymentReceiveForm({
   // #ownProps
   paymentReceiveId,
@@ -55,10 +41,22 @@ function PaymentReceiveForm({
   //#WithPaymentReceiveActions
   requestSubmitPaymentReceive,
   requestEditPaymentReceive,
+  setPaymentReceiveNumberChanged,
 
   // #withPaymentReceiveDetail
   paymentReceive,
   paymentReceiveEntries,
+
+  // #withSettings
+  paymentReceiveNextNumber,
+  paymentReceiveNumberPrefix,
+
+  // #withPaymentReceives
+  paymentReceiveNumberChanged,
+
+  // #withDashboardAction
+  changePageTitle,
+  changePageSubtitle,
 }) {
   const [amountChangeAlert, setAmountChangeAlert] = useState(false);
   const [clearLinesAlert, setClearLinesAlert] = useState(false);
@@ -71,6 +69,26 @@ function PaymentReceiveForm({
     paymentReceiveEntries,
   );
 
+  const paymentReceiveNumber = paymentReceiveNumberPrefix
+    ? `${paymentReceiveNumberPrefix}-${paymentReceiveNextNumber}`
+    : paymentReceiveNextNumber;
+
+  useEffect(() => {
+    if (paymentReceive && paymentReceiveId) {
+      changePageTitle(formatMessage({ id: 'edit_payment_receive' }));
+      changePageSubtitle(`No. ${paymentReceive.payment_receive_no}`);
+    } else {
+      changePageSubtitle(`No. ${paymentReceiveNumber}`);
+      changePageTitle(formatMessage({ id: 'payment_receive' }));
+    }
+  }, [
+    changePageTitle,
+    changePageSubtitle,
+    paymentReceive,
+    paymentReceiveId,
+    formatMessage,
+  ]);
+
   useEffect(() => {
     if (localPaymentEntries !== paymentReceiveEntries) {
       setLocalPaymentEntries(paymentReceiveEntries);
@@ -89,7 +107,7 @@ function PaymentReceiveForm({
       .required()
       .label(formatMessage({ id: 'deposit_account_' })),
     full_amount: Yup.number().nullable(),
-    payment_receive_no: Yup.number().label(
+    payment_receive_no: Yup.string().label(
       formatMessage({ id: 'payment_receive_no_' }),
     ),
     reference_no: Yup.string().min(1).max(255).nullable(),
@@ -109,6 +127,26 @@ function PaymentReceiveForm({
     ),
   });
 
+  // Default payment receive entry.
+  const defaultPaymentReceiveEntry = {
+    id: null,
+    payment_amount: null,
+    invoice_id: null,
+    due_amount: null,
+  };
+
+  // Form initial values.
+  const defaultInitialValues = {
+    customer_id: '',
+    deposit_account_id: '',
+    payment_date: moment(new Date()).format('YYYY-MM-DD'),
+    reference_no: '',
+    payment_receive_no: paymentReceiveNumber,
+    description: '',
+    full_amount: '',
+    entries: [],
+  };
+
   // Form initial values.
   const initialValues = useMemo(
     () => ({
@@ -303,6 +341,27 @@ function PaymentReceiveForm({
     [values.entries],
   );
 
+  useEffect(() => {
+    if (paymentReceiveNumberChanged) {
+      setFieldValue('payment_receive_no', paymentReceiveNumber);
+      changePageSubtitle(`No. ${paymentReceiveNumber}`);
+      setPaymentReceiveNumberChanged(false);
+    }
+  }, [
+    paymentReceiveNumber,
+    paymentReceiveNumberChanged,
+    setFieldValue,
+    changePageSubtitle,
+  ]);
+
+
+  const handlePaymentReceiveNumberChanged = useCallback(
+    (payment_receive_no) => {
+      changePageSubtitle(`No.${payment_receive_no}`);
+    },
+    [changePageSubtitle],
+  );
+
   return (
     <div
       className={classNames(
@@ -322,6 +381,7 @@ function PaymentReceiveForm({
           onFullAmountChanged={handleFullAmountChange}
           receivableFullAmount={receivableFullAmount}
           amountReceived={fullAmountReceived}
+          onPaymentReceiveNumberChanged={handlePaymentReceiveNumberChanged}
         />
         <PaymentReceiveItemsTable
           paymentReceiveId={paymentReceiveId}
@@ -388,12 +448,17 @@ function PaymentReceiveForm({
 
 export default compose(
   withPaymentReceivesActions,
+  withDashboardActions,
   withMediaActions,
-  // withPaymentReceives(({ paymentReceivesItems }) => ({
-  //   paymentReceivesItems,
-  // })),
   withPaymentReceiveDetail(({ paymentReceive, paymentReceiveEntries }) => ({
     paymentReceive,
     paymentReceiveEntries,
   })),
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
+    paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
+  })),
+  withPaymentReceives(({ paymentReceiveNumberChanged }) => ({
+    paymentReceiveNumberChanged,
+  })),
 )(PaymentReceiveForm);

client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js

@@ -13,18 +13,21 @@ import moment from 'moment';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';
-import { momentFormatter, compose, tansformDateValue } from 'utils';
+import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
 import {
   AccountsSelectList,
   ContactSelecetList,
   ErrorMessage,
   FieldRequiredHint,
+  Icon,
+  InputPrependButton,
   Hint,
   Money,
 } from 'components';
 
 import withCustomers from 'containers/Customers/withCustomers';
 import withAccounts from 'containers/Accounts/withAccounts';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 function PaymentReceiveFormHeader({
   // #useFormik
@@ -46,6 +49,11 @@ function PaymentReceiveFormHeader({
 
   // #withInvoices
   receivableInvoices,
+  // #ownProps
+  onPaymentReceiveNumberChanged,
+
+  //#withDialogActions
+  openDialog,
 }) {
   const handleDateChange = useCallback(
     (date_filed) => (date) => {
@@ -78,6 +86,14 @@ function PaymentReceiveFormHeader({
     triggerFullAmountChanged(receivableFullAmount);
   };
 
+  const handlePaymentReceiveNumberChange = useCallback(() => {
+    openDialog('payment-receive-number-form', {});
+  }, [openDialog]);
+
+  const handlePaymentReceiveNumberChanged = (event) => {
+    saveInvoke(onPaymentReceiveNumberChanged, event.currentTarget.value);
+  };
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
@@ -177,7 +193,22 @@ function PaymentReceiveFormHeader({
                 Intent.DANGER
               }
               minimal={true}
+              rightElement={
+                <InputPrependButton
+                  buttonProps={{
+                    onClick: handlePaymentReceiveNumberChange,
+                    icon: <Icon icon={'settings-18'} />,
+                  }}
+                  tooltip={true}
+                  tooltipProps={{
+                    content:
+                      'Setting your auto-generated Payment Receive number',
+                    position: Position.BOTTOM_LEFT,
+                  }}
+                />
+              }
               {...getFieldProps('payment_receive_no')}
+              onBlur={handlePaymentReceiveNumberChanged}
             />
           </FormGroup>
 
@@ -255,4 +286,5 @@ export default compose(
   withAccounts(({ accountsList }) => ({
     accountsList,
   })),
+  withDialogActions,
 )(PaymentReceiveFormHeader);

client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js

@@ -35,17 +35,6 @@ function PaymentReceiveFormPage({
   requestFetchCustomers
 }) {
   const { id: paymentReceiveId } = useParams();
-  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    console.log(paymentReceiveId, 'X');
-
-    if (paymentReceiveId) {
-      changePageTitle(formatMessage({ id: 'edit_payment_receive' }));
-    } else {
-      changePageTitle(formatMessage({ id: 'payment_receive' }));
-    }
-  }, [changePageTitle, paymentReceiveId, formatMessage]);
 
   // Fetches payment recevie details.
   const fetchPaymentReceive = useQuery(
@@ -72,7 +61,7 @@ function PaymentReceiveFormPage({
       loading={
         fetchPaymentReceive.isFetching ||
         fetchAccounts.isFetching ||
-        fetchSettings.isFetching || 
+        // fetchSettings.isFetching || 
         fetchCustomers.isFetching
       }>
       <PaymentReceiveForm

client/src/containers/Sales/PaymentReceive/withPaymentReceives.js

@@ -6,7 +6,6 @@ import {
   getPaymentReceiveTableQuery,
 } from 'store/PaymentReceive/paymentReceive.selector';
 
-
 export default (mapState) => {
   const getPyamentReceivesItems = getPaymentReceiveCurrentPageFactory();
   const getPyamentReceivesPaginationMeta = getPaymentReceivePaginationMetaFactory();
@@ -17,8 +16,14 @@ export default (mapState) => {
       paymentReceivesViews: getResourceViews(state, props, 'payment_receives'),
       paymentReceivesItems: state.paymentReceives.items,
       paymentReceivesTableQuery: query,
-      paymentReceivesPageination: getPyamentReceivesPaginationMeta(state, props, query),
+      paymentReceivesPageination: getPyamentReceivesPaginationMeta(
+        state,
+        props,
+        query,
+      ),
       paymentReceivesLoading: state.paymentReceives.loading,
+
+      paymentReceiveNumberChanged: state.paymentReceives.journalNumberChanged,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js

@@ -13,7 +13,7 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(submitPaymentReceive({ form })),
   requestFetchPaymentReceive: (id) => dispatch(fetchPaymentReceive({ id })),
   requestEditPaymentReceive: (id, form) =>
-    dispatch(editPaymentReceive( id, form )),
+    dispatch(editPaymentReceive(id, form)),
   requestDeletePaymentReceive: (id) => dispatch(deletePaymentReceive({ id })),
   requestFetchPaymentReceiveTable: (query = {}) =>
     dispatch(fetchPaymentReceivesTable({ query: { ...query } })),
@@ -29,6 +29,10 @@ const mapDispatchToProps = (dispatch) => ({
       type: t.PAYMENT_RECEIVE_TABLE_QUERIES_ADD,
       queries,
     }),
+    setPaymentReceiveNumberChanged: (isChanged) =>
+    dispatch({
+      type: t.PAYMENT_RECEIVE_NUMBER_CHANGED,
+      payload: { isChanged },
+    }),
 });
-
 export default connect(null, mapDispatchToProps);