show error message when invoice exceeds the job funds (#472)

Author: ginesdt

ui/resources/public/less/page/new-invoice.less

@@ -95,9 +95,17 @@
       }
     }
 
-    > .max-available > div {
-      display: inline;
-      margin-left: 0.3rem;
+    > .max-available {
+      &.not-enough {
+        color: red;
+      }
+      > div {
+        margin-bottom: 0.3rem;
+        > div {
+          display: inline;
+          margin-left: 0.3rem;
+        }
+      }
     }
   }
 

ui/src/ethlance/ui/page/new_invoice.cljs

@@ -74,6 +74,7 @@
             no-job-selected? (nil? @*invoiced-job)
             focus-on-element (fn [id _event] (.focus (.getElementById js/document id)))
             validations (re/subscribe [:page.new-invoice/validations])
+            enough-funding? (:invoice-amount-enough @validations)
             tx-in-progress? @(re/subscribe [:page.new-invoice/tx-in-progress?])
             button-disabled? (not (every? true? (vals @validations)))]
         [c-main-layout {:container-opts {:class :new-invoice-main-container}}
@@ -120,7 +121,12 @@
            [:div.post-label token-display-name]]
           [:div.usd-estimate @estimated-usd]
           (when show-balance-left?
-            [:div.max-available "Max available:" [c-token-info balance-left job-token-details]])]
+            [:div.max-available
+             {:class (when-not enough-funding? "not-enough")}
+             [:div "Max available:" [c-token-info balance-left job-token-details]]
+             [:div.warning
+              {:style {:visibility (if enough-funding? "hidden" "visible")}}
+              "You cannot create an invoice that exceeds the available funds for the job."]])]
          [:div.right-form
           [:div.label "Message"]
           [c-textarea-input

ui/src/ethlance/ui/page/new_invoice/subscriptions.cljs

@@ -64,8 +64,10 @@
   :page.new-invoice/validations
   :<- [::form-fields]
   (fn [{:keys [invoiced-job invoice-amount]}]
-    (let [balance-left (get-in invoiced-job [:job :balance-left])]
+    (let [balance-left (get-in invoiced-job [:job :balance-left])
+          positive-invoice-amount? (and (not (nil? (get invoice-amount :token-amount)))
+                                    (> (:token-amount invoice-amount) 0))]
       {:invoiced-job (not (nil? invoiced-job))
-       :invoice-amount (and (not (nil? (get invoice-amount :token-amount)))
-                            (> (:token-amount invoice-amount) 0)
-                            (<= (:token-amount invoice-amount) balance-left))})))
+       :invoice-amount positive-invoice-amount?
+       :invoice-amount-enough (or (not positive-invoice-amount?)
+                                  (<= (:token-amount invoice-amount) balance-left))})))