Moved billing page to a popup

no issue

- To simplify styling and give a better separation feeling from UI perspective

app/components/gh-nav-menu.js

@@ -25,6 +25,7 @@ export default Component.extend(ShortcutsMixin, {
     iconStyle: '',
 
     showSearchModal: false,
+    showBillingModal: false,
 
     shortcuts: null,
 
@@ -78,6 +79,9 @@ export default Component.extend(ShortcutsMixin, {
         },
         toggleSearchModal() {
             this.toggleProperty('showSearchModal');
+        },
+        toggleBillingModal() {
+            this.toggleProperty('showBillingModal');
         }
     },
 

app/components/modal-billing.js

@@ -0,0 +1,4 @@
+import ModalComponent from 'ghost-admin/components/modal-base';
+
+export default ModalComponent.extend({
+});

app/routes/billing.js

@@ -1,25 +0,0 @@
-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'
-        };
-    }
-});
-

app/styles/app-dark.css

@@ -60,6 +60,7 @@
 @import "layouts/labs.css";
 @import "layouts/whats-new.css";
 @import "layouts/preview-email.css";
+@import "layouts/billing.css";
 
 
 :root {
@@ -513,4 +514,4 @@ input:focus,
 }
 .gh-members-chart-header .gh-contentfilter-type .gh-contentfilter-menu-trigger {
     box-shadow: 0 0 0 1px color-mod(var(--darkgrey) l(-27%) blackness(+15%) alpha(50%));
-}
+}

app/styles/app.css

@@ -60,6 +60,7 @@
 @import "layouts/labs.css";
 @import "layouts/whats-new.css";
 @import "layouts/preview-email.css";
+@import "layouts/billing.css";
 
 
 /* ---------------------------✈️----------------------------- */

app/styles/layouts/billing.css

@@ -0,0 +1,37 @@
+.fullscreen-modal-billing {
+    margin: 0;
+    max-width: 100%;
+}
+
+.fullscreen-modal-billing .modal-content {
+    position: relative;
+    height: 100%;
+    padding: 0;
+}
+
+.fullscreen-modal-billing .modal-body {
+    margin: 0;
+}
+
+.fullscreen-modal-billing .billing-frame {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    transform: translate3d(0, 0, 0);
+}
+
+.gh-billing-close {
+    width: calc(50vw - 200px)
+}
+
+.gh-billing-close button {
+    stroke: var(--midgrey);
+    opacity: 0.6;
+    transition: all 0.2s ease-in-out;
+    top: 25px;
+}

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

@@ -1,15 +1 @@
-<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>
+<iframe id="billing-frame" class="billing-frame" src={{this.billingEndpoint}} frameborder="0" allowtransparency="true"></iframe>

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

@@ -14,6 +14,12 @@
         @modifier="action wide" />
 {{/if}}
 
+{{#if this.showBillingModal}}
+    <GhFullscreenModal @modal="billing"
+        @close={{action "toggleBillingModal"}}
+        @modifier="full-overlay billing" />
+{{/if}}
+
 <section class="gh-nav-body">
     <div class="gh-nav-top">
         <ul class="gh-nav-list gh-nav-main">
@@ -91,9 +97,9 @@
                 </li>
                 {{#if this.showBilling}}
                     <li class="relative">
-                        <LinkTo @route="billing" data-test-nav="billing">
+                        <a href="javascript:void(0)" {{action "toggleBillingModal"}} data-test-nav="billing">
                             {{svg-jar "house"}} View billing
-                        </LinkTo>
+                        </a>
                     </li>
                 {{/if}}
             </ul>

app/templates/components/modal-billing.hbs

@@ -0,0 +1,7 @@
+<div class="gh-billing-close">
+    <button class="close" href title="Close" {{on "click" this.closeModal}}>
+        {{svg-jar "close"}}
+    </button>
+</div>
+
+<GhBillingIframe></GhBillingIframe>