feat: add Auto increment in credit note number.

src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js

@@ -1,5 +1,10 @@
 import React from 'react';
-import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, Field, ErrorMessage } from 'formik';
 import { CLASSES } from 'common/classes';
@@ -7,10 +12,14 @@ import classNames from 'classnames';
 import {
   ContactSelecetList,
   FieldRequiredHint,
+  InputPrependButton,
   Icon,
   FormattedMessage as T,
 } from 'components';
-import { customerNameFieldShouldUpdate } from './utils';
+import {
+  customerNameFieldShouldUpdate,
+  useObserveCreditNoSettings,
+} from './utils';
 
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
 import withSettings from 'containers/Settings/withSettings';
@@ -27,10 +36,40 @@ import {
 /**
  * Credit note form header fields.
  */
-function CreditNoteFormHeaderFields() {
-  
+function CreditNoteFormHeaderFields({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  creditAutoIncrement,
+  creditNumberPrefix,
+  creditNextNumber,
+}) {
   // Credit note form context.
   const { customers } = useCreditNoteFormContext();
+
+  // Handle credit number changing.
+  const handleCreditNumberChange = () => {
+    openDialog('credit-number-form');
+  };
+
+  // Handle credit no. field blur.
+  const handleCreditNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && creditAutoIncrement) {
+      openDialog('credit-number-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+  };
+
+  // Syncs credit number settings with form.
+  useObserveCreditNoSettings(creditNumberPrefix, creditNextNumber);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
@@ -96,11 +135,34 @@ function CreditNoteFormHeaderFields() {
             label={<T id={'credit_note.label_credit_note'} />}
             labelInfo={<FieldRequiredHint />}
             inline={true}
-            className={classNames('form-group--credit_note_number', CLASSES.FILL)}
+            className={classNames(
+              'form-group--credit_note_number',
+              CLASSES.FILL,
+            )}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="credit_note_number" />}
           >
-            <InputGroup minimal={true} {...field} />
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handleCreditNoBlur(form, field)}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleCreditNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: (
+                    <T id={'setting_your_auto_generated_credit_note_number'} />
+                  ),
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
           </FormGroup>
         )}
       </Field>
@@ -121,5 +183,11 @@ function CreditNoteFormHeaderFields() {
     </div>
   );
 }
-
-export default CreditNoteFormHeaderFields;
+export default compose(
+  withDialogActions,
+  withSettings(({ creditNoteSettings }) => ({
+    creditAutoIncrement: creditNoteSettings?.autoIncrement,
+    creditNextNumber: creditNoteSettings?.nextNumber,
+    creditNumberPrefix: creditNoteSettings?.numberPrefix,
+  })),
+)(CreditNoteFormHeaderFields);