fix(account-creation): add subsidiary info to language selection

ref: #MANAGER-20902

Signed-off-by: Dustin Kroger <dustin.kroger.ext@ovhcloud.com>

Author: aottr

packages/manager/apps/account-creation/src/data/hooks/settings/useSettings.spec.tsx

@@ -109,7 +109,7 @@ describe('useSettings', () => {
   });
 
   describe('useLanguageSettings', () => {
-    it('should give a list of unique languages available for the given country', async () => {
+    it('should give a list of unique languages with subsidiary available for the given country', async () => {
       getSettingsApiSpy.mockImplementationOnce(() =>
         Promise.resolve(mockedGetSettingsApiResult),
       );
@@ -118,7 +118,10 @@ describe('useSettings', () => {
       });
 
       await waitFor(() => {
-        expect(result.current.data).toStrictEqual(['fr-FR', 'en-IE']);
+        expect(result.current.data).toStrictEqual([
+          { ietfLanguageTag: 'fr-FR', ovhSubsidiary: 'FR' },
+          { ietfLanguageTag: 'en-IE', ovhSubsidiary: 'IE' },
+        ]);
       });
     });
     it('should give an empty list of languages if no country is given', async () => {

packages/manager/apps/account-creation/src/data/hooks/settings/useSettings.ts

@@ -48,30 +48,38 @@ export const useCurrencySettings = (country?: string) =>
     );
   });
 
+export type LanguageOption = {
+  ietfLanguageTag: SupportLanguage;
+  ovhSubsidiary: string;
+};
+
 export const useLanguageSettings = (country?: string, currency?: string) =>
   useSettingsQuery((settings) => {
     if (!(country && currency)) return [];
-
+    const seen = new Set<SupportLanguage>();
     return (
-      settings
-        .get(country)
-        ?.reduce((languages: SupportLanguage[], billingCountry) => {
-          if (
-            currency === billingCountry.currency.code &&
-            !languages.includes(billingCountry.ietfLanguageTag)
-          ) {
-            languages.push(billingCountry.ietfLanguageTag);
-          }
-          return languages;
-        }, []) ?? []
+      settings.get(country)?.reduce((acc: LanguageOption[], billingCountry) => {
+        if (
+          currency === billingCountry.currency.code &&
+          !seen.has(billingCountry.ietfLanguageTag)
+        ) {
+          seen.add(billingCountry.ietfLanguageTag);
+          acc.push({
+            ietfLanguageTag: billingCountry.ietfLanguageTag,
+            ovhSubsidiary: billingCountry.ovhSubsidiary,
+          });
+        }
+        return acc;
+      }, []) ?? []
     );
   });
 
 export const useSubsidiarySettings = (
   country?: string,
   currency?: string,
   language?: string,
-) => useSettingsQuery<string | null>((settings) => {
+) =>
+  useSettingsQuery<string | null>((settings) => {
     if (!(country && currency && language)) {
       return null;
     }

packages/manager/apps/account-creation/src/pages/settings/settings.constants.ts

@@ -1,3 +1,5 @@
+import { Subsidiary } from '@ovh-ux/manager-config';
+
 export const WEBSITE_LABEL_BY_LOCALE = {
   'fr-FR': 'OVHcloud France (Français)',
   'es-ES': 'OVHcloud España (Español)',
@@ -21,4 +23,16 @@ export const WEBSITE_LABEL_BY_LOCALE = {
   'en-US': 'OVHcloud United States (English)',
 };
 
+export const WEBSITE_LABEL_BY_LOCALE_OVERWRITES: Partial<Record<
+  Subsidiary,
+  Record<string, string>
+>> = {
+  WS: {
+    'es-ES': 'OVHcloud World (Español)',
+  },
+  WE: {
+    'en-CA': 'OVHcloud World (English)',
+  },
+};
+
 export const DEFAULT_REDIRECT_URL = 'https://ovhcloud.com/';

packages/manager/apps/account-creation/src/pages/settings/settings.page.tsx

@@ -39,10 +39,8 @@ import {
 } from '@/hooks/redirection/useSettingsRedirecions';
 import { useSettingsSchema } from '@/hooks/settings/useSettings';
 import { useTrackError } from '@/hooks/tracking/useTracking';
-import {
-  DEFAULT_REDIRECT_URL,
-  WEBSITE_LABEL_BY_LOCALE,
-} from './settings.constants';
+import { DEFAULT_REDIRECT_URL } from './settings.constants';
+import { getWebsiteLabel } from './settings.utils';
 import AccountSettingsPopoverContent from './popover-content/PopoverContent';
 import { useLocalCountry } from '@/hooks/useLocalCountry/useLocalCountry';
 
@@ -144,7 +142,9 @@ export default function Settings() {
 
   useEffect(() => {
     if (languages?.length === 1) {
-      setValue('language', languages[0], { shouldValidate: true });
+      setValue('language', languages[0].ietfLanguageTag, {
+        shouldValidate: true,
+      });
     }
   }, [languages, selectedCountry, selectedCurrency, setValue]);
 
@@ -161,7 +161,7 @@ export default function Settings() {
   }, [setValue]);
 
   const submitSettings: SubmitHandler<SettingsFormData> = useCallback(
-    ({ country, currency, language }: SettingsFormData) => {
+    ({ country, language }: SettingsFormData) => {
       if (pageTracking) {
         trackClick(pageTracking, {
           location: PageLocation.page,
@@ -173,7 +173,6 @@ export default function Settings() {
           ],
         });
       }
-      console.log({ country, currency, language });
       // In case the signup url is not valid, we will redirect to the website
       if (redirectToSignUpUrl !== null) {
         const params = `ovhSubsidiary=${ovhSubsidiary}&country=${country}&language=${language}`;
@@ -353,8 +352,11 @@ export default function Settings() {
                 data-testid="language-select"
               >
                 {(languages || []).map((language) => (
-                  <option key={`site_${language}`} value={language}>
-                    {WEBSITE_LABEL_BY_LOCALE[language]}
+                  <option
+                    key={`site_${language.ietfLanguageTag}`}
+                    value={language.ietfLanguageTag}
+                  >
+                    {getWebsiteLabel(language)}
                   </option>
                 ))}
               </OdsSelect>

packages/manager/apps/account-creation/src/pages/settings/settings.utils.ts

@@ -0,0 +1,13 @@
+import { LanguageOption } from '@/data/hooks/settings/useSettings';
+import {
+  WEBSITE_LABEL_BY_LOCALE,
+  WEBSITE_LABEL_BY_LOCALE_OVERWRITES,
+} from './settings.constants';
+import { Subsidiary } from '@ovh-ux/manager-config';
+
+export const getWebsiteLabel = (language: LanguageOption): string =>
+  (language.ovhSubsidiary &&
+    WEBSITE_LABEL_BY_LOCALE_OVERWRITES[language.ovhSubsidiary as Subsidiary]?.[
+      language.ietfLanguageTag
+    ]) ??
+  WEBSITE_LABEL_BY_LOCALE[language.ietfLanguageTag];