mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-24 06:35:49 +03:00
Tips & donations feedback tweaks (#17633)
refs https://github.com/TryGhost/Product/issues/3666, https://github.com/TryGhost/Product/issues/3667 - Updated copy in various places - Added logic for displaying "Connect Stripe" button instead of "Expand" if not already connected
This commit is contained in:
parent
4c8179312d
commit
df231b2459
@ -288,7 +288,7 @@ export default class KoenigLexicalEditor extends Component {
|
||||
if (this.feature.tipsAndDonations) {
|
||||
if (this.settings.donationsEnabled) {
|
||||
return [{
|
||||
label: 'Tips & donations',
|
||||
label: 'Tip or donation',
|
||||
value: this.config.getSiteUrl('/#/portal/support')
|
||||
}];
|
||||
}
|
||||
|
@ -1,12 +1,18 @@
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Tips & donations</h4>
|
||||
<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</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{on "click" (toggle-action "tipsAndDonationsOpen" this)}}>
|
||||
<span>{{if this.tipsAndDonationsOpen "Close" "Expand"}}</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}}
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.tipsAndDonationsOpen}}
|
||||
@ -14,7 +20,7 @@
|
||||
<GhFormGroup>
|
||||
<div class="flex items-center">
|
||||
<div class="gh-tips-and-donations-suggested-amount">
|
||||
<label for="tips-and-donations-amount" class="fw6 mb1">Suggested amount</label>
|
||||
<label for="tips-and-donations-amount" class="fw6 mb1">Suggest an amount</label>
|
||||
<div class="flex flex-row items-start">
|
||||
<GhFormGroup class="no-margin">
|
||||
<div class="percentage">
|
||||
@ -49,7 +55,7 @@
|
||||
</div>
|
||||
|
||||
<GhFormGroup class="no-margin">
|
||||
<label for="tips-and-donations-link" class="fw6 mb1">Your link</label>
|
||||
<label for="tips-and-donations-link" class="fw6 mb1">Shareable link</label>
|
||||
<div class="gh-input-group">
|
||||
<GhTextInput
|
||||
data-test-input="tips-and-donations-link"
|
||||
@ -68,7 +74,6 @@
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<p>Use this link to send your audience to your Stripe checkout page</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
|
@ -1,10 +1,12 @@
|
||||
import Component from '@glimmer/component';
|
||||
import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
|
||||
import envConfig from 'ghost-admin/config/environment';
|
||||
import {action} from '@ember/object';
|
||||
import {currencies} from 'ghost-admin/utils/currency';
|
||||
import {inject} from 'ghost-admin/decorators/inject';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task, timeout} from 'ember-concurrency';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const CURRENCIES = currencies.map((currency) => {
|
||||
return {
|
||||
@ -15,8 +17,11 @@ const CURRENCIES = currencies.map((currency) => {
|
||||
|
||||
export default class TipsAndDonations extends Component {
|
||||
@service settings;
|
||||
@service session;
|
||||
@service membersUtils;
|
||||
|
||||
@inject config;
|
||||
@tracked showStripeConnect = false;
|
||||
|
||||
get allCurrencies() {
|
||||
return CURRENCIES;
|
||||
@ -58,4 +63,20 @@ export default class TipsAndDonations extends Component {
|
||||
|
||||
this.settings.donationsSuggestedAmount = amountInCents;
|
||||
}
|
||||
|
||||
@action
|
||||
openStripeConnect() {
|
||||
this.stripeEnabledOnOpen = this.membersUtils.isStripeEnabled;
|
||||
this.showStripeConnect = true;
|
||||
}
|
||||
|
||||
@action
|
||||
async closeStripeConnect() {
|
||||
this.showStripeConnect = false;
|
||||
}
|
||||
|
||||
get isConnectDisallowed() {
|
||||
const siteUrl = this.config.blogUrl;
|
||||
return envConfig.environment !== 'development' && !/^https:/.test(siteUrl);
|
||||
}
|
||||
}
|
||||
|
@ -3185,7 +3185,7 @@ p.theme-validation-details {
|
||||
/* ---------------------------------------------------------- */
|
||||
.gh-tips-and-donations-suggested-amount {
|
||||
max-width: 200px;
|
||||
margin-right: 12px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.gh-tips-and-donations-suggested-amount .gh-input {
|
||||
|
@ -86,7 +86,7 @@ export default class KoenigCardButtonComponent extends Component {
|
||||
if (this.feature.tipsAndDonations) {
|
||||
if (this.settings.donationsEnabled) {
|
||||
urls.push({
|
||||
name: 'Tips & donations',
|
||||
name: 'Tip or donation',
|
||||
url: this.config.getSiteUrl('/#/portal/support')
|
||||
});
|
||||
}
|
||||
|
@ -110,7 +110,7 @@ export default class KoenigCardEmailCtaComponent extends Component {
|
||||
if (this.feature.tipsAndDonations) {
|
||||
if (this.settings.donationsEnabled) {
|
||||
urls.push({
|
||||
name: 'Tips & donations',
|
||||
name: 'Tip or donation',
|
||||
url: this.config.getSiteUrl('/#/portal/support')
|
||||
});
|
||||
}
|
||||
|
@ -99,7 +99,7 @@ export default class KoenigCardHeaderComponent extends Component {
|
||||
if (this.feature.tipsAndDonations) {
|
||||
if (this.settings.donationsEnabled) {
|
||||
urls.push({
|
||||
name: 'Tips & donations',
|
||||
name: 'Tip or donation',
|
||||
url: this.config.getSiteUrl('/#/portal/support')
|
||||
});
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user