@webority/mobile-support 0.0.13 → 0.2.0

package/lib/module/components/SupportContact.js

@@ -1,129 +1 @@
-"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
+"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";export const SupportContact=({testID:t="support-contact"})=>{const e=useTheme(),s=useMemo(()=>buildStyles(e),[e]),{config:o,loading:i,error:a}=useSupportConfig();if(!o)return _jsx(Card,{variant:"outlined",testID:t,children:i?_jsx(Spinner,{size:"sm",accessibilityLabel:"Loading contact details"}):_jsx(Text,{variant:"bodySmall",color:"error",children:a?.message??"Contact details are not available right now."})});const r=o.supportEmail,l=o.supportPhone?.trim(),n=o.supportHours?.trim(),open=(t,e)=>{Linking.openURL(t).catch(()=>toast.error(e))};return _jsxs(Card,{variant:"outlined",bodyStyle:s.body,testID:t,children:[_jsx(Text,{variant:"title",accessibilityRole:"header",children:`Contact ${o.supportName||o.productName}`}),_jsxs(View,{style:s.row,children:[_jsx(Text,{variant:"label",color:"secondary",children:"Email"}),_jsx(Text,{variant:"body",selectable:!0,testID:"support-contact-email",children:r||"-"})]}),r?_jsxs(View,{style:s.actions,children:[_jsx(Button,{title:"Copy",size:"sm",variant:"outline",tone:"neutral",leftIcon:"copy",accessibilityLabel:`Copy ${r}`,onPress:()=>{(async()=>{try{await copyText(r),toast.success("Email address copied.")}catch{toast.error("Could not copy the email address.")}})()},testID:"support-contact-copy"}),_jsx(Button,{title:"Send email",size:"sm",variant:"outline",leftIcon:"mail",accessibilityLabel:`Send an email to ${r}`,onPress:()=>open(`mailto:${r}`,"No email app is set up on this device."),testID:"support-contact-mail"})]}):null,l?_jsxs(View,{style:s.row,children:[_jsx(Text,{variant:"label",color:"secondary",children:"Phone"}),_jsx(Button,{title:l,size:"sm",variant:"link",leftIcon:"call",accessibilityLabel:`Call ${l}`,onPress:()=>open(`tel:${l.replace(/[^\d+]/g,"")}`,"This device cannot make calls."),testID:"support-contact-phone"})]}):null,n?_jsxs(View,{style:s.row,children:[_jsx(Text,{variant:"label",color:"secondary",children:"Hours"}),_jsx(Text,{variant:"bodySmall",children:n})]}):null]})};const buildStyles=t=>StyleSheet.create({body:{gap:t.spacing.sm},row:{gap:t.spacing.xxs,alignItems:"flex-start"},actions:{flexDirection:"row",gap:t.spacing.sm}});

package/lib/module/components/SupportTicketDetail.js

@@ -1,343 +1 @@
-"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
+"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,useSupportTimeZone}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:e,styles:t,timeZone:s,onOpenImage:i})=>{if("System"===e.authorKind)return _jsx(View,{style:t.system,testID:`support-message-${e.id}`,children:_jsx(Text,{variant:"caption",color:"tertiary",align:"center",children:`${e.body}, ${formatWhen(e.createdDateTimeUtc,s)}`})});const a="Customer"===e.authorKind;return _jsx(View,{style:[t.bubbleRow,a?t.mineRow:t.theirsRow],testID:`support-message-${e.id}`,children:_jsxs(View,{style:[t.bubble,a?t.mine:t.theirs],children:[_jsx(Text,{variant:"label",color:a?"primary":"secondary",children:e.authorName??"-"}),_jsx(Text,{variant:"body",selectable:!0,children:e.body}),_jsx(AttachmentList,{attachments:e.attachments,onOpenImage:i}),_jsx(Text,{variant:"caption",color:"tertiary",children:formatWhen(e.createdDateTimeUtc,s)})]})})},SATISFACTION_TEXT={Satisfied:"You said we handled this well.",Unsatisfied:"You said we did not handle this well."};export const SupportTicketDetail=({ticketId:e,testID:t="support-ticket-detail"})=>{const s=useTheme(),i=useMemo(()=>buildStyles(s),[s]),{config:a}=useSupportConfig(),n=useSupportTimeZone(),{ticket:o,loading:r,error:l,actionError:c,busy:d,reload:p,reply:m,reopen:u,rate:g}=useSupportTicket(e),[x,h]=useState(null),[y,b]=useState(""),[j,S]=useState([]),[f,_]=useState(null),[T,w]=useState(null),[v,I]=useState("");if(!o)return _jsx(View,{style:i.center,testID:t,children:r?_jsx(Spinner,{accessibilityLabel:"Loading the ticket"}):_jsxs(_Fragment,{children:[_jsx(Text,{variant:"body",color:"error",align:"center",children:l?.message??"That ticket could not be found."}),_jsx(Button,{title:"Try again",variant:"ghost",onPress:()=>{p()}})]})});const C=o.messages.filter(e=>!e.isInternal);return _jsxs(View,{style:i.root,testID:t,children:[_jsxs(ScrollView,{contentContainerStyle:i.content,keyboardShouldPersistTaps:"handled",children:[_jsxs(View,{style:i.head,children:[_jsx(Text,{variant:"h3",accessibilityRole:"header",children:o.subject}),_jsx(Text,{variant:"bodySmall",color:"secondary",children:`${o.number}, ${o.category}`}),_jsxs(View,{style:i.headRow,children:[_jsx(StatusBadge,{label:o.statusLabel,tone:STATUS_TONES[o.status]??"neutral",accessibilityLabel:`Status: ${o.statusLabel}`}),_jsx(Text,{variant:"caption",color:"tertiary",children:`Opened ${formatWhen(o.createdDateTimeUtc,n)}`})]})]}),o.canReopen&&_jsxs(Card,{variant:"outlined",bodyStyle:i.section,children:[_jsx(Text,{variant:"bodySmall",children:`This ticket is ${o.statusLabel}. Reopen it if you still need help.`}),_jsx(Button,{title:"Reopen ticket",variant:"outline",size:"sm",loading:d,disabled:d,onPress:()=>{u()},testID:"support-reopen"})]}),o.canRate&&_jsxs(Card,{variant:"outlined",bodyStyle:i.section,testID:"support-rating",children:[_jsx(Text,{variant:"label",children:"How did we do?"}),o.satisfaction&&_jsx(Text,{variant:"bodySmall",color:"secondary",children:SATISFACTION_TEXT[o.satisfaction]}),_jsxs(View,{style:i.ratingRow,children:[_jsx(Button,{title:"Satisfied",size:"sm",leftIcon:"like",variant:"Satisfied"===T?"solid":"outline",tone:"success",accessibilityState:{selected:"Satisfied"===T},onPress:()=>w("Satisfied"),testID:"support-rate-satisfied"}),_jsx(Button,{title:"Not satisfied",size:"sm",leftIcon:"dislike",variant:"Unsatisfied"===T?"solid":"outline",tone:"error",accessibilityState:{selected:"Unsatisfied"===T},onPress:()=>w("Unsatisfied"),testID:"support-rate-unsatisfied"})]}),T&&_jsxs(_Fragment,{children:[_jsx(Input,{label:"Anything to add? (optional)",value:v,onChangeText:I,multiline:!0,maxLength:a?.satisfactionCommentMaxLength,testID:"support-rating-comment"}),_jsx(Button,{title:"Send rating",size:"sm",loading:d,disabled:d,onPress:()=>{(async()=>{T&&await g({satisfaction:T,comment:v})&&(w(null),I(""))})()},testID:"support-rating-send"})]})]}),_jsx(View,{style:i.thread,accessibilityLabel:"Conversation",children:C.map(e=>_jsx(MessageBubble,{message:e,styles:i,timeZone:n,onOpenImage:(e,t)=>h({uri:e,name:t})},e.id))}),_jsxs(View,{style:i.section,children:[_jsx(Input,{label:"Your reply",placeholder:"Write a reply to the support team",value:y,onChangeText:b,multiline:!0,maxLength:a?.bodyMaxLength,error:f??void 0,testID:"support-reply-input"}),a&&_jsx(PhotoTray,{photos:j,onChange:S,remaining:a.maxAttachmentsPerMessage-j.length,maxBytes:a.maxAttachmentBytes,disabled:d}),o.canReopen&&_jsx(Text,{variant:"caption",color:"secondary",children:"Replying reopens this ticket."}),c&&_jsx(Text,{variant:"bodySmall",color:"error",accessibilityLiveRegion:"polite",children:c.message}),_jsx(Button,{title:"Send reply",leftIcon:"send",loading:d,disabled:d,onPress:()=>{(async()=>{const e=y.trim(),t=a?validateBody(e,a)??validateFiles(j,a):e?void 0:"Write a message.";t?_(t):(_(null),await m({body:e,files:j})&&(b(""),S([])))})()},testID:"support-reply-send"})]})]}),_jsx(ImageViewer,{image:x,onClose:()=>h(null)})]})};const buildStyles=e=>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},head:{gap:e.spacing.xxs},headRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.sm,marginTop:e.spacing.xs},section:{gap:e.spacing.sm},ratingRow:{flexDirection:"row",gap:e.spacing.sm},thread:{gap:e.spacing.sm},system:{paddingHorizontal:e.spacing.lg,paddingVertical:e.spacing.xxs},bubbleRow:{flexDirection:"row"},mineRow:{justifyContent:"flex-end"},theirsRow:{justifyContent:"flex-start"},bubble:{maxWidth:"85%",borderRadius:e.radius.lg,padding:e.spacing.sm,gap:e.spacing.xxs},mine:{backgroundColor:e.colors.primaryMuted},theirs:{backgroundColor:e.colors.background.secondary}});