UIORGS-391: add initial routing config and components

CHANGELOG.md

@@ -11,6 +11,7 @@
 * Upgrade `Node.js` to `18` version in GitHub Actions. Refs UIORGS-378.
 * *BREAKING* bump `react-intl` to `v6.4.4`. Refs UIORGS-386.
 * Add a message indicating future functionality for EDI naming convention. Refs UIORGS-382.
+* Settings for banking information. Refs UIORGS-391.
 
 ## [4.0.0](https://github.com/folio-org/ui-organizations/tree/v4.0.0) (2023-02-22)
 [Full Changelog](https://github.com/folio-org/ui-organizations/compare/v3.3.1...v4.0.0)

src/Settings/AccountTypeSettings/AccountTypeSettings.js

@@ -0,0 +1,54 @@
+import React, { Component } 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';
+
+class AccountTypeSettings 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;
+
+    return (
+      <ConnectedComponent
+        actionSuppressor={actionSuppressor}
+        canCreate={hasEditPerms}
+        stripes={stripes}
+        baseUrl="organizations-storage/categories"
+        records="categories"
+        label={<FormattedMessage id="ui-organizations.settings.accountTypes" />}
+        translations={getControlledVocabTranslations('ui-organizations.settings.accountTypes')}
+        objectLabel="Categories"
+        visibleFields={['value']}
+        columnMapping={columnMapping}
+        hiddenFields={['lastUpdated', 'numberOfObjects']}
+        nameKey="categories"
+        id="categories"
+        sortby="value"
+      />
+    );
+  }
+}
+
+AccountTypeSettings.propTypes = {
+  stripes: stripesShape.isRequired,
+};
+
+export default AccountTypeSettings;

src/Settings/AccountTypeSettings/index.js

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

src/Settings/BankingInformationSettings/BankingInformationSettings.js

@@ -0,0 +1,64 @@
+import { FormattedMessage } from 'react-intl';
+import { Field, Form } from 'react-final-form';
+
+import {
+  Button,
+  Checkbox,
+  Col,
+  Headline,
+  Pane,
+  RadioButton,
+  RadioButtonGroup,
+  Row,
+} from '@folio/stripes/components';
+
+const BankingInformationSettings = () => {
+  const onSubmit = (values) => {
+    console.log(values);
+  };
+
+  return (
+    <Pane
+      defaultWidth="fill"
+      dismissible
+      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={{ enabled: false }}
+            render={({ handleSubmit }) => (
+              <form onSubmit={handleSubmit}>
+                <Field
+                  name="enabled"
+                  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">Save</Button>
+              </form>
+            )}
+          />
+        </Col>
+      </Row>
+    </Pane>
+  );
+};
+
+export default BankingInformationSettings;

src/Settings/BankingInformationSettings/constants.js

@@ -0,0 +1,4 @@
+export const typeStatus = [
+  { value: 'Active' },
+  { value: 'Inactive' },
+];

src/Settings/BankingInformationSettings/index.js

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

src/Settings/SettingsPage.js

@@ -5,6 +5,8 @@ import { Settings } from '@folio/stripes/smart-components';
 
 import { CategorySettings } from './CategorySettings';
 import { TypeSettings } from './TypeSettings';
+import { BankingInformationSettings } from './BankingInformationSettings';
+import { AccountTypeSettings } from './AccountTypeSettings';
 
 const pages = [
   {
@@ -19,6 +21,18 @@ const pages = [
     perm: 'settings.organizations.enabled',
     route: 'type',
   },
+  {
+    component: BankingInformationSettings,
+    label: <FormattedMessage id="ui-organizations.settings.bankingInformation" />,
+    perm: 'settings.organizations.enabled',
+    route: 'banking-information',
+  },
+  {
+    component: AccountTypeSettings,
+    label: <FormattedMessage id="ui-organizations.settings.accountTypes" />,
+    perm: 'settings.organizations.enabled',
+    route: 'account-types',
+  },
 ];
 
 const SettingsPage = (props) => (

translations/ui-organizations/en.json

@@ -441,6 +441,11 @@
   "settings.type": "Type",
   "settings.typeStatus.Active": "Active",
   "settings.typeStatus.Inactive": "Inactive",
+  "settings.bankingInformation": "Banking information",
+  "settings.bankingInformation.enabled": "Enabled",
+  "settings.bankingInformation.disabled": "Disabled",
+  "settings.accountTypes": "Account types",
+
   "permission.view": "Organizations: View",
   "permission.edit": "Organizations: View, edit",
   "permission.create": "Organizations: View, edit, create",