diff --git a/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.global.css b/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.global.css index 384545453..11e202499 100644 --- a/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.global.css +++ b/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.global.css @@ -34,6 +34,7 @@ .ticket-reply-submission { display: flex; justify-content: right; + align-items: center; } .ticket-model-content { @@ -130,4 +131,5 @@ .ticket-reply-submission button { padding-left: 5rem; padding-right: 5rem; + margin-left: 1rem; } diff --git a/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx b/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx index f9a734aa0..c3ddede69 100644 --- a/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx +++ b/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx @@ -69,3 +69,24 @@ describe('Ticket Modal', () => { ); }); }); + +it('should render an success message if an reply success is returned from the useMutation hook', async () => { + const user = userEvent.setup(); + server.use( + rest.post('http://localhost:8001/tickets/85411/reply', (req, res, ctx) => + res.once(ctx.status(200)) + ) + ); + const { getByLabelText, getByText, getByRole } = testRender( + + ); + + const reply = getByLabelText(/Reply/); + const submit = getByRole('button', { name: 'Reply' }); + await user.type(reply, 'success message?'); + fireEvent.click(submit); + + await waitFor(() => + expect(getByText(/Your reply has been sent/)).toBeDefined() + ); +}); diff --git a/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx b/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx index 823173308..22dfdf9ab 100644 --- a/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx +++ b/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx @@ -26,7 +26,7 @@ export const TicketReplyForm: React.FC<{ ticketId: string }> = ({ ticketId, }) => { const mutation = useTicketReply(ticketId); - const { mutate, isLoading, isError } = mutation; + const { mutate, isSuccess, isLoading, isError } = mutation; const defaultValues: TicketReplyFormValues = { text: '', @@ -44,6 +44,11 @@ export const TicketReplyForm: React.FC<{ ticketId: string }> = ({ if (values.status) formData.append('status', values.status); mutate(formData, { onSuccess: () => resetForm(), + onSettled: () => { + setTimeout(() => { + mutation.reset(); + }, 5000); + }, }); }; @@ -77,7 +82,13 @@ export const TicketReplyForm: React.FC<{ ticketId: string }> = ({ maxSizeMessage="Max File Size: 3MB" maxSize={3145728} /> + + {isSuccess && ( + + Your reply has been sent. + + )} {isError && ( Something went wrong.