Move billing iFrame to render in main content area (#1838)

no issue

The billing iFrame needs to be rendered within the `main` content area rather than as fullscreen.

This needs most probably more tidying up, but is working for now without breaking the functionality.

* Move billing iFrame to render in main content area
* Fixed routing error when transistion url not defined
* Removed close modal button and esc key binding

ghost/admin/app/components/gh-billing-modal.hbs

@@ -1,11 +1,5 @@
 <div class="{{this.visibilityClass}}">
     <div class="gh-billing-container">
-        <div class="gh-billing-close">
-            <button class="close" href title="Close" {{on "click" (action "closeModal")}}>
-                {{svg-jar "close"}}
-            </button>
-        </div>
-
         <GhBillingIframe></GhBillingIframe>
     </div>
 </div>

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

@@ -21,12 +21,6 @@ export default Component.extend({
         this._removeShortcuts();
     },
 
-    actions: {
-        closeModal() {
-            this.billing.closeBillingWindow();
-        }
-    },
-
     _setupShortcuts() {
         run(function () {
             document.activeElement.blur();
@@ -38,16 +32,11 @@ export default Component.extend({
             this.send('confirm');
         });
 
-        key('escape', 'modal', () => {
-            this.send('closeModal');
-        });
-
         key.setScope('modal');
     },
 
     _removeShortcuts() {
         key.unbind('enter', 'modal');
-        key.unbind('escape', 'modal');
         key.setScope(this._previousKeymasterScope);
     }
 });

ghost/admin/app/routes/billing.js

@@ -31,7 +31,7 @@ export default Route.extend({
                         ? transition.intent.url
                         : '');
 
-                if (destinationUrl.includes('/billing')) {
+                if (destinationUrl?.includes('/billing')) {
                     isBillingTransition = true;
                 }
             }

ghost/admin/app/templates/application.hbs

@@ -10,6 +10,11 @@
 
         <main class="gh-main {{this.ui.mainClass}}" role="main">
             {{outlet}}
+
+            {{#if this.showBilling}}
+                <GhBillingModal />
+            {{/if}}
+
         </main>
 
         <GhNotifications />
@@ -28,10 +33,6 @@
             @modifier="action narrow"
         />
     {{/if}}
-
-    {{#if this.showBilling}}
-        <GhBillingModal />
-    {{/if}}
 </GhApp>
 
 <EmberLoadRemover />