feat: show license details

frontend/app/components/Client/ProfileSettings/Licenses.js

@@ -1,9 +1,15 @@
 import React from 'react'
+import { connect } from 'react-redux'
 
-export default function Licenses() {
+function Licenses({ account }) {
   return (
     <div>
-      License Number
+      <div>{account.license}</div>
+      <div className="font-medium text-sm">Expires At: {account.expirationDate && account.expirationDate.toFormat('LLL dd, yyyy')}</div>
     </div>
   )
 }
+
+export default connect(state => ({
+  account: state.getIn([ 'user', 'account' ]),
+}))(Licenses)

frontend/app/components/Client/ProfileSettings/ProfileSettings.js

@@ -53,8 +53,7 @@ export default class ProfileSettings extends React.PureComponent {
 
         <div className="flex items-center">
           <div className={ styles.left }>
-            <h4 className="text-lg mb-4">{ 'Licenses' }</h4>
-            {/* <div className={ styles.info }>{ 'Your API key gives you access to an extra set of services.' }</div> */}
+            <h4 className="text-lg mb-4">{ 'License' }</h4>
           </div>
           <div><Licenses /></div>
         </div>

frontend/app/types/account/account.js

@@ -1,6 +1,7 @@
 import Member from 'Types/member';
 import Appearance from './appearance';
 import Limit from './limit';
+import { DateTime } from 'luxon';
 
 export default Member.extend({
   changePassword: undefined,
@@ -8,10 +9,14 @@ export default Member.extend({
   limits: Limit(),
   banner: undefined,
   email: '',
-  verifiedEmail: undefined
+  verifiedEmail: undefined,
+  license: '',
+  expirationDate: undefined,
 }, {
-  fromJS: account => ({
+  fromJS: ({ current = {}, ...account})=> ({
     ...account,
+    license: current.license,
+    expirationDate: current.expirationDate && DateTime.fromMillis(current.expirationDate * 1000 || 0),
     appearance: Appearance(account.appearance),
   })
 });