@openmrs/esm-stock-management-app 1.0.1-pre.788 → 1.0.1-pre.790

package/src/stock-operations/stock-operation.utils.tsx

@@ -1,32 +1,27 @@
-import { showModal } from '@openmrs/esm-framework';
-import React from 'react';
+import { launchWorkspace, showModal } from '@openmrs/esm-framework';
 import { TFunction } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { StockOperationDTO } from '../core/api/types/stockOperation/StockOperationDTO';
 import { StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
-import { launchOverlay } from '../core/components/overlay/hook';
-import StockOperationForm from './stock-operations-forms/stock-operation-form.component';
 
-export const launchStockoperationAddOrEditDialog = (
+export const launchStockoperationAddOrEditWorkSpace = (
   t: TFunction,
   operationType: StockOperationType,
   stockOperation?: StockOperationDTO,
   stockRequisitionUuid?: string, // Only suplied on stock issue (when overlay is launched for stock issue)
 ) => {
-  launchOverlay(
-    stockOperation
+  launchWorkspace('stock-operation-form-workspace', {
+    workspaceTitle: stockOperation
       ? t('editOperationTitle', 'Edit {{operationType}}', {
           operationType: stockOperation?.operationTypeName,
         })
       : t('newOperationTitle', 'New: {{operationName}}', {
           operationName: operationType?.name,
         }),
-    <StockOperationForm
-      stockOperationType={operationType}
-      stockOperation={stockOperation}
-      stockRequisitionUuid={stockRequisitionUuid}
-    />,
-  );
+    stockOperationType: operationType,
+    stockOperation: stockOperation,
+    stockRequisitionUuid: stockRequisitionUuid,
+  });
 };
 
 export const useUrlQueryParams = () => {

package/src/stock-operations/stock-operations-dialog/stock-operations-issue-stock-button.component.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
 import { OperationType } from '../../core/api/types/stockOperation/StockOperationType';
 import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resource';
-import { launchStockoperationAddOrEditDialog } from '../stock-operation.utils';
+import { launchStockoperationAddOrEditWorkSpace } from '../stock-operation.utils';
 import { showSnackbar } from '@openmrs/esm-framework';
 
 interface StockOperationIssueStockButtonProps {
@@ -22,7 +22,7 @@ const StockOperationIssueStockButton: React.FC<StockOperationIssueStockButtonPro
   );
 
   const handleButtonClick = () => {
-    launchStockoperationAddOrEditDialog(t, stockIssueOperationType, undefined, operation.uuid);
+    launchStockoperationAddOrEditWorkSpace(t, stockIssueOperationType, undefined, operation.uuid);
   };
 
   useEffect(() => {

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

@@ -60,6 +60,11 @@ jest.mock('../stock-operations.resource', () => ({
     isLoading: false,
     error: null,
   }),
+  useStockOperationAndItems: jest.fn().mockReturnValue({
+    items: undefined,
+    isLoading: false,
+    error: null,
+  }),
 }));
 
 jest.mock('./hooks/useParties', () => jest.fn());
@@ -81,7 +86,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
@@ -94,7 +107,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.getByText('error')).toBeInTheDocument();
   });
 
@@ -107,7 +128,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /previous/i })).not.toBeInTheDocument();
   });
@@ -120,7 +149,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.getByText(`${receiptOperationTypeMock.name} details`)).toBeInTheDocument();
   });
 
@@ -133,7 +170,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     const sourceInput = screen.getByRole('combobox', {
       name: (_, element) =>
         element.getAttribute('placeholder') === 'chooseASource' && element.getAttribute('name') === 'sourceUuid',
@@ -150,7 +195,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.getByLabelText('to')).toBeInTheDocument();
   });
 
@@ -163,7 +216,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(
       screen.getByRole('combobox', {
         name: (_, element) =>
@@ -182,7 +243,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={disposalOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={disposalOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(
       screen.getByRole('combobox', {
         name: (_, element) =>
@@ -201,7 +270,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
   });
   it('should render reason input field for adjustment operation', async () => {
@@ -213,7 +290,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={adjustmentOpeationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={adjustmentOpeationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.getByLabelText(/.*reason.*/i)).toBeInTheDocument();
   });
   it('should not render reason input field for opening stock operation', async () => {
@@ -225,7 +310,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={openingStockOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={openingStockOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
   });
   it('should not render reason input field for requisition operation', async () => {
@@ -237,7 +330,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={requisitionOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={requisitionOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
   });
   it('should not render reason input field for return operation', async () => {
@@ -249,7 +350,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={returnOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={returnOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
   });
   it('should not render reason input field for issue operation', async () => {
@@ -261,7 +370,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={stockIssueOperationtypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={stockIssueOperationtypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
   });
   it('should not render reason input field for tranfer out operation', async () => {
@@ -273,7 +390,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={tranferOutOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={tranferOutOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
   });
   it('should render reason input field for disposal operation', async () => {
@@ -285,7 +410,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={disposalOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={disposalOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.getByLabelText(/.*reason.*/i)).toBeInTheDocument();
   });
   it('should render reason input field for stock take operation', async () => {
@@ -297,7 +430,15 @@ describe('Stock Operation step 1 (baseoperation details)', () => {
       sourceTags: [],
       destinationTags: [],
     });
-    render(<StockOperationForm stockOperationType={stockTakeOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={stockTakeOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.getByLabelText(/.*reason.*/i)).toBeInTheDocument();
   });
 });

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

@@ -62,7 +62,11 @@ jest.mock('../../core/components/overlay/hook', () => ({
 }));
 
 jest.mock('../../stock-items/stock-items.resource', () => ({
-  useStockItem: jest.fn(),
+  useStockItem: jest.fn().mockReturnValue({
+    isLoading: false,
+    item: {},
+    error: null,
+  }),
   useStockItems: jest.fn().mockReturnValue({
     isLoading: false,
     error: null,
@@ -146,16 +150,32 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
   });
 
   it('should have both previous and next btns', async () => {
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     // MOVE TO STEP 2
     await userEvent.click(screen.getByRole('button', { name: /Next/i }));
 
     expect(screen.getByRole('button', { name: /Next/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
+    expect(screen.getByTestId('previous-btn')).toBeInTheDocument();
   });
 
   it('should render stock operation items table with item search component', async () => {
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     const nextButton = screen.getByRole('button', { name: /Next/i });
     expect(nextButton).toBeInTheDocument();
     await userEvent.click(nextButton);
@@ -184,7 +204,15 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       isLoading: false,
       setSearchString: mocksetSearchString,
     });
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     // ----- CLICK NEXT TO MOVE TO STEP 2 ---------
     await userEvent.click(screen.getByRole('button', { name: /Next/i }));
     // -------------------------------
@@ -208,7 +236,15 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       isLoading: false,
       setSearchString: jest.fn(),
     });
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     // ----- CLICK NEXT TO MOVE TO STEP 2 ---------
     await userEvent.click(screen.getByRole('button', { name: /Next/i }));
     // -------------------------------
@@ -218,7 +254,8 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
     await userEvent.click(searchInput);
     await userEvent.type(searchInput, 'stock');
     await userEvent.click(screen.getByText('mock-common-name'));
-    expect(launchWorkspace).toHaveBeenCalled();
+    // Look for common name at the top of workspace
+    expect(screen.getByText(/noDrugNameAvailable|noCommonNameAvailable|mock-common-name/i)).toBeInTheDocument();
   });
 
   it('should render stock operation items in data table', async () => {
@@ -244,7 +281,15 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       setValue: jest.fn(),
       handleSubmit: jest.fn(),
     });
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     // ----- CLICK NEXT TO MOVE TO STEP 2 ---------
     await userEvent.click(screen.getByRole('button', { name: /Next/i }));
     // -------------------------------

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

@@ -60,6 +60,11 @@ jest.mock('../stock-operations.resource', () => ({
     isLoading: false,
     error: null,
   }),
+  useStockOperationAndItems: jest.fn().mockReturnValue({
+    items: undefined,
+    isLoading: false,
+    error: null,
+  }),
 }));
 
 jest.mock('../../core/components/overlay/hook', () => ({
@@ -145,18 +150,34 @@ describe('Stock Operation form step 3 (stock submision)', () => {
   });
 
   it('should have previous btn and not next btn', async () => {
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     // MOVE TO STEP 2
     await userEvent.click(screen.getByRole('button', { name: /Next/i }));
     // MOVE TO STEP3
     await userEvent.click(screen.getByRole('button', { name: /Next/i }));
 
     expect(screen.queryByRole('button', { name: /Next/i })).not.toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
+    expect(screen.getByTestId('previous-btn')).toBeInTheDocument();
   });
 
   it('should render require approval radio button and save button', async () => {
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     // MOVE TO STEP 2
     await userEvent.click(screen.getByRole('button', { name: /Next/i }));
     // MOVE TO STEP3
@@ -167,7 +188,15 @@ describe('Stock Operation form step 3 (stock submision)', () => {
     expect(screen.getAllByRole('radio', { name: /yes|no/i })).toHaveLength(2);
   });
   it('should render submitForReview button when require aprroval radion button is checked yes', async () => {
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     // MOVE TO STEP 2
     await userEvent.click(screen.getByRole('button', { name: /Next/i }));
     // MOVE TO STEP3
@@ -182,7 +211,15 @@ describe('Stock Operation form step 3 (stock submision)', () => {
     expect(screen.getByRole('button', { name: /submitForReview/i })).toBeInTheDocument();
   });
   it('should render complete button when require aprroval radion button is checked no', async () => {
-    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={receiptOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     // MOVE TO STEP 2
     await userEvent.click(screen.getByRole('button', { name: /Next/i }));
     // MOVE TO STEP3
@@ -192,10 +229,18 @@ describe('Stock Operation form step 3 (stock submision)', () => {
     expect(noRadioButton).toBeInTheDocument();
     await userEvent.click(noRadioButton);
     // On require aprooval should now show complete btn
-    expect(screen.getByRole('button', { name: /complete/i })).toBeInTheDocument();
+    expect(screen.getByTestId('complete-button')).toBeInTheDocument();
   });
   it('should render dispatch btn for stock return operation and dont require aproval', async () => {
-    render(<StockOperationForm stockOperationType={returnOperationTypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={returnOperationTypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     // MOVE TO STEP 2
     await userEvent.click(screen.getByRole('button', { name: /Next/i }));
     // MOVE TO STEP3
@@ -205,10 +250,18 @@ describe('Stock Operation form step 3 (stock submision)', () => {
     expect(noRadioButton).toBeInTheDocument();
     await userEvent.click(noRadioButton);
     // On require aprooval should now show complete btn
-    expect(screen.getByRole('button', { name: /dispatch/i })).toBeInTheDocument();
+    expect(screen.getByTestId('dipatch-button')).toBeInTheDocument();
   });
   it('should render dispatch btn for stock issue operation and dont require aproval', async () => {
-    render(<StockOperationForm stockOperationType={stockIssueOperationtypeMock as any} />);
+    render(
+      <StockOperationForm
+        stockOperationType={stockIssueOperationtypeMock as any}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     // MOVE TO STEP 2
     await userEvent.click(screen.getByRole('button', { name: /Next/i }));
     // MOVE TO STEP3
@@ -218,6 +271,6 @@ describe('Stock Operation form step 3 (stock submision)', () => {
     expect(noRadioButton).toBeInTheDocument();
     await userEvent.click(noRadioButton);
     // On require aprooval should now show complete btn
-    expect(screen.getByRole('button', { name: /dispatch/i })).toBeInTheDocument();
+    expect(screen.getByTestId('dipatch-button')).toBeInTheDocument();
   });
 });

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

@@ -1,7 +1,7 @@
 import { Button, Column, ComboBox, DatePicker, DatePickerInput, InlineLoading, Stack, TextArea } from '@carbon/react';
 import { ErrorState } from '@openmrs/esm-framework';
 import React, { ChangeEvent, FC, useEffect, useMemo } from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
+import { Controller, useFormContext, useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, MAIN_STORE_LOCATION_TAG } from '../../../constants';
 import { Party } from '../../../core/api/types/Party';
@@ -14,6 +14,7 @@ import StockOperationReasonSelector from '../input-components/stock-operation-re
 import UsersSelector from '../input-components/users-selector.component';
 import styles from '../stock-operation-form.scss';
 import { TextInput } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
 
 type BaseOperationDetailsFormStepProps = {
   stockOperation?: StockOperationDTO;
@@ -41,10 +42,11 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
     () => OperationType.STOCK_ISSUE_OPERATION_TYPE === stockOperationType.operationType,
     [stockOperationType],
   );
+
   // initialize location fields
   useEffect(() => {
     // Prefill default locaton with current location if is a new operation
-    if (!stockOperation) {
+    if (!stockOperation && stockOperationType.operationType !== OperationType.STOCK_ISSUE_OPERATION_TYPE) {
       if (stockOperationType?.hasSource) {
         const shouldLockSource = sourceTags.length === 1 && sourceTags[0] === MAIN_STORE_LOCATION_TAG;
         if (shouldLockSource && sourceParties?.length) {
@@ -82,13 +84,6 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
     <Stack gap={4} className={styles.grid}>
       <div className={styles.heading}>
         <h4>{`${stockOperationType.name} ${t('details', 'Details')}`}</h4>
-        <div className={styles.btnSet}>
-          {typeof onNext === 'function' && (
-            <Button kind="primary" onClick={onNext} role="button">
-              {t('next', 'Next')}
-            </Button>
-          )}
-        </div>
       </div>
       <Column>
         <Controller
@@ -234,6 +229,13 @@ const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
           )}
         />
       </Column>
+      <div className={styles.btnSet}>
+        {typeof onNext === 'function' && (
+          <Button kind="primary" onClick={onNext} role="button" renderIcon={ArrowRight}>
+            {t('next', 'Next')}
+          </Button>
+        )}
+      </div>
     </Stack>
   );
 };