@webority/mobile-support 0.0.9

package/lib/module/components/Attachments.js

@@ -0,0 +1,240 @@
+"use strict";
+
+import { AppIcon, IconButton, Spinner, Text, toast, useTheme, ZoomableImage } from '@webority/mobile-ui';
+import { useEffect, useMemo, useState } from 'react';
+import { Image, Modal, Pressable, StyleSheet, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { formatBytes, isImage } from "../format.js";
+import { useAttachmentLoader, useAttachmentOpener } from "../SupportProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AttachmentThumb = ({
+  attachment,
+  onOpen
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const load = useAttachmentLoader();
+  const [state, setState] = useState({
+    status: 'loading'
+  });
+  useEffect(() => {
+    let cancelled = false;
+    load(attachment).then(uri => !cancelled && setState({
+      status: 'ready',
+      uri
+    }), () => !cancelled && setState({
+      status: 'error'
+    }));
+    return () => {
+      cancelled = true;
+    };
+  }, [load, attachment]);
+  if (state.status === 'loading') {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.thumb,
+      testID: `support-attachment-${attachment.id}`,
+      children: /*#__PURE__*/_jsx(Spinner, {
+        size: "sm",
+        accessibilityLabel: `Loading ${attachment.fileName}`
+      })
+    });
+  }
+  if (state.status === 'error') {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.thumb,
+      accessible: true,
+      accessibilityLabel: `${attachment.fileName} could not be loaded`,
+      testID: `support-attachment-${attachment.id}`,
+      children: /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "tertiary",
+        align: "center",
+        children: "Could not load"
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: () => onOpen(state.uri, attachment.fileName),
+    accessibilityRole: "imagebutton",
+    accessibilityLabel: `Open ${attachment.fileName}`,
+    testID: `support-attachment-${attachment.id}`,
+    children: /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: state.uri
+      },
+      style: styles.thumb,
+      resizeMode: "cover"
+    })
+  });
+};
+
+/**
+ * A file that is not an image. Tappable when the app gave SupportProvider an
+ * `openFile`: it is downloaded through the signed-in client, then handed to the OS.
+ */
+const FileRow = ({
+  attachment
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const open = useAttachmentOpener();
+  const [opening, setOpening] = useState(false);
+  const label = `${attachment.fileName}, ${formatBytes(attachment.sizeBytes)}`;
+  if (!open) {
+    return /*#__PURE__*/_jsx(Text, {
+      variant: "caption",
+      color: "secondary",
+      testID: `support-file-${attachment.id}`,
+      children: label
+    });
+  }
+  const onPress = async () => {
+    setOpening(true);
+    try {
+      await open(attachment);
+    } catch {
+      toast.error(`Could not open ${attachment.fileName}. Try again.`);
+    } finally {
+      setOpening(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: () => void onPress(),
+    disabled: opening,
+    accessibilityRole: "button",
+    accessibilityLabel: `Open ${attachment.fileName}`,
+    accessibilityState: {
+      busy: opening,
+      disabled: opening
+    },
+    style: styles.fileRow,
+    testID: `support-file-${attachment.id}`,
+    children: [/*#__PURE__*/_jsx(AppIcon, {
+      name: "document",
+      size: 16,
+      color: theme.colors.text.link
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "caption",
+      color: "link",
+      children: label
+    }), opening && /*#__PURE__*/_jsx(Spinner, {
+      size: "sm",
+      accessibilityLabel: `Opening ${attachment.fileName}`
+    })]
+  });
+};
+
+/** A message's files: images as tappable thumbnails, anything else as a file row. */
+export const AttachmentList = ({
+  attachments,
+  onOpenImage
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  if (attachments.length === 0) {
+    return null;
+  }
+  const images = attachments.filter(a => isImage(a.contentType));
+  const others = attachments.filter(a => !isImage(a.contentType));
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.list,
+    children: [images.length > 0 && /*#__PURE__*/_jsx(View, {
+      style: styles.thumbRow,
+      children: images.map(a => /*#__PURE__*/_jsx(AttachmentThumb, {
+        attachment: a,
+        onOpen: onOpenImage
+      }, a.id))
+    }), others.map(a => /*#__PURE__*/_jsx(FileRow, {
+      attachment: a
+    }, a.id))]
+  });
+};
+
+/** Full-screen view of one image with pinch to zoom. */
+export const ImageViewer = ({
+  image,
+  onClose
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: image !== null,
+    onRequestClose: onClose,
+    animationType: "fade",
+    transparent: false,
+    children: /*#__PURE__*/_jsxs(GestureHandlerRootView, {
+      style: styles.viewer,
+      testID: "support-image-viewer",
+      children: [image && /*#__PURE__*/_jsx(ZoomableImage, {
+        accessibilityLabel: image.name,
+        style: styles.viewerImageWrap,
+        children: /*#__PURE__*/_jsx(Image, {
+          source: {
+            uri: image.uri
+          },
+          style: styles.viewerImage,
+          resizeMode: "contain"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.viewerClose,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          icon: ({
+            color,
+            size
+          }) => /*#__PURE__*/_jsx(AppIcon, {
+            name: "close-circle",
+            color: color,
+            size: size
+          }),
+          accessibilityLabel: "Close image",
+          onPress: onClose,
+          variant: "glass"
+        })
+      })]
+    })
+  });
+};
+const THUMB = 84;
+const buildStyles = theme => StyleSheet.create({
+  list: {
+    gap: theme.spacing.xs,
+    marginTop: theme.spacing.sm
+  },
+  fileRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing.xxs,
+    alignSelf: 'flex-start'
+  },
+  thumbRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: theme.spacing.xs
+  },
+  thumb: {
+    width: THUMB,
+    height: THUMB,
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.colors.background.secondary,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden'
+  },
+  viewer: {
+    flex: 1,
+    backgroundColor: theme.colors.background.inverse
+  },
+  viewerImageWrap: {
+    flex: 1
+  },
+  viewerImage: {
+    flex: 1,
+    width: '100%'
+  },
+  viewerClose: {
+    position: 'absolute',
+    top: theme.spacing['2xl'],
+    right: theme.spacing.md
+  }
+});
+//# sourceMappingURL=Attachments.js.map

package/lib/module/components/NewSupportTicket.js

@@ -0,0 +1,205 @@
+"use strict";
+
+import { Button, Input, Select, Spinner, Text, useForm, useTheme } from '@webority/mobile-ui';
+import { useMemo, useState } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import { toSupportApiError } from "../client.js";
+import { useCreateSupportTicket, useSupportConfig } from "../SupportProvider.js";
+import { validateBody, validateCategory, validateFiles, validateSubject } from "../validation.js";
+import { PhotoTray } from "./PhotoTray.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const TicketForm = ({
+  config,
+  styles,
+  onCreated,
+  onCancel,
+  initialDraft
+}) => {
+  const createTicket = useCreateSupportTicket();
+  const [photos, setPhotos] = useState([]);
+  const [screenshots, setScreenshots] = useState(initialDraft?.screenshots ?? []);
+  const [filesError, setFilesError] = useState(null);
+  const [submitError, setSubmitError] = useState(null);
+  const form = useForm({
+    initialValues: {
+      category: initialDraft?.category ?? '',
+      subject: initialDraft?.subject ?? '',
+      body: initialDraft?.body ?? ''
+    },
+    validate: {
+      category: v => validateCategory(v, config),
+      subject: v => validateSubject(v, config),
+      body: v => validateBody(v, config)
+    },
+    onSubmit: async values => {
+      const fileProblem = validateFiles([...screenshots, ...photos], config);
+      setFilesError(fileProblem ?? null);
+      if (fileProblem) {
+        return;
+      }
+      setSubmitError(null);
+      try {
+        const created = await createTicket({
+          category: values.category,
+          subject: values.subject.trim(),
+          body: values.body.trim(),
+          pageUrl: initialDraft?.pageUrl,
+          userAgent: initialDraft?.userAgent,
+          appVersion: initialDraft?.appVersion,
+          files: photos,
+          screenshots
+        });
+        onCreated(created);
+      } catch (e) {
+        setSubmitError(toSupportApiError(e).message);
+      }
+    }
+  });
+  const category = form.getFieldProps('category');
+  const subject = form.getFieldProps('subject');
+  const body = form.getFieldProps('body');
+  const attached = screenshots.length + photos.length;
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    contentContainerStyle: styles.content,
+    keyboardShouldPersistTaps: "handled",
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "bodySmall",
+      color: "secondary",
+      children: "Tell us what you need. We reply by email and in this ticket."
+    }), /*#__PURE__*/_jsx(Select, {
+      label: "Category",
+      placeholder: "Choose a category",
+      required: true,
+      options: config.categories.map(c => ({
+        label: c,
+        value: c
+      })),
+      value: category.value || undefined,
+      onChange: v => category.setValue(String(v), true),
+      error: category.error,
+      testID: "support-new-category"
+    }), /*#__PURE__*/_jsx(Input, {
+      label: "Subject",
+      placeholder: "A short summary",
+      required: true,
+      maxLength: config.subjectMaxLength,
+      value: subject.value,
+      onChangeText: subject.onChangeText,
+      onBlur: subject.onBlur,
+      error: subject.error,
+      testID: "support-new-subject"
+    }), /*#__PURE__*/_jsx(Input, {
+      label: "Message",
+      placeholder: "What happened, and what did you expect?",
+      required: true,
+      multiline: true,
+      maxLength: config.bodyMaxLength,
+      value: body.value,
+      onChangeText: body.onChangeText,
+      onBlur: body.onBlur,
+      error: body.error,
+      testID: "support-new-body"
+    }), screenshots.length > 0 && /*#__PURE__*/_jsx(PhotoTray, {
+      label: "Screenshot",
+      photos: screenshots,
+      onChange: setScreenshots,
+      remaining: 0,
+      allowAdd: false,
+      maxBytes: config.maxAttachmentBytes,
+      disabled: form.isSubmitting
+    }), /*#__PURE__*/_jsx(PhotoTray, {
+      label: "Photos",
+      photos: photos,
+      onChange: setPhotos,
+      remaining: config.maxAttachmentsPerMessage - attached,
+      maxBytes: config.maxAttachmentBytes,
+      disabled: form.isSubmitting
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "caption",
+      color: "tertiary",
+      children: `Attach up to ${config.maxAttachmentsPerMessage} files.`
+    }), (filesError || submitError) && /*#__PURE__*/_jsx(Text, {
+      variant: "bodySmall",
+      color: "error",
+      accessibilityLiveRegion: "polite",
+      children: filesError ?? submitError
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.actions,
+      children: [onCancel && /*#__PURE__*/_jsx(Button, {
+        title: "Cancel",
+        variant: "ghost",
+        tone: "neutral",
+        onPress: onCancel,
+        disabled: form.isSubmitting
+      }), /*#__PURE__*/_jsx(Button, {
+        title: "Send ticket",
+        loading: form.isSubmitting,
+        disabled: form.isSubmitting,
+        onPress: form.submit,
+        testID: "support-new-submit"
+      })]
+    })]
+  });
+};
+export const NewSupportTicket = props => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const {
+    config,
+    loading,
+    error,
+    reload
+  } = useSupportConfig();
+  const testID = props.testID ?? 'support-new-ticket';
+  if (!config) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.center,
+      testID: testID,
+      children: loading ? /*#__PURE__*/_jsx(Spinner, {
+        accessibilityLabel: "Loading"
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "body",
+          color: "error",
+          align: "center",
+          children: error?.message ?? 'Support is not available right now.'
+        }), /*#__PURE__*/_jsx(Button, {
+          title: "Try again",
+          variant: "ghost",
+          onPress: () => void reload()
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.root,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(TicketForm, {
+      ...props,
+      config: config,
+      styles: styles
+    })
+  });
+};
+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
+  },
+  actions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: theme.spacing.sm
+  }
+});
+//# sourceMappingURL=NewSupportTicket.js.map

package/lib/module/components/PhotoTray.js

@@ -0,0 +1,136 @@
+"use strict";
+
+import { AppIcon, Button, IconButton, Text, useTheme } from '@webority/mobile-ui';
+import { useMemo, useState } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { pickPhotos } from "../photos.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Photos on a message: thumbnails with remove buttons, plus library and camera buttons. */
+export const PhotoTray = ({
+  photos,
+  onChange,
+  remaining,
+  maxBytes,
+  disabled,
+  label,
+  allowAdd = true
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const [picking, setPicking] = useState(null);
+  const [error, setError] = useState(null);
+  const add = async source => {
+    setError(null);
+    setPicking(source);
+    try {
+      const picked = await pickPhotos(source, {
+        maxCount: remaining,
+        maxBytes
+      });
+      if (picked.length > 0) {
+        onChange([...photos, ...picked]);
+      }
+    } catch (e) {
+      setError(e instanceof Error && e.name === 'PhotoPermissionError' ? e.message : 'That photo could not be added. Try another one.');
+    } finally {
+      setPicking(null);
+    }
+  };
+  const full = remaining <= 0;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [label ? /*#__PURE__*/_jsx(Text, {
+      variant: "label",
+      color: "secondary",
+      children: label
+    }) : null, photos.length > 0 && /*#__PURE__*/_jsx(View, {
+      style: styles.row,
+      children: photos.map((photo, index) => /*#__PURE__*/_jsxs(View, {
+        style: styles.item,
+        children: [/*#__PURE__*/_jsx(Image, {
+          source: {
+            uri: photo.uri
+          },
+          style: styles.thumb,
+          accessibilityLabel: photo.name
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.remove,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            size: "sm",
+            variant: "glass",
+            icon: ({
+              color,
+              size
+            }) => /*#__PURE__*/_jsx(AppIcon, {
+              name: "trash",
+              color: color,
+              size: size
+            }),
+            accessibilityLabel: `Remove ${photo.name}`,
+            disabled: disabled,
+            onPress: () => onChange(photos.filter((_, i) => i !== index))
+          })
+        })]
+      }, `${photo.uri}-${index}`))
+    }), allowAdd && /*#__PURE__*/_jsxs(View, {
+      style: styles.actions,
+      children: [/*#__PURE__*/_jsx(Button, {
+        size: "sm",
+        variant: "outline",
+        tone: "neutral",
+        leftIcon: "gallery",
+        title: "Add photo",
+        accessibilityLabel: "Add a photo from your library",
+        loading: picking === 'library',
+        disabled: disabled || full || picking !== null,
+        onPress: () => void add('library')
+      }), /*#__PURE__*/_jsx(Button, {
+        size: "sm",
+        variant: "outline",
+        tone: "neutral",
+        leftIcon: "camera",
+        title: "Take photo",
+        accessibilityLabel: "Take a photo with your camera",
+        loading: picking === 'camera',
+        disabled: disabled || full || picking !== null,
+        onPress: () => void add('camera')
+      })]
+    }), error ? /*#__PURE__*/_jsx(Text, {
+      variant: "caption",
+      color: "error",
+      accessibilityLiveRegion: "polite",
+      children: error
+    }) : null]
+  });
+};
+const THUMB = 72;
+const buildStyles = theme => StyleSheet.create({
+  root: {
+    gap: theme.spacing.xs
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: theme.spacing.xs
+  },
+  item: {
+    width: THUMB,
+    height: THUMB
+  },
+  thumb: {
+    width: THUMB,
+    height: THUMB,
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.colors.background.secondary
+  },
+  remove: {
+    position: 'absolute',
+    top: theme.spacing.xxs,
+    right: theme.spacing.xxs
+  },
+  actions: {
+    flexDirection: 'row',
+    gap: theme.spacing.sm
+  }
+});
+//# sourceMappingURL=PhotoTray.js.map

package/lib/module/components/SupportContact.js

@@ -0,0 +1,129 @@
+"use strict";
+
+import { Button, Card, Spinner, Text, toast, useTheme } from '@webority/mobile-ui';
+import { useMemo } from 'react';
+import { Linking, StyleSheet, View } from 'react-native';
+import { copyText } from "../clipboard.js";
+import { useSupportConfig } from "../SupportProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** How to reach the support team: email with copy and compose, phone, and hours. */
+export const SupportContact = ({
+  testID = 'support-contact'
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const {
+    config,
+    loading,
+    error
+  } = useSupportConfig();
+  if (!config) {
+    return /*#__PURE__*/_jsx(Card, {
+      variant: "outlined",
+      testID: testID,
+      children: loading ? /*#__PURE__*/_jsx(Spinner, {
+        size: "sm",
+        accessibilityLabel: "Loading contact details"
+      }) : /*#__PURE__*/_jsx(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 copyText(email);
+      toast.success('Email address copied.');
+    } catch {
+      toast.error('Could not copy the email address.');
+    }
+  };
+  const open = (url, failure) => {
+    Linking.openURL(url).catch(() => toast.error(failure));
+  };
+  return /*#__PURE__*/_jsxs(Card, {
+    variant: "outlined",
+    bodyStyle: styles.body,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "title",
+      accessibilityRole: "header",
+      children: `Contact ${config.supportName || config.productName}`
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "label",
+        color: "secondary",
+        children: "Email"
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "body",
+        selectable: true,
+        testID: "support-contact-email",
+        children: email || '-'
+      })]
+    }), email ? /*#__PURE__*/_jsxs(View, {
+      style: styles.actions,
+      children: [/*#__PURE__*/_jsx(Button, {
+        title: "Copy",
+        size: "sm",
+        variant: "outline",
+        tone: "neutral",
+        leftIcon: "copy",
+        accessibilityLabel: `Copy ${email}`,
+        onPress: () => void copyEmail(),
+        testID: "support-contact-copy"
+      }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "label",
+        color: "secondary",
+        children: "Phone"
+      }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "label",
+        color: "secondary",
+        children: "Hours"
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "bodySmall",
+        children: hours
+      })]
+    }) : null]
+  });
+};
+const buildStyles = theme => 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