UIOR-1192 Add validation for the 'claimingInterval' field

CHANGELOG.md

@@ -11,6 +11,7 @@
 * Optimize linked instances query to improve performance. Refs UIOR-1181.
 * Add permission to fetch invoices-related fiscal years into the orders "view" permission set. UIOR-1185.
 * Do not show special fields in "Version history" for PO and POL. Refs UIOR-1117.
+* Add validation for the `claimingInterval` field. Refs UIOR-1192.
 
 ## [5.0.1](https://github.com/folio-org/ui-orders/tree/v5.0.1) (2023-11-08)
 [Full Changelog](https://github.com/folio-org/ui-orders/compare/v5.0.0...v5.0.1)

src/common/POLFields/DetailsFields/FieldClaimingActive.js

@@ -14,7 +14,7 @@ export const FieldClaimingActive = ({ onChange }) => {
       name="claimingActive"
       type="checkbox"
       vertical
-      validateFields={[]}
+      validateFields={['claimingInterval']}
     />
   );
 };

src/common/POLFields/DetailsFields/FieldClaimingInterval.js

@@ -3,21 +3,38 @@ import { Field } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
 
 import { TextField } from '@folio/stripes/components';
+import {
+  validateRequired,
+  validateRequiredPositiveNumber,
+} from '@folio/stripes-acq-components';
 
-export const FieldClaimingInterval = ({ disabled }) => {
+const validate = (value) => {
+  return validateRequired(value) || validateRequiredPositiveNumber(value);
+};
+
+export const FieldClaimingInterval = ({ disabled, required }) => {
   return (
     <Field
       label={<FormattedMessage id="ui-orders.poLine.claimingInterval" />}
       name="claimingInterval"
       component={TextField}
       type="number"
+      min={1}
       fullWidth
       disabled={disabled}
+      required={required}
+      validate={required ? validate : undefined}
       validateFields={[]}
     />
   );
 };
 
+FieldClaimingInterval.defaultProps = {
+  disabled: false,
+  required: false,
+};
+
 FieldClaimingInterval.propTypes = {
   disabled: PropTypes.bool,
+  required: PropTypes.bool,
 };

src/components/POLine/POLineDetails/POLineDetailsForm.js

@@ -230,7 +230,10 @@ function POLineDetailsForm({
             xs={6}
             md={3}
           >
-            <FieldClaimingInterval disabled={!isClaimingActive} />
+            <FieldClaimingInterval
+              disabled={!isClaimingActive}
+              required={isClaimingActive}
+            />
           </Col>
         </IfFieldVisible>
       </Row>