[TO MAIN] DESENG-507 - Engagement save enhancements (#2409)

* Update save on engagement form (#2401)

CHANGELOG.MD

@@ -1,3 +1,9 @@
+## March 04, 2024
+- **Task**Engagement "save" enhancements [DESENG-507](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-507)
+    - The existing "Save" button in the floating bar has been split into two distinct actions: "Save and Continue" and "Save and Exit".
+    - Tabs are greyed out, and widgets are disabled until the engagement is successfully saved. A helpful tool-tip has been added to inform users that the engagement needs to be saved before accessing certain features.
+    - Independent save buttons previously present in tabs, such as "Additional Details", "Settings" have been removed. Now, the floating save bar is universally employed when editing an engagement.
+
 ## March 04, 2024
 - **Task**Multi-language - Create language table & API [DESENG-509](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-509)
     - Added Language model.

met-web/src/components/engagement/form/ActionContext.tsx

@@ -34,6 +34,9 @@ export const ActionContext = createContext<EngagementContext>({
         return Promise.reject();
     },
     isSaving: false,
+    setSaving: () => {
+        /* empty default method  */
+    },
     savedEngagement: createDefaultEngagement(),
     engagementMetadata: createDefaultEngagementMetadata(),
     engagementId: CREATE,
@@ -48,6 +51,10 @@ export const ActionContext = createContext<EngagementContext>({
         /* empty default method  */
     },
     loadingAuthorization: true,
+    isNewEngagement: true,
+    setIsNewEngagement: () => {
+        /* empty default method  */
+    },
 });
 
 export const ActionProvider = ({ children }: { children: JSX.Element }) => {
@@ -62,6 +69,7 @@ export const ActionProvider = ({ children }: { children: JSX.Element }) => {
     const [loadingAuthorization, setLoadingAuthorization] = useState(true);
 
     const [savedEngagement, setSavedEngagement] = useState<Engagement>(createDefaultEngagement());
+    const [isNewEngagement, setIsNewEngagement] = useState(!savedEngagement.id);
     const [engagementMetadata, setEngagementMetadata] = useState<EngagementMetadata>({
         ...createDefaultEngagementMetadata(),
     });
@@ -113,6 +121,7 @@ export const ActionProvider = ({ children }: { children: JSX.Element }) => {
     };
     const setEngagement = (engagement: Engagement) => {
         setSavedEngagement({ ...engagement });
+        setIsNewEngagement(!savedEngagement.id);
         setSavedBannerImageFileName(engagement.banner_filename);
 
         if (bannerImage) setBannerImage(null);
@@ -166,6 +175,7 @@ export const ActionProvider = ({ children }: { children: JSX.Element }) => {
                 banner_filename: uploadedBannerImageFileName,
             });
 
+            setEngagement(result);
             dispatch(openNotification({ severity: 'success', text: 'Engagement has been created' }));
             setSaving(false);
             return Promise.resolve(result);
@@ -209,7 +219,7 @@ export const ActionProvider = ({ children }: { children: JSX.Element }) => {
 
             const updatedEngagement = await patchEngagement({
                 ...engagementEditsToPatch,
-                id: Number(engagementId),
+                id: Number(savedEngagement.id),
                 status_block: engagement.status_block?.filter((_, index) => {
                     return engagementEditsToPatch.status_block?.[index];
                 }),
@@ -243,6 +253,7 @@ export const ActionProvider = ({ children }: { children: JSX.Element }) => {
                 handleCreateEngagementMetadataRequest,
                 handleUpdateEngagementMetadataRequest,
                 isSaving,
+                setSaving,
                 savedEngagement,
                 engagementMetadata,
                 engagementId,
@@ -251,6 +262,8 @@ export const ActionProvider = ({ children }: { children: JSX.Element }) => {
                 fetchEngagement,
                 fetchEngagementMetadata,
                 loadingAuthorization,
+                isNewEngagement,
+                setIsNewEngagement,
             }}
         >
             {children}

met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx

@@ -5,12 +5,12 @@ import ConsentMessage from './ConsentMessage';
 import EngagementInformation from './EngagementInformation';
 import { EngagementTabsContext } from '../EngagementTabsContext';
 import { ActionContext } from '../../ActionContext';
-import { AdditionalDetailsContext } from './AdditionalDetailsContext';
 
 const AdditionalTabContent = () => {
-    const { handleSaveAdditional, updatingAdditional } = useContext(AdditionalDetailsContext);
     const { isSaving } = useContext(ActionContext);
-    const { handleSaveEngagement, handlePreviewEngagement } = useContext(EngagementTabsContext);
+
+    const { handleSaveAndContinueEngagement, handleSaveAndExitEngagement, handlePreviewEngagement } =
+        useContext(EngagementTabsContext);
 
     return (
         <MetPaper elevation={1}>
@@ -31,31 +31,34 @@ const AdditionalTabContent = () => {
                 <Grid item xs={12}>
                     <ConsentMessage />
                 </Grid>
-                <Grid item xs={12}>
-                    <PrimaryButton loading={updatingAdditional} onClick={handleSaveAdditional}>
-                        Save
-                    </PrimaryButton>
-                </Grid>
                 <Box
                     position="sticky"
                     bottom={0}
                     width="100%"
+                    marginLeft={2}
                     borderTop="1px solid #ddd"
                     padding={2}
                     marginTop={2}
-                    marginLeft={2}
                     zIndex={1000}
                     boxShadow="0px 0px 5px rgba(0, 0, 0, 0.1)"
                     sx={{ backgroundColor: 'white' }}
                 >
                     <Grid item xs={12}>
                         <PrimaryButton
                             sx={{ marginRight: 1 }}
-                            data-testid="create-engagement-button"
-                            onClick={() => handleSaveEngagement()}
+                            data-testid="save-engagement-button"
+                            onClick={() => handleSaveAndContinueEngagement()}
+                            loading={isSaving}
+                        >
+                            Save and Continue
+                        </PrimaryButton>
+                        <PrimaryButton
+                            sx={{ marginRight: 1 }}
+                            data-testid="save-and-exit-engagement-button"
+                            onClick={() => handleSaveAndExitEngagement()}
                             loading={isSaving}
                         >
-                            Save
+                            Save and Exit
                         </PrimaryButton>
                         <SecondaryButton
                             data-testid="preview-engagement-button"

met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/ConsentMessage.tsx

@@ -1,26 +1,38 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Box, Grid } from '@mui/material';
 import { MetHeader4 } from 'components/common';
-import { AdditionalDetailsContext } from './AdditionalDetailsContext';
+import { EngagementTabsContext } from '../EngagementTabsContext';
 import RichTextEditor from 'components/common/RichTextEditor';
+import { ActionContext } from '../../ActionContext';
 
 const ConsentMessage = () => {
-    const { initialConsentMessage, setConsentMessage } = useContext(AdditionalDetailsContext);
+    const { savedEngagement } = useContext(ActionContext);
+    const { engagementFormData, setEngagementFormData, richConsentMessage, setRichConsentMessage } =
+        useContext(EngagementTabsContext);
+    const [initialRichConsentMessage, setInitialRichConsentMessage] = useState('');
 
     const handleRichContentChange = (newState: string) => {
-        setConsentMessage(newState);
+        setRichConsentMessage(newState);
+        setEngagementFormData({
+            ...engagementFormData,
+            consent_message: newState,
+        });
     };
 
+    useEffect(() => {
+        setInitialRichConsentMessage(richConsentMessage || savedEngagement.consent_message);
+    }, []);
+
     return (
-        <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start" spacing={1}>
+        <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start" spacing={1} mt={1}>
             <Grid item xs={12} mt={1}>
                 <MetHeader4 bold>Collection Notice/Consent Message</MetHeader4>
             </Grid>
             <Grid item xs={12}>
                 <Box display="flex" flexDirection="column" justifyContent="space-between">
                     <RichTextEditor
                         handleEditorStateChange={handleRichContentChange}
-                        initialRawEditorState={initialConsentMessage || ''}
+                        initialRawEditorState={initialRichConsentMessage || ''}
                     />
                 </Box>
             </Grid>

met-web/src/components/engagement/form/EngagementFormTabs/EngagementForm.tsx

@@ -11,16 +11,15 @@ import { ENGAGEMENT_CROPPER_ASPECT_RATIO, ENGAGEMENT_UPLOADER_HEIGHT } from './c
 import RichTextEditor from 'components/common/RichTextEditor';
 import { getTextFromDraftJsContentState } from 'components/common/RichTextEditor/utils';
 
-const CREATE = 'create';
 const EngagementForm = () => {
-    const { isSaving, savedEngagement, handleAddBannerImage } = useContext(ActionContext);
+    const { isSaving, savedEngagement, handleAddBannerImage, setIsNewEngagement } = useContext(ActionContext);
 
     const {
         engagementFormData,
         setEngagementFormData,
-        setIsNewEngagement,
-        handleSaveEngagement,
+        handleSaveAndContinueEngagement,
         handlePreviewEngagement,
+        handleSaveAndExitEngagement,
         richDescription,
         setRichDescription,
         richContent,
@@ -35,18 +34,19 @@ const EngagementForm = () => {
 
     const [isOpen, setIsOpen] = useState(false);
 
-    const isCreateEngagement = window.location.pathname.includes(CREATE);
-
     const { name, start_date, end_date } = engagementFormData;
 
     useEffect(() => {
         const initialDescription = getTextFromDraftJsContentState(richDescription || savedEngagement.rich_description);
         setInitialRichDescription(richDescription || savedEngagement.rich_description);
         setInitialRichContent(richContent || savedEngagement.rich_content);
         setDescriptionCharCount(initialDescription.length);
-        setIsNewEngagement(isCreateEngagement);
     }, []);
 
+    useEffect(() => {
+        setIsNewEngagement(!savedEngagement.id || savedEngagement.id === 0);
+    }, [savedEngagement]);
+
     const getErrorMessage = () => {
         if (name.length > 50) {
             return 'Name must not exceed 50 characters';
@@ -259,10 +259,18 @@ const EngagementForm = () => {
                         <PrimaryButton
                             sx={{ marginRight: 1 }}
                             data-testid="save-engagement-button"
-                            onClick={() => handleSaveEngagement()}
+                            onClick={() => handleSaveAndContinueEngagement()}
+                            loading={isSaving}
+                        >
+                            Save and Continue
+                        </PrimaryButton>
+                        <PrimaryButton
+                            sx={{ marginRight: 1 }}
+                            data-testid="save-and-exit-engagement-button"
+                            onClick={() => handleSaveAndExitEngagement()}
                             loading={isSaving}
                         >
-                            Save
+                            Save and Exit
                         </PrimaryButton>
                         <SecondaryButton
                             data-testid="preview-engagement-button"