Disable SMS Distribution confirm button when there is nothing to send

zetkin · Apr 14, 2019 · ebde529 · ebde529
1 parent 1a42735
commit ebde529
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/src/components/misc/Button.jsx b/src/components/misc/Button.jsx
@@ -16,23 +16,26 @@ 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,
         });
 
         let label = formatMessage({ id: this.props.labelMsg },
             this.props.labelValues);
 
         return (
-            <button className={ classes }
+            <button className={ classes } disabled={this.props.isDisabled}
                 onClick={ this.onClick.bind(this) }>
                 { label }
             </button>
         );
     }
 
     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
@@ -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,14 +241,15 @@ 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>
         );
     }
 
     // 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
@@ -138,6 +138,12 @@
         }
     }
 
+    &.disabled {
+        pointer-events: none;
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
     &.pending {
         @include progress-bg;
         pointer-events: none;