UIIN-3606: Add number generator to additional holdings call numbers

CHANGELOG.md

@@ -105,6 +105,7 @@ UIIN-3437.
 * Condtionally evaluate DOM refs before calling `.focus()`. Fixes UIIN-3603.
 * Add `stripes-core.settings.read` permission to app and settings permissions. Refs UIIN-3544.
 * Add missing permission for number generator. Fixes UIIN-3609.
+* Inventory Holdings: Add number generator button "Generate call number" to additional holdings call numbers. Refs UIIN-3606.
 
 ## [13.0.13](https://github.com/folio-org/ui-inventory/tree/v13.0.13) (2026-03-11)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v13.0.12...v13.0.13)

src/edit/common/CommonAdditionalCallNumbersFields.js

@@ -1,11 +1,12 @@
 import { FieldArray } from 'react-final-form-arrays';
-import { Field } from 'react-final-form';
+import { Field, useForm } from 'react-final-form';
 import {
   FormattedMessage,
   useIntl,
 } from 'react-intl';
 import PropTypes from 'prop-types';
 
+import { NumberGeneratorModalButton } from '@folio/service-interaction';
 import {
   Row,
   Col,
@@ -23,10 +24,13 @@ const CommonAdditionalCallNumbersFields = ({
   canAdd = true,
   canEdit = true,
   canDelete = true,
+  showNumberGenerator = false,
+  isCallNumberDisabled = false,
   item = false,
   name = 'additionalCallNumbers',
 }) => {
   const { formatMessage } = useIntl();
+  const { change } = useForm();
   const callNumberTypeLabel = formatMessage({ id: 'ui-inventory.callNumberType' });
   const callNumberPrefixLabel = formatMessage({ id: 'ui-inventory.callNumberPrefix' });
   const callNumberLabel = formatMessage({ id: 'ui-inventory.callNumber' });
@@ -65,7 +69,7 @@ const CommonAdditionalCallNumbersFields = ({
             <Field
               name={`${fieldName}.typeId`}
               aria-label={callNumberTypeLabel}
-              id={`additem_callnumbertype_${index}`}
+              id={`callnumbertype_${index}`}
               component={Select}
               fullWidth
               dataOptions={[{ label, value: '' }, ...callNumberTypeOptions]}
@@ -78,7 +82,7 @@ const CommonAdditionalCallNumbersFields = ({
         <Field
           name={`${fieldName}.prefix`}
           aria-label={callNumberPrefixLabel}
-          id={`additem_prefix_${index}`}
+          id={`prefix_${index}`}
           component={TextArea}
           rows={1}
           fullWidth
@@ -90,19 +94,31 @@ const CommonAdditionalCallNumbersFields = ({
         <Field
           name={`${fieldName}.callNumber`}
           aria-label={callNumberLabel}
-          id={`additem_callnumber_${index}`}
+          id={`callnumber_${index}`}
           component={TextArea}
+          disabled={!canEdit || isCallNumberDisabled}
           rows={1}
           fullWidth
           formatOnBlur
-          disabled={!canEdit}
         />
+        {showNumberGenerator &&
+          <NumberGeneratorModalButton
+            buttonLabel={<FormattedMessage id="ui-inventory.numberGenerator.generateCallNumber" />}
+            callback={(generated) => change(`${fieldName}.callNumber`, generated)}
+            id={`number_generator_callnumber_${index}`}
+            generateButtonLabel={<FormattedMessage id="ui-inventory.numberGenerator.generateCallNumber" />}
+            generator="inventory_callNumber"
+            modalProps={{
+              label: <FormattedMessage id="ui-inventory.numberGenerator.generateCallNumber" />
+            }}
+          />
+        }
       </Col>
       <Col sm={2}>
         <Field
           name={`${fieldName}.suffix`}
           aria-label={callNumberSuffixLabel}
-          id={`additem_suffix_${index}`}
+          id={`suffix_${index}`}
           component={TextArea}
           rows={1}
           fullWidth
@@ -146,9 +162,11 @@ CommonAdditionalCallNumbersFields.propTypes = {
   canAdd: PropTypes.bool,
   canEdit: PropTypes.bool,
   canDelete: PropTypes.bool,
+  isCallNumberDisabled: PropTypes.bool,
   item: PropTypes.bool,
   onSwap: PropTypes.func.isRequired,
   name: PropTypes.string,
+  showNumberGenerator: PropTypes.bool,
 };
 
 export default CommonAdditionalCallNumbersFields;

src/edit/holdings/HoldingsForm.js

@@ -639,7 +639,13 @@ class HoldingsForm extends React.Component {
                     </Row>
                     <Row>
                       <Col xs={10}>
-                        <AdditionalCallNumbersFields callNumberTypeOptions={callNumberTypeOptions} isFieldBlocked={this.isFieldBlocked} onSwap={this.handleCallNumberSwap} />
+                        <AdditionalCallNumbersFields
+                          callNumberTypeOptions={callNumberTypeOptions}
+                          isFieldBlocked={this.isFieldBlocked}
+                          onSwap={this.handleCallNumberSwap}
+                          showNumberGenerator={showNumberGeneratorForCallNumber}
+                          isCallNumberDisabled={this.isFieldBlocked('callNumber') || isCallNumberHoldingsDisabled}
+                        />
                       </Col>
                     </Row>
                   </Accordion>

src/edit/holdings/HoldingsForm.test.js

@@ -4,7 +4,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from 'react-query';
-import { fireEvent, waitFor, screen } from '@folio/jest-config-stripes/testing-library/react';
+import { fireEvent, waitFor, screen, within } from '@folio/jest-config-stripes/testing-library/react';
 
 import '../../../test/jest/__mock__';
 
@@ -305,7 +305,28 @@ describe('HoldingsForm', () => {
       expect(getAllByLabelText('Call number prefix')).toHaveLength(1);
       expect(getAllByLabelText('Call number suffix')).toHaveLength(1);
     });
+
+    it('should render generate number button for additional call numbers and disable call number field', () => {
+      const { getByRole } = renderHoldingsForm({
+        numberGeneratorData: {
+          accessionNumber: '',
+          barcode: '',
+          callNumber: '',
+          callNumberHoldings: NUMBER_GENERATOR_OPTIONS_ON_NOT_EDITABLE,
+          useSharedNumber: true,
+        }
+      });
+
+      fireEvent.click(getByRole('button', { name: 'Add additional call number' }));
+
+      const heading = getByRole('heading', { name: 'Additional holdings call numbers' });
+      const additionalCallnumberSection = within(heading.parentElement);
+
+      expect(additionalCallnumberSection.getByRole('button', { name: 'Generate call number' })).toBeInTheDocument();
+      expect(additionalCallnumberSection.getByRole('textbox', { name: 'Call number' })).toBeDisabled();
+    });
   });
+
   describe('form validation', () => {
     it('should show error when call number is required but empty', async () => {
       const { getByRole, getAllByText } = renderHoldingsForm();