UIOR-1569: Correct refresh of 'prefix' and 'suffix' field

We add a 'shouldRevalidatePoNumber' condition to the validators of
'FieldPrefix' and 'FieldSuffix' s.t. we only validate when the field
'poNumber' is actually available.

Author: charismatic-claire

src/common/POFields/FieldPrefix.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { useForm } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -13,13 +14,17 @@ const FieldPrefix = ({
   prefixes,
   ...rest
 }) => {
+  const { getFieldState } = useForm();
+  const poNumberFieldState = getFieldState?.(PO_FORM_FIELDS.poNumber);
+  const shouldRevalidatePoNumber = poNumberFieldState?.value;
+
   return (
     <FieldSelect
       dataOptions={prefixes}
       isNonInteractive={isNonInteractive}
       label={<FormattedMessage id="ui-orders.orderDetails.orderNumberPrefix" />}
       name={PO_FORM_FIELDS.poNumberPrefix}
-      validateFields={[PO_FORM_FIELDS.poNumber]}
+      validateFields={shouldRevalidatePoNumber ? [PO_FORM_FIELDS.poNumber] : []}
       {...rest}
     />
   );

src/common/POFields/FieldPrefix.test.js

@@ -1,9 +1,31 @@
-import { Form } from 'react-final-form';
+import { Form, useForm } from 'react-final-form';
 
 import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
 
+import { PO_FORM_FIELDS } from '../constants';
 import FieldPrefix from './FieldPrefix';
 
+jest.mock('react-final-form', () => {
+  const actual = jest.requireActual('react-final-form');
+
+  return {
+    ...actual,
+    useForm: jest.fn(),
+  };
+});
+
+const mockFieldSelectFinal = jest.fn(({ label }) => label);
+
+jest.mock('@folio/stripes-acq-components', () => {
+  const React = jest.requireActual('react');
+  const PropTypes = jest.requireActual('prop-types');
+
+  return {
+    FieldSelectFinal: (props) => mockFieldSelectFinal(props),
+    fieldSelectOptionsShape: PropTypes.arrayOf(PropTypes.shape({})),
+  };
+});
+
 const defaultProps = {
   prefixes: [],
 };
@@ -21,9 +43,47 @@ const renderFieldPrefix = (props = {}) => render(
 );
 
 describe('FieldPrefix', () => {
-  it('should render \'prefix\' field', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the prefix field', () => {
+    useForm.mockReturnValue({ getFieldState: () => undefined });
+
     renderFieldPrefix();
 
     expect(screen.getByText('ui-orders.orderDetails.orderNumberPrefix')).toBeInTheDocument();
   });
+
+  it('should not revalidate the PO number field when it is not mounted', () => {
+    useForm.mockReturnValue({ getFieldState: () => undefined });
+
+    renderFieldPrefix();
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [],
+    }));
+  });
+
+  it('should not revalidate the PO number field when it is empty', () => {
+    useForm.mockReturnValue({ getFieldState: () => ({ name: PO_FORM_FIELDS.poNumber, value: '' }) });
+
+    renderFieldPrefix();
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [],
+    }));
+  });
+
+  it('should revalidate the PO number field when it is mounted and has a value', () => {
+    useForm.mockReturnValue({
+      getFieldState: () => ({ name: PO_FORM_FIELDS.poNumber, value: '1001' }),
+    });
+
+    renderFieldPrefix();
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [PO_FORM_FIELDS.poNumber],
+    }));
+  });
 });

src/common/POFields/FieldSuffix.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { useForm } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -13,13 +14,17 @@ const FieldSuffix = ({
   suffixes,
   ...rest
 }) => {
+  const { getFieldState } = useForm();
+  const poNumberFieldState = getFieldState?.(PO_FORM_FIELDS.poNumber);
+  const shouldRevalidatePoNumber = poNumberFieldState?.value;
+
   return (
     <FieldSelect
       dataOptions={suffixes}
       isNonInteractive={isNonInteractive}
       label={<FormattedMessage id="ui-orders.orderDetails.orderNumberSuffix" />}
       name={PO_FORM_FIELDS.poNumberSuffix}
-      validateFields={[PO_FORM_FIELDS.poNumber]}
+      validateFields={shouldRevalidatePoNumber ? [PO_FORM_FIELDS.poNumber] : []}
       {...rest}
     />
   );

src/common/POFields/FieldSuffix.test.js

@@ -1,9 +1,30 @@
-import { Form } from 'react-final-form';
+import { Form, useForm } from 'react-final-form';
 
 import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
 
+import { PO_FORM_FIELDS } from '../constants';
 import FieldSuffix from './FieldSuffix';
 
+jest.mock('react-final-form', () => {
+  const actual = jest.requireActual('react-final-form');
+
+  return {
+    ...actual,
+    useForm: jest.fn(),
+  };
+});
+
+const mockFieldSelectFinal = jest.fn(({ label }) => label);
+
+jest.mock('@folio/stripes-acq-components', () => {
+  const PropTypes = jest.requireActual('prop-types');
+
+  return {
+    FieldSelectFinal: (props) => mockFieldSelectFinal(props),
+    fieldSelectOptionsShape: PropTypes.arrayOf(PropTypes.shape({})),
+  };
+});
+
 const defaultProps = {
   suffixes: [],
 };
@@ -21,9 +42,47 @@ const renderFieldSuffix = (props = {}) => render(
 );
 
 describe('FieldSuffix', () => {
-  it('should render \'suffix\' field', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the suffix field', () => {
+    useForm.mockReturnValue({ getFieldState: () => undefined });
+
     renderFieldSuffix();
 
     expect(screen.getByText('ui-orders.orderDetails.orderNumberSuffix')).toBeInTheDocument();
   });
+
+  it('should not revalidate the PO number field when it is not mounted', () => {
+    useForm.mockReturnValue({ getFieldState: () => undefined });
+
+    renderFieldSuffix();
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [],
+    }));
+  });
+
+  it('should not revalidate the PO number field when it is empty', () => {
+    useForm.mockReturnValue({ getFieldState: () => ({ name: PO_FORM_FIELDS.poNumber, value: '' }) });
+
+    renderFieldSuffix();
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [],
+    }));
+  });
+
+  it('should revalidate the PO number field when it is mounted and has a value', () => {
+    useForm.mockReturnValue({
+      getFieldState: () => ({ name: PO_FORM_FIELDS.poNumber, value: '1001' }),
+    });
+
+    renderFieldSuffix();
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [PO_FORM_FIELDS.poNumber],
+    }));
+  });
 });