email and sub status

client/src/components/account.management.jsx

@@ -12,6 +12,7 @@ const addState = connect(
     function receiveState(state) {
         const {
             account,
+            subscription,
             email,
             ping,
             ws,
@@ -55,6 +56,7 @@ const addState = connect(
 
         return {
             account,
+            subscription,
             ping,
             email,
             logout,
@@ -81,6 +83,7 @@ class AccountStatus extends Component {
     render(args, state) {
         const {
             account,
+            subscription,
             ping,
             email,
             logout,
@@ -128,15 +131,31 @@ class AccountStatus extends Component {
             return this.setState({ unsubState: false });
         }
 
+        const subInfo = () => {
+            if (!subscription) return false;
+            return <div>
+                <h3>Subscription</h3>
+                <dl>
+                    <dt>Period End</dt>
+                    <dd>{new Date(subscription.current_period_end * 1000).toString()}</dd>
+                    <dt>Status</dt>
+                    <dd>{subscription.cancel_at_period_end ? 'Disabled' : 'Active'}</dd>
+                </dl>
+            </div>;
+        }
+
         return (
             <section class='account' onClick={tlClick}>
                 <div>
                     <h1>{account.name}</h1>
-                    <dl>
-                        <dt>Subscription</dt>
-                        <dd>{account.subscribed ? 'Active' : 'Unsubscribed'}</dd>
-                    </dl>
-                    {unsubBtn()}
+                    <div class="list">
+                        <figure>
+                            <figcaption>spawn new construct</figcaption>
+                            <button onClick={() => sendConstructSpawn()} type="submit">
+                                ¤50
+                            </button>
+                        </figure>
+                    </div>
                     <button onClick={() => logout()}>Logout</button>
                     <button><a href={`mailto:humans@mnml.gg?subject=Account%20Support:%20${account.name}`}>✉ support</a></button>
                 </div>
@@ -190,13 +209,9 @@ class AccountStatus extends Component {
                         Set Password
                     </button>
                 </div>
-                <div class="list">
-                    <figure>
-                        <figcaption>spawn new construct</figcaption>
-                        <button onClick={() => sendConstructSpawn()} type="submit">
-                            ¤50
-                        </button>
-                    </figure>
+                <div>
+                    {subInfo()}
+                    {unsubBtn()}
                 </div>
             </section>
         );

client/src/components/account.status.jsx

@@ -13,11 +13,18 @@ function pingColour(ping) {
 const addState = connect(
     function receiveState(state) {
         const {
+            ws,
             account,
             ping,
         } = state;
 
+        function sendAccountStates() {
+            ws.sendEmailState();
+            ws.sendSubscriptionState();
+        }
+
         return {
+            sendAccountStates,
             account,
             ping,
         };
@@ -49,10 +56,16 @@ function AccountStatus(args) {
         account,
         ping,
         accountPage,
+        sendAccountStates,
     } = args;
 
     if (!account) return null;
 
+    function accountClick() {
+        sendAccountStates();
+        accountPage();
+    }
+
     return (
         <div class="account-status">
             <div class="account-info">
@@ -61,7 +74,7 @@ function AccountStatus(args) {
                 <div class="ping-text">{ping}ms</div>
             </div>
             <h3 class="account-header credits">{`¤${account.balance}`}</h3>
-            <button onClick={() => accountPage()}>⚙ account</button>
+            <button onClick={accountClick}>⚙ account</button>
         </div>
     );
 }