@repzo/widget-react-native 1.0.4 → 1.0.6

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

@@ -0,0 +1,347 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RatingCard = RatingCard;
+exports.getRatingRequest = getRatingRequest;
+exports.isBadRating = void 0;
+exports.reasonLabel = reasonLabel;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _theme = require("../styles/theme.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+/** 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: '🤩'
+}];
+/** 1–2 asks for a reason; 3 is neutral, 4–5 good. */
+const isBadRating = rating => rating != null && rating <= 2;
+exports.isBadRating = isBadRating;
+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. */
+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.
+ */
+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;
+}
+function RatingCard({
+  ratingId,
+  initialRating,
+  initialComment,
+  initialReason,
+  reasons,
+  locales,
+  color,
+  labels,
+  onRate
+}) {
+  const [rating, setRating] = (0, _react.useState)(initialRating);
+  const [reason, setReason] = (0, _react.useState)(initialReason);
+  const [comment, setComment] = (0, _react.useState)(initialComment);
+  const [draft, setDraft] = (0, _react.useState)('');
+  const [pending, setPending] = (0, _react.useState)(false);
+  const [closedReason, setClosedReason] = (0, _react.useState)(initialComment ? 'locked' : null);
+  const [failed, setFailed] = (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.row,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.card,
+      testID: "repzo-rating-card",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.question,
+        children: labels.question
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.faces,
+        accessibilityRole: "radiogroup",
+        children: RATING_SCALE.map((entry, index) => {
+          const selected = rating === entry.value;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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: (0, _theme.withAlpha)(color, 0.08)
+            }, rating != null && !selected && styles.faceDimmed, pressed && styles.facePressed],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.emoji,
+              children: entry.emoji
+            })
+          }, entry.value);
+        })
+      }), status ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.status, failed && styles.statusFailed],
+        children: status
+      }) : null, isBadRating(rating) && reasons.length > 0 && (interactive || reason) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.reasons,
+        children: [interactive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.reasonPrompt,
+          children: labels.reasonPrompt
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.chipText, selected && {
+                  color: (0, _theme.contrastingTextColor)(color)
+                }],
+                children: reasonLabel(item, locales)
+              })
+            }, item.id);
+          })
+        })]
+      }) : null, comment ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.comment,
+        children: comment
+      }) : rating != null && !closedReason ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.form,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          value: draft,
+          onChangeText: setDraft,
+          editable: !pending,
+          multiline: true,
+          maxLength: 2000,
+          placeholder: labels.commentPlaceholder,
+          placeholderTextColor: _theme.palette.textSubtle,
+          style: styles.input
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.submitText, {
+              color: (0, _theme.contrastingTextColor)(color)
+            }],
+            children: labels.submit
+          })
+        })]
+      }) : null]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  row: {
+    alignItems: 'center',
+    paddingVertical: _theme.spacing.md
+  },
+  card: {
+    width: '100%',
+    maxWidth: 340,
+    gap: _theme.spacing.md,
+    padding: _theme.spacing.lg,
+    borderRadius: _theme.radius.xl,
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderColor: _theme.palette.border,
+    backgroundColor: _theme.palette.white
+  },
+  question: {
+    textAlign: 'center',
+    color: _theme.palette.ink,
+    fontSize: _theme.fontSize.body,
+    fontWeight: '600'
+  },
+  faces: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: _theme.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: _theme.palette.textMuted,
+    fontSize: _theme.fontSize.meta
+  },
+  statusFailed: {
+    color: _theme.palette.danger
+  },
+  reasons: {
+    gap: _theme.spacing.sm
+  },
+  reasonPrompt: {
+    color: _theme.palette.ink,
+    fontSize: _theme.fontSize.meta,
+    fontWeight: '600'
+  },
+  chips: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: _theme.spacing.sm
+  },
+  chip: {
+    paddingHorizontal: _theme.spacing.md,
+    paddingVertical: _theme.spacing.sm,
+    borderRadius: _theme.radius.pill,
+    borderWidth: 1,
+    borderColor: _theme.palette.border,
+    backgroundColor: _theme.palette.white
+  },
+  chipText: {
+    color: _theme.palette.ink,
+    fontSize: _theme.fontSize.meta
+  },
+  comment: {
+    paddingHorizontal: _theme.spacing.md,
+    paddingVertical: _theme.spacing.sm,
+    borderRadius: _theme.radius.md,
+    backgroundColor: _theme.palette.surfaceAlt,
+    color: _theme.palette.ink,
+    fontSize: _theme.fontSize.meta,
+    writingDirection: 'auto'
+  },
+  form: {
+    gap: _theme.spacing.sm
+  },
+  input: {
+    minHeight: 64,
+    paddingHorizontal: _theme.spacing.md,
+    paddingVertical: _theme.spacing.sm,
+    borderRadius: _theme.radius.md,
+    borderWidth: 1,
+    borderColor: _theme.palette.border,
+    color: _theme.palette.ink,
+    fontSize: _theme.fontSize.input,
+    textAlignVertical: 'top'
+  },
+  submit: {
+    alignSelf: 'flex-end',
+    paddingHorizontal: _theme.spacing.lg,
+    paddingVertical: _theme.spacing.sm,
+    borderRadius: _theme.radius.pill
+  },
+  submitDisabled: {
+    opacity: 0.5
+  },
+  submitText: {
+    fontSize: _theme.fontSize.meta,
+    fontWeight: '600'
+  }
+});
+//# sourceMappingURL=RatingCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_theme","_jsxRuntime","RATING_SCALE","value","emoji","isBadRating","rating","exports","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","useState","setReason","setComment","draft","setDraft","pending","setPending","closedReason","setClosedReason","failed","setFailed","interactive","canSubmit","trim","length","submit","next","result","locked","error","status","expired","thanks","jsx","View","style","styles","row","children","jsxs","card","testID","Text","question","faces","accessibilityRole","map","entry","index","selected","Pressable","accessibilityLabel","scale","accessibilityState","checked","disabled","hitSlop","onPress","pressed","face","borderColor","backgroundColor","withAlpha","faceDimmed","facePressed","statusFailed","reasonPrompt","chips","item","chip","chipText","contrastingTextColor","form","TextInput","onChangeText","editable","multiline","maxLength","placeholder","commentPlaceholder","placeholderTextColor","palette","textSubtle","input","text","submitDisabled","submitText","StyleSheet","create","alignItems","paddingVertical","spacing","md","width","maxWidth","gap","padding","lg","borderRadius","radius","xl","borderWidth","hairlineWidth","border","white","textAlign","ink","fontSize","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/commonjs/ui/hooks/use-top-inset.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopInsetContext = void 0;
+exports.useTopInset = useTopInset;
+var _react = require("react");
+/**
+ * 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.
+ */
+
+const TopInsetContext = exports.TopInsetContext = /*#__PURE__*/(0, _react.createContext)(0);
+function useTopInset() {
+  return (0, _react.useContext)(TopInsetContext);
+}
+//# sourceMappingURL=use-top-inset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","TopInsetContext","exports","createContext","useTopInset","useContext"],"sourceRoot":"../../../../src","sources":["ui/hooks/use-top-inset.ts"],"mappings":";;;;;;;AASA,IAAAA,MAAA,GAAAC,OAAA;AATA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,MAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,gBAAG,IAAAE,oBAAa,EAAC,CAAC,CAAC;AAExC,SAASC,WAAWA,CAAA,EAAW;EACpC,OAAO,IAAAC,iBAAU,EAACJ,eAAe,CAAC;AACpC","ignoreList":[]}

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

@@ -13,12 +13,14 @@ var _AttachmentChips = require("../../components/AttachmentChips.js");
 var _AttachmentMenu = require("../../components/AttachmentMenu.js");
 var _Avatar = require("../../components/Avatar.js");
 var _ImageViewer = require("../../components/ImageViewer.js");
+var _RatingCard = require("../../components/RatingCard.js");
 var _ErrorBoundary = require("../../components/ErrorBoundary.js");
 var _Gradient = require("../../components/Gradient.js");
 var _icons = require("../../components/icons.js");
 var _TeamAvatars = require("../../components/TeamAvatars.js");
 var _Markdown = require("../../components/Markdown.js");
 var _useReduceMotion = require("../../hooks/use-reduce-motion.js");
+var _useTopInset = require("../../hooks/use-top-inset.js");
 var _global = require("../../styles/global.js");
 var _theme = require("../../styles/theme.js");
 var _conversations = require("../../utils/conversations.js");
@@ -58,6 +60,8 @@ function ChatView({
   onPickAttachments,
   onSendMessage,
   onIdentifyVisitor,
+  onRateConversation,
+  defaultLocale,
   onLoadMore,
   onTyping,
   onBack,
@@ -266,6 +270,7 @@ 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 = (0, _useTopInset.useTopInset)();
   const headerGradient = [color, (0, _theme.mixHex)(color, '#000000', 0.16)];
   const headerControl = {
     backgroundColor: (0, _theme.withAlpha)(headerTextColor, 0.16)
@@ -276,7 +281,12 @@ function ChatView({
       colors: headerGradient,
       style: [_ChatViewStyles.styles.header, {
         borderBottomColor: (0, _theme.mixHex)(color, '#000000', 0.26)
-      }],
+      },
+      // Reaches under the status bar so the brand colour runs to the top.
+      topInset > 0 ? {
+        paddingTop: _theme.spacing.md + topInset,
+        minHeight: 72 + topInset
+      } : null],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         onPress: onBack,
         accessibilityRole: "button",
@@ -432,6 +442,8 @@ function ChatView({
               color: color,
               labels: labels,
               onOpenImage: setViewerImage,
+              onRateConversation: onRateConversation,
+              locales: [locale, defaultLocale],
               senderLabel: isAgentMessage && (startsRun || startsDay) ? message.senderName || agentName || labels.team : null,
               timeLabel: (0, _conversations.formatClockTime)(message.createdAt, locale),
               receiptLabel: message.id === lastVisitorMessageId ? receiptLabel(message, labels) : undefined,
@@ -567,7 +579,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) {
@@ -587,6 +601,20 @@ function MessageBubble({
       })]
     });
   }
+  const ratingRequest = message.messageType === 'system' ? (0, _RatingCard.getRatingRequest)(message.metadata) : null;
+  if (ratingRequest) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RatingCard.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 || (0, _html.stripHtml)(message.body || '') || labels.conversationUpdated;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {