stripe sub cancellations

client/assets/styles/account.less

@@ -20,6 +20,18 @@
         display: block;
     }
 
+    .unsub {
+        &:hover {
+            color: @red;
+            border-color: @red;
+        };
+
+        &:active, &.confirming {
+            background: @red;
+            color: black;
+            border: 1px solid black;
+        }
+    }
 
     .list {
         letter-spacing: 0.25em;

client/assets/styles/styles.less

@@ -78,6 +78,10 @@ p {
     margin-bottom: 1em;
 }
 
+dl {
+    margin: 1em 0;
+}
+
 #mnml {
     display: grid;
     grid-template-columns: minmax(min-content, 1fr) 8fr 1fr;

client/src/app.jsx

@@ -30,7 +30,7 @@ document.fonts.load('16pt "Jura"').then(() => {
 
     const App = () => (
         <Provider store={store}>
-            <StripeProvider apiKey="pk_test_PiLzjIQE7zUy3Xpott7tdQbl00uLiCesTa">
+            <StripeProvider apiKey="pk_test_Cb49tTqTXpzk7nEmlGzRrNJg00AU0aNZDj">
                 <Mnml />
             </StripeProvider>
         </Provider>

client/src/components/account.management.jsx

@@ -18,7 +18,7 @@ const addState = connect(
         } = state;
 
 
-        function setPassword(current, password) {
+        function sendSetPassword(current, password) {
             postData('/account/password', { current, password })
                 .then(res => res.json())
                 .then(data => {
@@ -29,7 +29,7 @@ const addState = connect(
                 .catch(error => errorToast(error));
         }
 
-        function setEmail(email) {
+        function sendSetEmail(email) {
             postData('/account/email', { email })
                 .then(res => res.json())
                 .then(data => {
@@ -49,14 +49,19 @@ const addState = connect(
             return ws.sendMtxConstructSpawn(name);
         }
 
+        function sendSubscriptionCancel() {
+            return ws.sendSubscriptionCancel();
+        }
+
         return {
             account,
             ping,
             email,
             logout,
-            setPassword,
-            setEmail,
+            sendSetPassword,
+            sendSetEmail,
             sendConstructSpawn,
+            sendSubscriptionCancel,
         };
     },
 );
@@ -67,42 +72,73 @@ class AccountStatus extends Component {
         super(props);
 
         this.state = {
-            setPassword: { current: '', password: '', confirm: ''},
-            email: null,
+            passwordState: { current: '', password: '', confirm: ''},
+            emailState: null,
+            unsubState: false,
         };
     }
 
-    render(args) {
+    render(args, state) {
         const {
             account,
             ping,
             email,
             logout,
-            setPassword,
-            setEmail,
+            sendSetEmail,
+            sendSetPassword,
             sendConstructSpawn,
+            sendSubscriptionCancel,
         } = args;
 
+        const {
+            passwordState,
+            emailState,
+            unsubState,
+        } = state;
+
         if (!account) return null;
 
         const passwordsEqual = () =>
-            this.state.setPassword.password === this.state.setPassword.confirm;
+            passwordState.password === passwordState.confirm;
 
         const setPasswordDisabled = () => {
-            const { current, password, confirm } = this.state.setPassword;
+            const { current, password, confirm } = passwordState;
             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 });
+        }
+
         return (
-            <section class='account'>
+            <section class='account' onClick={tlClick}>
                 <div>
                     <h1>{account.name}</h1>
                     <dl>
                         <dt>Subscription</dt>
-                        <dd>{account.subscribed ? 'some date' : 'unsubscribed'}</dd>
+                        <dd>{account.subscribed ? 'Active' : 'Unsubscribed'}</dd>
                     </dl>
-                    <button><a href={`mailto:humans@mnml.gg?subject=Account%20Support:%20${account.name}`}>✉ support</a></button>
+                    {unsubBtn()}
                     <button onClick={() => logout()}>Logout</button>
+                    <button><a href={`mailto:humans@mnml.gg?subject=Account%20Support:%20${account.name}`}>✉ support</a></button>
                 </div>
                 <div>
                     <label for="email">Email Settings:</label>
@@ -116,11 +152,11 @@ class AccountStatus extends Component {
                         class="login-input"
                         type="email"
                         name="email"
-                        value={this.state.email}
-                        onInput={linkState(this, 'email')}
+                        value={emailState}
+                        onInput={linkState(this, 'emailState')}
                         placeholder="recovery@email.tld"
                     />
-                    <button onClick={() => setEmail(this.state.email)}>Update</button>
+                    <button onClick={() => sendSetEmail(emailState)}>Update</button>
                 </div>
                 <div>
                     <label for="current">Password:</label>
@@ -128,29 +164,29 @@ class AccountStatus extends Component {
                         class="login-input"
                         type="password"
                         name="current"
-                        value={this.state.setPassword.current}
-                        onInput={linkState(this, 'setPassword.current')}
+                        value={passwordState.current}
+                        onInput={linkState(this, 'passwordState.current')}
                         placeholder="current"
                     />
                     <input
                         class="login-input"
                         type="password"
                         name="new"
-                        value={this.state.setPassword.password}
-                        onInput={linkState(this, 'setPassword.password')}
+                        value={passwordState.password}
+                        onInput={linkState(this, 'passwordState.password')}
                         placeholder="new password"
                     />
                     <input
                         class="login-input"
                         type="password"
                         name="confirm"
-                        value={this.state.setPassword.confirm}
-                        onInput={linkState(this, 'setPassword.confirm')}
+                        value={passwordState.confirm}
+                        onInput={linkState(this, 'passwordState.confirm')}
                         placeholder="confirm"
                     />
                     <button
                         disabled={setPasswordDisabled()}
-                        onClick={() => setPassword(this.state.setPassword.current, this.state.setPassword.password)}>
+                        onClick={() => sendSetPassword(passwordState.current, passwordState.password)}>
                         Set Password
                     </button>
                 </div>

client/src/components/stripe.buttons.jsx

@@ -8,7 +8,7 @@ function BitsBtn(args) {
     } = args;
     function subscribeClick() {
         stripe.redirectToCheckout({
-            items: [{ plan: 'plan_FGmRwawcOJJ7Nv', quantity: 1 }],
+            items: [{ plan: 'plan_Fhl9r7UdMadjGi', quantity: 1 }],
             successUrl: 'http://localhost',
             cancelUrl: 'http://localhost',
             clientReferenceId: account.id,

client/src/events.jsx

@@ -3,6 +3,7 @@ const eachSeries = require('async/eachSeries');
 const actions = require('./actions');
 const { TIMES } = require('./constants');
 const animations = require('./animations.utils');
+const { infoToast, errorToast } = require('./utils');
 
 function registerEvents(store) {
     function setPing(ping) {
@@ -170,6 +171,10 @@ function registerEvents(store) {
         return store.dispatch(actions.setItemInfo(v));
     }
 
+    function notify(msg) {
+        return infoToast(msg);
+    }
+
     // events.on('SET_PLAYER', setInstance);
 
     // events.on('SEND_SKILL', function skillActive(gameId, constructId, targetConstructId, skill) {
@@ -223,6 +228,8 @@ function registerEvents(store) {
         setShop,
         setTeam,
         setWs,
+
+        notify,
     };
 }
 

client/src/socket.jsx

@@ -54,6 +54,10 @@ function createSocket(events) {
         send(['AccountSetTeam', { ids }]);
     }
 
+    function sendSubscriptionCancel() {
+        send(['SubscriptionCancel', { }]);
+    }
+
     function sendGameState(id) {
         send(['GameState', { id }]);
     }
@@ -166,6 +170,10 @@ function createSocket(events) {
         events.setTeam(constructs);
     }
 
+    function onAccountSubscription() {
+        events.notify('Your account has been set to cancelled. You will no longer be billed. Thanks for playing.');
+    }
+
     function onConstructSpawn(construct) {
         events.setNewConstruct(construct);
     }
@@ -200,6 +208,7 @@ function createSocket(events) {
         AccountTeam: onAccountTeam,
         AccountInstances: onAccountInstances,
         AccountShop: onAccountShop,
+        AccountSubscription: onAccountSubscription,
         ConstructSpawn: onConstructSpawn,
         GameState: onGameState,
         EmailState: onEmailState,
@@ -296,6 +305,8 @@ function createSocket(events) {
         sendAccountInstances,
         sendAccountSetTeam,
 
+        sendSubscriptionCancel,
+
         sendGameState,
         sendGameReady,
         sendGameSkill,