5177 allow user to create program manual requisitions

client/packages/common/src/intl/locales/en/common.json

@@ -794,13 +794,14 @@
   "label.new-contact-trace": "Add Contact",
   "label.new-encounter": "New Encounter",
   "label.new-functional-status": "New functional status",
+  "label.new-internal-order": "New Order",
   "label.new-location": "New Location",
   "label.new-num-packs": "New number of packs",
   "label.new-pack-qty": "New Pack Qty",
   "label.new-pack-size": "New pack size",
   "label.new-pack-variant": "New Pack Variant",
   "label.new-patient": "New Patient",
-  "label.new-requisition": "New Order",
+  "label.new-requisition": "New Requisition",
   "label.new-rnr-form": "New R&R Form",
   "label.new-row": "New Row",
   "label.new-stocktake": "New Stocktake",

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

@@ -4,7 +4,6 @@ import {
   ModalTabs,
   useDialog,
   useTranslation,
-  useWindowDimensions,
 } from '@openmsupply-client/common';
 
 import {
@@ -17,7 +16,7 @@ import {
   NewProgramRequisition,
   ProgramRequisitionOptions,
 } from './ProgramRequisitionOptions';
-import { NewRequisitionType } from './types';
+import { NewRequisitionType } from '../../types';
 
 interface NewGeneralRequisition {
   type: NewRequisitionType.General;
@@ -40,8 +39,6 @@ export const CreateRequisitionModal: FC<CreateRequisitionModalProps> = ({
   const { data: programSettings, isLoading } =
     useRequest.utils.programSettings();
   const { Modal } = useDialog({ isOpen, onClose, disableBackdrop: false });
-  const { height: windowHeight } = useWindowDimensions();
-  const height = windowHeight * 0.8;
 
   // const { data, isLoading } = useName.document.internalSuppliers();
   const t = useTranslation();
@@ -76,10 +73,10 @@ export const CreateRequisitionModal: FC<CreateRequisitionModalProps> = ({
 
   return (
     <Modal
-      height={height}
-      width={500}
+      height={700}
+      width={700}
       slideAnimation={false}
-      title={t('label.new-requisition')}
+      title={t('label.new-internal-order')}
     >
       <InnerComponent />
     </Modal>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
   Autocomplete,
   AutocompleteProps,
@@ -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;
@@ -44,14 +44,16 @@ const useProgramRequisitionOptions = (
   const [period, setPeriod] = useState<Period | null>(null);
   const t = useTranslation();
 
-  useEffect(() => {
+  const handleSetProgram = (value: ProgramSetting | null) => {
+    setProgram(value);
     setOrderType(null);
     setSupplier(null);
-  }, [program]);
-
-  useEffect(() => {
     setPeriod(null);
-  }, [orderType]);
+  };
+  const handleSetOrderType = (value: OrderType | null) => {
+    setOrderType(value);
+    setPeriod(null);
+  };
 
   const allOptions: {
     programs: Common<ProgramSetting>;
@@ -62,14 +64,14 @@ const useProgramRequisitionOptions = (
     programs: {
       options: programSettings,
       value: program,
-      set: setProgram,
+      set: handleSetProgram,
       label: t('label.program'),
       disabled: false,
     },
     orderTypes: {
       options: program?.orderTypes || [],
       value: orderType,
-      set: setOrderType,
+      set: handleSetOrderType,
       disabled: program === null,
       labelNoOptions: t('messages.not-configured'),
       label: t('label.order-type'),

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 }
+                );
+              });
           }
         }}
       />