Merge branch 'main' into WT-2251

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extension",
-  "version": "3.36.9",
+  "version": "3.36.10",
   "scripts": {
     "dev:chrome": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --watch",
     "dev:firefox": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=firefox webpack --watch",

packages/shared/src/components/profile/LanguageDropdown.tsx

@@ -5,8 +5,9 @@ import type { DropdownClassName } from '../fields/Dropdown';
 import { Dropdown } from '../fields/Dropdown';
 import { LanguageIcon } from '../icons';
 import type { BaseFieldProps } from '../fields/BaseFieldContainer';
-import { ContentLanguage, contentLanguageToLabelMap } from '../../lib/user';
 import type { IconProps } from '../Icon';
+import { featureValidLanguages } from '../../lib/featureManagement';
+import { useFeature } from '../GrowthBookProvider';
 
 type ClassName = {
   hint?: string;
@@ -15,8 +16,8 @@ type ClassName = {
 
 type Props = {
   className?: ClassName;
-  defaultValue?: ContentLanguage;
-  onChange?: (value: ContentLanguage, index: number) => void;
+  defaultValue?: string;
+  onChange?: (value: string, index: number) => void;
   icon?: ReactElement<IconProps>;
 } & Pick<BaseFieldProps, 'name' | 'valid' | 'hint' | 'saveHintSpace'>;
 
@@ -33,11 +34,13 @@ export const LanguageDropdown = ({
   icon = defaultIcon,
 }: Props): ReactElement => {
   const [open, setOpen] = useState(false);
+  const validLanguages = useFeature(featureValidLanguages);
+  const languageOptions = useMemo(() => {
+    return ['Original language', ...Object.values(validLanguages)];
+  }, [validLanguages]);
   const values = useMemo(() => {
-    const val = Object.values(ContentLanguage);
-    val.splice(1, 1);
-    return val;
-  }, []);
+    return [null, ...Object.keys(validLanguages)];
+  }, [validLanguages]);
   const [selectedIndex, setSelectedIndex] = useState(
     defaultValue ? values.indexOf(defaultValue) : 0,
   );
@@ -78,9 +81,9 @@ export const LanguageDropdown = ({
           container: dropdownClassName,
         }}
         selectedIndex={selectedIndex}
-        options={Object.values(contentLanguageToLabelMap)}
+        options={languageOptions}
         onChange={(_, index) => {
-          const val = values[index] as ContentLanguage;
+          const val = values[index];
           onChange?.(val, index);
           setSelectedIndex(index);
         }}

packages/shared/src/hooks/useLanguage.ts

@@ -1,5 +1,4 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import type { ContentLanguage } from '../lib/user';
 import { useAuthContext } from '../contexts/AuthContext';
 import { UPDATE_USER_PROFILE_MUTATION } from '../graphql/users';
 import { useLogContext } from '../contexts/LogContext';
@@ -11,7 +10,7 @@ import { OtherFeedPage, RequestKey } from '../lib/query';
 import { useToastNotification } from './useToastNotification';
 
 export type UseLanguage = {
-  onLanguageChange: (value?: ContentLanguage) => void;
+  onLanguageChange: (value?: string) => void;
 };
 
 export const useLanguage = (): UseLanguage => {
@@ -21,7 +20,7 @@ export const useLanguage = (): UseLanguage => {
   const { displayToast } = useToastNotification();
 
   const { mutate: onLanguageChange } = useMutation({
-    mutationFn: async (value?: ContentLanguage) => {
+    mutationFn: async (value?: string) => {
       await updateUser({
         ...user,
         language: value,

packages/shared/src/lib/boot.ts

@@ -1,5 +1,5 @@
 import type { FeatureDefinition } from '@growthbook/growthbook';
-import type { AnonymousUser, ContentLanguage, LoggedUser } from './user';
+import type { AnonymousUser, LoggedUser } from './user';
 import { apiUrl } from './config';
 import type { Alerts } from '../graphql/alerts';
 import type { RemoteSettings } from '../graphql/settings';
@@ -65,7 +65,7 @@ export type Boot = {
   };
   marketingCta?: MarketingCta | null;
   feeds: Feed[];
-  language?: ContentLanguage;
+  language?: string;
   geo: {
     ip?: string;
     region?: string;

packages/shared/src/lib/featureManagement.ts

@@ -61,4 +61,17 @@ export const featureFeedAdTemplate = new Feature('feed_ad_template', {
   },
 } as Record<FeedSettingsKeys, FeedAdTemplate>);
 
+export const featureValidLanguages = new Feature('valid_languages', {
+  en: 'English',
+  es: 'Spanish',
+  de: 'German',
+  fr: 'French',
+  it: 'Italian',
+  'zh-Hans': 'Chinese (Simplified)',
+  'pt-BR': 'Portuguese (Brazil)',
+  'pt-PT': 'Portuguese (Portugal)',
+  ja: 'Japanese',
+  ko: 'Korean',
+});
+
 export { feature };

packages/shared/src/lib/user.ts

@@ -90,7 +90,7 @@ export interface UserProfile {
   timezone?: string;
   cover?: string;
   experienceLevel?: keyof typeof UserExperienceLevel;
-  language?: ContentLanguage;
+  language?: string;
   followingEmail?: boolean;
   followNotifications?: boolean;
   defaultFeedId?: string;
@@ -232,34 +232,6 @@ export enum LogoutReason {
   KratosSessionAlreadyAvailable = `kratos session already available`,
 }
 
-export enum ContentLanguage {
-  Disabled = null,
-  English = 'en',
-  Spanish = 'es',
-  German = 'de',
-  French = 'fr',
-  Italian = 'it',
-  ChineseSimplified = 'zh-Hans',
-  PortugueseBrazil = 'pt-BR',
-  PortuguesePortugal = 'pt-PT',
-  Japanese = 'ja',
-  Korean = 'ko',
-}
-
-export const contentLanguageToLabelMap = {
-  [ContentLanguage.Disabled]: 'Original language',
-  [ContentLanguage.English]: 'English',
-  [ContentLanguage.Spanish]: 'Spanish',
-  [ContentLanguage.German]: 'German',
-  [ContentLanguage.French]: 'French',
-  [ContentLanguage.Italian]: 'Italian',
-  [ContentLanguage.ChineseSimplified]: 'Chinese (Simplified)',
-  [ContentLanguage.PortugueseBrazil]: 'Portuguese (Brazil)',
-  [ContentLanguage.PortuguesePortugal]: 'Portuguese (Portugal)',
-  [ContentLanguage.Japanese]: 'Japanese',
-  [ContentLanguage.Korean]: 'Korean',
-};
-
 export const isSpecialUser = ({
   userId,
   loggedUserId,