refactor: invoice, estimate, receipt, credit note and payment received date input fields

2026-02-17 13:20:31 +00:00 · 2024-10-13 18:01:43 +02:00
parent 3300a6a499
commit 28ac9b2d90
5 changed files with 160 additions and 227 deletions
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
@@ -17,18 +17,13 @@ import {
  FFormGroup,
  CustomersSelect,
  Stack,
+  FDateInput,
 } from '@/components';
 import { customerNameFieldShouldUpdate } from './utils';

 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
 import { CreditNoteExchangeRateInputField } from './components';
 import { CreditNoteTransactionNoField } from './CreditNoteTransactionNoField';
-import {
-  momentFormatter,
-  tansformDateValue,
-  inputIntent,
-  handleDateChange,
-} from '@/utils';
 import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';

 const getCreditNoteFieldsStyle = (theme: Theme) => css`
@@ -63,30 +58,26 @@ export default function CreditNoteFormHeaderFields() {
      <CreditNoteExchangeRateInputField />

      {/* ----------- Credit note date ----------- */}
-      <FastField name={'credit_note_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'credit_note.label_credit_note_date'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--credit_note_date', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="credit_note_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('credit_note_date', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'credit_note_date'}
+        label={<T id={'credit_note.label_credit_note_date'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fastField
+      >
+        <FDateInput
+          name={'credit_note_date'}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+          inputProps={{
+            leftIcon: <Icon icon={'date-range'} />,
+            fill: true
+          }}
+          fill
+          fastField
+        />
+      </FFormGroup>

      {/* ----------- Credit note # ----------- */}
      <CreditNoteTransactionNoField />
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
@@ -1,9 +1,8 @@
 // @ts-nocheck
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { FormGroup, Position, Classes } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { Position, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
 import { css } from '@emotion/css';
 import {
  FeatureCan,
@@ -15,15 +14,9 @@ import {
  CustomersSelect,
  FInputGroup,
  Stack,
+  FDateInput,
 } from '@/components';
-import {
-  momentFormatter,
-  tansformDateValue,
-  inputIntent,
-  handleDateChange,
-} from '@/utils';
 import { customersFieldShouldUpdate } from './utils';
-import { CLASSES } from '@/constants/classes';
 import { Features } from '@/constants';
 import { ProjectsSelect } from '@/containers/Projects/components';
 import {
@@ -70,60 +63,47 @@ export default function EstimateFormHeader() {
      <EstimateExchangeRateInputField />

      {/* ----------- Estimate Date ----------- */}
-      <FastField name={'estimate_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'estimate_date'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames(CLASSES.FILL, 'form-group--estimate-date')}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="estimate_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('estimate_date', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'estimate_date'}
+        label={<T id={'estimate_date'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fastField
+      >
+        <FDateInput
+          name={'estimate_date'}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+          inputProps={{
+            leftIcon: <Icon icon={'date-range'} />,
+            fill: true,
+          }}
+          fill
+          fastField
+        />
+      </FFormGroup>

      {/* ----------- Expiration date ----------- */}
-      <FastField name={'expiration_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'expiration_date'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames(
-              CLASSES.FORM_GROUP_LIST_SELECT,
-              CLASSES.FILL,
-              'form-group--expiration-date',
-            )}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="expiration_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('expiration_date', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'expiration_date'}
+        label={<T id={'expiration_date'} />}
+        inline
+        fastField
+      >
+        <FDateInput
+          name={'expiration_date'}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+          inputProps={{
+            leftIcon: <Icon icon={'date-range'} />,
+            fill: true,
+          }}
+          fill
+          fastField
+        />
+      </FFormGroup>

      {/* ----------- Estimate number ----------- */}
      <EstimateFormEstimateNumberField />
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
@@ -2,9 +2,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { FormGroup, Position, Classes } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { Position, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
 import { css } from '@emotion/css';
 import { Theme, useTheme } from '@emotion/react';

@@ -16,20 +15,14 @@ import {
  FeatureCan,
  CustomersSelect,
  Stack,
-  Group,
  FInputGroup,
  Icon,
+  FDateInput,
 } from '@/components';
-import {
-  momentFormatter,
-  tansformDateValue,
-  inputIntent,
-  handleDateChange,
-} from '@/utils';
-import { CLASSES } from '@/constants/classes';
 import { customerNameFieldShouldUpdate } from './utils';

 import { useInvoiceFormContext } from './InvoiceFormProvider';
+import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
 import {
  InvoiceExchangeRateInputField,
  InvoiceProjectSelectButton,
@@ -40,7 +33,6 @@ import {
  ProjectBillableEntriesLink,
 } from '@/containers/Projects/components';
 import { Features } from '@/constants';
-import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';

 const getInvoiceFieldsStyle = (theme: Theme) => css`
  .${theme.bpPrefix}-form-group {
@@ -77,62 +69,55 @@ export default function InvoiceFormHeaderFields() {
      <InvoiceExchangeRateInputField />

      {/* ----------- Invoice date ----------- */}
-      <FastField name={'invoice_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'invoice_date'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames(CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="invoice_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('invoice_date', formattedDate);
-              })}
-              popoverProps={{
-                position: Position.BOTTOM_LEFT,
-                minimal: true,
-              }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'invoice_date'}
+        label={<T id={'invoice_date'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fastField
+      >
+        <FDateInput
+          name={'invoice_date'}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          popoverProps={{
+            position: Position.BOTTOM_LEFT,
+            minimal: true,
+            fill: true,
+          }}
+          inputProps={{
+            leftIcon: <Icon icon={'date-range'} />,
+          }}
+          fill
+          fastField
+        />
+      </FFormGroup>

      {/* ----------- Due date ----------- */}
-      <FastField name={'due_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'due_date'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames(CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="due_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('due_date', formattedDate);
-              })}
-              popoverProps={{
-                position: Position.BOTTOM_LEFT,
-                minimal: true,
-              }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'due_date'}
+        label={<T id={'due_date'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fastField
+      >
+        <FDateInput
+          name={'due_date'}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          popoverProps={{
+            position: Position.BOTTOM_LEFT,
+            minimal: true,
+            fill: true,
+          }}
+          inputProps={{
+            leftIcon: <Icon icon={'date-range'} />,
+            fill: true,
+          }}
+          fill
+          fastField
+        />
+      </FFormGroup>

      {/* ----------- Invoice number ----------- */}
      <InvoiceFormInvoiceNumberField />
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
@@ -3,16 +3,14 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
 import {
-  FormGroup,
  InputGroup,
  Position,
  Classes,
  ControlGroup,
  Button,
 } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
 import { isEmpty, toSafeInteger } from 'lodash';
-import { FastField, useFormikContext, ErrorMessage } from 'formik';
+import { useFormikContext } from 'formik';
 import { css } from '@emotion/css';
 import { Theme, useTheme } from '@emotion/react';

@@ -22,15 +20,9 @@ import {
  FormattedMessage as T,
  FMoneyInputGroup,
  Stack,
+  FDateInput,
 } from '@/components';
-import { CLASSES } from '@/constants/classes';
-import {
-  safeSumBy,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-  inputIntent,
-} from '@/utils';
+import { safeSumBy } from '@/utils';
 import {
  FFormGroup,
  AccountsSelect,
@@ -58,7 +50,6 @@ import {
 import { Features } from '@/constants';
 import { PaymentReceivePaymentNoField } from './PaymentReceivePaymentNoField';

-
 const getHeaderFieldsStyle = (theme: Theme) => css`
  .${theme.bpPrefix}-form-group {
    margin-bottom: 0;
@@ -120,31 +111,28 @@ export default function PaymentReceiveHeaderFields() {
        name={'exchange_rate'}
        formGroupProps={{ label: ' ', inline: true }}
      />
+
      {/* ------------- Payment date ------------- */}
-      <FastField name={'payment_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'payment_date'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--select-list', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('payment_date', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'payment_date'}
+        label={<T id={'payment_date'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fastField
+      >
+        <FDateInput
+          name={'payment_date'}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+          inputProps={{
+            leftIcon: <Icon icon={'date-range'} />,
+            fill: true,
+          }}
+          fill
+          fastField
+        />
+      </FFormGroup>

      {/* ------------ Full amount ------------ */}
      <FFormGroup
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
@@ -2,13 +2,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
-import { FormGroup, Position, Classes } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
+import { useFormikContext } from 'formik';
+import { Position, Classes } from '@blueprintjs/core';
 import { css } from '@emotion/css';
 import { Theme, useTheme } from '@emotion/react';

-import { CLASSES } from '@/constants/classes';
 import { ACCOUNT_TYPE } from '@/constants/accountTypes';
 import { Features } from '@/constants';
 import {
@@ -22,14 +20,9 @@ import {
  FeatureCan,
  FInputGroup,
  Stack,
+  FDateInput,
 } from '@/components';
 import { ProjectsSelect } from '@/containers/Projects/components';
-import {
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-  inputIntent,
-} from '@/utils';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 import { accountsFieldShouldUpdate, customersFieldShouldUpdate } from './utils';
 import {
@@ -99,29 +92,25 @@ export default function ReceiptFormHeader() {
      </FFormGroup>

      {/* ----------- Receipt date ----------- */}
-      <FastField name={'receipt_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'receipt_date'} />}
-            inline={true}
-            className={classNames(CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="receipt_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('receipt_date', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'receipt_date'}
+        label={<T id={'receipt_date'} />}
+        inline
+        fastField
+      >
+        <FDateInput
+          name={'receipt_date'}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+          inputProps={{
+            leftIcon: <Icon icon={'date-range'} />,
+            fill: true,
+          }}
+          fill
+          fastField
+        />
+      </FFormGroup>

      {/* ----------- Receipt number ----------- */}
      <ReceiptFormReceiptNumberField />