Added billing route and iframe behind config

no-issue

* Updated the iframe src

* Moved billing behind config

* Transition to home route for missing billing config

* Replaced jquery element selection with native

ghost/admin/app/components/gh-billing-iframe.js

@@ -0,0 +1,27 @@
+import Component from '@ember/component';
+import {computed} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default Component.extend({
+    config: service(),
+    ghostPaths: service(),
+    ajax: service(),
+
+    billingEndpoint: computed.reads('config.billingUrl'),
+
+    didRender() {
+        let iframe = this.element.querySelector('#billing-frame');
+        window.addEventListener('message', (event) => {
+            if (event && event.data && event.data.request === 'token') {
+                const ghostIdentityUrl = this.get('ghostPaths.url').api('ghost-identity');
+
+                this.ajax.post(ghostIdentityUrl).then(({token}) => {
+                    iframe.contentWindow.postMessage({
+                        request: 'token',
+                        response: token
+                    }, '*');
+                });
+            }
+        });
+    }
+});

ghost/admin/app/components/gh-nav-menu.js

@@ -3,6 +3,7 @@ import ShortcutsMixin from 'ghost-admin/mixins/shortcuts';
 import calculatePosition from 'ember-basic-dropdown/utils/calculate-position';
 import ctrlOrCmd from 'ghost-admin/utils/ctrl-or-cmd';
 import {and, equal, match} from '@ember/object/computed';
+import {computed} from '@ember/object';
 import {getOwner} from '@ember/application';
 import {htmlSafe} from '@ember/string';
 import {inject as service} from '@ember/service';
@@ -37,6 +38,7 @@ export default Component.extend(ShortcutsMixin, {
     showMenuExtension: and('config.clientExtensions.menu', 'session.user.isOwner'),
     showDropdownExtension: and('config.clientExtensions.dropdown', 'session.user.isOwner'),
     showScriptExtension: and('config.clientExtensions.script', 'session.user.isOwner'),
+    showBilling: computed.reads('config.billingUrl'),
 
     init() {
         this._super(...arguments);

ghost/admin/app/controllers/billing.js

@@ -0,0 +1,6 @@
+import Controller from '@ember/controller';
+import {alias} from '@ember/object/computed';
+
+export default Controller.extend({
+    guid: alias('model')
+});

ghost/admin/app/router.js

@@ -22,6 +22,7 @@ Router.map(function () {
     this.route('reset', {path: '/reset/:token'});
     this.route('about');
     this.route('site');
+    this.route('billing');
 
     this.route('posts');
     this.route('pages');

ghost/admin/app/routes/billing.js

@@ -0,0 +1,25 @@
+import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
+import {inject as service} from '@ember/service';
+
+export default AuthenticatedRoute.extend({
+    config: service(),
+    router: service(),
+
+    beforeModel() {
+        // Transition to home if billing is not available
+        if (!this.get('config.billingUrl')) {
+            return this.transitionTo('home');
+        }
+    },
+
+    model() {
+        return (new Date()).valueOf();
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Billing'
+        };
+    }
+});
+

ghost/admin/app/templates/billing.hbs

@@ -0,0 +1 @@
+<GhBillingIframe @guid={{this.guid}}></GhBillingIframe>

ghost/admin/app/templates/components/gh-billing-iframe.hbs

@@ -0,0 +1,15 @@
+<iframe id="billing-frame" class="billing-frame" src={{this.billingEndpoint}} frameborder="0" allowtransparency="true"></iframe>
+
+<style>
+.billing-frame {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    transform: translate3d(0, 0, 0);
+}
+</style>

ghost/admin/app/templates/components/gh-nav-menu.hbs

@@ -89,6 +89,13 @@
                     </button>
                     <LinkTo @route="settings.labs" data-test-nav="labs">{{svg-jar "labs"}}Labs</LinkTo>
                 </li>
+                {{#if this.showBilling}}
+                    <li class="relative">
+                        <LinkTo @route="billing" data-test-nav="billing">
+                            {{svg-jar "house"}} View billing
+                        </LinkTo>
+                    </li>
+                {{/if}}
             </ul>
         {{/if}}