update paddle view nav

ts_web/elements/account/content.ts

@@ -129,6 +129,16 @@ export class IdpAccountContent extends DeesElement {
       await this.domtools.convenience.smartdelay.delayFor(300);
     });
 
+    this.subrouter.on('/org/:orgName/paddlesetup', async () => {
+      viewcontainer.classList.add('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+      console.log('We are viewing the paddle setup page');
+      await cleanupViews();
+      viewcontainer.append(new views.PaddleSetupView());
+      viewcontainer.classList.remove('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+    });
+
     this.subrouter._handleRouteState();
 
     this.registerGarbageFunction(async () => {

ts_web/elements/account/views/paddlesetup.ts

@@ -54,26 +54,24 @@ export class PaddleSetupView extends DeesElement {
         Paddle takes care of tax compliance for us. This allows us to sell our products world wide
         while Paddle makes sure any sales are in compliance with local laws.
       </p>
-      <dees-button>Let's do it!</dees-button>
+      <dees-button @clicked=${() => this.openPaddle()}>Let's do it!</dees-button>
     `;
   }
 
-  /**
-   *
-   */
-  public async firstUpdated() {
+  public async openPaddle() {
     await this.domtoolsPromise;
     const paddleButton = this.shadowRoot.querySelector('dees-button');
-    const openPaddle = async () => {
     await this.domtools.setExternalScript('https://cdn.paddle.com/paddle/paddle.js');
     globalThis.Paddle.Setup({
       vendor: 30954,
-        eventCallback: async (dataArg) => {
+      eventCallback: async (dataArg: any) => {
         // The data.event will specify the event type
         if (dataArg.event === 'Checkout.Complete') {
           const data: plugins.idpInterfaces.data.IPaddleCheckoutData = dataArg.eventData;
           const paddleIframe = document.body.querySelector('iframe');
+          if (paddleIframe) {
             document.body.removeChild(paddleIframe);
+          }
           paddleButton.status = 'pending';
           paddleButton.text = 'Processing...';
           await state.accountState.dispatchAction(state.updatePaddleCheckoutId, data.checkout.id);
@@ -86,9 +84,5 @@ export class PaddleSetupView extends DeesElement {
       product: 561076,
       email: 'phil@kunz.io',
     });
-    };
-    paddleButton.addEventListener('clicked', async () => {
-      openPaddle();
-    });
   }
 }

ts_web/elements/account/views/subscriptions.ts

@@ -100,8 +100,12 @@ export class SubscriptionView extends DeesElement {
 
           <h3>Paddle</h3>
           <dees-button @click=${async () => {
-            await this.domtoolsPromise;
-            this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
+            // Extract org slug from current URL: /account/org/{orgSlug}/billing
+            const pathParts = window.location.pathname.split('/');
+            const orgSlug = pathParts[3];
+            // Use parent's subrouter for proper navigation within account section
+            const parentElement = (this.getRootNode() as any).host;
+            parentElement.subrouter.pushUrl(`/org/${orgSlug}/paddlesetup`);
           }}>Set up Paddle.com</dees-button>
 
           <h3>Enterprise Billing</h3>