From 6d2b479d2e015cd0f9ac092be0cbd97be94dd1a3 Mon Sep 17 00:00:00 2001
From: emi-hi <emily.hillier@gmail.com>
Date: Tue, 19 Nov 2024 15:57:42 -0800
Subject: [PATCH] fix: adds check for comments before rendering div with
 outline so there isnt an empty box when agreements dont have comments chore:
 modifies proptypes in vehicle supplier tabs due to console messages appearing

---
 frontend/src/app/components/VehicleSupplierTabs.js    |  2 +-
 .../components/CreditAgreementsDetailsPage.js         | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/VehicleSupplierTabs.js b/frontend/src/app/components/VehicleSupplierTabs.js
index fc08805a7..52d94f984 100644
--- a/frontend/src/app/components/VehicleSupplierTabs.js
+++ b/frontend/src/app/components/VehicleSupplierTabs.js
@@ -112,7 +112,7 @@ VehicleSupplierTabs.defaultProps = {
 VehicleSupplierTabs.propTypes = {
   active: PropTypes.string.isRequired,
   locationState: PropTypes.arrayOf(PropTypes.shape()),
-  supplierId: PropTypes.number,
+  supplierId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   user: CustomPropTypes.user.isRequired
 }
 
diff --git a/frontend/src/creditagreements/components/CreditAgreementsDetailsPage.js b/frontend/src/creditagreements/components/CreditAgreementsDetailsPage.js
index bf81c02b9..6084f0d63 100644
--- a/frontend/src/creditagreements/components/CreditAgreementsDetailsPage.js
+++ b/frontend/src/creditagreements/components/CreditAgreementsDetailsPage.js
@@ -31,7 +31,9 @@ const CreditAgreementsDetailsPage = (props) => {
   } = props
 
   const [showModal, setShowModal] = useState(false)
-
+  const showComments = details?.filteredIdirComments &&
+          details?.filteredIdirComments.length > 0
+  const showCommentInput = details?.status !== 'ISSUED'
   const modal = (
     <Modal
       confirmLabel={(analystAction ? 'Submit' : 'Issue')}
@@ -81,15 +83,14 @@ const CreditAgreementsDetailsPage = (props) => {
           />
         </div>
       </div>
-      {user && user.isGovernment && details && (
+      {user && user.isGovernment && (showComments || showCommentInput) && (
         <div className="row mt-3 mb-2">
           <div className="col-sm-12">
             <div
               className="grey-border-area p-3 comment-box mt-2"
               id="comment-input"
             >
-              { details?.filteredIdirComments &&
-                details?.filteredIdirComments.length > 0 && (
+              { showComments && (
                   <EditableCommentList 
                     comments={details.filteredIdirComments} 
                     user={user}
@@ -97,7 +98,7 @@ const CreditAgreementsDetailsPage = (props) => {
                     handleCommentDelete={handleInternalCommentDelete}
                   />
               )}
-              {details?.status !== 'ISSUED' && (
+              {showCommentInput && (
                 <div>
                 <CommentInput
                   handleAddComment={handleAddComment}