fix display of contract terms rendering when already paid

2 files changed, 13 insertions, 0 deletions

diff --git a/src/webex/pages/confirm-contract.html b/src/webex/pages/confirm-contract.html
index e5ba68404..394de582a 100644
--- a/src/webex/pages/confirm-contract.html
+++ b/src/webex/pages/confirm-contract.html
@@ -56,6 +56,15 @@
       font-weight: bold;
       background: #FF8A8A;
     }
+
+    .okaybox {
+      border: 1px solid;
+      display: inline-block;
+      margin: 1em;
+      padding: 1em;
+      font-weight: bold;
+      background: #00FA9A;
+    }
   </style>
 </head>
 
diff --git a/src/webex/pages/confirm-contract.tsx b/src/webex/pages/confirm-contract.tsx
index e80aed19d..7d5523416 100644
--- a/src/webex/pages/confirm-contract.tsx
+++ b/src/webex/pages/confirm-contract.tsx
@@ -105,6 +105,7 @@ interface ContractPromptState {
   proposal: ProposalRecord|null;
   error: string|null;
   payDisabled: boolean;
+  alreadyPaid: boolean;
   exchanges: null|ExchangeRecord[];
 }
 
@@ -153,6 +154,8 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt
         this.setState({error: msgInsufficient});
       }
       this.setState({payDisabled: true});
+    } else if (payStatus === "paid") {
+      this.setState({alreadyPaid: true, payDisabled: false, error: null});
     } else {
       this.setState({payDisabled: false, error: null});
     }
@@ -193,6 +196,7 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt
           Confirm payment
         </button>
         <div>
+          {(this.state.alreadyPaid ? <p className="okaybox">You already paid for this, clicking "Confirm payment" will not cost money again.</p> : <p />)}
           {(this.state.error ? <p className="errorbox">{this.state.error}</p> : <p />)}
         </div>
         <Details exchanges={this.state.exchanges} contractTerms={c} collapsed={!this.state.error}/>