@vanira/sdk-react-native 0.0.2

package/src/presets/BookingCalendarModal.tsx

@@ -0,0 +1,457 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {
+  buildCalendarCompletePayload,
+  buildSlotsFetchRequest,
+  FALLBACK_SLOTS,
+  formatSlotTime,
+  parseSlotsResponse,
+  slotsAreEqual,
+  startOfLocalDay,
+  type SlotItem,
+} from './calendar/calendarUtils';
+import {PresetShellModal} from './PresetShellModal';
+import type {PresetContext} from './types';
+
+type Props = {
+  visible: boolean;
+  ctx: PresetContext;
+  onClose: () => void;
+  onCancel: (reason?: string) => void;
+  onComplete: (payload: Record<string, unknown>) => void;
+};
+
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] as const;
+
+export function BookingCalendarModal({
+  visible,
+  ctx,
+  onClose,
+  onCancel,
+  onComplete,
+}: Props) {
+  const today = useMemo(() => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }, []);
+
+  const mergedFields = useMemo(
+    () => ({...ctx.args, ...ctx.clientFields}),
+    [ctx.args, ctx.clientFields],
+  );
+
+  const title = String(mergedFields.title ?? 'Select Date & Time');
+  const reason = String(
+    ctx.args.reason ??
+      mergedFields.reason ??
+      'Please select a preferred time for your appointment.',
+  );
+
+  const [viewYear, setViewYear] = useState(today.getFullYear());
+  const [viewMonth, setViewMonth] = useState(today.getMonth());
+  const [selectedTs, setSelectedTs] = useState<number | null>(null);
+  const [selectedTime, setSelectedTime] = useState<SlotItem | null>(null);
+  const [slots, setSlots] = useState<SlotItem[]>([]);
+  const [slotsLoading, setSlotsLoading] = useState(false);
+  const [slotsError, setSlotsError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    setViewYear(today.getFullYear());
+    setViewMonth(today.getMonth());
+    setSelectedTs(null);
+    setSelectedTime(null);
+    setSlots([]);
+    setSlotsLoading(false);
+    setSlotsError(null);
+  }, [visible, today, ctx.toolCallId]);
+
+  const monthLabel = useMemo(
+    () =>
+      new Date(viewYear, viewMonth, 1).toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric',
+      }),
+    [viewYear, viewMonth],
+  );
+
+  const isPrevDisabled =
+    viewYear === today.getFullYear() && viewMonth === today.getMonth();
+
+  const goPrevMonth = useCallback(() => {
+    if (isPrevDisabled) {
+      return;
+    }
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear(y => y - 1);
+    } else {
+      setViewMonth(m => m - 1);
+    }
+  }, [isPrevDisabled, viewMonth]);
+
+  const goNextMonth = useCallback(() => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear(y => y + 1);
+    } else {
+      setViewMonth(m => m + 1);
+    }
+  }, [viewMonth]);
+
+  const loadSlotsForDate = useCallback(
+    async (ts: number) => {
+      setSelectedTime(null);
+      setSlots([]);
+      setSlotsError(null);
+
+      const request = buildSlotsFetchRequest(ts, mergedFields);
+      if (!request) {
+        setSlots([...FALLBACK_SLOTS]);
+        return;
+      }
+
+      setSlotsLoading(true);
+      try {
+        console.log('[BookingCalendarModal] slots API', request.url, request.method);
+        const response = await fetch(request.url, {
+          method: request.method,
+          headers: request.headers,
+          body: request.body,
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        const data = await response.json();
+        const parsed = parseSlotsResponse(data);
+        setSlots(parsed.length > 0 ? parsed : []);
+      } catch (err) {
+        console.warn('[BookingCalendarModal] slots fetch failed:', err);
+        setSlotsError('Failed to load slots. Please try again.');
+        setSlots([]);
+      } finally {
+        setSlotsLoading(false);
+      }
+    },
+    [mergedFields],
+  );
+
+  const selectDay = useCallback(
+    (ts: number) => {
+      setSelectedTs(ts);
+      loadSlotsForDate(ts);
+    },
+    [loadSlotsForDate],
+  );
+
+  const confirmEnabled = selectedTs !== null && selectedTime !== null;
+
+  const handleConfirm = useCallback(() => {
+    if (!confirmEnabled || selectedTs === null || selectedTime === null) {
+      return;
+    }
+    const tzStr = String(mergedFields.timezone ?? '');
+    const payload = buildCalendarCompletePayload(
+      selectedTs,
+      selectedTime,
+      tzStr,
+    );
+    onComplete(payload);
+  }, [confirmEnabled, mergedFields.timezone, onComplete, selectedTime, selectedTs]);
+
+  const calendarCells = useMemo(() => {
+    const firstDay = new Date(viewYear, viewMonth, 1).getDay();
+    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+    const cells: Array<{key: string; kind: 'empty' | 'day'; day?: number; ts?: number}> =
+      [];
+
+    for (let i = 0; i < firstDay; i++) {
+      cells.push({key: `empty_${i}`, kind: 'empty'});
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+      const ts = startOfLocalDay(viewYear, viewMonth, day);
+      cells.push({key: `day_${day}`, kind: 'day', day, ts});
+    }
+    return cells;
+  }, [viewMonth, viewYear]);
+
+  const slotsLabel =
+    selectedTs !== null
+      ? new Date(selectedTs).toLocaleDateString('en-US', {
+          weekday: 'long',
+          month: 'short',
+          day: 'numeric',
+        })
+      : 'Available Times';
+
+  const slotColumns =
+    slots.some(t => formatSlotTime(t).length > 8) ? 2 : 3;
+
+  return (
+    <PresetShellModal
+      visible={visible}
+      title={title}
+      subtitle={reason}
+      onClose={() => onCancel('User closed the preset')}
+      hideDefaultClose>
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled">
+        <View style={styles.monthNav}>
+          <Pressable
+            style={[styles.navBtn, isPrevDisabled && styles.navBtnDisabled]}
+            onPress={goPrevMonth}
+            disabled={isPrevDisabled}>
+            <Text style={styles.navBtnText}>‹</Text>
+          </Pressable>
+          <Text style={styles.monthLabel}>{monthLabel}</Text>
+          <Pressable style={styles.navBtn} onPress={goNextMonth}>
+            <Text style={styles.navBtnText}>›</Text>
+          </Pressable>
+        </View>
+
+        <View style={styles.weekRow}>
+          {WEEKDAYS.map(wd => (
+            <Text key={wd} style={styles.weekday}>
+              {wd}
+            </Text>
+          ))}
+        </View>
+
+        <View style={styles.grid}>
+          {calendarCells.map(cell => {
+            if (cell.kind === 'empty' || cell.ts === undefined) {
+              return <View key={cell.key} style={styles.dayCell} />;
+            }
+            const isPast = cell.ts < today.getTime();
+            const isToday = cell.ts === today.getTime();
+            const isSelected = selectedTs === cell.ts;
+            return (
+              <View key={cell.key} style={styles.dayCell}>
+                <Pressable
+                  style={[
+                    styles.dayBtn,
+                    isPast && styles.dayPast,
+                    isToday && !isSelected && styles.dayToday,
+                    isSelected && styles.daySelected,
+                  ]}
+                  disabled={isPast}
+                  onPress={() => selectDay(cell.ts!)}>
+                  <Text
+                    style={[
+                      styles.dayText,
+                      isPast && styles.dayTextPast,
+                      isSelected && styles.dayTextSelected,
+                    ]}>
+                    {cell.day}
+                  </Text>
+                </Pressable>
+              </View>
+            );
+          })}
+        </View>
+
+        {selectedTs !== null ? (
+          <View style={styles.slotsSection}>
+            <View style={styles.divider} />
+            <Text style={styles.slotsLabel}>{slotsLabel}</Text>
+
+            {slotsLoading ? (
+              <View style={styles.centered}>
+                <ActivityIndicator color="#4f46e5" />
+                <Text style={styles.loadingText}>Loading slots…</Text>
+              </View>
+            ) : null}
+
+            {slotsError ? (
+              <Text style={styles.errorText}>{slotsError}</Text>
+            ) : null}
+
+            {!slotsLoading && slots.length === 0 ? (
+              <Text style={styles.emptySlots}>
+                No slots available for this date.
+              </Text>
+            ) : null}
+
+            {!slotsLoading && slots.length > 0 ? (
+              <View style={styles.slotsGrid}>
+                {slots.map((slot, index) => {
+                  const label = formatSlotTime(slot);
+                  const isSel = slotsAreEqual(slot, selectedTime);
+                  return (
+                    <Pressable
+                      key={`${label}_${index}`}
+                      style={[
+                        styles.slotBtn,
+                        slotColumns === 2 ? styles.slotBtnCol2 : styles.slotBtnCol3,
+                        isSel && styles.slotBtnSelected,
+                      ]}
+                      onPress={() => setSelectedTime(slot)}>
+                      <Text
+                        style={[
+                          styles.slotText,
+                          isSel && styles.slotTextSelected,
+                        ]}>
+                        {label}
+                      </Text>
+                    </Pressable>
+                  );
+                })}
+              </View>
+            ) : null}
+          </View>
+        ) : null}
+      </ScrollView>
+
+      <View style={styles.actions}>
+        <Pressable
+          style={styles.cancelBtn}
+          onPress={() => onCancel('User cancelled')}>
+          <Text style={styles.cancelBtnText}>Cancel</Text>
+        </Pressable>
+        <Pressable
+          style={[styles.confirmBtn, !confirmEnabled && styles.confirmDisabled]}
+          onPress={handleConfirm}
+          disabled={!confirmEnabled}>
+          <Text style={styles.confirmBtnText}>Confirm</Text>
+        </Pressable>
+      </View>
+    </PresetShellModal>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: {maxHeight: 420},
+  scrollContent: {paddingBottom: 8},
+  monthNav: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+  },
+  navBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: '#f3f4f6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  navBtnDisabled: {opacity: 0.35},
+  navBtnText: {fontSize: 22, color: '#111', lineHeight: 24},
+  monthLabel: {fontSize: 16, fontWeight: '600', color: '#111'},
+  weekRow: {
+    flexDirection: 'row',
+    marginBottom: 6,
+  },
+  weekday: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 11,
+    fontWeight: '600',
+    color: '#9ca3af',
+  },
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  dayCell: {
+    width: '14.28%',
+    alignItems: 'center',
+    marginBottom: 6,
+  },
+  dayBtn: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dayPast: {opacity: 0.35},
+  dayToday: {borderWidth: 1, borderColor: '#4f46e5'},
+  daySelected: {backgroundColor: '#4f46e5'},
+  dayText: {fontSize: 14, color: '#111', fontWeight: '500'},
+  dayTextPast: {color: '#9ca3af'},
+  dayTextSelected: {color: '#fff', fontWeight: '700'},
+  slotsSection: {marginTop: 8},
+  divider: {
+    height: 1,
+    backgroundColor: '#e5e7eb',
+    marginVertical: 12,
+  },
+  slotsLabel: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#374151',
+    marginBottom: 10,
+  },
+  centered: {alignItems: 'center', paddingVertical: 16, gap: 8},
+  loadingText: {fontSize: 13, color: '#6b7280'},
+  errorText: {
+    fontSize: 13,
+    color: '#ef4444',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  emptySlots: {
+    fontSize: 13,
+    color: '#6b7280',
+    textAlign: 'center',
+    paddingVertical: 12,
+  },
+  slotsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  slotBtn: {
+    paddingVertical: 10,
+    paddingHorizontal: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    backgroundColor: '#f9fafb',
+    alignItems: 'center',
+  },
+  slotBtnCol3: {width: '31%'},
+  slotBtnCol2: {width: '48%'},
+  slotBtnSelected: {
+    backgroundColor: '#4f46e5',
+    borderColor: '#4f46e5',
+  },
+  slotText: {fontSize: 12, color: '#111', fontWeight: '500'},
+  slotTextSelected: {color: '#fff'},
+  actions: {
+    flexDirection: 'row',
+    gap: 10,
+    marginTop: 12,
+  },
+  cancelBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    backgroundColor: '#f3f4f6',
+    alignItems: 'center',
+  },
+  cancelBtnText: {color: '#111', fontWeight: '600'},
+  confirmBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    backgroundColor: '#4f46e5',
+    alignItems: 'center',
+  },
+  confirmDisabled: {opacity: 0.45},
+  confirmBtnText: {color: '#fff', fontWeight: '700'},
+});