UIORGS-383: add donor info for organization summary

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 5.1.0 (IN PROGRESS)
 
+* Designate Organization as donor. Refs UIORGS-383.
+
 ## [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)
 

src/Organizations/OrganizationCreate/OrganizationCreate.js

@@ -19,6 +19,7 @@ const INITIAL_VALUES = {
   interfaces: [],
   contacts: [],
   isVendor: false,
+  isDonor: false,
   edi: {
     vendorEdiType: '31B/US-SAN',
     libEdiType: '31B/US-SAN',

src/Organizations/OrganizationDetails/OrganizationDetails.js

@@ -269,6 +269,7 @@ const OrganizationDetails = ({
                 description={organization.description}
                 erpCode={organization.erpCode}
                 isVendor={organization.isVendor}
+                isDonor={organization.isDonor}
                 language={organization.language}
                 metadata={organization.metadata}
                 name={organization.name}

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,26 +17,22 @@ 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,
   code,
   description,
   erpCode,
   isVendor,
+  isDonor,
   language,
   metadata,
   name,
   status,
   organizationTypes,
 }) => {
   const defaultLanguageValue = LANG_LABEL_BY_CODE[language] || language;
+  const alternativeNames = useMemo(() => aliases.map(({ value }) => value).join(', '), [aliases]);
 
   return (
     <>
@@ -53,87 +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}>
+        <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>
     </>
@@ -150,6 +147,7 @@ OrganizationSummary.propTypes = {
   description: PropTypes.string,
   erpCode: PropTypes.string,
   isVendor: PropTypes.bool,
+  isDonor: PropTypes.bool,
   language: PropTypes.string,
   metadata: PropTypes.object,
   name: PropTypes.string,

src/Organizations/OrganizationForm/OrganizationForm.test.js

@@ -1,7 +1,3 @@
-import React from 'react';
-import { render, screen, act } from '@folio/jest-config-stripes/testing-library/react';
-import { queryHelpers } from '@folio/jest-config-stripes/testing-library/dom';
-import user from '@folio/jest-config-stripes/testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
 import { useHistory } from 'react-router';
 
@@ -10,12 +6,18 @@ import {
   expandAllSections,
   collapseAllSections,
 } from '@folio/stripes/components';
-import { organizationTypes } from 'fixtures';
+import {
+  render,
+  screen,
+  act,
+} from '@folio/jest-config-stripes/testing-library/react';
+import { queryHelpers } from '@folio/jest-config-stripes/testing-library/dom';
+import user from '@folio/jest-config-stripes/testing-library/user-event';
 
+import { organizationTypes } from 'fixtures';
 import { ORGANIZATIONS_ROUTE } from '../../common/constants';
 import OrganizationForm from './OrganizationForm';
 
-
 jest.mock('react-router', () => ({
   ...jest.requireActual('react-router'),
   useHistory: jest.fn(),

src/Organizations/OrganizationForm/OrganizationSummaryForm/OrganizationSummaryForm.js

@@ -77,8 +77,8 @@ function OrganizationSummaryForm({ initialValues }) {
     onResetVendorFields();
   }, [onResetVendorFields]);
 
-  const onChangeIsVendor = useCallback(({ target: { checked } }) => {
-    change('isVendor', checked);
+  const handleCheckbox = useCallback(({ target: { checked, name } }) => {
+    change(name, checked);
 
     if (initialValues.id && !checked) setVendorUncheckConfirm(true);
   }, [initialValues.id, change]);
@@ -159,20 +159,6 @@ function OrganizationSummaryForm({ initialValues }) {
           name="language"
         />
       </Col>
-      <Col
-        xs={6}
-        md={3}
-      >
-        <Field
-          component={Checkbox}
-          label={<FormattedMessage id="ui-organizations.summary.isVendor" />}
-          name="isVendor"
-          type="checkbox"
-          onChange={onChangeIsVendor}
-          vertical
-          validateFields={[]}
-        />
-      </Col>
       <Col
         xs={6}
         md={3}
@@ -197,6 +183,34 @@ function OrganizationSummaryForm({ initialValues }) {
           validateFields={[]}
         />
       </Col>
+      <Col
+        xs={6}
+        md={3}
+      >
+        <Field
+          component={Checkbox}
+          label={<FormattedMessage id="ui-organizations.summary.isDonor" />}
+          name="isDonor"
+          type="checkbox"
+          onChange={handleCheckbox}
+          vertical
+          validateFields={[]}
+        />
+      </Col>
+      <Col
+        xs={6}
+        md={3}
+      >
+        <Field
+          component={Checkbox}
+          label={<FormattedMessage id="ui-organizations.summary.isVendor" />}
+          name="isVendor"
+          type="checkbox"
+          onChange={handleCheckbox}
+          vertical
+          validateFields={[]}
+        />
+      </Col>
       <Col xs={6}>
         <FieldArray
           addLabel={<FormattedMessage id="ui-organizations.summary.add" />}