TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-23 22:11:09 +03:00
Code Issues Projects Releases Wiki Activity

Added Stripe guide to Stripe connect modal (#16178)

Browse Source 
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
This commit is contained in:
Aileen Booker 2023-01-24 18:55:16 +00:00 committed by GitHub
parent 3dc85b0397
commit e243b583f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 237 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ghost/admin/.lint-todo
View File

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

13
ghost/admin/app/components/modal-stripe-connect.hbs
View File

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

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

@ -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>
{{#unless this.stripeConnectLivemode}}
<div class="gh-members-connect-testmodelabel">Test mode</div>
{{/unless}}
<div class="gh-stripe-site-title">
<p>Connected to <a href="https://dashboard.stripe.com/{{this.stripeConnectAccountId}}" target="_blank" rel="noopener noreferrer">{{this.stripeConnectAccountName}}</a></p>
{{#unless this.stripeConnectLivemode}}
<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">

226
ghost/admin/app/styles/layouts/settings.css
View File

@ -2665,19 +2665,12 @@ p.theme-validation-details {
max-width: 860px;
}
.fullscreen-modal-stripe-connected {
max-width: 440px;
}
.fullscreen-modal-stripe-connect .gh-main-section {
.fullscreen-modal-stripe-connect:not(.fullscreen-modal-stripe-connected) .gh-main-section {
margin: 0 0 -32px;
}
.fullscreen-modal-stripe-connected .gh-main-section {
margin-bottom: -20px;
}
.fullscreen-modal-stripe-connect:not(.fullscreen-modal-stripe-connected) .modal-footer .gh-btn {
.fullscreen-modal-stripe-connect:not(.fullscreen-modal-stripe-connected) .gh-btn-stripe-disconnect,
.fullscreen-modal-stripe-connect:not(.fullscreen-modal-stripe-connected) .gh-stripe-guide-container {
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;
}
.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;
margin-top: 7vw;
}
.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;
margin-bottom: -34px;
position: absolute;
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 {

1
ghost/admin/public/assets/img/stripe.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 564 B