Gladys Plus: Add account expired banner on dashboard (#1270)

front/src/actions/main.js

@@ -57,6 +57,15 @@ function createActions(store) {
         store.setState({
           user
         });
+        if (state.session.getGatewayUser) {
+          const gatewayUser = await state.session.getGatewayUser();
+          const now = new Date();
+          if (new Date(gatewayUser.current_period_end) < now) {
+            store.setState({
+              gatewayAccountExpired: true
+            });
+          }
+        }
       } catch (e) {
         const status = get(e, 'response.status');
         const error = get(e, 'response.data.error');

front/src/components/gateway/GatewayAccountExpired.jsx

@@ -0,0 +1,13 @@
+import { MarkupText } from 'preact-i18n';
+import style from './style.css';
+
+const GatewayAccountExpired = ({ children, ...props }) => (
+  <div class={style.gatewayExpiredDivBox}>
+    <img src="/assets/images/undraw_credit_card_payments.svg" class={style.gatewayExpiredImage} />
+    <p class={style.gatewayExpiredText}>
+      <MarkupText id="gateway.accountExpired" />
+    </p>
+  </div>
+);
+
+export default GatewayAccountExpired;

front/src/components/gateway/style.css

@@ -0,0 +1,20 @@
+.gatewayExpiredDivBox {
+  width: 60%;
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 120px;
+  text-align: center;
+}
+
+.gatewayExpiredText {
+  margin-top: 20px;
+}
+
+.gatewayExpiredImage {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  width: 100%;
+  max-width: 300px;
+}

front/src/config/i18n/en.json

@@ -1416,7 +1416,8 @@
     "gatewayConnectedSuccessTitle": "Gladys Plus connected with success!",
     "gatewayConnectedSuccessDescription": "Your Gladys instance was successfully connected.",
     "gatewayConnectedSuccessBackupKey": "It'll backup automatically everyday, encrypted with the following key. So you can restore your instance later, please save this encryption key somewhere, outside of Gladys. Without this key, you will not be able to restore Gladys.",
-    "gatewayConnectedSuccessButton": "I saved the backup key!"
+    "gatewayConnectedSuccessButton": "I saved the backup key!",
+    "accountExpired": "Your Gladys Plus account has expired. To renew your subscription, you can go to the <a href=\"/dashboard/settings/billing\">billing tab</a>."
   },
   "gatewayPricing": {
     "pricingTitle": "Pricing",

front/src/config/i18n/fr.json

@@ -1416,7 +1416,8 @@
     "gatewayConnectedSuccessTitle": "Gladys Plus est connecté avec succès !",
     "gatewayConnectedSuccessDescription": "Votre instance de Gladys s'est connectée avec succès.",
     "gatewayConnectedSuccessBackupKey": "Une sauvegarde sera faite chaque jour, encodée avec la clé suivante. Ainsi vous pourrez restaurer votre instance plus tard, merci d'enregistrer cette clé de chiffrement quelque part, en dehors de Gladys. Sans cette clé, il vous sera impossible de restaurer Gladys.",
-    "gatewayConnectedSuccessButton": "J'ai enregistré la clé de sauvegarde !"
+    "gatewayConnectedSuccessButton": "J'ai enregistré la clé de sauvegarde !",
+    "accountExpired": "Votre compte Gladys Plus a expiré. Pour réactiver votre compte, merci de mettre à jour votre moyen de paiement dans <a href=\"/dashboard/settings/billing\">l'onglet facturation</a>."
   },
   "gatewayPricing": {
     "pricingTitle": "Tarification",

front/src/routes/dashboard/index.js

@@ -3,14 +3,15 @@ import { connect } from 'unistore/preact';
 import { route } from 'preact-router';
 import update, { extend } from 'immutability-helper';
 import DashboardPage from './DashboardPage';
+import GatewayAccountExpired from '../../components/gateway/GatewayAccountExpired';
 import actions from '../../actions/dashboard';
 import get from 'get-value';
 
 extend('$auto', function(value, object) {
   return object ? update(object, value) : update({}, value);
 });
 
-@connect('user,fullScreen,currentUrl,httpClient', actions)
+@connect('user,fullScreen,currentUrl,httpClient,gatewayAccountExpired', actions)
 class Dashboard extends Component {
   toggleDashboardDropdown = () => {
     this.setState(prevState => {
@@ -333,6 +334,9 @@ class Dashboard extends Component {
         (currentDashboard.boxes[2] && currentDashboard.boxes[2].length > 0));
     const dashboardListEmpty = !(dashboards && dashboards.length > 0);
     const dashboardNotConfigured = !dashboardConfigured;
+    if (props.gatewayAccountExpired === true) {
+      return <GatewayAccountExpired />;
+    }
     return (
       <DashboardPage
         {...props}

front/src/utils/GatewaySession.js

@@ -74,6 +74,10 @@ class GatewaySession {
     return this.user;
   }
 
+  async getGatewayUser() {
+    return this.gatewayClient.getMyself();
+  }
+
   saveLoginInformations(data) {
     keyValueStore.set(GATEWAY_REFRESH_TOKEN_KEY, data.refreshToken);
     keyValueStore.set(GATEWAY_ACCESS_TOKEN_KEY, data.accessToken);