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,41 +54,35 @@ 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) => {
-          // 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');
+    await this.domtools.setExternalScript('https://cdn.paddle.com/paddle/paddle.js');
+    globalThis.Paddle.Setup({
+      vendor: 30954,
+      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);
-            paddleButton.status = 'success';
-            paddleButton.text = 'Paddle connected!'
           }
-        },
-      });
-      globalThis.Paddle.Checkout.open({
-        product: 561076,
-        email: 'phil@kunz.io',
-      });
-    };
-    paddleButton.addEventListener('clicked', async () => {
-      openPaddle();
+          paddleButton.status = 'pending';
+          paddleButton.text = 'Processing...';
+          await state.accountState.dispatchAction(state.updatePaddleCheckoutId, data.checkout.id);
+          paddleButton.status = 'success';
+          paddleButton.text = 'Paddle connected!'
+        }
+      },
+    });
+    globalThis.Paddle.Checkout.open({
+      product: 561076,
+      email: 'phil@kunz.io',
     });
   }
 }

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>