feat: [DHIS2-15212][DHIS2-15214][DHIS2-15216] Referral widget actions (…

…#3458)

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-10-30T08:21:47.926Z\n"
-"PO-Revision-Date: 2023-10-30T08:21:47.926Z\n"
+"POT-Creation-Date: 2023-11-04T16:21:37.396Z\n"
+"PO-Revision-Date: 2023-11-04T16:21:37.396Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1329,12 +1329,32 @@ msgstr "Edit"
 msgid "tracked entity instance"
 msgstr "tracked entity instance"
 
+msgid "Link to an existing {{referralProgramStageLabel}}"
+msgstr "Link to an existing {{referralProgramStageLabel}}"
+
+msgid "Choose a {{referralProgramStageLabel}}"
+msgstr "Choose a {{referralProgramStageLabel}}"
+
 msgid "Referral actions"
 msgstr "Referral actions"
 
 msgid "Ambiguous referrals, contact system administrator"
 msgstr "Ambiguous referrals, contact system administrator"
 
+msgid ""
+"Enter {{referralProgramStageLabel}} details in the next step after "
+"completing this {{currentStageLabel}}."
+msgstr ""
+"Enter {{referralProgramStageLabel}} details in the next step after "
+"completing this {{currentStageLabel}}."
+
+msgid ""
+"This {{currentStageLabel}} will be created without a link to "
+"{{referralProgramStageLabel}}"
+msgstr ""
+"This {{currentStageLabel}} will be created without a link to "
+"{{referralProgramStageLabel}}"
+
 msgid "Schedule in {{displayName}}"
 msgstr "Schedule in {{displayName}}"
 
@@ -1350,6 +1370,12 @@ msgstr "Don't link to a {{displayName}}"
 msgid "Scheduled date"
 msgstr "Scheduled date"
 
+msgid "Report date"
+msgstr "Report date"
+
+msgid "Please select a valid event"
+msgstr "Please select a valid event"
+
 msgid "New {{ eventName }} event"
 msgstr "New {{ eventName }} event"
 

src/core_modules/capture-core/components/DataEntry/CancelButton.component.js

@@ -7,6 +7,7 @@ import { defaultDialogProps } from '../Dialogs/DiscardDialog.constants';
 
 type Props = {
     dataEntryHasChanges: boolean,
+    disabled: boolean,
     onCancel: () => void,
 }
 
@@ -36,6 +37,7 @@ export class CancelButtonComponent extends React.Component<Props, State> {
             <div>
                 <Button
                     onClick={this.handleCancel}
+                    disabled={this.props.disabled}
                     secondary
                 >
                     { i18n.t('Cancel') }

src/core_modules/capture-core/components/DataEntry/withCancelButton.js

@@ -5,6 +5,7 @@ import { CancelButton } from './CancelButton.container';
 type Props = {
     id: string,
     onCancel: () => void,
+    cancelButtonIsDisabled?: boolean,
     cancelButtonRef?: ?Function,
 };
 
@@ -22,7 +23,7 @@ const getCancelButton = (InnerComponent: React.ComponentType<any>, optionsFn?: ?
         getWrappedInstance = () => this.innerInstance;
 
         render() {
-            const { onCancel, cancelButtonRef, ...passOnProps } = this.props;
+            const { onCancel, cancelButtonIsDisabled, cancelButtonRef, ...passOnProps } = this.props;
             const options = (optionsFn && optionsFn(this.props)) || {};
 
             return (
@@ -34,6 +35,7 @@ const getCancelButton = (InnerComponent: React.ComponentType<any>, optionsFn?: ?
                             id={this.props.id}
                             onCancel={onCancel}
                             options={options}
+                            disabled={cancelButtonIsDisabled}
                         />
                     }
                     {...passOnProps}

src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/EnrollmentAddEventPage.epics.js

@@ -6,20 +6,91 @@ import {
     addEnrollmentEventPageDefaultActionTypes,
 } from './EnrollmentAddEventPageDefault/EnrollmentAddEventPageDefault.actions';
 import {
+    addPersistedEnrollmentEvents,
     commitEnrollmentEvents,
     rollbackEnrollmentEvents,
     saveFailed,
 } from '../common/EnrollmentOverviewDomain/enrollment.actions';
+import { actions as ReferralActions } from '../../WidgetReferral/constants';
+import { buildUrlQueryString } from '../../../utils/routing';
 
-export const saveNewEventSucceededEpic = (action$: InputObservable) =>
+const shouldNavigateWithReferral = ({
+    referralMode,
+    referralEventId,
+    referralOrgUnitId,
+    history,
+}) => {
+    if (referralMode && referralEventId) {
+        if (referralMode === ReferralActions.ENTER_DATA) {
+            const navigate = () => history.push(`/enrollmentEventEdit?${buildUrlQueryString({
+                eventId: referralEventId,
+                orgUnitId: referralOrgUnitId,
+            })}`);
+            return { navigate };
+        }
+    }
+    return {};
+};
+
+export const saveNewEventSucceededEpic = (action$: InputObservable, state: ReduxStore, { history }: ApiUtils) =>
     action$.pipe(
         ofType(
             addEnrollmentEventPageDefaultActionTypes.EVENT_SAVE_SUCCESS,
             addEnrollmentEventPageDefaultActionTypes.EVENT_SCHEDULE_SUCCESS,
         ),
         map((action) => {
-            const events = action.payload.bundleReport.typeReportMap.EVENT.objectReports;
-            return commitEnrollmentEvents({ events });
+            const actions = [];
+            const { enrollmentDomain } = state.value;
+            const eventsFromApi = action.payload.bundleReport.typeReportMap.EVENT.objectReports;
+            const serverDataEvents = action.meta.serverData.events;
+            const enrollmentEvents = enrollmentDomain.enrollment.events;
+
+            const { eventsToCommit, eventsToAdd } = serverDataEvents.reduce((acc, event) => {
+                const eventFromRedux = enrollmentEvents.find(e => e.event === event.event);
+
+                if (!eventFromRedux) {
+                    acc.eventsToAdd.push(event);
+                } else if (eventFromRedux.pendingApiResponse) {
+                    const eventToCommit = eventsFromApi.find(e => e.uid === event.event);
+                    acc.eventsToCommit.push(eventToCommit);
+                }
+                return acc;
+            }, { eventsToCommit: [], eventsToAdd: [] });
+
+            if (eventsToAdd.length > 0) {
+                actions.push(
+                    addPersistedEnrollmentEvents({ events: eventsToAdd }),
+                );
+            }
+
+            if (eventsToCommit.length > 0) {
+                actions.push(
+                    commitEnrollmentEvents({ events: eventsToCommit }),
+                );
+            }
+
+            if (enrollmentDomain.eventSaveInProgress) {
+                const {
+                    referralMode,
+                    requestEventId,
+                    referralEventId,
+                    referralOrgUnitId,
+                } = enrollmentDomain.eventSaveInProgress;
+                const requestEvent = eventsFromApi.find(event => event.uid === requestEventId);
+
+                if (requestEvent) {
+                    const { navigate } = shouldNavigateWithReferral({
+                        referralMode,
+                        referralEventId,
+                        referralOrgUnitId,
+                        history,
+                    });
+
+                    navigate && navigate();
+                }
+            }
+
+            return batchActions(actions);
         }),
     );
 

src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/EnrollmentAddEventPageDefault/EnrollmentAddEventPageDefault.container.js

@@ -12,6 +12,7 @@ import { useProgramInfo } from '../../../../hooks/useProgramInfo';
 import { useEnrollmentAddEventTopBar, EnrollmentAddEventTopBar } from '../TopBar';
 import { EnrollmentAddEventPageDefaultComponent } from './EnrollmentAddEventPageDefault.component';
 import { deleteEnrollment, fetchEnrollments } from '../../Enrollment/EnrollmentPage.actions';
+import { actions as ReferralModes } from '../../../WidgetReferral/constants';
 
 import { useWidgetDataFromStore } from '../hooks';
 import {
@@ -38,7 +39,9 @@ export const EnrollmentAddEventPageDefault = ({
     }, [history, programId, orgUnitId, teiId, enrollmentId]);
 
     const handleSave = useCallback(
-        ({ events }) => {
+        ({ events, referralMode }) => {
+            if (referralMode && referralMode === ReferralModes.ENTER_DATA) return;
+
             const nowClient = fromClientDate(new Date());
             const nowServer = new Date(nowClient.getServerZonedISOString());
             const updatedAt = moment(nowServer).format('YYYY-MM-DDTHH:mm:ss');
@@ -51,7 +54,7 @@ export const EnrollmentAddEventPageDefault = ({
             dispatch(addEnrollmentEvents({ events: eventsWithUpdatedDate }));
             history.push(`enrollment?${buildUrlQueryString({ programId, orgUnitId, teiId, enrollmentId })}`);
         },
-        [dispatch, history, programId, orgUnitId, teiId, enrollmentId, fromClientDate],
+        [fromClientDate, dispatch, history, programId, orgUnitId, teiId, enrollmentId],
     );
     const handleAddNew = useCallback(() => {
         history.push(`/new?${buildUrlQueryString({ programId, orgUnitId, teiId })}`);

src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/enrollment.actions.js

@@ -15,6 +15,7 @@ export const enrollmentSiteActionTypes = {
     COMMIT_ENROLLMENT_EVENTS: 'Enrollment.CommitEnrollmentEvents',
     SAVE_FAILED: 'Enrollment.SaveFailed',
     ERROR_ENROLLMENT: 'Enrollment.ErrorEnrollment',
+    ADD_PERSISTED_ENROLLMENT_EVENTS: 'Enrollment.AddPersistedEnrollmentEvents',
 };
 
 export const setCommonEnrollmentSiteData = (enrollment: ApiEnrollment, attributeValues: ApiAttributeValues) =>
@@ -66,3 +67,6 @@ export const showEnrollmentError = ({ message }: { message: string }) =>
     actionCreator(enrollmentSiteActionTypes.ERROR_ENROLLMENT)({
         message,
     });
+
+export const addPersistedEnrollmentEvents = ({ events }: EventReducerProps) =>
+    actionCreator(enrollmentSiteActionTypes.ADD_PERSISTED_ENROLLMENT_EVENTS)({ events });

src/core_modules/capture-core/components/WidgetEnrollmentEventNew/FinishButtons/FinishButtons.component.js

@@ -17,15 +17,27 @@ const styles = {
     },
 };
 
-const FinishButtonsPlain = ({ onSave, cancelButton, classes }: Props) => (
+const FinishButtonsPlain = ({
+    onSave,
+    cancelButton,
+    isLoading,
+    classes,
+}: Props) => (
     <div className={classes.container}>
         <div className={classes.button}>
-            <Button onClick={() => onSave(addEventSaveTypes.COMPLETE)} primary>
+            <Button
+                onClick={() => onSave(addEventSaveTypes.COMPLETE)}
+                primary
+                loading={isLoading}
+            >
                 {i18n.t('Complete')}
             </Button>
         </div>
         <div className={classes.button}>
-            <Button onClick={() => onSave(addEventSaveTypes.SAVE_WITHOUT_COMPLETING)}>
+            <Button
+                onClick={() => onSave(addEventSaveTypes.SAVE_WITHOUT_COMPLETING)}
+                disabled={isLoading}
+            >
                 {i18n.t('Save without completing')}
             </Button>
         </div>

src/core_modules/capture-core/components/WidgetEnrollmentEventNew/FinishButtons/finishButtons.types.js

@@ -5,11 +5,14 @@ import { typeof addEventSaveTypes } from '../DataEntry/addEventSaveTypes';
 export type InputProps = {|
     onSave: (saveType: $Keys<addEventSaveTypes>) => void,
     onCancel: () => void,
+    isLoading: ?boolean,
+    cancelButtonIsDisabled?: boolean,
     id: string,
 |};
 
 export type Props = {|
     onSave: (saveType: $Keys<addEventSaveTypes>) => void,
     cancelButton: Element<any>,
+    isLoading: ?boolean,
     ...CssClasses,
 |};

src/core_modules/capture-core/components/WidgetEnrollmentEventNew/Validated/Validated.component.js

@@ -20,6 +20,8 @@ const ValidatedPlain = ({
     stage,
     programName,
     programId,
+    enrollmentId,
+    eventSaveInProgress,
     formFoundation,
     classes,
     referralRef,
@@ -47,12 +49,16 @@ const ValidatedPlain = ({
                 />
                 <WidgetReferral
                     ref={referralRef}
+                    enrollmentId={enrollmentId}
                     programId={programId}
                     programStageId={stage?.id}
+                    currentStageLabel={stage.name}
                 />
                 <FinishButtons
                     onSave={onSave}
                     onCancel={onCancel}
+                    isLoading={eventSaveInProgress}
+                    cancelButtonIsDisabled={eventSaveInProgress}
                     id={id}
                 />
                 <SavingText programName={programName} stageName={stage.name} orgUnitName={orgUnit.name} />