Hotfix bug in engagement config update

Author: NatSquared

met-web/src/components/common/Layout/SystemMessage.tsx

@@ -59,7 +59,7 @@ export const SystemMessage = ({
             container
             direction="row"
             justifyContent="flex-start"
-            alignItems="flex-start"
+            alignItems="center"
             sx={{
                 maxWidth: { xs: '100%', md: '700px' },
                 borderRadius: '8px',
@@ -72,7 +72,7 @@ export const SystemMessage = ({
                 ...props.sx,
             }}
         >
-            <Grid sx={{ pr: 1, mt: -0.5, fontSize: '18px' }}>
+            <Grid sx={{ pr: 1, fontSize: '18px' }}>
                 <StatusIcon status={status} color={color} />
             </Grid>
             <Grid sx={{ width: '100%', maxWidth: { xs: '100%', md: '600px', fontSize: '14px' } }}>{children}</Grid>

met-web/src/components/engagement/admin/config/EngagementUpdateAction.tsx

@@ -1,24 +1,38 @@
+import axios from 'axios';
 import { ENGAGEMENT_MEMBERSHIP_STATUS } from 'models/engagementTeamMember';
 import { ActionFunction, redirect } from 'react-router';
-import { patchEngagement } from 'services/engagementService';
+import { ApiErrorBody, patchEngagement } from 'services/engagementService';
 import { patchEngagementSlug } from 'services/engagementSlugService';
+import { openNotification } from 'services/notificationService/notificationSlice';
 import {
     addTeamMemberToEngagement,
     revokeMembership,
     reinstateMembership,
     getTeamMembers,
 } from 'services/membershipService';
+import { store } from 'store';
 
 export const engagementUpdateAction: ActionFunction = async ({ request, params }) => {
     const formData = (await request.formData()) as FormData;
     const engagementId = Number(params.engagementId);
-    await patchEngagement({
-        id: engagementId,
-        name: formData.get('name') as string,
-        start_date: formData.get('start_date') as string,
-        end_date: formData.get('end_date') as string,
-        is_internal: formData.get('is_internal') === 'true',
-    });
+    try {
+        await patchEngagement({
+            id: engagementId,
+            name: formData.get('name') as string,
+            start_date: formData.get('start_date') as string,
+            end_date: formData.get('end_date') as string,
+            is_internal: formData.get('is_internal') === 'true',
+        });
+    } catch (e) {
+        const message = axios.isAxiosError<ApiErrorBody>(e)
+            ? typeof e.response?.data === 'string'
+                ? e.response.data
+                : (e.response?.data?.message ?? 'Failed to update engagement')
+            : 'Failed to update engagement';
+        console.error('Error updating engagement:', e);
+        store.dispatch(openNotification({ severity: 'error', text: message }));
+        return { status: 'failure' };
+    }
     try {
         await patchEngagementSlug({
             engagement_id: engagementId,

met-web/src/components/engagement/admin/config/LanguageManager.tsx

@@ -25,7 +25,7 @@ export const LanguageManager = () => {
     const engagementForm = useFormContext();
     const { setValue, watch } = engagementForm;
     const selectedLanguages = watch('languages') as Language[];
-    const fetcher = useFetcher();
+    const fetcher = useFetcher({ key: 'language-loader' });
     const fetcherData = fetcher.data as Awaited<LanguageLoaderData>;
     const { languages: availableLanguages } = fetcherData ?? { languages: [] };
 

met-web/src/components/engagement/admin/config/UserManager.tsx

@@ -13,7 +13,7 @@ import MultiSelect from './MultiSelect';
 
 export const UserManager = () => {
     const currentUser = useAppSelector((state) => state.user);
-    const fetcher = useFetcher();
+    const fetcher = useFetcher({ key: 'user-search' });
 
     const engagementForm = useFormContext();
     const { setValue, watch } = engagementForm;

met-web/src/components/engagement/admin/config/wizard/ConfigWizard.tsx

@@ -1,6 +1,6 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { ResponsiveContainer } from 'components/common/Layout';
-import { useFetcher, createSearchParams, useRouteLoaderData, Await, useAsyncValue, useNavigation } from 'react-router';
+import { useFetcher, createSearchParams, useRouteLoaderData, Await, useAsyncValue } from 'react-router';
 import { FormProvider, useForm } from 'react-hook-form';
 import { AutoBreadcrumbs } from 'components/common/Navigation/Breadcrumb';
 import EngagementForm, { EngagementConfigurationData } from '.';
@@ -13,6 +13,8 @@ import { Language } from 'models/language';
 import { CircularProgress, Grid2 as Grid, Modal, Skeleton } from '@mui/material';
 import { modalStyle } from 'components/common';
 
+type ConfigUpdateFetcherData = { status?: 'failure' };
+
 const EngagementConfigurationWizard = () => {
     const { engagement, teamMembers, slug } = useRouteLoaderData('single-engagement') as EngagementLoaderAdminData;
     return (
@@ -43,9 +45,8 @@ const EngagementConfigurationWizard = () => {
 };
 
 const ConfigForm = () => {
+    const fetcher = useFetcher<ConfigUpdateFetcherData>({ key: 'config-update' });
     const [engagement, teamMembers, slug] = useAsyncValue() as [Engagement, EngagementTeamMember[], string];
-    const fetcher = useFetcher();
-    const navigation = useNavigation();
 
     const engagementConfigForm = useForm<EngagementConfigurationData>({
         defaultValues: {
@@ -65,7 +66,7 @@ const ConfigForm = () => {
     });
 
     const onSubmit = async (data: EngagementConfigurationData) => {
-        fetcher.submit(
+        await fetcher.submit(
             createSearchParams({
                 name: data.name,
                 feedback_methods: data.feedback_methods,
@@ -84,17 +85,22 @@ const ConfigForm = () => {
     };
 
     const {
-        formState: { isSubmitting, isSubmitted },
+        getValues,
+        reset,
+        formState: { isSubmitting, isSubmitted, defaultValues },
     } = engagementConfigForm;
 
+    useEffect(() => {
+        if (fetcher.state === 'idle' && fetcher.data?.status === 'failure') {
+            // Keep entered field values but clear submit state so the modal can close.
+            reset(defaultValues, { keepValues: true, keepDirty: false, keepSubmitCount: false });
+        }
+    }, [fetcher.state, fetcher.data, getValues, reset]);
+
     return (
         <FormProvider {...engagementConfigForm}>
             <EngagementForm onSubmit={onSubmit} />
-            <Modal
-                open={
-                    isSubmitting || isSubmitted || fetcher.state === 'submitting' || navigation.state === 'submitting'
-                }
-            >
+            <Modal open={isSubmitting || isSubmitted}>
                 <Grid
                     container
                     direction="row"

met-web/src/components/engagement/admin/config/wizard/CreationWizard.tsx

@@ -9,7 +9,7 @@ import { SystemMessage } from 'components/common/Layout/SystemMessage';
 import Grid from '@mui/material/Grid2';
 
 const EngagementCreationWizard = () => {
-    const fetcher = useFetcher();
+    const fetcher = useFetcher({ key: 'config-update' });
 
     const engagementCreationForm = useForm<EngagementConfigurationData>({
         defaultValues: {

met-web/src/components/engagement/admin/config/wizard/index.tsx

@@ -47,7 +47,7 @@ const EngagementForm = ({
         control,
         handleSubmit,
         watch,
-        formState: { errors, isDirty, isValid, isSubmitting, touchedFields },
+        formState: { errors, isDirty, isValid, isSubmitting, isSubmitted, touchedFields },
     } = engagementForm;
 
     const [nameHasBeenEdited, setNameHasBeenEdited] = useState(false);
@@ -144,6 +144,7 @@ const EngagementForm = ({
                         !isValid ||
                         !isDirty ||
                         isSubmitting ||
+                        isSubmitted ||
                         !watch('_dateConfirmed') ||
                         !watch('_visibilityConfirmed')
                     }

met-web/src/components/engagement/widgets/Subscribe/SubscribeWidget.tsx

@@ -11,13 +11,13 @@ import EmailListSection from './EmailListSection';
 import EmailListModal from './EmailListModal';
 import FormSignUpSection from './FormSignUpSection';
 import { Header2 } from 'components/common/Typography';
-import { useRouteLoaderData } from 'react-router';
+import { useLoaderData } from 'react-router';
 import { EngagementLoaderPublicData } from 'engagements/public/view';
 import { BaseTheme } from 'styles/Theme';
 
 const SubscribeWidget = ({ widget }: { widget: Widget }) => {
     const dispatch = useAppDispatch();
-    const { widgets } = useRouteLoaderData('single-engagement') as EngagementLoaderPublicData;
+    const { widgets } = useLoaderData() as EngagementLoaderPublicData;
     const [open, setOpen] = useState(false);
     const [subscribeItems, setSubscribeItems] = useState<SubscribeForm[]>([]);
     const [isLoadingSubscribeItems, setIsLoadingSubscribeItems] = useState(true);

met-web/src/styles/Theme.tsx

@@ -261,7 +261,7 @@ export const BaseTheme = createTheme({
             styleOverrides: {
                 root: {
                     backgroundColor: Palette.background.paper,
-                    borderRadius: '1rem',
+                    borderRadius: '8px',
                     backgroundImage: 'none',
                 },
             },
@@ -280,10 +280,29 @@ export const BaseTheme = createTheme({
                     style: {
                         backgroundColor: 'white',
                         borderRadius: '8px',
+                        transition: 'box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                        '&:hover, &:has(:focus), &:has(:focus-visible)': {
+                            backgroundColor: 'color-mix(in srgb, white, black 20%)',
+                            boxShadow: elevations.hover,
+                        },
+                        '&:has(:focus-visible)': {
+                            backgroundColor: 'color-mix(in srgb, white, black 20%)',
+                            outline: `2px solid ${Palette.focus.outer}`,
+                            boxShadow: `0 0 0 2px ${Palette.focus.inner} inset,${elevations.hover}`,
+                        },
+                        '&:has(:active)': {
+                            backgroundColor: 'color-mix(in srgb, white, black 20%)',
+                            boxShadow: elevations.pressed,
+                        },
+                        '&.Mui-disabled, &:has(:disabled)': {
+                            backgroundColor: colors.surface.gray[10],
+                            color: colors.type.regular.disabled,
+                        },
                     },
                 },
             ],
             defaultProps: {
+                disableUnderline: true,
                 IconComponent: CustomSelectIcon,
                 MenuProps: {
                     sx: {