Added a preview link in Admin for Tips & Donations (#17711)

closes https://github.com/TryGhost/Product/issues/3724

ghost/admin/app/components/modals/confirm-unsaved-changes.hbs

@@ -16,4 +16,4 @@
         <button class="gh-btn" data-test-stay-button type="button" {{on "click" (fn @close false)}}><span>Stay</span></button>
         <button class="gh-btn gh-btn-red" data-test-leave-button type="button" {{on "click" (fn @close true)}}><span>Leave</span></button>
     </div>
-</div>
+</div>

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

@@ -76,8 +76,8 @@
                     </div>
 
                     <GhFormGroup class="no-margin">
-                        <label for="tips-and-donations-link" class="fw6 mb1">Shareable link</label>
-                        <div class="gh-input-group">
+                        <label for="tips-and-donations-link" class="fw6 mb1">Shareable link — <a href="#" {{on "click" this.showPreview}}>Preview</a></label>
+                        <div class="gh-tips-and-donations-link-container">
                             <GhTextInput
                                 data-test-input="tips-and-donations-link"
                                 @id="gh-tips-and-donations-link"
@@ -86,12 +86,17 @@
                                 @value="{{this.siteUrl}}/#/portal/support"
                                 @placeholder="{{this.siteUrl}}/#/portal/support"
                             />
-                                <GhTaskButton
-                                data-test-button="tips-and-donations-copy-link"
-                                @buttonText="Copy link"
-                                @task={{this.copyTipsAndDonationsLink}}
-                                @successText="Copied"
-                                @class="gh-btn gh-btn-black gh-btn-icon" />
+                            <button
+                                type="button" {{on "click" (fn (perform this.copyTipsAndDonationsLink))}}
+                                class="gh-portal-setting-copy"
+                                data-test-button="copy-url-attr"
+                            >
+                                {{#if (and this.copyTipsAndDonationsLink.isRunning)}}
+                                    {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
+                                {{else}}
+                                    <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
+                                {{/if}}
+                            </button>
                         </div>
                     </GhFormGroup>
 

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

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import ConfirmUnsavedChangesModal from '../../components/modals/confirm-unsaved-changes';
 import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
 import envConfig from 'ghost-admin/config/environment';
 import {action} from '@ember/object';
@@ -22,6 +23,7 @@ export default class TipsAndDonations extends Component {
     @service settings;
     @service session;
     @service membersUtils;
+    @service modals;
 
     @inject config;
     @tracked tipsAndDonationsError = '';
@@ -42,16 +44,9 @@ export default class TipsAndDonations extends Component {
         return this.config.blogUrl;
     }
 
-    @task
-    *copyTipsAndDonationsLink() {
-        const link = document.getElementById('gh-tips-and-donations-link')?.value;
-
-        if (link) {
-            copyTextToClipboard(link);
-            yield timeout(this.isTesting ? 50 : 500);
-        }
-
-        return true;
+    get isConnectDisallowed() {
+        const siteUrl = this.config.blogUrl;
+        return envConfig.environment !== 'development' && !/^https:/.test(siteUrl);
     }
 
     @action
@@ -91,8 +86,34 @@ export default class TipsAndDonations extends Component {
         this.showStripeConnect = false;
     }
 
-    get isConnectDisallowed() {
-        const siteUrl = this.config.blogUrl;
-        return envConfig.environment !== 'development' && !/^https:/.test(siteUrl);
+    @action
+    async showPreview(event) {
+        event.preventDefault();
+
+        const preview = () => window.open(`${this.siteUrl}/#/portal/support`, '_blank');
+        const changedAttributes = this.settings.changedAttributes();
+
+        if (changedAttributes && Object.keys(changedAttributes).length > 0) {
+            const shouldClose = await this.modals.open(ConfirmUnsavedChangesModal);
+
+            if (shouldClose) {
+                this.settings.rollbackAttributes();
+                preview();
+            }
+        } else {
+            preview();
+        }
+    }
+
+    @task
+    *copyTipsAndDonationsLink() {
+        const link = document.getElementById('gh-tips-and-donations-link')?.value;
+
+        if (link) {
+            copyTextToClipboard(link);
+            yield timeout(this.isTesting ? 50 : 3000);
+        }
+
+        return true;
     }
 }

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

@@ -3208,6 +3208,21 @@ p.theme-validation-details {
     border-left: none !important;
 }
 
+.gh-tips-and-donations-link-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1.4rem;
+    height: 38px;
+    background: var(--whitegrey-l2);
+    border-radius: 4px;
+    border: 1px solid var(--whitegrey);
+    color: var(--darkgrey);
+    font-weight: 500;
+    width: 100%;
+}
+
 /* History log
 /* ---------------------------------------------------------- */
 .gh-history-filter-li {