@repzo/widget-react-native 1.0.4 → 1.0.6

package/src/ui/components/RatingCard.tsx

@@ -0,0 +1,355 @@
+/**
+ * Conversation rating card (CSAT), posted two minutes after a teammate closes
+ * the chat. Port of `client/src/widget/components/RatingCard.tsx`.
+ *
+ * Tapping a face saves it right away; after 😠/🙁 the visitor can also tap a
+ * reason, labelled in their language. A comment locks the rating. The server enforces the change window and answers
+ * 409 (locked) or 410 (expired), which the card shows instead of the faces'
+ * actions.
+ */
+
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+
+import type { ConversationRatingResult, RatingReason } from '../../types';
+import { contrastingTextColor, fontSize, palette, radius, spacing, withAlpha } from '../styles/theme';
+
+/** 1..5, worst to best — Intercom's five faces. */
+const RATING_SCALE = [
+  { value: 1, emoji: '😠' },
+  { value: 2, emoji: '🙁' },
+  { value: 3, emoji: '😐' },
+  { value: 4, emoji: '🙂' },
+  { value: 5, emoji: '🤩' },
+] as const;
+
+export interface RatingCardLabels {
+  question: string;
+  reasonPrompt: string;
+  commentPlaceholder: string;
+  submit: string;
+  thanks: string;
+  locked: string;
+  expired: string;
+  failed: string;
+  /** Accessibility names for the faces, worst to best. */
+  scale: [string, string, string, string, string];
+}
+
+/** 1–2 asks for a reason; 3 is neutral, 4–5 good. */
+export const isBadRating = (rating: number | null) => rating != null && rating <= 2;
+
+const isRatingReason = (value: unknown): value is RatingReason =>
+  !!value &&
+  typeof value === 'object' &&
+  typeof (value as RatingReason).id === 'string' &&
+  !!(value as RatingReason).labels &&
+  typeof (value as RatingReason).labels === 'object';
+
+/** The rating card carried by a system message's metadata, or null. */
+export function getRatingRequest(metadata: Record<string, unknown> | null | undefined) {
+  if (!metadata || metadata.event !== 'rating_request' || typeof metadata.ratingId !== 'string') return null;
+  const rating = typeof metadata.rating === 'number' && metadata.rating >= 1 && metadata.rating <= 5 ? metadata.rating : null;
+  const comment = typeof metadata.ratingComment === 'string' && metadata.ratingComment ? metadata.ratingComment : null;
+  const reason = typeof metadata.ratingReason === 'string' && metadata.ratingReason ? metadata.ratingReason : null;
+  const reasons = Array.isArray(metadata.ratingReasons) ? metadata.ratingReasons.filter(isRatingReason) : [];
+  return { ratingId: metadata.ratingId, rating, comment, reason, reasons };
+}
+
+/**
+ * A reason's label in the first of `locales` it has (full code, then its base
+ * language: "ar-SA" → "ar"), else English, else whatever it has.
+ */
+export function reasonLabel(reason: RatingReason, locales: Array<string | null | undefined>): string {
+  for (const locale of [...locales, 'en']) {
+    if (!locale) continue;
+    const label = reason.labels[locale] || reason.labels[locale.split('-')[0]!];
+    if (label) return label;
+  }
+  return Object.values(reason.labels).find(Boolean) ?? reason.id;
+}
+
+interface RatingCardProps {
+  ratingId: string;
+  initialRating: number | null;
+  initialComment: string | null;
+  initialReason: string | null;
+  /** Offered after a bad rating (1–2). */
+  reasons: RatingReason[];
+  /** The visitor's language first, then the widget's default. */
+  locales: Array<string | null | undefined>;
+  color: string;
+  labels: RatingCardLabels;
+  onRate?: (
+    ratingId: string,
+    data: { rating: number; reason?: string; comment?: string }
+  ) => Promise<ConversationRatingResult>;
+}
+
+export function RatingCard({
+  ratingId,
+  initialRating,
+  initialComment,
+  initialReason,
+  reasons,
+  locales,
+  color,
+  labels,
+  onRate,
+}: RatingCardProps) {
+  const [rating, setRating] = useState<number | null>(initialRating);
+  const [reason, setReason] = useState<string | null>(initialReason);
+  const [comment, setComment] = useState<string | null>(initialComment);
+  const [draft, setDraft] = useState('');
+  const [pending, setPending] = useState(false);
+  const [closedReason, setClosedReason] = useState<'locked' | 'expired' | null>(initialComment ? 'locked' : null);
+  const [failed, setFailed] = useState(false);
+  const interactive = !!onRate && !closedReason && !pending;
+  const canSubmit = !pending && draft.trim().length > 0;
+
+  const submit = async (next: { rating: number; reason?: string; comment?: string }) => {
+    if (!onRate || pending) return;
+    setPending(true);
+    setFailed(false);
+    try {
+      const result = await onRate(ratingId, next);
+      setRating(result.rating);
+      setReason(result.reason ?? null);
+      setComment(result.comment);
+      if (result.locked) setClosedReason('locked');
+      setDraft('');
+    } catch (error) {
+      const status = (error as { status?: number }).status;
+      if (status === 409) setClosedReason('locked');
+      else if (status === 410) setClosedReason('expired');
+      else setFailed(true);
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const status =
+    closedReason === 'expired'
+      ? labels.expired
+      : closedReason === 'locked' && !comment
+        ? labels.locked
+        : failed
+          ? labels.failed
+          : rating != null
+            ? labels.thanks
+            : null;
+
+  return (
+    <View style={styles.row}>
+      <View style={styles.card} testID="repzo-rating-card">
+        <Text style={styles.question}>{labels.question}</Text>
+        <View style={styles.faces} accessibilityRole="radiogroup">
+          {RATING_SCALE.map((entry, index) => {
+            const selected = rating === entry.value;
+            return (
+              <Pressable
+                key={entry.value}
+                accessibilityRole="radio"
+                accessibilityLabel={labels.scale[index]}
+                accessibilityState={{ checked: selected, disabled: !interactive }}
+                disabled={!interactive}
+                hitSlop={4}
+                onPress={() => {
+                  if (!selected) void submit({ rating: entry.value });
+                }}
+                style={({ pressed }) => [
+                  styles.face,
+                  selected && { borderColor: color, backgroundColor: withAlpha(color, 0.08) },
+                  rating != null && !selected && styles.faceDimmed,
+                  pressed && styles.facePressed,
+                ]}>
+                <Text style={styles.emoji}>{entry.emoji}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+
+        {status ? <Text style={[styles.status, failed && styles.statusFailed]}>{status}</Text> : null}
+
+        {isBadRating(rating) && reasons.length > 0 && (interactive || reason) ? (
+          <View style={styles.reasons}>
+            {interactive ? <Text style={styles.reasonPrompt}>{labels.reasonPrompt}</Text> : null}
+            <View style={styles.chips} accessibilityRole="radiogroup" accessibilityLabel={labels.reasonPrompt}>
+              {reasons
+                .filter((item) => interactive || item.id === reason)
+                .map((item) => {
+                  const selected = item.id === reason;
+                  return (
+                    <Pressable
+                      key={item.id}
+                      accessibilityRole="radio"
+                      accessibilityState={{ checked: selected, disabled: !interactive }}
+                      disabled={!interactive}
+                      onPress={() => {
+                        if (!selected && rating != null) void submit({ rating, reason: item.id });
+                      }}
+                      style={({ pressed }) => [
+                        styles.chip,
+                        selected && { backgroundColor: color, borderColor: color },
+                        pressed && styles.facePressed,
+                      ]}>
+                      <Text style={[styles.chipText, selected && { color: contrastingTextColor(color) }]}>
+                        {reasonLabel(item, locales)}
+                      </Text>
+                    </Pressable>
+                  );
+                })}
+            </View>
+          </View>
+        ) : null}
+
+        {comment ? (
+          <Text style={styles.comment}>{comment}</Text>
+        ) : rating != null && !closedReason ? (
+          <View style={styles.form}>
+            <TextInput
+              value={draft}
+              onChangeText={setDraft}
+              editable={!pending}
+              multiline
+              maxLength={2000}
+              placeholder={labels.commentPlaceholder}
+              placeholderTextColor={palette.textSubtle}
+              style={styles.input}
+            />
+            <Pressable
+              accessibilityRole="button"
+              disabled={!canSubmit}
+              onPress={() => {
+                const text = draft.trim();
+                if (text && rating != null) void submit({ rating, comment: text });
+              }}
+              style={({ pressed }) => [
+                styles.submit,
+                { backgroundColor: color },
+                !canSubmit && styles.submitDisabled,
+                pressed && canSubmit && styles.facePressed,
+              ]}>
+              <Text style={[styles.submitText, { color: contrastingTextColor(color) }]}>{labels.submit}</Text>
+            </Pressable>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    alignItems: 'center',
+    paddingVertical: spacing.md,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 340,
+    gap: spacing.md,
+    padding: spacing.lg,
+    borderRadius: radius.xl,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    backgroundColor: palette.white,
+  },
+  question: {
+    textAlign: 'center',
+    color: palette.ink,
+    fontSize: fontSize.body,
+    fontWeight: '600',
+  },
+  faces: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: spacing.sm,
+  },
+  face: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    borderWidth: 2,
+    borderColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  faceDimmed: {
+    opacity: 0.45,
+  },
+  facePressed: {
+    opacity: 0.7,
+  },
+  emoji: {
+    fontSize: 28,
+  },
+  status: {
+    textAlign: 'center',
+    color: palette.textMuted,
+    fontSize: fontSize.meta,
+  },
+  statusFailed: {
+    color: palette.danger,
+  },
+  reasons: {
+    gap: spacing.sm,
+  },
+  reasonPrompt: {
+    color: palette.ink,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+  chips: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.sm,
+  },
+  chip: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.pill,
+    borderWidth: 1,
+    borderColor: palette.border,
+    backgroundColor: palette.white,
+  },
+  chipText: {
+    color: palette.ink,
+    fontSize: fontSize.meta,
+  },
+  comment: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.md,
+    backgroundColor: palette.surfaceAlt,
+    color: palette.ink,
+    fontSize: fontSize.meta,
+    writingDirection: 'auto',
+  },
+  form: {
+    gap: spacing.sm,
+  },
+  input: {
+    minHeight: 64,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderColor: palette.border,
+    color: palette.ink,
+    fontSize: fontSize.input,
+    textAlignVertical: 'top',
+  },
+  submit: {
+    alignSelf: 'flex-end',
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.pill,
+  },
+  submitDisabled: {
+    opacity: 0.5,
+  },
+  submitText: {
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+});

package/src/ui/hooks/use-top-inset.ts

@@ -0,0 +1,16 @@
+/**
+ * How far a screen's header must reach up to sit under the status bar.
+ *
+ * The messenger draws edge to edge. Screens with a brand header (home, chat)
+ * extend that header's background into the status-bar area instead of leaving
+ * a white strip above it; the provider gives them the inset through this
+ * context and pads every other screen itself, so this is 0 for them.
+ */
+
+import { createContext, useContext } from 'react';
+
+export const TopInsetContext = createContext(0);
+
+export function useTopInset(): number {
+  return useContext(TopInsetContext);
+}

package/src/ui/screens/chat/ChatView.tsx

@@ -45,14 +45,16 @@ import { AttachmentChips } from '../../components/AttachmentChips';
 import { AttachmentMenu, showNativeAttachmentMenu } from '../../components/AttachmentMenu';
 import { Avatar } from '../../components/Avatar';
 import { ImageViewer } from '../../components/ImageViewer';
+import { getRatingRequest, RatingCard } from '../../components/RatingCard';
 import { WidgetErrorBoundary } from '../../components/ErrorBoundary';
 import { GradientBackground } from '../../components/Gradient';
 import { ArrowUpIcon, ChatOutlineIcon, ChevronIcon, ClockIcon, PaperclipIcon } from '../../components/icons';
 import { TeamAvatars } from '../../components/TeamAvatars';
 import { Markdown } from '../../components/Markdown';
 import { useReduceMotion } from '../../hooks/use-reduce-motion';
+import { useTopInset } from '../../hooks/use-top-inset';
 import { globalStyles } from '../../styles/global';
-import { contrastingTextColor, mixHex, palette, withAlpha } from '../../styles/theme';
+import { contrastingTextColor, mixHex, palette, spacing, withAlpha } from '../../styles/theme';
 import { formatClockTime, formatDayLabel, isSameDay } from '../../utils/conversations';
 import { stripHtml } from '../../utils/html';
 import { isHttpUrl, openExternalUrl } from '../../utils/safe-url';
@@ -81,6 +83,8 @@ export function ChatView({
   onPickAttachments,
   onSendMessage,
   onIdentifyVisitor,
+  onRateConversation,
+  defaultLocale,
   onLoadMore,
   onTyping,
   onBack,
@@ -327,6 +331,7 @@ export function ChatView({
     .find((message) => message.direction === 'inbound' && (message.messageType ?? 'message') === 'message')?.id;
   // Two stops off the brand color: flat fill looked like an unstyled block.
   // A non-hex brand color falls through mixHex unchanged and renders solid.
+  const topInset = useTopInset();
   const headerGradient = [color, mixHex(color, '#000000', 0.16)];
   const headerControl = { backgroundColor: withAlpha(headerTextColor, 0.16) };
 
@@ -336,7 +341,12 @@ export function ChatView({
           was empty whenever no agent was assigned yet. */}
       <GradientBackground
         colors={headerGradient}
-        style={[styles.header, { borderBottomColor: mixHex(color, '#000000', 0.26) }]}>
+        style={[
+          styles.header,
+          { borderBottomColor: mixHex(color, '#000000', 0.26) },
+          // Reaches under the status bar so the brand colour runs to the top.
+          topInset > 0 ? { paddingTop: spacing.md + topInset, minHeight: 72 + topInset } : null,
+        ]}>
         <Pressable
           onPress={onBack}
           accessibilityRole="button"
@@ -482,6 +492,8 @@ export function ChatView({
                   color={color}
                   labels={labels}
                   onOpenImage={setViewerImage}
+                  onRateConversation={onRateConversation}
+                  locales={[locale, defaultLocale]}
                   senderLabel={
                     isAgentMessage && (startsRun || startsDay)
                       ? message.senderName || agentName || labels.team
@@ -633,6 +645,8 @@ function MessageBubble({
   onSubmitProcedureForm,
   onAgentUiAction,
   onOpenImage,
+  onRateConversation,
+  locales,
 }: {
   message: Message;
   color: string;
@@ -643,6 +657,8 @@ function MessageBubble({
   onSubmitProcedureForm?: (body: string) => void;
   onAgentUiAction?: (action: AgentUiAction) => void | Promise<void>;
   onOpenImage: (image: { url: string; name: string }) => void;
+  onRateConversation?: ChatViewProps['onRateConversation'];
+  locales: Array<string | null | undefined>;
 }) {
   const joinedName = message.metadata?.event === 'agent_joined' ? message.metadata?.agentName : null;
   if (message.messageType === 'system' && typeof joinedName === 'string' && joinedName) {
@@ -661,6 +677,23 @@ function MessageBubble({
     );
   }
 
+  const ratingRequest = message.messageType === 'system' ? getRatingRequest(message.metadata) : null;
+  if (ratingRequest) {
+    return (
+      <RatingCard
+        ratingId={ratingRequest.ratingId}
+        initialRating={ratingRequest.rating}
+        initialComment={ratingRequest.comment}
+        initialReason={ratingRequest.reason}
+        reasons={ratingRequest.reasons}
+        locales={locales}
+        color={color}
+        labels={labels.rating}
+        onRate={onRateConversation ? (ratingId, data) => onRateConversation(message.id, ratingId, data) : undefined}
+      />
+    );
+  }
+
   if (message.messageType === 'system') {
     const text = message.bodyPlain || stripHtml(message.body || '') || labels.conversationUpdated;
     return (

package/src/ui/screens/chat/ChatView.types.ts

@@ -5,11 +5,13 @@ import type { DraftAttachment, PickResult } from '../../../attachments/pickers';
 import type {
   AgentUiAction,
   AttachmentSource,
+  ConversationRatingResult,
   Message,
   OutgoingAttachment,
 } from '../../../types';
 import type { AgentUiBlockLabels } from '../../components/AgentUiBlocks';
 import type { ImageViewerLabels } from '../../components/ImageViewer';
+import type { RatingCardLabels } from '../../components/RatingCard';
 
 export interface ChatLabels {
   back: string;
@@ -34,6 +36,7 @@ export interface ChatLabels {
   procedureSend: string;
   procedureSent: string;
   blocks: AgentUiBlockLabels;
+  rating: RatingCardLabels;
   attach: AttachLabels;
   viewer: ImageViewerLabels;
 }
@@ -88,6 +91,14 @@ export interface ChatViewProps {
     action?: AgentUiAction
   ) => Promise<void>;
   onIdentifyVisitor?: (data: { email?: string; name?: string; phone?: string }) => Promise<void>;
+  /** Answers a rating card; rejects with the server error (409 locked, 410 expired). */
+  onRateConversation?: (
+    messageId: string,
+    ratingId: string,
+    data: { rating: number; reason?: string; comment?: string }
+  ) => Promise<ConversationRatingResult>;
+  /** The widget's default language — rating reasons fall back to it. */
+  defaultLocale?: string;
   onLoadMore: () => void;
   onTyping: (isTyping: boolean) => void;
   onBack: () => void;

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

@@ -23,6 +23,9 @@ export const START_CARD_LIFT = 28;
 export const START_CARD_MIN_HEIGHT = 76;
 export const HEADER_FADE_HEIGHT = 90;
 export const CLOSE_BUTTON_SIZE = 28;
+/** The logo keeps its own shape at this height, up to the web widget's max width. */
+export const LOGO_HEIGHT = 40;
+export const LOGO_MAX_WIDTH = 152;
 export const CLOSE_ICON_SIZE = 14;
 
 export const styles = StyleSheet.create({
@@ -58,8 +61,7 @@ export const styles = StyleSheet.create({
     minHeight: 40,
   },
   logo: {
-    width: 132,
-    height: 40,
+    height: LOGO_HEIGHT,
   },
   closeButton: {
     marginStart: 'auto',

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

@@ -13,7 +13,7 @@
  * send today.
  */
 
-import { Fragment, useEffect, useRef, type ReactNode } from 'react';
+import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react';
 import {
   Animated,
   Easing,
@@ -37,6 +37,7 @@ import {
   CloseIcon,
 } from '../../components/icons';
 import { useReduceMotion } from '../../hooks/use-reduce-motion';
+import { useTopInset } from '../../hooks/use-top-inset';
 import { globalStyles } from '../../styles/global';
 import { contrastingTextColor, palette, spacing, withAlpha } from '../../styles/theme';
 import { flipForRTL } from '../../utils/rtl';
@@ -45,6 +46,9 @@ import {
   CLOSE_ICON_SIZE,
   HEADER_BOTTOM_PADDING,
   HEADER_FADE_HEIGHT,
+  HEADER_MIN_HEIGHT,
+  LOGO_HEIGHT,
+  LOGO_MAX_WIDTH,
   START_CARD_LIFT,
   styles,
 } from './HomeView.styles';
@@ -55,7 +59,7 @@ import type { HomeViewProps } from './HomeView.types';
  * 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 {
+export 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;
@@ -116,8 +120,14 @@ export function HomeView({
 
   // 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.
+  // The header reaches up under the status bar (no white strip above it), so
+  // it grows by that inset and keeps its content where it was.
+  const topInset = useTopInset();
   const headerStyle = [
     styles.header,
+    topInset > 0
+      ? { paddingTop: spacing.xl + topInset, minHeight: HEADER_MIN_HEIGHT + topInset }
+      : null,
     allowNewConversations ? { paddingBottom: HEADER_BOTTOM_PADDING + START_CARD_LIFT } : null,
   ];
 
@@ -125,12 +135,7 @@ export function HomeView({
     <>
       <View style={styles.headerTop}>
         {config?.homeLogoUrl ? (
-          <Image
-            source={{ uri: config.homeLogoUrl }}
-            style={styles.logo}
-            resizeMode="contain"
-            accessibilityIgnoresInvertColors
-          />
+          <HomeLogo key={config.homeLogoUrl} uri={config.homeLogoUrl} />
         ) : (
           <View />
         )}
@@ -296,6 +301,29 @@ export function HomeView({
   );
 }
 
+/**
+ * The workspace logo at its own shape, flush with the greeting's left edge.
+ * A fixed-width box with `contain` centred a square logo inside it, so it
+ * floated in from the edge; the web widget sizes it to the image instead.
+ * Square until the image reports its size, then as wide as its ratio needs,
+ * capped like the web widget.
+ */
+function HomeLogo({ uri }: { uri: string }) {
+  const [aspectRatio, setAspectRatio] = useState(1);
+  return (
+    <Image
+      source={{ uri }}
+      style={[styles.logo, { width: Math.min(LOGO_MAX_WIDTH, LOGO_HEIGHT * aspectRatio) }]}
+      resizeMode="contain"
+      accessibilityIgnoresInvertColors
+      onLoad={(event) => {
+        const { width, height } = event.nativeEvent.source ?? {};
+        if (width && height) setAspectRatio(width / height);
+      }}
+    />
+  );
+}
+
 /**
  * Staggered entrance for the body sections. Opacity and translate only, so the
  * whole thing runs on the native driver and never touches layout.