Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Email preview: improve error state visually #39476

Merged
merged 6 commits into from
Oct 1, 2024
Merged

Email preview: improve error state visually #39476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ae44242
CSS formatting
simison Sep 20, 2024
090b848
Disable buttons when no post ID
simison Sep 20, 2024
5852dd1
Update error to be visually nicer
simison Sep 20, 2024
bbdc354
changelog
simison Sep 20, 2024
ffc8574
Fix refetching on error
simison Sep 20, 2024
4cabd01
Add link to support
simison Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/update-email-preview-error-styles
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: other

Email preview modal: visually improved error state
63 changes: 47 additions & 16 deletions projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useBreakpointMatch } from '@automattic/jetpack-components';
import { getRedirectUrl, useBreakpointMatch } from '@automattic/jetpack-components';
import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
import apiFetch from '@wordpress/api-fetch';
import {
Expand All @@ -13,12 +13,13 @@ import {
__experimentalToggleGroupControlOption as ToggleGroupControlOption, // eslint-disable-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, // eslint-disable-line @wordpress/no-unsafe-wp-apis
Spinner,
ExternalLink,
} from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { useState, useCallback, useEffect } from '@wordpress/element';
import { useState, useCallback, useEffect, createInterpolateElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { desktop, mobile, tablet, check, people, currencyDollar } from '@wordpress/icons';
import { desktop, mobile, tablet, check, people, currencyDollar, warning } from '@wordpress/icons';
import './email-preview.scss';
import { accessOptions } from '../../shared/memberships/constants';
import { useAccessLevel } from '../../shared/memberships/edit';
Expand Down Expand Up @@ -226,6 +227,8 @@ const PreviewControls = ( {

export function NewsletterPreviewModal( { isOpen, onClose, postId } ) {
const [ isLoading, setIsLoading ] = useState( true );
const [ isError, setError ] = useState( false );
const [ refetchedOnError, setRefetchedOnError ] = useState( false );
const [ previewCache, setPreviewCache ] = useState( {} );
const [ selectedAccess, setSelectedAccess ] = useState( accessOptions.subscribers.key );
const [ selectedDevice, setSelectedDevice ] = useState( 'desktop' );
Expand All @@ -238,6 +241,7 @@ export function NewsletterPreviewModal( { isOpen, onClose, postId } ) {
}

setIsLoading( true );
setError( false );

try {
const response = await apiFetch( {
Expand All @@ -253,19 +257,14 @@ export function NewsletterPreviewModal( { isOpen, onClose, postId } ) {
} else {
throw new Error( 'Invalid response format' );
}
} catch ( error ) {
setPreviewCache( prevCache => ( {
...prevCache,
[ accessLevel ]: `<html><body>${ __(
'Error loading preview',
'jetpack'
) }</body></html>`,
} ) );
} catch {
tracks.recordEvent( 'jetpack_newsletter_preview_modal_error' );
setError( true );
} finally {
setIsLoading( false );
}
},
[ postId ]
[ postId, tracks ]
);

useEffect( () => {
Expand Down Expand Up @@ -312,14 +311,46 @@ export function NewsletterPreviewModal( { isOpen, onClose, postId } ) {
justifyContent: 'center',
alignItems: 'center',
height: 'calc(100vh - 190px)',
backgroundColor: '#ddd',
backgroundColor: isError ? '#fff' : '#ddd',
paddingTop: selectedDevice !== 'desktop' ? '36px' : '0',
transition: 'padding 0.3s ease-in-out',
} }
>
{ isLoading ? (
<Spinner />
) : (
{ isLoading && <Spinner /> }
{ isError && (
<VStack
alignment="center"
aria-live="polite"
role="alert"
style={ { textAlign: 'center' } }
>
<Icon icon={ warning } />
<h3>{ __( 'Oops, something went wrong showing the preview…', 'jetpack' ) }</h3>
<Button
onClick={ () => {
setRefetchedOnError( true );
fetchPreview( selectedAccess );
} }
variant="primary"
>
{ __( 'Try again', 'jetpack' ) }
</Button>
{ refetchedOnError && (
<p>
{ createInterpolateElement(
__(
'If the issue persists, please <supportLink>contact support</supportLink>.',
'jetpack'
),
{
supportLink: <ExternalLink href={ getRedirectUrl( 'jetpack-support' ) } />,
}
) }
</p>
) }
</VStack>
) }
{ ! isLoading && ! isError && (
<iframe
srcDoc={ previewCache?.[ selectedAccess ] }
style={ {
Expand Down
14 changes: 7 additions & 7 deletions projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
@import "@automattic/color-studio/dist/color-variables";

.jetpack-newsletter-test-email-modal__email-sent {
color: $studio-jetpack-green-30;
svg {
fill: $studio-jetpack-green-30;
}
color: $studio-jetpack-green-30;
svg {
fill: $studio-jetpack-green-30;
}
}

.jetpack-newsletter-preview-modal {
h1 {
flex-shrink: 0;
}
h1 {
flex-shrink: 0;
}
}
8 changes: 6 additions & 2 deletions projects/plugins/jetpack/extensions/blocks/subscriptions/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,17 @@ const NewsletterMenu = () => {
) }
</p>
<HStack wrap={ true }>
<Button onClick={ openPreviewModal } variant="secondary" disabled={ isPublished }>
<Button
onClick={ openPreviewModal }
variant="secondary"
disabled={ isPublished || ! postId }
>
{ __( 'Preview email', 'jetpack' ) }
</Button>
<Button
onClick={ openTestEmailModal }
variant="secondary"
disabled={ isPublished }
disabled={ isPublished || ! postId }
>
{ __( 'Send test email', 'jetpack' ) }
</Button>
Expand Down
Loading