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

ghost/admin/app/components/koenig-lexical-editor.js

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

ghost/admin/app/components/settings/tips-and-donations.hbs

@@ -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)}}>
+        {{#if this.membersUtils.isStripeEnabled}}
-            <span>{{if this.tipsAndDonationsOpen "Close" "Expand"}}</span>
+            <button type="button" class="gh-btn" {{on "click" (toggle-action "tipsAndDonationsOpen" this)}}>
-        </button>
+                <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}}

ghost/admin/app/components/settings/tips-and-donations.js

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

ghost/admin/app/styles/layouts/settings.css

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

ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.js

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

ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js

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

ghost/admin/lib/koenig-editor/addon/components/koenig-card-header.js

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