@repzo/widget-react-native 1.0.4 → 1.0.6

package/lib/module/ui/components/RatingCard.js

@@ -0,0 +1,341 @@
+"use strict";
+
+/**
+ * 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 { contrastingTextColor, fontSize, palette, radius, spacing, withAlpha } from "../styles/theme.js";
+
+/** 1..5, worst to best — Intercom's five faces. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RATING_SCALE = [{
+  value: 1,
+  emoji: '😠'
+}, {
+  value: 2,
+  emoji: '🙁'
+}, {
+  value: 3,
+  emoji: '😐'
+}, {
+  value: 4,
+  emoji: '🙂'
+}, {
+  value: 5,
+  emoji: '🤩'
+}];
+/** 1–2 asks for a reason; 3 is neutral, 4–5 good. */
+export const isBadRating = rating => rating != null && rating <= 2;
+const isRatingReason = value => !!value && typeof value === 'object' && typeof value.id === 'string' && !!value.labels && typeof value.labels === 'object';
+
+/** The rating card carried by a system message's metadata, or null. */
+export function getRatingRequest(metadata) {
+  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, locales) {
+  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;
+}
+export function RatingCard({
+  ratingId,
+  initialRating,
+  initialComment,
+  initialReason,
+  reasons,
+  locales,
+  color,
+  labels,
+  onRate
+}) {
+  const [rating, setRating] = useState(initialRating);
+  const [reason, setReason] = useState(initialReason);
+  const [comment, setComment] = useState(initialComment);
+  const [draft, setDraft] = useState('');
+  const [pending, setPending] = useState(false);
+  const [closedReason, setClosedReason] = useState(initialComment ? 'locked' : null);
+  const [failed, setFailed] = useState(false);
+  const interactive = !!onRate && !closedReason && !pending;
+  const canSubmit = !pending && draft.trim().length > 0;
+  const submit = async next => {
+    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.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 /*#__PURE__*/_jsx(View, {
+    style: styles.row,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.card,
+      testID: "repzo-rating-card",
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.question,
+        children: labels.question
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.faces,
+        accessibilityRole: "radiogroup",
+        children: RATING_SCALE.map((entry, index) => {
+          const selected = rating === entry.value;
+          return /*#__PURE__*/_jsx(Pressable, {
+            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],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.emoji,
+              children: entry.emoji
+            })
+          }, entry.value);
+        })
+      }), status ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.status, failed && styles.statusFailed],
+        children: status
+      }) : null, isBadRating(rating) && reasons.length > 0 && (interactive || reason) ? /*#__PURE__*/_jsxs(View, {
+        style: styles.reasons,
+        children: [interactive ? /*#__PURE__*/_jsx(Text, {
+          style: styles.reasonPrompt,
+          children: labels.reasonPrompt
+        }) : null, /*#__PURE__*/_jsx(View, {
+          style: styles.chips,
+          accessibilityRole: "radiogroup",
+          accessibilityLabel: labels.reasonPrompt,
+          children: reasons.filter(item => interactive || item.id === reason).map(item => {
+            const selected = item.id === reason;
+            return /*#__PURE__*/_jsx(Pressable, {
+              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],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.chipText, selected && {
+                  color: contrastingTextColor(color)
+                }],
+                children: reasonLabel(item, locales)
+              })
+            }, item.id);
+          })
+        })]
+      }) : null, comment ? /*#__PURE__*/_jsx(Text, {
+        style: styles.comment,
+        children: comment
+      }) : rating != null && !closedReason ? /*#__PURE__*/_jsxs(View, {
+        style: styles.form,
+        children: [/*#__PURE__*/_jsx(TextInput, {
+          value: draft,
+          onChangeText: setDraft,
+          editable: !pending,
+          multiline: true,
+          maxLength: 2000,
+          placeholder: labels.commentPlaceholder,
+          placeholderTextColor: palette.textSubtle,
+          style: styles.input
+        }), /*#__PURE__*/_jsx(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],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.submitText, {
+              color: contrastingTextColor(color)
+            }],
+            children: labels.submit
+          })
+        })]
+      }) : null]
+    })
+  });
+}
+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'
+  }
+});
+//# sourceMappingURL=RatingCard.js.map

package/lib/module/ui/components/RatingCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","Pressable","StyleSheet","Text","TextInput","View","contrastingTextColor","fontSize","palette","radius","spacing","withAlpha","jsx","_jsx","jsxs","_jsxs","RATING_SCALE","value","emoji","isBadRating","rating","isRatingReason","id","labels","getRatingRequest","metadata","event","ratingId","comment","ratingComment","reason","ratingReason","reasons","Array","isArray","ratingReasons","filter","reasonLabel","locales","locale","label","split","Object","values","find","Boolean","RatingCard","initialRating","initialComment","initialReason","color","onRate","setRating","setReason","setComment","draft","setDraft","pending","setPending","closedReason","setClosedReason","failed","setFailed","interactive","canSubmit","trim","length","submit","next","result","locked","error","status","expired","thanks","style","styles","row","children","card","testID","question","faces","accessibilityRole","map","entry","index","selected","accessibilityLabel","scale","accessibilityState","checked","disabled","hitSlop","onPress","pressed","face","borderColor","backgroundColor","faceDimmed","facePressed","statusFailed","reasonPrompt","chips","item","chip","chipText","form","onChangeText","editable","multiline","maxLength","placeholder","commentPlaceholder","placeholderTextColor","textSubtle","input","text","submitDisabled","submitText","create","alignItems","paddingVertical","md","width","maxWidth","gap","padding","lg","borderRadius","xl","borderWidth","hairlineWidth","border","white","textAlign","ink","body","fontWeight","flexDirection","justifyContent","sm","height","opacity","textMuted","meta","danger","flexWrap","paddingHorizontal","pill","surfaceAlt","writingDirection","minHeight","textAlignVertical","alignSelf"],"sourceRoot":"../../../../src","sources":["ui/components/RatingCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/hooks/use-top-inset.js

@@ -0,0 +1,17 @@
+"use strict";
+
+/**
+ * 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 = /*#__PURE__*/createContext(0);
+export function useTopInset() {
+  return useContext(TopInsetContext);
+}
+//# sourceMappingURL=use-top-inset.js.map

package/lib/module/ui/hooks/use-top-inset.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","TopInsetContext","useTopInset"],"sourceRoot":"../../../../src","sources":["ui/hooks/use-top-inset.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAEjD,OAAO,MAAMC,eAAe,gBAAGF,aAAa,CAAC,CAAC,CAAC;AAE/C,OAAO,SAASG,WAAWA,CAAA,EAAW;EACpC,OAAOF,UAAU,CAACC,eAAe,CAAC;AACpC","ignoreList":[]}

package/lib/module/ui/screens/chat/ChatView.js

@@ -19,14 +19,16 @@ import { AttachmentChips } from "../../components/AttachmentChips.js";
 import { AttachmentMenu, showNativeAttachmentMenu } from "../../components/AttachmentMenu.js";
 import { Avatar } from "../../components/Avatar.js";
 import { ImageViewer } from "../../components/ImageViewer.js";
+import { getRatingRequest, RatingCard } from "../../components/RatingCard.js";
 import { WidgetErrorBoundary } from "../../components/ErrorBoundary.js";
 import { GradientBackground } from "../../components/Gradient.js";
 import { ArrowUpIcon, ChatOutlineIcon, ChevronIcon, ClockIcon, PaperclipIcon } from "../../components/icons.js";
 import { TeamAvatars } from "../../components/TeamAvatars.js";
 import { Markdown } from "../../components/Markdown.js";
 import { useReduceMotion } from "../../hooks/use-reduce-motion.js";
+import { useTopInset } from "../../hooks/use-top-inset.js";
 import { globalStyles } from "../../styles/global.js";
-import { contrastingTextColor, mixHex, palette, withAlpha } from "../../styles/theme.js";
+import { contrastingTextColor, mixHex, palette, spacing, withAlpha } from "../../styles/theme.js";
 import { formatClockTime, formatDayLabel, isSameDay } from "../../utils/conversations.js";
 import { stripHtml } from "../../utils/html.js";
 import { isHttpUrl, openExternalUrl } from "../../utils/safe-url.js";
@@ -54,6 +56,8 @@ export function ChatView({
   onPickAttachments,
   onSendMessage,
   onIdentifyVisitor,
+  onRateConversation,
+  defaultLocale,
   onLoadMore,
   onTyping,
   onBack,
@@ -262,6 +266,7 @@ export function ChatView({
   const lastVisitorMessageId = [...messages].reverse().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)
@@ -272,7 +277,12 @@ export function ChatView({
       colors: headerGradient,
       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],
       children: [/*#__PURE__*/_jsx(Pressable, {
         onPress: onBack,
         accessibilityRole: "button",
@@ -428,6 +438,8 @@ export function ChatView({
               color: color,
               labels: labels,
               onOpenImage: setViewerImage,
+              onRateConversation: onRateConversation,
+              locales: [locale, defaultLocale],
               senderLabel: isAgentMessage && (startsRun || startsDay) ? message.senderName || agentName || labels.team : null,
               timeLabel: formatClockTime(message.createdAt, locale),
               receiptLabel: message.id === lastVisitorMessageId ? receiptLabel(message, labels) : undefined,
@@ -563,7 +575,9 @@ function MessageBubble({
   receiptLabel,
   onSubmitProcedureForm,
   onAgentUiAction,
-  onOpenImage
+  onOpenImage,
+  onRateConversation,
+  locales
 }) {
   const joinedName = message.metadata?.event === 'agent_joined' ? message.metadata?.agentName : null;
   if (message.messageType === 'system' && typeof joinedName === 'string' && joinedName) {
@@ -583,6 +597,20 @@ function MessageBubble({
       })]
     });
   }
+  const ratingRequest = message.messageType === 'system' ? getRatingRequest(message.metadata) : null;
+  if (ratingRequest) {
+    return /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsx(View, {