mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-03 23:00:14 -05:00
Updated Tips & Donations success and error states (#17559)
refs https://github.com/TryGhost/Product/issues/3672, https://github.com/TryGhost/Product/issues/3673 - Updates design for success and error states of Tips & Donations checkout flow
This commit is contained in:
Djordje Vlaisavljevic
GitHub
parent
d42200d252
commit
172479c987
5 changed files with 113 additions and 6 deletions
|
|
@ -20,6 +20,8 @@ import {FeedbackPageStyles} from './pages/FeedbackPage';
|
|||
import EmailSuppressedPage from './pages/EmailSuppressedPage.css';
|
||||
import EmailSuppressionFAQ from './pages/EmailSuppressionFAQ.css';
|
||||
import EmailReceivingFAQ from './pages/EmailReceivingFAQ.css';
|
||||
import {TipsAndDonationsSuccessStyle} from './pages/SupportSuccess';
|
||||
import {TipsAndDonationsErrorStyle} from './pages/SupportError';
|
||||
|
||||
// Global styles
|
||||
const FrameStyles = `
|
||||
|
|
@ -1223,6 +1225,8 @@ export function getFrameStyles({site}) {
|
|||
FeedbackPageStyles +
|
||||
EmailSuppressedPage +
|
||||
EmailSuppressionFAQ +
|
||||
EmailReceivingFAQ;
|
||||
EmailReceivingFAQ +
|
||||
TipsAndDonationsSuccessStyle +
|
||||
TipsAndDonationsErrorStyle;
|
||||
return FrameStyle;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,58 @@
|
|||
import {useContext} from 'react';
|
||||
import AppContext from '../../AppContext';
|
||||
import CloseButton from '../common/CloseButton';
|
||||
import ActionButton from '../common/ActionButton';
|
||||
import {ReactComponent as WarningIcon} from '../../images/icons/warning-outline.svg';
|
||||
|
||||
export const TipsAndDonationsErrorStyle = `
|
||||
.gh-portal-tips-and-donations .gh-tips-and-donations-icon-error {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
width: 48px;
|
||||
margin: 0 auto;
|
||||
color: #f50b23;
|
||||
}
|
||||
|
||||
.gh-portal-tips-donations .gh-tips-donations-icon.gh-feedback-icon-error {
|
||||
color: #f50b23;
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
.gh-portal-tips-and-donations .gh-portal-text-center {
|
||||
padding: 16px 32px 12px;
|
||||
}
|
||||
`;
|
||||
|
||||
const SupportError = ({error}) => {
|
||||
const errorTitle = 'Sorry, that didn’t work.';
|
||||
const errorMessage = error || 'There was an error processing your payment. Please try again.';
|
||||
const buttonLabel = 'Retry';
|
||||
const {brandColor} = useContext(AppContext);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{errorMessage}
|
||||
<div className='gh-portal-content gh-portal-tips-and-donations'>
|
||||
<CloseButton />
|
||||
|
||||
<div className="gh-tips-and-donations-icon-error">
|
||||
<WarningIcon />
|
||||
</div>
|
||||
<h1 className="gh-portal-main-title">{errorTitle}</h1>
|
||||
<p className="gh-portal-text-center">{errorMessage}</p>
|
||||
<ActionButton
|
||||
style={{width: '100%'}}
|
||||
retry={true}
|
||||
// onClick = {() => onAction('closePopup')}
|
||||
disabled={false}
|
||||
brandColor={brandColor}
|
||||
// brandColor='#000000'
|
||||
label={buttonLabel}
|
||||
isDestructive={true}
|
||||
isRunning={false}
|
||||
tabindex='3'
|
||||
classes={'sticky bottom'}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupportError;
|
||||
export default SupportError;
|
||||
|
|
@ -1,8 +1,50 @@
|
|||
import {useContext} from 'react';
|
||||
import AppContext from '../../AppContext';
|
||||
import {ReactComponent as ConfettiIcon} from '../../images/icons/confetti.svg';
|
||||
import CloseButton from '../common/CloseButton';
|
||||
import ActionButton from '../common/ActionButton';
|
||||
|
||||
export const TipsAndDonationsSuccessStyle = `
|
||||
.gh-portal-tips-and-donations .gh-tips-and-donations-icon-success {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
color: var(--brandcolor);
|
||||
width: 48px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gh-portal-tips-and-donations .gh-portal-text-center {
|
||||
padding: 16px 32px 12px;
|
||||
}
|
||||
`;
|
||||
|
||||
const SupportSuccess = () => {
|
||||
const message = 'Thank you for your support!';
|
||||
const {onAction, brandColor} = useContext(AppContext);
|
||||
const successTitle = 'Thank you!';
|
||||
const successDescription = 'Your support means a lot.';
|
||||
const buttonLabel = 'Close';
|
||||
|
||||
return (
|
||||
<div>{message}</div>
|
||||
<div className='gh-portal-content gh-portal-tips-and-donations'>
|
||||
<CloseButton />
|
||||
|
||||
<div className="gh-tips-and-donations-icon-success">
|
||||
<ConfettiIcon />
|
||||
</div>
|
||||
<h1 className="gh-portal-main-title">{successTitle}</h1>
|
||||
<p className="gh-portal-text-center">{successDescription}</p>
|
||||
<ActionButton
|
||||
style={{width: '100%'}}
|
||||
retry={false}
|
||||
onClick = {() => onAction('closePopup')}
|
||||
disabled={false}
|
||||
brandColor={brandColor}
|
||||
label={buttonLabel}
|
||||
isRunning={false}
|
||||
tabindex='3'
|
||||
classes={'sticky bottom'}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
10
apps/portal/src/images/icons/confetti.svg
Normal file
10
apps/portal/src/images/icons/confetti.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<title>confetti</title>
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
|
||||
</style>
|
||||
</defs>
|
||||
<ellipse class="cls-1" cx="11.531" cy="12.469" rx="2.625" ry="5.25" transform="rotate(-45 11.531 12.47)"/>
|
||||
<path class="cls-1" d="M7.4 9.7.888 21.121a1.5 1.5 0 0 0 1.991 1.991L14.3 16.605M15.773 7.7a.375.375 0 0 1 0 .531m-.53-.531a.375.375 0 0 1 .53 0m-.53.527a.377.377 0 0 1 0-.531m.53.531a.375.375 0 0 1-.53 0m4.773-4.773a.374.374 0 0 1 0 .53m-.53-.53a.374.374 0 0 1 .53 0m-.53.53a.374.374 0 0 1 0-.53m.53.53a.375.375 0 0 1-.53 0m.53 10.076a.375.375 0 0 1 0 .531m-.53-.531a.375.375 0 0 1 .53 0m-.53.531a.375.375 0 0 1 0-.531m.53.531a.375.375 0 0 1-.53 0M8.349 4.514a.377.377 0 0 1 0 .531m-.53-.531a.375.375 0 0 1 .53 0m-.53.531a.375.375 0 0 1 0-.531m.53.531a.375.375 0 0 1-.53 0M12.857.75a13.836 13.836 0 0 1-.531 5.62m4.243-4.242-.53 2.651m7.211 6.364a13.836 13.836 0 0 0-5.62.531m4.242-4.243-2.651.53"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
4
apps/portal/src/images/icons/warning-outline.svg
Normal file
4
apps/portal/src/images/icons/warning-outline.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<title>warning-stroke</title>
|
||||
<path d="M13.313 2.275a1.5 1.5 0 0 0-2.626 0l-9.75 18A1.5 1.5 0 0 0 2.25 22.5h19.5a1.5 1.5 0 0 0 1.313-2.225zM12 18a.375.375 0 0 1 .375.375m-.75 0A.375.375 0 0 1 12 18m0 .75a.375.375 0 0 1-.375-.375m.75 0a.375.375 0 0 1-.375.375M12 15V8.25" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 444 B |
Loading…
Add table
Reference in a new issue