UIOR-1142: add localizations for inactive status (#1509)

src/components/POLine/Vendor/VendorForm.js

@@ -1,7 +1,10 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useForm } from 'react-final-form';
-import { FormattedMessage } from 'react-intl';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
 
 import {
   Col,
@@ -27,22 +30,24 @@ const VendorForm = ({
   hiddenFields = {},
   integrationConfigs = [],
 }) => {
+  const { formatMessage } = useIntl();
   const { change, getState } = useForm();
   const { vendorDetail } = getState().values;
   const currentAccountNumber = vendorDetail?.vendorAccount;
   const isPostPendingOrder = !isWorkflowStatusIsPending(order);
   const initialAccountNumber = useRef(currentAccountNumber);
 
   const activeAccountOptions = useMemo(() => {
+    const message = ` - ${formatMessage({ id: 'ui-orders.inactive' })}`;
     const activeAccounts = accounts.filter(({ accountStatus, accountNo }) => {
       return accountStatus === ACTIVE || accountNo === initialAccountNumber.current;
     });
 
     return activeAccounts.map(({ name, accountNo, accountStatus }) => ({
-      label: `${name} (${accountNo}) ${accountStatus === INACTIVE ? ' - Inactive' : ''}`,
+      label: `${name} (${accountNo}) ${accountStatus === INACTIVE ? message : ''}`,
       value: accountNo,
     }));
-  }, [accounts, initialAccountNumber]);
+  }, [accounts, formatMessage]);
 
   const onAccountChange = useCallback(
     ({ target: { value } }) => {

translations/ui-orders/en.json

@@ -1,6 +1,6 @@
 {
   "appMenu.ordersAppSearch": "Orders app Search",
-
+  "inactive": "Inactive",
   "breakInstanceConnection.modal.heading": "Remove instance connection",
   "breakInstanceConnection.modal.message": "Making this change will remove the link between the POL and selected inventory instance. Are you sure you would like to proceed with making this change and unlink this POL from the inventory instance \"<b>{titleOrPackage}</b>\"?",