UIORGS-391: integrate with backend.

src/Settings/BankingAccountTypeSettings/BankingAccountTypeSettings.js

@@ -1,69 +1,62 @@
-import React, { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { stripesShape } from '@folio/stripes/core';
+import { stripesConnect, stripesShape } from '@folio/stripes/core';
 import { ControlledVocab } from '@folio/stripes/smart-components';
 import { getControlledVocabTranslations } from '@folio/stripes-acq-components';
 
-class BankingAccountTypeSettings extends Component {
-  constructor(props) {
-    super(props);
-    this.connectedControlledVocab = props.stripes.connect(ControlledVocab);
-  }
-
-  render() {
-    const { stripes } = this.props;
-    const columnMapping = {
-      value: <FormattedMessage id="ui-organizations.settings.name" />,
-      action: <FormattedMessage id="ui-organizations.settings.action" />,
-    };
-
-    const hasEditPerms = stripes.hasPerm('ui-organizations.settings');
-    const actionSuppressor = {
-      edit: () => !hasEditPerms,
-      delete: () => !hasEditPerms,
-    };
-
-    const ConnectedComponent = this.connectedControlledVocab;
-
-    const setUniqValidation = (value, index, items) => {
-      const errors = {};
-
-      const isAccountTypeExist = items.some(({ id, name }) => {
-        return name?.toLowerCase() === value?.name?.toLowerCase() && id !== value?.id;
-      });
-
-      if (isAccountTypeExist) {
-        errors.name = <FormattedMessage id="ui-organizations.settings.accountTypes.save.error.accountTypeMustBeUnique" />;
-      }
-
-      return errors;
-    };
-
-    return (
-      <ConnectedComponent
-        actionSuppressor={actionSuppressor}
-        canCreate={hasEditPerms}
-        stripes={stripes}
-        baseUrl="organizations-storage/banking-account-types"
-        records="bankingAccountTypes"
-        label={<FormattedMessage id="ui-organizations.settings.accountTypes" />}
-        translations={getControlledVocabTranslations('ui-organizations.settings.accountTypes')}
-        objectLabel="BankingAccountTypes"
-        visibleFields={['name']}
-        columnMapping={columnMapping}
-        hiddenFields={['lastUpdated', 'numberOfObjects']}
-        nameKey="bankingAccountTypes"
-        id="bankingAccountTypes"
-        validate={setUniqValidation}
-        sortby="name"
-      />
-    );
-  }
-}
+import { BANKING_ACCOUNT_TYPES_API } from '../constants';
+
+const BankingAccountTypeSettings = ({ stripes }) => {
+  const ConnectedComponent = stripes.connect(ControlledVocab);
+
+  const columnMapping = {
+    value: <FormattedMessage id="ui-organizations.settings.name" />,
+    action: <FormattedMessage id="ui-organizations.settings.action" />,
+  };
+
+  const hasEditPerms = stripes.hasPerm('ui-organizations.settings');
+  const actionSuppressor = {
+    edit: () => !hasEditPerms,
+    delete: () => !hasEditPerms,
+  };
+
+  const setUniqValidation = (value, index, items) => {
+    const errors = {};
+
+    const isBankingAccountTypeExist = items.some(({ id, name }) => {
+      return name?.toLowerCase() === value?.name?.toLowerCase() && id !== value?.id;
+    });
+
+    if (isBankingAccountTypeExist) {
+      errors.name = <FormattedMessage id="ui-organizations.settings.accountTypes.save.error.accountTypeMustBeUnique" />;
+    }
+
+    return errors;
+  };
+
+  return (
+    <ConnectedComponent
+      actionSuppressor={actionSuppressor}
+      canCreate={hasEditPerms}
+      stripes={stripes}
+      baseUrl={BANKING_ACCOUNT_TYPES_API}
+      records="bankingAccountTypes"
+      label={<FormattedMessage id="ui-organizations.settings.bankingAccountTypes" />}
+      translations={getControlledVocabTranslations('ui-organizations.settings.bankingAccountTypes')}
+      objectLabel="BankingAccountTypes"
+      visibleFields={['name']}
+      columnMapping={columnMapping}
+      hiddenFields={['lastUpdated', 'numberOfObjects']}
+      nameKey="bankingAccountTypes"
+      id="bankingAccountTypes"
+      validate={setUniqValidation}
+      sortby="name"
+    />
+  );
+};
 
 BankingAccountTypeSettings.propTypes = {
   stripes: stripesShape.isRequired,
 };
 
-export default BankingAccountTypeSettings;
+export default stripesConnect(BankingAccountTypeSettings);

src/Settings/BankingInformationSettings/BankingInformationSettings.js

@@ -1,25 +1,46 @@
 import { FormattedMessage } from 'react-intl';
 import { Field, Form } from 'react-final-form';
+import { useQueryClient } from 'react-query';
 
 import {
   Button,
   Col,
   Headline,
+  Loading,
   Pane,
   RadioButton,
   RadioButtonGroup,
   Row,
 } from '@folio/stripes/components';
+import {
+  useOkapiKy,
+  useNamespace,
+} from '@folio/stripes/core';
+
+import { useBankingInformation } from '../hooks/useBankingInformation';
+import { SETTINGS_API } from '../constants';
 
 const BankingInformationSettings = () => {
-  const onSubmit = (values) => {
-    console.log(values);
+  const { enabled, key, id: bankingInformationId, isLoading } = useBankingInformation();
+  const ky = useOkapiKy();
+  const queryClient = useQueryClient();
+  const [namespace] = useNamespace({ key: 'banking-information-settings' });
+
+  const onSubmit = ({ value }) => {
+    ky.put(`${SETTINGS_API}/${bankingInformationId}`, {
+      json: { value, key },
+    }).then(() => {
+      queryClient.invalidateQueries([namespace]);
+    });
   };
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <Pane
       defaultWidth="fill"
-      dismissible
       id="banking-information"
       paneTitle={<FormattedMessage id="ui-organizations.settings.bankingInformation" />}
     >
@@ -32,11 +53,11 @@ const BankingInformationSettings = () => {
         <Col xs={12}>
           <Form
             onSubmit={onSubmit}
-            initialValues={{ enabled: false }}
+            initialValues={{ value: enabled }}
             render={({ handleSubmit }) => (
               <form onSubmit={handleSubmit}>
                 <Field
-                  name="enabled"
+                  name="value"
                   component={RadioButtonGroup}
                 >
                   <RadioButton

src/Settings/SettingsPage.js

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Settings } from '@folio/stripes/smart-components';
+import { Loading } from '@folio/stripes/components';
 
+import { useBankingInformation } from './hooks/useBankingInformation';
 import { CategorySettings } from './CategorySettings';
 import { TypeSettings } from './TypeSettings';
 import { BankingInformationSettings } from './BankingInformationSettings';
@@ -27,20 +29,32 @@ const pages = [
     perm: 'settings.organizations.enabled',
     route: 'banking-information',
   },
-  {
-    component: BankingAccountTypeSettings,
-    label: <FormattedMessage id="ui-organizations.settings.accountTypes" />,
-    perm: 'settings.organizations.enabled',
-    route: 'account-types',
-  },
 ];
 
-const SettingsPage = (props) => (
-  <Settings
-    {...props}
-    pages={pages}
-    paneTitle={<FormattedMessage id="ui-organizations.settings.vendorSettings" />}
-  />
-);
+const bankingAccountTypesPage = {
+  component: BankingAccountTypeSettings,
+  label: <FormattedMessage id="ui-organizations.settings.bankingAccountTypes" />,
+  perm: 'settings.organizations.enabled',
+  route: 'banking-account-types',
+};
+
+const SettingsPage = (props) => {
+  const { enabled, isLoading } = useBankingInformation();
+
+  const settingsPages = useMemo(() => (enabled ? pages.concat(bankingAccountTypesPage) : pages), [enabled]);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <Settings
+      {...props}
+      key={settingsPages.length}
+      pages={settingsPages}
+      paneTitle={<FormattedMessage id="ui-organizations.settings.vendorSettings" />}
+    />
+  );
+};
 
 export default SettingsPage;

src/Settings/constants.js

@@ -0,0 +1,4 @@
+export const SETTINGS_API = 'organizations-storage/settings';
+export const BANKING_ACCOUNT_TYPES_API = 'organizations-storage/banking-account-types';
+
+export const MAX_LIMIT = 1;

src/Settings/hooks/useBankingInformation.js

@@ -0,0 +1,33 @@
+import { useQuery } from 'react-query';
+import { get } from 'lodash';
+
+import {
+  useNamespace,
+  useOkapiKy,
+} from '@folio/stripes/core';
+
+import { MAX_LIMIT, SETTINGS_API } from '../constants';
+
+export const useBankingInformation = () => {
+  const ky = useOkapiKy();
+  const [namespace] = useNamespace({ key: 'banking-information-settings' });
+
+  const searchParams = {
+    limit: MAX_LIMIT,
+    query: 'key=BANKING_INFORMATION_ENABLED',
+  };
+
+  const { isLoading, data } = useQuery(
+    [namespace],
+    () => ky.get(SETTINGS_API, { searchParams }).json().catch(() => null),
+  );
+
+  const bankingInformation = get(data, 'settings[0]', {});
+
+  return ({
+    id: bankingInformation.id,
+    enabled: bankingInformation.value === 'true',
+    key: bankingInformation.key,
+    isLoading,
+  });
+};

translations/ui-organizations/en.json

@@ -445,8 +445,13 @@
   "settings.bankingInformation": "Banking information",
   "settings.bankingInformation.enabled": "Enable",
   "settings.bankingInformation.disabled": "Disable",
-  "settings.accountTypes": "Account types",
-  "settings.accountTypes.save.error.accountTypeMustBeUnique": "Account type must be uniq",
+  "settings.bankingAccountTypes": "Account types",
+  "settings.bankingAccountTypes.cannotDeleteTermHeader": "Cannot delete banking account type",
+  "settings.bankingAccountTypes.cannotDeleteTermMessage": "This banking account type cannot be deleted, as it is in use by one or more records.",
+  "settings.bankingAccountTypes.deleteEntry": "Delete banking account type",
+  "settings.bankingAccountTypes.termDeleted": "The banking account type <b>{term}</b> was successfully <b>deleted</b>",
+  "settings.bankingAccountTypes.termWillBeDeleted": "The banking account type <b>{term}</b> will be <b>deleted.</b>",
+  "settings.accountTypes.save.error.accountTypeMustBeUnique": "Banking account type must be unique.",
 
   "permission.view": "Organizations: View",
   "permission.edit": "Organizations: View, edit",