UIORGS-398: modify summary display in organization view mode (#575)

* UIORGS-398: modify summary display in organization view mode * tests: add test case for improving test coverage * refactor: update boolean check for accordion visibility * update changelog file * update todo comment
folio-org · Nov 21, 2023 · 914862d · 914862d
1 parent e7ceac4
commit 914862d
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 75 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * Settings for banking information. Refs UIORGS-391.
 * Implement organization's banking information form. Refs UIORGS-390.
 * Implement organization's banking information details view. Refs UIORGS-389.
+* Modify summary display in organization view mode. Refs UIORGS-398.
 
 ## [5.0.0](https://github.com/folio-org/ui-organizations/tree/v5.0.0) (2023-10-12)
 [Full Changelog](https://github.com/folio-org/ui-organizations/compare/v4.0.0...v5.0.0)

diff --git a/src/Organizations/OrganizationDetails/OrganizationDetails.js b/src/Organizations/OrganizationDetails/OrganizationDetails.js
@@ -62,6 +62,21 @@ import { OrganizationInterfacesContainer } from './OrganizationInterfaces';
 import { OrganizationSummary } from './OrganizationSummary';
 import { OrganizationVendorInfo } from './OrganizationVendorInfo';
 
+const {
+  accountsSection,
+  agreements,
+  bankingInformationSection,
+  contactInformationSection,
+  contactPeopleSection,
+  donorContacts,
+  integrationDetailsSection,
+  interfacesSection,
+  notesSection,
+  summarySection,
+  vendorInformationSection,
+  vendorTermsSection,
+} = ORGANIZATION_SECTIONS;
+
 const OrganizationDetails = ({
   onClose,
   onEdit,
@@ -77,24 +92,25 @@ const OrganizationDetails = ({
   const stripes = useStripes();
   const [isRemoveModalOpened, toggleRemoveModal] = useModalToggle();
   const initialAccordionStatus = {
-    [ORGANIZATION_SECTIONS.summarySection]: true,
-    [ORGANIZATION_SECTIONS.contactInformationSection]: false,
-    [ORGANIZATION_SECTIONS.contactPeopleSection]: true,
-    [ORGANIZATION_SECTIONS.interfacesSection]: false,
-    [ORGANIZATION_SECTIONS.vendorInformationSection]: false,
-    [ORGANIZATION_SECTIONS.vendorTermsSection]: false,
-    [ORGANIZATION_SECTIONS.integrationDetailsSection]: false,
-    [ORGANIZATION_SECTIONS.accountsSection]: false,
-    [ORGANIZATION_SECTIONS.bankingInformationSection]: false,
-    [ORGANIZATION_SECTIONS.notesSection]: false,
-    [ORGANIZATION_SECTIONS.agreements]: false,
+    [summarySection]: true,
+    [contactInformationSection]: false,
+    [contactPeopleSection]: true,
+    [interfacesSection]: false,
+    [vendorInformationSection]: false,
+    [vendorTermsSection]: false,
+    [integrationDetailsSection]: false,
+    [accountsSection]: false,
+    [bankingInformationSection]: false,
+    [notesSection]: false,
+    [agreements]: false,
   };
   const [isTagsOpened, toggleTagsPane] = useModalToggle();
   const paneTitleRef = useRef();
   const location = useLocation();
   const history = useHistory();
   const accordionStatusRef = useRef();
   const isDetailsPaneInFocus = location.state?.isDetailsPaneInFocus;
+  const isDonorVisible = organization?.isVendor && organization?.isDonor;
   const { restrictions, isLoading: isRestrictionsLoading } = useAcqRestrictions(
     organization.id, organization.acqUnitIds,
   );
@@ -263,8 +279,8 @@ const OrganizationDetails = ({
 
           <AccordionSet initialStatus={initialAccordionStatus}>
             <Accordion
-              id={ORGANIZATION_SECTIONS.summarySection}
-              label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.summarySection]}
+              id={summarySection}
+              label={ORGANIZATION_SECTION_LABELS[summarySection]}
             >
               <OrganizationSummary
                 acqUnitIds={organization.acqUnitIds}
@@ -288,14 +304,14 @@ const OrganizationDetails = ({
               entityName={organization.name}
               entityType={ORG_NOTE_TYPE}
               hideAssignButton
-              id={ORGANIZATION_SECTIONS.notesSection}
+              id={notesSection}
               pathToNoteCreate={`${NOTES_ROUTE}/new`}
               pathToNoteDetails={NOTES_ROUTE}
             />
 
             <Accordion
-              id={ORGANIZATION_SECTIONS.contactInformationSection}
-              label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.contactInformationSection]}
+              id={contactInformationSection}
+              label={ORGANIZATION_SECTION_LABELS[contactInformationSection]}
             >
               <OrganizationContactInfo
                 organization={organization}
@@ -304,8 +320,8 @@ const OrganizationDetails = ({
             </Accordion>
 
             <Accordion
-              id={ORGANIZATION_SECTIONS.contactPeopleSection}
-              label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.contactPeopleSection]}
+              id={contactPeopleSection}
+              label={ORGANIZATION_SECTION_LABELS[contactPeopleSection]}
             >
               <OrganizationContactPeopleContainer
                 contactsIds={organization.contacts}
@@ -314,20 +330,33 @@ const OrganizationDetails = ({
             </Accordion>
 
             <Accordion
-              id={ORGANIZATION_SECTIONS.interfacesSection}
-              label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.interfacesSection]}
+              id={interfacesSection}
+              label={ORGANIZATION_SECTION_LABELS[interfacesSection]}
             >
               <OrganizationInterfacesContainer
                 interfaceIds={organization.interfaces}
               />
             </Accordion>
 
+            {
+              isDonorVisible && (
+              <Accordion
+                id={donorContacts}
+                label={ORGANIZATION_SECTION_LABELS[donorContacts]}
+              >
+                {/*
+                  TODO: add Privileged donor information component https://issues.folio.org/browse/UIORGS-397
+                */}
+              </Accordion>
+              )
+            }
+
             {
               organization.isVendor && (
                 <>
                   <Accordion
-                    id={ORGANIZATION_SECTIONS.vendorInformationSection}
-                    label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.vendorInformationSection]}
+                    id={vendorInformationSection}
+                    label={ORGANIZATION_SECTION_LABELS[vendorInformationSection]}
                   >
                     <OrganizationVendorInfo
                       paymentMethod={organization.paymentMethod}
@@ -347,17 +376,17 @@ const OrganizationDetails = ({
                   </Accordion>
 
                   <Accordion
-                    id={ORGANIZATION_SECTIONS.vendorTermsSection}
-                    label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.vendorTermsSection]}
+                    id={vendorTermsSection}
+                    label={ORGANIZATION_SECTION_LABELS[vendorTermsSection]}
                   >
                     <OrganizationAgreements
                       agreements={organization.agreements}
                     />
                   </Accordion>
 
                   <Accordion
-                    id={ORGANIZATION_SECTIONS.integrationDetailsSection}
-                    label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.integrationDetailsSection]}
+                    id={integrationDetailsSection}
+                    label={ORGANIZATION_SECTION_LABELS[integrationDetailsSection]}
                     displayWhenOpen={addIntegrationButton}
                   >
                     <IntegrationDetails
@@ -367,8 +396,8 @@ const OrganizationDetails = ({
                   </Accordion>
 
                   <Accordion
-                    id={ORGANIZATION_SECTIONS.accountsSection}
-                    label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.accountsSection]}
+                    id={accountsSection}
+                    label={ORGANIZATION_SECTION_LABELS[accountsSection]}
                   >
                     <OrganizationAccounts
                       accounts={organization.accounts}
@@ -388,8 +417,8 @@ const OrganizationDetails = ({
             }
 
             <LinkedAgreements
-              id={ORGANIZATION_SECTIONS.agreements}
-              label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.agreements]}
+              id={agreements}
+              label={ORGANIZATION_SECTION_LABELS[agreements]}
               organization={organization}
             />
           </AccordionSet>

diff --git a/src/Organizations/OrganizationDetails/OrganizationDetails.test.js b/src/Organizations/OrganizationDetails/OrganizationDetails.test.js
@@ -127,6 +127,19 @@ describe('OrganizationDetails', () => {
     expect(screen.getByText('OrganizationAccounts')).toBeDefined();
   });
 
+  it('should display Donor Contacts accordion when both vendor and donor have been checked', () => {
+    renderOrganizationDetails({
+      ...defaultProps,
+      organization: {
+        name: 'Amazon',
+        isVendor: true,
+        isDonor: true,
+      },
+    });
+
+    expect(screen.getByText('ui-organizations.donorContacts')).toBeDefined();
+  });
+
   it('should display warning message if vendor has not unique account numbers', () => {
     renderOrganizationDetails({
       ...defaultProps,

diff --git a/src/Organizations/OrganizationDetails/OrganizationSummary/OrganizationSummary.js b/src/Organizations/OrganizationDetails/OrganizationSummary/OrganizationSummary.js
@@ -1,12 +1,11 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 
 import {
   Checkbox,
   Col,
   KeyValue,
-  MultiColumnList,
   NoValue,
   Row,
 } from '@folio/stripes/components';
@@ -18,12 +17,6 @@ import {
 
 import { ORGANIZATION_SECTIONS } from '../../constants';
 
-const aliasesColumnMapping = {
-  value: <FormattedMessage id="ui-organizations.summary.alias" />,
-  description: <FormattedMessage id="ui-organizations.summary.description" />,
-};
-const aliasesVisibleColumns = ['value', 'description'];
-
 const OrganizationSummary = ({
   acqUnitIds,
   aliases,
@@ -39,6 +32,7 @@ const OrganizationSummary = ({
   organizationTypes,
 }) => {
   const defaultLanguageValue = LANG_LABEL_BY_CODE[language] || language;
+  const alternativeNames = useMemo(() => aliases.map(({ value }) => value).join(', '), [aliases]);
 
   return (
     <>
@@ -54,96 +48,89 @@ const OrganizationSummary = ({
       </Row>
 
       <Row>
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             data-testid="name"
             label={<FormattedMessage id="ui-organizations.summary.name" />}
             value={name}
           />
         </Col>
 
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             label={<FormattedMessage id="ui-organizations.summary.code" />}
             value={code}
           />
         </Col>
 
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             data-testid="accountingCode"
             label={<FormattedMessage id="ui-organizations.summary.accountingCode" />}
             value={erpCode || <NoValue />}
           />
         </Col>
 
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             label={<FormattedMessage id="ui-organizations.summary.organizationStatus" />}
           >
             {status && <FormattedMessage id={`ui-organizations.organizationStatus.${status.toLowerCase()}`} />}
           </KeyValue>
         </Col>
 
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             data-testid="defaultLanguage"
             label={<FormattedMessage id="ui-organizations.summary.defaultLanguage" />}
             value={defaultLanguageValue || <NoValue />}
           />
         </Col>
 
-        <Col xs={4}>
-          <Checkbox
-            checked={isVendor}
-            disabled
-            label={<FormattedMessage id="ui-organizations.summary.isVendor" />}
-            vertical
-          />
-        </Col>
-
-        <Col xs={4}>
-          <Checkbox
-            checked={isDonor}
-            disabled
-            label={<FormattedMessage id="ui-organizations.summary.isDonor" />}
-            vertical
-          />
-        </Col>
-
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             data-testid="type"
             label={<FormattedMessage id="ui-organizations.summary.type" />}
             value={organizationTypes.join(', ') || <NoValue />}
           />
         </Col>
 
-        <Col xs={4}>
+        <Col xs={3}>
           <AcqUnitsView units={acqUnitIds} />
         </Col>
 
-        <Col xs={12}>
+        <Col xs={3}>
           <KeyValue
             data-testid="description"
             label={<FormattedMessage id="ui-organizations.summary.description" />}
             value={description || <NoValue />}
           />
         </Col>
-      </Row>
 
-      <Row>
-        <Col xs={12}>
+        <Col xs={3}>
+          <Checkbox
+            checked={isDonor}
+            disabled
+            label={<FormattedMessage id="ui-organizations.summary.isDonor" />}
+            vertical
+          />
+        </Col>
+
+        <Col xs={3}>
+          <Checkbox
+            checked={isVendor}
+            disabled
+            label={<FormattedMessage id="ui-organizations.summary.isVendor" />}
+            vertical
+          />
+        </Col>
+
+        <Col xs={3}>
           <KeyValue
+            data-testid="alternativeNames"
             label={<FormattedMessage id="ui-organizations.summary.alternativeNames" />}
-          >
-            <MultiColumnList
-              contentData={aliases}
-              columnMapping={aliasesColumnMapping}
-              interactive={false}
-              visibleColumns={aliasesVisibleColumns}
-            />
-          </KeyValue>
+            value={alternativeNames || <NoValue />}
+          />
         </Col>
       </Row>
     </>

diff --git a/src/Organizations/constants.js b/src/Organizations/constants.js
@@ -12,6 +12,7 @@ export const ORGANIZATION_SECTIONS = {
   notesSection: 'notesSection',
   integrationDetailsSection: 'integrationDetailsSection',
   agreements: 'linkedAgreements',
+  donorContacts: 'donorContacts',
 };
 
 export const ORGANIZATION_SECTION_LABELS = {
@@ -25,6 +26,7 @@ export const ORGANIZATION_SECTION_LABELS = {
   [ORGANIZATION_SECTIONS.accountsSection]: <FormattedMessage id="ui-organizations.accounts" />,
   [ORGANIZATION_SECTIONS.integrationDetailsSection]: <FormattedMessage id="ui-organizations.integrationDetails" />,
   [ORGANIZATION_SECTIONS.agreements]: <FormattedMessage id="ui-organizations.linkedAgreements.section" />,
+  [ORGANIZATION_SECTIONS.donorContacts]: <FormattedMessage id="ui-organizations.donorContacts" />,
 };
 
 export const CREATE_UNITS_PERM = 'organizations.acquisitions-units-assignments.assign';

diff --git a/translations/ui-organizations/en.json b/translations/ui-organizations/en.json
@@ -97,6 +97,7 @@
   "contactPeople": "Contact people",
   "agreements": "Agreements",
   "vendorInformation": "Vendor information",
+  "donorContacts": "Donor contacts",
   "ediInformation": "EDI information",
   "interface": "Interface",
   "accounts": "Accounts",