URL générique vers la page de facturation utilisateur en Javascript ne fonctionne pas

Dev
1

Je sais déjà que /my/billing/subscriptions est un moyen de lier l’utilisateur actuel à son propre profil utilisateur, en particulier la section de facturation fournie par Discourse Subscriptions. Cependant, cela ne semble pas fonctionner dans mon code ci-dessous, avec l’expression contenue dans la condition if. En particulier, j’essaie de faire en sorte qu’un bouton n’apparaisse que sur la page de facturation de l’utilisateur. En fait, cela ne semble pas fonctionner pour aucune URL de la forme /my, qu’il s’agisse de facturation, de préférences, d’activité ou autre. Est-ce que je fais quelque chose de mal ? Que devrais-je utiliser ? (Gardez à l’esprit que cela ne fonctionne pas uniquement dans la condition if. Sinon, l’utilisation de /my fonctionne et a toujours fonctionné.)

<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">
            Retour aux paramètres !
        </span>
    </a>
  {{/if}}
</script>
1 « J'aime »
2

N’est-ce pas parce que les utilisateurs ne se trouvent jamais sur les URL /my/*, car il ne s’agit que de redirections intelligentes ?

Par exemple, /my/preferences me redirigera vers /u/falco/preferences, donc je ne serai jamais sur la page /my/preferences pour que la condition if de votre code se déclenche.

2 « J'aime »
3

Je vois, vous avez raison. Je comprends pourquoi cela ne conviendrait pas pour un if, car cela ne serait jamais vrai. Alors, que puis-je faire dans ce cas ?

J’ai essayé de faire, à la place, dans le if,

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

où

const user = api.getCurrentUser(),

mais cela ne semblait pas fonctionner non plus…

EDIT : Donc, en utilisant console.log, j’ai pu constater que cette approche fonctionne généralement bien. Par exemple, si je mets simplement le code

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

dans un script, je reçois bien le résultat souhaité /u/Miles/billing/subscriptions.

Cependant, le problème survient lorsque j’essaie de placer cela à l’intérieur de setupComponent(args, component) {}. Dès que je le fais, console.log n’affiche plus rien. Je ne suis toujours pas sûr de ce que je fais de mal…

4

Avez-vous accès à l’objet api dans la méthode setupComponent ? Je me demande si c’est la raison de vos problèmes.

5

Je le pensais, car api.onPageChange(url) est déjà utilisé et fonctionne parfaitement. Notez que j’adapte le code de là, il semble donc tout à fait vrai que j’ai accès à l’objet api dans la méthode setupComponent.

Pour plus de précisions, voici ce que j’ai obtenu jusqu’à présent :

Avec le 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); 
        }
    });
    }
});

j’obtiens la sortie correcte /u/Miles/billing/subscriptions dans la console. Mais lorsque je fais :

<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); 
        }
    });
    }
});

il n’y a aucune sortie à trouver…