mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-08 02:52:39 -05:00
Improved how Stripe connect buttons are shown (#17697)
refs https://github.com/TryGhost/Product/issues/3666 - Improves the way Connect with Stripe buttons are shown in Membership settings
This commit is contained in:
Djordje Vlaisavljevic
GitHub
parent
b2fb38ea52
commit
99761242da
3 changed files with 85 additions and 24 deletions
|
|
@ -2,16 +2,37 @@
|
|||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Tips or donations</h4>
|
||||
<p class="gh-expandable-description">Give your audience a one-time way to support your work, no membership required</p>
|
||||
{{#if (feature "tipsAndDonations")}}
|
||||
<p class="gh-expandable-description">Give your audience a one-time way to support your work, no membership required.
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
{{else}}
|
||||
<button type="button" {{on "click" this.openStripeConnect}} class="gh-stripe-connect-link">Connect with Stripe</button>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{else}}
|
||||
<p class="gh-expandable-description">Give your audience a one-time way to support your work, no membership required</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
<button type="button" class="gh-btn" {{on "click" (toggle-action "tipsAndDonationsOpen" this)}}>
|
||||
<span>{{if this.tipsAndDonationsOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
{{#if (feature "tipsAndDonations")}}
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
<button type="button" class="gh-btn" {{on "click" (toggle-action "tipsAndDonationsOpen" this)}}>
|
||||
<span>{{if this.tipsAndDonationsOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn" disabled={{true}} {{on "click" (toggle-action "tipsAndDonationsOpen" this)}}>
|
||||
<span>{{if this.tipsAndDonationsOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<button type="button" class="stripe-connect {{if (or (not this.session.user.isAdmin) this.isConnectDisallowed) "disabled"}}" {{on "click" this.openStripeConnect}}>
|
||||
<span></span>
|
||||
</button>
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
<button type="button" class="gh-btn" {{on "click" (toggle-action "tipsAndDonationsOpen" this)}}>
|
||||
<span>{{if this.tipsAndDonationsOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="stripe-connect {{if (or (not this.session.user.isAdmin) this.isConnectDisallowed) "disabled"}}" {{on "click" this.openStripeConnect}}>
|
||||
<span></span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
|
|
|
|||
|
|
@ -2519,6 +2519,11 @@ p.theme-validation-details {
|
|||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.gh-stripe-connect-link {
|
||||
color:#635bff;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.gh-setting-members-portal-mock {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -79,16 +79,35 @@
|
|||
<div class="gh-settings-members-tiersheader">
|
||||
<h4 class="gh-main-section-header small bn">Membership tiers</h4>
|
||||
{{#if this.session.user.isAdmin}}
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn gh-btn-outline gh-btn-stripe-status {{if this.isConnectDisallowed "disabled"}} {{if this.membersUtils.isStripeEnabled "connected" ""}}"
|
||||
{{on "click" this.openStripeConnect}}
|
||||
disabled={{and (eq this.settings.membersSignupAccess "none") (not this.membersUtils.isStripeEnabled)}}
|
||||
>
|
||||
<span>
|
||||
{{if this.membersUtils.isStripeEnabled "Connected to Stripe" "Stripe not connected"}}
|
||||
</span>
|
||||
</button>
|
||||
{{#if (feature "tipsAndDonations")}}
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn gh-btn-outline gh-btn-stripe-status {{if this.isConnectDisallowed "disabled"}} {{if this.membersUtils.isStripeEnabled "connected" ""}}"
|
||||
{{on "click" this.openStripeConnect}}
|
||||
disabled={{and (eq this.settings.membersSignupAccess "none") (not this.membersUtils.isStripeEnabled)}}
|
||||
>
|
||||
<span>
|
||||
Connected to Stripe
|
||||
</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="stripe-connect mb2 {{if (or (not this.session.user.isAdmin) this.isConnectDisallowed) "disabled"}}" {{on "click" this.openStripeConnect}}>
|
||||
<span></span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn gh-btn-outline gh-btn-stripe-status {{if this.isConnectDisallowed "disabled"}} {{if this.membersUtils.isStripeEnabled "connected" ""}}"
|
||||
{{on "click" this.openStripeConnect}}
|
||||
disabled={{and (eq this.settings.membersSignupAccess "none") (not this.membersUtils.isStripeEnabled)}}
|
||||
>
|
||||
<span>
|
||||
{{if this.membersUtils.isStripeEnabled "Connected to Stripe" "Stripe not connected"}}
|
||||
</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<section class="gh-expandable gh-expendable-free-membership">
|
||||
|
|
@ -129,15 +148,31 @@
|
|||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Premium</h4>
|
||||
<p class="gh-expandable-description">Set prices and paid member sign up settings</p>
|
||||
{{#if (feature "tipsAndDonations")}}
|
||||
<p class="gh-expandable-description">Set prices and paid member sign up settings.
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
{{else}}
|
||||
<button type="button" {{on "click" this.openStripeConnect}} class="gh-stripe-connect-link">Connect with Stripe</button>
|
||||
{{/if}}</p>
|
||||
{{else}}
|
||||
<p class="gh-expandable-description">Set prices and paid member sign up settings</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
<button type="button" class="gh-btn" {{on "click" (toggle "paidOpen" this)}} disabled={{eq this.settings.membersSignupAccess "none"}} data-test-toggle-pub-info><span>{{if this.paidOpen "Close" "Expand"}}</span></button>
|
||||
{{#if (feature "tipsAndDonations")}}
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
<button type="button" class="gh-btn" {{on "click" (toggle "paidOpen" this)}} disabled={{eq this.settings.membersSignupAccess "none"}} data-test-toggle-pub-info><span>{{if this.paidOpen "Close" "Expand"}}</span></button>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn" {{on "click" (toggle "paidOpen" this)}} disabled={{true}} data-test-toggle-pub-info><span>{{if this.paidOpen "Close" "Expand"}}</span></button>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<button type="button" class="stripe-connect {{if (or (not this.session.user.isAdmin) this.isConnectDisallowed) "disabled"}}" {{on "click" this.openStripeConnect}}>
|
||||
<span></span>
|
||||
</button>
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
<button type="button" class="gh-btn" {{on "click" (toggle "paidOpen" this)}} disabled={{eq this.settings.membersSignupAccess "none"}} data-test-toggle-pub-info><span>{{if this.paidOpen "Close" "Expand"}}</span></button>
|
||||
{{else}}
|
||||
<button type="button" class="stripe-connect {{if (or (not this.session.user.isAdmin) this.isConnectDisallowed) "disabled"}}" {{on "click" this.openStripeConnect}}>
|
||||
<span></span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if this.isConnectDisallowed}}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue