UIORGS-391 - Settings for banking information

src/Settings/BankingAccountTypeSettings/BankingAccountTypeSettings.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { stripesShape } from '@folio/stripes/core';
+import { ControlledVocab } from '@folio/stripes/smart-components';
+import { getControlledVocabTranslations } from '@folio/stripes-acq-components';
+
+import { BANKING_ACCOUNT_TYPES_API } from '../constants';
+
+class BankingAccountTypeSettings extends React.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 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;
+    };
+
+    const ConnectedComponent = this.connectedControlledVocab;
+
+    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;

src/Settings/BankingAccountTypeSettings/BankingAccountTypeSettings.test.js

@@ -0,0 +1,59 @@
+import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
+
+import { ControlledVocab } from '@folio/stripes/smart-components';
+
+import BankingAccountTypeSettings from './BankingAccountTypeSettings';
+
+jest.mock('@folio/stripes/core', () => ({
+  ...jest.requireActual('@folio/stripes/core'),
+  useStripes: jest.fn(),
+}));
+
+jest.mock('@folio/stripes-smart-components/lib/ControlledVocab', () => jest.fn(({
+  rowFilter,
+  label,
+  rowFilterFunction,
+  preCreateHook,
+  listSuppressor,
+}) => (
+  <>
+    {label}
+    <div onChange={rowFilterFunction}>{rowFilter}</div>
+    <button
+      data-testid="button-new"
+      type="button"
+      onClick={() => {
+        preCreateHook();
+        listSuppressor();
+      }}
+    >
+      New
+    </button>
+  </>
+)));
+
+const stripesMock = {
+  connect: component => component,
+  hasPerm: jest.fn(() => true),
+  clone: jest.fn(),
+};
+
+const renderCategorySettings = () => render(<BankingAccountTypeSettings stripes={stripesMock} resources={[]} />);
+
+describe('BankingAccountTypeSettings', () => {
+  it('should render component', () => {
+    renderCategorySettings();
+
+    expect(screen.getByText('New'));
+    expect(screen.getByText('ui-organizations.settings.bankingAccountTypes'));
+  });
+
+  it('should check action suppression', () => {
+    renderCategorySettings();
+
+    const { actionSuppressor } = ControlledVocab.mock.calls[0][0];
+
+    expect(actionSuppressor.edit()).toBeFalsy();
+    expect(actionSuppressor.delete()).toBeFalsy();
+  });
+});

src/Settings/BankingAccountTypeSettings/index.js

@@ -0,0 +1 @@
+export { default as BankingAccountTypeSettings } from './BankingAccountTypeSettings';

src/Settings/BankingInformationSettings/BankingInformationSettings.js

@@ -0,0 +1,98 @@
+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 { useShowCallout } from '@folio/stripes-acq-components';
+import {
+  useOkapiKy,
+  useNamespace,
+} from '@folio/stripes/core';
+
+import { useBankingInformation } from '../hooks';
+import { SETTINGS_API } from '../constants';
+
+const BankingInformationSettings = () => {
+  const { enabled, key, id: bankingInformationId, isLoading } = useBankingInformation();
+  const ky = useOkapiKy();
+  const queryClient = useQueryClient();
+  const [namespace] = useNamespace({ key: 'banking-information-settings' });
+  const sendCallout = useShowCallout();
+
+  const onSubmit = async ({ value }) => {
+    try {
+      await ky.put(`${SETTINGS_API}/${bankingInformationId}`, {
+        json: { value, key },
+      });
+      queryClient.invalidateQueries([namespace]);
+      sendCallout({
+        type: 'success',
+        message: <FormattedMessage id="ui-organizations.settings.accountTypes.save.success.message" />,
+      });
+    } catch (error) {
+      sendCallout({
+        type: 'success',
+        message: <FormattedMessage id="settings.accountTypes.save.error.generic.message" />,
+      });
+    }
+  };
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <Pane
+      defaultWidth="fill"
+      id="banking-information"
+      paneTitle={<FormattedMessage id="ui-organizations.settings.bankingInformation" />}
+    >
+      <Row>
+        <Col xs={12}>
+          <Headline margin="none">
+            <FormattedMessage id="ui-organizations.settings.bankingInformation" />
+          </Headline>
+        </Col>
+        <Col xs={12}>
+          <Form
+            onSubmit={onSubmit}
+            initialValues={{ value: enabled }}
+            render={({ handleSubmit }) => (
+              <form onSubmit={handleSubmit}>
+                <Field
+                  name="value"
+                  component={RadioButtonGroup}
+                >
+                  <RadioButton
+                    label={<FormattedMessage id="ui-organizations.settings.bankingInformation.enabled" />}
+                    id="enabled"
+                    value="true"
+                  />
+                  <RadioButton
+                    label={<FormattedMessage id="ui-organizations.settings.bankingInformation.disabled" />}
+                    id="disabled"
+                    value="false"
+                  />
+                </Field>
+                <Button type="submit" buttonStyle="primary">
+                  <FormattedMessage id="ui-organizations.settings.accountTypes.save.button" />
+                </Button>
+              </form>
+            )}
+          />
+        </Col>
+      </Row>
+    </Pane>
+  );
+};
+
+export default BankingInformationSettings;

src/Settings/BankingInformationSettings/BankingInformationSettings.test.js

@@ -0,0 +1,85 @@
+import { render, screen, act } from '@folio/jest-config-stripes/testing-library/react';
+import user from '@folio/jest-config-stripes/testing-library/user-event';
+import { useOkapiKy } from '@folio/stripes/core';
+
+import BankingInformationSettings from './BankingInformationSettings';
+import { useBankingInformation } from '../hooks';
+
+jest.mock('react-query', () => ({
+  ...jest.requireActual('react-query'),
+  useQueryClient: jest.fn(() => ({
+    invalidateQueries: jest.fn(),
+  })),
+}));
+
+jest.mock('@folio/stripes/components', () => ({
+  ...jest.requireActual('@folio/stripes/components'),
+  Loading: () => <div>Loading</div>,
+}));
+
+jest.mock('../hooks', () => ({
+  useBankingInformation: jest.fn(() => ({
+    isLoading: false,
+    enabled: false,
+  })),
+}));
+
+const renderBankingInformationSettings = () => render(
+  <BankingInformationSettings />,
+);
+
+describe('BankingInformationSettings component', () => {
+  it('should display pane headings', () => {
+    renderBankingInformationSettings();
+
+    const paneTitle = screen.getAllByText('ui-organizations.settings.bankingInformation');
+
+    expect(paneTitle).toHaveLength(2);
+  });
+
+  it('should display radio buttons', async () => {
+    renderBankingInformationSettings();
+
+    expect(screen.getByText('ui-organizations.settings.bankingInformation.enabled')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.settings.bankingInformation.disabled')).toBeInTheDocument();
+  });
+
+  it('should render Loading component', () => {
+    useBankingInformation.mockReturnValue({
+      isLoading: true,
+      enabled: false,
+    });
+
+    renderBankingInformationSettings();
+
+    expect(screen.getByText('Loading')).toBeInTheDocument();
+  });
+
+  it('should save banking options', async () => {
+    useBankingInformation.mockClear().mockReturnValue({
+      isLoading: false,
+      enabled: true,
+    });
+    const mockPutMethod = jest.fn(() => ({
+      json: () => Promise.resolve('ok'),
+    }));
+
+    useOkapiKy
+      .mockClear()
+      .mockReturnValue({
+        put: mockPutMethod,
+      });
+
+    renderBankingInformationSettings();
+
+    const enabledButton = screen.getByText('ui-organizations.settings.bankingInformation.enabled');
+    const saveButton = screen.getByText('ui-organizations.settings.accountTypes.save.button');
+
+    await act(async () => {
+      await user.click(enabledButton);
+      await user.click(saveButton);
+    });
+
+    expect(mockPutMethod).toHaveBeenCalled();
+  });
+});

src/Settings/BankingInformationSettings/index.js

@@ -0,0 +1 @@
+export { default as BankingInformationSettings } from './BankingInformationSettings';

src/Settings/SettingsPage.js

@@ -1,10 +1,14 @@
-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';
 import { CategorySettings } from './CategorySettings';
 import { TypeSettings } from './TypeSettings';
+import { BankingInformationSettings } from './BankingInformationSettings';
+import { BankingAccountTypeSettings } from './BankingAccountTypeSettings';
 
 const pages = [
   {
@@ -19,14 +23,38 @@ const pages = [
     perm: 'settings.organizations.enabled',
     route: 'type',
   },
+  {
+    component: BankingInformationSettings,
+    label: <FormattedMessage id="ui-organizations.settings.bankingInformation" />,
+    perm: 'settings.organizations.enabled',
+    route: 'banking-information',
+  },
 ];
 
-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;