UIOR-1569: Correct refresh of prefix and suffix fields

src/common/POFields/FieldPrefix.js

@@ -11,6 +11,7 @@ import { PO_FORM_FIELDS } from '../constants';
 const FieldPrefix = ({
   isNonInteractive = false,
   prefixes,
+  shouldValidate,
   ...rest
 }) => {
   return (
@@ -19,7 +20,7 @@ const FieldPrefix = ({
       isNonInteractive={isNonInteractive}
       label={<FormattedMessage id="ui-orders.orderDetails.orderNumberPrefix" />}
       name={PO_FORM_FIELDS.poNumberPrefix}
-      validateFields={[PO_FORM_FIELDS.poNumber]}
+      validateFields={shouldValidate ? [PO_FORM_FIELDS.poNumber] : []}
       {...rest}
     />
   );

src/common/POFields/FieldPrefix.test.js

@@ -2,8 +2,21 @@ import { Form } 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';
 
+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 +34,29 @@ const renderFieldPrefix = (props = {}) => render(
 );
 
 describe('FieldPrefix', () => {
-  it('should render \'prefix\' field', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the prefix field', () => {
     renderFieldPrefix();
 
     expect(screen.getByText('ui-orders.orderDetails.orderNumberPrefix')).toBeInTheDocument();
   });
+
+  it('should not validate PO number when shouldValidate is false', () => {
+    renderFieldPrefix({ shouldValidate: false });
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [],
+    }));
+  });
+
+  it('should validate PO number when shouldValidate is true', () => {
+    renderFieldPrefix({ shouldValidate: true });
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [PO_FORM_FIELDS.poNumber],
+    }));
+  });
 });

src/common/POFields/FieldSuffix.js

@@ -11,6 +11,7 @@ import { PO_FORM_FIELDS } from '../constants';
 const FieldSuffix = ({
   isNonInteractive = false,
   suffixes,
+  shouldValidate,
   ...rest
 }) => {
   return (
@@ -19,7 +20,7 @@ const FieldSuffix = ({
       isNonInteractive={isNonInteractive}
       label={<FormattedMessage id="ui-orders.orderDetails.orderNumberSuffix" />}
       name={PO_FORM_FIELDS.poNumberSuffix}
-      validateFields={[PO_FORM_FIELDS.poNumber]}
+      validateFields={shouldValidate ? [PO_FORM_FIELDS.poNumber] : []}
       {...rest}
     />
   );

src/common/POFields/FieldSuffix.test.js

@@ -2,8 +2,20 @@ import { Form } 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';
 
+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 +33,29 @@ const renderFieldSuffix = (props = {}) => render(
 );
 
 describe('FieldSuffix', () => {
-  it('should render \'suffix\' field', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the suffix field', () => {
     renderFieldSuffix();
 
     expect(screen.getByText('ui-orders.orderDetails.orderNumberSuffix')).toBeInTheDocument();
   });
+
+  it('should not validate PO number when shouldValidate is false', () => {
+    renderFieldSuffix({ shouldValidate: false });
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [],
+    }));
+  });
+
+  it('should validate PO number when shouldValidate is true', () => {
+    renderFieldSuffix({ shouldValidate: true });
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [PO_FORM_FIELDS.poNumber],
+    }));
+  });
 });

src/components/PurchaseOrder/PODetails/PODetailsForm.js

@@ -96,6 +96,7 @@ class PODetailsForm extends Component {
               <FieldPrefix
                 isNonInteractive={isPostPendingOrder}
                 prefixes={prefixesSetting}
+                shouldValidate={canUserEditOrderNumber}
               />
             </Col>
           </IfFieldVisible>
@@ -120,6 +121,7 @@ class PODetailsForm extends Component {
               <FieldSuffix
                 isNonInteractive={isPostPendingOrder}
                 suffixes={suffixesSetting}
+                shouldValidate={canUserEditOrderNumber}
               />
             </Col>
           </IfFieldVisible>