@repzo/widget-react-native 1.0.0

package/src/ui/screens/home/HomeView.tsx

@@ -0,0 +1,336 @@
+/**
+ * Home space — branded greeting header, the "start a conversation" card, a
+ * preview of recent threads and a team/availability strip.
+ * Port of `client/src/widget/components/HomeView.tsx`.
+ *
+ * The header meets the white body on a straight seam, the same as the web
+ * widget. Whether that seam is a hard edge or the background washing out into
+ * white is the dashboard's `homeBackgroundFade` toggle, and the start card sits
+ * astride it either way: top over the brand background, bottom over white.
+ *
+ * Everything on this screen comes from the widget config or the conversations
+ * the visitor already has; nothing here assumes a field the backend does not
+ * send today.
+ */
+
+import { Fragment, useEffect, useRef, type ReactNode } from 'react';
+import {
+  Animated,
+  Easing,
+  Image,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+import type { WidgetConfig } from '../../../types';
+import { Avatar } from '../../components/Avatar';
+import { ConversationRow } from '../../components/ConversationRow';
+import { FadeOverlay, GradientBackground } from '../../components/Gradient';
+import {
+  AlertIcon,
+  ArrowRightIcon,
+  ChatIcon,
+  ChatOutlineIcon,
+  CloseIcon,
+} from '../../components/icons';
+import { useReduceMotion } from '../../hooks/use-reduce-motion';
+import { globalStyles } from '../../styles/global';
+import { contrastingTextColor, palette, spacing, withAlpha } from '../../styles/theme';
+import { flipForRTL } from '../../utils/rtl';
+import { personalizeGreeting } from './greeting';
+import {
+  CLOSE_ICON_SIZE,
+  HEADER_BOTTOM_PADDING,
+  HEADER_FADE_HEIGHT,
+  START_CARD_LIFT,
+  styles,
+} from './HomeView.styles';
+import type { HomeViewProps } from './HomeView.types';
+
+/**
+ * The admin's explicit black/white toggle always wins. Older configs can omit
+ * it, and defaulting to dark text over a dark brand header is unreadable, so
+ * derive something legible from the background instead.
+ */
+function resolveHeaderTextColor(config: WidgetConfig | null, fallbackColor: string): string {
+  if (config?.homeHeaderTextColor === 'white') return palette.white;
+  if (config?.homeHeaderTextColor === 'black') return palette.ink;
+  if (config?.homeBackgroundType === 'image') return palette.white;
+  if (config?.homeBackgroundType === 'gradient') {
+    return contrastingTextColor(config.homeBackgroundGradientStart || fallbackColor);
+  }
+  return contrastingTextColor(config?.homeBackgroundColor || fallbackColor);
+}
+
+export function HomeView({
+  config,
+  color,
+  visitorName,
+  conversationCount,
+  recentConversations,
+  unreadByConversation,
+  teamAgents,
+  isOnline,
+  offlineMessage,
+  startConversationLabel,
+  replyTimeLabel,
+  allowNewConversations,
+  showPreviousConversations,
+  labels,
+  onClose,
+  onStartConversation,
+  onViewConversations,
+  onOpenConversation,
+}: HomeViewProps) {
+  const heading = personalizeGreeting(config?.welcomeHeading, visitorName, 'Hi there');
+  // Both lines render exactly as the dashboard sent them, so the admin sees the
+  // same header in the preview and on the phone, even when the subheading
+  // repeats the reply time printed on the start card below.
+  const subheading = config?.welcomeSubheading || 'How can we help?';
+
+  const textColor = resolveHeaderTextColor(config, color);
+  const secondaryTextColor =
+    textColor === palette.white ? withAlpha(palette.white, 0.8) : 'rgba(26,26,26,0.58)';
+  // A pale brand color would otherwise put a white glyph on a near-white disc.
+  const startIconColor = contrastingTextColor(color);
+
+  const backgroundType = config?.homeBackgroundType ?? 'solid';
+  const gradientColors = [
+    config?.homeBackgroundGradientStart || '#f2f2f2',
+    config?.homeBackgroundGradientMiddle || '',
+    config?.homeBackgroundGradientEnd || '#bfbfbf',
+  ].filter(Boolean);
+  // Off, the background stops dead at the seam. On, it washes out into the body
+  // colour over the bottom of the header, so the start card lands on near-white.
+  const fade = config?.homeBackgroundFade ? <FadeOverlay height={HEADER_FADE_HEIGHT} /> : null;
+
+  const showRecent = showPreviousConversations && recentConversations.length > 0;
+  const showViewAll = conversationCount > recentConversations.length;
+  const showEmptyHint =
+    showPreviousConversations && conversationCount === 0 && allowNewConversations;
+  // One agent already has their face in the row above; repeating it reads as a bug.
+  const showAvatarStack = teamAgents.length >= 2;
+
+  // The start card is pulled up over the seam by a fixed amount, so the header
+  // pads its bottom by that same amount and the greeting never slides under it.
+  const headerStyle = [
+    styles.header,
+    allowNewConversations ? { paddingBottom: HEADER_BOTTOM_PADDING + START_CARD_LIFT } : null,
+  ];
+
+  const headerContent = (
+    <>
+      <View style={styles.headerTop}>
+        {config?.homeLogoUrl ? (
+          <Image
+            source={{ uri: config.homeLogoUrl }}
+            style={styles.logo}
+            resizeMode="contain"
+            accessibilityIgnoresInvertColors
+          />
+        ) : (
+          <View />
+        )}
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel={labels.close}
+          hitSlop={12}
+          style={styles.closeButton}>
+          <CloseIcon size={CLOSE_ICON_SIZE} color={textColor} />
+        </Pressable>
+      </View>
+      <View style={styles.headerSpacer} />
+      <FadeSlideIn>
+        <Text style={[styles.heading, { color: textColor }]}>{heading}</Text>
+        <Text style={[styles.subheading, { color: secondaryTextColor }]}>{subheading}</Text>
+      </FadeSlideIn>
+    </>
+  );
+
+  return (
+    <ScrollView
+      style={globalStyles.screen}
+      contentContainerStyle={styles.contentContainer}
+      keyboardShouldPersistTaps="handled">
+      {backgroundType === 'image' && config?.homeBackgroundImageUrl ? (
+        <View style={headerStyle}>
+          <Image
+            source={{ uri: config.homeBackgroundImageUrl }}
+            style={StyleSheet.absoluteFill}
+            resizeMode="cover"
+            accessibilityIgnoresInvertColors
+          />
+          <View style={styles.imageScrim} />
+          {headerContent}
+          {fade}
+        </View>
+      ) : backgroundType === 'gradient' ? (
+        <GradientBackground colors={gradientColors} style={headerStyle}>
+          {headerContent}
+          {fade}
+        </GradientBackground>
+      ) : (
+        <View style={[headerStyle, { backgroundColor: config?.homeBackgroundColor || '#f2f2f2' }]}>
+          {headerContent}
+          {fade}
+        </View>
+      )}
+
+      <View style={styles.body}>
+        {allowNewConversations ? (
+          <View style={styles.startCardSlot}>
+            <FadeSlideIn delay={40}>
+              <Pressable
+                onPress={onStartConversation}
+                accessibilityRole="button"
+                android_ripple={{ color: palette.borderSoft }}
+                style={({ pressed }) => [styles.startCard, pressed && styles.startCardPressed]}>
+                <View style={[styles.startIcon, { backgroundColor: color }]}>
+                  <ChatIcon size={18} color={startIconColor} />
+                </View>
+                <View style={styles.startCopy}>
+                  <Text style={styles.startTitle}>{startConversationLabel}</Text>
+                  <Text style={styles.startSubtitle}>{replyTimeLabel}</Text>
+                </View>
+                <ArrowRightIcon size={18} color={color} style={flipForRTL()} />
+              </Pressable>
+            </FadeSlideIn>
+          </View>
+        ) : null}
+
+        <View style={styles.bodyContent}>
+          {offlineMessage ? (
+            <FadeSlideIn delay={70}>
+              <View style={styles.offlineNotice}>
+                <AlertIcon size={18} />
+                <Text style={styles.offlineText}>{offlineMessage}</Text>
+              </View>
+            </FadeSlideIn>
+          ) : null}
+
+          {showRecent ? (
+            <FadeSlideIn delay={140}>
+              <View style={styles.recentHeader}>
+                <Text style={styles.recentTitle}>{labels.recentTitle}</Text>
+                {showViewAll ? (
+                  <Pressable
+                    onPress={onViewConversations}
+                    accessibilityRole="button"
+                    accessibilityLabel={labels.viewPrevious}
+                    hitSlop={10}
+                    style={({ pressed }) => [
+                      styles.viewAllButton,
+                      pressed && globalStyles.pressed,
+                    ]}>
+                    <Text style={[styles.viewAllLabel, { color }]}>{labels.viewAll}</Text>
+                  </Pressable>
+                ) : null}
+              </View>
+              <View style={[globalStyles.card, styles.recentCard]}>
+                {recentConversations.map((conversation, index) => (
+                  <Fragment key={conversation.id}>
+                    {index > 0 ? (
+                      <View style={[globalStyles.divider, styles.recentDivider]} />
+                    ) : null}
+                    <ConversationRow
+                      conversation={conversation}
+                      color={color}
+                      fallbackName={labels.team}
+                      timeLabels={labels.time}
+                      unreadCount={unreadByConversation[conversation.id] ?? 0}
+                      unreadLabel={labels.unread}
+                      horizontalPadding={spacing.lg}
+                      onPress={() => onOpenConversation(conversation.id)}
+                    />
+                  </Fragment>
+                ))}
+              </View>
+            </FadeSlideIn>
+          ) : null}
+
+          <View style={styles.spacer}>
+            {showEmptyHint ? (
+              <FadeSlideIn delay={140}>
+                <View style={styles.emptyHint}>
+                  <ChatOutlineIcon size={30} color={palette.disabled} />
+                  <Text style={styles.emptyHintText}>{labels.noConversations}</Text>
+                </View>
+              </FadeSlideIn>
+            ) : null}
+          </View>
+
+          <FadeSlideIn delay={200}>
+            <View style={styles.statusStrip}>
+              {showAvatarStack ? (
+                <View style={styles.avatarStack}>
+                  {teamAgents.map((agent, index) => (
+                    <Avatar
+                      key={`${agent.name ?? 'agent'}-${index}`}
+                      avatar={agent.avatar}
+                      name={agent.name}
+                      size={26}
+                      color={color}
+                      style={[styles.avatarStackItem, index > 0 ? styles.avatarStackOverlap : null]}
+                    />
+                  ))}
+                </View>
+              ) : null}
+              <View
+                style={[
+                  styles.statusDot,
+                  { backgroundColor: isOnline ? palette.online : palette.textSubtle },
+                ]}
+              />
+              <Text style={styles.statusText} numberOfLines={1}>
+                {isOnline ? labels.statusOnline : labels.statusAway}
+              </Text>
+            </View>
+          </FadeSlideIn>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+/**
+ * Staggered entrance for the body sections. Opacity and translate only, so the
+ * whole thing runs on the native driver and never touches layout.
+ */
+function FadeSlideIn({ delay = 0, children }: { delay?: number; children: ReactNode }) {
+  const reduceMotion = useReduceMotion();
+  const progress = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    // `null` means the reduce-motion answer has not landed yet; hold at 0
+    // rather than animating and snapping back.
+    if (reduceMotion === null) return undefined;
+    if (reduceMotion) {
+      progress.setValue(1);
+      return undefined;
+    }
+
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: 260,
+      delay,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+
+    return () => {
+      progress.stopAnimation();
+    };
+  }, [delay, progress, reduceMotion]);
+
+  const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [12, 0] });
+
+  return (
+    <Animated.View style={{ opacity: progress, transform: [{ translateY }] }}>
+      {children}
+    </Animated.View>
+  );
+}

package/src/ui/screens/home/HomeView.types.ts

@@ -0,0 +1,42 @@
+/** Props and label bundle for the Home space. */
+
+import type { Conversation, WidgetConfig } from '../../../types';
+import type { RelativeTimeLabels, TeamAgent } from '../../utils/conversations';
+
+export interface HomeViewLabels {
+  close: string;
+  /** Accessibility label for the "view all" control. */
+  viewPrevious: string;
+  viewAll: string;
+  recentTitle: string;
+  noConversations: string;
+  statusOnline: string;
+  statusAway: string;
+  /** Stand-in name while a conversation has no agent assigned. */
+  team: string;
+  time: RelativeTimeLabels;
+  /** Template with a `{count}` token. */
+  unread: string;
+}
+
+export interface HomeViewProps {
+  config: WidgetConfig | null;
+  color: string;
+  visitorName?: string;
+  conversationCount: number;
+  /** Already sorted newest-first and capped by the provider. */
+  recentConversations: Conversation[];
+  unreadByConversation: Record<string, number>;
+  teamAgents: TeamAgent[];
+  isOnline: boolean;
+  offlineMessage?: string;
+  startConversationLabel: string;
+  replyTimeLabel: string;
+  allowNewConversations: boolean;
+  showPreviousConversations: boolean;
+  labels: HomeViewLabels;
+  onClose: () => void;
+  onStartConversation: () => void;
+  onViewConversations: () => void;
+  onOpenConversation: (conversationId: string) => void;
+}

package/src/ui/screens/home/greeting.ts

@@ -0,0 +1,50 @@
+/**
+ * Greeting helpers for the Home space. The admin's heading renders exactly as
+ * the dashboard sent it, with one exception: an explicit name token, which is
+ * the admin asking for the visitor's first name to be filled in.
+ * Deliberately free of React and React Native so they stay trivial to test.
+ */
+
+/** `{{name}}`, `{name}`, `{{first_name}}` all stand in for the visitor's first name. */
+const NAME_TOKEN = /\{\{?\s*(?:name|first_?name)\s*\}?\}/gi;
+
+const EMAIL_LIKE = /@/;
+const PHONE_LIKE = /^[\d\s+()\-.]+$/;
+
+/**
+ * First name suitable for greeting someone by. Hosts sometimes put an email or
+ * a phone number in the name field, and greeting "Hi rep@acme.com" is worse
+ * than not personalizing at all.
+ */
+export function firstName(fullName?: string | null): string | null {
+  const trimmed = (fullName ?? '').trim();
+  if (!trimmed || EMAIL_LIKE.test(trimmed) || PHONE_LIKE.test(trimmed)) return null;
+  const candidate = (trimmed.split(/\s+/)[0] ?? '').replace(/[,;:.]+$/, '');
+  // Under 2 rejects a bare initial; over 24 means a sentence landed in the field.
+  if (candidate.length < 2 || candidate.length > 24) return null;
+  return candidate;
+}
+
+/** Repair the spacing and punctuation left behind when a token resolves to nothing. */
+function tidy(value: string): string {
+  return value
+    .replace(/\s+/g, ' ')
+    .replace(/\s+([,!?.:;])/g, '$1')
+    .replace(/^[\s,]+/, '')
+    .trim();
+}
+
+/**
+ * Resolve the admin's heading against the visitor's name. Only an explicit
+ * token is substituted: a generic "Hi there" stays "Hi there", because that is
+ * what the dashboard preview shows the admin and the phone has to match it.
+ */
+export function personalizeGreeting(
+  template: string | null | undefined,
+  visitorName: string | null | undefined,
+  fallback: string
+): string {
+  const base = (template ?? '').trim() || fallback;
+  const tokenized = base.replace(NAME_TOKEN, firstName(visitorName) ?? '');
+  return tokenized === base ? base : tidy(tokenized);
+}

package/src/ui/screens/pre-chat/PreChatForm.styles.ts

@@ -0,0 +1,120 @@
+/** Styles for the pre-chat form: brand header, fields and the skip/submit row. */
+
+import { StyleSheet } from 'react-native';
+
+import { fontSize, palette, radius, spacing } from '../../styles/theme';
+import { START_ALIGN } from '../../utils/rtl';
+
+export const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.md,
+    paddingHorizontal: spacing.xl,
+    paddingVertical: spacing.lg,
+    minHeight: 96,
+  },
+  headerCopy: {
+    flex: 1,
+    minWidth: 0,
+  },
+  headerTitle: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.heading,
+    fontWeight: '700',
+    marginBottom: spacing.xs,
+  },
+  headerSubtitle: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.meta,
+    lineHeight: fontSize.meta * 1.4,
+  },
+  content: {
+    flexGrow: 1,
+    padding: spacing.xxl,
+  },
+  field: {
+    marginBottom: spacing.lg,
+  },
+  label: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    color: '#374151',
+    marginBottom: spacing.xs,
+  },
+  required: {
+    color: palette.danger,
+  },
+  input: {
+    textAlign: START_ALIGN,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.disabled,
+    borderRadius: radius.sm,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm + 2,
+    fontSize: fontSize.input,
+    color: palette.ink,
+    minHeight: 46,
+  },
+  inputError: {
+    borderColor: palette.danger,
+  },
+  options: {
+    gap: spacing.sm,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.disabled,
+    borderRadius: radius.sm,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.md,
+    minHeight: 46,
+  },
+  optionLabel: {
+    fontSize: fontSize.body,
+    color: palette.ink,
+  },
+  errorText: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.caption,
+    color: palette.danger,
+    marginTop: spacing.xs,
+  },
+  actions: {
+    flexDirection: 'row',
+    gap: spacing.sm,
+    marginTop: spacing.lg,
+  },
+  skipButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.disabled,
+    borderRadius: radius.sm,
+    paddingVertical: spacing.md,
+    minHeight: 46,
+  },
+  skipLabel: {
+    fontSize: fontSize.body,
+    fontWeight: '600',
+    color: '#374151',
+  },
+  submitButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radius.sm,
+    paddingVertical: spacing.md,
+    minHeight: 46,
+  },
+  submitLabel: {
+    fontSize: fontSize.body,
+    fontWeight: '600',
+    color: palette.white,
+  },
+});