From 29a0617dc2df82829d3e5b8373d2c16e2fa612a1 Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Wed, 21 Jun 2023 19:44:57 -0300 Subject: [PATCH] Add Send Email Preview feature (#31021) --- .../jetpack/changelog/add-preview-email | 4 + .../email-preview-illustration.svg | 24 ++++ .../blocks/subscriptions/email-preview.js | 103 ++++++++++++++++++ .../blocks/subscriptions/email-preview.scss | 62 +++++++++++ .../extensions/blocks/subscriptions/index.js | 7 +- .../extensions/blocks/subscriptions/panel.js | 26 +++-- 6 files changed, 216 insertions(+), 10 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/add-preview-email create mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview-illustration.svg create mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js create mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss diff --git a/projects/plugins/jetpack/changelog/add-preview-email b/projects/plugins/jetpack/changelog/add-preview-email new file mode 100644 index 0000000000000..6c2770438271b --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-preview-email @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +enhancement Add Email Preview Feature diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview-illustration.svg b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview-illustration.svg new file mode 100644 index 0000000000000..c748a32d8c195 --- /dev/null +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview-illustration.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js new file mode 100644 index 0000000000000..c5d37fd93ee67 --- /dev/null +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js @@ -0,0 +1,103 @@ +import { useBreakpointMatch } from '@automattic/jetpack-components'; +import apiFetch from '@wordpress/api-fetch'; +import { + Button, + // eslint-disable-next-line wpcalypso/no-unsafe-wp-apis + __experimentalHStack as HStack, + // eslint-disable-next-line wpcalypso/no-unsafe-wp-apis + __experimentalVStack as VStack, + Modal, + TextControl, + Icon, +} from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; +import { useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import './email-preview.scss'; +import { check } from '@wordpress/icons'; +import illustration from './email-preview-illustration.svg'; + +export default function EmailPreview( { isModalOpen, closeModal } ) { + const [ emailSent, setEmailSent ] = useState( false ); + const [ emailSending, setEmailSending ] = useState( false ); + const [ errorMessage, setErrorMessage ] = useState( false ); + const postId = useSelect( select => select( 'core/editor' ).getCurrentPostId() ); + const [ isSmall ] = useBreakpointMatch( 'sm' ); + + const sendEmailPreview = () => { + setEmailSending( true ); + apiFetch( { + path: '/wpcom/v2/send-email-preview/', + method: 'POST', + data: { + id: postId, + }, + } ) + .then( () => { + setEmailSending( false ); + setEmailSent( true ); + } ) + .catch( e => { + setEmailSending( false ); + if ( e.message ) { + setErrorMessage( e.message ); + } else { + setErrorMessage( + __( 'Whoops, we have encountered an error. Please try again later.', 'jetpack' ) + ); + } + } ); + }; + + return ( + <> + { isModalOpen && ( + { + closeModal(); + setEmailSent( false ); + } } + > + + +

+ { __( 'Send a test email', 'jetpack' ) } +

+ { errorMessage && ( + { errorMessage } + ) } + { emailSent ? ( + + +
+ { __( 'Email sent successfully', 'jetpack' ) } +
+ + ) : ( + + + + + ) } + + { ! isSmall && ( + + ) } + + + ) } + + ); +} diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss new file mode 100644 index 0000000000000..517ae290acfa7 --- /dev/null +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss @@ -0,0 +1,62 @@ +@import "@automattic/color-studio/dist/color-variables"; + +.jetpack-email-preview { + @media ( min-width: 660px ) { + width: 646px; + } + + h1 { + margin-top: 10px; + } + + .components-modal__content { + margin-top: 52px; + margin-left: 20px; + margin-bottom: 10px; + } +} + +.jetpack-email-preview__img { + height: 110px; + padding-right: 30px; + padding-left: 80px; + margin-left: auto; +} + +.jetpack-email-preview__email-sent { + color: $studio-jetpack-green-30; + .jetpack-email-preview__sent_text { + font-size: 20px; + } +} + +.jetpack-email-preview__check { + fill: currentColor; +} + +.jetpack-email-preview__email { + + > div { + margin-bottom: 0; + } + + .components-text-control__input { + height: 44px; + background-color: $studio-gray-5; + color: $studio-gray; + min-width: 266px; + padding-left: 13px; + font-size: 14px; + } +} + +.jetpack-email-preview__main { + min-width: 462px; +} + +.jetpack-email-preview__button { + height: 44px; + width: 80px; + justify-content: center; + align-items: center; +} diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js index a5d29acf46d9c..8b796bc1e4995 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js @@ -7,7 +7,6 @@ import attributes from './attributes'; import deprecated from './deprecated'; import edit from './edit'; import SubscribePanels from './panel'; - export const name = 'subscriptions'; export const icon = ( @@ -95,5 +94,9 @@ export const settings = { }; export const pluginSettings = { - render: SubscribePanels, + render: () => ( + <> + + + ), }; diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js index 4612759120e7f..99b270aeaade3 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js @@ -21,6 +21,7 @@ import { external, Icon } from '@wordpress/icons'; import { store as membershipProductsStore } from '../../store/membership-products'; import { getSubscriberCounts } from './api'; import { META_NAME_FOR_POST_LEVEL_ACCESS_SETTINGS, accessOptions } from './constants'; +import EmailPreview from './email-preview'; import { Link, getReachForAccessLevelKey, @@ -118,6 +119,7 @@ function NewsletterPrePublishSettingsPanel( { paidSubscribers, isModuleActive, showMisconfigurationWarning, + showPreviewModal, } ) { const { tracks } = useAnalytics(); const { changeStatus, isLoadingModules, isChangingStatus } = useModuleStatus( name ); @@ -150,14 +152,19 @@ function NewsletterPrePublishSettingsPanel( { icon={ } > { isModuleActive && ( - + <> + + + ) } { shouldLoadSubscriptionPlaceholder && ( @@ -296,6 +303,7 @@ export default function SubscribePanels() { const [ emailSubscribers, setEmailSubscribers ] = useState( null ); const postType = useSelect( select => select( editorStore ).getCurrentPostType(), [] ); const [ postMeta = [], setPostMeta ] = useEntityProp( 'postType', postType, 'meta' ); + const [ isModalOpen, setIsModalOpen ] = useState( false ); // Set the accessLevel to "everybody" when one is not defined let accessLevel = @@ -359,6 +367,7 @@ export default function SubscribePanels() { paidSubscribers={ paidSubscribers } isModuleActive={ isModuleActive } showMisconfigurationWarning={ showMisconfigurationWarning } + showPreviewModal={ () => setIsModalOpen( true ) } /> + setIsModalOpen( false ) } /> ); }