@webority/mobile-support 0.0.13 → 0.2.0

package/lib/commonjs/components/Attachments.js

@@ -1,246 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageViewer=exports.AttachmentList=void 0;var _mobileUi=require("@webority/mobile-ui"),_react=require("react"),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_format=require("../format.js"),_SupportProvider=require("../SupportProvider.js"),_jsxRuntime=require("react/jsx-runtime");const AttachmentThumb=({attachment:e,onOpen:t})=>{const i=(0,_mobileUi.useTheme)(),s=(0,_react.useMemo)(()=>buildStyles(i),[i]),a=(0,_SupportProvider.useAttachmentLoader)(),[r,n]=(0,_react.useState)({status:"loading"});return(0,_react.useEffect)(()=>{let t=!1;return a(e).then(e=>!t&&n({status:"ready",uri:e}),()=>!t&&n({status:"error"})),()=>{t=!0}},[a,e]),"loading"===r.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.thumb,testID:`support-attachment-${e.id}`,children:(0,_jsxRuntime.jsx)(_mobileUi.Spinner,{size:"sm",accessibilityLabel:`Loading ${e.fileName}`})}):"error"===r.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.thumb,accessible:!0,accessibilityLabel:`${e.fileName} could not be loaded`,testID:`support-attachment-${e.id}`,children:(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",align:"center",children:"Could not load"})}):(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>t(r.uri,e.fileName),accessibilityRole:"imagebutton",accessibilityLabel:`Open ${e.fileName}`,testID:`support-attachment-${e.id}`,children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:r.uri},style:s.thumb,resizeMode:"cover"})})},FileRow=({attachment:e})=>{const t=(0,_mobileUi.useTheme)(),i=(0,_react.useMemo)(()=>buildStyles(t),[t]),s=(0,_SupportProvider.useAttachmentOpener)(),[a,r]=(0,_react.useState)(!1),n=`${e.fileName}, ${(0,_format.formatBytes)(e.sizeBytes)}`;if(!s)return(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"secondary",testID:`support-file-${e.id}`,children:n});return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>{(async()=>{r(!0);try{await s(e)}catch{_mobileUi.toast.error(`Could not open ${e.fileName}. Try again.`)}finally{r(!1)}})()},disabled:a,accessibilityRole:"button",accessibilityLabel:`Open ${e.fileName}`,accessibilityState:{busy:a,disabled:a},style:i.fileRow,testID:`support-file-${e.id}`,children:[(0,_jsxRuntime.jsx)(_mobileUi.AppIcon,{name:"document",size:16,color:t.colors.text.link}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"link",children:n}),a&&(0,_jsxRuntime.jsx)(_mobileUi.Spinner,{size:"sm",accessibilityLabel:`Opening ${e.fileName}`})]})},AttachmentList=({attachments:e,onOpenImage:t})=>{const i=(0,_mobileUi.useTheme)(),s=(0,_react.useMemo)(()=>buildStyles(i),[i]);if(0===e.length)return null;const a=e.filter(e=>(0,_format.isImage)(e.contentType)),r=e.filter(e=>!(0,_format.isImage)(e.contentType));return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.list,children:[a.length>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.thumbRow,children:a.map(e=>(0,_jsxRuntime.jsx)(AttachmentThumb,{attachment:e,onOpen:t},e.id))}),r.map(e=>(0,_jsxRuntime.jsx)(FileRow,{attachment:e},e.id))]})};exports.AttachmentList=AttachmentList;const ImageViewer=({image:e,onClose:t})=>{const i=(0,_mobileUi.useTheme)(),s=(0,_react.useMemo)(()=>buildStyles(i),[i]);return(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:null!==e,onRequestClose:t,animationType:"fade",transparent:!1,children:(0,_jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView,{style:s.viewer,testID:"support-image-viewer",children:[e&&(0,_jsxRuntime.jsx)(_mobileUi.ZoomableImage,{accessibilityLabel:e.name,style:s.viewerImageWrap,children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:e.uri},style:s.viewerImage,resizeMode:"contain"})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.viewerClose,children:(0,_jsxRuntime.jsx)(_mobileUi.IconButton,{icon:({color:e,size:t})=>(0,_jsxRuntime.jsx)(_mobileUi.AppIcon,{name:"close-circle",color:e,size:t}),accessibilityLabel:"Close image",onPress:t,variant:"glass"})}),(0,_jsxRuntime.jsx)(_mobileUi.ToastHost,{})]})})};exports.ImageViewer=ImageViewer;const THUMB=84,buildStyles=e=>_reactNative.StyleSheet.create({list:{gap:e.spacing.xs,marginTop:e.spacing.sm},fileRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.xxs,alignSelf:"flex-start"},thumbRow:{flexDirection:"row",flexWrap:"wrap",gap:e.spacing.xs},thumb:{width:84,height:84,borderRadius:e.radius.sm,backgroundColor:e.colors.background.secondary,alignItems:"center",justifyContent:"center",overflow:"hidden"},viewer:{flex:1,backgroundColor:e.colors.background.inverse},viewerImageWrap:{flex:1},viewerImage:{flex:1,width:"100%"},viewerClose:{position:"absolute",top:e.spacing["2xl"],right:e.spacing.md}});

package/lib/commonjs/components/NewSupportTicket.js

@@ -1,210 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NewSupportTicket=void 0;var _mobileUi=require("@webority/mobile-ui"),_react=require("react"),_reactNative=require("react-native"),_client=require("../client.js"),_SupportProvider=require("../SupportProvider.js"),_validation=require("../validation.js"),_PhotoTray=require("./PhotoTray.js"),_jsxRuntime=require("react/jsx-runtime");const TicketForm=({config:e,styles:t,onCreated:i,onCancel:r,initialDraft:a})=>{const o=(0,_SupportProvider.useCreateSupportTicket)(),[n,s]=(0,_react.useState)([]),[l,u]=(0,_react.useState)(a?.screenshots??[]),[c,d]=(0,_react.useState)(null),[m,p]=(0,_react.useState)(null),g=(0,_mobileUi.useForm)({initialValues:{category:a?.category??"",subject:a?.subject??"",body:a?.body??""},validate:{category:t=>(0,_validation.validateCategory)(t,e),subject:t=>(0,_validation.validateSubject)(t,e),body:t=>(0,_validation.validateBody)(t,e)},onSubmit:async t=>{const r=(0,_validation.validateFiles)([...l,...n],e);if(d(r??null),!r){p(null);try{const e=await o({category:t.category,subject:t.subject.trim(),body:t.body.trim(),pageUrl:a?.pageUrl,userAgent:a?.userAgent,appVersion:a?.appVersion,files:n,screenshots:l});i(e)}catch(e){p((0,_client.toSupportApiError)(e).message)}}}}),x=g.getFieldProps("category"),b=g.getFieldProps("subject"),_=g.getFieldProps("body"),h=l.length+n.length;return(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{contentContainerStyle:t.content,keyboardShouldPersistTaps:"handled",children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"secondary",children:"Tell us what you need. We reply by email and in this ticket."}),(0,_jsxRuntime.jsx)(_mobileUi.Select,{label:"Category",placeholder:"Choose a category",required:!0,options:e.categories.map(e=>({label:e,value:e})),value:x.value||void 0,onChange:e=>x.setValue(String(e),!0),error:x.error,testID:"support-new-category"}),(0,_jsxRuntime.jsx)(_mobileUi.Input,{label:"Subject",placeholder:"A short summary",required:!0,maxLength:e.subjectMaxLength,value:b.value,onChangeText:b.onChangeText,onBlur:b.onBlur,error:b.error,testID:"support-new-subject"}),(0,_jsxRuntime.jsx)(_mobileUi.Input,{label:"Message",placeholder:"What happened, and what did you expect?",required:!0,multiline:!0,maxLength:e.bodyMaxLength,value:_.value,onChangeText:_.onChangeText,onBlur:_.onBlur,error:_.error,testID:"support-new-body"}),l.length>0&&(0,_jsxRuntime.jsx)(_PhotoTray.PhotoTray,{label:"Screenshot",photos:l,onChange:u,remaining:0,allowAdd:!1,maxBytes:e.maxAttachmentBytes,disabled:g.isSubmitting}),(0,_jsxRuntime.jsx)(_PhotoTray.PhotoTray,{label:"Photos",photos:n,onChange:s,remaining:e.maxAttachmentsPerMessage-h,maxBytes:e.maxAttachmentBytes,disabled:g.isSubmitting}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",children:`Attach up to ${e.maxAttachmentsPerMessage} files.`}),(c||m)&&(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"error",accessibilityLiveRegion:"polite",children:c??m}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:t.actions,children:[r&&(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Cancel",variant:"ghost",tone:"neutral",onPress:r,disabled:g.isSubmitting}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Send ticket",loading:g.isSubmitting,disabled:g.isSubmitting,onPress:g.submit,testID:"support-new-submit"})]})]})},NewSupportTicket=e=>{const t=(0,_mobileUi.useTheme)(),i=(0,_react.useMemo)(()=>buildStyles(t),[t]),{config:r,loading:a,error:o,reload:n}=(0,_SupportProvider.useSupportConfig)(),s=e.testID??"support-new-ticket";return r?(0,_jsxRuntime.jsx)(_reactNative.View,{style:i.root,testID:s,children:(0,_jsxRuntime.jsx)(TicketForm,{...e,config:r,styles:i})}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:i.center,testID:s,children:a?(0,_jsxRuntime.jsx)(_mobileUi.Spinner,{accessibilityLabel:"Loading"}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"body",color:"error",align:"center",children:o?.message??"Support is not available right now."}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Try again",variant:"ghost",onPress:()=>{n()}})]})})};exports.NewSupportTicket=NewSupportTicket;const buildStyles=e=>_reactNative.StyleSheet.create({root:{flex:1},content:{padding:e.spacing.md,gap:e.spacing.md},center:{flex:1,alignItems:"center",justifyContent:"center",padding:e.spacing.xl,gap:e.spacing.sm},actions:{flexDirection:"row",justifyContent:"flex-end",gap:e.spacing.sm}});

package/lib/commonjs/components/PhotoTray.js

@@ -1,141 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PhotoTray=void 0;var _mobileUi=require("@webority/mobile-ui"),_react=require("react"),_reactNative=require("react-native"),_photos=require("../photos.js"),_jsxRuntime=require("react/jsx-runtime");const PhotoTray=({photos:e,onChange:t,remaining:i,maxBytes:o,disabled:a,label:r,allowAdd:s=!0})=>{const l=(0,_mobileUi.useTheme)(),n=(0,_react.useMemo)(()=>buildStyles(l),[l]),[c,u]=(0,_react.useState)(null),[m,x]=(0,_react.useState)(null),add=async a=>{x(null),u(a);try{const r=await(0,_photos.pickPhotos)(a,{maxCount:i,maxBytes:o});r.length>0&&t([...e,...r])}catch(e){x(e instanceof Error&&"PhotoPermissionError"===e.name?e.message:"That photo could not be added. Try another one.")}finally{u(null)}},d=i<=0;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:n.root,children:[r?(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"label",color:"secondary",children:r}):null,e.length>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:n.row,children:e.map((i,o)=>(0,_jsxRuntime.jsxs)(_reactNative.View,{style:n.item,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:i.uri},style:n.thumb,accessibilityLabel:i.name}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:n.remove,children:(0,_jsxRuntime.jsx)(_mobileUi.IconButton,{size:"sm",variant:"glass",icon:({color:e,size:t})=>(0,_jsxRuntime.jsx)(_mobileUi.AppIcon,{name:"trash",color:e,size:t}),accessibilityLabel:`Remove ${i.name}`,disabled:a,onPress:()=>t(e.filter((e,t)=>t!==o))})})]},`${i.uri}-${o}`))}),s&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:n.actions,children:[(0,_jsxRuntime.jsx)(_mobileUi.Button,{size:"sm",variant:"outline",tone:"neutral",leftIcon:"gallery",title:"Add photo",accessibilityLabel:"Add a photo from your library",loading:"library"===c,disabled:a||d||null!==c,onPress:()=>{add("library")}}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{size:"sm",variant:"outline",tone:"neutral",leftIcon:"camera",title:"Take photo",accessibilityLabel:"Take a photo with your camera",loading:"camera"===c,disabled:a||d||null!==c,onPress:()=>{add("camera")}})]}),m?(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"error",accessibilityLiveRegion:"polite",children:m}):null]})};exports.PhotoTray=PhotoTray;const THUMB=72,buildStyles=e=>_reactNative.StyleSheet.create({root:{gap:e.spacing.xs},row:{flexDirection:"row",flexWrap:"wrap",gap:e.spacing.xs},item:{width:72,height:72},thumb:{width:72,height:72,borderRadius:e.radius.sm,backgroundColor:e.colors.background.secondary},remove:{position:"absolute",top:e.spacing.xxs,right:e.spacing.xxs},actions:{flexDirection:"row",gap:e.spacing.sm}});