Generic URL to user billing page in Javascript not working

Dev
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>
1 Like
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.

2 Likes
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…