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": "^3.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": "^3.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.css

@@ -0,0 +1,5 @@
+@import '@folio/stripes-components/lib/variables';
+
+.marginBottomGutter {
+  margin-bottom: var(--gutter);
+}

src/Settings/NumberGeneratorOptions.js

@@ -0,0 +1,95 @@
+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, MessageBanner, RadioButton, Row } from '@folio/stripes/components';
+
+import css from './NumberGeneratorOptions.css';
+
+const ConnectedConfigManager = stripesConnect(ConfigManager);
+
+const NumberGeneratorOptions = (props) => {
+  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 {
+      ...loadedValues,
+    };
+  };
+
+  return (
+    <ConnectedConfigManager
+      configName="number_generator"
+      getInitialValues={getInitialValues}
+      formType="final-form"
+      label={<FormattedMessage id="ui-organizations.settings.numberGeneratorOptions" />}
+      moduleName="ORGANIZATIONS"
+      onBeforeSave={beforeSave}
+      stripes={props.stripes}
+    >
+      <Row>
+        <Col xs={12}>
+          <div className={css.marginBottomGutter}>
+            <MessageBanner>
+              <FormattedMessage id="ui-organizations.settings.numberGeneratorOptions.info" />
+            </MessageBanner>
+          </div>
+        </Col>
+      </Row>
+      <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';