From f5396a8383ab86b6dfd60400b8674f546cfb6055 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Tue, 1 Oct 2024 15:44:36 +0300 Subject: [PATCH] Email preview: improve error state visually (#39476) --- .../update-email-preview-error-styles | 4 ++ .../blocks/subscriptions/email-preview.js | 63 ++++++++++++++----- .../blocks/subscriptions/email-preview.scss | 14 ++--- .../extensions/blocks/subscriptions/menu.js | 8 ++- 4 files changed, 64 insertions(+), 25 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/update-email-preview-error-styles diff --git a/projects/plugins/jetpack/changelog/update-email-preview-error-styles b/projects/plugins/jetpack/changelog/update-email-preview-error-styles new file mode 100644 index 0000000000000..e97bcd728ea1f --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-email-preview-error-styles @@ -0,0 +1,4 @@ +Significance: minor +Type: other + +Email preview modal: visually improved error state diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js index d852046b60f9a..7243d87868f88 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js @@ -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 { @@ -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'; @@ -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' ); @@ -238,6 +241,7 @@ export function NewsletterPreviewModal( { isOpen, onClose, postId } ) { } setIsLoading( true ); + setError( false ); try { const response = await apiFetch( { @@ -253,19 +257,14 @@ export function NewsletterPreviewModal( { isOpen, onClose, postId } ) { } else { throw new Error( 'Invalid response format' ); } - } catch ( error ) { - setPreviewCache( prevCache => ( { - ...prevCache, - [ accessLevel ]: `${ __( - 'Error loading preview', - 'jetpack' - ) }`, - } ) ); + } catch { + tracks.recordEvent( 'jetpack_newsletter_preview_modal_error' ); + setError( true ); } finally { setIsLoading( false ); } }, - [ postId ] + [ postId, tracks ] ); useEffect( () => { @@ -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 ? ( - - ) : ( + { isLoading && } + { isError && ( + + +

{ __( 'Oops, something went wrong showing the preview…', 'jetpack' ) }

+ + { refetchedOnError && ( +

+ { createInterpolateElement( + __( + 'If the issue persists, please contact support.', + 'jetpack' + ), + { + supportLink: , + } + ) } +

+ ) } + + ) } + { ! isLoading && ! isError && (