@openmrs/esm-stock-management-app 3.0.1-pre.818 → 3.0.1-pre.826

package/src/stock-items/add-stock-item/add-stock-item.scss

@@ -1,5 +1,24 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
 .formContainer {
-  max-height: calc(100vh - 100px);
-  overflow: scroll;
-  padding: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+.button {
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }

package/src/stock-items/add-stock-item/add-stock-item.test.tsx

@@ -22,8 +22,8 @@ jest.mock('@carbon/react/icons', () => ({
   Save: () => <div>Save Icon</div>,
 }));
 
-jest.mock('./stock-item-details/stock-item-details.component', () => ({ model }) => (
-  <div data-testid="stock-item-details">Stock Item Details: {model.uuid}</div>
+jest.mock('./stock-item-details/stock-item-details.component', () => ({ stockItem }) => (
+  <div data-testid="stock-item-details">Stock Item Details: {stockItem?.uuid}</div>
 ));
 
 jest.mock('./packaging-units/packaging-units.component', () => ({ stockItemUuid }) => (
@@ -120,14 +120,14 @@ describe('AddEditStockItem', () => {
   };
 
   it('renders correctly with initial state and default selected tab', () => {
-    render(<AddEditStockItem model={mockModel} />);
+    render(<AddEditStockItem stockItem={mockModel} />);
     expect(screen.getByTestId('stock-item-details')).toBeInTheDocument();
     expect(screen.getByText('Stock Item Details: test-uuid-123')).toBeInTheDocument();
   });
 
   it('changes selected tab when clicking on different tabs', async () => {
     const user = userEvent.setup();
-    render(<AddEditStockItem model={mockModel} isEditing={true} />);
+    render(<AddEditStockItem stockItem={mockModel} />);
 
     await user.click(screen.getByText('packagingUnits'));
     expect(screen.getByTestId('packaging-units')).toBeInTheDocument();
@@ -139,7 +139,7 @@ describe('AddEditStockItem', () => {
   });
 
   it('disables tabs when isEditing is false', () => {
-    render(<AddEditStockItem model={mockModel} isEditing={false} />);
+    render(<AddEditStockItem />);
 
     const disabledTabs = [
       'packagingUnits',
@@ -150,13 +150,13 @@ describe('AddEditStockItem', () => {
       'references',
     ];
     disabledTabs.forEach((tabName) => {
-      const tab = screen.getByRole('tab', { name: tabName });
+      const tab = screen.getByRole('button', { name: tabName });
       expect(tab).toHaveAttribute('aria-disabled', 'true');
     });
   });
 
   it('enables tabs when isEditing is true', () => {
-    render(<AddEditStockItem model={mockModel} isEditing={true} />);
+    render(<AddEditStockItem stockItem={mockModel} />);
 
     const enabledTabs = [
       'packagingUnits',
@@ -167,14 +167,14 @@ describe('AddEditStockItem', () => {
       'references',
     ];
     enabledTabs.forEach((tabName) => {
-      const tab = screen.getByRole('tab', { name: tabName });
-      expect(tab).not.toHaveAttribute('aria-disabled', 'true');
+      const tab = screen.getByRole('button', { name: tabName });
+      expect(tab).toHaveAttribute('aria-disabled', 'false');
     });
   });
 
   it('renders correct components based on model prop', async () => {
     const user = userEvent.setup();
-    render(<AddEditStockItem model={mockModel} isEditing={true} />);
+    render(<AddEditStockItem stockItem={mockModel} />);
 
     expect(screen.getByText('Stock Item Details: test-uuid-123')).toBeInTheDocument();
 
@@ -198,7 +198,7 @@ describe('AddEditStockItem', () => {
   });
 
   it('translates tab names correctly', () => {
-    render(<AddEditStockItem model={mockModel} />);
+    render(<AddEditStockItem stockItem={mockModel} />);
 
     const tabNames = [
       'stockItemDetails',

package/src/stock-items/add-stock-item/packaging-units/packaging-units.component.tsx

@@ -1,7 +1,3 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { showSnackbar, restBaseUrl } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
-import { useStockItemPackageUnitsHook } from './packaging-units.resource';
 import {
   Button,
   DataTable,
@@ -14,19 +10,22 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
-import PackagingUnitsConceptSelector from '../packaging-units-concept-selector/packaging-units-concept-selector.component';
-import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input/controlled-number-input.component';
 import { Save } from '@carbon/react/icons';
-import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { type PackageUnitFormData, packageUnitSchema } from './validationSchema';
+import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import React, { useEffect, useMemo, useState } from 'react';
+import { FormProvider, useForm, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { type StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
+import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input/controlled-number-input.component';
+import { handleMutate } from '../../../utils';
 import { createStockItemPackagingUnit, updateStockItemPackagingUnit } from '../../stock-items.resource';
+import PackagingUnitsConceptSelector from '../packaging-units-concept-selector/packaging-units-concept-selector.component';
 import DeleteModalButton from './packaging-units-delete-modal-button.component';
-import { handleMutate } from '../../../utils';
+import { useStockItemPackageUnitsHook } from './packaging-units.resource';
+import { type PackageUnitFormData, packageUnitSchema } from './validationSchema';
 
 import styles from './packaging-units.scss';
-import { closeOverlay } from '../../../core/components/overlay/hook';
 
 interface PackagingUnitsProps {
   isEditing?: boolean;

package/src/stock-items/add-stock-item/packaging-units/packaging-units.resource.tsx

@@ -24,7 +24,7 @@ export function useStockItemPackageUnitsHook(v?: ResourceRepresentation) {
   const { items, isLoading, error, mutate } = useStockItemPackagingUOMs(stockItemFilter);
 
   return {
-    items: items.results,
+    items: items.results ?? [],
     totalCount: items.totalCount,
     isLoading,
     error,

package/src/stock-items/add-stock-item/stock-item-details/stock-item-details.component.tsx

@@ -1,239 +1,251 @@
-import React, { forwardRef, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Button, ButtonSet, FormGroup, InlineLoading } from '@carbon/react';
 import { Save } from '@carbon/react/icons';
-
-import { Button, FormGroup, InlineLoading } from '@carbon/react';
-import { type StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
-import DrugSelector from '../drug-selector/drug-selector.component';
-import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { stockItemDetailsSchema, type StockItemFormData } from '../../validationSchema';
-import ControlledRadioButtonGroup from '../../../core/components/carbon/controlled-radio-button-group/controlled-radio-button-group.component';
+import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import React, { forwardRef, useMemo } from 'react';
+import { type SubmitHandler, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { type StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
 import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input/controlled-number-input.component';
+import ControlledRadioButtonGroup from '../../../core/components/carbon/controlled-radio-button-group/controlled-radio-button-group.component';
 import ControlledTextInput from '../../../core/components/carbon/controlled-text-input/controlled-text-input.component';
+import { handleMutate } from '../../../utils';
+import styles from '../../add-stock-item/add-stock-item.scss';
+import { launchAddOrStockItemWorkspace } from '../../stock-item.utils';
+import { createStockItem, updateStockItem } from '../../stock-items.resource';
+import { stockItemDetailsSchema, type StockItemFormData } from '../../validationSchema';
+import ConceptsSelector from '../concepts-selector/concepts-selector.component';
 import DispensingUnitSelector from '../dispensing-unit-selector/dispensing-unit-selector.component';
+import DrugSelector from '../drug-selector/drug-selector.component';
 import PreferredVendorSelector from '../preferred-vendor-selector/preferred-vendor-selector.component';
 import StockItemCategorySelector from '../stock-item-category-selector/stock-item-category-selector.component';
 import StockItemUnitsEdit from '../stock-item-units-edit/stock-item-units-edit.component';
-import { type SaveStockItem } from '../../types';
-import ConceptsSelector from '../concepts-selector/concepts-selector.component';
-import styles from '../../add-stock-item/add-stock-item.scss';
-import { closeOverlay } from '../../../core/components/overlay/hook';
-import { expirationOptions, radioOptions } from './stock-item-details.resource';
-import { restBaseUrl } from '@openmrs/esm-framework';
-import { handleMutate } from '../../../utils';
+import { expirationOptions, radioOptions, StockItemType } from './stock-item-details.resource';
 
 interface StockItemDetailsProps {
-  model: StockItemDTO;
-  onSave: SaveStockItem;
-  isEditing?: boolean;
+  stockItem?: StockItemDTO;
   handleTabChange: (index) => void;
+  onCloseWorkspace?: () => void;
 }
 
-const StockItemDetails = forwardRef<never, StockItemDetailsProps>(({ model, onSave, isEditing, handleTabChange }) => {
-  const { t } = useTranslation();
-  const { handleSubmit, control, formState } = useForm<StockItemFormData>({
-    defaultValues: model,
-    mode: 'all',
-    resolver: zodResolver(stockItemDetailsSchema),
-  });
+const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
+  ({ stockItem, handleTabChange, onCloseWorkspace }) => {
+    const { t } = useTranslation();
+    const { handleSubmit, control, formState, watch } = useForm<StockItemFormData>({
+      defaultValues: stockItem ?? {},
+      mode: 'all',
+      resolver: zodResolver(stockItemDetailsSchema),
+    });
 
-  const { errors } = formState;
-  const handleSave = async (item: StockItemDTO) => {
-    try {
-      setIsSaving(true);
-
-      // Restore uuid
-      item.uuid = model.uuid;
-      await onSave(item);
-      handleTabChange(1);
-      handleMutate(`${restBaseUrl}/stockmanagement/stockitem`);
-    } catch (e) {
-      // Show notification
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const [isSaving, setIsSaving] = useState(false);
-  const [isDrug, setIsDrug] = useState(false);
-  const [selectedItemType, setSelectedItemType] = useState('');
-  const [hasExpiration, setHasExpiration] = useState(false);
+    const { errors } = formState;
+    const handleSave: SubmitHandler<StockItemFormData> = async (formValues) => {
+      try {
+        const response = stockItem
+          ? await updateStockItem(stockItem?.uuid, formValues)
+          : await createStockItem(formValues);
+        if (response?.data) {
+          showSnackbar({
+            isLowContrast: true,
+            title: stockItem ? `${t('editStockItem', 'Edit Stock Item')}` : `${t('addStockItem', 'Add Stock Item')}`,
+            kind: 'success',
+            subtitle: stockItem
+              ? `${t('stockItemEdited', 'Stock Item Edited Successfully')}`
+              : `${t('stockItemAdded', 'Stock Item Added Successfully')}`,
+          });
+          if (!stockItem) {
+            onCloseWorkspace?.();
+            // launch edit dialog
+            const item = response.data;
+            item.isDrug = !!item.drugUuid;
+            launchAddOrStockItemWorkspace(t, item);
+          }
+        }
 
-  useEffect(() => {
-    setIsDrug(model.isDrug ?? false);
-    setHasExpiration(model.hasExpiration ?? false);
-  }, [model.hasExpiration, model.isDrug]);
+        handleTabChange(1);
+        handleMutate(`${restBaseUrl}/stockmanagement/stockitem`);
+      } catch (e) {
+        // Show notification
+        showSnackbar({
+          title: stockItem
+            ? t('errorEditingStockItem', 'Error editing a stock Item')
+            : t('errorAddingStockItem', 'Error adding a stock Item'),
+          kind: 'error',
+          isLowContrast: true,
+          subtitle: e?.responseBody?.error?.message,
+        });
+      }
+    };
+    const [observableIsDrug, observableHasExpiration] = watch(['isDrug', 'hasExpiration']);
+    const selectedItemType = useMemo<StockItemType | null>(() => {
+      if (observableIsDrug === true) return StockItemType.PHARMACEUTICALS;
+      else if (observableIsDrug === false) return StockItemType.NONE_PHARMACEUTICALS;
+      return null;
+    }, [observableIsDrug]);
 
-  return (
-    <form className={`${styles.formContainer} ${styles.verticalForm}`}>
-      {!isEditing && (
-        <FormGroup
-          className="clear-margin-bottom"
-          legendText={t('itemType', 'Item Type')}
-          title={t('itemType', 'Item Type')}
-        >
-          <ControlledRadioButtonGroup
+    return (
+      <form className={styles.formContainer}>
+        <div>
+          {!stockItem && (
+            <FormGroup
+              className="clear-margin-bottom"
+              legendText={t('itemType', 'Item Type')}
+              title={t('itemType', 'Item Type')}
+            >
+              <ControlledRadioButtonGroup
+                control={control}
+                name="isDrug"
+                controllerName="isDrug"
+                legendText=""
+                invalid={!!errors.isDrug}
+                invalidText={errors.isDrug && errors?.isDrug?.message}
+                options={radioOptions} // Pass radioOptions directly
+              />
+            </FormGroup>
+          )}
+          {selectedItemType === StockItemType.PHARMACEUTICALS ? (
+            <DrugSelector
+              name="drugUuid"
+              controllerName="drugUuid"
+              control={control}
+              title={t('pleaseSpecify', 'Please specify:')}
+              placeholder="Choose a drug"
+              drugUuid={stockItem?.drugUuid}
+              invalid={!!errors.drugUuid}
+              invalidText={errors.drugUuid && errors?.drugUuid?.message}
+            />
+          ) : selectedItemType === StockItemType.NONE_PHARMACEUTICALS ? (
+            <ConceptsSelector
+              name="conceptUuid"
+              controllerName="conceptUuid"
+              control={control}
+              title={t('pleaseSpecify', 'Please specify') + ':'}
+              placeholder={t('chooseAnItem', 'Choose an item')}
+              invalid={!!errors.drugUuid}
+              invalidText={errors.drugUuid && errors?.drugUuid?.message}
+            />
+          ) : null}
+          <ControlledTextInput
+            id="commonName"
+            name="commonName"
             control={control}
-            name="isDrug"
-            controllerName="isDrug"
-            legendText=""
-            invalid={!!errors.isDrug}
-            invalidText={errors.isDrug && errors?.isDrug?.message}
-            onChange={(selectedValue: string) => {
-              const selectedOption = radioOptions.find((option) => String(option.value) === selectedValue);
-              const selectedLabel = selectedOption ? selectedOption.label : '';
-              setIsDrug(selectedValue === 'true');
-              setSelectedItemType(selectedLabel);
-            }}
-            options={radioOptions} // Pass radioOptions directly
+            controllerName="commonName"
+            maxLength={255}
+            size={'md'}
+            value={`${stockItem?.commonName ?? ''}`}
+            labelText={t('commonName', 'Common name') + ':'}
+            invalid={!!errors.commonName}
+            invalidText={errors.commonName && errors?.commonName?.message}
           />
-        </FormGroup>
-      )}
-      {selectedItemType === 'Pharmaceuticals' ? (
-        <DrugSelector
-          name="drugUuid"
-          controllerName="drugUuid"
-          control={control}
-          title={t('pleaseSpecify', 'Please specify:')}
-          placeholder="Choose a drug"
-          drugUuid={model.drugUuid}
-          invalid={!!errors.drugUuid}
-          invalidText={errors.drugUuid && errors?.drugUuid?.message}
-        />
-      ) : selectedItemType === 'Non Pharmaceuticals' ? (
-        <ConceptsSelector
-          name="conceptUuid"
-          controllerName="conceptUuid"
-          control={control}
-          title={t('pleaseSpecify', 'Please specify') + ':'}
-          placeholder={t('chooseAnItem', 'Choose an item')}
-          invalid={!!errors.drugUuid}
-          invalidText={errors.drugUuid && errors?.drugUuid?.message}
-        />
-      ) : null}
-      <ControlledTextInput
-        id="commonName"
-        name="commonName"
-        control={control}
-        controllerName="commonName"
-        maxLength={255}
-        size={'md'}
-        value={`${model?.commonName ?? ''}`}
-        labelText={t('commonName', 'Common name') + ':'}
-        invalid={!!errors.commonName}
-        invalidText={errors.commonName && errors?.commonName?.message}
-      />
-      <ControlledTextInput
-        id="acronym"
-        maxLength={255}
-        name="acronym"
-        control={control}
-        controllerName="acronym"
-        size={'md'}
-        labelText={t('abbreviation', 'Abbreviation') + ':'}
-        invalid={!!errors.acronym}
-        invalidText={errors.acronym && errors?.acronym?.message}
-      />
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr',
-          justifyContent: 'center',
-        }}
-      >
-        <FormGroup
-          className="clear-margin-bottom"
-          legendText={t('hasExpiration', 'Does the item expire?')}
-          title={t('hasExpiration', 'Does the item expire?')}
-        >
-          <ControlledRadioButtonGroup
-            name="hasExpiration"
-            controllerName="hasExpiration"
+          <ControlledTextInput
+            id="acronym"
+            maxLength={255}
+            name="acronym"
             control={control}
-            legendText=""
-            invalid={!!errors.hasExpiration}
-            invalidText={errors.hasExpiration && errors?.hasExpiration?.message}
-            onChange={(selectedValue: string) => {
-              setHasExpiration(selectedValue === 'true');
-            }}
-            options={expirationOptions} // Pass expirationOptions directly
+            controllerName="acronym"
+            size={'md'}
+            labelText={t('abbreviation', 'Abbreviation') + ':'}
+            invalid={!!errors.acronym}
+            invalidText={errors.acronym && errors?.acronym?.message}
           />
-        </FormGroup>
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr',
+              justifyContent: 'center',
+            }}
+          >
+            <FormGroup
+              className="clear-margin-bottom"
+              legendText={t('hasExpiration', 'Does the item expire?')}
+              title={t('hasExpiration', 'Does the item expire?')}
+            >
+              <ControlledRadioButtonGroup
+                name="hasExpiration"
+                controllerName="hasExpiration"
+                control={control}
+                legendText=""
+                invalid={!!errors.hasExpiration}
+                invalidText={errors.hasExpiration && errors?.hasExpiration?.message}
+                options={expirationOptions} // Pass expirationOptions directly
+              />
+            </FormGroup>
 
-        {hasExpiration && (
-          <FormGroup className="clear-margin-bottom" title={t('expirationNotice', 'Expiration Notice (days)')}>
-            <ControlledNumberInput
-              id="expiryNotice"
-              name="expiryNotice"
+            {observableHasExpiration && (
+              <FormGroup className="clear-margin-bottom" title={t('expirationNotice', 'Expiration Notice (days)')}>
+                <ControlledNumberInput
+                  id="expiryNotice"
+                  name="expiryNotice"
+                  control={control}
+                  controllerName="expiryNotice"
+                  min={0}
+                  hideSteppers={true}
+                  size={'md'}
+                  allowEmpty={true}
+                  label={t('expiryNoticeDays', 'Expiration Notice (days)')}
+                  invalid={!!errors.expiryNotice}
+                  invalidText={errors.expiryNotice && errors?.expiryNotice?.message}
+                />
+              </FormGroup>
+            )}
+          </div>
+          <PreferredVendorSelector
+            name="preferredVendorUuid"
+            controllerName="preferredVendorUuid"
+            control={control}
+            title={t('whoIsThePreferredVendor', 'Who is the preferred vendor?')}
+            placeholder={t('chooseVendor', 'Choose vendor')}
+            invalid={!!errors.preferredVendorUuid}
+            invalidText={errors.preferredVendorUuid && errors?.preferredVendorUuid?.message}
+          />
+          <StockItemCategorySelector
+            name="categoryUuid"
+            controllerName="categoryUuid"
+            control={control}
+            itemType={
+              selectedItemType === StockItemType.PHARMACEUTICALS
+                ? 'Drugs'
+                : selectedItemType === StockItemType.NONE_PHARMACEUTICALS
+                ? 'Non Drugs'
+                : undefined
+            }
+            title={t('category', 'Category') + ':'}
+            placeholder={t('chooseACategory', 'Choose a category')}
+            invalid={!!errors.categoryUuid}
+            invalidText={errors.categoryUuid && errors?.categoryUuid?.message}
+          />
+          {observableIsDrug && (
+            <DispensingUnitSelector
+              name="dispensingUnitUuid"
+              controllerName="dispensingUnitUuid"
               control={control}
-              controllerName="expiryNotice"
-              min={0}
-              hideSteppers={true}
-              size={'md'}
-              allowEmpty={true}
-              label={t('expiryNoticeDays', 'Expiration Notice (days)')}
-              invalid={!!errors.expiryNotice}
-              invalidText={errors.expiryNotice && errors?.expiryNotice?.message}
+              title={t('dispensingUnit', 'Dispensing Unit') + ':'}
+              placeholder={t('dispensingUnitHolder', 'Choose a dispensing unit')}
+              invalid={!!errors.dispensingUnitUuid}
+              invalidText={errors.dispensingUnitUuid && errors?.dispensingUnitUuid?.message}
             />
-          </FormGroup>
-        )}
-      </div>
-      <PreferredVendorSelector
-        name="preferredVendorUuid"
-        controllerName="preferredVendorUuid"
-        control={control}
-        title={t('whoIsThePreferredVendor', 'Who is the preferred vendor?')}
-        placeholder={t('chooseVendor', 'Choose vendor')}
-        invalid={!!errors.preferredVendorUuid}
-        invalidText={errors.preferredVendorUuid && errors?.preferredVendorUuid?.message}
-      />
-      <StockItemCategorySelector
-        name="categoryUuid"
-        controllerName="categoryUuid"
-        control={control}
-        itemType={
-          selectedItemType === 'Pharmaceuticals'
-            ? 'Drugs'
-            : selectedItemType === 'Non Pharmaceuticals'
-            ? 'Non Drugs'
-            : undefined
-        }
-        title={t('category', 'Category') + ':'}
-        placeholder={t('chooseACategory', 'Choose a category')}
-        invalid={!!errors.categoryUuid}
-        invalidText={errors.categoryUuid && errors?.categoryUuid?.message}
-      />
-      {isDrug && (
-        <DispensingUnitSelector
-          name="dispensingUnitUuid"
-          controllerName="dispensingUnitUuid"
-          control={control}
-          title={t('dispensingUnit', 'Dispensing Unit') + ':'}
-          placeholder={t('dispensingUnitHolder', 'Choose a dispensing unit')}
-          invalid={!!errors.dispensingUnitUuid}
-          invalidText={errors.dispensingUnitUuid && errors?.dispensingUnitUuid?.message}
-        />
-      )}
-      {isDrug && isEditing && <StockItemUnitsEdit control={control} formState={formState} stockItemUuid={model.uuid} />}
-
-      <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
-        <Button
-          name="save"
-          type="button"
-          className="submitButton"
-          onClick={handleSubmit(handleSave)}
-          kind="primary"
-          renderIcon={Save}
-        >
-          {isSaving ? <InlineLoading /> : t('save', 'Save')}
-        </Button>
-        <Button kind="secondary" onClick={closeOverlay}>
-          {t('cancel', 'Cancel')}
-        </Button>
-      </div>
-    </form>
-  );
-});
+          )}
+          {observableIsDrug && stockItem && (
+            <StockItemUnitsEdit control={control} formState={formState} stockItemUuid={stockItem?.uuid} />
+          )}
+        </div>
+        <ButtonSet className={styles.buttonSet}>
+          <Button kind="secondary" onClick={onCloseWorkspace} className={styles.button}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button
+            name="save"
+            type="button"
+            className={styles.button}
+            onClick={handleSubmit(handleSave)}
+            kind="primary"
+            renderIcon={Save}
+          >
+            {formState.isSubmitting ? <InlineLoading /> : t('save', 'Save')}
+          </Button>
+        </ButtonSet>
+      </form>
+    );
+  },
+);
 
 export default StockItemDetails;

package/src/stock-items/add-stock-item/stock-item-details/stock-item-details.resource.tsx

@@ -3,9 +3,14 @@ export interface RadioOption {
   value: boolean;
 }
 
+export enum StockItemType {
+  PHARMACEUTICALS = 'Pharmaceuticals',
+  NONE_PHARMACEUTICALS = 'Non Pharmaceuticals',
+}
+
 export const radioOptions: RadioOption[] = [
-  { label: 'Pharmaceuticals', value: true },
-  { label: 'Non Pharmaceuticals', value: false },
+  { label: StockItemType.PHARMACEUTICALS, value: true },
+  { label: StockItemType.NONE_PHARMACEUTICALS, value: false },
 ];
 
 export const expirationOptions: RadioOption[] = [