@webority/mobile-support 0.0.9

package/lib/commonjs/components/Attachments.js

@@ -0,0 +1,246 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageViewer = exports.AttachmentList = void 0;
+var _mobileUi = require("@webority/mobile-ui");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _format = require("../format.js");
+var _SupportProvider = require("../SupportProvider.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const AttachmentThumb = ({
+  attachment,
+  onOpen
+}) => {
+  const theme = (0, _mobileUi.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const load = (0, _SupportProvider.useAttachmentLoader)();
+  const [state, setState] = (0, _react.useState)({
+    status: 'loading'
+  });
+  (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.thumb,
+      testID: `support-attachment-${attachment.id}`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Spinner, {
+        size: "sm",
+        accessibilityLabel: `Loading ${attachment.fileName}`
+      })
+    });
+  }
+  if (state.status === 'error') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.thumb,
+      accessible: true,
+      accessibilityLabel: `${attachment.fileName} could not be loaded`,
+      testID: `support-attachment-${attachment.id}`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+        variant: "caption",
+        color: "tertiary",
+        align: "center",
+        children: "Could not load"
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: () => onOpen(state.uri, attachment.fileName),
+    accessibilityRole: "imagebutton",
+    accessibilityLabel: `Open ${attachment.fileName}`,
+    testID: `support-attachment-${attachment.id}`,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = (0, _mobileUi.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const open = (0, _SupportProvider.useAttachmentOpener)();
+  const [opening, setOpening] = (0, _react.useState)(false);
+  const label = `${attachment.fileName}, ${(0, _format.formatBytes)(attachment.sizeBytes)}`;
+  if (!open) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+      variant: "caption",
+      color: "secondary",
+      testID: `support-file-${attachment.id}`,
+      children: label
+    });
+  }
+  const onPress = async () => {
+    setOpening(true);
+    try {
+      await open(attachment);
+    } catch {
+      _mobileUi.toast.error(`Could not open ${attachment.fileName}. Try again.`);
+    } finally {
+      setOpening(false);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_mobileUi.AppIcon, {
+      name: "document",
+      size: 16,
+      color: theme.colors.text.link
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+      variant: "caption",
+      color: "link",
+      children: label
+    }), opening && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Spinner, {
+      size: "sm",
+      accessibilityLabel: `Opening ${attachment.fileName}`
+    })]
+  });
+};
+
+/** A message's files: images as tappable thumbnails, anything else as a file row. */
+const AttachmentList = ({
+  attachments,
+  onOpenImage
+}) => {
+  const theme = (0, _mobileUi.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  if (attachments.length === 0) {
+    return null;
+  }
+  const images = attachments.filter(a => (0, _format.isImage)(a.contentType));
+  const others = attachments.filter(a => !(0, _format.isImage)(a.contentType));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.list,
+    children: [images.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.thumbRow,
+      children: images.map(a => /*#__PURE__*/(0, _jsxRuntime.jsx)(AttachmentThumb, {
+        attachment: a,
+        onOpen: onOpenImage
+      }, a.id))
+    }), others.map(a => /*#__PURE__*/(0, _jsxRuntime.jsx)(FileRow, {
+      attachment: a
+    }, a.id))]
+  });
+};
+
+/** Full-screen view of one image with pinch to zoom. */
+exports.AttachmentList = AttachmentList;
+const ImageViewer = ({
+  image,
+  onClose
+}) => {
+  const theme = (0, _mobileUi.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: image !== null,
+    onRequestClose: onClose,
+    animationType: "fade",
+    transparent: false,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView, {
+      style: styles.viewer,
+      testID: "support-image-viewer",
+      children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.ZoomableImage, {
+        accessibilityLabel: image.name,
+        style: styles.viewerImageWrap,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+          source: {
+            uri: image.uri
+          },
+          style: styles.viewerImage,
+          resizeMode: "contain"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.viewerClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.IconButton, {
+          icon: ({
+            color,
+            size
+          }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.AppIcon, {
+            name: "close-circle",
+            color: color,
+            size: size
+          }),
+          accessibilityLabel: "Close image",
+          onPress: onClose,
+          variant: "glass"
+        })
+      })]
+    })
+  });
+};
+exports.ImageViewer = ImageViewer;
+const THUMB = 84;
+const buildStyles = theme => _reactNative.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/commonjs/components/NewSupportTicket.js

@@ -0,0 +1,210 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NewSupportTicket = void 0;
+var _mobileUi = require("@webority/mobile-ui");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _client = require("../client.js");
+var _SupportProvider = require("../SupportProvider.js");
+var _validation = require("../validation.js");
+var _PhotoTray = require("./PhotoTray.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const TicketForm = ({
+  config,
+  styles,
+  onCreated,
+  onCancel,
+  initialDraft
+}) => {
+  const createTicket = (0, _SupportProvider.useCreateSupportTicket)();
+  const [photos, setPhotos] = (0, _react.useState)([]);
+  const [screenshots, setScreenshots] = (0, _react.useState)(initialDraft?.screenshots ?? []);
+  const [filesError, setFilesError] = (0, _react.useState)(null);
+  const [submitError, setSubmitError] = (0, _react.useState)(null);
+  const form = (0, _mobileUi.useForm)({
+    initialValues: {
+      category: initialDraft?.category ?? '',
+      subject: initialDraft?.subject ?? '',
+      body: initialDraft?.body ?? ''
+    },
+    validate: {
+      category: v => (0, _validation.validateCategory)(v, config),
+      subject: v => (0, _validation.validateSubject)(v, config),
+      body: v => (0, _validation.validateBody)(v, config)
+    },
+    onSubmit: async values => {
+      const fileProblem = (0, _validation.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((0, _client.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__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    contentContainerStyle: styles.content,
+    keyboardShouldPersistTaps: "handled",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+      variant: "bodySmall",
+      color: "secondary",
+      children: "Tell us what you need. We reply by email and in this ticket."
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.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__*/(0, _jsxRuntime.jsx)(_mobileUi.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__*/(0, _jsxRuntime.jsx)(_mobileUi.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__*/(0, _jsxRuntime.jsx)(_PhotoTray.PhotoTray, {
+      label: "Screenshot",
+      photos: screenshots,
+      onChange: setScreenshots,
+      remaining: 0,
+      allowAdd: false,
+      maxBytes: config.maxAttachmentBytes,
+      disabled: form.isSubmitting
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PhotoTray.PhotoTray, {
+      label: "Photos",
+      photos: photos,
+      onChange: setPhotos,
+      remaining: config.maxAttachmentsPerMessage - attached,
+      maxBytes: config.maxAttachmentBytes,
+      disabled: form.isSubmitting
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+      variant: "caption",
+      color: "tertiary",
+      children: `Attach up to ${config.maxAttachmentsPerMessage} files.`
+    }), (filesError || submitError) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+      variant: "bodySmall",
+      color: "error",
+      accessibilityLiveRegion: "polite",
+      children: filesError ?? submitError
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.actions,
+      children: [onCancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+        title: "Cancel",
+        variant: "ghost",
+        tone: "neutral",
+        onPress: onCancel,
+        disabled: form.isSubmitting
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+        title: "Send ticket",
+        loading: form.isSubmitting,
+        disabled: form.isSubmitting,
+        onPress: form.submit,
+        testID: "support-new-submit"
+      })]
+    })]
+  });
+};
+const NewSupportTicket = props => {
+  const theme = (0, _mobileUi.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const {
+    config,
+    loading,
+    error,
+    reload
+  } = (0, _SupportProvider.useSupportConfig)();
+  const testID = props.testID ?? 'support-new-ticket';
+  if (!config) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.center,
+      testID: testID,
+      children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Spinner, {
+        accessibilityLabel: "Loading"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+          variant: "body",
+          color: "error",
+          align: "center",
+          children: error?.message ?? 'Support is not available right now.'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Button, {
+          title: "Try again",
+          variant: "ghost",
+          onPress: () => void reload()
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.root,
+    testID: testID,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TicketForm, {
+      ...props,
+      config: config,
+      styles: styles
+    })
+  });
+};
+exports.NewSupportTicket = NewSupportTicket;
+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
+  },
+  actions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: theme.spacing.sm
+  }
+});
+//# sourceMappingURL=NewSupportTicket.js.map

package/lib/commonjs/components/PhotoTray.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PhotoTray = void 0;
+var _mobileUi = require("@webority/mobile-ui");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _photos = require("../photos.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/** Photos on a message: thumbnails with remove buttons, plus library and camera buttons. */
+const PhotoTray = ({
+  photos,
+  onChange,
+  remaining,
+  maxBytes,
+  disabled,
+  label,
+  allowAdd = true
+}) => {
+  const theme = (0, _mobileUi.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const [picking, setPicking] = (0, _react.useState)(null);
+  const [error, setError] = (0, _react.useState)(null);
+  const add = async source => {
+    setError(null);
+    setPicking(source);
+    try {
+      const picked = await (0, _photos.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.root,
+    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+      variant: "label",
+      color: "secondary",
+      children: label
+    }) : null, photos.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.row,
+      children: photos.map((photo, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.item,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+          source: {
+            uri: photo.uri
+          },
+          style: styles.thumb,
+          accessibilityLabel: photo.name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.remove,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.IconButton, {
+            size: "sm",
+            variant: "glass",
+            icon: ({
+              color,
+              size
+            }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.actions,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileUi.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__*/(0, _jsxRuntime.jsx)(_mobileUi.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__*/(0, _jsxRuntime.jsx)(_mobileUi.Text, {
+      variant: "caption",
+      color: "error",
+      accessibilityLiveRegion: "polite",
+      children: error
+    }) : null]
+  });
+};
+exports.PhotoTray = PhotoTray;
+const THUMB = 72;
+const buildStyles = theme => _reactNative.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