initial payment buttons component
This commit is contained in:
parent
2c1eb9b22b
commit
2ce314fc8d
|
@ -9,7 +9,7 @@ export default Ember.Controller.extend({
|
|||
);
|
||||
const elements = this.get("stripe").elements();
|
||||
|
||||
this.set("cardElement", elements.create("card", { hidePostalCode: true }));
|
||||
this.set("cardElement", elements.create("card", { hidePostalCode: true, disabled: true }));
|
||||
},
|
||||
|
||||
actions: {
|
||||
|
|
|
@ -0,0 +1,20 @@
|
|||
|
||||
<button class="btn btn-primary btn-discourse-subscriptions-subscribe">
|
||||
Purchase a subscription
|
||||
</button>
|
||||
<button class="btn btn-discourse-subscriptions-subscribe">
|
||||
Make just one payment
|
||||
</button>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>Select subscription period</p>
|
||||
|
||||
<div id="subscribe-buttons">
|
||||
{{#each plans as plan}}
|
||||
<button class="btn btn-discourse-subscriptions-subscribe">
|
||||
<div>Monthly</div>
|
||||
AUD $5.00
|
||||
</button>
|
||||
{{/each}}
|
||||
</div>
|
|
@ -14,17 +14,19 @@
|
|||
{{i18n 'discourse_subscriptions.subscribe.card.title'}}
|
||||
</h2>
|
||||
|
||||
{{payment-options plans=model.plans}}
|
||||
|
||||
<hr>
|
||||
|
||||
{{subscribe-card cardElement=cardElement}}
|
||||
|
||||
{{#if loading}}
|
||||
{{loading-spinner}}
|
||||
{{else}}
|
||||
{{combo-box valueAttribute="id" content=model.plans value=model.product.plan}}
|
||||
|
||||
{{#d-button
|
||||
disabled=loading
|
||||
action="stripePaymentHandler"
|
||||
class="btn btn-primary btn-payment btn-discourse-patrons pull-right"}}
|
||||
class="btn btn-primary btn-payment"}}
|
||||
{{i18n 'discourse_subscriptions.subscribe.buttons.subscribe'}}
|
||||
{{/d-button}}
|
||||
{{/if}}
|
||||
|
|
|
@ -98,7 +98,3 @@ table.discourse-subscriptions-user-table {
|
|||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-discourse-patrons {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
@ -1,3 +1,20 @@
|
|||
|
||||
#subscribe-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.btn-discourse-subscriptions-subscribe {
|
||||
padding: 10px 20px;
|
||||
div {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-payment {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.StripeElement {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -12,7 +12,7 @@ gem 'stripe', '5.11.0'
|
|||
|
||||
register_asset "stylesheets/common/main.scss"
|
||||
register_asset "stylesheets/common/layout.scss"
|
||||
register_asset "stylesheets/common/stripe.scss"
|
||||
register_asset "stylesheets/common/subscribe.scss"
|
||||
register_asset "stylesheets/mobile/main.scss"
|
||||
register_svg_icon "credit-card" if respond_to?(:register_svg_icon)
|
||||
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
import componentTest from "helpers/component-test";
|
||||
|
||||
moduleForComponent("payment-options", { integration: true });
|
||||
|
||||
componentTest("Discourse Subscriptions has no plans", {
|
||||
template: `{{payment-options plans=plans}}`,
|
||||
|
||||
async test(assert) {
|
||||
this.set('plans', false);
|
||||
|
||||
assert.equal(
|
||||
find("#subscribe-buttons .btn-discourse-subscriptions-subscribe").length,
|
||||
0,
|
||||
"The plan buttons are not shown"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
componentTest("Discourse Subscriptions has content", {
|
||||
template: `{{payment-options plans=plans}}`,
|
||||
|
||||
async test(assert) {
|
||||
this.set('plans', [1, 2]);
|
||||
|
||||
assert.equal(
|
||||
find("#subscribe-buttons .btn-discourse-subscriptions-subscribe").length,
|
||||
2,
|
||||
"The plan buttons are shown"
|
||||
);
|
||||
assert.equal(
|
||||
find("#subscribe-buttons .btn-primary").length,
|
||||
0,
|
||||
"The none are selected"
|
||||
);
|
||||
}
|
||||
});
|
Loading…
Reference in New Issue