Merge pull request #2893 from bcgov/DEP-321-remove-default-french

DEP-321: Remove French as a required/default language

Author: NatSquared

CHANGELOG.MD

@@ -1,3 +1,9 @@
+## July 09, 2026
+
+- **Chore** Removed French as a required language for multi-language engagements [🎟️ DEP-321](https://citz-gdx.atlassian.net/browse/DEP-321)
+  - Removed French from list of required languages in front-end validation (no back-end changes were needed, as the API does not enforce any required languages).
+  - Started tracking whether the user _wants_ multiple languages (rather than just if there _are_ multiple languages), allowing us to temporarily show the language picker so that the user has time to select an additional language.
+
 ## July 07, 2026
 
 - **Feature** Added ability to upload files to Object Storage during survey submission [🎟️ DEP-277](https://citz-gdx.atlassian.net/browse/DEP-277)

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

@@ -16,11 +16,8 @@ import { ROUTES, getPath } from 'routes/routes';
 
 export const LanguageManager = () => {
     const SINGLE_LANGUAGE = [{ code: 'en', name: 'English' }] as Language[];
-    const REQUIRED_LANGUAGES = [
-        { code: 'en', name: 'English' },
-        { code: 'fr', name: 'French' },
-    ] as Language[];
-    const requiredLanguageCodes = REQUIRED_LANGUAGES.map((l) => l.code);
+    const REQUIRED_LANGUAGES = [{ code: 'en', name: 'English' }] as Language[];
+    const requiredLanguageCodes = new Set(REQUIRED_LANGUAGES.map((l) => l.code));
 
     const engagementForm = useFormContext();
     const { setValue, watch } = engagementForm;
@@ -30,10 +27,11 @@ export const LanguageManager = () => {
     const { languages: availableLanguages } = fetcherData ?? { languages: [] };
 
     const [searchTerm, setSearchTerm] = React.useState('');
+    const [wantsMultiLanguage, setWantsMultiLanguage] = React.useState<boolean>(false);
 
     const determineSingleLanguage = (languages: Language[]) => {
         if (languages.length === 0) return null;
-        if (languages.length === 1) return true;
+        if (languages.length === 1 && !wantsMultiLanguage) return true;
         return false;
     };
     const isSingleLanguage = determineSingleLanguage(selectedLanguages);
@@ -49,12 +47,12 @@ export const LanguageManager = () => {
             <RadioGroup
                 onChange={(e) => {
                     if (e.target.value === 'single') {
+                        setWantsMultiLanguage(false);
                         setValue('languages', SINGLE_LANGUAGE, { shouldDirty: true });
                     }
                     if (e.target.value === 'multi') {
-                        const optionalLanguages = selectedLanguages.filter(
-                            (l) => !requiredLanguageCodes.includes(l.code),
-                        );
+                        setWantsMultiLanguage(true);
+                        const optionalLanguages = selectedLanguages.filter((l) => !requiredLanguageCodes.has(l.code));
                         setValue('languages', [...REQUIRED_LANGUAGES, ...optionalLanguages], {
                             shouldDirty: true,
                             shouldValidate: true,
@@ -72,12 +70,12 @@ export const LanguageManager = () => {
                 <MultiSelect<Language>
                     containerProps={{ sx: { mt: 2 } }}
                     onChange={(_, language, reason) => {
+                        setWantsMultiLanguage(false);
                         if (reason === 'removeOption' && language) {
                             setValue(
                                 'languages',
-                                selectedLanguages.filter((l) => l.code !== language.code, {
-                                    shouldDirty: true,
-                                }),
+                                selectedLanguages.filter((l) => l.code !== language.code),
+                                { shouldDirty: true },
                             );
                         }
                         if (reason === 'selectOption' && language) {
@@ -109,9 +107,9 @@ export const LanguageManager = () => {
                         return (
                             <Grid container direction="row" spacing={1} alignItems="center">
                                 <Grid>
-                                    <BodyText bold={requiredLanguageCodes.includes(option.code)}>
+                                    <BodyText bold={requiredLanguageCodes.has(option.code)}>
                                         {`${option.name}`}
-                                        {requiredLanguageCodes.includes(option.code) && ' (Default)'}
+                                        {requiredLanguageCodes.has(option.code) && ' (Default)'}
                                     </BodyText>
                                 </Grid>
                             </Grid>
@@ -153,7 +151,7 @@ export const LanguageManager = () => {
                     selectedLabel={{ singular: 'Language Added', plural: 'Languages Added' }}
                     searchPlaceholder="Select Language"
                     getOptionDisabled={(option) => selectedLanguages.filter((l) => l.code === option.code).length > 0}
-                    getOptionRequired={(option) => requiredLanguageCodes.includes(option.code)}
+                    getOptionRequired={(option) => requiredLanguageCodes.has(option.code)}
                 />
             </When>
         </Box>

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

@@ -134,7 +134,7 @@ const EngagementForm = ({
                     step={4}
                     completed={isEnglishOnly || hasAdditionalLanguage}
                     question="Will your engagement be offered in multiple languages?"
-                    details="All engagements must be offered in English, but you may also add content in additional languages. If you select multi-language, you must include French."
+                    details="All engagements must be offered in English, but you may also add content in additional languages."
                     isGroup
                 >
                     <LanguageManager />

web/src/routes/AuthenticatedRoutes.tsx

@@ -143,12 +143,12 @@ const AuthenticatedRoutes = resolveLazyRouteTree(
                     <LazyRoute
                         path="config/edit"
                         handle={{ crumb: () => ({ name: 'Configuration', link: '../config' }) }}
+                        actionLazy={() => import('engagements/admin/config/EngagementUpdateAction')}
                     >
                         <LazyRoute
                             index
                             handle={{ crumb: () => ({ name: 'Edit' }) }}
                             ComponentLazy={() => import('engagements/admin/config/wizard/ConfigWizard')}
-                            actionLazy={() => import('engagements/admin/config/EngagementUpdateAction')}
                         />
                     </LazyRoute>
                     {/* Wraps the tabs with the engagement title and TabContext */}