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.