stripe sub cancellations

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,