UIORGS-390 Implement base components and hooks for banking informatio…

…n (no logic)

package.json

@@ -19,6 +19,7 @@
     "home": "/organizations",
     "okapiInterfaces": {
       "acquisition-methods": "1.0",
+      "banking-information": "1.0",
       "data-export-spring": "1.0",
       "configuration": "2.0",
       "organizations.organizations": "1.0",

src/Organizations/OrganizationCreate/OrganizationCreate.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { useIntl } from 'react-intl';
@@ -46,7 +46,10 @@ export const OrganizationCreate = ({ history, location, mutator }) => {
   const showCallout = useShowCallout();
   const intl = useIntl();
   const createOrganization = useCallback(
-    (data) => {
+    ({ bankingInformation, ...data }) => {
+      // TODO: implement create banking info logic
+      console.log('bankingInformation on create', bankingInformation);
+
       return mutator.createOrganizationOrg.POST(data)
         .then(organization => {
           setTimeout(() => cancelForm(organization.id));
@@ -63,9 +66,15 @@ export const OrganizationCreate = ({ history, location, mutator }) => {
     [cancelForm, intl, showCallout],
   );
 
+  // TODO: provide info without perms and setting?
+  const initialValues = useMemo(() => ({
+    bankingInformation: [],
+    ...INITIAL_VALUES,
+  }), []);
+
   return (
     <OrganizationForm
-      initialValues={INITIAL_VALUES}
+      initialValues={initialValues}
       onSubmit={createOrganization}
       cancelForm={cancelForm}
     />

src/Organizations/OrganizationEdit/OrganizationEdit.js

@@ -1,6 +1,7 @@
-import React, {
+import {
   useCallback,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -19,6 +20,7 @@ import {
 } from '@folio/stripes-acq-components';
 
 import { VIEW_ORG_DETAILS } from '../../common/constants';
+import { useOrganizationBankingInformation } from '../../common/hooks';
 import { organizationResourceByUrl } from '../../common/resources';
 import {
   OrganizationForm,
@@ -29,17 +31,22 @@ export const OrganizationEdit = ({ match, history, location, mutator }) => {
   const organizationId = match.params.id;
 
   const [organization, setOrganization] = useState({});
-  const [isLoading, setIsLoading] = useState(true);
+  const [isOrganizationLoading, setIsOrganizationLoading] = useState(true);
   const showCallout = useShowCallout();
   const intl = useIntl();
 
+  const {
+    bankingInformation: bankingInformationData,
+    isLoading: isBankingInformationLoading,
+  } = useOrganizationBankingInformation(organizationId);
+
   useEffect(
     () => {
       mutator.editOrganizationOrg.GET()
         .then(organizationsResponse => {
           setOrganization(organizationsResponse);
         })
-        .finally(() => setIsLoading(false));
+        .finally(() => setIsOrganizationLoading(false));
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
@@ -58,7 +65,10 @@ export const OrganizationEdit = ({ match, history, location, mutator }) => {
   );
 
   const updateOrganization = useCallback(
-    (data) => {
+    ({ bankingInformation, ...data }) => {
+      // TODO: implement create/update banking info logic
+      console.log('bankingInformation on update', bankingInformation);
+
       return mutator.editOrganizationOrg.PUT(data)
         .then(() => {
           setTimeout(cancelForm);
@@ -75,6 +85,13 @@ export const OrganizationEdit = ({ match, history, location, mutator }) => {
     [cancelForm, intl, showCallout],
   );
 
+  const initialValues = useMemo(() => ({
+    bankingInformation: bankingInformationData,
+    ...organization,
+  }), [organization, bankingInformationData]);
+
+  const isLoading = isOrganizationLoading || isBankingInformationLoading;
+
   if (isLoading) {
     return (
       <Paneset>
@@ -85,7 +102,7 @@ export const OrganizationEdit = ({ match, history, location, mutator }) => {
 
   return (
     <OrganizationForm
-      initialValues={organization}
+      initialValues={initialValues}
       onSubmit={updateOrganization}
       cancelForm={cancelForm}
       paneTitle={<FormattedMessage id="ui-organizations.editOrg.title" values={{ name: organization.name }} />}

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

@@ -0,0 +1,101 @@
+import PropTypes from 'prop-types';
+import { Field } from 'react-final-form';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Card,
+  Col,
+  Row,
+  TextField,
+} from '@folio/stripes/components';
+import { FieldSelectionFinal } from '@folio/stripes-acq-components';
+
+import { FieldIsPrimary } from '../../../../common/components';
+
+export const BankingInformationField = ({
+  bankingAccountTypeOptions,
+  fields,
+  index,
+  name,
+}) => {
+  const cardHeader = (
+    <FieldIsPrimary
+      fields={fields}
+      fieldIndex={index}
+      fieldPrefix={name}
+      labelId="ui-organizations.data.bankingInformation.isPrimary"
+    />
+  );
+
+  return (
+    <Card headerStart={cardHeader}>
+      <Row>
+        <Col xs={12} md={4}>
+          <Field
+            label={<FormattedMessage id="ui-organizations.data.bankingInformation.bankName" />}
+            name={`${name}.bankName`}
+            component={TextField}
+            fullWidth
+            validateFields={[]}
+          />
+        </Col>
+        <Col xs={12} md={4}>
+          <Field
+            label={<FormattedMessage id="ui-organizations.data.bankingInformation.bankAccountNumber" />}
+            name={`${name}.bankAccountNumber`}
+            component={TextField}
+            fullWidth
+            validateFields={[]}
+          />
+        </Col>
+        <Col xs={12} md={4}>
+          <Field
+            label={<FormattedMessage id="ui-organizations.data.bankingInformation.transitNumber" />}
+            name={`${name}.transitNumber`}
+            component={TextField}
+            fullWidth
+            validateFields={[]}
+          />
+        </Col>
+        <Col xs={12} md={4}>
+          <FieldSelectionFinal
+            label={<FormattedMessage id="ui-organizations.data.bankingInformation.address" />}
+            name={`${name}.addressId`}
+            // TODO: refine address field
+            dataOptions={[]}
+            validateFields={[]}
+          />
+        </Col>
+        <Col xs={12} md={4}>
+          <FieldSelectionFinal
+            label={<FormattedMessage id="ui-organizations.data.bankingInformation.accountType" />}
+            name={`${name}.accountTypeId`}
+            dataOptions={bankingAccountTypeOptions}
+            fullWidth
+            validateFields={[]}
+          />
+        </Col>
+        <Col xs={12} md={4}>
+          <Field
+            label={<FormattedMessage id="ui-organizations.data.bankingInformation.notes" />}
+            name={`${name}.notes`}
+            id={`${name}.notes`}
+            component={TextField}
+            fullWidth
+            validateFields={[]}
+          />
+        </Col>
+      </Row>
+    </Card>
+  );
+};
+
+BankingInformationField.propTypes = {
+  bankingAccountTypeOptions: 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/BankingInformationField/index.js

@@ -0,0 +1 @@
+export { BankingInformationField } from './BankingInformationField';

src/Organizations/OrganizationForm/OrganizationBankingInfoForm/OrganizationBankingInfoForm.js

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { FieldArray } from 'react-final-form-arrays';
+
+import { Loading } from '@folio/stripes/components';
+import { RepeatableFieldWithValidation } from '@folio/stripes-acq-components';
+
+import { useBankingAccountTypes } from '../../../common/hooks';
+import {
+  createAddNewItem,
+  removeItem,
+} from '../../../common/utils';
+import { validatePrimary } from '../../../common/validation';
+import { BankingInformationField } from './BankingInformationField';
+
+const renderField = (props) => (name, index, fields) => (
+  <BankingInformationField
+    {...props}
+    name={name}
+    index={index}
+    fields={fields}
+  />
+);
+
+export const OrganizationBankingInfoForm = () => {
+  const {
+    bankingAccountTypes,
+    isFetching,
+  } = useBankingAccountTypes();
+
+  const bankingAccountTypeOptions = useMemo(() => {
+    return bankingAccountTypes.map(({ id, name }) => ({
+      label: name,
+      value: id,
+    }));
+  }, [bankingAccountTypes]);
+
+  if (isFetching) {
+    return <Loading />;
+  }
+
+  return (
+    <FieldArray
+      addLabel={<FormattedMessage id="ui-organizations.button.bankingInformation.add" />}
+      component={RepeatableFieldWithValidation}
+      id="bankingInformation"
+      name="bankingInformation"
+      onAdd={createAddNewItem()}
+      onRemove={removeItem}
+      renderField={renderField({ bankingAccountTypeOptions })}
+      validate={validatePrimary}
+    />
+  );
+};

src/Organizations/OrganizationForm/OrganizationBankingInfoForm/index.js

@@ -0,0 +1 @@
+export { OrganizationBankingInfoForm } from './OrganizationBankingInfoForm';

src/Organizations/OrganizationForm/OrganizationForm.js

@@ -24,6 +24,7 @@ import {
 } from '@folio/stripes-acq-components';
 
 import { ORGANIZATIONS_ROUTE } from '../../common/constants';
+import { OrganizationBankingInfoForm } from './OrganizationBankingInfoForm';
 import { OrganizationSummaryForm } from './OrganizationSummaryForm';
 import { OrganizationContactInfoFormContainer } from './OrganizationContactInfoForm';
 import { OrganizationContactPeopleForm } from './OrganizationContactPeopleForm';
@@ -200,6 +201,13 @@ const OrganizationForm = ({
                           <OrganizationVendorInfoForm />
                         </Accordion>
 
+                        <Accordion
+                          id={ORGANIZATION_SECTIONS.bankingInformationSection}
+                          label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.bankingInformationSection]}
+                        >
+                          <OrganizationBankingInfoForm />
+                        </Accordion>
+
                         <Accordion
                           id={ORGANIZATION_SECTIONS.vendorTermsSection}
                           label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.vendorTermsSection]}

src/Organizations/constants.js

@@ -1,8 +1,8 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 export const ORGANIZATION_SECTIONS = {
   summarySection: 'summarySection',
+  bankingInformationSection: 'bankingInformationSection',
   contactInformationSection: 'contactInformationSection',
   contactPeopleSection: 'contactPeopleSection',
   interfacesSection: 'interfacesSection',
@@ -16,6 +16,7 @@ export const ORGANIZATION_SECTIONS = {
 
 export const ORGANIZATION_SECTION_LABELS = {
   [ORGANIZATION_SECTIONS.summarySection]: <FormattedMessage id="ui-organizations.summary" />,
+  [ORGANIZATION_SECTIONS.bankingInformationSection]: <FormattedMessage id="ui-organizations.bankingInformation" />,
   [ORGANIZATION_SECTIONS.contactInformationSection]: <FormattedMessage id="ui-organizations.contactInformation" />,
   [ORGANIZATION_SECTIONS.contactPeopleSection]: <FormattedMessage id="ui-organizations.contactPeople" />,
   [ORGANIZATION_SECTIONS.interfacesSection]: <FormattedMessage id="ui-organizations.interface" />,

src/common/constants/api.js

@@ -1,5 +1,6 @@
 export const AGREEMENTS_API = 'erm/sas';
 export const BANKING_ACCOUNT_TYPES_API = 'organizations-storage/banking-account-types';
+export const BANKING_INFORMATION_API = 'organizations/banking-information';
 export const CATEGORIES_API = 'organizations-storage/categories';
 export const CONTACTS_API = 'organizations-storage/contacts';
 export const INTERFACES_API = 'organizations-storage/interfaces';

src/common/hooks/index.js

@@ -1,7 +1,9 @@
 export * from './useAcqMethods';
+export * from './useBankingAccountTypes';
 export * from './useBankingInformationSettings';
 export * from './useIntegrationConfig';
 export * from './useIntegrationConfigMutation';
 export * from './useLinkedAgreements';
+export * from './useOrganizationBankingInformation';
 export * from './useTranslatedCategories';
 export * from './useTypes';

src/common/hooks/useBankingAccountTypes/index.js

@@ -0,0 +1 @@
+export { useBankingAccountTypes } from './useBankingAccountTypes';

src/common/hooks/useBankingAccountTypes/useBankingAccountTypes.js

@@ -0,0 +1,40 @@
+import { useQuery } from 'react-query';
+
+import {
+  useNamespace,
+  useOkapiKy,
+} from '@folio/stripes/core';
+import { LIMIT_MAX } from '@folio/stripes-acq-components';
+
+import { BANKING_ACCOUNT_TYPES_API } from '../../constants';
+
+const DEFAULT_DATA = [];
+
+export const useBankingAccountTypes = () => {
+  const ky = useOkapiKy();
+  const [namespace] = useNamespace({ key: 'banking-account-types' });
+
+  const {
+    data,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useQuery(
+    [namespace],
+    () => {
+      const searchParams = {
+        limit: LIMIT_MAX,
+      };
+
+      return ky.get(BANKING_ACCOUNT_TYPES_API, { searchParams }).json();
+    },
+  );
+
+  return ({
+    bankingAccountTypes: data?.bankingAccountTypes || DEFAULT_DATA,
+    totalRecords: data?.totalRecords,
+    isFetching,
+    isLoading,
+    refetch,
+  });
+};

src/common/hooks/useOrganizationBankingInformation/index.js

@@ -0,0 +1 @@
+export { useOrganizationBankingInformation } from './useOrganizationBankingInformation';