Skip to content

Commit

Permalink
Newsletter: Plugin: Refactor: Use core components as much as possible (…
Browse files Browse the repository at this point in the history 
…#38913)
  • Loading branch information
@lezama
lezama authored Aug 16, 2024
1 parent 131c3a3 commit a2c999c
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 199 deletions.
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/update-newsletter-plugin-3
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: other

just refactoring code
215 changes: 88 additions & 127 deletions projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,161 +6,122 @@ import {
__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
__experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
Modal,
TextControl,
__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
Icon,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControl as ToggleGroupControl,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
__experimentalToggleGroupControl as ToggleGroupControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControlOption as ToggleGroupControlOption, // eslint-disable-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, // eslint-disable-line @wordpress/no-unsafe-wp-apis
Spinner,
} from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { useState } from '@wordpress/element';
import { useState, useCallback, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { desktop, mobile, tablet, check, people, currencyDollar } from '@wordpress/icons';
import './email-preview.scss';
import { useCallback, useEffect } from 'react';
import { accessOptions } from '../../shared/memberships/constants';
import { useAccessLevel } from '../../shared/memberships/edit';
import illustration from './email-preview-illustration.svg';
import { SendIcon } from './icons';

export function EmailPreview( { isModalOpen, closeModal } ) {
const [ emailSent, setEmailSent ] = useState( false );
const [ emailSending, setEmailSending ] = useState( false );
export function NewsletterTestEmailModal( { isOpen, onClose } ) {
const [ isEmailSent, setIsEmailSent ] = useState( false );
const [ isEmailSending, setIsEmailSending ] = useState( false );
const [ errorMessage, setErrorMessage ] = useState( false );
const postId = useSelect( select => select( 'core/editor' ).getCurrentPostId() );
const { __unstableSaveForPreview } = useDispatch( editorStore );
const [ isSmall ] = useBreakpointMatch( 'sm' );
const { tracks } = useAnalytics();

const sendEmailPreview = async () => {
tracks.recordEvent( 'jetpack_send_email_preview', {
post_id: postId,
} );

setEmailSending( true );

// Save post revision so that we send what they see in the editor, and not what previous draft/revision might've saved
// Introduced at GB 16.3 at https://github.com/WordPress/gutenberg/pull/44971
const sendTestEmail = async () => {
tracks.recordEvent( 'jetpack_send_email_preview', { post_id: postId } );
setIsEmailSending( true );
await __unstableSaveForPreview();

apiFetch( {
path: '/wpcom/v2/send-email-preview/',
method: 'POST',
data: {
id: postId,
},
data: { id: postId },
} )
.then( () => {
setEmailSending( false );
setEmailSent( true );
setIsEmailSending( false );
setIsEmailSent( true );
} )
.catch( e => {
setEmailSending( false );
if ( e.message ) {
setErrorMessage( e.message );
} else {
setErrorMessage(
setIsEmailSending( false );
setErrorMessage(
e.message ||
__( 'Whoops, we have encountered an error. Please try again later.', 'jetpack' )
);
}
);
} );
};

if ( ! isOpen ) {
return null;
}

return (
<>
{ isModalOpen && (
<Modal
className="jetpack-email-preview"
onRequestClose={ () => {
closeModal();
setEmailSent( false );
} }
>
<HStack alignment="topLeft">
<VStack className="jetpack-email-preview__main" alignment="topLeft">
<h1 className="jetpack-email-preview__title">
{ __( 'Send a test email', 'jetpack' ) }
</h1>
{ errorMessage && (
<HStack className="jetpack-email-preview__email-sent">{ errorMessage }</HStack>
) }
{ emailSent ? (
<HStack className="jetpack-email-preview__email-sent">
<Icon className="jetpack-email-preview__check" icon={ check } size={ 28 } />
<div className="jetpack-email-preview__sent_text">
{ __( 'Email sent successfully', 'jetpack' ) }
</div>
</HStack>
) : (
<HStack>
<TextControl
className="jetpack-email-preview__email"
value={ window?.Jetpack_Editor_Initial_State?.tracksUserData?.email }
disabled
/>
<Button
className="jetpack-email-preview__button"
variant="primary"
onClick={ sendEmailPreview }
isBusy={ emailSending }
>
{ __( 'Send', 'jetpack' ) }
</Button>
</HStack>
) }
</VStack>
{ ! isSmall && (
<img className="jetpack-email-preview__img" src={ illustration } alt="" />
) }
<Modal
onRequestClose={ () => {
onClose();
setIsEmailSent( false );
} }
title={ __( 'Send a test email', 'jetpack' ) }
size={ 'medium' }
>
<VStack>
{ errorMessage && <p>{ errorMessage } </p> }
{ isEmailSent ? (
<HStack alignment="left" className="jetpack-newsletter-test-email-modal__email-sent">
<Icon icon={ check } size={ 28 } />
<p>{ __( 'Email sent successfully', 'jetpack' ) }</p>
</HStack>
</Modal>
) }
</>
) : (
<>
<p>
{ __(
'This will send you an email, allowing you to see exactly what your subscribers receive in their inboxes.',
'jetpack'
) }
</p>
<HStack wrap={ true }>
<InputControl
value={ window?.Jetpack_Editor_Initial_State?.tracksUserData?.email }
disabled
__next40pxDefaultSize={ true }
size="__unstable-large"
/>
<Button
variant="primary"
onClick={ sendTestEmail }
isBusy={ isEmailSending }
__next40pxDefaultSize={ true }
>
{ __( 'Send', 'jetpack' ) }
<Icon icon={ SendIcon } />
</Button>
</HStack>
</>
) }
</VStack>
</Modal>
);
}

const devices = [
{
name: 'desktop',
icon: desktop,
label: __( 'Desktop', 'jetpack' ),
width: '100%',
size: 'lg',
},
{
name: 'tablet',
icon: tablet,
label: __( 'Tablet', 'jetpack' ),
width: '768px',
size: 'md',
},
{
name: 'mobile',
icon: mobile,
label: __( 'Mobile', 'jetpack' ),
width: '360px',
size: 'sm',
},
const previewDevices = [
{ name: 'desktop', icon: desktop, label: __( 'Desktop', 'jetpack' ), width: '100%', size: 'lg' },
{ name: 'tablet', icon: tablet, label: __( 'Tablet', 'jetpack' ), width: '768px', size: 'md' },
{ name: 'mobile', icon: mobile, label: __( 'Mobile', 'jetpack' ), width: '360px', size: 'sm' },
];

const DevicePicker = ( { selectedDevice, setSelectedDevice } ) => {
const PreviewDeviceSelector = ( { selectedDevice, setSelectedDevice } ) => {
const [ isMedium ] = useBreakpointMatch( 'md' );
const [ isSmall ] = useBreakpointMatch( 'sm' );

if ( isSmall ) {
return null;
}

const getAvailableDevices = () => {
if ( isMedium ) {
return devices.filter( device => device.size !== 'lg' );
}
return devices;
};
const getAvailableDevices = () =>
isMedium ? previewDevices.filter( device => device.size !== 'lg' ) : previewDevices;

return (
<ToggleGroupControl
Expand All @@ -181,19 +142,15 @@ const DevicePicker = ( { selectedDevice, setSelectedDevice } ) => {
);
};

const AccessPicker = ( { selectedAccess, setSelectedAccess } ) => {
const PreviewAccessSelector = ( { selectedAccess, setSelectedAccess } ) => {
const [ isSmall ] = useBreakpointMatch( 'sm' );
const postType = useSelect( select => select( editorStore ).getCurrentPostType(), [] );
const accessLevel = useAccessLevel( postType );

const isPaidOptionDisabled = ! accessLevel || accessLevel !== accessOptions.paid_subscribers.key;

const accessOptionsList = [
{
label: accessOptions.subscribers.label,
value: accessOptions.subscribers.key,
icon: people,
},
{ label: accessOptions.subscribers.label, value: accessOptions.subscribers.key, icon: people },
{
label: accessOptions.paid_subscribers.label,
value: accessOptions.paid_subscribers.key,
Expand Down Expand Up @@ -241,7 +198,7 @@ const AccessPicker = ( { selectedAccess, setSelectedAccess } ) => {
);
};

const HeaderActions = ( {
const PreviewControls = ( {
selectedAccess,
setSelectedAccess,
selectedDevice,
Expand All @@ -251,13 +208,19 @@ const HeaderActions = ( {

return (
<HStack alignment="center" spacing={ isSmall ? 1 : 6 }>
<DevicePicker selectedDevice={ selectedDevice } setSelectedDevice={ setSelectedDevice } />
<AccessPicker selectedAccess={ selectedAccess } setSelectedAccess={ setSelectedAccess } />
<PreviewDeviceSelector
selectedDevice={ selectedDevice }
setSelectedDevice={ setSelectedDevice }
/>
<PreviewAccessSelector
selectedAccess={ selectedAccess }
setSelectedAccess={ setSelectedAccess }
/>
</HStack>
);
};

export function PreviewModal( { isOpen, onClose, postId } ) {
export function NewsletterPreviewModal( { isOpen, onClose, postId } ) {
const [ isLoading, setIsLoading ] = useState( true );
const [ previewCache, setPreviewCache ] = useState( {} );
const [ selectedAccess, setSelectedAccess ] = useState( accessOptions.subscribers.key );
Expand Down Expand Up @@ -308,7 +271,7 @@ export function PreviewModal( { isOpen, onClose, postId } ) {
}
}, [ isOpen, selectedAccess, fetchPreview, previewCache ] );

const deviceWidth = devices.find( device => device.name === selectedDevice ).width;
const deviceWidth = previewDevices.find( device => device.name === selectedDevice ).width;

return (
isOpen && (
Expand All @@ -320,14 +283,14 @@ export function PreviewModal( { isOpen, onClose, postId } ) {
setPreviewCache( {} );
} }
headerActions={
<HeaderActions
<PreviewControls
selectedAccess={ selectedAccess }
setSelectedAccess={ setSelectedAccess }
selectedDevice={ selectedDevice }
setSelectedDevice={ setSelectedDevice }
/>
}
className="jetpack-email-preview-modal"
className="jetpack-newsletter-preview-modal"
>
<div
style={ {
Expand Down Expand Up @@ -360,5 +323,3 @@ export function PreviewModal( { isOpen, onClose, postId } ) {
)
);
}

export default EmailPreview;
Loading

0 comments on commit a2c999c

Please sign in to comment.