Fixed "connect to stripe" button in portal settings modal

no issue

- passed correct action for opening stripe connect modal through to portal settings modal
- updated `<GhTaskButton>` to accept a `@unlinkedTask=true/false` property
  - ember-concurrency will throw warnings about unsafe task cancellation if the initiator of a task is destroyed due to the actions of a task. Eg. the stripe connect button being replaced with the plan checkboxes because stripe connect details are added to settings
  - to avoid warnings ember-concurrency expects the task initiation to be marked as "unlinked" so that the task is allowed to continue even though the initiator is destroyed
- updated `<GhSiteIframe>` to force a refresh when the `@guid` property changes
  - we want the portal preview to fully reload so that it can fetch server data and see that stripe is connected
- updated portal settings modal to initiate a refresh when switching from "connect to stripe" to the plans checkboxes that happens automatically after a successful stripe connection

ghost/admin/app/components/gh-members-payments-setting.hbs

@@ -112,6 +112,7 @@
             <div class="gh-members-connect-savecontainer {{if this.settings.stripeConnectIntegrationToken "expanded"}}">
                 <GhTaskButton @buttonText="Save Stripe settings"
                             @task={{this.saveStripeSettings}}
+                            @unlinkedTask={{true}}
                             @successText="Saved"
                             @disabled={{is-empty this.settings.stripeConnectIntegrationToken}}
                             @runningText="Saving"

ghost/admin/app/components/gh-site-iframe.js

@@ -18,11 +18,19 @@ export default class GhSiteIframeComponent extends Component {
 
     @action
     resetSrcAttribute(iframe) {
-        // reset the src attribute each time the guid changes - allows for
-        // a click on the navigation item to reset back to the homepage
+        // reset the src attribute and force reload each time the guid changes
+        // - allows for a click on the navigation item to reset back to the homepage
+        //   or a portal preview modal to force a reload so it can fetch server-side data
         if (this.args.guid !== this._lastGuid) {
             if (iframe) {
-                iframe.src = this.srcUrl;
+                if (this.args.invisibleUntilLoaded) {
+                    this.isInvisible = true;
+                }
+                if (iframe.contentWindow.location.href !== this.srcUrl) {
+                    iframe.contentWindow.location = this.srcUrl;
+                } else {
+                    iframe.contentWindow.location.reload();
+                }
             }
         }
         this._lastGuid = this.args.guid;

ghost/admin/app/components/gh-task-button.js

@@ -40,6 +40,7 @@ const GhTaskButton = Component.extend({
     successClass: 'gh-btn-green',
     failureText: 'Retry',
     failureClass: 'gh-btn-red',
+    unlinkedTask: false,
 
     isTesting: undefined,
 
@@ -180,7 +181,16 @@ const GhTaskButton = Component.extend({
 
     _handleMainTask: task(function* () {
         this._resetButtonState.cancelAll();
-        yield this.task.perform(this.taskArgs);
+
+        // if the task button will be removed by the result of the task then
+        // it needs to be marked as unlinked to ensure it runs to completion
+        // and ember-concurrency doesn't output self-cancel warnings
+        if (this.unlinkedTask) {
+            yield this.task.unlinked().perform(this.taskArgs);
+        } else {
+            yield this.task.perform(this.taskArgs);
+        }
+
         const isTaskSuccess = this.get('task.last.isSuccessful') && this.get('task.last.value');
         if (this.autoReset && this.showSuccess && isTaskSuccess) {
             this._resetButtonState.perform();

ghost/admin/app/components/modal-portal-settings.hbs

@@ -33,7 +33,7 @@
                             </div>
                         </GhFormGroup>
                         {{#if this.membersUtils.isStripeEnabled}}
-                        <div>
+                        <div {{did-insert this.refreshAfterStripeConnected}}>
                             <div class="mb3">
                                 <h4 class="gh-portal-setting-title">Prices available at signup</h4>
                             </div>
@@ -82,7 +82,7 @@
                         </div>
                         {{else}}
                         <div class="gh-portal-setting-no-stripe">
-                            You need to <button class="gh-btn gh-btn-link black" {{action "openStripeSettings"}}>connect to Stripe</button> to take payments
+                            You need to <button class="gh-btn gh-btn-link black" {{on "click" (action "openStripeSettings")}}>connect to Stripe</button> to take payments
                         </div>
                         {{/if}}
                     </div>
@@ -247,6 +247,7 @@
                 <GhSiteIframe
                     class="gh-portal-siteiframe"
                     @src={{this.portalPreviewUrl}}
+                    @guid={{this.portalPreviewGuid}}
                     @invisibleUntilLoaded={{true}} />
             </div>
 

ghost/admin/app/components/modal-portal-settings.js

@@ -23,6 +23,7 @@ export default ModalComponent.extend({
     paidSignupRedirect: undefined,
     prices: null,
     isPreloading: true,
+    portalPreviewGuid: 'modal-portal-settings',
 
     confirm() {},
 
@@ -203,8 +204,8 @@ export default ModalComponent.extend({
         },
 
         openStripeSettings() {
+            this.isWaitingForStripeConnection = true;
             this.model.openStripeSettings();
-            this.closeModal();
         },
 
         leaveSettings() {
@@ -272,6 +273,15 @@ export default ModalComponent.extend({
         this.set('isPreloading', false);
     }),
 
+    refreshAfterStripeConnected: action(async function () {
+        if (this.isWaitingForStripeConnection) {
+            await this.finishPreloading();
+            this.notifyPropertyChange('page'); // force preview url to recompute
+            this.set('portalPreviewGuid', Date.now().valueOf()); // force preview re-render
+            this.isWaitingForStripeConnection = false;
+        }
+    }),
+
     copyLinkOrAttribute: task(function* () {
         copyTextToClipboard(this.showModalLinkOrAttribute);
         yield timeout(this.isTesting ? 50 : 3000);

ghost/admin/app/controllers/settings/membership.js

@@ -144,6 +144,11 @@ export default class MembersAccessController extends Controller {
         }
     }
 
+    @action
+    openStripeConnect() {
+        this.showStripeConnect = true;
+    }
+
     @action
     closeStripeConnect() {
         this.showStripeConnect = false;

ghost/admin/app/templates/settings/membership.hbs

@@ -68,7 +68,7 @@
         <div class="gh-setting-members-tierscontainer">
             <div class="gh-settings-members-tiersheader">
                 <h4 class="gh-main-section-header small bn">Membership tiers</h4>
-                <button type="button" class="gh-btn gh-btn-outline gh-btn-stripe-status {{if this.isConnectDisallowed "disabled"}} {{if this.settings.stripeConnectAccountId "connected" ""}}" {{action (toggle "showStripeConnect" this)}}>
+                <button type="button" class="gh-btn gh-btn-outline gh-btn-stripe-status {{if this.isConnectDisallowed "disabled"}} {{if this.settings.stripeConnectAccountId "connected" ""}}" {{on "click" this.openStripeConnect}}>
                     <span>
                         {{if this.settings.stripeConnectAccountId "Connected to Stripe" "Stripe not connected"}}
                     </span>
@@ -227,7 +227,7 @@
         <GhFullscreenModal @modal="portal-settings"
             @model={{hash
                 preloadTask=this.saveSettingsTask
-                openStripeSettings=this.openStripeSettings
+                openStripeSettings=this.openStripeConnect
             }}
             @close={{this.closePortalSettings}}
             @modifier="full-overlay portal-settings" />