resubscribe button

client/src/components/account.management.jsx

@@ -50,8 +50,8 @@ const addState = connect(
             return ws.sendMtxConstructSpawn(name);
         }
 
-        function sendSubscriptionCancel() {
-            return ws.sendSubscriptionCancel();
+        function sendSubscriptionEnding(enabled) {
+            return ws.sendSubscriptionEnding(enabled);
         }
 
         return {
@@ -63,7 +63,7 @@ const addState = connect(
             sendSetPassword,
             sendSetEmail,
             sendConstructSpawn,
-            sendSubscriptionCancel,
+            sendSubscriptionEnding,
         };
     },
 );
@@ -90,7 +90,7 @@ class AccountStatus extends Component {
             sendSetEmail,
             sendSetPassword,
             sendConstructSpawn,
-            sendSubscriptionCancel,
+            sendSubscriptionEnding,
         } = args;
 
         const {
@@ -109,29 +109,34 @@ class AccountStatus extends Component {
             return !(passwordsEqual() && password && current && confirm);
         }
 
-        const unsub = e => {
-            if (unsubState) {
-                return sendSubscriptionCancel();
-            }
-
-            e.stopPropagation();
-            return this.setState({ unsubState: true });
-        }
-
-        const unsubBtn = () => {
-            if (!account.subscribed) return false;
-
-            const classes = `unsub ${unsubState ? 'confirming' : ''}`;
-            const text = unsubState ? 'Confirm' : 'Unsubscribe'
-            return <button class={classes} onClick={unsub}>{text}</button>
-        }
-
         const tlClick = e => {
             e.stopPropagation();
             return this.setState({ unsubState: false });
         }
 
         const subInfo = () => {
+            const unsubBtn = () => {
+                if (!subscription) return false;
+
+                // resub button
+                if (subscription.cancel_at_period_end) {
+                    return <button class='stripe-btn' onClick={() => sendSubscriptionEnding(false)}>Resubscribe</button>
+                }
+
+                const classes = `unsub ${unsubState ? 'confirming' : ''}`;
+                const text = unsubState ? 'Confirm' : 'Unsubscribe'
+                return <button class={classes} onClick={unsub}>{text}</button>
+            }
+
+            const unsub = e => {
+                if (unsubState) {
+                    return sendSubscriptionEnding(true);
+                }
+
+                e.stopPropagation();
+                return this.setState({ unsubState: true });
+            }
+
             if (!subscription) return false;
             return <div>
                 <h3>Subscription</h3>
@@ -141,6 +146,7 @@ class AccountStatus extends Component {
                     <dt>Status</dt>
                     <dd>{subscription.cancel_at_period_end ? 'Disabled' : 'Active'}</dd>
                 </dl>
+                {unsubBtn()}
             </div>;
         }
 
@@ -211,7 +217,6 @@ class AccountStatus extends Component {
                 </div>
                 <div>
                     {subInfo()}
-                    {unsubBtn()}
                 </div>
             </section>
         );

client/src/socket.jsx

@@ -54,8 +54,8 @@ function createSocket(events) {
         send(['AccountSetTeam', { ids }]);
     }
 
-    function sendSubscriptionCancel() {
-        send(['SubscriptionCancel', { }]);
+    function sendSubscriptionEnding(ending) {
+        send(['SubscriptionEnding', { ending }]);
     }
 
     function sendGameState(id) {
@@ -315,7 +315,6 @@ function createSocket(events) {
         sendAccountInstances,
         sendAccountSetTeam,
 
-        sendSubscriptionCancel,
 
         sendGameState,
         sendGameReady,
@@ -338,6 +337,7 @@ function createSocket(events) {
 
         sendEmailState,
         sendSubscriptionState,
+        sendSubscriptionEnding,
 
         sendMtxApply,
         sendMtxBuy,