@webority/mobile-support 0.0.9

package/lib/commonjs/components/SupportContact.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SupportContact = void 0;
+var _mobileUi = require("@webority/mobile-ui");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _clipboard = require("../clipboard.js");
+var _SupportProvider = require("../SupportProvider.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/** How to reach the support team: email with copy and compose, phone, and hours. */
+const SupportContact = ({
+  testID = 'support-contact'
+}) => {
+  const theme = (0, _mobileUi.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const {
+    config,
+    loading,
+    error
+  } = (0, _SupportProvider.useSupportConfig)();
+  if (!config) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Card, {
+      variant: "outlined",
+      testID: testID,
+      children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Spinner, {
+        size: "sm",
+        accessibilityLabel: "Loading contact details"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+        variant: "bodySmall",
+        color: "error",
+        children: error?.message ?? 'Contact details are not available right now.'
+      })
+    });
+  }
+  const email = config.supportEmail;
+  const phone = config.supportPhone?.trim();
+  const hours = config.supportHours?.trim();
+  const copyEmail = async () => {
+    try {
+      await (0, _clipboard.copyText)(email);
+      _mobileUi.toast.success('Email address copied.');
+    } catch {
+      _mobileUi.toast.error('Could not copy the email address.');
+    }
+  };
+  const open = (url, failure) => {
+    _reactNative.Linking.openURL(url).catch(() => _mobileUi.toast.error(failure));
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_mobileUi.Card, {
+    variant: "outlined",
+    bodyStyle: styles.body,
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+      variant: "title",
+      accessibilityRole: "header",
+      children: `Contact ${config.supportName || config.productName}`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+        variant: "label",
+        color: "secondary",
+        children: "Email"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+        variant: "body",
+        selectable: true,
+        testID: "support-contact-email",
+        children: email || '-'
+      })]
+    }), email ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.actions,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+        title: "Copy",
+        size: "sm",
+        variant: "outline",
+        tone: "neutral",
+        leftIcon: "copy",
+        accessibilityLabel: `Copy ${email}`,
+        onPress: () => void copyEmail(),
+        testID: "support-contact-copy"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+        title: "Send email",
+        size: "sm",
+        variant: "outline",
+        leftIcon: "mail",
+        accessibilityLabel: `Send an email to ${email}`,
+        onPress: () => open(`mailto:${email}`, 'No email app is set up on this device.'),
+        testID: "support-contact-mail"
+      })]
+    }) : null, phone ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+        variant: "label",
+        color: "secondary",
+        children: "Phone"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+        title: phone,
+        size: "sm",
+        variant: "link",
+        leftIcon: "call",
+        accessibilityLabel: `Call ${phone}`,
+        onPress: () => open(`tel:${phone.replace(/[^\d+]/g, '')}`, 'This device cannot make calls.'),
+        testID: "support-contact-phone"
+      })]
+    }) : null, hours ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+        variant: "label",
+        color: "secondary",
+        children: "Hours"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+        variant: "bodySmall",
+        children: hours
+      })]
+    }) : null]
+  });
+};
+exports.SupportContact = SupportContact;
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  body: {
+    gap: theme.spacing.sm
+  },
+  row: {
+    gap: theme.spacing.xxs,
+    alignItems: 'flex-start'
+  },
+  actions: {
+    flexDirection: 'row',
+    gap: theme.spacing.sm
+  }
+});
+//# sourceMappingURL=SupportContact.js.map

package/lib/commonjs/components/SupportTicketDetail.js

@@ -0,0 +1,348 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SupportTicketDetail = void 0;
+var _mobileUi = require("@webority/mobile-ui");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _format = require("../format.js");
+var _SupportProvider = require("../SupportProvider.js");
+var _validation = require("../validation.js");
+var _Attachments = require("./Attachments.js");
+var _PhotoTray = require("./PhotoTray.js");
+var _SupportTicketList = require("./SupportTicketList.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const MessageBubble = ({
+  message,
+  styles,
+  onOpenImage
+}) => {
+  if (message.authorKind === 'System') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.system,
+      testID: `support-message-${message.id}`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+        variant: "caption",
+        color: "tertiary",
+        align: "center",
+        children: `${message.body}, ${(0, _format.formatWhen)(message.createdDateTimeUtc)}`
+      })
+    });
+  }
+  const mine = message.authorKind === 'Customer';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.bubbleRow, mine ? styles.mineRow : styles.theirsRow],
+    testID: `support-message-${message.id}`,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.bubble, mine ? styles.mine : styles.theirs],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+        variant: "label",
+        color: mine ? 'primary' : 'secondary',
+        children: message.authorName ?? '-'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+        variant: "body",
+        selectable: true,
+        children: message.body
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Attachments.AttachmentList, {
+        attachments: message.attachments,
+        onOpenImage: onOpenImage
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+        variant: "caption",
+        color: "tertiary",
+        children: (0, _format.formatWhen)(message.createdDateTimeUtc)
+      })]
+    })
+  });
+};
+const SATISFACTION_TEXT = {
+  Satisfied: 'You said we handled this well.',
+  Unsatisfied: 'You said we did not handle this well.'
+};
+const SupportTicketDetail = ({
+  ticketId,
+  testID = 'support-ticket-detail'
+}) => {
+  const theme = (0, _mobileUi.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const {
+    config
+  } = (0, _SupportProvider.useSupportConfig)();
+  const {
+    ticket,
+    loading,
+    error,
+    actionError,
+    busy,
+    reload,
+    reply,
+    reopen,
+    rate
+  } = (0, _SupportProvider.useSupportTicket)(ticketId);
+  const [viewing, setViewing] = (0, _react.useState)(null);
+  const [draft, setDraft] = (0, _react.useState)('');
+  const [photos, setPhotos] = (0, _react.useState)([]);
+  const [replyError, setReplyError] = (0, _react.useState)(null);
+  const [choice, setChoice] = (0, _react.useState)(null);
+  const [comment, setComment] = (0, _react.useState)('');
+  if (!ticket) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.center,
+      testID: testID,
+      children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Spinner, {
+        accessibilityLabel: "Loading the ticket"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+          variant: "body",
+          color: "error",
+          align: "center",
+          children: error?.message ?? 'That ticket could not be found.'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+          title: "Try again",
+          variant: "ghost",
+          onPress: () => void reload()
+        })]
+      })
+    });
+  }
+  const sendReply = async () => {
+    const body = draft.trim();
+    // Without the config the server still enforces its limits; only emptiness is checked here.
+    const problem = config ? (0, _validation.validateBody)(body, config) ?? (0, _validation.validateFiles)(photos, config) : body ? undefined : 'Write a message.';
+    if (problem) {
+      setReplyError(problem);
+      return;
+    }
+    setReplyError(null);
+    if (await reply({
+      body,
+      files: photos
+    })) {
+      setDraft('');
+      setPhotos([]);
+    }
+  };
+  const sendRating = async () => {
+    if (!choice) {
+      return;
+    }
+    if (await rate({
+      satisfaction: choice,
+      comment
+    })) {
+      setChoice(null);
+      setComment('');
+    }
+  };
+  const visible = ticket.messages.filter(m => !m.isInternal);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.root,
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      contentContainerStyle: styles.content,
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.head,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+          variant: "h3",
+          accessibilityRole: "header",
+          children: ticket.subject
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+          variant: "bodySmall",
+          color: "secondary",
+          children: `${ticket.number}, ${ticket.category}`
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.headRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.StatusBadge, {
+            label: ticket.statusLabel,
+            tone: _SupportTicketList.STATUS_TONES[ticket.status] ?? 'neutral',
+            accessibilityLabel: `Status: ${ticket.statusLabel}`
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+            variant: "caption",
+            color: "tertiary",
+            children: `Opened ${(0, _format.formatWhen)(ticket.createdDateTimeUtc)}`
+          })]
+        })]
+      }), ticket.canReopen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_mobileUi.Card, {
+        variant: "outlined",
+        bodyStyle: styles.section,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+          variant: "bodySmall",
+          children: `This ticket is ${ticket.statusLabel}. Reopen it if you still need help.`
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+          title: "Reopen ticket",
+          variant: "outline",
+          size: "sm",
+          loading: busy,
+          disabled: busy,
+          onPress: () => void reopen(),
+          testID: "support-reopen"
+        })]
+      }), ticket.canRate && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_mobileUi.Card, {
+        variant: "outlined",
+        bodyStyle: styles.section,
+        testID: "support-rating",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+          variant: "label",
+          children: "How did we do?"
+        }), ticket.satisfaction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+          variant: "bodySmall",
+          color: "secondary",
+          children: SATISFACTION_TEXT[ticket.satisfaction]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.ratingRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+            title: "Satisfied",
+            size: "sm",
+            leftIcon: "like",
+            variant: choice === 'Satisfied' ? 'solid' : 'outline',
+            tone: "success",
+            accessibilityState: {
+              selected: choice === 'Satisfied'
+            },
+            onPress: () => setChoice('Satisfied'),
+            testID: "support-rate-satisfied"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+            title: "Not satisfied",
+            size: "sm",
+            leftIcon: "dislike",
+            variant: choice === 'Unsatisfied' ? 'solid' : 'outline',
+            tone: "error",
+            accessibilityState: {
+              selected: choice === 'Unsatisfied'
+            },
+            onPress: () => setChoice('Unsatisfied'),
+            testID: "support-rate-unsatisfied"
+          })]
+        }), choice && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Input, {
+            label: "Anything to add? (optional)",
+            value: comment,
+            onChangeText: setComment,
+            multiline: true,
+            maxLength: config?.satisfactionCommentMaxLength,
+            testID: "support-rating-comment"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+            title: "Send rating",
+            size: "sm",
+            loading: busy,
+            disabled: busy,
+            onPress: () => void sendRating(),
+            testID: "support-rating-send"
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.thread,
+        accessibilityLabel: "Conversation",
+        children: visible.map(m => /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageBubble, {
+          message: m,
+          styles: styles,
+          onOpenImage: (uri, name) => setViewing({
+            uri,
+            name
+          })
+        }, m.id))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.section,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Input, {
+          label: "Your reply",
+          placeholder: "Write a reply to the support team",
+          value: draft,
+          onChangeText: setDraft,
+          multiline: true,
+          maxLength: config?.bodyMaxLength,
+          error: replyError ?? undefined,
+          testID: "support-reply-input"
+        }), config && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PhotoTray.PhotoTray, {
+          photos: photos,
+          onChange: setPhotos,
+          remaining: config.maxAttachmentsPerMessage - photos.length,
+          maxBytes: config.maxAttachmentBytes,
+          disabled: busy
+        }), ticket.canReopen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+          variant: "caption",
+          color: "secondary",
+          children: "Replying reopens this ticket."
+        }), actionError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+          variant: "bodySmall",
+          color: "error",
+          accessibilityLiveRegion: "polite",
+          children: actionError.message
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+          title: "Send reply",
+          leftIcon: "send",
+          loading: busy,
+          disabled: busy,
+          onPress: () => void sendReply(),
+          testID: "support-reply-send"
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Attachments.ImageViewer, {
+      image: viewing,
+      onClose: () => setViewing(null)
+    })]
+  });
+};
+exports.SupportTicketDetail = SupportTicketDetail;
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  content: {
+    padding: theme.spacing.md,
+    gap: theme.spacing.md
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing.xl,
+    gap: theme.spacing.sm
+  },
+  head: {
+    gap: theme.spacing.xxs
+  },
+  headRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing.sm,
+    marginTop: theme.spacing.xs
+  },
+  section: {
+    gap: theme.spacing.sm
+  },
+  ratingRow: {
+    flexDirection: 'row',
+    gap: theme.spacing.sm
+  },
+  thread: {
+    gap: theme.spacing.sm
+  },
+  system: {
+    paddingHorizontal: theme.spacing.lg,
+    paddingVertical: theme.spacing.xxs
+  },
+  bubbleRow: {
+    flexDirection: 'row'
+  },
+  mineRow: {
+    justifyContent: 'flex-end'
+  },
+  theirsRow: {
+    justifyContent: 'flex-start'
+  },
+  bubble: {
+    maxWidth: '85%',
+    borderRadius: theme.radius.lg,
+    padding: theme.spacing.sm,
+    gap: theme.spacing.xxs
+  },
+  mine: {
+    backgroundColor: theme.colors.primaryMuted
+  },
+  theirs: {
+    backgroundColor: theme.colors.background.secondary
+  }
+});
+//# sourceMappingURL=SupportTicketDetail.js.map