@openmrs/esm-stock-management-app 3.0.1-pre.879 → 3.0.1-pre.889

package/src/stock-management-header/stock-management-header.component.tsx

@@ -1,9 +1,14 @@
-import { formatDate, useSession } from '@openmrs/esm-framework';
 import React from 'react';
-import styles from './stock-management-header.scss';
-import StockManagementIllustration from './stock-management-Illustration';
 import { Calendar, Location } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
+import {
+  formatDate,
+  PageHeader,
+  PageHeaderContent,
+  StockManagementPictogram,
+  useSession,
+} from '@openmrs/esm-framework';
+import styles from './stock-management-header.scss';
 
 export const StockManagementHeader: React.FC = () => {
   const { t } = useTranslation();
@@ -11,14 +16,8 @@ export const StockManagementHeader: React.FC = () => {
   const userLocation = userSession?.sessionLocation?.display;
 
   return (
-    <div className={styles.header}>
-      <div className={styles['left-justified-items']}>
-        <StockManagementIllustration />
-        <div className={styles['page-labels']}>
-          <p>{t('home', 'Home')}</p>
-          <p className={styles['page-name']}>{t('stockManagement', 'Stock Management')}</p>
-        </div>
-      </div>
+    <PageHeader className={styles.header} data-testid="stock-management-header">
+      <PageHeaderContent illustration={<StockManagementPictogram />} title={t('stockManagement', 'Stock management')} />
       <div className={styles['right-justified-items']}>
         <div className={styles['date-and-location']}>
           <Location size={16} />
@@ -28,6 +27,6 @@ export const StockManagementHeader: React.FC = () => {
           <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
         </div>
       </div>
-    </div>
+    </PageHeader>
   );
 };

package/src/stock-management-header/stock-management-header.scss

@@ -4,38 +4,23 @@
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
-  @include type.type-style('body-compact-02');
-  color: colors.$gray-70;
-  height: layout.$spacing-12;
   background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-left: 0;
   display: flex;
-  padding-left: 8px;
   justify-content: space-between;
-}
-
-.left-justified-items {
-  display: flex;
-  flex-direction: row;
   align-items: center;
-  cursor: pointer;
+  padding-right: layout.$spacing-03;
 }
 
 .right-justified-items {
   @include type.type-style('body-compact-02');
   color: colors.$gray-70;
-  margin: 0.5rem;
-}
-
-.page-name {
-  @include type.type-style('heading-04');
-}
-
-.page-labels {
-  margin: 1rem;
+  margin: layout.$spacing-03;
 }
 
 .middot {
-  margin: 0 0.5rem;
+  margin: 0 layout.$spacing-03;
 }
 
 .date-and-location {
@@ -46,11 +31,7 @@
 }
 
 .value {
-  margin-left: 0.25rem;
-}
-
-.middot {
-  margin: 0 0.5rem;
+  margin-left: layout.$spacing-02;
 }
 
 .view {

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

@@ -6,14 +6,14 @@ import {
   type StockOperationType,
   StockOperationTypeHasPrint,
 } from '../core/api/types/stockOperation/StockOperationType';
-import StockOperationApprovalButton from './stock-operations-dialog/stock-operations-approve-button.component';
-import StockOperationApproveDispatchButton from './stock-operations-dialog/stock-operations-approve-dispatch-button.component';
-import StockOperationCancelButton from './stock-operations-dialog/stock-operations-cancel-button.component';
-import StockOperationCompleteDispatchButton from './stock-operations-dialog/stock-operations-completed-dispatch-button.component';
-import StockOperationIssueStockButton from './stock-operations-dialog/stock-operations-issue-stock-button.component';
-import StockOperationPrintButton from './stock-operations-dialog/stock-operations-print-button.component';
-import StockOperationRejectButton from './stock-operations-dialog/stock-operations-reject-button.component';
-import StockOperationReturnButton from './stock-operations-dialog/stock-operations-return-button.component';
+import StockOperationApprovalButton from './stock-operations-modal/stock-operations-approve-button.component';
+import StockOperationApproveDispatchButton from './stock-operations-modal/stock-operations-approve-dispatch-button.component';
+import StockOperationCancelButton from './stock-operations-modal/stock-operations-cancel-button.component';
+import StockOperationCompleteDispatchButton from './stock-operations-modal/stock-operations-completed-dispatch-button.component';
+import StockOperationIssueStockButton from './stock-operations-modal/stock-operations-issue-stock-button.component';
+import StockOperationPrintButton from './stock-operations-modal/stock-operations-print-button.component';
+import StockOperationRejectButton from './stock-operations-modal/stock-operations-reject-button.component';
+import StockOperationReturnButton from './stock-operations-modal/stock-operations-return-button.component';
 import useOperationTypePermisions from './stock-operations-forms/hooks/useOperationTypePermisions';
 import styles from './stock-operations-table.scss';
 

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

@@ -8,7 +8,7 @@ export const launchStockoperationAddOrEditWorkSpace = (
   t: TFunction,
   operationType: StockOperationType,
   stockOperation?: StockOperationDTO,
-  stockRequisitionUuid?: string, // Only suplied on stock issue (when overlay is launched for stock issue)
+  stockRequisitionUuid?: string, // Only supplied on stock issue (when workspace is launched for stock issue)
 ) => {
   launchWorkspace('stock-operation-form-workspace', {
     workspaceTitle: stockOperation
@@ -32,8 +32,8 @@ export function getStockOperationUniqueId() {
   return `${new Date().getTime()}-${Math.random().toString(36).substring(2, 16)}`;
 }
 
-export const showActionDialogButton = (title: string, requireReason: boolean, operation: StockOperationDTO) => {
-  const dispose = showModal('stock-operation-dialog', {
+export const launchStockOperationsModal = (title: string, requireReason: boolean, operation: StockOperationDTO) => {
+  const dispose = showModal('stock-operations-modal', {
     title: title,
     operation: operation,
     requireReason: requireReason,

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

@@ -48,10 +48,6 @@ jest.mock('../stock-operations.resource', () => ({
   }),
 }));
 
-jest.mock('../../core/components/overlay/hook', () => ({
-  closeOverlay: jest.fn(),
-}));
-
 jest.mock('../../stock-items/stock-items.resource', () => ({
   useStockItem: jest.fn().mockReturnValue({
     isLoading: false,

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

@@ -40,10 +40,6 @@ jest.mock('../stock-operations.resource', () => ({
   }),
 }));
 
-jest.mock('../../core/components/overlay/hook', () => ({
-  closeOverlay: jest.fn(),
-}));
-
 jest.mock('../../stock-items/stock-items.resource', () => ({
   useStockItem: jest.fn(),
   useStockItems: jest.fn().mockReturnValue({

package/src/stock-operations/stock-operations-forms/steps/stock-operation-submission-form-step.component.tsx

@@ -9,12 +9,12 @@ import { extractErrorMessagesFromResponse } from '../../../constants';
 import { handleMutate } from '../../../utils';
 import { OperationType, type StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
 import { otherUser } from '../../../core/utils/utils';
-import { showActionDialogButton } from '../../stock-operation.utils';
+import { launchStockOperationsModal } from '../../stock-operation.utils';
 import { type StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
 import { type StockOperationItemDTO } from '../../../core/api/types/stockOperation/StockOperationItemDTO';
 import { type StockOperationItemDtoSchema } from '../../validation-schema';
-import styles from '../stock-operation-form.scss';
 import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import styles from '../stock-operation-form.scss';
 
 type StockOperationSubmissionFormStepProps = {
   onPrevious?: () => void;
@@ -125,17 +125,17 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
 
   const handleComplete = useCallback(() => {
     handleSave().then((operation) => {
-      showActionDialogButton('Complete', false, { ...operation, status: 'COMPLETED' });
+      launchStockOperationsModal('Complete', false, { ...operation, status: 'COMPLETED' });
     });
   }, [handleSave]);
   const handleSubmitForReview = useCallback(() => {
     handleSave().then((operation) => {
-      showActionDialogButton('Submit', false, { ...operation, status: 'SUBMITTED' });
+      launchStockOperationsModal('Submit', false, { ...operation, status: 'SUBMITTED' });
     });
   }, [handleSave]);
   const handleDispatch = useCallback(() => {
     handleSave().then((operation) => {
-      showActionDialogButton('Dispatch', false, { ...operation, status: 'DISPATCHED' });
+      launchStockOperationsModal('Dispatch', false, { ...operation, status: 'DISPATCHED' });
     });
   }, [handleSave]);
 

package/src/stock-operations/{stock-operations-dialog → stock-operations-modal}/stock-operations-approve-button.component.tsx

@@ -13,7 +13,7 @@ interface StockOperationApprovalButtonProps {
 const StockOperationApprovalButton: React.FC<StockOperationApprovalButtonProps> = ({ operation }) => {
   const { t } = useTranslation();
   const launchApprovalModal = useCallback(() => {
-    const dispose = showModal('stock-operation-dialog', {
+    const dispose = showModal('stock-operations-modal', {
       title: 'Approve',
       operation: operation,
       requireReason: false,

package/src/stock-operations/{stock-operations-dialog → stock-operations-modal}/stock-operations-approve-dispatch-button.component.tsx

@@ -13,7 +13,7 @@ interface StockOperationApproveDispatchButtonProps {
 const StockOperationApproveDispatchButton: React.FC<StockOperationApproveDispatchButtonProps> = ({ operation }) => {
   const { t } = useTranslation();
   const launchApproveDispatchModal = useCallback(() => {
-    const dispose = showModal('stock-operation-dialog', {
+    const dispose = showModal('stock-operations-modal', {
       title: 'Dispatch',
       operation: operation,
       requireReason: false,

package/src/stock-operations/{stock-operations-dialog → stock-operations-modal}/stock-operations-cancel-button.component.tsx

@@ -13,7 +13,7 @@ interface StockOperationCancelButtonProps {
 const StockOperationCancelButton: React.FC<StockOperationCancelButtonProps> = ({ operation }) => {
   const { t } = useTranslation();
   const launchCancelModal = useCallback(() => {
-    const dispose = showModal('stock-operation-dialog', {
+    const dispose = showModal('stock-operations-modal', {
       title: 'Cancel',
       operation: operation,
       requireReason: true,

package/src/stock-operations/{stock-operations-dialog → stock-operations-modal}/stock-operations-complete-button.component.tsx

@@ -14,7 +14,7 @@ interface StockOperationCompleteButtonProps {
 const StockOperationCompleteButton: React.FC<StockOperationCompleteButtonProps> = ({ operation, reason }) => {
   const { t } = useTranslation();
   const launchCompleteModal = useCallback(() => {
-    const dispose = showModal('stock-operation-dialog', {
+    const dispose = showModal('stock-operations-modal', {
       title: 'Complete',
       operation: operation,
       requireReason: reason,

package/src/stock-operations/{stock-operations-dialog → stock-operations-modal}/stock-operations-completed-dispatch-button.component.tsx

@@ -17,7 +17,7 @@ const StockOperationCompleteDispatchButton: React.FC<StockOperationCompleteDispa
 }) => {
   const { t } = useTranslation();
   const launchcompletedDispatchModal = useCallback(() => {
-    const dispose = showModal('stock-operation-dialog', {
+    const dispose = showModal('stock-operations-modal', {
       title: 'Complete Dispatch',
       operation: operation,
       requireReason: reason,

package/src/stock-operations/{stock-operations-dialog → stock-operations-modal}/stock-operations-reject-button.component.tsx

@@ -13,7 +13,7 @@ interface StockOperationRejectButtonProps {
 const StockOperationRejectButton: React.FC<StockOperationRejectButtonProps> = ({ operation }) => {
   const { t } = useTranslation();
   const launchRejectModal = useCallback(() => {
-    const dispose = showModal('stock-operation-dialog', {
+    const dispose = showModal('stock-operations-modal', {
       title: 'Reject',
       operation: operation,
       requireReason: true,

package/src/stock-operations/{stock-operations-dialog → stock-operations-modal}/stock-operations-return-button.component.tsx

@@ -13,7 +13,7 @@ interface StockOperationReturnButtonProps {
 const StockOperationReturnButton: React.FC<StockOperationReturnButtonProps> = ({ operation }) => {
   const { t } = useTranslation();
   const launchReturnModal = useCallback(() => {
-    const dispose = showModal('stock-operation-dialog', {
+    const dispose = showModal('stock-operations-modal', {
       title: 'Return',
       operation: operation,
       requireReason: true,

package/src/stock-operations/{stock-operations-dialog/stock-operations-dialog.component.tsx → stock-operations-modal/stock-operations.modal.tsx}

@@ -1,32 +1,28 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Button, Form, InlineLoading, ModalBody, ModalFooter, ModalHeader, TextArea } from '@carbon/react';
+import { getCoreTranslation, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
 import { type StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
-import { Button, Form, ModalBody, ModalFooter, ModalHeader, TextArea, InlineLoading } from '@carbon/react';
-import styles from './stock-operations-dialog.scss';
 import {
   type StopOperationAction,
   type StopOperationActionType,
 } from '../../core/api/types/stockOperation/StockOperationAction';
 import { executeStockOperationAction } from '../stock-operations.resource';
-import { getCoreTranslation, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
-import { closeOverlay } from '../../core/components/overlay/hook';
 import { extractErrorMessagesFromResponse } from '../../constants';
 import { handleMutate } from '../../utils';
+import styles from './stock-operations.scss';
 
-interface StockOperationDialogProps {
+interface StockOperationsModalProps {
   title: string;
   requireReason: boolean;
   operation: StockOperationDTO;
   closeModal: () => void;
 }
 
-const StockOperationDialog: React.FC<StockOperationDialogProps> = ({ title, requireReason, operation, closeModal }) => {
+const StockOperationsModal: React.FC<StockOperationsModalProps> = ({ title, requireReason, operation, closeModal }) => {
   const confirmType = title.toLocaleLowerCase().trim();
-
   const { t } = useTranslation();
-
   const [notes, setNotes] = useState('');
-
   const [isApproving, setIsApproving] = useState(false);
 
   const handleClick = async (event) => {
@@ -88,7 +84,6 @@ const StockOperationDialog: React.FC<StockOperationDialogProps> = ({ title, requ
           kind: 'success',
         }),
           closeModal();
-        closeOverlay();
         handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
       },
       (err) => {
@@ -103,7 +98,6 @@ const StockOperationDialog: React.FC<StockOperationDialogProps> = ({ title, requ
           kind: 'error',
         }),
           closeModal();
-        closeOverlay();
       },
     );
   };
@@ -144,4 +138,4 @@ const StockOperationDialog: React.FC<StockOperationDialogProps> = ({ title, requ
   );
 };
 
-export default StockOperationDialog;
+export default StockOperationsModal;

package/src/stock-sources/add-stock-sources/add-stock-sources.test.tsx

@@ -149,7 +149,7 @@ describe('StockSourcesAddOrUpdate', () => {
     await user.click(screen.getByText('Save'));
   });
 
-  it('shows success message and closes overlay on successful submission', async () => {
+  it('shows success message and closes the workspace on successful submission', async () => {
     const user = userEvent.setup();
     mockCreateOrUpdateStockSource.mockResolvedValue({
       data: {},
@@ -186,7 +186,7 @@ describe('StockSourcesAddOrUpdate', () => {
     await user.click(screen.getByText(/save/i));
   });
 
-  it('closes overlay when cancel button is clicked', async () => {
+  it('closes workspace when cancel button is clicked', async () => {
     const user = userEvent.setup();
     render(
       <StockSourcesAddOrUpdate

package/translations/en.json

@@ -30,7 +30,6 @@
   "BatchJobSuccess": "Batch job created successfully",
   "batchNo": "Batch No",
   "batchNumber": "Batch Number",
-  "batchNumberAlreadyUsed": "Batch number already used",
   "bincard": "Stock Card",
   "by": "By",
   "cancel": "Cancel",
@@ -142,7 +141,6 @@
   "generatedMessage": "The card has been electronically generated and is a valid document. It was created by {{userName}} on {{date}}",
   "genericName": "Generic Name",
   "hasExpiration": "Does the item expire?",
-  "home": "Home",
   "import": "Import",
   "importStockItems": "Import Stock Items",
   "in6Months": "In 6 months",
@@ -329,7 +327,6 @@
   "submittingForReview": "Submitting for review",
   "success": "Success",
   "successfullysaved": "You have successfully saved user role scope",
-  "tabletOverlay": "Tablet overlay",
   "tags": "Tags",
   "timeTaken": "Time Taken",
   "to": "To",