Added Stripe guide to Stripe connect modal (#16178)

closes https://www.notion.so/ghost/Promote-Stripe-Guide-in-admin-a5740ce2afd7413bae7e1245cfc4d9ce

- Added a guide to Ghost Resources after successful connection with Stripe
- Updated modal layout
- Fixed bug where template condition was listening to wrong task descriptor and rendering a flash in between running and finished state

ghost/admin/.lint-todo

@@ -1138,3 +1138,7 @@ remove|ember-template-lint|no-triple-curlies|72|16|72|16|9197e9050977ef47965e1b6
 remove|ember-template-lint|no-invalid-interactive|93|36|93|36|fc4eb64cc0ad0cc9c500c7ef026e44649bc4778b|1662681600000|1673053200000|1678237200000|app/templates/offers.hbs
 remove|ember-template-lint|no-action|143|50|143|50|91a3281547c8446529685240c77aaccb5c7d69bd|1662681600000|1673053200000|1678237200000|app/components/gh-post-settings-menu.hbs
 remove|ember-template-lint|no-action|411|168|411|168|0145b67f0faef0aad141c6a4269c35c6ef8f0a47|1662681600000|1673053200000|1678237200000|app/components/gh-post-settings-menu.hbs
+remove|ember-template-lint|no-action|4|55|4|55|141d456b03124abca146e58e4ae15825fdd040bb|1662681600000|1673053200000|1678237200000|app/components/modal-stripe-connect.hbs
+remove|ember-template-lint|no-action|4|79|4|79|d465b362b15b90cf42a093e72895155f49cdf6f2|1662681600000|1673053200000|1678237200000|app/components/modal-stripe-connect.hbs
+remove|ember-template-lint|no-action|21|91|21|91|ebbd89a393bcec7f537f2104ace2a6b1941a19a7|1662681600000|1673053200000|1678237200000|app/components/modal-stripe-connect.hbs
+remove|ember-template-lint|no-action|22|12|22|12|d465b362b15b90cf42a093e72895155f49cdf6f2|1662681600000|1673053200000|1678237200000|app/components/modal-stripe-connect.hbs

ghost/admin/app/components/modal-stripe-connect.hbs

@@ -1,7 +1,7 @@
 <header class="modal-header" data-test-modal="webhook-form" {{will-destroy this.reset}}>
     <h1 data-test-text="title">Connect with Stripe</h1>
 </header>
-<button class="close" href title="Close" type="button" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
+<button class="close" href title="Close" type="button" {{on "click" this.closeModal}} {{on "mouseDown" (optional this.noop)}}>
     {{svg-jar "close"}}
 </button>
 
@@ -14,14 +14,3 @@
     />
 </div>
 </form>
-
-<div class="modal-footer">
-    {{#if (and this.membersUtils.isStripeEnabled this.settings.stripeConnectAccountId)}}
-        <button
-            class="gh-btn gh-btn-black" data-test-button="stripe-connect-ok" type="button" {{action "confirm"}}
-            {{action (optional this.noop) on="mouseDown"}}
-        >
-            <span>OK</span>
-        </button>
-    {{/if}}
-</div>

ghost/admin/app/components/settings/members/stripe-settings-form.hbs

@@ -55,15 +55,21 @@
 
     {{else}}
 
-        {{#if (and this.stripeConnectAccountId (not this.saveStripeSettings.isRunning))}}
+        {{#if (and this.stripeConnectAccountId (not this.saveStripeSettingsTask.isRunning))}}
+            <button type="button" class="gh-btn gh-btn-large gh-btn-stripe-disconnect" {{on "click" this.openDisconnectStripeModal}}><span>Disconnect</span></button>
             <div class="gh-stripe-connected-container">
-                {{svg-jar "check-circle-stroke" class="check-circle"}}
+                <div class="gh-logos-stripe-connect">
+                    <div class="gh-logo-squircle" style="background-image:url(assets/img/orb-squircle.png);"></div>
+                    <div class="gh-logo-squircle" style="background-image:url(assets/img/stripe.svg);"></div>
+                </div>
                 <h1>You are connected to Stripe</h1>
                 <div class="gh-stripe-connected-info">
-                    <p>Connected to <a href="https://dashboard.stripe.com/{{this.stripeConnectAccountId}}" target="_blank" rel="noopener noreferrer">{{this.stripeConnectAccountName}}</a></p>
+                    <div class="gh-stripe-site-title">
-                    {{#unless this.stripeConnectLivemode}}
+                        <p>Connected to <a href="https://dashboard.stripe.com/{{this.stripeConnectAccountId}}" target="_blank" rel="noopener noreferrer">{{this.stripeConnectAccountName}}</a></p>
-                        <div class="gh-members-connect-testmodelabel">Test mode</div>
+                        {{#unless this.stripeConnectLivemode}}
-                    {{/unless}}
+                            <div class="gh-members-connect-testmodelabel">Test mode</div>
+                        {{/unless}}
+                    </div>
 
                     {{#if this.hasActiveStripeSubscriptions}}
                     <span class="gh-stripe-error-hasactivesub">
@@ -71,7 +77,26 @@
                     </span>
                     {{/if}}
                 </div>
-                <button type="button" class="gh-btn gh-btn-stripe-disconnect" {{on "click" this.openDisconnectStripeModal}}><span>Disconnect</span></button>
+                <div class="gh-stripe-guide-container">
+                    <p>read next</p>
+                    <a class="gh-stripe-guide" href="https://ghost.org/resources/managing-your-stripe-account/&ref=admin" target="_blank" rel="noopener noreferrer">
+                        <div class="gh-stripe-guide-content">
+                            <div class="gh-stripe-guide-content-body">
+                                <h3>How to setup and manage your Stripe account</h3>
+                                <p>Learn how to configure your Stripe account to work with Ghost, from custom branding to payment receipt emails.</p>
+                            </div>
+                            <div class="gh-stripe-guide-content-footer">
+                                {{svg-jar "ghost-orb-pink"}}
+                                <h4>Ghost Resources</h4>
+                                <span>&middot;</span>
+                                <p>Kym Ellis</p>
+                            </div>
+                        </div>
+                        <div class="gh-stripe-guide-image">
+                            <img src="https://ghost.org/resources/content/images/2022/02/Stripe---Home.jpg" alt="Stripe guide on Ghost Resources"/>
+                        </div>
+                    </a>
+                </div>
             </div>
         {{else}}
             <div class="flex flex-column flex-row-l items-start justify-between">

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

@@ -2665,19 +2665,12 @@ p.theme-validation-details {
     max-width: 860px;
 }
 
-.fullscreen-modal-stripe-connected {
+.fullscreen-modal-stripe-connect:not(.fullscreen-modal-stripe-connected) .gh-main-section {
-    max-width: 440px;
-}
-
-.fullscreen-modal-stripe-connect .gh-main-section {
     margin: 0 0 -32px;
 }
 
-.fullscreen-modal-stripe-connected .gh-main-section {
+.fullscreen-modal-stripe-connect:not(.fullscreen-modal-stripe-connected) .gh-btn-stripe-disconnect,
-    margin-bottom: -20px;
+.fullscreen-modal-stripe-connect:not(.fullscreen-modal-stripe-connected) .gh-stripe-guide-container {
-}
-
-.fullscreen-modal-stripe-connect:not(.fullscreen-modal-stripe-connected) .modal-footer .gh-btn {
     display: none;
 }
 
@@ -2685,6 +2678,15 @@ p.theme-validation-details {
     display: none;
 }
 
+.fullscreen-modal-stripe-connected .modal-content {
+    background: linear-gradient(to top, #F6F6F6, #ffffff);
+    border-radius: 12px;
+}
+
+.fullscreen-modal-stripe-connected .gh-main-section {
+    margin-bottom: 0;
+}
+
 .gh-members-stripe-info-header {
     display: flex;
     justify-content: space-between;
@@ -2778,24 +2780,15 @@ p.theme-validation-details {
     display: flex;
     flex-direction: column;
     align-items: center;
-}
+    margin-top: 7vw;
-
-.gh-stripe-connected-container .check-circle {
-    width: 60px;
-    height: 60px;
-    color: var(--green);
-    margin-top: 20px;
-}
-
-.gh-stripe-connected-container .check-circle path {
-    stroke-width: 1px;
 }
 
 .gh-stripe-connected-container h1 {
-    font-size: 2.1rem;
+    font-size: 2.6rem;
     font-weight: 600;
+    text-align: center;
     letter-spacing: -.1px;
-    margin: 20px 0 4px;
+    margin: 20px 0 10px;
 }
 
 .gh-stripe-connected-info {
@@ -2803,16 +2796,31 @@ p.theme-validation-details {
     flex-direction: column;
     align-items: center;
     text-align: center;
-    margin-bottom: 32px;
+    margin-bottom: 5vw;
+}
+
+.gh-stripe-site-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .gh-stripe-connected-info p {
-    margin-bottom: 8px;
+    margin: 0 10px 0 0;
+    font-size: 1.8rem;
 }
 
 .gh-btn-stripe-disconnect {
-    align-self: flex-start;
+    position: absolute;
-    margin-bottom: -34px;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    margin: 0;
+}
+
+.fullscreen-modal-stripe-connect .modal-content .close {
+    top: 32px;
+    right: 32px;
 }
 
 .gh-stripe-error-hasactivesub {
@@ -2820,6 +2828,135 @@ p.theme-validation-details {
     color: var(--red);
 }
 
+.gh-stripe-guide-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.gh-stripe-guide-container > p {
+    text-transform: uppercase;
+    letter-spacing: .115em;
+    font-weight: 500;
+    margin-bottom: 20px;
+}
+
+.gh-logos-stripe-connect {
+    display: flex;
+}
+
+.gh-logo-squircle {
+    flex: 0 0 60px;
+    width: 60px;
+    height: 60px;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border-radius: 35%;
+}
+
+.gh-logo-squircle:first-of-type {
+    z-index: 101;
+}
+
+.gh-logo-squircle:nth-of-type(2) {
+    z-index: 102;
+    box-shadow: -1.5px 0 0 1.5px #fff;
+    margin-left: -3px;
+}
+
+.gh-stripe-guide {
+    display: flex;
+    width: 100%;
+    box-shadow: rgba(0,0,0,0.05) 0 14px 23px -18px;
+    color: var(--midgrey);
+    transition: all 0.2s ease-in-out;
+}
+
+.gh-stripe-guide:hover {
+    box-shadow: rgba(0,0,0,0.1) 0 14px 23px -18px;
+}
+
+.gh-stripe-guide-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-basis: 100%;
+    padding: 20px 15px;
+    overflow: hidden;
+    background-color: var(--white);
+    border-top: 1px;
+    border-bottom: 1px;
+    border-left: 1px;
+    border-right: 0;
+    border-style: solid;
+    border-color: var(--lightgrey-l2);
+    border-radius: 2px 0 0 2px;
+}
+
+.gh-stripe-guide-content-body {
+    display: flex;
+    flex-direction: column;
+}
+
+.gh-stripe-guide-content-body h3 {
+    font-size: 1.6rem;
+}
+
+.gh-stripe-guide-content-body p {
+    font-size: 1.3rem;
+}
+
+.gh-stripe-guide-content-footer {
+    display: flex;
+    align-items: center;
+}
+
+.gh-stripe-guide-content-footer svg {
+    width: 20px;
+    height: 20px;
+    flex: 0 0 20px;
+}
+
+.gh-stripe-guide-content-footer h4,
+.gh-stripe-guide-content-footer p {
+    margin: 0;
+}
+
+.gh-stripe-guide-content-footer h4 {
+    font-size: 1.4rem;
+    font-weight: 500;
+    margin-left: 5px;
+    margin-right: 6px;
+    letter-spacing: -0.02em;
+}
+
+.gh-stripe-guide-content-footer span {
+    margin-right: 6px;
+    font-size: 3.2rem;
+    color: var(--black);
+    line-height: .8em;
+}
+
+.gh-stripe-guide-image {
+    position: relative;
+    flex-grow: 1;
+    min-width: 33%;
+    align-items: center;
+}
+
+.gh-stripe-guide-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 0 2px 2px 0;
+}
+
 @media (max-width: 1080px) {
     .gh-settings-members-pricetrialcont {
         display: grid;
@@ -2850,6 +2987,41 @@ p.theme-validation-details {
     .gh-members-stripe-info {
         width: 100%;
     }
+
+    .gh-stripe-connected-container {
+        margin-top: 7rem;
+    }
+
+    .gh-stripe-connected-container h1 {
+        font-size: 2.4rem;
+    }
+
+    .gh-stripe-connected-info p {
+        font-size: 1.4rem;
+    }
+
+    .gh-stripe-guide-image {
+        display: none;
+    }
+
+    .gh-stripe-guide-content {
+        border-radius: 2px;
+        border: 1px solid var(--lightgrey-l2);
+    }
+}
+
+@media (max-width: 430px) {
+    .gh-stripe-site-title {
+        flex-direction: column;
+    }
+    .gh-members-connect-testmodelabel {
+        margin-top: 15px;
+    }
+    .gh-logo-squircle {
+        flex-basis: 40px;
+        width: 40px;
+        height: 40px;
+    }
 }
 
 .gh-setting-nossl {

ghost/admin/public/assets/img/stripe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400" xml:space="preserve"><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#635bff" d="M0 0h400v400H0z"/><path d="M184.4 155.5c0-9.4 7.7-13.1 20.5-13.1 18.4 0 41.6 5.6 60 15.5v-56.8C244.8 93.1 225 90 205 90c-49.1 0-81.7 25.6-81.7 68.4 0 66.7 91.9 56.1 91.9 84.9 0 11.1-9.7 14.7-23.2 14.7-20.1 0-45.7-8.2-66-19.3v57.5c22.5 9.7 45.2 13.8 66 13.8 50.3 0 84.9-24.9 84.9-68.2-.4-72-92.5-59.2-92.5-86.3z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"/></svg>