Customizing Subscription Plugin pages

[pfaffman (Jay Pfaffman)]

I’m getting closer to having PfaffManager be a product. My MVP is to just have Discourse replace https://www.literatecomputing.com/discourse-installation-packages/ so that people can purchase an installation (as they do now through WordPress), which will kick off the installation in Discourse (working) where they can additionally get live updates on the installation process (working), and then also be able to click a button to kick off a rebuild (working) for some period of time.

I used a add_model_callback(GroupUser, :after_save) to see that when a user gets aded to the CreateServer group, it creates the server (in the model that my plugin adds) and removes them from the group (so that they could, theoretically, buy another server installation). I think that this technique could be used to make discourse-subscriptions a fairly general purpose payment system.

So now I’ve now got this:

A couple things that I see right now:

• the <h1> title and the button share the same discourse_subscriptions.subscribe.title–I’d like to have the <h1> say something like “Purchase an installation or service” for the header and something like “Pay Now” for the button.
• if the <h1> had a subscription-title class, then I could use CSS to hide the existing title and replace it with a ::before, which might solve the above problem.
• I’d like to add navigation to /pfaffmanager/servers somewhere on this page in a header or footer and I don’t see any way to do that. I tried adding something like {{~raw-plugin-outlet name="subscription-header-before"~}} to the s.hbs template, but it’s not that simple.

I think that it’s reasonable to wish for a bit more subscription-specific class stuff in the subscription plugin, but I’m still bad enough at CSS that I’m not exactly sure if I’m right or what it should look like.

Ah! Rather than wishing for plugin outlets in the subscription plugin, perhaps I should contrive to make my own template that still calls the stripe stuff from the subscription plugin? Would that make sense?

[justin (Justin DiRose)]

@pfaffman

• the <h1> title and the button share the same discourse_subscriptions.subscribe.title –I’d like to have the <h1> say something like “Purchase an installation or service” for the header and something like “Pay Now” for the button.
• if the <h1> had a subscription-title class, then I could use CSS to hide the existing title and replace it with a ::before , which might solve the above problem.

I’d accept a PR for these changes. They’re pretty simple.

@pfaffman

I’d like to add navigation to /pfaffmanager/servers somewhere on this page in a header or footer and I don’t see any way to do that. I tried adding something like {{~raw-plugin-outlet name="subscription-header-before"~}} to the s.hbs template, but it’s not that simple.

You should be able to add a {{plugin-outlet}} in that file. Would also accept a PR if there’s a reasonable case for it. Plugin outlets are lightweight enough. A raw plugin outlet won’t work though because it’s not a raw file.

[pfaffman (Jay Pfaffman)]

@justin

{{plugin-outlet}} in that file

Oh! So I can! I can!!!

@justin

A raw plugin outlet won’t work though because it’s not a raw file.

Doh!

OK, so something like

       <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>

And then I can do something like

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

Or you could even hide and replace pretty much all of those product blocks.

I may make sense of plugin outlets after all.

CSS changes

So just wrap the whole s.hbs template in a <div class="subscription">, and then you could do stuff like

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

Does that seem right? If there’s nothing really stupid here, then I think I’m on my way to being able to make a sensible PR.

[pfaffman (Jay Pfaffman)]

Hey @justin, does the above look pretty close?

I’m going to take another look at this soon and submit a PR.

[justin (Justin DiRose)]

Yeah I think that looks pretty close. Thanks Jay!

[pfaffman (Jay Pfaffman)]

Thanks. I’m hoping to “finish” this current thing and then see about adding those or similar plugin outlets.

And I think with those in place, a theme component could (with just a bit of fiddly stuff) add the per-subscription links that I want.