Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: update pre-check with notice and reorganize sidebar
Browse files Browse the repository at this point in the history
thomasguillot committed Apr 15, 2020
1 parent 33fc00a commit 5d044de
Showing 4 changed files with 93 additions and 21 deletions.
11 changes: 6 additions & 5 deletions src/editor/blocks-validation/blocks-filters.js
Original file line number Diff line number Diff line change
@@ -53,11 +53,12 @@ const withUnsupportedFeaturesNotices = createHigherOrderComponent( BlockListBloc
'These features will not be displayed correctly in an email, please remove them:',
'newspack-newsletters'
) }
<ul>
{ warnings.map( ( warning, i ) => (
<li key={ i }>{ warning }</li>
) ) }
</ul>
{ warnings.map( ( warning, i ) => (
<strong key={ i }>
<br />
{ warning }
</strong>
) ) }
</div>
<BlockListBlock { ...props } />
</div>
59 changes: 47 additions & 12 deletions src/editor/sidebar/index.js
Original file line number Diff line number Diff line change
@@ -122,24 +122,26 @@ class Sidebar extends Component {
senderDirty,
} = this.state;
if ( ! hasResults ) {
return [
__( 'Retrieving Mailchimp data', 'newspack-newsletters' ),
<Spinner key="spinner" />,
];
return (
<div className="newspack-newsletters__loading-data">
{ __( 'Retrieving Mailchimp data...', 'newspack-newsletters' ) }
<Spinner key="spinner" />
</div>
);
}
const { recipients, status, long_archive_url } = campaign || {};
const { list_id } = recipients || {};
if ( ! status ) {
return (
<Notice status="info" isDismissible={ false }>
<p>{ __( 'Publish to sync to Mailchimp', 'newspack-newsletters' ) }</p>
{ __( 'Publish to sync to Mailchimp.', 'newspack-newsletters' ) }
</Notice>
);
}
if ( 'sent' === status || 'sending' === status ) {
return (
<Notice status="info" isDismissible={ false }>
<p>{ __( 'Campaign has been sent.', 'newspack-newsletters' ) }</p>
<Notice status="success" isDismissible={ false }>
{ __( 'Campaign has been sent.', 'newspack-newsletters' ) }
</Notice>
);
}
@@ -173,12 +175,12 @@ class Sidebar extends Component {
</Modal>
) }
<SelectControl
label={ __( 'Mailchimp Lists', 'newspack-newsletters' ) }
label={ __( 'Mailchimp list', 'newspack-newsletters' ) }
value={ list_id }
options={ [
{
value: null,
label: __( '-- Select A List --', 'newspack-newsletters' ),
label: __( '-- Select a list --', 'newspack-newsletters' ),
},
...lists.map( ( { id, name } ) => ( {
value: id,
@@ -208,19 +210,52 @@ class Sidebar extends Component {
/>
{ senderDirty && (
<Button
isPrimary
isLink
onClick={ () => this.updateSender( senderName, senderEmail ) }
disabled={ inFlight }
>
{ __( 'Update Sender', 'newspack-newsletters' ) }
</Button>
) }
<hr />
<Button
isPrimary
onClick={ () => this.setState( { showTestModal: true } ) }
disabled={ inFlight }
>
{ __( 'Send Test', 'newspack-newsletters' ) }
</Button>
{ showTestModal && (
<Modal
title={ __( 'Send Test Email', 'newspack-newsletters' ) }
onRequestClose={ () => this.setState( { showTestModal: false } ) }
className="newspack-newsletters__send-test"
>
<TextControl
label={ __( 'Send to this email', 'newspack-newsletters' ) }
value={ testEmail }
onChange={ value => this.setState( { testEmail: value } ) }
/>
<Button
isPrimary
onClick={ () =>
this.setState( { showTestModal: false }, () => this.sendMailchimpTest() )
}
>
{ __( 'Send Test', 'newspack-newsletters' ) }
</Button>
<Button isTertiary onClick={ () => this.setState( { showTestModal: false } ) }>
{ __( 'Cancel', 'newspack-newsletters' ) }
</Button>
</Modal>
) }
{ long_archive_url && (
<div>
<Fragment>
<hr />
<ExternalLink href={ long_archive_url }>
{ __( 'View on Mailchimp', 'newspack-newsletters' ) }
</ExternalLink>
</div>
</Fragment>
) }
</Fragment>
);
21 changes: 21 additions & 0 deletions src/editor/sidebar/style.scss
Original file line number Diff line number Diff line change
@@ -28,4 +28,25 @@
}
}
}

&__loading-data {
align-items: center;
display: flex;

.components-spinner {
margin-top: 0;
}
}

&__send-test {
.components-button + .components-button {
margin-left: 12px;
}
}
}

.editor-post-publish-panel__prepublish {
.components-notice {
margin: 0;
}
}
23 changes: 19 additions & 4 deletions src/editor/utils.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/**
* WordPress dependencies
*/
import { Notice } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const validateCampaign = campaign => {
@@ -10,18 +11,32 @@ const validateCampaign = campaign => {

const messages = [];
if ( 'sent' === status || 'sending' === status ) {
messages.push( __( 'Newsletter has already been sent', 'newspack-newsletters' ) );
messages.push(
<Notice status="error" isDismissible={ false }>
{ __( 'Newsletter has already been sent.', 'newspack-newsletters' ) }
</Notice>
);
}
if ( ! listId ) {
messages.push(
__( 'A Mailchimp list must be selected before publishing.', 'newspack-newsletters' )
<Notice status="error" isDismissible={ false }>
{ __( 'A Mailchimp list must be selected before publishing.', 'newspack-newsletters' ) }
</Notice>
);
}
if ( ! senderName || senderName.length < 1 ) {
messages.push( __( 'Sender name must be set.', 'newspack-newsletters' ) );
messages.push(
<Notice status="error" isDismissible={ false }>
{ __( 'Sender name must be set.', 'newspack-newsletters' ) }
</Notice>
);
}
if ( ! senderEmail || senderEmail.length < 1 ) {
messages.push( __( 'Sender email must be set.', 'newspack-newsletters' ) );
messages.push(
<Notice status="error" isDismissible={ false }>
{ __( 'Sender email must be set.', 'newspack-newsletters' ) }
</Notice>
);
}

return messages;

0 comments on commit 5d044de

Please sign in to comment.