UIORGS-336: Creating or changing a vendor code using number generator in Organizations App

package.json

@@ -293,6 +293,14 @@
  "organizations-storage.banking-account-types.item.put",
  "organizations-storage.banking-account-types.item.delete"
  ]
+ },
+ {
+ "permissionName": "ui-organizations.settings.numberGenerator.manage",
+ "displayName": "Settings (Organizations): Manage number generator options",
+ "subPermissions": [
+ "settings.organizations.enabled"
+ ],
+ "visible": true
  }
  ]
  },
@@ -323,6 +331,7 @@
  "@bigtest/react": "^0.1.2",
  "@folio/eslint-config-stripes": "^7.0.0",
  "@folio/jest-config-stripes": "^2.0.0",
+ "@folio/service-interaction": "^2.0.0",
  "@folio/stripes": "^9.0.0",
  "@folio/stripes-cli": "^3.0.0",
  "@formatjs/cli": "^6.1.3",
@@ -362,6 +371,7 @@
  "redux-form": "^8.3.0"
  },
  "peerDependencies": {
+ "@folio/service-interaction": "^2.0.0",
  "@folio/stripes": "^9.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
@@ -374,5 +384,8 @@
  "optionalDependencies": {
  "@folio/plugin-find-contact": "^5.0.0",
  "@folio/plugin-find-interface": "^5.0.0"
+ },
+ "optionalOkapiInterfaces": {
+ "servint": "2.0 3.0"
  }
 }

src/Organizations/OrganizationForm/OrganizationSummaryForm/FieldCode/FieldCode.js

@@ -1,13 +1,17 @@
 import React, { useCallback } from 'react';
-import { Field } from 'react-final-form';
+import { Field, useForm } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 
-import { stripesConnect } from '@folio/stripes/core';
-import { TextField } from '@folio/stripes/components';
+import { stripesConnect, useStripes } from '@folio/stripes/core';
+import { Col, Row, TextField } from '@folio/stripes/components';
+import { NumberGeneratorModalButton } from '@folio/service-interaction';
 
 import { fetchOrgsByParam } from '../../../../common/resources';
 import { validateOrgCode } from './validateOrgCode';
+import { useSettings } from '../../../../common/hooks';
+
+const CONFIG_NAME = 'number_generator';
 
 const FieldCode = ({ orgId, mutator }) => {
  const validate = useCallback(value => {
@@ -16,15 +20,47 @@
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [orgId]);
 
+ const { change } = useForm();
+ const stripes = useStripes();
+
+ const { settings } = useSettings([CONFIG_NAME]);
+ let vendorCodeSetting = 'useTextField';
+
+ if (stripes.hasInterface('servint')) {
+ vendorCodeSetting = settings?.find(sett => sett?.configName === CONFIG_NAME)?.parsedSettings?.vendorGeneratorSetting ?? 'useTextField';
+ }
+
  return (
- <Field
- component={TextField}
- fullWidth
- label={<FormattedMessage id="ui-organizations.summary.code" />}
- name="code"
- required
- validate={validate}
- />
+ <Row>
+ <Col xs={12}>
+ <Field
+ component={TextField}
+ disabled={vendorCodeSetting === 'useGenerator'}
+ fullWidth
+ label={<FormattedMessage id="ui-organizations.summary.code" />}
+ name="code"
+ required
+ validate={validate}
+ />
+ </Col>
+ {(
+ vendorCodeSetting === 'useGenerator' ||
+ vendorCodeSetting === 'useBoth'
+ ) &&
+ <Col xs={12}>
+ <NumberGeneratorModalButton
+ buttonLabel={<FormattedMessage id="ui-organizations.numberGenerator.generateVendorCode" />}
+ callback={(generated) => change('code', generated)}
+ id="vendor-code-generator"
+ generateButtonLabel={<FormattedMessage id="ui-organizations.numberGenerator.generateVendorCode" />}
+ generator="organizations_vendorCode"
+ modalProps={{
+ label: <FormattedMessage id="ui-organizations.numberGenerator.vendorCodeGenerator" />
+ }}
+ />
+ </Col>
+ }
+ </Row>
  );
 };
 

src/Organizations/OrganizationForm/OrganizationSummaryForm/OrganizationSummaryForm.test.js

@@ -11,6 +11,19 @@
 
 jest.mock('../../../common/hooks', () => ({
  useTypes: jest.fn(),
+ useSettings: jest.fn(() => ([
+ {
+ id: 'f2b84177-d85a-4b0c-93dd-279e8f9d1d42',
+ module: 'ORGANIZATIONS',
+ configName: 'number_generator',
+ enabled: true,
+ value: '{"vendorGeneratorSetting":"useBoth"}',
+ },
+ ])),
+}));
+
+jest.mock('@folio/service-interaction', () => ({
+ NumberGeneratorModalButton: () => <div>NumberGeneratorModalButton</div>
 }));
 
 const TestForm = stripesFinalForm({})(

src/Organizations/OrganizationForm/OrganizationSummaryForm/__snapshots__/OrganizationSummaryForm.test.js.snap

@@ -52,42 +52,50 @@ exports[`OrganizationSummaryForm should render correct structure 1`] = `
  class="col-xs-6 col-md-3"
  >
  <div
- class="textField"
+ class="row"
  >
- <label
- class="label"
- for="text-input-1"
- >
- ui-organizations.summary.code
- <span
- aria-hidden="true"
- class="asterisk"
- >
- *
- </span>
- </label>
  <div
- class="formControl inputGroup"
+ class="col-xs-12"
  >
- <input
- aria-invalid="false"
- aria-required="true"
- autocapitalize="off"
- autocomplete="off"
- autocorrect="off"
- error=""
- id="text-input-1"
- name="code"
- required=""
- spellcheck="false"
- type="text"
- value="AMAZ"
- warning=""
- />
+ <div
+ class="textField"
+ >
+ <label
+ class="label"
+ for="text-input-1"
+ >
+ ui-organizations.summary.code
+ <span
+ aria-hidden="true"
+ class="asterisk"
+ >
+ *
+ </span>
+ </label>
+ <div
+ class="formControl inputGroup"
+ >
+ <input
+ aria-invalid="false"
+ aria-required="true"
+ autocapitalize="off"
+ autocomplete="off"
+ autocorrect="off"
+ error=""
+ id="text-input-1"
+ name="code"
+ required=""
+ spellcheck="false"
+ type="text"
+ value="AMAZ"
+ warning=""
+ />
+ </div>
+ <div
+ role="alert"
+ />
+ </div>
  </div>
- <div
- role="alert"
- />
  </div>
  </div>
  <div

src/Settings/NumberGeneratorOptions.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Field } from 'react-final-form';
+
+import { stripesConnect, withStripes } from '@folio/stripes/core';
+import { ConfigManager } from '@folio/stripes/smart-components';
+
+import { Col, RadioButton, Row } from '@folio/stripes/components';
+
+const NumberGeneratorOptions = (props) => {
+ const ConnectedConfigManager = stripesConnect(ConfigManager);
+
+ const defaultValues = {
+ useGenerator: 'useBoth',
+ };
+
+ const beforeSave = (data) => {
+ return JSON.stringify(data);
+ };
+
+ const getInitialValues = (settings) => {
+ let loadedValues = {};
+
+ try {
+ const value = settings.length === 0 ? '' : settings[0].value;
+
+ loadedValues = JSON.parse(value);
+ } catch (e) {
+ // Make sure we return _something_ because ConfigManager no longer has a safety check here
+ return {};
+ }
+
+ return {
+ ...defaultValues,
+ ...loadedValues,
+ };
+ };
+
+ return (
+ <ConnectedConfigManager
+ configName="number_generator"
+ getInitialValues={getInitialValues}
+ label={<FormattedMessage id="ui-organizations.settings.numberGeneratorOptions" />}
+ moduleName="ORGANIZATIONS"
+ onBeforeSave={beforeSave}
+ stripes={props.stripes}
+ formType="final-form"
+ >
+ <Row>
+ <Col xs={12}>
+ <Field
+ component={RadioButton}
+ id="useTextField"
+ name="vendorGeneratorSetting"
+ label={<FormattedMessage id="ui-organizations.settings.numberGeneratorOptions.useTextFieldForVendor" />}
+ type="radio"
+ value="useTextField"
+ />
+ <Field
+ component={RadioButton}
+ id="useBoth"
+ name="vendorGeneratorSetting"
+ label={<FormattedMessage id="ui-organizations.settings.numberGeneratorOptions.useBothForVendor" />}
+ type="radio"
+ value="useBoth"
+ />
+ <Field
+ component={RadioButton}
+ id="useGenerator"
+ name="vendorGeneratorSetting"
+ label={<FormattedMessage id="ui-organizations.settings.numberGeneratorOptions.useGeneratorForVendor" />}
+ type="radio"
+ value="useGenerator"
+ />
+ </Col>
+ </Row>
+ </ConnectedConfigManager>
+ );
+};
+
+NumberGeneratorOptions.propTypes = {
+ stripes: PropTypes.object,
+};
+
+export default withStripes(NumberGeneratorOptions);

src/Settings/SettingsPage.js

@@ -1,11 +1,13 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
 import { Settings } from '@folio/stripes/smart-components';
 
 import { useBankingInformationSettings } from '../common/hooks';
 import { CategorySettings } from './CategorySettings';
 import { TypeSettings } from './TypeSettings';
+import NumberGeneratorOptions from './NumberGeneratorOptions';
 import { BankingAccountTypeSettings } from './BankingAccountTypeSettings';
 import { BankingInformationSettings } from './BankingInformationSettings';
 
@@ -22,6 +24,13 @@ const pages = [
  perm: 'settings.organizations.enabled',
  route: 'type',
  },
+ {
+ component: NumberGeneratorOptions,
+ label: <FormattedMessage id="ui-organizations.settings.numberGeneratorOptions" />,
+ perm: 'ui-organizations.settings.numberGenerator.manage',
+ interface: 'servint',
+ route: 'numberGeneratorOptions',
+ },
  {
  component: BankingInformationSettings,
  label: <FormattedMessage id="ui-organizations.settings.bankingInformation" />,
@@ -52,4 +61,15 @@ const SettingsPage = (props) => {
  );
 };
 
+SettingsPage.propTypes = {
+ stripes: PropTypes.shape({
+ hasInterface: PropTypes.func.isRequired,
+ timezone: PropTypes.string.isRequired,
+ store: PropTypes.shape({
+ dispatch: PropTypes.func.isRequired,
+ getState: PropTypes.func,
+ }),
+ }).isRequired,
+};
+
 export default SettingsPage;

src/common/constants/api.js

@@ -8,4 +8,6 @@ export const PRIVILEGED_CONTACTS_API = 'organizations-storage/privileged-contact
 export const SETTINGS_API = 'organizations-storage/settings';
 export const TYPES_API = 'organizations-storage/organization-types';
 
+export const CONFIG_API = 'configurations/entries';
+
 export const MAX_LIMIT = 2147483647;

src/common/hooks/index.js

@@ -10,3 +10,4 @@ export * from './useLinkedAgreements';
 export * from './useOrganizationBankingInformation';
 export * from './useTranslatedCategories';
 export * from './useTypes';
+export * from './useSettings';

src/common/hooks/useSettings/index.js

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