@webority/mobile-support 0.0.9

package/lib/module/components/SupportTicketDetail.js

@@ -0,0 +1,343 @@
+"use strict";
+
+import { Button, Card, Input, Spinner, StatusBadge, Text, useTheme } from '@webority/mobile-ui';
+import { useMemo, useState } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import { formatWhen } from "../format.js";
+import { useSupportConfig, useSupportTicket } from "../SupportProvider.js";
+import { validateBody, validateFiles } from "../validation.js";
+import { AttachmentList, ImageViewer } from "./Attachments.js";
+import { PhotoTray } from "./PhotoTray.js";
+import { STATUS_TONES } from "./SupportTicketList.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const MessageBubble = ({
+  message,
+  styles,
+  onOpenImage
+}) => {
+  if (message.authorKind === 'System') {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.system,
+      testID: `support-message-${message.id}`,
+      children: /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "tertiary",
+        align: "center",
+        children: `${message.body}, ${formatWhen(message.createdDateTimeUtc)}`
+      })
+    });
+  }
+  const mine = message.authorKind === 'Customer';
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.bubbleRow, mine ? styles.mineRow : styles.theirsRow],
+    testID: `support-message-${message.id}`,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.bubble, mine ? styles.mine : styles.theirs],
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "label",
+        color: mine ? 'primary' : 'secondary',
+        children: message.authorName ?? '-'
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "body",
+        selectable: true,
+        children: message.body
+      }), /*#__PURE__*/_jsx(AttachmentList, {
+        attachments: message.attachments,
+        onOpenImage: onOpenImage
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "tertiary",
+        children: formatWhen(message.createdDateTimeUtc)
+      })]
+    })
+  });
+};
+const SATISFACTION_TEXT = {
+  Satisfied: 'You said we handled this well.',
+  Unsatisfied: 'You said we did not handle this well.'
+};
+export const SupportTicketDetail = ({
+  ticketId,
+  testID = 'support-ticket-detail'
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const {
+    config
+  } = useSupportConfig();
+  const {
+    ticket,
+    loading,
+    error,
+    actionError,
+    busy,
+    reload,
+    reply,
+    reopen,
+    rate
+  } = useSupportTicket(ticketId);
+  const [viewing, setViewing] = useState(null);
+  const [draft, setDraft] = useState('');
+  const [photos, setPhotos] = useState([]);
+  const [replyError, setReplyError] = useState(null);
+  const [choice, setChoice] = useState(null);
+  const [comment, setComment] = useState('');
+  if (!ticket) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.center,
+      testID: testID,
+      children: loading ? /*#__PURE__*/_jsx(Spinner, {
+        accessibilityLabel: "Loading the ticket"
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "body",
+          color: "error",
+          align: "center",
+          children: error?.message ?? 'That ticket could not be found.'
+        }), /*#__PURE__*/_jsx(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 ? validateBody(body, config) ?? 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__*/_jsxs(View, {
+    style: styles.root,
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(ScrollView, {
+      contentContainerStyle: styles.content,
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.head,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "h3",
+          accessibilityRole: "header",
+          children: ticket.subject
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "bodySmall",
+          color: "secondary",
+          children: `${ticket.number}, ${ticket.category}`
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.headRow,
+          children: [/*#__PURE__*/_jsx(StatusBadge, {
+            label: ticket.statusLabel,
+            tone: STATUS_TONES[ticket.status] ?? 'neutral',
+            accessibilityLabel: `Status: ${ticket.statusLabel}`
+          }), /*#__PURE__*/_jsx(Text, {
+            variant: "caption",
+            color: "tertiary",
+            children: `Opened ${formatWhen(ticket.createdDateTimeUtc)}`
+          })]
+        })]
+      }), ticket.canReopen && /*#__PURE__*/_jsxs(Card, {
+        variant: "outlined",
+        bodyStyle: styles.section,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "bodySmall",
+          children: `This ticket is ${ticket.statusLabel}. Reopen it if you still need help.`
+        }), /*#__PURE__*/_jsx(Button, {
+          title: "Reopen ticket",
+          variant: "outline",
+          size: "sm",
+          loading: busy,
+          disabled: busy,
+          onPress: () => void reopen(),
+          testID: "support-reopen"
+        })]
+      }), ticket.canRate && /*#__PURE__*/_jsxs(Card, {
+        variant: "outlined",
+        bodyStyle: styles.section,
+        testID: "support-rating",
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "label",
+          children: "How did we do?"
+        }), ticket.satisfaction && /*#__PURE__*/_jsx(Text, {
+          variant: "bodySmall",
+          color: "secondary",
+          children: SATISFACTION_TEXT[ticket.satisfaction]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.ratingRow,
+          children: [/*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Input, {
+            label: "Anything to add? (optional)",
+            value: comment,
+            onChangeText: setComment,
+            multiline: true,
+            maxLength: config?.satisfactionCommentMaxLength,
+            testID: "support-rating-comment"
+          }), /*#__PURE__*/_jsx(Button, {
+            title: "Send rating",
+            size: "sm",
+            loading: busy,
+            disabled: busy,
+            onPress: () => void sendRating(),
+            testID: "support-rating-send"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.thread,
+        accessibilityLabel: "Conversation",
+        children: visible.map(m => /*#__PURE__*/_jsx(MessageBubble, {
+          message: m,
+          styles: styles,
+          onOpenImage: (uri, name) => setViewing({
+            uri,
+            name
+          })
+        }, m.id))
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.section,
+        children: [/*#__PURE__*/_jsx(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__*/_jsx(PhotoTray, {
+          photos: photos,
+          onChange: setPhotos,
+          remaining: config.maxAttachmentsPerMessage - photos.length,
+          maxBytes: config.maxAttachmentBytes,
+          disabled: busy
+        }), ticket.canReopen && /*#__PURE__*/_jsx(Text, {
+          variant: "caption",
+          color: "secondary",
+          children: "Replying reopens this ticket."
+        }), actionError && /*#__PURE__*/_jsx(Text, {
+          variant: "bodySmall",
+          color: "error",
+          accessibilityLiveRegion: "polite",
+          children: actionError.message
+        }), /*#__PURE__*/_jsx(Button, {
+          title: "Send reply",
+          leftIcon: "send",
+          loading: busy,
+          disabled: busy,
+          onPress: () => void sendReply(),
+          testID: "support-reply-send"
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(ImageViewer, {
+      image: viewing,
+      onClose: () => setViewing(null)
+    })]
+  });
+};
+const buildStyles = theme => 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

package/lib/module/components/SupportTicketList.js

@@ -0,0 +1,273 @@
+"use strict";
+
+import { Button, Card, Chip, EmptyState, SearchBar, Spinner, StatusBadge, Text, useTheme } from '@webority/mobile-ui';
+import { useMemo } from 'react';
+import { FlatList, RefreshControl, ScrollView, StyleSheet, View } from 'react-native';
+import { formatWhen } from "../format.js";
+import { useSupportTickets } from "../SupportProvider.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const STATUS_TONES = {
+  Open: 'warning',
+  InProgress: 'info',
+  Resolved: 'success',
+  Closed: 'neutral'
+};
+
+// The counts endpoint carries numbers only, so the chip wording lives here. It
+// matches the server's own labels (Webority.Support SupportDisplay).
+const STATUS_FILTERS = [{
+  value: 'Open',
+  label: 'Open',
+  count: 'open'
+}, {
+  value: 'InProgress',
+  label: 'In progress',
+  count: 'inProgress'
+}, {
+  value: 'Resolved',
+  label: 'Resolved',
+  count: 'resolved'
+}, {
+  value: 'Closed',
+  label: 'Closed',
+  count: 'closed'
+}];
+const ALL = 'all';
+/**
+ * All, then each status that has tickets. The selected status stays even at
+ * zero, so the chip the person is on never vanishes under them.
+ */
+export const statusFilterOptions = (counts, selected) => [{
+  value: ALL,
+  label: 'All',
+  count: counts.total
+}, ...STATUS_FILTERS.filter(s => counts[s.count] > 0 || s.value === selected).map(s => ({
+  value: s.value,
+  label: s.label,
+  count: counts[s.count]
+}))];
+const SEARCH_DEBOUNCE_MS = 400;
+export const SupportTicketList = ({
+  onOpenTicket,
+  onNewTicket,
+  header,
+  pageSize,
+  testID = 'support-ticket-list'
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const {
+    tickets,
+    counts,
+    status,
+    search,
+    setStatus,
+    setSearch,
+    loading,
+    refreshing,
+    loadingMore,
+    error,
+    loadMoreError,
+    refresh,
+    loadMore
+  } = useSupportTickets({
+    pageSize
+  });
+  const hasAnyTicket = (counts?.total ?? 0) > 0;
+  const filtered = status !== null || search.trim() !== '';
+  const listHeader = /*#__PURE__*/_jsxs(View, {
+    style: styles.header,
+    children: [header, onNewTicket && /*#__PURE__*/_jsx(Button, {
+      title: "New ticket",
+      leftIcon: "add",
+      onPress: onNewTicket,
+      fullWidth: true
+    }), error && /*#__PURE__*/_jsxs(View, {
+      style: styles.error,
+      accessibilityLiveRegion: "polite",
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "bodySmall",
+        color: "error",
+        children: error.message
+      }), /*#__PURE__*/_jsx(Button, {
+        title: "Try again",
+        size: "sm",
+        variant: "ghost",
+        onPress: () => void refresh()
+      })]
+    }), counts && hasAnyTicket && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(SearchBar, {
+        value: search,
+        onChangeText: setSearch,
+        debounceMs: SEARCH_DEBOUNCE_MS,
+        placeholder: "Search by subject or ticket number",
+        accessibilityLabel: "Search tickets",
+        testID: "support-ticket-search"
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: styles.filters,
+        accessibilityRole: "tablist",
+        accessibilityLabel: "Filter by status",
+        children: statusFilterOptions(counts, status).map(o => /*#__PURE__*/_jsx(Chip, {
+          label: `${o.label} (${o.count})`,
+          selected: (status ?? ALL) === o.value,
+          onPress: () => setStatus(o.value === ALL ? null : o.value),
+          accessibilityLabel: `${o.label}, ${o.count} tickets`,
+          testID: `support-filter-${o.value}`
+        }, o.value))
+      })]
+    })]
+  });
+  if (loading && counts === null && !error) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.center,
+      testID: testID,
+      children: /*#__PURE__*/_jsx(Spinner, {
+        accessibilityLabel: "Loading your tickets"
+      })
+    });
+  }
+  const empty = () => {
+    if (loading) {
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.footer,
+        children: /*#__PURE__*/_jsx(Spinner, {
+          accessibilityLabel: "Loading your tickets"
+        })
+      });
+    }
+    if (error) {
+      return null;
+    }
+    if (!hasAnyTicket) {
+      return /*#__PURE__*/_jsx(EmptyState, {
+        title: "No tickets yet",
+        description: "Raise a ticket and it will show here with its status.",
+        action: onNewTicket ? {
+          label: 'New ticket',
+          onPress: onNewTicket
+        } : undefined
+      });
+    }
+    return /*#__PURE__*/_jsx(EmptyState, {
+      title: "No tickets match",
+      description: filtered ? 'Try another status or search.' : undefined
+    });
+  };
+  const footer = loadingMore ? /*#__PURE__*/_jsx(View, {
+    style: styles.footer,
+    children: /*#__PURE__*/_jsx(Spinner, {
+      size: "sm",
+      accessibilityLabel: "Loading more tickets"
+    })
+  }) : loadMoreError ? /*#__PURE__*/_jsxs(View, {
+    style: [styles.footer, styles.error],
+    accessibilityLiveRegion: "polite",
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "bodySmall",
+      color: "error",
+      children: loadMoreError.message
+    }), /*#__PURE__*/_jsx(Button, {
+      title: "Load more",
+      size: "sm",
+      variant: "ghost",
+      onPress: () => void loadMore()
+    })]
+  }) : null;
+  return /*#__PURE__*/_jsx(FlatList, {
+    testID: testID,
+    data: tickets,
+    keyExtractor: t => t.id,
+    contentContainerStyle: styles.content,
+    ListHeaderComponent: listHeader,
+    ListFooterComponent: footer,
+    onEndReached: () => void loadMore(),
+    onEndReachedThreshold: 0.5,
+    refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
+      refreshing: refreshing,
+      onRefresh: () => void refresh()
+    }),
+    ListEmptyComponent: empty(),
+    renderItem: ({
+      item
+    }) => /*#__PURE__*/_jsxs(Card, {
+      onPress: () => onOpenTicket(item),
+      accessibilityLabel: `${item.subject}, ${item.statusLabel}, ticket ${item.number}`,
+      bodyStyle: styles.card,
+      testID: `support-ticket-${item.id}`,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.cardTop,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "caption",
+          color: "tertiary",
+          children: item.number
+        }), /*#__PURE__*/_jsx(StatusBadge, {
+          label: item.statusLabel,
+          tone: STATUS_TONES[item.status] ?? 'neutral',
+          size: "sm"
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "title",
+        numberOfLines: 2,
+        children: item.subject
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "bodySmall",
+        color: "secondary",
+        children: item.category
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.cardBottom,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "caption",
+          color: "tertiary",
+          children: `Updated ${formatWhen(item.updatedDateTimeUtc)}`
+        }), item.awaitingCustomer && /*#__PURE__*/_jsx(Text, {
+          variant: "caption",
+          color: "warning",
+          children: "Waiting for your reply"
+        })]
+      })]
+    })
+  });
+};
+const buildStyles = theme => StyleSheet.create({
+  content: {
+    padding: theme.spacing.md,
+    gap: theme.spacing.sm
+  },
+  header: {
+    gap: theme.spacing.sm,
+    marginBottom: theme.spacing.xs
+  },
+  filters: {
+    gap: theme.spacing.xs
+  },
+  error: {
+    gap: theme.spacing.xs,
+    alignItems: 'flex-start'
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing.xl
+  },
+  footer: {
+    paddingVertical: theme.spacing.md,
+    alignItems: 'center'
+  },
+  card: {
+    gap: theme.spacing.xxs
+  },
+  cardTop: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  cardBottom: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: theme.spacing.xxs
+  }
+});
+//# sourceMappingURL=SupportTicketList.js.map

package/lib/module/device.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import { getDeviceContext } from '@webority/mobile-core';
+import { Platform } from 'react-native';
+const PLATFORM_NAMES = {
+  ios: 'iOS',
+  android: 'Android'
+};
+
+/**
+ * The device line a ticket carries as its user agent: platform, OS version and,
+ * when the app registered one with mobile-core's `setDeviceContext`, the model.
+ */
+export const describeDevice = () => {
+  const context = getDeviceContext();
+  const platform = PLATFORM_NAMES[Platform.OS] ?? Platform.OS;
+  const osVersion = context?.osVersion ?? String(Platform.Version ?? '');
+  const parts = [`${platform} ${osVersion}`.trim()];
+  if (context?.deviceModel) {
+    parts.push(context.deviceModel);
+  }
+  return parts.join('; ');
+};
+//# sourceMappingURL=device.js.map

package/lib/module/files.js

@@ -0,0 +1,31 @@
+"use strict";
+
+import { File, Paths } from 'expo-file-system';
+const FOLDER = 'support-attachments';
+
+/** A server-supplied name reduced to one path segment, so it cannot leave the cache folder. */
+export const safeFileName = name => {
+  const last = name.split(/[/\\]/).pop() ?? '';
+  const cleaned = Array.from(last).filter(char => (char.codePointAt(0) ?? 0) > 0x1f).join('').trim();
+  return cleaned === '' || cleaned === '.' || cleaned === '..' ? 'attachment' : cleaned;
+};
+
+/**
+ * Writes an attachment to the app's cache and returns its `file://` URI. The id
+ * prefix keeps two tickets' `report.pdf` apart. Attachments never change once
+ * stored, so a file already on disk is reused rather than fetched again.
+ */
+export const saveAttachmentToCache = async (attachment, loadBytes) => {
+  const file = new File(Paths.cache, FOLDER, `${attachment.id}-${safeFileName(attachment.fileName)}`);
+  if (file.exists && file.size > 0) {
+    return file.uri;
+  }
+  const bytes = await loadBytes();
+  file.create({
+    intermediates: true,
+    overwrite: true
+  });
+  file.write(new Uint8Array(bytes));
+  return file.uri;
+};
+//# sourceMappingURL=files.js.map

package/lib/module/format.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import { formatDateTime } from '@webority/mobile-core';
+
+/**
+ * A timestamp in the device's own time zone. The backend sends UTC; mobile-core's
+ * formatter goes through Intl without pinning a zone, so the reader sees their
+ * own clock.
+ */
+export const formatWhen = utc => utc ? formatDateTime(utc) || '-' : '-';
+
+/** A byte count as a person reads it. */
+export const formatBytes = bytes => {
+  if (bytes >= 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+  if (bytes >= 1024) {
+    return `${Math.round(bytes / 1024)} KB`;
+  }
+  return `${bytes} bytes`;
+};
+export const isImage = contentType => contentType.startsWith('image/');
+//# sourceMappingURL=format.js.map