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:
Djordje Vlaisavljevic 2023-08-08 14:49:58 +01:00 committed by GitHub
parent 4c8179312d
commit df231b2459
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 38 additions and 12 deletions

View File

@ -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')
}];
}

View File

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

View File

@ -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);
}
}

View File

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

View File

@ -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')
});
}

View File

@ -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')
});
}

View File

@ -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')
});
}