Personalizando páginas do plugin de assinatura

[pfaffman (Jay Pfaffman)]

Estou ficando mais perto de transformar o PfaffManager em um produto. Meu MVP consiste em fazer com que o Discourse substitua https://www.literatecomputing.com/discourse-installation-packages/, para que as pessoas possam comprar uma instalação (como fazem atualmente pelo WordPress), o que acionará a instalação no Discourse (funcionando), onde elas também poderão receber atualizações em tempo real sobre o processo de instalação (funcionando) e, além disso, clicar em um botão para iniciar uma reconstrução (funcionando) por um determinado período.

Utilizei um add_model_callback(GroupUser, :after_save) para verificar que, quando um usuário é adicionado ao grupo CreateServer, o servidor é criado (no modelo que meu plugin adiciona) e o usuário é removido do grupo (para que, teoricamente, possam comprar outra instalação de servidor). Acredito que essa técnica poderia ser usada para transformar o discourse-subscriptions em um sistema de pagamento bastante de propósito geral.

Então, agora tenho isso:

Algumas coisas que percebo agora:

• o título <h1> e o botão compartilham o mesmo discourse_subscriptions.subscribe.title — gostaria que o <h1> dissesse algo como “Comprar uma instalação ou serviço” para o cabeçalho e algo como “Pagar Agora” para o botão.
• se o <h1> tivesse uma classe subscription-title, eu poderia usar CSS para ocultar o título existente e substituí-lo por um ::before, o que poderia resolver o problema acima.
• gostaria de adicionar navegação para /pfaffmanager/servers em algum lugar desta página, no cabeçalho ou rodapé, e não vejo nenhuma maneira de fazer isso. Tentei adicionar algo como {{~raw-plugin-outlet name="subscription-header-before"~}} ao template s.hbs, mas não é tão simples assim.

Acho que é razoável desejar um pouco mais de classes específicas para assinaturas no plugin de assinaturas, mas ainda sou ruim o suficiente em CSS para não ter certeza se estou certo ou como isso deveria ficar.

Ah! Em vez de desejar saídas de plugin no plugin de assinaturas, talvez eu devesse criar meu próprio template que ainda chame as funcionalidades do Stripe do plugin de assinaturas? Isso faria sentido?

[justin (Justin DiRose)]

@pfaffman

• o título <h1> e o botão compartilham o mesmo discourse_subscriptions.subscribe.title – gostaria que o <h1> dissesse algo como “Comprar uma instalação ou serviço” para o cabeçalho e algo como “Pagar Agora” para o botão.
• se o <h1> tivesse uma classe subscription-title, eu poderia usar CSS para ocultar o título existente e substituí-lo por um ::before, o que poderia resolver o problema acima.

Eu aceitaria um PR para essas alterações. Elas são bem simples.

@pfaffman

Gostaria de adicionar navegação para /pfaffmanager/servers em algum lugar desta página, no cabeçalho ou rodapé, e não vejo nenhuma maneira de fazer isso. Tentei adicionar algo como {{~raw-plugin-outlet name="subscription-header-before"~}} ao template s.hbs, mas não é tão simples.

Você deve ser capaz de adicionar um {{plugin-outlet}} nesse arquivo. Também aceitaria um PR se houver um caso razoável para isso. Os outlets de plugin são leves o suficiente. No entanto, um raw plugin outlet não funcionará, pois não é um arquivo raw.

[pfaffman (Jay Pfaffman)]

@justin

{{plugin-outlet}} naquele arquivo

Ah! Então eu posso! Eu posso!!!

@justin

Um plugin outlet bruto não funcionará, pois não é um arquivo bruto.

Doh!

Certo, então algo como

       <div class="product-purchase">
          {{#if product.subscribed}}
            <span class="purchased">&#x2713; {{i18n 'discourse_subscriptions.subscribe.purchased'}}</span>
            {{#link-to "user.billing.subscriptions" currentUser.username class="billing-link"}}
              {{i18n 'discourse_subscriptions.subscribe.go_to_billing'}}
            {{/link-to}}
            {{plugin-outlet name="after-go-to-billing" args=(hash product=product)}}
          {{else}}
            {{#link-to "s.show" product.id disabled=product.subscribed class="btn btn-primary"}}
              {{i18n 'discourse_subscriptions.subscribe.title'}}
            {{/link-to}}
            {{plugin-outlet name="after-subscribe-title" args=(hash product=product)}}
          {{/if}}
        </div>

E então eu posso fazer algo como

<script type="text/x-handlebars" data-template-name="/connectors/after-go-to-billing/foobar">
    <div class="pfaffmanager-product"> talvez um link usando {{product.id}}</div>
</script>

Ou você poderia até mesmo ocultar e substituir praticamente todos esses blocos de produto.

Talvez eu finalmente venha a entender os plugin outlets.

Alterações de CSS

Então, basta envolver todo o template s.hbs em um <div class="subscription">, e então você poderia fazer coisas como

.subscription 
  {
    h1 {
    content: "Hello, world";
    background-color: yellow;
  }
}

Isso parece correto? Se não houver nada realmente estúpido aqui, então acho que estou no caminho certo para conseguir fazer um PR sensato.

[pfaffman (Jay Pfaffman)]

Oi @justin, o acima parece bem próximo?

Vou dar outra olhada nisso em breve e enviar um PR.

[justin (Justin DiRose)]

É, acho que parece bem próximo. Obrigado, Jay!

[pfaffman (Jay Pfaffman)]

Obrigado. Estou esperando “finalizar” essa coisa atual e depois ver sobre adicionar essas ou saídas de plugins semelhantes.

E acho que, com isso em vigor, um componente de tema poderia (com apenas um pouco de ajuste) adicionar os links por assinatura que eu quero.