@openmrs/esm-stock-management-app 3.1.1-pre.1179 → 3.1.1-pre.1186

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-items-table.tsx

@@ -1,3 +1,5 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   DataTable,
   Pagination,
@@ -11,8 +13,6 @@ import {
   Tile,
 } from '@carbon/react';
 import { formatDate, parseDate, usePagination } from '@openmrs/esm-framework';
-import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { type StockOperationItemDTO } from '../../../core/api/types/stockOperation/StockOperationItemDTO';
 import styles from './stock-items-table.scss';
 
@@ -23,7 +23,7 @@ const StockItemsTable: React.FC<Props> = ({ items }) => {
   const { t } = useTranslation();
   const [pageSize, setPageSize] = useState(10);
   const pageSizesOptions = useMemo(() => [5, 10, 20, 50, 100], []);
-  const [searchText, setSearchText] = useState();
+  const [searchText, setSearchText] = useState<string>('');
 
   const handleSearch = (item: StockOperationItemDTO) => {
     if (!searchText) return true;
@@ -39,7 +39,7 @@ const StockItemsTable: React.FC<Props> = ({ items }) => {
         key: 'commonName',
       },
       {
-        header: t('batchNo', 'Batch No'),
+        header: t('batchNo', 'Batch number'),
         key: 'batchNo',
       },
       {
@@ -47,11 +47,11 @@ const StockItemsTable: React.FC<Props> = ({ items }) => {
         key: 'expiration',
       },
       {
-        header: t('qty', 'Qty'),
+        header: t('quantity', 'Quantity'),
         key: 'quantity',
       },
       {
-        header: t('uom', 'UoM'),
+        header: t('uom', 'Unit of Measurement'),
         key: 'stockItemPackagingUOMName',
       },
     ],
@@ -71,8 +71,12 @@ const StockItemsTable: React.FC<Props> = ({ items }) => {
   return (
     <Tile className={styles.container}>
       <span className={styles.title}>{t('stockItems', 'Stock items')}</span>
-      <Search value={searchText} onChange={({ target: { value } }) => setSearchText(value)} />
-      <DataTable useZebraStyles={true} rows={tableRows} headers={headers}>
+      <Search
+        labelText={t('search', 'Search')}
+        value={searchText}
+        onChange={({ target: { value } }) => setSearchText(value as string)}
+      />
+      <DataTable useZebraStyles rows={tableRows} headers={headers}>
         {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
           <Table {...getTableProps()}>
             <TableHead>

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.component.tsx

@@ -86,8 +86,8 @@ const StockOperationExpandedRow: React.FC<StockOperationExpandedRowProps> = (pro
         <Row className={styles.statusContainerRow}>
           {isLoading && (
             <InlineLoading
-              description={t('loading StockoperationLinks', 'Loading stock operation links') + '...'}
-              iconDescription={t('loading StockoperationLinks', 'Loading stock operation links')}
+              description={t('loadingStockOperationLinks', 'Loading stock operation links...')}
+              iconDescription={t('loadingStockOperationLinksIcon', 'Loading stock operation links')}
             />
           )}
           {currentOperationType && (
@@ -100,8 +100,8 @@ const StockOperationExpandedRow: React.FC<StockOperationExpandedRowProps> = (pro
         <Row className={styles.statusContainerRow}>
           {isLoading && (
             <InlineLoading
-              description={t('loadingOperationActions', 'Loading stock operation actions') + '...'}
-              iconDescription={t('loadingOperationActions', 'Loading stock operation actions')}
+              description={t('loadingOperationActions', 'Loading stock operation actions...')}
+              iconDescription={t('loadingOperationActionsIcon', 'Loading stock operation actions')}
             />
           )}
           {currentOperationType && (

package/src/stock-operations/edit-stock-operation/edit-stock-operation-action-menu.component.tsx

@@ -1,12 +1,12 @@
-import { IconButton, InlineLoading } from '@carbon/react';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { Button, InlineLoading } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
 import { showSnackbar } from '@openmrs/esm-framework';
-import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { type StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
 import { launchStockoperationAddOrEditWorkSpace } from '../stock-operation.utils';
-import useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
 import { useStockOperationAndItems } from '../stock-operations.resource';
+import useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
 import styles from './edit-stock-operation-button.scss';
 
 interface EditStockOperationActionMenuProps {
@@ -51,7 +51,7 @@ const EditStockOperationActionMenu: React.FC<EditStockOperationActionMenuProps>
     if (operationTypesError || stockOperationError) {
       showSnackbar({
         kind: 'error',
-        title: t('stockOperationError', 'Error loading stock operation'),
+        title: t('stockOperationLoadError', 'Error loading stock operation'),
         subtitle: operationTypesError?.message || stockOperationError?.message || '',
       });
     }
@@ -66,16 +66,15 @@ const EditStockOperationActionMenu: React.FC<EditStockOperationActionMenuProps>
   }
 
   return (
-    <IconButton
+    <Button
       className={styles.editStockButton}
       kind="ghost"
       size="sm"
       onClick={handleLaunchWorkspace}
-      label={t('editStockOperation', 'Edit Stock Operation')}
       renderIcon={showIcon ? () => <Edit size={16} /> : undefined}
     >
       {showprops && <span className={styles.operationNumberText}>{fetchedStockOperation?.operationNumber}</span>}
-    </IconButton>
+    </Button>
   );
 };
 

package/src/stock-operations/stock-operation-operations-filter/stock-operation-operations-filter.component.tsx

@@ -1,9 +1,11 @@
-import styles from './stock-operation-operations-filter.scss';
-import { Dropdown, DropdownSkeleton } from '@carbon/react';
 import React from 'react';
+import { Dropdown, DropdownSkeleton } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resource';
+import styles from './stock-operation-operations-filter.scss';
 
 const StockOperationOperationsFilter: React.FC = () => {
+  const { t } = useTranslation();
   // get stock sources
   const { types, isLoading, error } = useStockOperationTypes();
   if (isLoading || error) {
@@ -15,9 +17,11 @@ const StockOperationOperationsFilter: React.FC = () => {
         <Dropdown
           id="stockOperationOperationsFiter"
           items={types.results}
-          itemToString={(item) => (item ? item.name : 'Not Set')}
+          itemToString={(item) => (item ? item.name : t('notSet', 'Not Set'))}
           type="inline"
           size="sm"
+          label={t('filterByOperationType', 'Filter by operation type')}
+          titleText={t('operationType', 'Operation Type')}
         />
       </div>
     </>

package/src/stock-operations/stock-operation-sources-filter/stock-operation-sources-filter.component.tsx

@@ -1,11 +1,13 @@
-import styles from './stock-operation-sources-filter.scss';
-import { Dropdown, DropdownSkeleton } from '@carbon/react';
 import React from 'react';
-import { useConcept } from '../../stock-lookups/stock-lookups.resource';
+import { Dropdown, DropdownSkeleton } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import { type ConfigObject } from '../../config-schema';
+import { useConcept } from '../../stock-lookups/stock-lookups.resource';
 import { useConfig } from '@openmrs/esm-framework';
+import styles from './stock-operation-sources-filter.scss';
 
 const StockOperationSourcesFilter: React.FC = () => {
+  const { t } = useTranslation();
   const { stockSourceTypeUUID } = useConfig<ConfigObject>();
 
   // get stock sources
@@ -19,9 +21,11 @@ const StockOperationSourcesFilter: React.FC = () => {
         <Dropdown
           id="stockOperationSourcesFiter"
           items={[...items.answers]}
-          itemToString={(item) => (item ? item.display : 'Not Set')}
+          itemToString={(item) => (item ? item.display : t('notSet', 'Not Set'))}
           type="inline"
           size="sm"
+          label={t('filterBySource', 'Filter by source')}
+          titleText={t('source', 'Source')}
         />
       </div>
     </>

package/src/stock-operations/stock-operation-statuses-filter/stock-operation-statuses-filter.component.tsx

@@ -1,23 +1,25 @@
-import styles from './stock-operation-statuses-filter.scss';
-import { Dropdown } from '@carbon/react';
 import React from 'react';
+import { Dropdown } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './stock-operation-statuses-filter.scss';
+
 const StockOperationStatusesFilter: React.FC = () => {
+  const { t } = useTranslation();
   // get stock sources
-
   const items = ['SUBMITTED', 'NEW', 'RETURNED', 'CANCELLED', 'DISPATCHED', 'COMPLETED', 'REJECTED'];
 
   return (
-    <>
-      <div className={styles.filterContainer}>
-        <Dropdown
-          id="stockOperationStatusesFiter"
-          items={items}
-          itemToString={(item) => (item ? item : 'Not Set')}
-          type="inline"
-          size="sm"
-        />
-      </div>
-    </>
+    <div className={styles.filterContainer}>
+      <Dropdown
+        id="stockOperationStatusesFiter"
+        items={items}
+        itemToString={(item) => (item ? item : t('notSet', 'Not Set'))}
+        type="inline"
+        size="sm"
+        label={t('filterByStatus', 'Filter by status')}
+        titleText={t('status', 'Status')}
+      />
+    </div>
   );
 };
 

package/src/stock-operations/stock-operation-types-selector/stock-operation-types-selector.component.tsx

@@ -1,8 +1,8 @@
+import React, { useCallback, useEffect } from 'react';
 import { ButtonSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { OverflowMenuVertical } from '@carbon/react/icons';
-import { showSnackbar } from '@openmrs/esm-framework';
-import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { showSnackbar } from '@openmrs/esm-framework';
 import { OperationType, type StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
 import { launchStockoperationAddOrEditWorkSpace } from '../stock-operation.utils';
 import useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
@@ -24,7 +24,7 @@ const StockOperationTypesSelector = () => {
     if (error) {
       showSnackbar({
         kind: 'error',
-        title: t('stockOperationError', 'Error loading stock operation types'),
+        title: t('stockOperationTypesError', 'Error loading stock operation types'),
         subtitle: error?.message,
       });
     }
@@ -42,7 +42,7 @@ const StockOperationTypesSelector = () => {
           <OverflowMenuVertical size={16} />
         </>
       )}
-      menuOffset={{ right: '-100px' }}
+      menuOffset={{ top: 0, left: -100 }}
       style={{
         backgroundColor: '#007d79',
         backgroundImage: 'none',

package/src/stock-operations/stock-operations-filters.component.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { DropdownSkeleton, MultiSelect } from '@carbon/react';
 import { getStockOperationTypes, useConcept } from '../stock-lookups/stock-lookups.resource';
 import { StockFilters } from '../constants';
@@ -12,6 +13,7 @@ interface StockOperationFiltersProps {
 }
 
 const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptUuid, onFilterChange, filterName }) => {
+  const { t } = useTranslation();
   const { items, isLoading } = useConcept(conceptUuid);
   const [isDataLoading, setIsDataLoading] = useState(false);
   const [dataItems, setDataItems] = useState([]);
@@ -65,7 +67,7 @@ const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptU
       label={filterName}
       labelInline
       items={dataItems}
-      itemToString={(item) => (item ? item.display : 'Not Set')}
+      itemToString={(item) => (item ? item.display : t('notSet', 'Not Set'))}
       onChange={({ selectedItems }) => {
         if (selectedItems) {
           onFilterChange(
@@ -74,7 +76,7 @@ const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptU
           );
         }
       }}
-      placeholder={`Filter by ${filterName}`}
+      placeholder={t('filterBy', 'Filter by {{filterName}}', { filterName })}
     />
   );
 };

package/src/stock-operations/stock-operations-forms/input-components/batch-no-selector.component.tsx

@@ -107,10 +107,10 @@ const BatchNoSelector: React.FC<BatchNoSelectorProps> = ({ stockItemUuid, error,
       itemToString={itemToString}
       name="stockBatchUuid"
       onChange={handleChange}
-      placeholder={`${t('filter', 'Filter')}...`}
+      placeholder={t('filterPlaceholder', 'Filter...')}
       selectedItem={initialSelectedItem}
       style={{ flexGrow: 1 }}
-      titleText={t('batchNo', 'Batch no.')}
+      titleText={t('batchNo', 'Batch number')}
     />
   );
 };

package/src/stock-operations/stock-operations-forms/input-components/batch-no-selector.test.tsx

@@ -106,7 +106,7 @@ describe('BatchNoSelector', () => {
     render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
 
     expect(screen.getByRole('combobox')).toBeInTheDocument();
-    expect(screen.getByText(/batch no./i)).toBeInTheDocument();
+    expect(screen.getByText(/batch number/i)).toBeInTheDocument();
   });
 
   it('should handle batch selection', async () => {

package/src/stock-operations/stock-operations-forms/input-components/qty-uim-selector.test.tsx

@@ -131,7 +131,7 @@ describe('QtyUOMSelector', () => {
 
     render(<QtyUomSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
 
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
   });
 
   it('should render Inline notification error when error ocuured while fetching item', () => {

package/src/stock-operations/stock-operations-forms/input-components/quantity-uom-selector.component.tsx

@@ -24,7 +24,7 @@ const QtyUomSelector: React.FC<QtyUomSelectorProps> = ({ stockItemUuid, error, i
     }
   }, [initialSelectedItem, onValueChange]);
 
-  if (isLoading) return <SkeletonText role="progressbar" />;
+  if (isLoading) return <SkeletonText />;
 
   if (stockItemError)
     return (
@@ -49,8 +49,8 @@ const QtyUomSelector: React.FC<QtyUomSelectorProps> = ({ stockItemUuid, error, i
       onChange={(data: { selectedItem?: StockItemPackagingUOMDTO }) => {
         onValueChange?.(data.selectedItem?.uuid);
       }}
-      placeholder={t('filter', 'Filter') + '...'}
-      titleText={t('quantityUom', 'Qty UoM')}
+      placeholder={t('filterPlaceholder', 'Filter...')}
+      titleText={t('quantityUom', 'Quantity unit of measurement')}
     />
   );
 };

package/src/stock-operations/stock-operations-forms/input-components/stock-item-search.component.tsx

@@ -1,11 +1,11 @@
-import { ClickableTile, Search } from '@carbon/react';
-import { useConfig, useDebounce } from '@openmrs/esm-framework';
 import React, { useCallback, useEffect, useState } from 'react';
+import { ClickableTile, Search } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { useConfig, useDebounce } from '@openmrs/esm-framework';
 import { type StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
 import { useFilterableStockItems } from '../hooks/useFilterableStockItems';
-import styles from './input-components-styles.scss';
 import { type ConfigObject } from '../../../config-schema';
+import styles from './input-components-styles.scss';
 
 type StockItemSearchProps = {
   onSelectedItem?: (stockItem: StockItemDTO) => void;
@@ -55,7 +55,6 @@ const StockItemSearch: React.FC<StockItemSearchProps> = ({ onSelectedItem }) =>
           closeButtonLabelText={t('clearSearch', 'Clear search input')}
           value={searchTerm}
           id="search-stock-operation-item"
-          name="search-stock-operation-item"
           onChange={(e) => setSearchTerm(e.target.value)}
         />
       </div>

package/src/stock-operations/stock-operations-forms/input-components/stock-operation-reason-selector.component.tsx

@@ -1,8 +1,8 @@
-import { ComboBox, InlineNotification, SelectSkeleton } from '@carbon/react';
-import { useConfig } from '@openmrs/esm-framework';
 import React from 'react';
+import { ComboBox, InlineNotification, SelectSkeleton } from '@carbon/react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../../../config-schema';
 import { type Concept } from '../../../core/api/types/concept/Concept';
 import { useConcept } from '../../../stock-lookups/stock-lookups.resource';
@@ -56,7 +56,7 @@ const StockOperationReasonSelector: React.FC<StockOperationReasonSelectorProps>
             field.onChange(data?.selectedItem?.uuid);
           }}
           ref={field.ref}
-          invalid={error?.message}
+          invalid={!!error?.message}
           invalidText={error?.message}
         />
       )}

package/src/stock-operations/stock-operations-forms/input-components/users-selector.component.tsx

@@ -1,5 +1,5 @@
-import { ComboBox, InlineNotification, SelectSkeleton, Column, TextInput } from '@carbon/react';
 import React, { useEffect } from 'react';
+import { ComboBox, InlineNotification, SelectSkeleton, Column, TextInput } from '@carbon/react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { type User } from '../../../core/api/types/identity/User';
@@ -68,10 +68,10 @@ const UsersSelector = () => {
                   ? otherUser
                   : ''
               }
-              itemToString={(item) => item?.person?.display || ''}
+              itemToString={(item) => (typeof item === 'string' ? item : item?.person?.display || '')}
               onInputChange={debouncedSearch}
-              placeholder={t('filter', 'Filter ...')}
-              invalid={error?.message}
+              placeholder={t('filter', 'Filter...')}
+              invalid={!!error?.message}
               invalidText={error?.message}
               ref={field.ref}
             />
@@ -93,8 +93,8 @@ const UsersSelector = () => {
                 name="responsiblePersonOther"
                 size="lg"
                 labelText={t('responsiblePerson', 'Responsible Person')}
-                placeholder={t('pleaseSpecify', 'Please Specify')}
-                invalid={error?.message}
+                placeholder={t('pleaseSpecify', 'Please specify')}
+                invalid={!!error?.message}
                 invalidText={error?.message}
               />
             )}

package/src/stock-operations/stock-operations-forms/step2.test.tsx

@@ -239,11 +239,7 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
     expect(
       screen.getByRole('searchbox', {
         name(accessibleName, element) {
-          return (
-            element.getAttribute('id') === 'search-stock-operation-item' &&
-            element.getAttribute('placeholder') === 'Find your items' &&
-            element.getAttribute('name') === 'search-stock-operation-item'
-          );
+          return element.getAttribute('id') === 'search-stock-operation-item';
         },
       }),
     ).toBeInTheDocument();

package/src/stock-operations/stock-operations-forms/steps/base-operation-details-form-step.tsx

@@ -1,3 +1,4 @@
+import React, { type ChangeEvent, type FC, useEffect, useMemo } from 'react';
 import {
   Button,
   Column,
@@ -10,10 +11,9 @@ import {
   TextInput,
 } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { ErrorState } from '@openmrs/esm-framework';
-import React, { type ChangeEvent, type FC, useEffect, useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { ErrorState } from '@openmrs/esm-framework';
 import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, MAIN_STORE_LOCATION_TAG } from '../../../constants';
 import { type Party } from '../../../core/api/types/Party';
 import { type StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
@@ -42,7 +42,7 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
     destinationParties,
     sourceParties,
     isLoading: isPartiesLoading,
-    error: patiesError,
+    error: partiesError,
     sourceTags,
     destinationTags,
   } = useParties(stockOperationType);
@@ -61,7 +61,9 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
       'reasonUuid',
       'responsiblePersonOther',
     ]);
-    if (valid) onNext();
+    if (valid) {
+      onNext();
+    }
   };
 
   // initialize location fields
@@ -96,9 +98,9 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
       />
     );
 
-  if (patiesError)
+  if (partiesError)
     return (
-      <ErrorState error={patiesError} headerTitle={t('partieserror', 'Error launching base operation details form')} />
+      <ErrorState error={partiesError} headerTitle={t('partiesError', 'Error launching base operation details form')} />
     );
 
   return (
@@ -113,7 +115,6 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
           render={({ field, fieldState: { error } }) => (
             <DatePicker
               readOnly={field.disabled}
-              id={`operationDate`}
               datePickerType="single"
               locale="en"
               className={styles.datePickerInput}
@@ -125,12 +126,10 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
               }}
             >
               <DatePickerInput
-                autoComplete="off"
                 id={`operationDate-input`}
-                name="operationDate-input"
                 placeholder={DATE_PICKER_FORMAT}
                 labelText={t('operationDate', 'Operation Date')}
-                invalid={error?.message}
+                invalid={!!error?.message}
                 invalidText={error?.message}
                 size="lg"
               />
@@ -176,7 +175,7 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
                   : t('chooseALocation', 'Choose a location')
               }
               ref={field.ref}
-              invalid={error?.message}
+              invalid={!!error?.message}
               invalidText={error?.message}
             />
           )}
@@ -192,7 +191,7 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
                 readOnly={field.disabled}
                 titleText={
                   isStockIssueOperation
-                    ? t('destination', 'destination')
+                    ? t('destination', 'Destination')
                     : stockOperationType?.hasSource || stockOperation?.atLocationUuid
                     ? t('to', 'To')
                     : t('location', 'Location')
@@ -213,7 +212,7 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
                     : t('location', 'Location')
                 }
                 ref={field.ref}
-                invalid={error?.message}
+                invalid={!!error?.message}
                 invalidText={error?.message}
               />
             )}
@@ -239,10 +238,10 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
               onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
                 field.onChange(e.target.value);
               }}
-              placeholder={t('enterRemarks', 'Enter remarks') + ' ...'}
+              placeholder={t('enterRemarksPlaceholder', 'Enter remarks...')}
               id={'remarks'}
               labelText={t('remarks', 'Remarks')}
-              invalid={error?.message}
+              invalid={!!error?.message}
               invalidText={error?.message}
             />
           )}
@@ -251,7 +250,7 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
       <div className={styles.btnSet}>
         {typeof onNext === 'function' && (
           <Button kind="primary" onClick={handleNext} role="button" renderIcon={ArrowRight}>
-            {t('next', 'Next')}
+            {t('nextButton', 'Next')}
           </Button>
         )}
       </div>

package/src/stock-operations/stock-operations-forms/steps/quantity-uom-cell.component.tsx

@@ -20,7 +20,7 @@ const QuantityUomCell: React.FC<QuantityUomCellProps> = ({ stockItemPackagingUOM
     if (error) {
       showSnackbar({
         kind: 'error',
-        title: t('packagingUomError', 'Error loading stockItemPackagingUOM name'),
+        title: t('packagingUomError', 'Error loading Stock item'),
         subtitle: error?.message,
       });
     }

package/src/stock-operations/stock-operations-forms/steps/received-items.component.tsx

@@ -37,7 +37,7 @@ const ReceivedItems: React.FC<ReceivedItemsProps> = ({ stockOperation, onPreviou
     { key: 'item', header: t('item', 'Item') },
     { key: 'requested', header: t('requested', 'Requested') },
     { key: 'batch', header: t('batch', 'Batch No') },
-    { key: 'expiry', header: t('expiry', 'Expiry Date') },
+    { key: 'expiry', header: t('expiry', 'Expiry') },
     { key: 'qtySent', header: t('quantitySent', 'Quantity Sent') },
     { key: 'qtyReceived', header: t('quantityReceived', 'Quantity Received') },
     {
@@ -101,7 +101,7 @@ const ReceivedItems: React.FC<ReceivedItemsProps> = ({ stockOperation, onPreviou
             <Button
               data-testid="previous-btn"
               hasIconOnly
-              iconDescription={t('previous', 'Previous')}
+              iconDescription={t('previousButton', 'Previous')}
               kind="secondary"
               onClick={onPrevious}
               renderIcon={ArrowLeft}