UIORGS-390 Add categories options to the form; fix issues

src/Organizations/OrganizationCreate/OrganizationCreate.js

@@ -53,8 +53,9 @@ export const OrganizationCreate = ({ history, location, mutator }) => {
       return mutator.createOrganizationOrg.POST(data)
         .then(async organization => {
           await manageBankingInformation({
-            initBankingInformation: getFieldState(BANKING_INFORMATION_FIELD_NAME).initial,
+            initBankingInformation: getFieldState(BANKING_INFORMATION_FIELD_NAME)?.initial,
             bankingInformation,
+            organization,
           });
 
           return organization;

src/Organizations/OrganizationEdit/OrganizationEdit.js

@@ -73,8 +73,9 @@ export const OrganizationEdit = ({ match, history, location, mutator }) => {
       return mutator.editOrganizationOrg.PUT(data)
         .then(() => {
           return manageBankingInformation({
-            initBankingInformation: getFieldState(BANKING_INFORMATION_FIELD_NAME).initial,
+            initBankingInformation: getFieldState(BANKING_INFORMATION_FIELD_NAME)?.initial,
             bankingInformation,
+            organization: values,
           });
         })
         .then(() => {

src/Organizations/OrganizationForm/OrganizationBankingInfoForm/BankingInformationField/BankingInformationField.js

@@ -13,6 +13,7 @@ import { FieldSelectionFinal } from '@folio/stripes-acq-components';
 import { FieldIsPrimary } from '../../../../common/components';
 
 export const BankingInformationField = ({
+  categoriesOptions,
   bankingAccountTypeOptions,
   fields,
   index,
@@ -61,8 +62,7 @@ export const BankingInformationField = ({
           <FieldSelectionFinal
             label={<FormattedMessage id="ui-organizations.data.bankingInformation.address" />}
             name={`${name}.addressId`}
-            // TODO: refine address field
-            dataOptions={[]}
+            dataOptions={categoriesOptions}
             validateFields={[]}
           />
         </Col>
@@ -95,6 +95,10 @@ BankingInformationField.propTypes = {
     label: PropTypes.string,
     value: PropTypes.string,
   })).isRequired,
+  categoriesOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string,
+  })).isRequired,
   fields: PropTypes.object.isRequired,
   index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,

src/Organizations/OrganizationForm/OrganizationBankingInfoForm/OrganizationBankingInfoForm.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { FieldArray } from 'react-final-form-arrays';
@@ -27,7 +26,7 @@ const renderField = (props) => (name, index, fields) => (
   />
 );
 
-export const OrganizationBankingInfoForm = ({ organizationId }) => {
+export const OrganizationBankingInfoForm = () => {
   const {
     bankingAccountTypes,
     isFetching: isBankingAccountTypesFetching,
@@ -64,14 +63,10 @@ export const OrganizationBankingInfoForm = ({ organizationId }) => {
       component={RepeatableFieldWithValidation}
       id="bankingInformation"
       name={BANKING_INFORMATION_FIELD_NAME}
-      onAdd={createAddNewItem(null, { organizationId })}
+      onAdd={createAddNewItem()}
       onRemove={removeItem}
       renderField={renderField({ categoriesOptions, bankingAccountTypeOptions })}
       validate={validatePrimary}
     />
   );
 };
-
-OrganizationBankingInfoForm.propTypes = {
-  organizationId: PropTypes.string.isRequired,
-};

src/Organizations/OrganizationForm/OrganizationForm.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router';
@@ -24,6 +23,7 @@ import {
 } from '@folio/stripes-acq-components';
 
 import { ORGANIZATIONS_ROUTE } from '../../common/constants';
+import { useBankingInformationSettings } from '../../common/hooks';
 import { OrganizationBankingInfoForm } from './OrganizationBankingInfoForm';
 import { OrganizationSummaryForm } from './OrganizationSummaryForm';
 import { OrganizationContactInfoFormContainer } from './OrganizationContactInfoForm';
@@ -55,6 +55,7 @@ const OrganizationForm = ({
     [ORGANIZATION_SECTIONS.contactPeopleSection]: false,
     [ORGANIZATION_SECTIONS.interfacesSection]: false,
     [ORGANIZATION_SECTIONS.vendorInformationSection]: false,
+    [ORGANIZATION_SECTIONS.bankingInformationSection]: false,
     [ORGANIZATION_SECTIONS.vendorTermsSection]: false,
     [ORGANIZATION_SECTIONS.accountsSection]: false,
   };
@@ -70,6 +71,9 @@ const OrganizationForm = ({
     : stateSections;
   const history = useHistory();
   const { id, interfaces, contacts, metadata } = initialValues;
+
+  const { enabled: isBankingInformationEnabled } = useBankingInformationSettings();
+
   const shortcuts = [
     {
       name: 'cancel',
@@ -201,12 +205,14 @@ const OrganizationForm = ({
                           <OrganizationVendorInfoForm />
                         </Accordion>
 
-                        <Accordion
-                          id={ORGANIZATION_SECTIONS.bankingInformationSection}
-                          label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.bankingInformationSection]}
-                        >
-                          <OrganizationBankingInfoForm organizationId={initialValues.id} />
-                        </Accordion>
+                        {isBankingInformationEnabled && (
+                          <Accordion
+                            id={ORGANIZATION_SECTIONS.bankingInformationSection}
+                            label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.bankingInformationSection]}
+                          >
+                            <OrganizationBankingInfoForm />
+                          </Accordion>
+                        )}
 
                         <Accordion
                           id={ORGANIZATION_SECTIONS.vendorTermsSection}

src/Organizations/useBankingInformationManager.js

@@ -3,16 +3,25 @@ import { useCallback } from 'react';
 
 import { useShowCallout } from '@folio/stripes-acq-components';
 
-import { useBankingInformationMutation } from '../common/hooks';
+import {
+  useBankingInformationMutation,
+  useBankingInformationSettings,
+} from '../common/hooks';
 import { getArrayItemsChanges } from '../common/utils';
 
-const execute = (fn, arr) => chunk(arr, 5).reduce((acc, chunked) => {
+const executeSequentially = (fn, arr) => arr.reduce((acc, curr) => {
+  return acc.then(() => fn({ bankingInformation: curr }));
+}, Promise.resolve());
+
+const executeParallel = (fn, arr) => chunk(arr, 5).reduce((acc, chunked) => {
   return acc.then(() => Promise.all(chunked.map((bankingInformation) => fn({ bankingInformation }))));
 }, Promise.resolve());
 
 export const useBankingInformationManager = () => {
   const showCallout = useShowCallout();
 
+  const { enabled: isBankingInformationEnabled } = useBankingInformationSettings();
+
   const {
     createBankingInformation,
     updateBankingInformation,
@@ -23,17 +32,20 @@ export const useBankingInformationManager = () => {
   const manageBankingInformation = useCallback(({
     initBankingInformation,
     bankingInformation,
+    organization,
   }) => {
+    if (!(organization.isVendor && isBankingInformationEnabled)) return Promise.resolve();
+
     const {
       created,
       updated,
       deleted,
     } = getArrayItemsChanges(initBankingInformation, bankingInformation);
 
     return Promise.all([
-      execute(createBankingInformation, created),
-      execute(updateBankingInformation, updated),
-      execute(deleteBankingInformation, deleted),
+      executeSequentially(createBankingInformation, created.map((item) => ({ organizationId: organization.id, ...item }))),
+      executeParallel(updateBankingInformation, updated),
+      executeParallel(deleteBankingInformation, deleted),
     ]).catch(() => {
       showCallout({
         type: 'error',

src/common/hooks/useOrganizationBankingInformation/useOrganizationBankingInformation.js

@@ -4,6 +4,7 @@ import {
   useNamespace,
   useOkapiKy,
 } from '@folio/stripes/core';
+import { LIMIT_MAX } from '@folio/stripes-acq-components';
 
 import { BANKING_INFORMATION_API } from '../../constants';
 
@@ -27,7 +28,8 @@ export const useOrganizationBankingInformation = (organizationId, options = {})
     [namespace],
     () => {
       const searchParams = {
-        query: `organizationId==${organizationId}`,
+        query: `organizationId==${organizationId} sortby metadata.createdDate/sort.ascending`,
+        limit: LIMIT_MAX,
       };
 
       return ky.get(BANKING_INFORMATION_API, { searchParams }).json();

src/common/utils/createAddNewItem.js

@@ -1,6 +1,6 @@
-export function createAddNewItem(defaultLanguage, initialData = {}) {
+export function createAddNewItem(defaultLanguage) {
   return fields => {
-    const newItem = { ...initialData };
+    const newItem = {};
 
     if (defaultLanguage) newItem.language = defaultLanguage;
     if (fields.length === 0) newItem.isPrimary = true;