feat: Add UniqueBatchNoEntryInput component for batch number validation (#262)

Author: Omoshlawi

Diff for: src/stock-operations/add-stock-operation/stock-items-addition-row.component.tsx

@@ -28,6 +28,7 @@ import BatchNoSelector from '../batch-no-selector/batch-no-selector.component';
 
 import styles from './stock-items-addition-row.scss';
 import { useStockItemBatchInformationHook } from '../../stock-items/add-stock-item/batch-information/batch-information.resource';
+import UniqueBatchNoEntryInput from '../batch-no-selector/unique-batch-no-entry-input.component';
 
 interface StockItemsAdditionRowProps {
   canEdit?: boolean;
@@ -182,15 +183,11 @@ const StockItemsAdditionRow: React.FC<StockItemsAdditionRowProps> = ({
                 <div className={styles.cellContent}>
                   {requiresActualBatchInformation &&
                     (canEdit || (canUpdateBatchInformation && row?.permission?.canUpdateBatchInformation)) && (
-                      <TextInput
-                        size="sm"
-                        maxLength={50}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                          setValue(`stockItems.${index}.batchNo`, e.target.value)
-                        }
+                      <UniqueBatchNoEntryInput
+                        onValueChange={(val) => setValue(`stockItems.${index}.batchNo`, val)}
                         defaultValue={row.batchNo}
-                        invalidText=""
-                        invalid={errors?.stockItems?.[index]?.batchNo}
+                        error={errors?.stockItems?.[index]?.batchNo?.message}
+                        stockItemUuid={row.stockItemUuid}
                       />
                     )}
                   {requiresBatchUuid && !requiresActualBatchInformation && canEdit && (

Diff for: src/stock-operations/batch-no-selector/unique-batch-no-entry-input.component.tsx

@@ -0,0 +1,54 @@
+import { TextInput } from '@carbon/react';
+import React, { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { useStockItemBatchNos } from './batch-no-selector.resource';
+import { TextInputSkeleton } from '@carbon/react';
+
+type UniqueBatchNoEntryInputProps = {
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  error?: string;
+  stockItemUuid: string;
+};
+const UniqueBatchNoEntryInput: React.FC<UniqueBatchNoEntryInputProps> = ({
+  defaultValue,
+  onValueChange,
+  error,
+  stockItemUuid,
+}) => {
+  const { isLoading, stockItemBatchNos } = useStockItemBatchNos(stockItemUuid);
+  const [value, setValue] = useState(defaultValue);
+  const [_error, setError] = useState<string>();
+
+  const batchNoAlreadyUsed = useMemo(
+    () => stockItemBatchNos?.findIndex((batchNo) => batchNo.batchNo === value) !== -1,
+    [stockItemBatchNos, value],
+  );
+
+  useEffect(() => {
+    if (defaultValue) setValue(defaultValue);
+  }, [defaultValue]);
+
+  useEffect(() => {
+    if (batchNoAlreadyUsed) {
+      setError('Batch number already used');
+    } else {
+      setError(undefined);
+      onValueChange?.(value);
+    }
+  }, [value, onValueChange, batchNoAlreadyUsed, setError]);
+
+  if (isLoading) return <TextInputSkeleton />;
+
+  return (
+    <TextInput
+      size="sm"
+      maxLength={50}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}
+      value={value}
+      invalidText={_error ?? error}
+      invalid={_error ?? error}
+    />
+  );
+};
+
+export default UniqueBatchNoEntryInput;