chore(webapp): move components in separate files

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx

@@ -13,9 +13,8 @@ import {
 import { DateInput } from '@blueprintjs/datetime';
 import { toSafeInteger } from 'lodash';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
-import * as R from 'ramda';
 
-import { FInputGroup, FeatureCan, FormattedMessage as T } from '@/components';
+import { FeatureCan, FormattedMessage as T } from '@/components';
 import { useAutofocus } from '@/hooks';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -31,7 +30,6 @@ import {
   CustomerSelectField,
   FieldRequiredHint,
   Icon,
-  InputPrependButton,
   MoneyInputGroup,
   InputPrependText,
   CustomerDrawerLink,
@@ -46,9 +44,6 @@ import {
   PaymentReceiveProjectSelectButton,
 } from './components';
 
-import withDialogActions from '@/containers/Dialog/withDialogActions';
-import withSettings from '@/containers/Settings/withSettings';
-
 import {
   amountPaymentEntries,
   fullAmountPaymentEntries,
@@ -56,87 +51,7 @@ import {
   accountsFieldShouldUpdate,
 } from './utils';
 import { Features } from '@/constants';
-
-/**
- * Payment receive number field.
- */
-const PaymentReceivePaymentNoField = R.compose(
-  withSettings(({ paymentReceiveSettings }) => ({
-    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
-  })),
-  withDialogActions,
-)(
-  ({
-    // #withDialogActions
-    openDialog,
-
-    // #withSettings
-    paymentReceiveAutoIncrement,
-  }) => {
-    const { values, setFieldValue } = useFormikContext();
-
-    // Handle click open payment receive number dialog.
-    const handleClickOpenDialog = () => {
-      openDialog('payment-receive-number-form');
-    };
-    // Handle payment number field blur.
-    const handlePaymentNoBlur = (event) => {
-      const newValue = event.target.value;
-
-      // Show the confirmation dialog if the value has changed and auto-increment
-      // mode is enabled.
-      if (
-        values.payment_receive_no !== newValue &&
-        paymentReceiveAutoIncrement
-      ) {
-        openDialog('payment-receive-number-form', {
-          initialFormValues: {
-            onceManualNumber: newValue,
-            incrementMode: 'manual-transaction',
-          },
-        });
-      }
-      // Setting the payment number to the form will be manually in case
-      // auto-increment is disable.
-      if (!paymentReceiveAutoIncrement) {
-        setFieldValue('payment_receive_no', newValue);
-        setFieldValue('payment_receive_no_manually', newValue);
-      }
-    };
-    return (
-      <FFormGroup
-        name={'payment_receive_no'}
-        label={<T id={'payment_receive_no'} />}
-        inline={true}
-        labelInfo={<FieldRequiredHint />}
-      >
-        <ControlGroup fill={true}>
-          <FInputGroup
-            name={'payment_receive_no'}
-            minimal={true}
-            value={values.payment_receive_no}
-            asyncControl={true}
-            onBlur={handlePaymentNoBlur}
-            onChange={() => {}}
-          />
-          <InputPrependButton
-            buttonProps={{
-              onClick: handleClickOpenDialog,
-              icon: <Icon icon={'settings-18'} />,
-            }}
-            tooltip={true}
-            tooltipProps={{
-              content: (
-                <T id={'setting_your_auto_generated_payment_receive_number'} />
-              ),
-              position: Position.BOTTOM_LEFT,
-            }}
-          />
-        </ControlGroup>
-      </FFormGroup>
-    );
-  },
-);
+import { PaymentReceivePaymentNoField } from './PaymentReceivePaymentNoField';
 
 /**
  * Payment receive header fields.

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx

@@ -0,0 +1,99 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import { Position, ControlGroup } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import * as R from 'ramda';
+
+import { FInputGroup, FormattedMessage as T } from '@/components';
+import {
+  FFormGroup,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+} from '@/components';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+/**
+ * Payment receive number field.
+ */
+export const PaymentReceivePaymentNoField = R.compose(
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
+  })),
+  withDialogActions,
+)(
+  ({
+    // #withDialogActions
+    openDialog,
+
+    // #withSettings
+    paymentReceiveAutoIncrement,
+  }) => {
+    const { values, setFieldValue } = useFormikContext();
+
+    // Handle click open payment receive number dialog.
+    const handleClickOpenDialog = () => {
+      openDialog('payment-receive-number-form');
+    };
+    // Handle payment number field blur.
+    const handlePaymentNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      // Show the confirmation dialog if the value has changed and auto-increment
+      // mode is enabled.
+      if (
+        values.payment_receive_no !== newValue &&
+        paymentReceiveAutoIncrement
+      ) {
+        openDialog('payment-receive-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      // Setting the payment number to the form will be manually in case
+      // auto-increment is disable.
+      if (!paymentReceiveAutoIncrement) {
+        setFieldValue('payment_receive_no', newValue);
+        setFieldValue('payment_receive_no_manually', newValue);
+      }
+    };
+    return (
+      <FFormGroup
+        name={'payment_receive_no'}
+        label={<T id={'payment_receive_no'} />}
+        inline={true}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <ControlGroup fill={true}>
+          <FInputGroup
+            name={'payment_receive_no'}
+            minimal={true}
+            value={values.payment_receive_no}
+            asyncControl={true}
+            onBlur={handlePaymentNoBlur}
+            onChange={() => {}}
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleClickOpenDialog,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: (
+                <T id={'setting_your_auto_generated_payment_receive_number'} />
+              ),
+              position: Position.BOTTOM_LEFT,
+            }}
+          />
+        </ControlGroup>
+      </FFormGroup>
+    );
+  },
+);
+
+PaymentReceivePaymentNoField.displayName = 'PaymentReceivePaymentNoField';