UIOR-1484 Implement action to clear rollover adjustment in the PO Line form

CHANGELOG.md

@@ -58,6 +58,7 @@
 * Refresh order lines after order mutate actions. Refs UIOR-1499.
 * Use ACQ holdings analyzer to check holdings abandonment. Refs UIOR-1466, UIOR-1468.
 * Migrate custom fields titles from mod-configuration to mod-settings. Refs UIOR-1501.
+* Implement action to clear rollover adjustment in the PO Line form. Refs UIOR-1484.
 
 ## [8.0.5](https://github.com/folio-org/ui-orders/tree/v8.0.5) (2025-06-30)
 [Full Changelog](https://github.com/folio-org/ui-orders/compare/v8.0.4...v8.0.5)

src/components/POLine/Cost/CostForm.js

@@ -33,9 +33,7 @@ import {
 } from '../const';
 import { CalculatedExchangeAmount } from '../CalculatedExchangeAmount';
 import calculateEstimatedPrice from '../calculateEstimatedPrice';
-import {
-  RolloverAdjustmentAmount,
-} from './RolloverAdjustmentAmount';
+import { FieldRolloverAdjustmentAmount } from './RolloverAdjustmentAmount';
 
 import styles from './CostForm.css';
 
@@ -116,9 +114,13 @@ const CostForm = ({
     </div>
   ), [isPackageLabel, isQuantityDisabled]);
 
+  const clearRolloverAdjustmentAmount = () => {
+    change('cost.fyroAdjustmentAmount', 0);
+  };
+
   const onCostChange = e => {
     if (rolloverAdjustmentAmount) {
-      change('cost.fyroAdjustmentAmount', 0);
+      clearRolloverAdjustmentAmount();
     }
 
     change(e.target.name, parseNumber(e.target.value));
@@ -197,9 +199,10 @@ const CostForm = ({
               xs={6}
               md={3}
             >
-              <RolloverAdjustmentAmount
+              <FieldRolloverAdjustmentAmount
                 currency={currency}
-                amount={rolloverAdjustmentAmount}
+                name="cost.fyroAdjustmentAmount"
+                onClear={clearRolloverAdjustmentAmount}
               />
             </Col>
           )

src/components/POLine/Cost/RolloverAdjustmentAmount/FieldRolloverAdjustmentAmount.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import { Field } from 'react-final-form';
+
+import { RolloverAdjustmentAmount } from './RolloverAdjustmentAmount';
+
+export const FieldRolloverAdjustmentAmount = ({
+  name,
+  ...props
+}) => {
+  const renderField = (renderProps) => {
+    return (
+      <RolloverAdjustmentAmount
+        amount={renderProps.input.value}
+        {...props}
+      />
+    );
+  };
+
+  return (
+    <Field
+      name={name}
+      render={renderField}
+    />
+  );
+};
+
+FieldRolloverAdjustmentAmount.propTypes = {
+  name: PropTypes.string.isRequired,
+};

src/components/POLine/Cost/RolloverAdjustmentAmount/FieldRolloverAdjustmentAmount.test.js

@@ -0,0 +1,53 @@
+import { MemoryRouter } from 'react-router';
+
+import {
+  act,
+  render,
+  screen,
+} from '@folio/jest-config-stripes/testing-library/react';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
+import stripesFinalForm from '@folio/stripes/final-form';
+
+import { FieldRolloverAdjustmentAmount } from './FieldRolloverAdjustmentAmount';
+
+const defaultProps = {
+  amount: 12.34,
+  currency: 'USD',
+  name: 'rolloverAdjustmentAmount',
+  onClear: jest.fn(),
+};
+
+const wrapper = ({ children }) => {
+  const Form = stripesFinalForm({})((props) => <form {...props}>{children}</form>);
+
+  return (
+    <MemoryRouter>
+      <Form
+        initialValues={{ rolloverAdjustmentAmount: defaultProps.amount }}
+        onSubmit={jest.fn()}
+      >
+        {children}
+      </Form>
+    </MemoryRouter>
+  );
+};
+
+const renderFieldRolloverAdjustmentAmount = (props = {}) => render(
+  <FieldRolloverAdjustmentAmount
+    {...defaultProps}
+    {...props}
+  />,
+  { wrapper },
+);
+
+describe('FieldRolloverAdjustmentAmount', () => {
+  it('should handle amount clear', async () => {
+    renderFieldRolloverAdjustmentAmount();
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole('button', { name: /times-circle-solid/i }));
+    });
+
+    expect(defaultProps.onClear).toHaveBeenCalled();
+  });
+});

src/components/POLine/Cost/RolloverAdjustmentAmount/RolloverAdjustmentAmount.js

@@ -1,20 +1,20 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
 import {
-  KeyValue,
+  IconButton,
   InfoPopover,
+  KeyValue,
+  Layout,
 } from '@folio/stripes/components';
-import {
-  AmountWithCurrencyField,
-} from '@folio/stripes-acq-components';
+import { AmountWithCurrencyField } from '@folio/stripes-acq-components';
 
 export const RolloverAdjustmentAmount = ({
   amount,
-  currency,
   component,
+  currency,
   name,
+  onClear,
 }) => {
   const KeyValueComponent = component || KeyValue;
 
@@ -33,10 +33,21 @@ export const RolloverAdjustmentAmount = ({
         </div>
       }
     >
-      <AmountWithCurrencyField
-        currency={currency}
-        amount={amount}
-      />
+      <Layout className="flex">
+        <AmountWithCurrencyField
+          currency={currency}
+          amount={amount}
+        />
+        {typeof onClear === 'function' && (
+          <IconButton
+            data-testid="clear-rollover-adjustment-amount"
+            disabled={!amount}
+            icon="times-circle-solid"
+            iconSize="small"
+            onClick={onClear}
+          />
+        )}
+      </Layout>
     </KeyValueComponent>
   );
 };
@@ -46,4 +57,5 @@ RolloverAdjustmentAmount.propTypes = {
   component: PropTypes.node,
   currency: PropTypes.string,
   name: PropTypes.string,
+  onClear: PropTypes.func,
 };

src/components/POLine/Cost/RolloverAdjustmentAmount/index.js

@@ -1 +1,2 @@
 export * from './RolloverAdjustmentAmount';
+export { FieldRolloverAdjustmentAmount } from './FieldRolloverAdjustmentAmount';

src/components/POLine/POLineForm.js

@@ -262,7 +262,7 @@ function POLineForm({
 
   const getPaneFooter = () => {
     const isSubmitBtnDisabled = !enableSaveBtn && (
-      (pristine && !templateValue?.id) // A user could use an ultimate template with no changes required to save
+      (pristine && (!templateValue?.id || lineId)) // A user could use an ultimate template with no changes required to save a new PO Line
       || submitting
       || isExpenseClassProcessing
     );