5177 allow user to create program manual requisitions

client/packages/common/src/types/schema.ts

@@ -8042,7 +8042,9 @@ export type UpdateResponseRequisitionLineErrorInterface = {
 export type UpdateResponseRequisitionLineInput = {
   comment?: InputMaybe<Scalars['String']['input']>;
   id: Scalars['String']['input'];
+  requestedQuantity?: InputMaybe<Scalars['Float']['input']>;
   supplyQuantity?: InputMaybe<Scalars['Float']['input']>;
+  theirStockOnHand?: InputMaybe<Scalars['Float']['input']>;
 };
 
 export type UpdateResponseRequisitionLineResponse = RequisitionLineNode | UpdateResponseRequisitionLineError;

client/packages/requisitions/src/RequestRequisition/ListView/AppBarButtons.tsx

@@ -19,8 +19,8 @@ import {
 import { useRequest } from '../api';
 import { requestsToCsv } from '../../utils';
 import { CreateRequisitionModal } from './CreateRequisitionModal';
-import { NewRequisitionType } from './types';
 import { AppRoute } from '@openmsupply-client/config';
+import { NewRequisitionType } from '../../types';
 
 export const AppBarButtons: FC<{
   modalController: ToggleState;

client/packages/requisitions/src/RequestRequisition/ListView/CreateRequisitionModal.tsx

@@ -17,7 +17,7 @@ import {
   NewProgramRequisition,
   ProgramRequisitionOptions,
 } from './ProgramRequisitionOptions';
-import { NewRequisitionType } from './types';
+import { NewRequisitionType } from '../../types';
 
 interface NewGeneralRequisition {
   type: NewRequisitionType.General;

client/packages/requisitions/src/RequestRequisition/ListView/ProgramRequisitionOptions.tsx

@@ -11,7 +11,7 @@ import {
 import { getNameOptionRenderer } from '@openmsupply-client/system';
 
 import { SupplierProgramSettingsFragment } from '../api';
-import { NewRequisitionType } from './types';
+import { NewRequisitionType } from '../../types';
 
 export interface NewProgramRequisition {
   type: NewRequisitionType.Program;

client/packages/requisitions/src/ResponseRequisition/DetailView/ProgramInfoSection.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { DetailPanelSection } from '@common/components';
+import { useTranslation } from '@common/intl';
+import { useResponse } from '../api';
+import {
+  Grid,
+  PanelField,
+  PanelLabel,
+  PanelRow,
+} from '@openmsupply-client/common';
+
+export const ProgramInfoSection = () => {
+  const t = useTranslation();
+  const { orderType, programName, period } = useResponse.document.fields([
+    'orderType',
+    'programName',
+    'period',
+  ]);
+
+  return programName ? (
+    <DetailPanelSection title={t('heading.program-info')}>
+      <Grid container gap={0.5} key="program-info">
+        <PanelRow>
+          <PanelLabel>{t('label.order-type')}</PanelLabel>
+          <PanelField>{orderType ?? ''}</PanelField>
+        </PanelRow>
+        <PanelRow>
+          <PanelLabel>{t('label.program')}</PanelLabel>
+          <PanelField>{programName ?? ''}</PanelField>
+        </PanelRow>
+        <PanelRow>
+          <PanelLabel>{t('label.period')}</PanelLabel>
+          <PanelField>{period?.name ?? ''}</PanelField>
+        </PanelRow>
+      </Grid>
+    </DetailPanelSection>
+  ) : (
+    <></>
+  );
+};

client/packages/requisitions/src/ResponseRequisition/DetailView/SidePanel.tsx

@@ -9,6 +9,7 @@ import {
 import { useResponse } from '../api';
 import { AdditionalInfoSection } from './AdditionalInfoSection';
 import { RelatedDocumentsSection } from './RelatedDocumentsSection';
+import { ProgramInfoSection } from './ProgramInfoSection';
 
 export const SidePanel: FC = () => {
   const { success } = useNotification();
@@ -31,6 +32,7 @@ export const SidePanel: FC = () => {
         />
       }
     >
+      <ProgramInfoSection />
       <AdditionalInfoSection />
       <RelatedDocumentsSection />
     </DetailPanelPortal>

client/packages/requisitions/src/ResponseRequisition/DetailView/Toolbar.tsx

@@ -24,24 +24,13 @@ export const Toolbar: FC = () => {
   const isDisabled = useResponse.utils.isDisabled();
   const { itemFilter, setItemFilter } = useResponse.line.list();
 
-  const {
-    approvalStatus,
-    otherParty,
-    theirReference,
-    shipments,
-    update,
-    programName,
-    period,
-    orderType,
-  } = useResponse.document.fields([
-    'approvalStatus',
-    'otherParty',
-    'theirReference',
-    'shipments',
-    'programName',
-    'period',
-    'orderType',
-  ]);
+  const { approvalStatus, otherParty, theirReference, shipments, update } =
+    useResponse.document.fields([
+      'approvalStatus',
+      'otherParty',
+      'theirReference',
+      'shipments',
+    ]);
   const { onDelete } = useResponse.line.delete();
   const noLinkedShipments = (shipments?.totalCount ?? 0) === 0;
   const showInfo = noLinkedShipments && !isDisabled;
@@ -98,24 +87,6 @@ export const Toolbar: FC = () => {
                   }
                 />
               )}
-              {orderType && (
-                <InputWithLabelRow
-                  label={t('label.order-type')}
-                  Input={<Typography>{orderType ?? ''}</Typography>}
-                />
-              )}
-              {programName && (
-                <InputWithLabelRow
-                  label={t('label.program')}
-                  Input={<Typography>{programName ?? ''}</Typography>}
-                />
-              )}
-              {period && (
-                <InputWithLabelRow
-                  label={t('label.period')}
-                  Input={<Typography>{period?.name ?? ''}</Typography>}
-                />
-              )}
             </Box>
           </Box>
           {showInfo && (

client/packages/requisitions/src/ResponseRequisition/ListView/AppBarButtons.tsx

@@ -19,7 +19,8 @@ import {
 import { useResponse } from '../api';
 import { responsesToCsv } from '../../utils';
 import { AppRoute } from '@openmsupply-client/config';
-import { CustomerSearchModal } from '@openmsupply-client/system';
+import { NewRequisitionType } from '../../types';
+import { CreateRequisitionModal } from './CreateRequisitionModal';
 
 export const AppBarButtons = ({
   modalController,
@@ -30,6 +31,8 @@ export const AppBarButtons = ({
   const navigate = useNavigate();
   const { success, error } = useNotification();
   const { mutateAsync: onCreate } = useResponse.document.insert();
+  const { mutateAsync: onProgramCreate } = useResponse.document.insertProgram();
+
   const { mutateAsync, isLoading } = useResponse.document.listAll({
     key: 'createdDatetime',
     direction: 'desc',
@@ -66,29 +69,40 @@ export const AppBarButtons = ({
           {t('button.export')}
         </LoadingButton>
       </Grid>
-      <CustomerSearchModal
-        open={modalController.isOn}
+      <CreateRequisitionModal
+        isOpen={modalController.isOn}
         onClose={modalController.toggleOff}
-        onChange={async name => {
+        onCreate={async newRequisition => {
           modalController.toggleOff();
-          try {
-            await onCreate({
-              id: FnUtils.generateUUID(),
-              otherPartyId: name.id,
-            }).then(({ requisitionNumber }) => {
-              navigate(
-                RouteBuilder.create(AppRoute.Distribution)
-                  .addPart(AppRoute.CustomerRequisition)
-                  .addPart(String(requisitionNumber))
-                  .build(),
-                { replace: true }
-              );
-            });
-          } catch (e) {
-            const errorSnack = error(
-              `${t('message.failed-to-create-requisition')}: ${(e as Error).message}`
-            );
-            errorSnack();
+          switch (newRequisition.type) {
+            case NewRequisitionType.General:
+              return onCreate({
+                id: FnUtils.generateUUID(),
+                otherPartyId: newRequisition.name.id,
+              }).then(({ requisitionNumber }) => {
+                navigate(
+                  RouteBuilder.create(AppRoute.Distribution)
+                    .addPart(AppRoute.CustomerRequisition)
+                    .addPart(String(requisitionNumber))
+                    .build(),
+                  { replace: true }
+                );
+              });
+            case NewRequisitionType.Program:
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              const { type: _, ...rest } = newRequisition;
+              return onProgramCreate({
+                id: FnUtils.generateUUID(),
+                ...rest,
+              }).then(({ requisitionNumber }) => {
+                navigate(
+                  RouteBuilder.create(AppRoute.Distribution)
+                    .addPart(AppRoute.CustomerRequisition)
+                    .addPart(String(requisitionNumber))
+                    .build(),
+                  { replace: true }
+                );
+              });
           }
         }}
       />

client/packages/requisitions/src/ResponseRequisition/ListView/CreateRequisitionModal.tsx

@@ -0,0 +1,111 @@
+import React, { FC } from 'react';
+import {
+  BasicSpinner,
+  Box,
+  ModalTabs,
+  useDialog,
+  useTranslation,
+  useWindowDimensions,
+} from '@openmsupply-client/common';
+import {
+  CustomerSearchModal,
+  NameRowFragment,
+} from '@openmsupply-client/system';
+
+import { useResponse } from '../api';
+import { NewRequisitionType } from '../../types';
+import {
+  NewProgramRequisition,
+  ProgramRequisitionOptions,
+} from './ProgramRequisitionOptions';
+
+interface NewGeneralRequisition {
+  type: NewRequisitionType.General;
+  name: NameRowFragment;
+}
+
+interface CreateRequisitionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreate: (
+    newRequisition: NewGeneralRequisition | NewProgramRequisition
+  ) => void;
+}
+
+export const CreateRequisitionModal: FC<CreateRequisitionModalProps> = ({
+  isOpen,
+  onClose,
+  onCreate,
+}) => {
+  const t = useTranslation();
+  const { data: programSettings, isLoading } =
+    useResponse.utils.programSettings();
+  const { Modal } = useDialog({ isOpen, onClose, disableBackdrop: false });
+  const { height: windowHeight } = useWindowDimensions();
+  const height = windowHeight * 0.8;
+
+  const InnerComponent = () => {
+    if (isLoading) return <BasicSpinner />;
+
+    if (programSettings && programSettings.length > 0)
+      return (
+        <ModalTabs
+          tabs={[
+            {
+              Component: (
+                <ProgramRequisitionOptions
+                  onCreate={onCreate}
+                  programSettings={programSettings}
+                />
+              ),
+              value: t('label.requisition-program'),
+            },
+            {
+              Component: (
+                <GeneralRequisition
+                  onCreate={onCreate}
+                  open={isOpen}
+                  onClose={onClose}
+                />
+              ),
+              value: t('label.requisition-general'),
+            },
+          ]}
+        />
+      );
+
+    return (
+      <GeneralRequisition onCreate={onCreate} open={isOpen} onClose={onClose} />
+    );
+  };
+
+  return (
+    <Modal
+      height={height}
+      width={700}
+      slideAnimation={false}
+      title={t('label.new-requisition')}
+    >
+      <InnerComponent />
+    </Modal>
+  );
+};
+
+const GeneralRequisition = ({
+  onCreate,
+  open,
+  onClose,
+}: {
+  onCreate: (props: NewGeneralRequisition) => void;
+  open: boolean;
+  onClose: () => void;
+}) => (
+  <Box paddingTop={2}>
+    <CustomerSearchModal
+      onChange={name => onCreate({ type: NewRequisitionType.General, name })}
+      open={open}
+      onClose={onClose}
+      isList={true}
+    />
+  </Box>
+);