@ethora/chat-component-rn 26.10.9 → 26.10.11

package/src/components/Booking/ScheduleCallSheet.tsx

@@ -0,0 +1,380 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useT, useUiLocale } from '../../i18n/useT';
+import { useTheme } from '../../hooks/useTheme';
+import type { ChatTheme } from '../../theme/theme';
+import {
+  createScheduledCall,
+  updateScheduledCall,
+} from '../../networking/api-requests/scheduledCalls.api';
+import {
+  scheduledCallUi,
+  useScheduledCallUi,
+  type EditorState,
+} from '../../booking/scheduledCallStore';
+import {
+  DEFAULT_DURATION_MINUTES,
+  DURATION_CHOICES,
+  NOTES_MAX,
+  TIME_STEP_MINUTES,
+  TITLE_MAX,
+  clampDuration,
+  defaultStartMs,
+  deviceTimezone,
+  formatClock,
+  formatDay,
+  shiftDays,
+  shiftMinutes,
+  validateStart,
+} from '../../booking/scheduleForm';
+import { chatNameOfRoom } from '../../booking/scheduledCall';
+import {
+  invalidateScheduledCallDetail,
+  notifyScheduledCall,
+} from '../../booking/scheduledCallActions';
+import { BookingSheet, PrimaryButton } from './bookingShared';
+
+type Kind = 'video' | 'audio';
+
+const Stepper: React.FC<{
+  label: string;
+  value: string;
+  onBack: () => void;
+  onForward: () => void;
+  backLabel: string;
+  forwardLabel: string;
+  testID: string;
+  theme: ChatTheme;
+}> = ({ label, value, onBack, onForward, backLabel, forwardLabel, testID, theme }) => (
+  <View>
+    <Text style={[styles.label, { color: theme.textSecondary }]}>{label}</Text>
+    <View style={[styles.stepper, { backgroundColor: theme.surfaceSecondary }]}>
+      <TouchableOpacity
+        testID={`${testID}-back`}
+        accessibilityRole="button"
+        accessibilityLabel={backLabel}
+        onPress={onBack}
+        hitSlop={8}
+        style={styles.stepperButton}
+      >
+        <Text style={[styles.stepperGlyph, { color: theme.primary }]}>{'<'}</Text>
+      </TouchableOpacity>
+      <Text testID={`${testID}-value`} style={[styles.stepperValue, { color: theme.text }]}>
+        {value}
+      </Text>
+      <TouchableOpacity
+        testID={`${testID}-forward`}
+        accessibilityRole="button"
+        accessibilityLabel={forwardLabel}
+        onPress={onForward}
+        hitSlop={8}
+        style={styles.stepperButton}
+      >
+        <Text style={[styles.stepperGlyph, { color: theme.primary }]}>{'>'}</Text>
+      </TouchableOpacity>
+    </View>
+  </View>
+);
+
+const Chip: React.FC<{
+  label: string;
+  selected: boolean;
+  onPress: () => void;
+  testID: string;
+  theme: ChatTheme;
+}> = ({ label, selected, onPress, testID, theme }) => (
+  <TouchableOpacity
+    testID={testID}
+    accessibilityRole="button"
+    accessibilityState={{ selected }}
+    onPress={onPress}
+    activeOpacity={0.8}
+    style={[
+      styles.chip,
+      {
+        borderColor: selected ? theme.primary : theme.border,
+        backgroundColor: selected ? theme.primary + '1A' : 'transparent',
+      },
+    ]}
+  >
+    <Text
+      style={{
+        color: selected ? theme.primary : theme.text,
+        fontSize: 13,
+        fontWeight: '500',
+      }}
+    >
+      {label}
+    </Text>
+  </TouchableOpacity>
+);
+
+const Form: React.FC<{ editor: EditorState }> = ({ editor }) => {
+  const t = useT();
+  const locale = useUiLocale();
+  const theme = useTheme();
+  const { config } = useChatSettingState();
+  const existing = editor.mode === 'edit' ? editor.detail.scheduledCall : null;
+
+  const [title, setTitle] = useState(existing?.title || '');
+  const [notes, setNotes] = useState(existing?.description || '');
+  const [startMs, setStartMs] = useState(() =>
+    existing ? Date.parse(existing.startAt) : defaultStartMs(Date.now())
+  );
+  const [duration, setDuration] = useState(
+    existing?.durationMinutes || DEFAULT_DURATION_MINUTES
+  );
+  const [kind, setKind] = useState<Kind>(existing?.kind || 'video');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Audio is its own opt-in on the call buttons; the schedule follows it.
+  const audioAllowed =
+    config?.videoCalls?.enableAudioCalls === true || kind === 'audio';
+
+  const submit = async () => {
+    if (busy) {return;}
+    const problem = validateStart(startMs, Date.now(), {
+      allowPast: editor.mode === 'edit',
+    });
+    if (problem === 'pastTime') {
+      setError(t('booking.error.pastTime'));
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const payload = {
+        title: title.trim() || t('call.title'),
+        description: notes.trim(),
+        startAt: new Date(startMs).toISOString(),
+        durationMinutes: clampDuration(duration),
+        kind,
+      };
+      if (editor.mode === 'edit') {
+        await updateScheduledCall(editor.detail.scheduledCall.slug, payload);
+        invalidateScheduledCallDetail(editor.detail.scheduledCall.slug);
+        notifyScheduledCall('success', t('booking.toast.updated'));
+      } else {
+        await createScheduledCall({
+          ...payload,
+          chatName: chatNameOfRoom(editor.roomJid),
+          timezone: deviceTimezone(),
+        });
+        notifyScheduledCall('success', t('booking.toast.scheduled'));
+      }
+      scheduledCallUi.closeEditor();
+    } catch (failure: any) {
+      setError(
+        failure?.serverCode === 'START_IN_PAST'
+          ? t('booking.error.pastTime')
+          : t('booking.error.save')
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <>
+      <View>
+        <Text style={[styles.label, { color: theme.textSecondary }]}>
+          {t('booking.field.title')}
+        </Text>
+        <TextInput
+          testID="schedule-call-title"
+          value={title}
+          onChangeText={setTitle}
+          maxLength={TITLE_MAX}
+          placeholder={t('call.title')}
+          placeholderTextColor={theme.textMuted}
+          style={[
+            styles.input,
+            { backgroundColor: theme.surfaceSecondary, color: theme.text },
+          ]}
+        />
+      </View>
+
+      <Stepper
+        testID="schedule-call-date"
+        label={t('booking.field.date')}
+        value={formatDay(startMs, locale)}
+        onBack={() => setStartMs((v) => shiftDays(v, -1))}
+        onForward={() => setStartMs((v) => shiftDays(v, 1))}
+        backLabel={t('booking.a11y.previousDay')}
+        forwardLabel={t('booking.a11y.nextDay')}
+        theme={theme}
+      />
+      <Stepper
+        testID="schedule-call-time"
+        label={t('booking.field.time')}
+        value={formatClock(startMs, locale)}
+        onBack={() => setStartMs((v) => shiftMinutes(v, -TIME_STEP_MINUTES))}
+        onForward={() => setStartMs((v) => shiftMinutes(v, TIME_STEP_MINUTES))}
+        backLabel={t('booking.a11y.earlier')}
+        forwardLabel={t('booking.a11y.later')}
+        theme={theme}
+      />
+
+      <View>
+        <Text style={[styles.label, { color: theme.textSecondary }]}>
+          {t('booking.field.duration')}
+        </Text>
+        <View style={styles.chips}>
+          {DURATION_CHOICES.map((minutes) => (
+            <Chip
+              key={minutes}
+              testID={`schedule-call-duration-${minutes}`}
+              label={t('booking.duration.minutes', { n: minutes })}
+              selected={duration === minutes}
+              onPress={() => setDuration(minutes)}
+              theme={theme}
+            />
+          ))}
+        </View>
+      </View>
+
+      {audioAllowed && (
+        <View>
+          <Text style={[styles.label, { color: theme.textSecondary }]}>
+            {t('booking.field.kind')}
+          </Text>
+          <View style={styles.chips}>
+            <Chip
+              testID="schedule-call-kind-video"
+              label={t('call.videoCall')}
+              selected={kind === 'video'}
+              onPress={() => setKind('video')}
+              theme={theme}
+            />
+            <Chip
+              testID="schedule-call-kind-audio"
+              label={t('call.audioCall')}
+              selected={kind === 'audio'}
+              onPress={() => setKind('audio')}
+              theme={theme}
+            />
+          </View>
+        </View>
+      )}
+
+      <View>
+        <Text style={[styles.label, { color: theme.textSecondary }]}>
+          {t('booking.field.notes')}
+        </Text>
+        <TextInput
+          testID="schedule-call-notes"
+          value={notes}
+          onChangeText={setNotes}
+          maxLength={NOTES_MAX}
+          multiline
+          placeholder={t('booking.field.notesPlaceholder')}
+          placeholderTextColor={theme.textMuted}
+          style={[
+            styles.input,
+            styles.notes,
+            { backgroundColor: theme.surfaceSecondary, color: theme.text },
+          ]}
+        />
+      </View>
+
+      {error && (
+        <Text testID="schedule-call-error" style={{ color: theme.danger }}>
+          {error}
+        </Text>
+      )}
+
+      <PrimaryButton
+        testID="schedule-call-submit"
+        label={
+          editor.mode === 'edit'
+            ? t('booking.action.save')
+            : t('booking.action.create')
+        }
+        onPress={() => {
+          void submit();
+        }}
+        busy={busy}
+      />
+    </>
+  );
+};
+
+/** The schedule / edit sheet. Lives in ScheduledCallHost. */
+export const ScheduleCallSheet: React.FC = () => {
+  const { editor } = useScheduledCallUi();
+  const t = useT();
+  // Keep the last editor while the modal fades so the form does not blank.
+  const [shown, setShown] = useState<EditorState | null>(editor);
+  useEffect(() => {
+    if (editor) {setShown(editor);}
+  }, [editor]);
+  const formKey = useMemo(
+    () =>
+      shown
+        ? shown.mode === 'edit'
+          ? `edit:${shown.detail.scheduledCall.slug}`
+          : `create:${shown.roomJid}`
+        : 'none',
+    [shown]
+  );
+  if (!shown) {return null;}
+  return (
+    <BookingSheet
+      visible={!!editor}
+      onClose={scheduledCallUi.closeEditor}
+      title={
+        shown.mode === 'edit'
+          ? t('booking.sheet.editTitle')
+          : t('booking.sheet.createTitle')
+      }
+      testID="schedule-call-sheet"
+    >
+      {/* A fresh form per call, so reopening never shows the last values. */}
+      {editor && <Form key={formKey} editor={editor} />}
+    </BookingSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  label: { fontSize: 12, fontWeight: '600', marginBottom: 6 },
+  input: {
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    fontSize: 15,
+  },
+  notes: { minHeight: 72, textAlignVertical: 'top' },
+  stepper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 12,
+  },
+  stepperButton: {
+    width: 48,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stepperGlyph: { fontSize: 20, fontWeight: '600' },
+  stepperValue: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+  chip: {
+    borderWidth: 1,
+    borderRadius: 16,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+});

package/src/components/Booking/ScheduledCallCard.tsx

@@ -0,0 +1,216 @@
+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 type { ScheduledCallDetail } from '../../networking/api-requests/scheduledCalls.api';
+import type { ScheduledCallCardData } from '../../booking/scheduledCall';
+import { scheduledCallUi } from '../../booking/scheduledCallStore';
+import {
+  canManageScheduledCall,
+  confirmAndCancelScheduledCall,
+  getScheduledCallDetailCached,
+  joinScheduledCall,
+  notifyScheduledCall,
+} from '../../booking/scheduledCallActions';
+import { formatClock } from '../../booking/scheduleForm';
+import {
+  CalendarButtons,
+  PrimaryButton,
+  StatePill,
+  describeWhen,
+  stateLabelKey,
+  useBookingStyles,
+  useScheduledCallState,
+} from './bookingShared';
+
+interface ScheduledCallCardProps {
+  card: ScheduledCallCardData;
+  roomJid: string;
+}
+
+/**
+ * The invite card of one scheduled call. Upcoming / joinable / ended /
+ * cancelled are decided by getScheduledCallCardState; nothing here starts
+ * media, Join is a button the user taps.
+ */
+export const ScheduledCallCard: React.FC<ScheduledCallCardProps> = ({
+  card,
+  roomJid,
+}) => {
+  const t = useT();
+  const locale = useUiLocale();
+  const { theme } = useBookingStyles();
+  const { user, config } = useChatSettingState();
+  const joinAllowed = config?.scheduledCalls?.enabled !== false;
+  const roomRole = useSelector(
+    (state: RootState) => state.rooms.rooms[roomJid]?.role
+  );
+  const { state, now } = useScheduledCallState(card);
+  const live = state === 'upcoming' || state === 'joinable';
+
+  // The invite names its creator, so nobody has to ask the API who may edit.
+  // Only an invite that predates `scheduledCallCreatedBy` still looks it up.
+  const [fetchedCreator, setFetchedCreator] = useState('');
+  const version = `${card.status}|${card.startAt}|${card.durationMinutes}|${card.title}`;
+  useEffect(() => {
+    if (!live || card.createdBy) {return undefined;}
+    let cancelled = false;
+    getScheduledCallDetailCached(card.slug, version)
+      .then((value) => {
+        if (!cancelled) {setFetchedCreator(value.scheduledCall.createdBy || '');}
+      })
+      .catch(() => undefined);
+    return () => {
+      cancelled = true;
+    };
+  }, [card.slug, card.createdBy, version, live]);
+
+  const canManage =
+    live &&
+    canManageScheduledCall({
+      createdBy: card.createdBy || fetchedCreator,
+      userId: user?._id,
+      roomRole,
+    });
+
+  // Edit needs the whole record (notes, kind); fetch it when it is tapped.
+  const editCall = () => {
+    getScheduledCallDetailCached(card.slug, version)
+      .then((detail: ScheduledCallDetail) =>
+        scheduledCallUi.openEdit(roomJid, detail)
+      )
+      .catch(() => notifyScheduledCall('error', t('booking.error.failed')));
+  };
+
+  const dimmed = state === 'ended' || state === 'cancelled';
+  const title = card.title || t('call.title');
+  const tone =
+    state === 'cancelled' ? 'danger' : state === 'joinable' ? 'active' : 'neutral';
+  const styles = createCardStyles(theme.surface, theme.border);
+
+  return (
+    <View style={styles.wrap}>
+      <View
+        testID={`scheduled-call-card-${card.slug}`}
+        style={[styles.card, dimmed && styles.dimmed]}
+      >
+        <View style={styles.header}>
+          <Text
+            testID="scheduled-call-title"
+            numberOfLines={2}
+            style={[
+              styles.title,
+              { color: theme.text },
+              state === 'cancelled' && styles.struck,
+            ]}
+          >
+            {title}
+          </Text>
+          <StatePill
+            label={t(stateLabelKey(state, card.startMs, now))}
+            tone={tone}
+          />
+        </View>
+        <Text
+          testID="scheduled-call-when"
+          style={[
+            styles.when,
+            { color: theme.textSecondary },
+            state === 'cancelled' && styles.struck,
+          ]}
+        >
+          {describeWhen(card, t, locale)}
+        </Text>
+        <Text style={[styles.kind, { color: theme.textSecondary }]}>
+          {card.kind === 'audio' ? t('call.audioCall') : t('call.videoCall')}
+          {card.status === 'updated' && state !== 'cancelled'
+            ? ` · ${t('booking.state.updated')}`
+            : ''}
+        </Text>
+
+        {live && (
+          <>
+            {joinAllowed && (
+              <PrimaryButton
+                testID="scheduled-call-join"
+                label={t('booking.action.join')}
+                disabled={state !== 'joinable'}
+                onPress={() => {
+                  void joinScheduledCall(roomJid, card.kind);
+                }}
+              />
+            )}
+            {joinAllowed && state === 'upcoming' && (
+              <Text style={[styles.hint, { color: theme.textMuted }]}>
+                {t('booking.card.opensAt', {
+                  time: formatClock(card.startMs - 15 * 60 * 1000, locale),
+                })}
+              </Text>
+            )}
+            <CalendarButtons
+              t={t}
+              googleUrl={card.googleUrl}
+              outlookUrl={card.outlookUrl}
+              icsUrl={card.icsUrl}
+              testIDPrefix="scheduled-call"
+            />
+          </>
+        )}
+
+        {canManage && (
+          <View style={styles.manage}>
+            <View style={styles.manageButton}>
+              <PrimaryButton
+                testID="scheduled-call-edit"
+                tone="plain"
+                label={t('booking.action.edit')}
+                onPress={editCall}
+              />
+            </View>
+            <View style={styles.manageButton}>
+              <PrimaryButton
+                testID="scheduled-call-cancel"
+                tone="plain"
+                label={t('booking.action.cancelCall')}
+                onPress={() => {
+                  void confirmAndCancelScheduledCall(card.slug);
+                }}
+              />
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const createCardStyles = (surface: string, border: string) =>
+  StyleSheet.create({
+    wrap: { width: '100%', paddingHorizontal: 16, paddingVertical: 6 },
+    card: {
+      backgroundColor: surface,
+      borderColor: border,
+      borderWidth: 1,
+      borderRadius: 16,
+      padding: 14,
+      gap: 10,
+    },
+    dimmed: { opacity: 0.6 },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8,
+    },
+    title: { flex: 1, fontSize: 16, fontWeight: '600' },
+    struck: { textDecorationLine: 'line-through' },
+    when: { fontSize: 14 },
+    kind: { fontSize: 12 },
+    hint: { fontSize: 12, textAlign: 'center' },
+    manage: { flexDirection: 'row', gap: 8 },
+    manageButton: { flex: 1 },
+  });
+
+export default ScheduledCallCard;

package/src/components/Booking/ScheduledCallHost.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ScheduleCallSheet } from './ScheduleCallSheet';
+import { ScheduledCallPreJoin } from './ScheduledCallPreJoin';
+
+/**
+ * Mounts the scheduled-call sheets once, next to the call overlay. They live
+ * above the chat (not inside a room) because a link can open the pre-join
+ * screen while the user is on a host-app screen or the room list.
+ * Both render nothing until the flow opens them.
+ */
+export const ScheduledCallHost: React.FC = () => (
+  <>
+    <ScheduleCallSheet />
+    <ScheduledCallPreJoin />
+  </>
+);
+
+export default ScheduledCallHost;

package/src/components/Booking/ScheduledCallMessage.tsx

@@ -0,0 +1,62 @@
+import React, { Fragment } from 'react';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../../roomStore';
+import type { IConfig, IMessage } from '../../types/types';
+import DateLabel from '../styled/DateLabel';
+import {
+  latestScheduledCallMessage,
+  parseScheduledCallMessage,
+} from '../../booking/scheduledCall';
+import ScheduledCallCard from './ScheduledCallCard';
+
+interface ScheduledCallMessageProps {
+  message: IMessage;
+  config?: IConfig;
+  showDateLabel: boolean;
+  CustomDaySeparator?: React.ComponentType<{
+    date: Date;
+    formattedDate: string;
+  }>;
+}
+
+/**
+ * One card per slug: only the room's newest message for a slug draws it (with
+ * that message's status); every older message of the same slug draws nothing.
+ * A message that is not a usable invite falls back to nothing too, its body
+ * text is the plain "Scheduled call: ..." line old clients show.
+ */
+export const ScheduledCallMessage: React.FC<ScheduledCallMessageProps> = ({
+  message,
+  config,
+  showDateLabel,
+  CustomDaySeparator,
+}) => {
+  const roomJid = message.roomJid;
+  const slug = String((message as any).scheduledCallSlug || '');
+  const latest = useSelector((state: RootState) =>
+    latestScheduledCallMessage(state.rooms.rooms[roomJid]?.messages, slug)
+  );
+  // Not in the room list (a jump window, a thread): this message stands alone.
+  const owner = latest || message;
+  if (owner.id !== message.id) {return null;}
+  const card = parseScheduledCallMessage(owner);
+  if (!card) {return null;}
+
+  const date = new Date(message.date);
+  return (
+    <Fragment>
+      {showDateLabel &&
+        (CustomDaySeparator ? (
+          <CustomDaySeparator
+            date={date}
+            formattedDate={date.toLocaleDateString()}
+          />
+        ) : (
+          <DateLabel date={date} colors={config?.colors} />
+        ))}
+      <ScheduledCallCard card={card} roomJid={roomJid} />
+    </Fragment>
+  );
+};
+
+export default ScheduledCallMessage;