URL genérica para a página de faturamento do usuário em Javascript não funciona

Dev
1

Então, eu já sei que /my/billing/subscriptions é uma maneira de vincular o usuário atual ao seu próprio perfil de usuário, especificamente à seção de faturamento que vem com o Discourse Subscriptions. No entanto, isso não parece estar funcionando no meu código abaixo, com a expressão dentro do if. Em particular, estou tentando fazer com que um botão apareça apenas na página de faturamento do usuário. Na verdade, parece que não funciona para nenhuma URL no formato /my, seja faturamento, preferências, atividades ou qualquer outra coisa. Estou fazendo algo errado? O que devo usar? (Lembre-se de que isso só não está funcionando dentro do if. Caso contrário, usar /my tem funcionado bem.)

<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">
            Voltar para as configurações!
        </span>
    </a>
  {{/if}}
</script>
1 curtida
2

Isso não é porque os usuários nunca estão em URLs /my/*, já que elas são apenas um redirecionamento inteligente?

Por exemplo, /my/preferences me redirecionará para /u/falco/preferences, então eu nunca estarei na página /my/preferences para que o if no seu código seja acionado.

2 curtidas
3

Entendi, você está certo. Vejo por que não seria apropriado para um if, já que nunca seria verdadeiro. Então, o que posso fazer agora?

Tentei fazer, no if:

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

onde

const user = api.getCurrentUser(),

mas isso também não pareceu funcionar…

EDIT: Então, usando console.log, consegui descobrir que, em geral, essa abordagem funciona bem. Por exemplo, se eu apenas colocar o código

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

em um script, recebo de volta o desejado /u/Miles/billing/subscriptions.

No entanto, o problema ocorre quando tento colocar isso dentro de setupComponent(args, component) {}. Assim que faço isso, o console.log não mostra mais nada. Ainda não tenho certeza do que estou fazendo errado…

4

Você tem acesso ao objeto api no método setupComponent? Estou me perguntando se essa é a razão pela qual você está tendo problemas.

5

Eu pensei isso, porque já há o uso de api.onPageChange(url) sendo executado sem problemas. Note que estou adaptando o código de aqui, então parece ser realmente verdade que tenho acesso ao objeto api no método setupComponent.

Apenas para maior esclarecimento, aqui está o que consegui até agora:

Com o código

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

Obtenho a saída correta /u/Miles/billing/subscriptions no console. Mas quando faço,

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

não há nenhuma saída a ser encontrada…