Show sub info (#1685)

* Show sub info

* Fix observer

src/panels/config/cloud/ha-config-cloud-account.js

@@ -75,10 +75,9 @@ class HaConfigCloudAccount extends EventsMixin(PolymerElement) {
           <paper-card heading="Nabu Casa Account">
             <div class="account-row">
               <paper-item-body two-line="">
-                [[account.email]]
+                [[cloudStatus.email]]
                 <div secondary="" class="wrap">
-                  <span class="nowrap">Subscription expires on </span>
+                  [[_formatSubscription(_subscription)]]
-                  <span class="nowrap">[[_formatExpiration(account.sub_exp)]]</span>
                 </div>
               </paper-item-body>
             </div>
@@ -87,7 +86,7 @@ class HaConfigCloudAccount extends EventsMixin(PolymerElement) {
               <paper-item-body>
                 Cloud connection status
               </paper-item-body>
-              <div class="status">[[account.cloud]]</div>
+              <div class="status">[[cloudStatus.cloud]]</div>
             </div>
 
             <div class='card-actions'>
@@ -156,36 +155,64 @@ class HaConfigCloudAccount extends EventsMixin(PolymerElement) {
     return {
       hass: Object,
       isWide: Boolean,
-      account: {
+      cloudStatus: Object,
+      _subscription: {
         type: Object,
-        observer: '_accountChanged',
+        value: null,
-      },
+      }
     };
   }
 
+  ready() {
+    super.ready();
+    this._fetchSubscriptionInfo();
+  }
+
+  async _fetchSubscriptionInfo() {
+    this._subscription = await this.hass.callWS({ type: 'cloud/subscription' });
+  }
+
   handleLogout() {
-    this.hass.callApi('post', 'cloud/logout').then(() => this.fire('ha-account-refreshed', { account: null }));
+    this.hass.callApi('post', 'cloud/logout')
+      .then(() => this.fire('ha-refresh-cloud-status'));
   }
 
-  _formatExpiration(date) {
+  _formatSubscription(subInfo) {
-    return formatDateTime(new Date(date));
+    if (subInfo === null) {
-  }
+      return 'Fetching subscription…';
-
-  _accountChanged(newAccount) {
-    if (!newAccount || newAccount.cloud !== 'connecting') {
-      if (this._accountUpdater) {
-        clearTimeout(this._accountUpdater);
-        this._accountUpdater = null;
-      }
-      return;
-    } if (this._accountUpdater) {
-      return;
     }
-    setTimeout(() => {
+    /* eslint-disable camelcase */
-      this._accountUpdater = null;
+    const { subscription, source, customer_exists } = subInfo;
-      this.hass.callApi('get', 'cloud/account')
+
-        .then(account => this.fire('ha-account-refreshed', { account }));
+    // Check if we're before Oct 17.
-    }, 5000);
+    const beforeOct17 = Date.now() < 1539734400000;
+
+    if (!customer_exists) {
+      return `Legacy user. Subscription expire${beforeOct17 ? 's' : 'd'} Oct 17, 2018.`;
+    }
+    if (!subscription || subscription.status === 'canceled') {
+      return 'No subscription';
+    }
+
+    const periodExpires = formatDateTime(new Date(subscription.current_period_end * 1000));
+
+    if (subscription.status === 'trialing' && !source) {
+      return `Trial user. Trial expires ${periodExpires}.`;
+    }
+
+    if (subscription.status === 'trialing') {
+      return `Active user. You will be charged on ${periodExpires}.`;
+    }
+
+    if (subscription.status === 'active' && subscription.cancel_at_period_end) {
+      return `Active user. Scheduled to cancel on ${periodExpires}`;
+    }
+
+    if (subscription.status === 'active') {
+      return `Active user. You will be charged on ${periodExpires}.`;
+    }
+
+    return 'Unable to determine subscription status.';
   }
 }
 

src/panels/config/cloud/ha-config-cloud-login.js

@@ -199,8 +199,8 @@ class HaConfigCloudLogin extends
     this.hass.callApi('post', 'cloud/login', {
       email: this.email,
       password: this._password,
-    }).then((account) => {
+    }).then(() => {
-      this.fire('ha-account-refreshed', { account: account });
+      this.fire('ha-refresh-cloud-status');
       this.setProperties({
         email: '',
         _password: '',

src/panels/config/cloud/ha-config-cloud.js

@@ -30,19 +30,38 @@ class HaConfigCloud extends NavigateMixin(PolymerElement) {
   <app-route route="[[route]]" pattern="/cloud/:page" data="{{_routeData}}" tail="{{_routeTail}}"></app-route>
 
   <template is="dom-if" if="[[_equals(_routeData.page, &quot;account&quot;)]]" restamp="">
-    <ha-config-cloud-account hass="[[hass]]" account="[[account]]" is-wide="[[isWide]]"></ha-config-cloud-account>
+    <ha-config-cloud-account
+      hass="[[hass]]"
+      cloud-status="[[cloudStatus]]"
+      is-wide="[[isWide]]"
+    ></ha-config-cloud-account>
   </template>
 
   <template is="dom-if" if="[[_equals(_routeData.page, &quot;login&quot;)]]" restamp="">
-    <ha-config-cloud-login page-name="login" hass="[[hass]]" is-wide="[[isWide]]" email="{{_loginEmail}}" flash-message="{{_flashMessage}}"></ha-config-cloud-login>
+    <ha-config-cloud-login
+      page-name="login"
+      hass="[[hass]]"
+      is-wide="[[isWide]]"
+      email="{{_loginEmail}}"
+      flash-message="{{_flashMessage}}"
+    ></ha-config-cloud-login>
   </template>
 
   <template is="dom-if" if="[[_equals(_routeData.page, &quot;register&quot;)]]" restamp="">
-    <ha-config-cloud-register page-name="register" hass="[[hass]]" is-wide="[[isWide]]" email="{{_loginEmail}}"></ha-config-cloud-register>
+    <ha-config-cloud-register
+      page-name="register"
+      hass="[[hass]]"
+      is-wide="[[isWide]]"
+      email="{{_loginEmail}}"
+    ></ha-config-cloud-register>
   </template>
 
   <template is="dom-if" if="[[_equals(_routeData.page, &quot;forgot-password&quot;)]]" restamp="">
-    <ha-config-cloud-forgot-password page-name="forgot-password" hass="[[hass]]" email="{{_loginEmail}}"></ha-config-cloud-forgot-password>
+    <ha-config-cloud-forgot-password
+      page-name="forgot-password"
+      hass="[[hass]]"
+      email="{{_loginEmail}}"
+    ></ha-config-cloud-forgot-password>
   </template>
 `;
   }
@@ -55,7 +74,7 @@ class HaConfigCloud extends NavigateMixin(PolymerElement) {
         type: Boolean,
         value: false
       },
-      account: {
+      cloudStatus: {
         type: Object,
       },
       _flashMessage: {
@@ -73,7 +92,7 @@ class HaConfigCloud extends NavigateMixin(PolymerElement) {
 
   static get observers() {
     return [
-      '_checkRoute(route, account)'
+      '_checkRoute(route, cloudStatus)'
     ];
   }
 
@@ -92,9 +111,9 @@ class HaConfigCloud extends NavigateMixin(PolymerElement) {
       this._debouncer,
       timeOut.after(0),
       () => {
-        if (!this.account && !NOT_LOGGED_IN_URLS.includes(route.path)) {
+        if (!this.cloudStatus.logged_in && !NOT_LOGGED_IN_URLS.includes(route.path)) {
           this.navigate('/config/cloud/login', true);
-        } else if (this.account && !LOGGED_IN_URLS.includes(route.path)) {
+        } else if (this.cloudStatus.logged_in && !LOGGED_IN_URLS.includes(route.path)) {
           this.navigate('/config/cloud/account', true);
         }
       }

src/panels/config/dashboard/ha-config-dashboard.js

@@ -55,10 +55,10 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
                 <paper-item on-click="_navigate">
                   <paper-item-body two-line="">
                     Home Assistant Cloud
-                    <template is="dom-if" if="[[account]]">
+                    <template is="dom-if" if="[[cloudStatus.logged_in]]">
-                      <div secondary="">Logged in as [[account.email]]</div>
+                      <div secondary="">Logged in as [[cloudStatus.email]]</div>
                     </template>
-                    <template is="dom-if" if="[[!account]]">
+                    <template is="dom-if" if="[[!cloudStatus.logged_in]]">
                       <div secondary="">Not logged in</div>
                     </template>
                   </paper-item-body>
@@ -103,7 +103,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
     return {
       hass: Object,
       isWide: Boolean,
-      account: Object,
+      cloudStatus: Object,
       narrow: Boolean,
       showMenu: Boolean,
     };

src/panels/config/ha-panel-config.js

@@ -49,7 +49,7 @@ class HaPanelConfig extends NavigateMixin(PolymerElement) {
         route='[[route]]'
         hass='[[hass]]'
         is-wide='[[isWide]]'
-        account='[[account]]'
+        cloud-status='[[_cloudStatus]]'
       ></ha-config-cloud>
     </template>
 
@@ -58,7 +58,7 @@ class HaPanelConfig extends NavigateMixin(PolymerElement) {
         page-name='dashboard'
         hass='[[hass]]'
         is-wide='[[isWide]]'
-        account='[[account]]'
+        cloud-status='[[_cloudStatus]]'
         narrow='[[narrow]]'
         show-menu='[[showMenu]]'
       ></ha-config-dashboard>
@@ -122,7 +122,7 @@ class HaPanelConfig extends NavigateMixin(PolymerElement) {
       hass: Object,
       narrow: Boolean,
       showMenu: Boolean,
-      account: {
+      _cloudStatus: {
         type: Object,
         value: null,
       },
@@ -147,12 +147,19 @@ class HaPanelConfig extends NavigateMixin(PolymerElement) {
   ready() {
     super.ready();
     if (isComponentLoaded(this.hass, 'cloud')) {
-      this.hass.callApi('get', 'cloud/account')
+      this._updateCloudStatus();
-        .then((account) => { this.account = account; }, () => {});
+    }
+    this.addEventListener(
+      'ha-refresh-cloud-status', () => this._updateCloudStatus()
+    );
+  }
+
+  async _updateCloudStatus() {
+    this._cloudStatus = await this.hass.callWS({ type: 'cloud/status' });
+
+    if (this._cloudStatus.cloud === 'connecting') {
+      setTimeout(() => this._updateCloudStatus(), 5000);
     }
-    this.addEventListener('ha-account-refreshed', (ev) => {
-      this.account = ev.detail.account;
-    });
   }
 
   computeIsWide(showMenu, wideSidebar, wide) {