@ethora/chat-component-rn 26.8.7 → 26.8.8

package/src/components/Modals/UserSettingsModal/LanguageCard.tsx

@@ -0,0 +1,144 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { useTheme } from '../../../hooks/useTheme';
+import { useT } from '../../../i18n/useT';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import {
+  appLanguageChoices,
+  chatLanguageChoices,
+  setAppLanguage,
+  setChatLanguage,
+  type LanguageChoice,
+} from '../../../services/languageSettings';
+
+interface LanguageCardProps {
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * The user's two languages: the interface, and what messages are translated
+ * into. See services/languageSettings for what each one does and where it
+ * is kept.
+ */
+const LanguageCard: React.FC<LanguageCardProps> = ({ style, testID }) => {
+  const theme = useTheme();
+  const t = useT();
+  const { config, langSource, uiLocale } = useChatSettingState();
+
+  const appChoices = useMemo(() => appLanguageChoices(config), [config]);
+  const chatChoices = useMemo(() => chatLanguageChoices(config), [config]);
+  const appCurrent = uiLocale || config?.i18n?.locale || '';
+  // Unset follows the interface language - the backend's own rule.
+  const chatCurrent = langSource || appCurrent;
+
+  const pick = useCallback(
+    (kind: 'app' | 'chat', id: string) => {
+      void (kind === 'app' ? setAppLanguage(id) : setChatLanguage(id));
+    },
+    []
+  );
+
+  const same = (a: string, b: string) => a.toLowerCase() === b.toLowerCase();
+
+  const group = (
+    kind: 'app' | 'chat',
+    label: string,
+    hint: string,
+    choices: LanguageChoice[],
+    current: string
+  ) => (
+    <View style={styles.group}>
+      <Text style={[styles.label, { color: theme.text }]}>{label}</Text>
+      <Text style={[styles.hint, { color: theme.textSecondary }]}>{hint}</Text>
+      <View style={styles.pills} accessibilityRole="radiogroup">
+        {choices.map((choice) => {
+          const selected = same(choice.id, current);
+          return (
+            <TouchableOpacity
+              key={choice.id}
+              testID={`settings-language-${kind}-${choice.id}`}
+              accessibilityRole="radio"
+              accessibilityState={{ selected }}
+              activeOpacity={0.7}
+              onPress={() => pick(kind, choice.id)}
+              style={[
+                styles.pill,
+                {
+                  borderColor: selected ? theme.primary : theme.border,
+                  backgroundColor: selected ? theme.primary : theme.surfaceSecondary,
+                },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.pillLabel,
+                  { color: selected ? theme.textOnPrimary : theme.text },
+                ]}
+              >
+                {choice.name}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+
+  return (
+    <View style={[style, styles.card]} testID={testID || 'settings-languages'}>
+      {group(
+        'app',
+        t('settings.language.app'),
+        t('settings.language.appHint'),
+        appChoices,
+        appCurrent
+      )}
+      {group(
+        'chat',
+        t('settings.language.chat'),
+        t('settings.language.chatHint'),
+        chatChoices,
+        chatCurrent
+      )}
+    </View>
+  );
+};
+
+export default LanguageCard;
+
+const styles = StyleSheet.create({
+  // Applied over the host's card style: its surface, this layout.
+  card: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: 18,
+  },
+  group: {
+    gap: 6,
+  },
+  label: {
+    fontSize: 17,
+    fontWeight: '500',
+  },
+  hint: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  pills: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginTop: 6,
+  },
+  pill: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 999,
+    borderWidth: 1,
+  },
+  pillLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -1,7 +1,7 @@
 /** @format */
 
-import EncryptionCard from '../../MainComponents/EncryptionCard';
 import React, { useCallback, useMemo } from 'react';
+import LanguageCard from './LanguageCard';
 import {
   StyleSheet,
   Switch,
@@ -64,12 +64,17 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
     [t]
   );
 
+  const showPassword = config?.settings?.changePassword === true;
   const options = useMemo(
     () => [
       { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
       { label: t('settings.visibility.title'), key: MODAL_TYPES.VISIBILITY },
+      // Off unless the host turned it on: not every backend has the endpoint.
+      ...(showPassword
+        ? [{ label: t('settings.password.title'), key: MODAL_TYPES.CHANGE_PASSWORD }]
+        : []),
     ],
-    [t]
+    [t, showPassword]
   );
 
   const handleClick = useCallback(
@@ -160,8 +165,10 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
           </View>
         ) : null}
 
-        {config?.e2ee?.enabled === true ? (
-          <EncryptionCard style={styles.card} testID="settings-e2ee" />
+        {/* The interface language and the translation language; off
+            unless the host turned it on, as it writes to the profile. */}
+        {config?.settings?.languages?.enabled === true ? (
+          <LanguageCard style={styles.card} />
         ) : null}
 
         {options.map((option) => (

package/src/components/Thread/ThreadWrapper.tsx

@@ -29,6 +29,7 @@ import { useSendMessage } from '../../hooks/useSendMessage';
 import { createMainMessageForThread } from '../../helpers/createMainMessageForThread';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { KeyboardInputDock } from '../MainComponents/KeyboardInputDock';
 import {
@@ -69,6 +70,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
   const reduxStore = useStore<RootState>();
   const { config } = useChatSettingState();
   const theme = useTheme();
+  const t = useT();
   const insets = useSafeAreaInsets();
   const { width: windowWidth } = useWindowDimensions();
   const roomJid = activeMessage.roomJid;
@@ -217,7 +219,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
           style={[styles.fill, { backgroundColor: theme.surface }]}
         >
           <View style={[styles.fill, { backgroundColor: theme.chatBackground }]}>
-            <ModalHeaderComponent headerTitle="Thread" handleCloseModal={close} />
+            <ModalHeaderComponent headerTitle={t('thread.title')} handleCloseModal={close} />
             <MessageList
               loadMoreMessages={loadMoreMessages}
               CustomMessage={CustomMessageComponent}
@@ -267,7 +269,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
                 numberOfLines={1}
                 style={[styles.alsoText, { color: theme.textSecondary }]}
               >
-                Also send to{' '}
+                {t('thread.alsoSendTo')}{' '}
                 <Text style={{ color: theme.primary, fontWeight: '600' }}>
                   {roomDisplayName}
                 </Text>

package/src/e2ee/stanza.ts

@@ -48,7 +48,7 @@ function placeholder(error: E2eeError): Element {
   return new Element('body', {}).t(
     translateKey(
       placeholderKey(error),
-      settings?.config?.i18n?.locale || settings?.langSource,
+      settings?.uiLocale || settings?.config?.i18n?.locale || settings?.langSource,
       settings?.config?.i18n?.strings
     )
   );

package/src/helpers/constants/MODAL_COMPONENTS.tsx

@@ -14,6 +14,7 @@ import ManageDataModal from '../../components/Modals/SettingsModals/ManageDataMo
 import ProfileSharesModal from '../../components/Modals/SettingsModals/ProfileShares/ProfileShares';
 import ReferralsModal from '../../components/Modals/SettingsModals/Referrals/Referrals';
 import VisibilityModal from '../../components/Modals/SettingsModals/Visibility/VisibilityModal';
+import ChangePasswordModal from '../../components/Modals/SettingsModals/ChangePassword/ChangePasswordModal';
 import UserProfileModal from '../../components/Modals/UserProfileModal/UserProfileModal';
 import UserSettingsModal from '../../components/Modals/UserSettingsModal/UserSettingsModal';
 
@@ -27,6 +28,7 @@ export const MODAL_COMPONENTS: Record<
   [MODAL_TYPES.CHAT_PROFILE]: ChatProfileModal,
   [MODAL_TYPES.MANAGE_DATA]: ManageDataModal,
   [MODAL_TYPES.VISIBILITY]: VisibilityModal,
+  [MODAL_TYPES.CHANGE_PASSWORD]: ChangePasswordModal,
   [MODAL_TYPES.REFERRALS]: ReferralsModal,
   [MODAL_TYPES.DOCUMENT_SHARES]: DocumentSharesModal,
   [MODAL_TYPES.PROFILE_SHARES]: ProfileSharesModal,

package/src/helpers/constants/MODAL_TYPES.ts

@@ -15,6 +15,7 @@ export const MODAL_TYPES = {
   CHAT_PROFILE: 'chatprofile',
   MANAGE_DATA: 'managedata',
   VISIBILITY: 'visibility',
+  CHANGE_PASSWORD: 'change_password',
 
   PROFILE_SHARES: 'profile_shares',
   DOCUMENT_SHARES: 'document_shares',

package/src/helpers/preferencesStorage.ts

@@ -9,6 +9,10 @@ const KEY = '@ethora/preferences';
 export interface StoredPreferences {
   theme?: ThemePreference;
   pushEnabled?: boolean;
+  /** Interface language picked in Settings (BCP-47). */
+  uiLocale?: string;
+  /** Language messages are translated into, picked in Settings (BCP-47). */
+  chatLanguage?: string;
 }
 
 export const loadPreferences = async (): Promise<StoredPreferences> => {

package/src/hooks/useChatSettingState.tsx

@@ -9,6 +9,9 @@ export const useChatSettingState = () => {
   const activeModal = useSelector(
     (state: RootState) => state.chatSettingStore.activeModal
   );
+  const uiLocale = useSelector(
+    (state: RootState) => state.chatSettingStore.uiLocale
+  );
   const config = useSelector(
     (state: RootState) => state.chatSettingStore.config
   );
@@ -29,6 +32,7 @@ export const useChatSettingState = () => {
   );
 
   return {
+    uiLocale,
     user,
     activeFile,
     activeModal,

package/src/hooks/useChatWrapperInit.ts

@@ -12,6 +12,7 @@ import { initRoomsPresence } from '../helpers/initRoomsPresence';
 import { updateMessagesTillLast } from '../helpers/updateMessagesTillLast';
 import { refreshAuthTokensQuietly } from '../networking/authRefresh';
 import { setLangSource, setConfig } from '../roomStore/chatSettingsSlice';
+import { applyProfileLanguages } from '../services/languageSettings';
 import { setIsLoading } from '../roomStore/roomsSlice';
 import { useRoomState } from './useRoomState';
 import { useChatSettingState } from './useChatSettingState';
@@ -120,6 +121,9 @@ const useChatWrapperInit = ({
       }
 
       dispatch(setConfig(config));
+      // The profile's languages are the account's truth, over what the
+      // device remembered.
+      applyProfileLanguages(user as any, config);
       try {
         if (!user.xmppUsername) {
           setShowModal(true);