From 0f976ebde97830baf48a0c185ffa4627b28aa6bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joel=20Elias=20M=C3=A9ndez?=
 <67445275+joelmendez1@users.noreply.github.com>
Date: Sun, 10 Oct 2021 15:42:36 -0300
Subject: [PATCH] Add reopen option after a ticket is closed (#1041)

---
 client/src/app-components/ticket-viewer.js   | 24 +++++++++++++++-----
 client/src/app-components/ticket-viewer.scss | 11 +++++++--
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/client/src/app-components/ticket-viewer.js b/client/src/app-components/ticket-viewer.js
index b925db31..4ac8b076 100644
--- a/client/src/app-components/ticket-viewer.js
+++ b/client/src/app-components/ticket-viewer.js
@@ -83,6 +83,7 @@ class TicketViewer extends React.Component {
 
     render() {
         const { ticket, userStaff, userId, editable, allowAttachments, assignmentAllowed } = this.props;
+        const showResponseField = (!ticket.closed && (editable || !assignmentAllowed));
 
         return (
             <div className="ticket-viewer">
@@ -107,7 +108,14 @@ class TicketViewer extends React.Component {
                 <div className="ticket-viewer__comments">
                     {ticket.events && ticket.events.map(this.renderTicketEvent.bind(this))}
                 </div>
-                {(!ticket.closed && (editable || !assignmentAllowed)) ? this.renderResponseField() : (this.showDeleteButton()) ? this.renderDeleteTicketButton() : null}
+                <div className="ticket-viewer__reopen-closeticket-buttons">
+                    {!showResponseField ? this.renderReopenTicketButton() : null}
+                    {
+                        showResponseField ?
+                            this.renderResponseField() :
+                            (this.showDeleteButton()) ? this.renderDeleteTicketButton() : null
+                    }
+                </div>
             </div>
         );
     }
@@ -247,15 +255,19 @@ class TicketViewer extends React.Component {
         return  (
             <div className="ticket-viewer__edit-status__buttons">
                 {this.renderCancelButton("Status")}
-                {this.props.ticket.closed ?
-                    <Button type='secondary' size="medium" onClick={this.onReopenClick.bind(this)}>
-                        {i18n('RE_OPEN')}
-                    </Button> :
-                    this.renderCloseTicketButton()}
+                {this.props.ticket.closed ? this.renderReopenTicketButton() : this.renderCloseTicketButton()}
             </div>
         );
     }
 
+    renderReopenTicketButton() {
+        return (
+            <Button type='secondary' size="medium" onClick={this.onReopenClick.bind(this)}>
+                {i18n('RE_OPEN')}
+            </Button>
+        );
+    }
+
     renderHeaders() {
         const ticket = this.props.ticket;
 
diff --git a/client/src/app-components/ticket-viewer.scss b/client/src/app-components/ticket-viewer.scss
index d8da7d6e..1869870a 100644
--- a/client/src/app-components/ticket-viewer.scss
+++ b/client/src/app-components/ticket-viewer.scss
@@ -168,6 +168,13 @@
         position: relative;
     }
 
+    &__reopen-closeticket-buttons {
+        width: 230px;
+        display: flex;
+        justify-content: space-between;
+        align-content: center;
+    }
+    
     &__response {
         margin-top: 20px;
         position: relative;
@@ -215,8 +222,8 @@
 
     }
 
-    &__delete-button {
-    }
+    // &__delete-button {
+    // }
 
     @media screen and (max-width: 1151px) {
         .ticket-viewer__info  {