UIIN-2793: Populate Acquisitions accordion on instance when central ordering is active

src/Instance/InstanceDetails/InstanceAcquisition/InstanceAcquisition.js

@@ -35,7 +35,24 @@ const InstanceAcquisition = ({ accordionId, instanceId }) => {
     stripes.hasInterface('orders') &&
     stripes.hasInterface('acquisitions-units'))) return null;
 
-  const getTenantAccordionLabel = (tenants, id) => tenants?.find(tenant => tenant.id === id).name;
+  const renderTenantAcquisitionAccordion = (accId, tenantId, tenantAcquisitions, isLoading, controlledAccorionProps) => {
+    const getTenantAccordionLabel = (tenants, id) => tenants?.find(tenant => tenant.id === id).name;
+
+    return (
+      <Accordion
+        id={accId}
+        label={getTenantAccordionLabel(stripes.user.user.tenants, tenantId)}
+        className={css.tenantAcquisitionAccordion}
+        {...controlledAccorionProps}
+      >
+        <TenantAcquisition
+          acquisitions={tenantAcquisitions}
+          isLoading={isLoading}
+          tenantId={tenantId}
+        />
+      </Accordion>
+    );
+  };
 
   return (
     <Accordion
@@ -45,32 +62,20 @@ const InstanceAcquisition = ({ accordionId, instanceId }) => {
     >
       {(isUserInConsortiumMode(stripes) && activeTenant !== centralTenant) ? (
         <>
-          <Accordion
-            id="active-tenant-acquisition-accordion"
-            label={getTenantAccordionLabel(stripes.user.user.tenants, activeTenant)}
-            className={css.tenantAcquisitionAccordion}
-            {...controlledActiveTenantAcqAccorion}
-          >
-            <TenantAcquisition
-              acquisitions={activeTenantAcquisition}
-              isLoading={isLoadingActiveTenantAcquisition}
-              tenantId={activeTenant}
-            />
-          </Accordion>
-
-
-          <Accordion
-            id="central-tenant-acquisition-accordion"
-            label={getTenantAccordionLabel(stripes.user.user.tenants, centralTenant)}
-            className={css.tenantAcquisitionAccordion}
-            {...controlledCetralTenantAcqAccorion}
-          >
-            <TenantAcquisition
-              acquisitions={centralTenantAcquisition}
-              isLoading={isLoadingCentralTenantAcquisition}
-              tenantId={centralTenant}
-            />
-          </Accordion>
+          {renderTenantAcquisitionAccordion(
+            'active-acquisition-accordion',
+            activeTenant,
+            activeTenantAcquisition,
+            isLoadingActiveTenantAcquisition,
+            controlledActiveTenantAcqAccorion,
+          )}
+          {renderTenantAcquisitionAccordion(
+            'central-acquisition-accordion',
+            centralTenant,
+            centralTenantAcquisition,
+            isLoadingCentralTenantAcquisition,
+            controlledCetralTenantAcqAccorion,
+          )}
         </>
       ) : (
         <TenantAcquisition

src/Instance/InstanceDetails/InstanceAcquisition/TenantAcquisition.js

@@ -9,28 +9,38 @@ import {
 } from '@folio/stripes/components';
 
 import { getDateWithTime } from '../../../utils';
+import { COLUMN_NAMES } from '../../../constants';
+
+const visibleColumns = [
+  COLUMN_NAMES.poLineNumber,
+  COLUMN_NAMES.orderStatus,
+  COLUMN_NAMES.polReceiptStatus,
+  COLUMN_NAMES.dateOrdered,
+  COLUMN_NAMES.acqUnit,
+  COLUMN_NAMES.orderType,
+];
 
-const visibleColumns = ['poLineNumber', 'orderStatus', 'polReceiptStatus', 'dateOrdered', 'acqUnit', 'orderType'];
 const columnMapping = {
-  poLineNumber: <FormattedMessage id="ui-inventory.acq.polNumber" />,
-  orderStatus: <FormattedMessage id="ui-inventory.acq.orderStatus" />,
-  polReceiptStatus: <FormattedMessage id="ui-inventory.acq.receiptStatus" />,
-  dateOrdered: <FormattedMessage id="ui-inventory.acq.dateOpened" />,
-  acqUnit: <FormattedMessage id="ui-inventory.acq.acqUnit" />,
-  orderType: <FormattedMessage id="ui-inventory.acq.orderType" />,
+  [COLUMN_NAMES.poLineNumber]: <FormattedMessage id="ui-inventory.acq.polNumber" />,
+  [COLUMN_NAMES.orderStatus]: <FormattedMessage id="ui-inventory.acq.orderStatus" />,
+  [COLUMN_NAMES.polReceiptStatus]: <FormattedMessage id="ui-inventory.acq.receiptStatus" />,
+  [COLUMN_NAMES.dateOrdered]: <FormattedMessage id="ui-inventory.acq.dateOpened" />,
+  [COLUMN_NAMES.acqUnit]: <FormattedMessage id="ui-inventory.acq.acqUnit" />,
+  [COLUMN_NAMES.orderType]: <FormattedMessage id="ui-inventory.acq.orderType" />,
 };
+
 const formatter = {
-  poLineNumber: i => <Link to={`/orders/lines/view/${i.id}`}>{i.poLineNumber}</Link>,
-  orderStatus: i => (
+  [COLUMN_NAMES.poLineNumber]: i => <Link to={`/orders/lines/view/${i.id}`}>{i.poLineNumber}</Link>,
+  [COLUMN_NAMES.orderStatus]: i => (
     <>
       {i.order?.workflowStatus ? <FormattedMessage id={`ui-inventory.acq.orderStatus.${i.order.workflowStatus}`} /> : <NoValue />}
       {i.order?.orderCloseReason?.reason && ` - ${i.order.orderCloseReason.reason}`}
     </>
   ),
-  polReceiptStatus: i => <FormattedMessage id={`ui-inventory.acq.receiptStatus.${i.receiptStatus}`} />,
-  dateOrdered: i => getDateWithTime(i.order?.dateOrdered),
-  acqUnit: i => i.order?.acqUnits?.map(u => u.name)?.join(', ') || <NoValue />,
-  orderType: i => (i.order?.orderType ? <FormattedMessage id={`ui-inventory.acq.orderType.${i.order.orderType}`} /> : <NoValue />),
+  [COLUMN_NAMES.polReceiptStatus]: i => <FormattedMessage id={`ui-inventory.acq.receiptStatus.${i.receiptStatus}`} />,
+  [COLUMN_NAMES.dateOrdered]: i => getDateWithTime(i.order?.dateOrdered),
+  [COLUMN_NAMES.acqUnit]: i => i.order?.acqUnits?.map(u => u.name)?.join(', ') || <NoValue />,
+  [COLUMN_NAMES.orderType]: i => (i.order?.orderType ? <FormattedMessage id={`ui-inventory.acq.orderType.${i.order.orderType}`} /> : <NoValue />),
 };
 
 const TenantAcquisition = ({

src/constants.js

@@ -724,3 +724,12 @@ export const LEADER_RECORD_STATUSES = {
 };
 
 export const USER_TOUCHED_STAFF_SUPPRESS_STORAGE_KEY = 'folio_user_touched_staff_suppress';
+
+export const COLUMN_NAMES = {
+  poLineNumber: 'poLineNumber',
+  orderStatus: 'orderStatus',
+  polReceiptStatus: 'polReceiptStatus',
+  dateOrdered: 'dateOrdered',
+  acqUnit: 'acqUnit',
+  orderType: 'orderType',
+};