Generic URL to user billing page in Javascript not working

Development

AI-generated summary

The issue is with using the /my/billing/subscriptions URL in the if statement. According to Falco, this is because the /my/* URLs are just a smart redirect and users are never actually on those pages. Instead, they are redirected to /u/username/* URLs.

MrDavis97 tried using the correct URL /u/username/billing/subscriptions in the if statement, but it didn’t work. They also tried logging the correct URL using console.log outside of the setupComponent method, which worked fine. However, when they tried to log the URL inside the setupComponent method, nothing was output.

Justing suggested that the issue might be due to not having access to the api object in the setupComponent method. However, MrDavis97 clarified that they do have access to the api object, as they are able to use it to register the connector class and set up the onPageChange event.

The issue remains unsolved, with MrDavis97 still unable to log the correct URL inside the setupComponent method.

1

So I know already that /my/billing/subscriptions is a way to link the current user to his or her own user profile, in particular, the billing section that comes with Discourse Subscriptions. However, this doesn’t seem to be working in my code below, with the expression within the if-statement. In particular, I am trying to get a button to show up only on the user’s billing page. In fact, it seems to not work for any URL of the form /my, whether it’s billing, preferences, activity, or whatever else. Am I doing something wrong? What should I be using? (Keep in mind this is only not working in the if-statement. Otherwise using /my has and is working fine.)

<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {
    api.onPageChange((url) => {

        if (url === "/my/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

</script>

<script type="text/x-handlebars" data-template-name="/connectors/above-user-profile/back-button">
  {{#if displayCustomHomepage}} 
    <a href="https://mathbymiles.com/my/preferences" class="btn btn-default">
        <span class="d-button-label">
            Go back to settings!
        </span>
    </a>
  {{/if}}
</script>
2

Isn’t that because users are never in /my/* URLs because they are just a smart redirect?

For example, /my/preferences will redirect me to /u/falco/preferences, so I’m never at the /my/preferences page for the if on your code to trigger.

3

I see, you’re right. I see why it wouldn’t be appropriate for an if, since it’d never be true. So what can I do then?

I tried to do instead, in the if,

url === "/u/" + user.username + "/billing/subscriptions"

where

const user = api.getCurrentUser(),

but that didn’t seem to work either…

EDIT: So, using console.log I was able to figure out that in general this approach works fine. For example, if I just put the code

const user = api.getCurrentUser()
console.log("/u/" + user.username + "/billing/subscriptions")

in a script, I get back the desired /u/Miles/billing/subscriptions.

However, the problem occurs when I try to put this inside of setupComponent(args, component) {}. Once I do this, console.log no longer shows anything. Still not sure what I’m doing wrong…

4

Do you have access to the api object in the setupComponent method? I’m wondering if that’s the reason you’re having issues.

5

I thought so, because there is the use of api.onPageChange(url) already there a being executed just fine. Note that I am adapting the code from here, so it seems it’s very well true that I have access to the api object in the setupComponent method.

Just for further clarification, here is what I got so far:

With the code

<script type="text/discourse-plugin" version="0.8">
    const user = api.getCurrentUser();
    console.log("/u/" + user.username + "/billing/subscriptions");

    api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {

    api.onPageChange((url) => {

        if (url === "/u/" + user.username + "/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

I get the correct output /u/Miles/billing/subscriptions out of the console. But when I do,

<script type="text/discourse-plugin" version="0.8">
    

    api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {

    const user = api.getCurrentUser();
    console.log("/u/" + user.username + "/billing/subscriptions");

    api.onPageChange((url) => {

        if (url === "/u/" + user.username + "/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

there is no output to be found…