Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Added loading screen while opening direct Stripe checkout

Browse source 
refs https://github.com/TryGhost/Team/issues/1184

When Portal tries to open Stripe checkout directly without any popup UI, since the time taken by checkout session to open can be few seconds it can cause invisible delay on the screen for user which is confusing. This change adds a loading popup while Stripe checkout session is loaded
This commit is contained in:
Rishabh 2021-11-02 19:35:29 +05:30
parent 399bbc0977
commit b2827b3d9f
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ghost/portal/src/App.js
View file

@ -580,6 +580,9 @@ export default class App extends React.Component {
if (!portalButton) {
const product = getProductFromId({site, productId: offer.tier.id});
const price = offer.cadence === 'month' ? product.monthlyPrice : product.yearlyPrice;
this.dispatchAction('openPopup', {
page: 'loading'
});
this.dispatchAction('checkoutPlan', {plan: price.id, offerId});
} else {
this.dispatchAction('openPopup', {
@ -611,7 +614,13 @@ export default class App extends React.Component {
&& pageQuery !== 'free'
) {
removePortalLinkFromUrl();
this.dispatchAction('signup', {plan: queryPrice?.id || priceId});
const plan = queryPrice?.id || priceId;
if (plan !== 'free') {
this.dispatchAction('openPopup', {
page: 'loading'
});
}
this.dispatchAction('signup', {plan});
}
}

6
ghost/portal/src/components/pages/LoadingPage.js
View file

@ -1,11 +1,11 @@
import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg';
const React = require('react');
export default class LoadingPage extends React.Component {
render() {
return (
<div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
<div style={{paddingLeft: '16px', paddingRight: '16px', paddingTop: '12px'}}>
Loading...
<div style={{paddingLeft: '16px', paddingRight: '16px', paddingTop: '12px', height: '50px'}}>
<LoaderIcon className={'gh-portal-loadingicon dark'} />
</div>
</div>
);