UIOR-1142: POL - Display only active account numbers in dropdown list

CHANGELOG.md

@@ -21,6 +21,7 @@
 * Show a message about the missing version in the history. Refs UIOR-1136.
 * *BREAKING* bump `react-intl` to `v6.4.4`. Refs UIOR-1146.
 * When order line contains bad product IDs - the save & close does not work. Refs UIOR-1141.
+* POL - Display only active account numbers in dropdown list. Refs UIOR-1142.
 
 ## [4.0.2](https://github.com/folio-org/ui-orders/tree/v4.0.2) (2023-03-17)
 [Full Changelog](https://github.com/folio-org/ui-orders/compare/v4.0.1...v4.0.2)

src/components/POLine/Vendor/VendorForm.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useForm } from 'react-final-form';
 
@@ -15,6 +15,7 @@ import {
 import { IfFieldVisible } from '../../../common/IfFieldVisible';
 import { isWorkflowStatusIsPending } from '../../PurchaseOrder/util';
 import { toggleAutomaticExport } from '../../Utils/toggleAutomaticExport';
+import { ACCOUNT_STATUS } from '../const';
 
 const VendorForm = ({
   order,
@@ -24,10 +25,15 @@ const VendorForm = ({
 }) => {
   const { change, getState } = useForm();
   const isPostPendingOrder = !isWorkflowStatusIsPending(order);
-  const accountsDataOptions = accounts.map(({ name, accountNo }) => ({
-    label: `${name} (${accountNo})`,
-    value: accountNo,
-  }));
+
+  const activeAccountOptions = useMemo(() => {
+    const activeAccounts = accounts.filter(({ accountStatus }) => accountStatus === ACCOUNT_STATUS.ACTIVE);
+
+    return activeAccounts.map(({ name, accountNo }) => ({
+      label: `${name} (${accountNo})`,
+      value: accountNo,
+    }));
+  }, [accounts]);
 
   const onAccountChange = useCallback(
     ({ target: { value } }) => {
@@ -50,7 +56,7 @@ const VendorForm = ({
             md={3}
           >
             <FieldVendorAccountNumber
-              accounts={accountsDataOptions}
+              accounts={activeAccountOptions}
               disabled={isPostPendingOrder}
               onChange={onAccountChange}
             />

src/components/POLine/Vendor/VendorForm.test.js

@@ -5,6 +5,10 @@ import { render, screen } from '@folio/jest-config-stripes/testing-library/react
 import { arrayMutators } from 'fixtures/arrayMutatorsMock';
 import VendorForm from './VendorForm';
 
+jest.mock('../../../common/IfFieldVisible', () => ({
+  IfFieldVisible: jest.fn(({ children }) => children),
+}));
+
 const defaultProps = {
   accounts: [{
     name: 'name',
@@ -38,4 +42,29 @@ describe('VendorForm', () => {
     expect(screen.getByText('ui-orders.vendor.accountNumber')).toBeInTheDocument();
     expect(screen.getByText('ui-orders.vendor.instructions')).toBeInTheDocument();
   });
+
+  it('should render active account numbers', () => {
+    const accounts = [
+      {
+        name: 'name',
+        accountNo: '1',
+        accountStatus: 'Active',
+      },
+      {
+        name: 'name2',
+        accountNo: '2',
+        accountStatus: 'Inactive',
+      },
+      {
+        name: 'name3',
+        accountNo: '3',
+        accountStatus: 'Active',
+      },
+    ];
+
+    renderVendorForm({ accounts });
+
+    expect(screen.getByText(`${accounts[0].name} (${accounts[0].accountNo})`)).toBeInTheDocument();
+    expect(screen.getByText(`${accounts[0].name} (${accounts[0].accountNo})`)).toBeInTheDocument();
+  });
 });

src/components/POLine/const.js

@@ -62,3 +62,9 @@ export const POL_TEMPLATE_FIELDS_MAP = {
 export const INITIAL_SECTIONS = Object.values(ACCORDION_ID).reduce(
   (accum, id) => ({ ...accum, [id]: true }), {},
 );
+
+export const ACCOUNT_STATUS = {
+  ACTIVE: 'Active',
+  INACTIVE: 'Inactive',
+  PENDING: 'Pending',
+};