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

feat: update pre-check with notice and reorganize sidebar #42

Merged
merged 4 commits into from
Apr 15, 2020
Merged

feat: update pre-check with notice and reorganize sidebar #42

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5d044de
feat: update pre-check with notice and reorganize sidebar
thomasguillot Apr 15, 2020
0b305bb
fix: remove duplicate code
thomasguillot Apr 15, 2020
e86b616
feat: update input ordering with defined sections (from, to, subject)
thomasguillot Apr 15, 2020
887d3fc
feat: add notice to newsletter pre-check message when is ready
thomasguillot Apr 15, 2020
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
11 changes: 6 additions & 5 deletions src/editor/blocks-validation/blocks-filters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
123 changes: 70 additions & 53 deletions src/editor/sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,63 +122,65 @@ 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>
);
}
return (
<Fragment>
<Button
isPrimary
onClick={ () => this.setState( { showTestModal: true } ) }
<strong>{ __( 'From', 'newspack-newsletters' ) }</strong>
<TextControl
label={ __( 'Name', 'newspack-newsletters' ) }
className="newspack-newsletters__name-textcontrol"
value={ senderName }
disabled={ inFlight }
>
{ __( 'Send Test', 'newspack-newsletters' ) }
</Button>
{ showTestModal && (
<Modal
title={ __( 'Send Test Email', 'newspack-newsletters' ) }
onRequestClose={ () => this.setState( { showTestModal: false } ) }
onChange={ value => this.setState( { senderName: value, senderDirty: true } ) }
/>
<TextControl
label={ __( 'Email', 'newspack-newsletters' ) }
className="newspack-newsletters__email-textcontrol"
value={ senderEmail }
type="email"
disabled={ inFlight }
onChange={ value => this.setState( { senderEmail: value, senderDirty: true } ) }
/>
{ senderDirty && (
<Button
isLink
onClick={ () => this.updateSender( senderName, senderEmail ) }
disabled={ inFlight }
>
<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', 'newspack-newsletters' ) }
</Button>
</Modal>
{ __( 'Update Sender', 'newspack-newsletters' ) }
</Button>
) }
<hr />
<SelectControl
label={ __( 'Mailchimp Lists', 'newspack-newsletters' ) }
label={ __( 'To', 'newspack-newsletters' ) }
className="newspack-newsletters__to-selectcontrol"
value={ list_id }
options={ [
{
value: null,
label: __( '-- Select A List --', 'newspack-newsletters' ),
label: __( '-- Select a list --', 'newspack-newsletters' ),
},
...lists.map( ( { id, name } ) => ( {
value: id,
Expand All @@ -188,39 +190,54 @@ class Sidebar extends Component {
onChange={ value => this.setList( value ) }
disabled={ inFlight }
/>
<hr />
<TextControl
label={ __( 'Subject', 'newspack-newsletters' ) }
className="newspack-newsletters__subject-textcontrol"
value={ title }
disabled={ inFlight }
onChange={ value => editPost( { title: value } ) }
/>
<TextControl
label={ __( 'Sender name', 'newspack-newsletters' ) }
value={ senderName }
disabled={ inFlight }
onChange={ value => this.setState( { senderName: value, senderDirty: true } ) }
/>
<TextControl
label={ __( 'Sender email', 'newspack-newsletters' ) }
value={ senderEmail }
<hr />
<Button
isPrimary
onClick={ () => this.setState( { showTestModal: true } ) }
disabled={ inFlight }
onChange={ value => this.setState( { senderEmail: value, senderDirty: true } ) }
/>
{ senderDirty && (
<Button
isPrimary
onClick={ () => this.updateSender( senderName, senderEmail ) }
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"
>
{ __( 'Update Sender', 'newspack-newsletters' ) }
</Button>
<TextControl
label={ __( 'Send to this email', 'newspack-newsletters' ) }
value={ testEmail }
type="email"
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>
);
Expand Down
32 changes: 32 additions & 0 deletions src/editor/sidebar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,36 @@
}
}
}

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

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

&__name-textcontrol {
margin-top: 8px;
}

&__subject-textcontrol,
&__to-selectcontrol {
.components-base-control__label {
font-weight: 600;
}
}

&__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
View file
Open in desktop
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 => {
Expand All @@ -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;
Expand Down