diff --git a/CHANGELOG.md b/CHANGELOG.md index ea0dac213..403645de5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ * *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. * Upgrade `ui-plugin-find-po-line` and `ui-plugin-find-organization` plugins to `5` version. Refs UIOR-1154. +* 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) diff --git a/src/components/POLine/Vendor/VendorForm.js b/src/components/POLine/Vendor/VendorForm.js index 2b52699b8..30862f141 100644 --- a/src/components/POLine/Vendor/VendorForm.js +++ b/src/components/POLine/Vendor/VendorForm.js @@ -1,9 +1,11 @@ -import React, { useCallback } from 'react'; +import React, { useCallback, useMemo, useRef } from 'react'; import PropTypes from 'prop-types'; import { useForm } from 'react-final-form'; +import { FormattedMessage } from 'react-intl'; import { Col, + MessageBanner, Row, } from '@folio/stripes/components'; import { VendorReferenceNumbersFields } from '@folio/stripes-acq-components'; @@ -15,6 +17,9 @@ import { import { IfFieldVisible } from '../../../common/IfFieldVisible'; import { isWorkflowStatusIsPending } from '../../PurchaseOrder/util'; import { toggleAutomaticExport } from '../../Utils/toggleAutomaticExport'; +import { ACCOUNT_STATUS } from '../const'; + +const { ACTIVE, INACTIVE } = ACCOUNT_STATUS; const VendorForm = ({ order, @@ -23,11 +28,21 @@ const VendorForm = ({ integrationConfigs = [], }) => { const { change, getState } = useForm(); + const { vendorDetail } = getState().values; + const currentAccountNumber = vendorDetail?.vendorAccount; const isPostPendingOrder = !isWorkflowStatusIsPending(order); - const accountsDataOptions = accounts.map(({ name, accountNo }) => ({ - label: `${name} (${accountNo})`, - value: accountNo, - })); + const initialAccountNumber = useRef(currentAccountNumber); + + const activeAccountOptions = useMemo(() => { + const activeAccounts = accounts.filter(({ accountStatus, accountNo }) => { + return accountStatus === ACTIVE || accountNo === initialAccountNumber.current; + }); + + return activeAccounts.map(({ name, accountNo, accountStatus }) => ({ + label: `${name} (${accountNo}) ${accountStatus === INACTIVE ? ' - Inactive' : ''}`, + value: accountNo, + })); + }, [accounts, initialAccountNumber]); const onAccountChange = useCallback( ({ target: { value } }) => { @@ -38,6 +53,20 @@ const VendorForm = ({ }, [change, getState, integrationConfigs], ); + const accountNumberDisabled = useMemo(() => { + const hasCurrentAccountNumber = accounts.some(({ accountNo }) => accountNo === currentAccountNumber); + const isOnlyOneActiveAccount = activeAccountOptions.length === 1; + const noActiveAccounts = activeAccountOptions.length === 0; + + return noActiveAccounts || (hasCurrentAccountNumber && isOnlyOneActiveAccount); + }, [accounts, activeAccountOptions, currentAccountNumber]); + + const isSelectedAccountInactive = useMemo(() => { + return accounts.some(({ accountNo, accountStatus }) => { + return accountNo === currentAccountNumber && accountStatus === INACTIVE; + }); + }, [accounts, currentAccountNumber]); + return ( <> + { + isSelectedAccountInactive && ( + + + + ) + } diff --git a/src/components/POLine/Vendor/VendorForm.test.js b/src/components/POLine/Vendor/VendorForm.test.js index 95ad7a03e..535017eaf 100644 --- a/src/components/POLine/Vendor/VendorForm.test.js +++ b/src/components/POLine/Vendor/VendorForm.test.js @@ -38,4 +38,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[2].name} (${accounts[2].accountNo})`)).toBeInTheDocument(); + }); }); diff --git a/src/components/POLine/const.js b/src/components/POLine/const.js index b7c8d9e90..e62ab7d47 100644 --- a/src/components/POLine/const.js +++ b/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', +}; diff --git a/translations/ui-orders/en.json b/translations/ui-orders/en.json index e9728a2fa..7bd6123ee 100644 --- a/translations/ui-orders/en.json +++ b/translations/ui-orders/en.json @@ -823,6 +823,7 @@ "vendor.referenceNumbers": "Vendor reference numbers", "vendor.vendor_status": "Status", "vendor.accountNumber": "Account number", + "vendor.accountNumber.inActive": "The selected account number is inactive.", "dateOpened": "Date opened", "assignedToMe": "Assigned to me",