@ethora/chat-component-rn 26.10.10 → 26.10.11

package/src/components/Booking/ScheduledCallPreJoin.tsx

@@ -0,0 +1,230 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../../roomStore';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useT, useUiLocale } from '../../i18n/useT';
+import {
+  scheduledCallUi,
+  useScheduledCallUi,
+  type PreJoinState,
+} from '../../booking/scheduledCallStore';
+import {
+  JOIN_WINDOW_BEFORE_MS,
+  chatNameOfRoom,
+  type ScheduledCallCardData,
+} from '../../booking/scheduledCall';
+import {
+  canManageScheduledCall,
+  confirmAndCancelScheduledCall,
+  joinScheduledCall,
+} from '../../booking/scheduledCallActions';
+import { formatClock } from '../../booking/scheduleForm';
+import {
+  BookingSheet,
+  CalendarButtons,
+  PrimaryButton,
+  StatePill,
+  describeWhen,
+  stateLabelKey,
+  useBookingStyles,
+  useScheduledCallState,
+} from './bookingShared';
+
+const ERROR_KEYS = {
+  'not-a-member': 'booking.error.notMember',
+  'not-found': 'booking.error.notFound',
+  cancelled: 'booking.error.cancelled',
+  network: 'booking.error.failed',
+} as const;
+
+const Ready: React.FC<{
+  detail: Extract<PreJoinState, { phase: 'ready' }>['detail'];
+}> = ({ detail }) => {
+  const t = useT();
+  const locale = useUiLocale();
+  const { theme } = useBookingStyles();
+  const { user, config } = useChatSettingState();
+  const scheduledCalls = config?.scheduledCalls;
+  const call = detail.scheduledCall;
+  const roomJid = detail.chat?.jid || call.chatName;
+  const roomRole = useSelector(
+    (state: RootState) =>
+      Object.values(state.rooms.rooms).find(
+        (room) => chatNameOfRoom(room?.jid || '') === chatNameOfRoom(roomJid)
+      )?.role
+  );
+
+  const card: ScheduledCallCardData = {
+    slug: call.slug,
+    title: call.title,
+    startAt: call.startAt,
+    startMs: Date.parse(call.startAt),
+    durationMinutes: call.durationMinutes,
+    kind: call.kind === 'audio' ? 'audio' : 'video',
+    status: call.status === 'cancelled' ? 'cancelled' : 'scheduled',
+    joinUrl: detail.links.join,
+    icsUrl: detail.links.ics || '',
+    googleUrl: detail.links.google || '',
+    outlookUrl: detail.links.outlook || '',
+    createdBy: call.createdBy || '',
+  };
+  const { state, now } = useScheduledCallState(card);
+  const [joining, setJoining] = useState(false);
+  const joinAllowed = scheduledCalls?.enabled !== false;
+
+  const canManage =
+    (state === 'upcoming' || state === 'joinable') &&
+    canManageScheduledCall({
+      createdBy: call.createdBy,
+      userId: user?._id,
+      roomRole,
+    });
+
+  return (
+    <>
+      <View style={styles.row}>
+        <Text
+          testID="prejoin-title"
+          style={[styles.callTitle, { color: theme.text }]}
+          numberOfLines={3}
+        >
+          {call.title || t('call.title')}
+        </Text>
+        <StatePill
+          label={t(stateLabelKey(state, card.startMs, now))}
+          tone={state === 'joinable' ? 'active' : 'neutral'}
+        />
+      </View>
+      <Text testID="prejoin-when" style={{ color: theme.textSecondary, fontSize: 14 }}>
+        {describeWhen(card, t, locale)}
+      </Text>
+      <Text style={{ color: theme.textSecondary, fontSize: 12 }}>
+        {card.kind === 'audio' ? t('call.audioCall') : t('call.videoCall')}
+      </Text>
+      {!!call.description && (
+        <Text style={{ color: theme.text, fontSize: 14 }}>{call.description}</Text>
+      )}
+
+      {joinAllowed && (
+        <PrimaryButton
+          testID="prejoin-join"
+          label={t('booking.action.join')}
+          disabled={state !== 'joinable'}
+          busy={joining}
+          onPress={() => {
+            setJoining(true);
+            joinScheduledCall(roomJid, card.kind)
+              .then((started) => {
+                if (started) {scheduledCallUi.closePreJoin();}
+              })
+              .finally(() => setJoining(false));
+          }}
+        />
+      )}
+      <Text style={{ color: theme.textMuted, fontSize: 12, textAlign: 'center' }}>
+        {state === 'upcoming'
+          ? t('booking.prejoin.joinFrom', {
+              time: formatClock(card.startMs - JOIN_WINDOW_BEFORE_MS, locale),
+            })
+          : t('booking.prejoin.hint')}
+      </Text>
+
+      {(state === 'upcoming' || state === 'joinable') && (
+        <CalendarButtons
+          t={t}
+          googleUrl={card.googleUrl}
+          outlookUrl={card.outlookUrl}
+          icsUrl={card.icsUrl}
+          testIDPrefix="prejoin"
+        />
+      )}
+
+      {canManage && (
+        <View style={styles.row}>
+          <View style={styles.half}>
+            <PrimaryButton
+              testID="prejoin-edit"
+              tone="plain"
+              label={t('booking.action.edit')}
+              onPress={() => {
+                scheduledCallUi.closePreJoin();
+                scheduledCallUi.openEdit(roomJid, detail);
+              }}
+            />
+          </View>
+          <View style={styles.half}>
+            <PrimaryButton
+              testID="prejoin-cancel"
+              tone="plain"
+              label={t('booking.action.cancelCall')}
+              onPress={() => {
+                void confirmAndCancelScheduledCall(call.slug).then((done) => {
+                  if (done) {scheduledCallUi.closePreJoin();}
+                });
+              }}
+            />
+          </View>
+        </View>
+      )}
+    </>
+  );
+};
+
+/**
+ * The pre-join screen of a call opened from a link or a reminder: what the
+ * call is, and a Join button. Nothing is started until Join is tapped.
+ */
+export const ScheduledCallPreJoin: React.FC = () => {
+  const { preJoin } = useScheduledCallUi();
+  const t = useT();
+  const { theme } = useBookingStyles();
+  // Hold the last content while the modal fades out.
+  const [shown, setShown] = useState<PreJoinState | null>(preJoin);
+  useEffect(() => {
+    if (preJoin) {setShown(preJoin);}
+  }, [preJoin]);
+  if (!shown) {return null;}
+
+  return (
+    <BookingSheet
+      visible={!!preJoin}
+      onClose={scheduledCallUi.closePreJoin}
+      title={t('booking.prejoin.title')}
+      testID="prejoin-sheet"
+    >
+      {shown.phase === 'loading' && (
+        <Text testID="prejoin-loading" style={{ color: theme.textSecondary }}>
+          {t('call.connecting')}
+        </Text>
+      )}
+      {shown.phase === 'error' && (
+        <>
+          {shown.title ? (
+            <Text style={{ color: theme.text, fontWeight: '600', fontSize: 16 }}>
+              {shown.title}
+            </Text>
+          ) : null}
+          <Text testID="prejoin-error" style={{ color: theme.danger, fontSize: 15 }}>
+            {t(ERROR_KEYS[shown.reason])}
+          </Text>
+          <PrimaryButton
+            testID="prejoin-close"
+            tone="plain"
+            label={t('booking.action.close')}
+            onPress={scheduledCallUi.closePreJoin}
+          />
+        </>
+      )}
+      {shown.phase === 'ready' && <Ready detail={shown.detail} />}
+    </BookingSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  callTitle: { flex: 1, fontSize: 18, fontWeight: '600' },
+  half: { flex: 1 },
+});
+
+export default ScheduledCallPreJoin;

package/src/components/Booking/bookingShared.tsx

@@ -0,0 +1,295 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import type { ChatTheme } from '../../theme/theme';
+import {
+  MAX_TIMER_MS,
+  getScheduledCallCardState,
+  nextScheduledCallTransition,
+  type ScheduledCallCardData,
+  type ScheduledCallCardState,
+} from '../../booking/scheduledCall';
+import { openBackendLink } from '../../booking/scheduledCallActions';
+import { formatClock, formatDay } from '../../booking/scheduleForm';
+
+type T = (key: string, vars?: Record<string, string | number>) => string;
+
+/**
+ * The card's state, re-evaluated when it changes on its own (the join
+ * window opens, the call ends) instead of on a poll.
+ */
+export const useScheduledCallState = (
+  card: Pick<
+    ScheduledCallCardData,
+    'startMs' | 'durationMinutes' | 'status'
+  >
+): { state: ScheduledCallCardState; now: number } => {
+  const [now, setNow] = useState(() => Date.now());
+  const { startMs, durationMinutes, status } = card;
+
+  useEffect(() => {
+    setNow(Date.now());
+  }, [startMs, durationMinutes, status]);
+
+  useEffect(() => {
+    const at = nextScheduledCallTransition(
+      { startMs, durationMinutes, status },
+      now
+    );
+    if (at === null) {return undefined;}
+    // A timer can fire a hair early; the +50 ms keeps the re-check past it.
+    const wait = Math.min(MAX_TIMER_MS, Math.max(1000, at - Date.now() + 50));
+    const timer = setTimeout(() => setNow(Date.now()), wait);
+    return () => clearTimeout(timer);
+  }, [startMs, durationMinutes, status, now]);
+
+  return { state: getScheduledCallCardState(card, now), now };
+};
+
+export const stateLabelKey = (
+  state: ScheduledCallCardState,
+  startMs: number,
+  now: number
+): string => {
+  switch (state) {
+    case 'cancelled':
+      return 'booking.state.cancelled';
+    case 'ended':
+      return 'booking.state.ended';
+    case 'joinable':
+      return now >= startMs
+        ? 'booking.state.inProgress'
+        : 'booking.state.startingSoon';
+    default:
+      return 'booking.state.upcoming';
+  }
+};
+
+export const describeWhen = (
+  card: Pick<ScheduledCallCardData, 'startMs' | 'durationMinutes'>,
+  t: T,
+  locale?: string
+): string =>
+  `${t('booking.card.starts', {
+    date: formatDay(card.startMs, locale),
+    time: formatClock(card.startMs, locale),
+  })} · ${t('booking.duration.minutes', { n: card.durationMinutes })}`;
+
+export const useBookingStyles = () => {
+  const theme = useTheme();
+  return useMemo(() => ({ theme, styles: createStyles(theme) }), [theme]);
+};
+
+export const StatePill: React.FC<{
+  label: string;
+  tone: 'neutral' | 'active' | 'danger';
+}> = ({ label, tone }) => {
+  const { theme, styles } = useBookingStyles();
+  const color =
+    tone === 'active'
+      ? theme.success
+      : tone === 'danger'
+        ? theme.danger
+        : theme.textSecondary;
+  return (
+    <View style={[styles.pill, { borderColor: color }]}>
+      <Text style={[styles.pillText, { color }]}>{label}</Text>
+    </View>
+  );
+};
+
+/** Add to Google / Outlook / .ics: the backend's links, opened as they are. */
+export const CalendarButtons: React.FC<{
+  t: T;
+  googleUrl?: string;
+  outlookUrl?: string;
+  icsUrl?: string;
+  testIDPrefix?: string;
+}> = ({ t, googleUrl, outlookUrl, icsUrl, testIDPrefix = 'booking' }) => {
+  const { theme, styles } = useBookingStyles();
+  const items: Array<[string, string, string | undefined]> = [
+    ['google', 'booking.calendar.google', googleUrl],
+    ['outlook', 'booking.calendar.outlook', outlookUrl],
+    ['ics', 'booking.calendar.ics', icsUrl],
+  ];
+  const available = items.filter(([, , url]) => !!url);
+  if (available.length === 0) {return null;}
+  return (
+    <View>
+      <Text style={styles.sectionLabel}>{t('booking.calendar.add')}</Text>
+      <View style={styles.calendarRow}>
+        {available.map(([id, labelKey, url]) => (
+          <TouchableOpacity
+            key={id}
+            testID={`${testIDPrefix}-calendar-${id}`}
+            accessibilityRole="link"
+            activeOpacity={0.7}
+            onPress={() => {
+              void openBackendLink(url);
+            }}
+            style={[styles.calendarButton, { borderColor: theme.border }]}
+          >
+            <Text style={[styles.calendarLabel, { color: theme.primary }]}>
+              {t(labelKey)}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+/** Bottom sheet shell shared by the editor and the pre-join sheet. */
+export const BookingSheet: React.FC<{
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  testID?: string;
+  children: React.ReactNode;
+}> = ({ visible, onClose, title, testID, children }) => {
+  const { styles } = useBookingStyles();
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <KeyboardAvoidingView
+        style={styles.backdrop}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <TouchableOpacity
+          testID={testID ? `${testID}-backdrop` : undefined}
+          style={StyleSheet.absoluteFill}
+          activeOpacity={1}
+          onPress={onClose}
+        />
+        <View style={styles.sheet} testID={testID}>
+          <View style={styles.grabber} />
+          <Text style={styles.sheetTitle} accessibilityRole="header">
+            {title}
+          </Text>
+          <ScrollView
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.sheetBody}
+          >
+            {children}
+          </ScrollView>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+export const PrimaryButton: React.FC<{
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  busy?: boolean;
+  tone?: 'primary' | 'danger' | 'plain';
+  testID?: string;
+}> = ({ label, onPress, disabled, busy, tone = 'primary', testID }) => {
+  const { theme, styles } = useBookingStyles();
+  const background =
+    tone === 'primary'
+      ? theme.primary
+      : tone === 'danger'
+        ? theme.danger
+        : theme.surfaceSecondary;
+  const color = tone === 'plain' ? theme.text : theme.textOnPrimary;
+  return (
+    <TouchableOpacity
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !!disabled }}
+      activeOpacity={0.8}
+      disabled={disabled || busy}
+      onPress={onPress}
+      style={[
+        styles.button,
+        { backgroundColor: background, opacity: disabled ? 0.45 : 1 },
+      ]}
+    >
+      {busy ? (
+        <ActivityIndicator color={color} />
+      ) : (
+        <Text style={[styles.buttonText, { color }]}>{label}</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export const createStyles = (theme: ChatTheme) =>
+  StyleSheet.create({
+    pill: {
+      borderWidth: 1,
+      borderRadius: 10,
+      paddingHorizontal: 8,
+      paddingVertical: 2,
+    },
+    pillText: { fontSize: 11, fontWeight: '600' },
+    sectionLabel: {
+      fontSize: 12,
+      fontWeight: '600',
+      color: theme.textSecondary,
+      marginBottom: 6,
+    },
+    calendarRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+    calendarButton: {
+      borderWidth: 1,
+      borderRadius: 16,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+    },
+    calendarLabel: { fontSize: 13, fontWeight: '500' },
+    backdrop: {
+      flex: 1,
+      backgroundColor: theme.overlay,
+      justifyContent: 'flex-end',
+    },
+    sheet: {
+      backgroundColor: theme.surface,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      paddingHorizontal: 20,
+      paddingTop: 8,
+      paddingBottom: 24,
+      maxHeight: '90%',
+    },
+    grabber: {
+      alignSelf: 'center',
+      width: 40,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: theme.divider,
+      marginBottom: 12,
+    },
+    sheetTitle: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: theme.text,
+      marginBottom: 12,
+    },
+    sheetBody: { gap: 14, paddingBottom: 8 },
+    button: {
+      minHeight: 44,
+      borderRadius: 12,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 16,
+    },
+    buttonText: { fontSize: 15, fontWeight: '600' },
+  });

package/src/components/MainComponents/ChatHeader.tsx

@@ -15,6 +15,7 @@ import { ProfileImagePlaceholder } from './ProfileImagePlaceholder';
 import Button from '../styled/Button';
 import { BackIcon, BurgerMenuIcon, LockIcon } from '../../assets/icons';
 import { CallButtons } from '../VideoCalls/CallButtons';
+import { ScheduleCallButton } from '../Booking/ScheduleCallButton';
 import { HeaderCallBar } from '../VideoCalls/ActiveCallBar';
 import { LanguageSelectorButton } from './LanguageSelectorButton';
 import { MessageSearchButton } from './MessageSearchButton';
@@ -258,6 +259,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
               1:1 room, so it costs non-call hosts nothing. */}
           <MessageSearchButton />
           <LanguageSelectorButton />
+          <ScheduleCallButton />
           <CallButtons />
           {!config?.disableChatInfo?.disableRoomMenu && (
             <RoomMenu handleLeaveClick={handleLeaveClick} />

package/src/components/MainComponents/LanguageSelectorButton.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { getIconColor } from '../../helpers/getIconColor';
 import { useT } from '../../i18n/useT';
+import { installTranslateLanguages } from '../../services/languageSettings';
 import { GlobeIcon, LanguageSelectorModal } from './LanguageSelectorModal';
 
 /**
@@ -11,7 +12,9 @@ import { GlobeIcon, LanguageSelectorModal } from './LanguageSelectorModal';
  * Renders only when translation is on. A host that drives the reader's
  * language from its own settings screen (via `config.translates
  * .readerLocale`) can hide this with `showLanguageSelector: false` rather
- * than shipping two competing controls.
+ * than shipping two competing controls. An install whose get-config
+ * reports no translate languages (`translates.languages: []`) has no
+ * translation server, so there is nothing to pick either.
  */
 export const LanguageSelectorButton: FC = () => {
   const { config } = useChatSettingState();
@@ -20,7 +23,11 @@ export const LanguageSelectorButton: FC = () => {
 
   const translates = config?.translates;
   const enabled = Boolean(translates?.enabled || config?.enableTranslates);
-  if (!enabled || translates?.showLanguageSelector === false) {
+  if (
+    !enabled ||
+    translates?.showLanguageSelector === false ||
+    installTranslateLanguages(config)?.length === 0
+  ) {
     return null;
   }
 

package/src/components/MainComponents/LanguageSelectorModal.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 import {
   Modal,
   Pressable,
@@ -15,7 +15,7 @@ import {
   setTranslateMode,
 } from '../../roomStore/chatSettingsSlice';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
-import { LANGUAGE_OPTIONS } from '../../helpers/constants/LANGUAGE_OPTIONS';
+import { chatLanguageChoices } from '../../services/languageSettings';
 import { Iso639_1Codes } from '../../types/models/language.model';
 import {
   canReaderChooseTranslateMode,
@@ -79,12 +79,16 @@ export const LanguageSelectorModal: FC<{
   const translates = config?.translates;
   const effectiveMode = resolveTranslateMode(translates, translateMode);
   const showModeSwitcher = canReaderChooseTranslateMode(translates);
-  const showLanguageList = translates?.showLanguageList !== false;
+  // The install's translateLanguages (get-config) when the host passed
+  // them, the built-in list otherwise; empty hides the list.
+  const languageChoices = useMemo(() => chatLanguageChoices(config), [config]);
+  const showLanguageList =
+    translates?.showLanguageList !== false && languageChoices.length > 0;
   const activeLocale = translates?.readerLocale || langSource;
 
   const selectLanguage = useCallback(
-    (id: Iso639_1Codes) => {
-      dispatch(setLangSource(id));
+    (id: string) => {
+      dispatch(setLangSource(id as Iso639_1Codes));
       onClose();
     },
     [dispatch, onClose]
@@ -166,7 +170,7 @@ export const LanguageSelectorModal: FC<{
                 {t('language.select')}
               </Text>
               <ScrollView style={styles.list}>
-                {LANGUAGE_OPTIONS.map((option) => {
+                {languageChoices.map((option) => {
                   // Compare on the base language so a reader on "fr" still
                   // sees "Français" (id fr-CA) ticked.
                   const selected =

package/src/components/MainComponents/MessageContainer.tsx

@@ -10,6 +10,8 @@ import {
 import { View } from 'react-native';
 import { useT } from '../../i18n/useT';
 import { formatCallLogLabel } from '../../helpers/callLogMessage';
+import { isScheduledCallMessage } from '../../booking/scheduledCall';
+import ScheduledCallMessage from '../Booking/ScheduledCallMessage';
 
 interface MessageContainerProps {
   CustomMessage?: React.ComponentType<{
@@ -54,6 +56,19 @@ const MessageContainerImpl: FC<MessageContainerProps> = ({
 
   const messageDate = new Date(message.date);
 
+  // Before the system-message branch: the backend sends the invite from the
+  // system account, but it is a card, not a centred pill.
+  if (isScheduledCallMessage(message)) {
+    return (
+      <ScheduledCallMessage
+        message={message}
+        config={config}
+        showDateLabel={showDateLabel}
+        CustomDaySeparator={CustomDaySeparator}
+      />
+    );
+  }
+
   if (message?.isSystemMessage === 'true') {
     const SystemMessageComponent = config?.customSystemMessage;
     return (

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -26,7 +26,9 @@ import '../../helpers/storeConsole';
 import {installPromiseRejectionTracker} from '../../utils/installPromiseRejectionTracker';
 import {useChatFonts} from '../../hooks/useChatFonts';
 import {installPushTokenHook} from '../../services/pushRegistration';
+import {installAppBadgeSync} from '../../services/appBadge';
 import {setE2eeEnabled} from '../../e2ee';
+import {installScheduledCallHook} from '../../booking/pendingScheduledCall';
 
 const gestureRootStyle = {flex: 1};
 
@@ -41,6 +43,14 @@ installPromiseRejectionTracker();
 // (one store subscription), no-op for hosts that never use push.
 installPushTokenHook();
 
+// The server sets the icon badge only with a push; in the foreground it
+// follows the unread total instead, so opening the app clears a stale one.
+installAppBadgeSync();
+
+// Arms the scheduled-call link watcher: a link held before sign-in or before
+// the chat was up opens as soon as both are true.
+installScheduledCallHook();
+
 interface ChatWrapperProps {
   token?: string;
   roomJID?: string;