email and sub status

client/assets/styles/account.less

@@ -38,9 +38,10 @@
         text-transform: uppercase;
 
         figure {
-            font-size: 125%;
+            width: 75%;
             display: flex;
             flex-flow: column;
+            margin-bottom: 1em;
 
             button {
                 width: 100%;

client/src/actions.jsx

@@ -31,6 +31,7 @@ export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
 export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
 export const setSkip = value => ({ type: 'SET_SKIP', value });
 export const setShop = value => ({ type: 'SET_SHOP', value });
+export const setSubscription = value => ({ type: 'SET_SUBSCRIPTION', value });
 
 export const setTeam = value => ({ type: 'SET_TEAM', value: Array.from(value) });
 export const setTeamPage = value => ({ type: 'SET_TEAM_PAGE', value });

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>
     );
 }

client/src/events.jsx

@@ -19,6 +19,10 @@ function registerEvents(store) {
         setNav('play');
     }
 
+    function setSubscription(sub) {
+        store.dispatch(actions.setSubscription(sub));
+    }
+
     function setConstructList(constructs) {
         store.dispatch(actions.setConstructs(constructs));
     }
@@ -227,6 +231,7 @@ function registerEvents(store) {
         setPing,
         setShop,
         setTeam,
+        setSubscription,
         setWs,
 
         notify,

client/src/reducers.jsx

@@ -44,6 +44,8 @@ module.exports = {
     skip:               createReducer(false, 'SET_SKIP'),
     shop:               createReducer(false, 'SET_SHOP'),
 
+    subscription:       createReducer(null, 'SET_SUBSCRIPTION'),
+
     team:               createReducer([], 'SET_TEAM'),
     teamPage:           createReducer(0, 'SET_TEAM_PAGE'),
     teamSelect:         createReducer([null, null, null], 'SET_TEAM_SELECT'),

client/src/socket.jsx

@@ -143,6 +143,15 @@ function createSocket(events) {
     function sendMtxConstructSpawn() {
         send(['MtxConstructSpawn', {}]);
     }
+
+    function sendEmailState() {
+        send(['EmailState', {}]);
+    }
+
+    function sendSubscriptionState() {
+        send(['SubscriptionState', {}]);
+    }
+
     // -------------
     //   Incoming
     // -------------
@@ -170,8 +179,9 @@ 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 onSubscriptionState(sub) {
+        // events.subscriptionState(`Subscription cancelled. Your subscription will remain active until ${exp}. Thank you for your support.`);
+        events.setSubscription(sub);
     }
 
     function onConstructSpawn(construct) {
@@ -208,7 +218,7 @@ function createSocket(events) {
         AccountTeam: onAccountTeam,
         AccountInstances: onAccountInstances,
         AccountShop: onAccountShop,
-        AccountSubscription: onAccountSubscription,
+        SubscriptionState: onSubscriptionState,
         ConstructSpawn: onConstructSpawn,
         GameState: onGameState,
         EmailState: onEmailState,
@@ -326,6 +336,9 @@ function createSocket(events) {
 
         sendItemInfo,
 
+        sendEmailState,
+        sendSubscriptionState,
+
         sendMtxApply,
         sendMtxBuy,
         sendMtxConstructSpawn,