From ebde529995678b495aea848ce6f74ba20fd890f8 Mon Sep 17 00:00:00 2001
From: Stefan Fisk <contact@stefanfisk.com>
Date: Sun, 14 Apr 2019 12:47:21 +0200
Subject: [PATCH] Disable SMS Distribution confirm button when there is nothing
 to send

---
 src/components/misc/Button.jsx               |  9 +++--
 src/components/panes/SmsDistributionPane.jsx | 36 ++++++++++++--------
 src/scss/_mixins.scss                        |  6 ++++
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/components/misc/Button.jsx b/src/components/misc/Button.jsx
index a6958580e..ff1f01178 100644
--- a/src/components/misc/Button.jsx
+++ b/src/components/misc/Button.jsx
@@ -16,6 +16,7 @@ export default class Button extends React.Component {
         const formatMessage = this.props.intl.formatMessage;
 
         let classes = cx("Button", this.props.className, {
+            "disabled": this.props.isDisabled,
             "pending": this.props.isPending,
         });
 
@@ -23,7 +24,7 @@ export default class Button extends React.Component {
             this.props.labelValues);
 
         return (
-            <button className={ classes }
+            <button className={ classes } disabled={this.props.isDisabled}
                 onClick={ this.onClick.bind(this) }>
                 { label }
             </button>
@@ -31,8 +32,10 @@ export default class Button extends React.Component {
     }
 
     onClick(ev) {
-        if(!this.props.isPending && this.props.onClick) {
-            this.props.onClick(ev);
+        if(this.props.isDisabled || this.props.isPending || !this.props.onClick) {
+            return;
         }
+
+        this.props.onClick(ev);
     }
 }
diff --git a/src/components/panes/SmsDistributionPane.jsx b/src/components/panes/SmsDistributionPane.jsx
index 85c7a91a8..6e07a2531 100644
--- a/src/components/panes/SmsDistributionPane.jsx
+++ b/src/components/panes/SmsDistributionPane.jsx
@@ -91,6 +91,17 @@ export default class SmsDistributionPane extends PaneBase {
 
         const stats = data && data.statsItem && data.statsItem.data;
 
+        let amount;
+        if (stats) {
+            if (state === 'draft') {
+                const split = splitter(message);
+
+                amount = split.parts.length * stats.num_target_matches;
+            } else {
+                amount = stats.amount;
+            }
+        }
+
         return {
             isLoaded,
 
@@ -102,6 +113,7 @@ export default class SmsDistributionPane extends PaneBase {
 
             sent,
 
+            amount,
             stats,
         };
     }
@@ -165,14 +177,7 @@ export default class SmsDistributionPane extends PaneBase {
 
     // Draft
 
-    renderDraftPaneContent({ title, sender, message, stats }) {
-        let estimated_amount;
-        if (stats) {
-            const split = splitter(message);
-
-            estimated_amount = split.parts.length * stats.num_target_matches;
-        }
-
+    renderDraftPaneContent({ title, sender, message, amount, stats }) {
         return (
             <div>
                 <InfoList
@@ -201,7 +206,7 @@ export default class SmsDistributionPane extends PaneBase {
                     <InfoList data={[{
                         name: 'estimated_amount',
                         msgId: 'panes.smsDistribution.credits.estimated_amount',
-                        msgValues: { amount: estimated_amount },
+                        msgValues: { amount },
                     }]}/>
                 )}
 
@@ -236,6 +241,7 @@ export default class SmsDistributionPane extends PaneBase {
                 {this.renderCreditsStats(data)}
                 <Button key="confirm" className="SmsDistributionPane-confirmButton"
                     labelMsg="panes.smsDistribution.confirmButton"
+                    isDisabled={!data.amount}
                     onClick={this.onConfirmClick.bind(this)} />
             </div>
         );
@@ -243,7 +249,7 @@ export default class SmsDistributionPane extends PaneBase {
 
     // Confirm
 
-    renderConfirmPaneContent({ title, sender, message, stats }) {
+    renderConfirmPaneContent({ title, sender, message, amount, stats }) {
         return (
             <div>
                 <InfoList
@@ -266,7 +272,7 @@ export default class SmsDistributionPane extends PaneBase {
                     <InfoList data={[{
                         name: 'estimated_amount',
                         msgId: 'panes.smsDistribution.credits.estimated_amount',
-                        msgValues: stats,
+                        msgValues: { amount },
                     }]}/>
                 )}
 
@@ -319,7 +325,7 @@ export default class SmsDistributionPane extends PaneBase {
 
     // Sending
 
-    renderSendingPaneContent({ title, sender, message, sent, stats }) {
+    renderSendingPaneContent({ title, sender, message, sent, amount, stats }) {
         return (
             <div>
                 <InfoList
@@ -345,7 +351,7 @@ export default class SmsDistributionPane extends PaneBase {
                     <InfoList data={[{
                         name: 'reserved_amount',
                         msgId: 'panes.smsDistribution.credits.reserved_amount',
-                        msgValues: stats,
+                        msgValues: { amount },
                     }]}/>
                 )}
 
@@ -391,7 +397,7 @@ export default class SmsDistributionPane extends PaneBase {
 
     // Sent
 
-    renderSentPaneContent({ title, sender, message, sent, stats }) {
+    renderSentPaneContent({ title, sender, message, sent, amount, stats }) {
         return (
             <div>
                 <InfoList
@@ -417,7 +423,7 @@ export default class SmsDistributionPane extends PaneBase {
                     <InfoList data={[{
                         name: 'amount',
                         msgId: 'panes.smsDistribution.credits.amount',
-                        msgValues: stats,
+                        msgValues: { amount },
                     }]}/>
                 )}
 
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 71af0eb48..7ac789a19 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -138,6 +138,12 @@
         }
     }
 
+    &.disabled {
+        pointer-events: none;
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
     &.pending {
         @include progress-bg;
         pointer-events: none;