@webority/mobile-support 0.13.0 → 0.14.0

package/lib/commonjs/components/SupportTicketDetail.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SupportTicketDetail=void 0;var _mobileCore=require("@webority/mobile-core"),_mobileUi=require("@webority/mobile-ui"),_react=require("react"),_reactNative=require("react-native"),_SupportProvider=require("../SupportProvider.js"),_validation=require("../validation.js"),_Attachments=require("./Attachments.js"),_PhotoTray=require("./PhotoTray.js"),_SupportTicketList=require("./SupportTicketList.js"),_jsxRuntime=require("react/jsx-runtime");const MessageBubble=({message:e,styles:t,timeZone:i,onOpenImage:s})=>{if("System"===e.authorKind)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.system,testID:`support-message-${e.id}`,children:(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",align:"center",children:`${e.body}, ${(0,_mobileCore.formatDateTime)(e.createdDateTimeUtc,{zone:i})}`})});const a="Customer"===e.authorKind;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[t.bubbleRow,a?t.mineRow:t.theirsRow],testID:`support-message-${e.id}`,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[t.bubble,a?t.mine:t.theirs],children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"label",color:a?"primary":"secondary",children:e.authorName??(a?"You":"Support team")}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"body",selectable:!0,children:e.body}),(0,_jsxRuntime.jsx)(_Attachments.AttachmentList,{attachments:e.attachments,onOpenImage:s}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",children:(0,_mobileCore.formatDateTime)(e.createdDateTimeUtc,{zone:i})})]})})},SATISFACTION_TEXT={Satisfied:"You told us this solved your problem.",Unsatisfied:"You told us this did not solve your problem."},SupportTicketDetail=({ticketId:e,testID:t="support-ticket-detail"})=>{const i=(0,_mobileUi.useTheme)(),s=(0,_react.useMemo)(()=>buildStyles(i),[i]),{config:a}=(0,_SupportProvider.useSupportConfig)(),n=(0,_SupportProvider.useSupportTimeZone)(),{ticket:o,loading:r,error:l,actionError:c,busy:m,reload:u,reply:d,reopen:x,rate:p}=(0,_SupportProvider.useSupportTicket)(e),[_,b]=(0,_react.useState)(null),[j,g]=(0,_react.useState)(""),[y,h]=(0,_react.useState)([]),[R,v]=(0,_react.useState)(null),[S,T]=(0,_react.useState)(null),[f,U]=(0,_react.useState)("");if(!o)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.center,testID:t,children:r?(0,_jsxRuntime.jsx)(_mobileUi.Spinner,{accessibilityLabel:"Loading the ticket"}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"body",color:"error",align:"center",children:l?.message??"That ticket could not be found."}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Try again",variant:"ghost",onPress:()=>{u()}})]})});const w=o.messages.filter(e=>!e.isInternal);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.root,testID:t,children:[(0,_jsxRuntime.jsxs)(_mobileUi.KeyboardAwareScrollView,{contentContainerStyle:s.content,safeAreaEdges:[],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.head,children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"h3",accessibilityRole:"header",children:o.subject}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"secondary",children:`${o.number}, ${o.category}`}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.headRow,children:[(0,_jsxRuntime.jsx)(_mobileUi.StatusBadge,{label:o.statusLabel,tone:_SupportTicketList.STATUS_TONES[o.status]??"neutral",accessibilityLabel:`Status: ${o.statusLabel}`}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",children:`Opened ${(0,_mobileCore.formatDateTime)(o.createdDateTimeUtc,{zone:n})}`})]})]}),o.canReopen&&(0,_jsxRuntime.jsxs)(_mobileUi.Card,{variant:"outlined",bodyStyle:s.section,children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",children:`This ticket is ${o.statusLabel}. Reopen it if you still need help.`}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Reopen ticket",variant:"outline",size:"sm",loading:m,disabled:m,onPress:()=>{x()},testID:"support-reopen"})]}),o.satisfaction?(0,_jsxRuntime.jsxs)(_mobileUi.Card,{variant:"outlined",bodyStyle:s.section,testID:"support-rating",children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",accessibilityLiveRegion:"polite",children:SATISFACTION_TEXT[o.satisfaction]}),o.satisfactionComment?(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"secondary",children:`Your comment: ${o.satisfactionComment}`}):null]}):o.canRate?(0,_jsxRuntime.jsxs)(_mobileUi.Card,{variant:"outlined",bodyStyle:s.section,testID:"support-rating",children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"label",children:"Did this solve your problem?"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.ratingRow,children:[(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Yes, it is solved",size:"sm",leftIcon:"like",variant:"Satisfied"===S?"solid":"outline",tone:"success",accessibilityState:{selected:"Satisfied"===S},"aria-selected":"Satisfied"===S,onPress:()=>T("Satisfied"),testID:"support-rate-satisfied"}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"No, it is not",size:"sm",leftIcon:"dislike",variant:"Unsatisfied"===S?"solid":"outline",tone:"error",accessibilityState:{selected:"Unsatisfied"===S},"aria-selected":"Unsatisfied"===S,onPress:()=>T("Unsatisfied"),testID:"support-rate-unsatisfied"})]}),S&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_mobileUi.Input,{label:"Anything to add? (optional)",helperText:"Your comment goes to the support team.",value:f,onChangeText:U,multiline:!0,maxLength:a?.satisfactionCommentMaxLength,testID:"support-rating-comment"}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Send answer",size:"sm",loading:m,disabled:m,onPress:()=>{(async()=>{S&&await p({satisfaction:S,comment:f})&&(T(null),U(""))})()},testID:"support-rating-send"})]})]}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.thread,accessibilityLabel:"Conversation",children:w.map(e=>(0,_jsxRuntime.jsx)(MessageBubble,{message:e,styles:s,timeZone:n,onOpenImage:(e,t)=>b({uri:e,name:t})},e.id))}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.section,children:[(0,_jsxRuntime.jsx)(_mobileUi.Input,{label:"Your reply",placeholder:"Write a reply to the support team",value:j,onChangeText:g,multiline:!0,maxLength:a?.bodyMaxLength,error:R??void 0,testID:"support-reply-input"}),a&&(0,_jsxRuntime.jsx)(_PhotoTray.PhotoTray,{photos:y,onChange:h,remaining:a.maxAttachmentsPerMessage-y.length,maxBytes:a.maxAttachmentBytes,disabled:m}),o.canReopen&&(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"secondary",children:"Replying reopens this ticket."}),c&&(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"error",accessibilityLiveRegion:"polite",children:c.message}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Send reply",leftIcon:"send",loading:m,disabled:m,onPress:()=>{(async()=>{const e=j.trim(),t=a?(0,_validation.validateBody)(e,a)??(0,_validation.validateFiles)(y,a):e?void 0:"Write a message.";t?v(t):(v(null),await d({body:e,files:y})&&(g(""),h([])))})()},testID:"support-reply-send"})]})]}),(0,_jsxRuntime.jsx)(_Attachments.ImageViewer,{image:_,onClose:()=>b(null)})]})};exports.SupportTicketDetail=SupportTicketDetail;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},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",flexWrap:"wrap",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}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SupportTicketDetail=void 0;var _mobileCore=require("@webority/mobile-core"),_mobileUi=require("@webority/mobile-ui"),_react=require("react"),_reactNative=require("react-native"),_SupportProvider=require("../SupportProvider.js"),_validation=require("../validation.js"),_Attachments=require("./Attachments.js"),_PhotoTray=require("./PhotoTray.js"),_SupportTicketList=require("./SupportTicketList.js"),_jsxRuntime=require("react/jsx-runtime");const MessageBubble=({message:e,styles:t,timeZone:i,onOpenImage:s})=>{if("System"===e.authorKind)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.system,testID:`support-message-${e.id}`,children:(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",align:"center",children:`${e.body}, ${(0,_mobileCore.formatDateTime)(e.createdDateTimeUtc,{zone:i})}`})});const a="Customer"===e.authorKind;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[t.bubbleRow,a?t.mineRow:t.theirsRow],testID:`support-message-${e.id}`,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[t.bubble,a?t.mine:t.theirs],children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"label",color:a?"primary":"secondary",children:e.authorName??(a?"You":"Support team")}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"body",selectable:!0,children:e.body}),(0,_jsxRuntime.jsx)(_Attachments.AttachmentList,{attachments:e.attachments,onOpenImage:s}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",children:(0,_mobileCore.formatDateTime)(e.createdDateTimeUtc,{zone:i})})]})})},SATISFACTION_TEXT={Satisfied:"You told us this solved your problem.",Unsatisfied:"You told us this did not solve your problem."},SupportTicketDetail=({ticketId:e,testID:t="support-ticket-detail"})=>{const i=(0,_mobileUi.useTheme)(),s=(0,_react.useMemo)(()=>buildStyles(i),[i]),{config:a}=(0,_SupportProvider.useSupportConfig)(),n=(0,_SupportProvider.useSupportTimeZone)(),{ticket:o,loading:r,error:l,actionError:c,busy:m,reload:u,reply:d,reopen:x,rate:p}=(0,_SupportProvider.useSupportTicket)(e),[_,b]=(0,_react.useState)(null),[j,y]=(0,_react.useState)(""),[g,h]=(0,_react.useState)([]),[R,v]=(0,_react.useState)(null),[S,T]=(0,_react.useState)(null),[f,U]=(0,_react.useState)("");if(!o)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.center,testID:t,children:r?(0,_jsxRuntime.jsx)(_mobileUi.Spinner,{accessibilityLabel:"Loading the ticket"}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"body",color:"error",align:"center",children:l?.message??"That ticket could not be found."}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Try again",variant:"ghost",onPress:()=>{u()}})]})});const w=o.messages.filter(e=>!e.isInternal);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.root,testID:t,children:[(0,_jsxRuntime.jsxs)(_mobileUi.KeyboardAwareScrollView,{contentContainerStyle:s.content,safeAreaEdges:[],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.head,children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"h3",accessibilityRole:"header",children:o.subject}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"secondary",children:`${o.number}, ${o.category}`}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.headRow,children:[(0,_jsxRuntime.jsx)(_mobileUi.StatusBadge,{label:o.statusLabel,tone:_SupportTicketList.STATUS_TONES[o.status]??"neutral",accessibilityLabel:`Status: ${o.statusLabel}`}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",children:`Opened ${(0,_mobileCore.formatDateTime)(o.createdDateTimeUtc,{zone:n})}`})]})]}),"WaitingOnCustomer"===o.status&&(0,_jsxRuntime.jsx)(_mobileUi.Card,{variant:"outlined",bodyStyle:s.section,testID:"support-waiting",children:(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",children:"We need your answer to carry on. Reply below and the ticket goes back to our team."})}),o.canReopen&&(0,_jsxRuntime.jsxs)(_mobileUi.Card,{variant:"outlined",bodyStyle:s.section,children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",children:`This ticket is ${o.statusLabel}. Reopen it if you still need help.`}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Reopen ticket",variant:"outline",size:"sm",loading:m,disabled:m,onPress:()=>{x()},testID:"support-reopen"})]}),o.satisfaction?(0,_jsxRuntime.jsxs)(_mobileUi.Card,{variant:"outlined",bodyStyle:s.section,testID:"support-rating",children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",accessibilityLiveRegion:"polite",children:SATISFACTION_TEXT[o.satisfaction]}),o.satisfactionComment?(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"secondary",children:`Your comment: ${o.satisfactionComment}`}):null]}):o.canRate?(0,_jsxRuntime.jsxs)(_mobileUi.Card,{variant:"outlined",bodyStyle:s.section,testID:"support-rating",children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"label",children:"Did this solve your problem?"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.ratingRow,children:[(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Yes, it is solved",size:"sm",leftIcon:"like",variant:"Satisfied"===S?"solid":"outline",tone:"success",accessibilityState:{selected:"Satisfied"===S},"aria-selected":"Satisfied"===S,onPress:()=>T("Satisfied"),testID:"support-rate-satisfied"}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"No, it is not",size:"sm",leftIcon:"dislike",variant:"Unsatisfied"===S?"solid":"outline",tone:"error",accessibilityState:{selected:"Unsatisfied"===S},"aria-selected":"Unsatisfied"===S,onPress:()=>T("Unsatisfied"),testID:"support-rate-unsatisfied"})]}),S&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_mobileUi.Input,{label:"Anything to add? (optional)",helperText:"Your comment goes to the support team.",value:f,onChangeText:U,multiline:!0,maxLength:a?.satisfactionCommentMaxLength,testID:"support-rating-comment"}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Send answer",size:"sm",loading:m,disabled:m,onPress:()=>{(async()=>{S&&await p({satisfaction:S,comment:f})&&(T(null),U(""))})()},testID:"support-rating-send"})]})]}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.thread,accessibilityLabel:"Conversation",children:w.map(e=>(0,_jsxRuntime.jsx)(MessageBubble,{message:e,styles:s,timeZone:n,onOpenImage:(e,t)=>b({uri:e,name:t})},e.id))}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.section,children:[(0,_jsxRuntime.jsx)(_mobileUi.Input,{label:"Your reply",placeholder:"Write a reply to the support team",value:j,onChangeText:y,multiline:!0,maxLength:a?.bodyMaxLength,error:R??void 0,testID:"support-reply-input"}),a&&(0,_jsxRuntime.jsx)(_PhotoTray.PhotoTray,{photos:g,onChange:h,remaining:a.maxAttachmentsPerMessage-g.length,maxBytes:a.maxAttachmentBytes,disabled:m}),o.canReopen&&(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"secondary",children:"Replying reopens this ticket."}),c&&(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"error",accessibilityLiveRegion:"polite",children:c.message}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Send reply",leftIcon:"send",loading:m,disabled:m,onPress:()=>{(async()=>{const e=j.trim(),t=a?(0,_validation.validateBody)(e,a)??(0,_validation.validateFiles)(g,a):e?void 0:"Write a message.";t?v(t):(v(null),await d({body:e,files:g})&&(y(""),h([])))})()},testID:"support-reply-send"})]})]}),(0,_jsxRuntime.jsx)(_Attachments.ImageViewer,{image:_,onClose:()=>b(null)})]})};exports.SupportTicketDetail=SupportTicketDetail;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},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",flexWrap:"wrap",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}});

package/lib/commonjs/components/SupportTicketList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.statusFilterOptions=exports.SupportTicketList=exports.STATUS_TONES=void 0;var _mobileCore=require("@webority/mobile-core"),_mobileUi=require("@webority/mobile-ui"),_react=require("react"),_reactNative=require("react-native"),_SupportProvider=require("../SupportProvider.js"),_jsxRuntime=require("react/jsx-runtime");const STATUS_TONES=exports.STATUS_TONES={Open:"warning",InProgress:"info",Resolved:"success",Closed:"neutral"},STATUS_FILTERS=[{value:"Open",label:"Open",count:"open"},{value:"InProgress",label:"In progress",count:"inProgress"},{value:"Resolved",label:"Resolved",count:"resolved"},{value:"Closed",label:"Closed",count:"closed"}],ALL="all",statusFilterOptions=(e,t)=>[{value:ALL,label:"All",count:e.total},...STATUS_FILTERS.filter(i=>e[i.count]>0||i.value===t).map(t=>({value:t.value,label:t.label,count:e[t.count]}))];exports.statusFilterOptions=statusFilterOptions;const SEARCH_DEBOUNCE_MS=400,SupportTicketList=({onOpenTicket:e,onNewTicket:t,header:i,pageSize:s,testID:r="support-ticket-list"})=>{const o=(0,_mobileUi.useTheme)(),a=(0,_react.useMemo)(()=>buildStyles(o),[o]),{tickets:n,counts:l,status:c,search:u,setStatus:m,setSearch:p,loading:d,refreshing:x,loadingMore:_,error:b,loadMoreError:j,refresh:S,loadMore:h}=(0,_SupportProvider.useSupportTickets)({pageSize:s}),g=(0,_SupportProvider.useSupportTimeZone)(),v=(l?.total??0)>0,y=null!==c||""!==u.trim(),R=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:a.header,children:[i,t&&(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"New ticket",leftIcon:"add",onPress:t,fullWidth:!0}),b&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:a.error,accessibilityLiveRegion:"polite",children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"error",children:b.message}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Try again",size:"sm",variant:"ghost",onPress:()=>{S()}})]}),l&&v&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_mobileUi.SearchBar,{value:u,onChangeText:p,debounceMs:400,placeholder:"Search by subject or ticket number",accessibilityLabel:"Search tickets",testID:"support-ticket-search"}),(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:a.filters,accessibilityRole:"tablist",accessibilityLabel:"Filter by status",children:statusFilterOptions(l,c).map(e=>(0,_jsxRuntime.jsx)(_mobileUi.Chip,{label:`${e.label} (${e.count})`,selected:(c??ALL)===e.value,onPress:()=>m(e.value===ALL?null:e.value),accessibilityLabel:`${e.label}, ${e.count} tickets`,testID:`support-filter-${e.value}`},e.value))})]})]});if(d&&null===l&&!b)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:a.center,testID:r,children:(0,_jsxRuntime.jsx)(_mobileUi.Spinner,{accessibilityLabel:"Loading your tickets"})});const T=_?(0,_jsxRuntime.jsx)(_reactNative.View,{style:a.footer,children:(0,_jsxRuntime.jsx)(_mobileUi.Spinner,{size:"sm",accessibilityLabel:"Loading more tickets"})}):j?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[a.footer,a.error],accessibilityLiveRegion:"polite",children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"error",children:j.message}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Load more",size:"sm",variant:"ghost",onPress:()=>{h()}})]}):null;return(0,_jsxRuntime.jsx)(_reactNative.FlatList,{testID:r,data:n,keyExtractor:e=>e.id,contentContainerStyle:a.content,ListHeaderComponent:R,ListFooterComponent:T,onEndReached:()=>{h()},onEndReachedThreshold:.5,refreshControl:(0,_jsxRuntime.jsx)(_reactNative.RefreshControl,{refreshing:x,onRefresh:()=>{S()}}),ListEmptyComponent:d?(0,_jsxRuntime.jsx)(_reactNative.View,{style:a.footer,children:(0,_jsxRuntime.jsx)(_mobileUi.Spinner,{accessibilityLabel:"Loading your tickets"})}):b?null:v?(0,_jsxRuntime.jsx)(_mobileUi.EmptyState,{title:"No tickets match",description:y?"Try another status or search.":void 0}):(0,_jsxRuntime.jsx)(_mobileUi.EmptyState,{title:"No tickets yet",description:"Raise a ticket and it will show here with its status.",action:t?{label:"New ticket",onPress:t}:void 0}),renderItem:({item:t})=>(0,_jsxRuntime.jsxs)(_mobileUi.Card,{onPress:()=>e(t),accessibilityLabel:`${t.subject}, ${t.statusLabel}, ticket ${t.number}`,bodyStyle:a.card,testID:`support-ticket-${t.id}`,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:a.cardTop,children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",children:t.number}),(0,_jsxRuntime.jsx)(_mobileUi.StatusBadge,{label:t.statusLabel,tone:STATUS_TONES[t.status]??"neutral",size:"sm"})]}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"title",numberOfLines:2,children:t.subject}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"secondary",children:t.category}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:a.cardBottom,children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",children:`Updated ${(0,_mobileCore.formatDateTime)(t.updatedDateTimeUtc,{zone:g})}`}),t.awaitingCustomer&&(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"warning",children:"Waiting for your reply"})]})]})})};exports.SupportTicketList=SupportTicketList;const buildStyles=e=>_reactNative.StyleSheet.create({content:{padding:e.spacing.md,gap:e.spacing.sm},header:{gap:e.spacing.sm,marginBottom:e.spacing.xs},filters:{gap:e.spacing.xs},error:{gap:e.spacing.xs,alignItems:"flex-start"},center:{flex:1,alignItems:"center",justifyContent:"center",padding:e.spacing.xl},footer:{paddingVertical:e.spacing.md,alignItems:"center"},card:{gap:e.spacing.xxs},cardTop:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},cardBottom:{flexDirection:"row",justifyContent:"space-between",marginTop:e.spacing.xxs}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.statusFilterOptions=exports.SupportTicketList=exports.STATUS_TONES=void 0;var _mobileCore=require("@webority/mobile-core"),_mobileUi=require("@webority/mobile-ui"),_react=require("react"),_reactNative=require("react-native"),_SupportProvider=require("../SupportProvider.js"),_jsxRuntime=require("react/jsx-runtime");const STATUS_TONES=exports.STATUS_TONES={Open:"warning",InProgress:"info",WaitingOnCustomer:"warning",Resolved:"success",Closed:"neutral"},STATUS_FILTERS=[{value:"Open",label:"Open",count:"open"},{value:"InProgress",label:"In progress",count:"inProgress"},{value:"WaitingOnCustomer",label:"Waiting on you",count:"waitingOnCustomer"},{value:"Resolved",label:"Resolved",count:"resolved"},{value:"Closed",label:"Closed",count:"closed"}],ALL="all",statusFilterOptions=(e,t)=>[{value:ALL,label:"All",count:e.total},...STATUS_FILTERS.filter(i=>e[i.count]>0||i.value===t).map(t=>({value:t.value,label:t.label,count:e[t.count]}))];exports.statusFilterOptions=statusFilterOptions;const SEARCH_DEBOUNCE_MS=400,SupportTicketList=({onOpenTicket:e,onNewTicket:t,header:i,pageSize:s,testID:r="support-ticket-list"})=>{const o=(0,_mobileUi.useTheme)(),n=(0,_react.useMemo)(()=>buildStyles(o),[o]),{tickets:a,counts:l,status:c,search:u,setStatus:m,setSearch:p,loading:d,refreshing:x,loadingMore:_,error:b,loadMoreError:j,refresh:g,loadMore:S}=(0,_SupportProvider.useSupportTickets)({pageSize:s}),h=(0,_SupportProvider.useSupportTimeZone)(),v=(l?.total??0)>0,y=null!==c||""!==u.trim(),R=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:n.header,children:[i,t&&(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"New ticket",leftIcon:"add",onPress:t,fullWidth:!0}),b&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:n.error,accessibilityLiveRegion:"polite",children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"error",children:b.message}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Try again",size:"sm",variant:"ghost",onPress:()=>{g()}})]}),l&&v&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_mobileUi.SearchBar,{value:u,onChangeText:p,debounceMs:400,placeholder:"Search by subject or ticket number",accessibilityLabel:"Search tickets",testID:"support-ticket-search"}),(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:n.filters,accessibilityRole:"tablist",accessibilityLabel:"Filter by status",children:statusFilterOptions(l,c).map(e=>(0,_jsxRuntime.jsx)(_mobileUi.Chip,{label:`${e.label} (${e.count})`,selected:(c??ALL)===e.value,onPress:()=>m(e.value===ALL?null:e.value),accessibilityLabel:`${e.label}, ${e.count} tickets`,testID:`support-filter-${e.value}`},e.value))})]})]});if(d&&null===l&&!b)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:n.center,testID:r,children:(0,_jsxRuntime.jsx)(_mobileUi.Spinner,{accessibilityLabel:"Loading your tickets"})});const T=_?(0,_jsxRuntime.jsx)(_reactNative.View,{style:n.footer,children:(0,_jsxRuntime.jsx)(_mobileUi.Spinner,{size:"sm",accessibilityLabel:"Loading more tickets"})}):j?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[n.footer,n.error],accessibilityLiveRegion:"polite",children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"error",children:j.message}),(0,_jsxRuntime.jsx)(_mobileUi.Button,{title:"Load more",size:"sm",variant:"ghost",onPress:()=>{S()}})]}):null;return(0,_jsxRuntime.jsx)(_reactNative.FlatList,{testID:r,data:a,keyExtractor:e=>e.id,contentContainerStyle:n.content,ListHeaderComponent:R,ListFooterComponent:T,onEndReached:()=>{S()},onEndReachedThreshold:.5,refreshControl:(0,_jsxRuntime.jsx)(_reactNative.RefreshControl,{refreshing:x,onRefresh:()=>{g()}}),ListEmptyComponent:d?(0,_jsxRuntime.jsx)(_reactNative.View,{style:n.footer,children:(0,_jsxRuntime.jsx)(_mobileUi.Spinner,{accessibilityLabel:"Loading your tickets"})}):b?null:v?(0,_jsxRuntime.jsx)(_mobileUi.EmptyState,{title:"No tickets match",description:y?"Try another status or search.":void 0}):(0,_jsxRuntime.jsx)(_mobileUi.EmptyState,{title:"No tickets yet",description:"Raise a ticket and it will show here with its status.",action:t?{label:"New ticket",onPress:t}:void 0}),renderItem:({item:t})=>(0,_jsxRuntime.jsxs)(_mobileUi.Card,{onPress:()=>e(t),accessibilityLabel:`${t.subject}, ${t.statusLabel}, ticket ${t.number}`,bodyStyle:n.card,testID:`support-ticket-${t.id}`,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:n.cardTop,children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",children:t.number}),(0,_jsxRuntime.jsx)(_mobileUi.StatusBadge,{label:t.statusLabel,tone:STATUS_TONES[t.status]??"neutral",size:"sm"})]}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"title",numberOfLines:2,children:t.subject}),(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"bodySmall",color:"secondary",children:t.category}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:n.cardBottom,children:[(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"tertiary",children:`Updated ${(0,_mobileCore.formatDateTime)(t.updatedDateTimeUtc,{zone:h})}`}),t.awaitingCustomer&&(0,_jsxRuntime.jsx)(_mobileUi.Text,{variant:"caption",color:"warning",children:"Waiting for your reply"})]})]})})};exports.SupportTicketList=SupportTicketList;const buildStyles=e=>_reactNative.StyleSheet.create({content:{padding:e.spacing.md,gap:e.spacing.sm},header:{gap:e.spacing.sm,marginBottom:e.spacing.xs},filters:{gap:e.spacing.xs},error:{gap:e.spacing.xs,alignItems:"flex-start"},center:{flex:1,alignItems:"center",justifyContent:"center",padding:e.spacing.xl},footer:{paddingVertical:e.spacing.md,alignItems:"center"},card:{gap:e.spacing.xxs},cardTop:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},cardBottom:{flexDirection:"row",justifyContent:"space-between",marginTop:e.spacing.xxs}});

package/lib/module/components/SupportTicketDetail.js

@@ -1 +1 @@
-"use strict";import{formatDateTime}from"@webority/mobile-core";import{Button,Card,Input,KeyboardAwareScrollView,Spinner,StatusBadge,Text,useTheme}from"@webority/mobile-ui";import{useMemo,useState}from"react";import{StyleSheet,View}from"react-native";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}, ${formatDateTime(e.createdDateTimeUtc,{zone: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??(a?"You":"Support team")}),_jsx(Text,{variant:"body",selectable:!0,children:e.body}),_jsx(AttachmentList,{attachments:e.attachments,onOpenImage:i}),_jsx(Text,{variant:"caption",color:"tertiary",children:formatDateTime(e.createdDateTimeUtc,{zone:s})})]})})},SATISFACTION_TEXT={Satisfied:"You told us this solved your problem.",Unsatisfied:"You told us this did not solve your problem."};export const SupportTicketDetail=({ticketId:e,testID:t="support-ticket-detail"})=>{const s=useTheme(),i=useMemo(()=>buildStyles(s),[s]),{config:a}=useSupportConfig(),o=useSupportTimeZone(),{ticket:n,loading:r,error:l,actionError:c,busy:d,reload:m,reply:p,reopen:u,rate:g}=useSupportTicket(e),[x,y]=useState(null),[h,b]=useState(""),[S,j]=useState([]),[f,T]=useState(null),[_,v]=useState(null),[w,I]=useState("");if(!n)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:()=>{m()}})]})});const D=n.messages.filter(e=>!e.isInternal);return _jsxs(View,{style:i.root,testID:t,children:[_jsxs(KeyboardAwareScrollView,{contentContainerStyle:i.content,safeAreaEdges:[],children:[_jsxs(View,{style:i.head,children:[_jsx(Text,{variant:"h3",accessibilityRole:"header",children:n.subject}),_jsx(Text,{variant:"bodySmall",color:"secondary",children:`${n.number}, ${n.category}`}),_jsxs(View,{style:i.headRow,children:[_jsx(StatusBadge,{label:n.statusLabel,tone:STATUS_TONES[n.status]??"neutral",accessibilityLabel:`Status: ${n.statusLabel}`}),_jsx(Text,{variant:"caption",color:"tertiary",children:`Opened ${formatDateTime(n.createdDateTimeUtc,{zone:o})}`})]})]}),n.canReopen&&_jsxs(Card,{variant:"outlined",bodyStyle:i.section,children:[_jsx(Text,{variant:"bodySmall",children:`This ticket is ${n.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"})]}),n.satisfaction?_jsxs(Card,{variant:"outlined",bodyStyle:i.section,testID:"support-rating",children:[_jsx(Text,{variant:"bodySmall",accessibilityLiveRegion:"polite",children:SATISFACTION_TEXT[n.satisfaction]}),n.satisfactionComment?_jsx(Text,{variant:"bodySmall",color:"secondary",children:`Your comment: ${n.satisfactionComment}`}):null]}):n.canRate?_jsxs(Card,{variant:"outlined",bodyStyle:i.section,testID:"support-rating",children:[_jsx(Text,{variant:"label",children:"Did this solve your problem?"}),_jsxs(View,{style:i.ratingRow,children:[_jsx(Button,{title:"Yes, it is solved",size:"sm",leftIcon:"like",variant:"Satisfied"===_?"solid":"outline",tone:"success",accessibilityState:{selected:"Satisfied"===_},"aria-selected":"Satisfied"===_,onPress:()=>v("Satisfied"),testID:"support-rate-satisfied"}),_jsx(Button,{title:"No, it is not",size:"sm",leftIcon:"dislike",variant:"Unsatisfied"===_?"solid":"outline",tone:"error",accessibilityState:{selected:"Unsatisfied"===_},"aria-selected":"Unsatisfied"===_,onPress:()=>v("Unsatisfied"),testID:"support-rate-unsatisfied"})]}),_&&_jsxs(_Fragment,{children:[_jsx(Input,{label:"Anything to add? (optional)",helperText:"Your comment goes to the support team.",value:w,onChangeText:I,multiline:!0,maxLength:a?.satisfactionCommentMaxLength,testID:"support-rating-comment"}),_jsx(Button,{title:"Send answer",size:"sm",loading:d,disabled:d,onPress:()=>{(async()=>{_&&await g({satisfaction:_,comment:w})&&(v(null),I(""))})()},testID:"support-rating-send"})]})]}):null,_jsx(View,{style:i.thread,accessibilityLabel:"Conversation",children:D.map(e=>_jsx(MessageBubble,{message:e,styles:i,timeZone:o,onOpenImage:(e,t)=>y({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:h,onChangeText:b,multiline:!0,maxLength:a?.bodyMaxLength,error:f??void 0,testID:"support-reply-input"}),a&&_jsx(PhotoTray,{photos:S,onChange:j,remaining:a.maxAttachmentsPerMessage-S.length,maxBytes:a.maxAttachmentBytes,disabled:d}),n.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=h.trim(),t=a?validateBody(e,a)??validateFiles(S,a):e?void 0:"Write a message.";t?T(t):(T(null),await p({body:e,files:S})&&(b(""),j([])))})()},testID:"support-reply-send"})]})]}),_jsx(ImageViewer,{image:x,onClose:()=>y(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",flexWrap:"wrap",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}});
+"use strict";import{formatDateTime}from"@webority/mobile-core";import{Button,Card,Input,KeyboardAwareScrollView,Spinner,StatusBadge,Text,useTheme}from"@webority/mobile-ui";import{useMemo,useState}from"react";import{StyleSheet,View}from"react-native";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}, ${formatDateTime(e.createdDateTimeUtc,{zone: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??(a?"You":"Support team")}),_jsx(Text,{variant:"body",selectable:!0,children:e.body}),_jsx(AttachmentList,{attachments:e.attachments,onOpenImage:i}),_jsx(Text,{variant:"caption",color:"tertiary",children:formatDateTime(e.createdDateTimeUtc,{zone:s})})]})})},SATISFACTION_TEXT={Satisfied:"You told us this solved your problem.",Unsatisfied:"You told us this did not solve your problem."};export const SupportTicketDetail=({ticketId:e,testID:t="support-ticket-detail"})=>{const s=useTheme(),i=useMemo(()=>buildStyles(s),[s]),{config:a}=useSupportConfig(),o=useSupportTimeZone(),{ticket:n,loading:r,error:l,actionError:c,busy:d,reload:m,reply:p,reopen:u,rate:g}=useSupportTicket(e),[x,y]=useState(null),[h,b]=useState(""),[S,j]=useState([]),[f,T]=useState(null),[_,v]=useState(null),[w,I]=useState("");if(!n)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:()=>{m()}})]})});const D=n.messages.filter(e=>!e.isInternal);return _jsxs(View,{style:i.root,testID:t,children:[_jsxs(KeyboardAwareScrollView,{contentContainerStyle:i.content,safeAreaEdges:[],children:[_jsxs(View,{style:i.head,children:[_jsx(Text,{variant:"h3",accessibilityRole:"header",children:n.subject}),_jsx(Text,{variant:"bodySmall",color:"secondary",children:`${n.number}, ${n.category}`}),_jsxs(View,{style:i.headRow,children:[_jsx(StatusBadge,{label:n.statusLabel,tone:STATUS_TONES[n.status]??"neutral",accessibilityLabel:`Status: ${n.statusLabel}`}),_jsx(Text,{variant:"caption",color:"tertiary",children:`Opened ${formatDateTime(n.createdDateTimeUtc,{zone:o})}`})]})]}),"WaitingOnCustomer"===n.status&&_jsx(Card,{variant:"outlined",bodyStyle:i.section,testID:"support-waiting",children:_jsx(Text,{variant:"bodySmall",children:"We need your answer to carry on. Reply below and the ticket goes back to our team."})}),n.canReopen&&_jsxs(Card,{variant:"outlined",bodyStyle:i.section,children:[_jsx(Text,{variant:"bodySmall",children:`This ticket is ${n.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"})]}),n.satisfaction?_jsxs(Card,{variant:"outlined",bodyStyle:i.section,testID:"support-rating",children:[_jsx(Text,{variant:"bodySmall",accessibilityLiveRegion:"polite",children:SATISFACTION_TEXT[n.satisfaction]}),n.satisfactionComment?_jsx(Text,{variant:"bodySmall",color:"secondary",children:`Your comment: ${n.satisfactionComment}`}):null]}):n.canRate?_jsxs(Card,{variant:"outlined",bodyStyle:i.section,testID:"support-rating",children:[_jsx(Text,{variant:"label",children:"Did this solve your problem?"}),_jsxs(View,{style:i.ratingRow,children:[_jsx(Button,{title:"Yes, it is solved",size:"sm",leftIcon:"like",variant:"Satisfied"===_?"solid":"outline",tone:"success",accessibilityState:{selected:"Satisfied"===_},"aria-selected":"Satisfied"===_,onPress:()=>v("Satisfied"),testID:"support-rate-satisfied"}),_jsx(Button,{title:"No, it is not",size:"sm",leftIcon:"dislike",variant:"Unsatisfied"===_?"solid":"outline",tone:"error",accessibilityState:{selected:"Unsatisfied"===_},"aria-selected":"Unsatisfied"===_,onPress:()=>v("Unsatisfied"),testID:"support-rate-unsatisfied"})]}),_&&_jsxs(_Fragment,{children:[_jsx(Input,{label:"Anything to add? (optional)",helperText:"Your comment goes to the support team.",value:w,onChangeText:I,multiline:!0,maxLength:a?.satisfactionCommentMaxLength,testID:"support-rating-comment"}),_jsx(Button,{title:"Send answer",size:"sm",loading:d,disabled:d,onPress:()=>{(async()=>{_&&await g({satisfaction:_,comment:w})&&(v(null),I(""))})()},testID:"support-rating-send"})]})]}):null,_jsx(View,{style:i.thread,accessibilityLabel:"Conversation",children:D.map(e=>_jsx(MessageBubble,{message:e,styles:i,timeZone:o,onOpenImage:(e,t)=>y({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:h,onChangeText:b,multiline:!0,maxLength:a?.bodyMaxLength,error:f??void 0,testID:"support-reply-input"}),a&&_jsx(PhotoTray,{photos:S,onChange:j,remaining:a.maxAttachmentsPerMessage-S.length,maxBytes:a.maxAttachmentBytes,disabled:d}),n.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=h.trim(),t=a?validateBody(e,a)??validateFiles(S,a):e?void 0:"Write a message.";t?T(t):(T(null),await p({body:e,files:S})&&(b(""),j([])))})()},testID:"support-reply-send"})]})]}),_jsx(ImageViewer,{image:x,onClose:()=>y(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",flexWrap:"wrap",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}});

package/lib/module/components/SupportTicketList.js

@@ -1 +1 @@
-"use strict";import{formatDateTime}from"@webority/mobile-core";import{Button,Card,Chip,EmptyState,SearchBar,Spinner,StatusBadge,Text,useTheme}from"@webority/mobile-ui";import{useMemo}from"react";import{FlatList,RefreshControl,ScrollView,StyleSheet,View}from"react-native";import{useSupportTickets,useSupportTimeZone}from"../SupportProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";export const STATUS_TONES={Open:"warning",InProgress:"info",Resolved:"success",Closed:"neutral"};const STATUS_FILTERS=[{value:"Open",label:"Open",count:"open"},{value:"InProgress",label:"In progress",count:"inProgress"},{value:"Resolved",label:"Resolved",count:"resolved"},{value:"Closed",label:"Closed",count:"closed"}],ALL="all";export const statusFilterOptions=(e,t)=>[{value:ALL,label:"All",count:e.total},...STATUS_FILTERS.filter(s=>e[s.count]>0||s.value===t).map(t=>({value:t.value,label:t.label,count:e[t.count]}))];const SEARCH_DEBOUNCE_MS=400;export const SupportTicketList=({onOpenTicket:e,onNewTicket:t,header:s,pageSize:r,testID:i="support-ticket-list"})=>{const o=useTheme(),a=useMemo(()=>buildStyles(o),[o]),{tickets:n,counts:l,status:c,search:u,setStatus:d,setSearch:p,loading:m,refreshing:x,loadingMore:h,error:g,loadMoreError:b,refresh:y,loadMore:S}=useSupportTickets({pageSize:r}),j=useSupportTimeZone(),_=(l?.total??0)>0,T=null!==c||""!==u.trim(),f=_jsxs(View,{style:a.header,children:[s,t&&_jsx(Button,{title:"New ticket",leftIcon:"add",onPress:t,fullWidth:!0}),g&&_jsxs(View,{style:a.error,accessibilityLiveRegion:"polite",children:[_jsx(Text,{variant:"bodySmall",color:"error",children:g.message}),_jsx(Button,{title:"Try again",size:"sm",variant:"ghost",onPress:()=>{y()}})]}),l&&_&&_jsxs(_Fragment,{children:[_jsx(SearchBar,{value:u,onChangeText:p,debounceMs:400,placeholder:"Search by subject or ticket number",accessibilityLabel:"Search tickets",testID:"support-ticket-search"}),_jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:a.filters,accessibilityRole:"tablist",accessibilityLabel:"Filter by status",children:statusFilterOptions(l,c).map(e=>_jsx(Chip,{label:`${e.label} (${e.count})`,selected:(c??ALL)===e.value,onPress:()=>d(e.value===ALL?null:e.value),accessibilityLabel:`${e.label}, ${e.count} tickets`,testID:`support-filter-${e.value}`},e.value))})]})]});if(m&&null===l&&!g)return _jsx(View,{style:a.center,testID:i,children:_jsx(Spinner,{accessibilityLabel:"Loading your tickets"})});const v=h?_jsx(View,{style:a.footer,children:_jsx(Spinner,{size:"sm",accessibilityLabel:"Loading more tickets"})}):b?_jsxs(View,{style:[a.footer,a.error],accessibilityLiveRegion:"polite",children:[_jsx(Text,{variant:"bodySmall",color:"error",children:b.message}),_jsx(Button,{title:"Load more",size:"sm",variant:"ghost",onPress:()=>{S()}})]}):null;return _jsx(FlatList,{testID:i,data:n,keyExtractor:e=>e.id,contentContainerStyle:a.content,ListHeaderComponent:f,ListFooterComponent:v,onEndReached:()=>{S()},onEndReachedThreshold:.5,refreshControl:_jsx(RefreshControl,{refreshing:x,onRefresh:()=>{y()}}),ListEmptyComponent:m?_jsx(View,{style:a.footer,children:_jsx(Spinner,{accessibilityLabel:"Loading your tickets"})}):g?null:_jsx(EmptyState,_?{title:"No tickets match",description:T?"Try another status or search.":void 0}:{title:"No tickets yet",description:"Raise a ticket and it will show here with its status.",action:t?{label:"New ticket",onPress:t}:void 0}),renderItem:({item:t})=>_jsxs(Card,{onPress:()=>e(t),accessibilityLabel:`${t.subject}, ${t.statusLabel}, ticket ${t.number}`,bodyStyle:a.card,testID:`support-ticket-${t.id}`,children:[_jsxs(View,{style:a.cardTop,children:[_jsx(Text,{variant:"caption",color:"tertiary",children:t.number}),_jsx(StatusBadge,{label:t.statusLabel,tone:STATUS_TONES[t.status]??"neutral",size:"sm"})]}),_jsx(Text,{variant:"title",numberOfLines:2,children:t.subject}),_jsx(Text,{variant:"bodySmall",color:"secondary",children:t.category}),_jsxs(View,{style:a.cardBottom,children:[_jsx(Text,{variant:"caption",color:"tertiary",children:`Updated ${formatDateTime(t.updatedDateTimeUtc,{zone:j})}`}),t.awaitingCustomer&&_jsx(Text,{variant:"caption",color:"warning",children:"Waiting for your reply"})]})]})})};const buildStyles=e=>StyleSheet.create({content:{padding:e.spacing.md,gap:e.spacing.sm},header:{gap:e.spacing.sm,marginBottom:e.spacing.xs},filters:{gap:e.spacing.xs},error:{gap:e.spacing.xs,alignItems:"flex-start"},center:{flex:1,alignItems:"center",justifyContent:"center",padding:e.spacing.xl},footer:{paddingVertical:e.spacing.md,alignItems:"center"},card:{gap:e.spacing.xxs},cardTop:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},cardBottom:{flexDirection:"row",justifyContent:"space-between",marginTop:e.spacing.xxs}});
+"use strict";import{formatDateTime}from"@webority/mobile-core";import{Button,Card,Chip,EmptyState,SearchBar,Spinner,StatusBadge,Text,useTheme}from"@webority/mobile-ui";import{useMemo}from"react";import{FlatList,RefreshControl,ScrollView,StyleSheet,View}from"react-native";import{useSupportTickets,useSupportTimeZone}from"../SupportProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";export const STATUS_TONES={Open:"warning",InProgress:"info",WaitingOnCustomer:"warning",Resolved:"success",Closed:"neutral"};const STATUS_FILTERS=[{value:"Open",label:"Open",count:"open"},{value:"InProgress",label:"In progress",count:"inProgress"},{value:"WaitingOnCustomer",label:"Waiting on you",count:"waitingOnCustomer"},{value:"Resolved",label:"Resolved",count:"resolved"},{value:"Closed",label:"Closed",count:"closed"}],ALL="all";export const statusFilterOptions=(e,t)=>[{value:ALL,label:"All",count:e.total},...STATUS_FILTERS.filter(s=>e[s.count]>0||s.value===t).map(t=>({value:t.value,label:t.label,count:e[t.count]}))];const SEARCH_DEBOUNCE_MS=400;export const SupportTicketList=({onOpenTicket:e,onNewTicket:t,header:s,pageSize:i,testID:r="support-ticket-list"})=>{const o=useTheme(),a=useMemo(()=>buildStyles(o),[o]),{tickets:n,counts:l,status:c,search:u,setStatus:d,setSearch:p,loading:m,refreshing:g,loadingMore:x,error:h,loadMoreError:b,refresh:y,loadMore:S}=useSupportTickets({pageSize:i}),j=useSupportTimeZone(),_=(l?.total??0)>0,T=null!==c||""!==u.trim(),f=_jsxs(View,{style:a.header,children:[s,t&&_jsx(Button,{title:"New ticket",leftIcon:"add",onPress:t,fullWidth:!0}),h&&_jsxs(View,{style:a.error,accessibilityLiveRegion:"polite",children:[_jsx(Text,{variant:"bodySmall",color:"error",children:h.message}),_jsx(Button,{title:"Try again",size:"sm",variant:"ghost",onPress:()=>{y()}})]}),l&&_&&_jsxs(_Fragment,{children:[_jsx(SearchBar,{value:u,onChangeText:p,debounceMs:400,placeholder:"Search by subject or ticket number",accessibilityLabel:"Search tickets",testID:"support-ticket-search"}),_jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:a.filters,accessibilityRole:"tablist",accessibilityLabel:"Filter by status",children:statusFilterOptions(l,c).map(e=>_jsx(Chip,{label:`${e.label} (${e.count})`,selected:(c??ALL)===e.value,onPress:()=>d(e.value===ALL?null:e.value),accessibilityLabel:`${e.label}, ${e.count} tickets`,testID:`support-filter-${e.value}`},e.value))})]})]});if(m&&null===l&&!h)return _jsx(View,{style:a.center,testID:r,children:_jsx(Spinner,{accessibilityLabel:"Loading your tickets"})});const v=x?_jsx(View,{style:a.footer,children:_jsx(Spinner,{size:"sm",accessibilityLabel:"Loading more tickets"})}):b?_jsxs(View,{style:[a.footer,a.error],accessibilityLiveRegion:"polite",children:[_jsx(Text,{variant:"bodySmall",color:"error",children:b.message}),_jsx(Button,{title:"Load more",size:"sm",variant:"ghost",onPress:()=>{S()}})]}):null;return _jsx(FlatList,{testID:r,data:n,keyExtractor:e=>e.id,contentContainerStyle:a.content,ListHeaderComponent:f,ListFooterComponent:v,onEndReached:()=>{S()},onEndReachedThreshold:.5,refreshControl:_jsx(RefreshControl,{refreshing:g,onRefresh:()=>{y()}}),ListEmptyComponent:m?_jsx(View,{style:a.footer,children:_jsx(Spinner,{accessibilityLabel:"Loading your tickets"})}):h?null:_jsx(EmptyState,_?{title:"No tickets match",description:T?"Try another status or search.":void 0}:{title:"No tickets yet",description:"Raise a ticket and it will show here with its status.",action:t?{label:"New ticket",onPress:t}:void 0}),renderItem:({item:t})=>_jsxs(Card,{onPress:()=>e(t),accessibilityLabel:`${t.subject}, ${t.statusLabel}, ticket ${t.number}`,bodyStyle:a.card,testID:`support-ticket-${t.id}`,children:[_jsxs(View,{style:a.cardTop,children:[_jsx(Text,{variant:"caption",color:"tertiary",children:t.number}),_jsx(StatusBadge,{label:t.statusLabel,tone:STATUS_TONES[t.status]??"neutral",size:"sm"})]}),_jsx(Text,{variant:"title",numberOfLines:2,children:t.subject}),_jsx(Text,{variant:"bodySmall",color:"secondary",children:t.category}),_jsxs(View,{style:a.cardBottom,children:[_jsx(Text,{variant:"caption",color:"tertiary",children:`Updated ${formatDateTime(t.updatedDateTimeUtc,{zone:j})}`}),t.awaitingCustomer&&_jsx(Text,{variant:"caption",color:"warning",children:"Waiting for your reply"})]})]})})};const buildStyles=e=>StyleSheet.create({content:{padding:e.spacing.md,gap:e.spacing.sm},header:{gap:e.spacing.sm,marginBottom:e.spacing.xs},filters:{gap:e.spacing.xs},error:{gap:e.spacing.xs,alignItems:"flex-start"},center:{flex:1,alignItems:"center",justifyContent:"center",padding:e.spacing.xl},footer:{paddingVertical:e.spacing.md,alignItems:"center"},card:{gap:e.spacing.xxs},cardTop:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},cardBottom:{flexDirection:"row",justifyContent:"space-between",marginTop:e.spacing.xxs}});

package/lib/typescript/commonjs/types.d.ts

@@ -3,7 +3,7 @@
  * of the backend's view records and enums travel as their member names, so these
  * mirror `Webority.Support/SupportViews.cs` and `SupportEnums.cs` exactly.
  */
-export type SupportTicketStatus = 'Open' | 'InProgress' | 'Resolved' | 'Closed';
+export type SupportTicketStatus = 'Open' | 'InProgress' | 'WaitingOnCustomer' | 'Resolved' | 'Closed';
 export type SupportTicketPriority = 'Low' | 'Normal' | 'High' | 'Urgent';
 export type SupportMessageAuthorKind = 'Customer' | 'Agent' | 'System';
 export type SupportAttachmentKind = 'Screenshot' | 'File';
@@ -56,6 +56,7 @@ export interface SupportTicketQuery {
 export interface SupportTicketCounts {
     open: number;
     inProgress: number;
+    waitingOnCustomer: number;
     resolved: number;
     closed: number;
     total: number;

package/lib/typescript/module/types.d.ts

@@ -3,7 +3,7 @@
  * of the backend's view records and enums travel as their member names, so these
  * mirror `Webority.Support/SupportViews.cs` and `SupportEnums.cs` exactly.
  */
-export type SupportTicketStatus = 'Open' | 'InProgress' | 'Resolved' | 'Closed';
+export type SupportTicketStatus = 'Open' | 'InProgress' | 'WaitingOnCustomer' | 'Resolved' | 'Closed';
 export type SupportTicketPriority = 'Low' | 'Normal' | 'High' | 'Urgent';
 export type SupportMessageAuthorKind = 'Customer' | 'Agent' | 'System';
 export type SupportAttachmentKind = 'Screenshot' | 'File';
@@ -56,6 +56,7 @@ export interface SupportTicketQuery {
 export interface SupportTicketCounts {
     open: number;
     inProgress: number;
+    waitingOnCustomer: number;
     resolved: number;
     closed: number;
     total: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-support",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Customer support tickets for Webority React Native apps: the support API client, hooks, ticket screens, contact card and a report-an-issue button that attaches a screenshot.",
   "keywords": [
     "react-native",
@@ -62,8 +62,8 @@
     "!**/*.map"
   ],
   "peerDependencies": {
-    "@webority/mobile-core": ">=0.13.0 <0.14.0",
-    "@webority/mobile-ui": ">=0.13.0 <0.14.0",
+    "@webority/mobile-core": ">=0.14.0 <0.15.0",
+    "@webority/mobile-ui": ">=0.14.0 <0.15.0",
     "expo": ">=57.0.0",
     "expo-clipboard": ">=57.0.0",
     "expo-file-system": ">=57.0.0",
@@ -114,8 +114,8 @@
     ]
   },
   "devDependencies": {
-    "@webority/mobile-core": "0.13.0",
-    "@webority/mobile-ui": "0.13.0"
+    "@webority/mobile-core": "0.14.0",
+    "@webority/mobile-ui": "0.14.0"
   },
   "scripts": {
     "build": "bob build && node ../../scripts/minify-lib.mjs",