From 7e9f1a87ba8f7c1471928a4ef0ba37374c8b7fd5 Mon Sep 17 00:00:00 2001
From: sophia-massie <96220951+sophia-massie@users.noreply.github.com>
Date: Tue, 12 Dec 2023 14:41:36 -0600
Subject: [PATCH] TUP-609 Improve feedback when users reply to tickets (#382)

* TUP-609 Improve feedback when users reply to tickets

* Linting

* Create test for success message

* Linting test

* - Added timeout for error/success messages
- Removed disabled reply button on submit
- Added margin to button
- Centered reply response message with button
---
 .../TicketDetailModal/TicketModal.global.css  |  2 ++
 .../TicketDetailModal/TicketModal.test.tsx    | 21 +++++++++++++++++++
 .../TicketDetailModal/TicketReplyForm.tsx     | 13 +++++++++++-
 3 files changed, 35 insertions(+), 1 deletion(-)

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(
+    <TicketReplyForm ticketId="85411" />
+  );
+
+  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}
             />
+
             <FormGroup className="ticket-reply-submission">
+              {isSuccess && (
+                <InlineMessage type="success">
+                  Your reply has been sent.
+                </InlineMessage>
+              )}
               {isError && (
                 <InlineMessage type="error">
                   Something went wrong.