- { getRelativeTimePeriod( commentDate, site, moment ) }
+ { getRelativeTimePeriod( commentDate, moment ) }
diff --git a/client/blocks/comment-detail/index.jsx b/client/blocks/comment-detail/index.jsx
index 89154c289d21f..eaf022b227b27 100644
--- a/client/blocks/comment-detail/index.jsx
+++ b/client/blocks/comment-detail/index.jsx
@@ -27,8 +27,10 @@ import { decodeEntities, stripHTML } from 'lib/formatting';
import { getPostCommentsTree } from 'state/comments/selectors';
import { getSitePost } from 'state/posts/selectors';
import getSiteComment from 'state/selectors/get-site-comment';
-import { getSite, isJetpackMinimumVersion, isJetpackSite } from 'state/sites/selectors';
+import { isJetpackMinimumVersion, isJetpackSite } from 'state/sites/selectors';
import { bumpStat, composeAnalytics, recordTracksEvent } from 'state/analytics/actions';
+import { getSelectedSiteSlug } from 'state/ui/selectors';
+import config from 'config';
/**
* Creates a stripped down comment object containing only the information needed by
@@ -129,6 +131,18 @@ export class CommentDetail extends Component {
exitReplyState = () => this.setState( { isReplyMode: false } );
+ getPostUrl = () => {
+ const { commentStatus, postId, postUrl, siteSlug } = this.props;
+
+ if ( ! config.isEnabled( 'comments/management/post-view' ) ) {
+ return postUrl;
+ }
+
+ const status = 'unapproved' === commentStatus ? 'pending' : commentStatus;
+
+ return `/comments/${ status }/${ siteSlug }/${ postId }`;
+ };
+
toggleApprove = e => {
e.stopPropagation();
@@ -224,7 +238,7 @@ export class CommentDetail extends Component {
trackDeepReaderLinkClick = () => {
const { isJetpack, parentCommentContent } = this.props;
- if ( isJetpack ) {
+ if ( isJetpack || config.isEnabled( 'comments/management/post-view' ) ) {
return;
}
if ( parentCommentContent ) {
@@ -262,21 +276,19 @@ export class CommentDetail extends Component {
postAuthorDisplayName,
postId,
postTitle,
- postUrl,
refreshCommentData,
repliedToComment,
replyComment,
- site,
siteBlacklist,
siteId,
translate,
} = this.props;
+ const { isEditMode, isExpanded } = this.state;
+
const authorDisplayName = authorName || translate( 'Anonymous' );
const authorIsBlocked = this.isAuthorBlacklisted();
- const { isEditMode, isExpanded } = this.state;
-
const classes = classNames( 'comment-detail', {
'author-is-blocked': authorIsBlocked,
'comment-detail__placeholder': isLoading,
@@ -298,7 +310,9 @@ export class CommentDetail extends Component {
className={ classes }
tabIndex="0"
>
- { refreshCommentData &&
+
+
+
+
+
+ );
+ }
+}
diff --git a/client/blocks/conversation-follow-button/index.jsx b/client/blocks/conversation-follow-button/index.jsx
new file mode 100644
index 0000000000000..7233bfcdef492
--- /dev/null
+++ b/client/blocks/conversation-follow-button/index.jsx
@@ -0,0 +1,67 @@
+/**
+ * @format
+ */
+
+/*
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { noop } from 'lodash';
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import ConversationFollowButton from './button';
+import { isFollowingReaderConversation } from 'state/selectors';
+import { followConversation, muteConversation } from 'state/reader/conversations/actions';
+
+class ConversationFollowButtonContainer extends Component {
+ static propTypes = {
+ siteId: PropTypes.number.isRequired,
+ postId: PropTypes.number.isRequired,
+ onFollowToggle: PropTypes.func,
+ tagName: PropTypes.oneOfType( [ PropTypes.string, PropTypes.func ] ),
+ };
+
+ static defaultProps = {
+ onFollowToggle: noop,
+ };
+
+ handleFollowToggle = isRequestingFollow => {
+ const { siteId, postId } = this.props;
+
+ if ( isRequestingFollow ) {
+ this.props.followConversation( { siteId, postId } );
+ } else {
+ this.props.muteConversation( { siteId, postId } );
+ }
+
+ this.props.onFollowToggle( isRequestingFollow );
+ };
+
+ render() {
+ return (
+
- { shouldShowComments( post ) ? (
+ { shouldShowComments( post ) && (
{ showRelatedPosts && (
diff --git a/client/blocks/reader-post-options-menu/index.jsx b/client/blocks/reader-post-options-menu/index.jsx
index 974a7523f5bc4..bd6fceb959528 100644
--- a/client/blocks/reader-post-options-menu/index.jsx
+++ b/client/blocks/reader-post-options-menu/index.jsx
@@ -9,6 +9,7 @@ import page from 'page';
import classnames from 'classnames';
import { connect } from 'react-redux';
import { localize } from 'i18n-calypso';
+import config from 'config';
/**
* Internal dependencies
@@ -28,6 +29,8 @@ import QueryReaderTeams from 'components/data/query-reader-teams';
import { isAutomatticTeamMember } from 'reader/lib/teams';
import { getReaderTeams } from 'state/selectors';
import ReaderPostOptionsMenuBlogStickers from './blog-stickers';
+import ConversationFollowButton from 'blocks/conversation-follow-button';
+import { shouldShowComments } from 'blocks/comments/helper';
class ReaderPostOptionsMenu extends React.Component {
static propTypes = {
@@ -120,10 +123,17 @@ class ReaderPostOptionsMenu extends React.Component {
render() {
const { post, site, feed, teams, translate, position } = this.props;
+ const { ID: postId, site_ID: siteId } = post;
const isEditPossible = PostUtils.userCan( 'edit_post', post );
const isDiscoverPost = DiscoverHelper.isDiscoverPost( post );
const followUrl = this.getFollowUrl();
const isTeamMember = isAutomatticTeamMember( teams );
+ const showConversationFollow =
+ config.isEnabled( 'reader/conversations' ) &&
+ siteId &&
+ ! post.is_external &&
+ shouldShowComments( post ) &&
+ ! isDiscoverPost;
let isBlockPossible = false;
@@ -157,7 +167,20 @@ class ReaderPostOptionsMenu extends React.Component {
{ isTeamMember && site &&
+ This is a card
+
,
+ "nodes": Array [
+
+ This is a card
+
,
+ ],
+ "options": Object {},
+ "renderer": ReactShallowRenderer {
+ "_instance": ShallowComponentWrapper {
+ "_calledComponentWillUnmount": false,
+ "_compositeType": 0,
+ "_context": Object {},
+ "_currentElement":
+ This is a card
+
,
+ "_debugID": 6,
+ "_renderedOutput":
+ This is a card
+
,
+ },
+ "_renderedNodeType": 0,
+ "_rootNodeID": 0,
+ "_topLevelWrapper": null,
+ "_updateBatchNumber": null,
+ "_warnedAboutRefsInRender": false,
+ },
+ "getRenderOutput": [Function],
+ "render": [Function],
+ },
+ "root": [Circular],
+ "unrendered":
{ suggestionElements }
- { mappingOffer }
+ { unavailableOffer }
);
}
@@ -203,6 +241,7 @@ const mapStateToProps = state => {
const selectedSiteId = getSelectedSiteId( state );
return {
isSiteOnPaidPlan: isSiteOnPaidPlan( state, selectedSiteId ),
+ transferInAllowed: currentUserHasFlag( state, TRANSFER_IN ),
};
};
diff --git a/client/components/domains/domain-search-results/style.scss b/client/components/domains/domain-search-results/style.scss
index 78be9036d4315..69acbee11bcc1 100644
--- a/client/components/domains/domain-search-results/style.scss
+++ b/client/components/domains/domain-search-results/style.scss
@@ -1,4 +1,4 @@
-.domain-search-results__domain-availability {
+.domain-search-results__domain-availability, .transfer-domain-step__domain-availability {
.notice.is-success {
margin: 0;
}
diff --git a/client/components/domains/domain-suggestion/index.jsx b/client/components/domains/domain-suggestion/index.jsx
index b62e786195b1c..d33f086c3a710 100644
--- a/client/components/domains/domain-suggestion/index.jsx
+++ b/client/components/domains/domain-suggestion/index.jsx
@@ -20,13 +20,14 @@ class DomainSuggestion extends React.Component {
buttonClasses: PropTypes.string,
extraClasses: PropTypes.string,
onButtonClick: PropTypes.func.isRequired,
- priceRule: PropTypes.string.isRequired,
+ priceRule: PropTypes.string,
price: PropTypes.string,
domain: PropTypes.string,
+ hidePrice: PropTypes.bool,
};
render() {
- const { price, isAdded, extraClasses, children, priceRule } = this.props;
+ const { hidePrice, price, isAdded, extraClasses, children, priceRule } = this.props;
const classes = classNames(
'domain-suggestion',
'card',
@@ -47,7 +48,7 @@ class DomainSuggestion extends React.Component {
>
{ children }
-
{ this.props.buttonContent }
+
+ + { translate( 'Already own a domain?', { + context: 'Upgrades: Register domain header', + comment: 'Asks if you already own a domain name.', + } ) } +
++ { translate( "Transfer or map it to use it as your site's address.", { + context: 'Upgrades: Register domain description', + comment: 'Explains how you could use an existing domain name with your site.', + } ) } +
+
+ { this.notice() }
+
+
+ );
+ }
+
+ domainRegistrationUpsell() {
+ const { suggestion } = this.state;
+ if ( ! suggestion ) {
+ return;
+ }
+
+ return (
+
+
+ { this.props.translate( '%(domain)s is available!', {
+ args: { domain: suggestion.domain_name },
+ } ) }
+
+
+ );
+ }
+
+ registerSuggestedDomain = () => {
+ this.props.recordAddDomainButtonClickInMapDomain(
+ this.state.suggestion.domain_name,
+ this.props.analyticsSection
+ );
+
+ return this.props.onRegisterDomain( this.state.suggestion );
+ };
+
+ recordInputFocus = () => {
+ this.props.recordInputFocusInMapDomain( this.state.searchQuery );
+ };
+
+ recordGoButtonClick = () => {
+ this.props.recordGoButtonClickInMapDomain(
+ this.state.searchQuery,
+ this.props.analyticsSection
+ );
+ };
+
+ setSearchQuery = event => {
+ this.setState( { searchQuery: event.target.value } );
+ };
+
+ handleFormSubmit = event => {
+ event.preventDefault();
+
+ const domain = getFixedDomainSearch( this.state.searchQuery );
+ this.props.recordFormSubmitInMapDomain( this.state.searchQuery );
+ this.setState( { suggestion: null, notice: null } );
+
+ checkDomainAvailability( domain, ( error, result ) => {
+ const status = get( result, 'status', error );
+ switch ( status ) {
+ case domainAvailability.MAPPABLE:
+ case domainAvailability.UNKNOWN:
+ this.props.onTransferDomain( domain );
+ return;
+
+ case domainAvailability.AVAILABLE:
+ this.setState( { suggestion: result } );
+ return;
+
+ default:
+ const { message, severity } = getAvailabilityNotice( domain, status );
+ this.setState( { notice: message, noticeSeverity: severity } );
+ return;
+ }
+ } );
+ };
+}
+
+const recordMapDomainButtonClick = section =>
+ composeAnalytics(
+ recordGoogleEvent( 'Domain Search', 'Clicked "Map it" Button' ),
+ recordTracksEvent( 'calypso_domain_search_results_mapping_button_click', { section } )
+ );
+
+export default connect(
+ state => ( {
+ currentUser: getCurrentUser( state ),
+ selectedSite: getSelectedSite( state ),
+ } ),
+ {
+ recordAddDomainButtonClickInMapDomain,
+ recordFormSubmitInMapDomain,
+ recordInputFocusInMapDomain,
+ recordGoButtonClickInMapDomain,
+ recordMapDomainButtonClick,
+ }
+)( localize( TransferDomainStep ) );
diff --git a/client/components/domains/transfer-domain-step/style.scss b/client/components/domains/transfer-domain-step/style.scss
new file mode 100644
index 0000000000000..055c28a3dcaa9
--- /dev/null
+++ b/client/components/domains/transfer-domain-step/style.scss
@@ -0,0 +1,68 @@
+.transfer-domain-step {
+ padding: 0;
+
+ form.transfer-domain-step__form {
+ padding: 20px;
+ margin-bottom: 9px;
+ }
+
+ p {
+ color: $gray-dark;
+ font-size: 13px;
+ font-weight: 600;
+ margin-bottom: 0;
+ opacity: 0.7;
+ }
+
+ .domain-product-price {
+ float: left;
+ margin-bottom: 20px;
+ min-width: 0;
+
+ @include breakpoint( ">960px" ) {
+ float: right;
+ margin-bottom: 0;
+ }
+ }
+
+ .notice {
+ margin-top: 25px;
+ }
+
+ .transfer-domain-step__domain-availability {
+ margin-top: 30px;
+ }
+}
+
+.transfer-domain-step__domain-description {
+ @include breakpoint( ">960px" ) {
+ max-width: 75%;
+ float: left;
+ margin-bottom: 20px;
+ }
+}
+
+.transfer-domain-step__add-domain {
+ display: flex;
+ flex-flow: column;
+ width: 100%;
+
+ @include breakpoint( ">660px" ) {
+ flex-flow: row;
+ }
+}
+
+input.transfer-domain-step__external-domain {
+ flex-grow: 1;
+ width: auto;
+}
+
+.transfer-domain-step__go {
+ flex-grow: 1;
+ margin: 10px 0 0 0;
+
+ @include breakpoint( ">660px" ) {
+ flex-grow: 0;
+ margin: 0 0 0 10px;
+ }
+}
diff --git a/client/components/happychat/button.jsx b/client/components/happychat/button.jsx
index e8d893797048c..f76b0140d8aab 100644
--- a/client/components/happychat/button.jsx
+++ b/client/components/happychat/button.jsx
@@ -17,20 +17,24 @@ import classnames from 'classnames';
* Internal dependencies
*/
import viewport from 'lib/viewport';
+import { getHappychatAuth } from 'state/happychat/utils';
import { hasUnreadMessages } from 'state/happychat/selectors';
import hasActiveHappychatSession from 'state/happychat/selectors/has-active-happychat-session';
import isHappychatAvailable from 'state/happychat/selectors/is-happychat-available';
-import { connectChat } from 'state/happychat/connection/actions';
+import isHappychatConnectionUninitialized from 'state/happychat/selectors/is-happychat-connection-uninitialized';
+import { initConnection } from 'state/happychat/connection/actions';
import { openChat } from 'state/happychat/ui/actions';
import Button from 'components/button';
-class HappychatButton extends Component {
+export class HappychatButton extends Component {
static propTypes = {
allowMobileRedirect: PropTypes.bool,
borderless: PropTypes.bool,
- connectChat: PropTypes.func,
+ getAuth: PropTypes.func,
+ initConnection: PropTypes.func,
isChatActive: PropTypes.bool,
isChatAvailable: PropTypes.bool,
+ isConnectionUninitialized: PropTypes.bool,
onClick: PropTypes.func,
openChat: PropTypes.func,
translate: PropTypes.func,
@@ -39,9 +43,11 @@ class HappychatButton extends Component {
static defaultProps = {
allowMobileRedirect: false,
borderless: true,
- connectChat: noop,
+ getAuth: noop,
+ initConnection: noop,
isChatActive: false,
isChatAvailable: false,
+ isConnectionUninitialized: false,
onClick: noop,
openChat: noop,
translate: identity,
@@ -60,7 +66,9 @@ class HappychatButton extends Component {
};
componentDidMount() {
- this.props.connectChat();
+ if ( this.props.isConnectionUninitialized ) {
+ this.props.initConnection( this.props.getAuth() );
+ }
}
render() {
@@ -100,11 +108,13 @@ class HappychatButton extends Component {
export default connect(
state => ( {
hasUnread: hasUnreadMessages( state ),
+ getAuth: getHappychatAuth( state ),
isChatAvailable: isHappychatAvailable( state ),
isChatActive: hasActiveHappychatSession( state ),
+ isConnectionUninitialized: isHappychatConnectionUninitialized( state ),
} ),
{
openChat,
- connectChat,
+ initConnection,
}
)( localize( HappychatButton ) );
diff --git a/client/components/happychat/composer.jsx b/client/components/happychat/composer.jsx
index 9855880de4a63..f453be63f7247 100644
--- a/client/components/happychat/composer.jsx
+++ b/client/components/happychat/composer.jsx
@@ -8,24 +8,19 @@ import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-import { isEmpty } from 'lodash';
+import { get, isEmpty, throttle } from 'lodash';
import { localize } from 'i18n-calypso';
/**
* Internal dependencies
*/
-import { sendChatMessage } from 'state/happychat/connection/actions';
+import { sendMessage } from 'state/happychat/connection/actions';
import { setCurrentMessage } from 'state/happychat/ui/actions';
+import { sendTyping, sendNotTyping } from 'state/happychat/connection/actions';
import getCurrentMessage from 'state/happychat/selectors/get-happychat-current-message';
import { canUserSendMessages } from 'state/happychat/selectors';
-import { when, forEach, compose, propEquals, call, prop } from './functional';
import scrollbleed from './scrollbleed';
-// helper function for detecting when a DOM event keycode is pressed
-const returnPressed = propEquals( 'which', 13 );
-// helper function that calls prevents default on the DOM event
-const preventDefault = call( 'preventDefault' );
-
/*
* Renders a textarea to be used to comopose a message for the chat.
*/
@@ -37,23 +32,47 @@ export const Composer = createReactClass( {
disabled: PropTypes.bool,
message: PropTypes.string,
onFocus: PropTypes.func,
- onSendChatMessage: PropTypes.func,
- onUpdateChatMessage: PropTypes.func,
+ onSendMessage: PropTypes.func,
+ onSendTyping: PropTypes.func,
+ onSendNotTyping: PropTypes.func,
+ onSetCurrentMessage: PropTypes.func,
translate: PropTypes.func, // localize HOC
},
+ onChange( event ) {
+ const { onSendTyping, onSendNotTyping, onSetCurrentMessage } = this.props;
+
+ const sendThrottledTyping = throttle(
+ msg => {
+ onSendTyping( msg );
+ },
+ 1000,
+ { leading: true, trailing: false }
+ );
+
+ const msg = get( event, 'target.value' );
+ onSetCurrentMessage( msg );
+ isEmpty( msg ) ? onSendNotTyping() : sendThrottledTyping( msg );
+ },
+
+ onKeyDown( event ) {
+ const RETURN_KEYCODE = 13;
+ if ( get( event, 'which' ) === RETURN_KEYCODE ) {
+ event.preventDefault();
+ this.sendMessage();
+ }
+ },
+
+ sendMessage() {
+ const { message, onSendMessage, onSendNotTyping } = this.props;
+ if ( ! isEmpty( message ) ) {
+ onSendMessage( message );
+ onSendNotTyping();
+ }
+ },
+
render() {
- const {
- disabled,
- message,
- onFocus,
- onSendChatMessage,
- onUpdateChatMessage,
- translate,
- } = this.props;
- const sendMessage = when( () => ! isEmpty( message ), () => onSendChatMessage( message ) );
- const onChange = compose( prop( 'target.value' ), onUpdateChatMessage );
- const onKeyDown = when( returnPressed, forEach( preventDefault, sendMessage ) );
+ const { disabled, message, onFocus, translate } = this.props;
const composerClasses = classNames( 'happychat__composer', {
'is-disabled': disabled,
} );
@@ -70,13 +89,13 @@ export const Composer = createReactClass( {
onFocus={ onFocus }
type="text"
placeholder={ translate( 'Type a message …' ) }
- onChange={ onChange }
- onKeyDown={ onKeyDown }
+ onChange={ this.onChange }
+ onKeyDown={ this.onKeyDown }
disabled={ disabled }
value={ message }
/>
-
- { this.renderSearchCard() }
-
-
- { renderFields(
- promotion,
- edit,
- translate,
- currency
- ) }
+
+ { fields }
);
@@ -94,7 +56,11 @@ PromotionFormCard.PropTypes = {
type: PropTypes.string.isRequired,
} ),
editPromotion: PropTypes.func.isRequired,
+ cardModel: PropTypes.shape( {
+ labelText: PropTypes.string.isRequired,
+ fields: PropTypes.object.isRequired,
+ } ).isRequired,
};
-export default localize( PromotionFormCard );
+export default PromotionFormCard;
diff --git a/client/extensions/woocommerce/app/promotions/promotion-form-type-card.js b/client/extensions/woocommerce/app/promotions/promotion-form-type-card.js
index c5c1e7fa7deb0..3c84473637126 100644
--- a/client/extensions/woocommerce/app/promotions/promotion-form-type-card.js
+++ b/client/extensions/woocommerce/app/promotions/promotion-form-type-card.js
@@ -16,7 +16,7 @@ import FormSettingExplanation from 'components/forms/form-setting-explanation';
function getExplanation( promotionType, translate ) {
switch ( promotionType ) {
case 'product_sale':
- return translate( 'Put a product on sale for all customers.' );
+ return translate( 'Place a single product on sale for all customers.' );
case 'fixed_product':
return translate( 'Issue a coupon with a discount for one or more products.' );
case 'fixed_cart':
@@ -34,6 +34,9 @@ const PromotionFormTypeCard = ( {
} ) => {
const promotionType = ( promotion && promotion.type ? promotion.type : '' );
+ const productTypesDisabled = Boolean( promotion.couponId );
+ const couponTypesDisabled = Boolean( promotion.productId );
+
const onTypeSelect = ( e ) => {
const type = e.target.value;
editPromotion( siteId, promotion, { type } );
@@ -44,10 +47,18 @@ const PromotionFormTypeCard = ( {
+
+ { notice }
+
+ { translate( 'Resync', { comment: 'to synchronize again' } ) }
+
+
+
);
@@ -184,14 +187,17 @@ const Settings = localize( ( { translate, settings, oldCheckbox, onChange } ) =>
/>
{ translate( 'Subscribe message is checked by default' ) }
-
{ translate( '{{span_info}}Products:{{/span_info}} {{span}}%(products)s{{/span}}', {
components: {
span_info: ,
@@ -126,9 +132,6 @@ const SyncTab = localize( ( { siteId, translate, syncState, resync, isRequesting
orders
}
} ) }
-
- { translate( 'Resync', { comment: 'to synchronize again' } ) }
-
-
MailChimp
-
- { translate( 'Allow customers to subscribe to your MailChimp email list' ) }
+
-
-
{ translate( 'Mailchimp API Key:' ) }
@@ -40,6 +34,10 @@ const KeyInputStep = localize( ( { translate, onChange, apiKey, isKeyCorrect } )
?
+ { translate( 'To find your MailChimp API key click your profile picture, select Account and go to Extras ' +
+ '> API keys. From there, grab an existing key or generate a new one for your store.' ) }
+
) );
diff --git a/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/log-into-mailchimp.js b/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/log-into-mailchimp.js
index ae46318a33bad..f2708f3bfa45e 100644
--- a/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/log-into-mailchimp.js
+++ b/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/log-into-mailchimp.js
@@ -12,9 +12,8 @@ import { translate } from 'i18n-calypso';
export default () => (
-
+
diff --git a/client/jetpack-connect/plans-grid.jsx b/client/jetpack-connect/plans-grid.jsx
index f33570582fca5..fdb6556adc913 100644
--- a/client/jetpack-connect/plans-grid.jsx
+++ b/client/jetpack-connect/plans-grid.jsx
@@ -27,6 +27,9 @@ class JetpackPlansGrid extends Component {
onSelect: PropTypes.func,
selectedSite: PropTypes.object,
showFirst: PropTypes.bool,
+
+ // Connected
+ translate: PropTypes.func.isRequired,
};
renderConnectHeader() {
diff --git a/client/jetpack-connect/plans-landing.jsx b/client/jetpack-connect/plans-landing.jsx
index 6c679b6f41d3a..edaf1241ce1e9 100644
--- a/client/jetpack-connect/plans-landing.jsx
+++ b/client/jetpack-connect/plans-landing.jsx
@@ -106,7 +106,7 @@ class PlansLanding extends Component {
>
-
+
diff --git a/client/jetpack-connect/plans-skip-button.jsx b/client/jetpack-connect/plans-skip-button.jsx
index 469e3b13d579b..f2eaef1c3e52a 100644
--- a/client/jetpack-connect/plans-skip-button.jsx
+++ b/client/jetpack-connect/plans-skip-button.jsx
@@ -15,7 +15,7 @@ const PlansSkipButton = ( { onClick, isRtl, translate } ) => (
);
diff --git a/client/jetpack-connect/plans.jsx b/client/jetpack-connect/plans.jsx
index 84affeedaf08e..130acfa14ef25 100644
--- a/client/jetpack-connect/plans.jsx
+++ b/client/jetpack-connect/plans.jsx
@@ -26,7 +26,6 @@ import {
PLAN_JETPACK_BUSINESS,
PLAN_JETPACK_BUSINESS_MONTHLY,
} from 'lib/plans/constants';
-import { getPlansBySite } from 'state/sites/plans/selectors';
import { recordTracksEvent } from 'state/analytics/actions';
import { getCurrentUser } from 'state/current-user/selectors';
import { addItem } from 'lib/upgrades/actions';
@@ -35,13 +34,17 @@ import QueryPlans from 'components/data/query-plans';
import QuerySitePlans from 'components/data/query-site-plans';
import { isRequestingPlans, getPlanBySlug } from 'state/plans/selectors';
import { getSelectedSite } from 'state/ui/selectors';
-import { canCurrentUser, isRtl, isSiteOnPaidPlan } from 'state/selectors';
+import {
+ canCurrentUser,
+ getJetpackConnectRedirectAfterAuth,
+ isRtl,
+ isSiteOnPaidPlan,
+} from 'state/selectors';
import {
getFlowType,
isRedirectingToWpAdmin,
getSiteSelectedPlan,
getGlobalSelectedPlan,
- getAuthorizationData,
isCalypsoStartedConnection,
} from 'state/jetpack-connect/selectors';
import { mc } from 'lib/analytics';
@@ -52,19 +55,11 @@ const CALYPSO_PLANS_PAGE = '/plans/my-plan/';
const JETPACK_ADMIN_PATH = '/wp-admin/admin.php?page=jetpack';
class Plans extends Component {
- constructor( props ) {
- super( props );
- this.redirecting = false;
- }
+ static propTypes = { showJetpackFreePlan: PropTypes.bool };
- static propTypes = {
- sitePlans: PropTypes.object.isRequired,
- showJetpackFreePlan: PropTypes.bool,
- };
+ static defaultProps = { siteSlug: '*' };
- static defaultProps = {
- siteSlug: '*',
- };
+ redirecting = false;
componentDidMount() {
if ( this.props.isAutomatedTransfer && ! this.redirecting && this.props.selectedSite ) {
@@ -124,9 +119,9 @@ class Plans extends Component {
return;
}
- const { queryObject } = this.props.jetpackConnectAuthorize;
- if ( queryObject ) {
- this.props.goBackToWpAdmin( queryObject.redirect_after_auth );
+ const { redirectAfterAuth } = this.props;
+ if ( redirectAfterAuth ) {
+ this.props.goBackToWpAdmin( redirectAfterAuth );
} else if ( this.props.selectedSite ) {
this.props.goBackToWpAdmin( this.props.selectedSite.URL + JETPACK_ADMIN_PATH );
}
@@ -255,13 +250,13 @@ class Plans extends Component {
};
render() {
- const { isRtlLayout, translate } = this.props;
+ const { interval, isRtlLayout, selectedSite, showFirst, translate } = this.props;
if (
this.redirecting ||
this.hasPreSelectedPlan() ||
- ( ! this.props.showFirst && ! this.props.canPurchasePlans ) ||
- ( ! this.props.showFirst && this.props.hasPlan )
+ ( ! showFirst && ! this.props.canPurchasePlans ) ||
+ ( ! showFirst && this.props.hasPlan )
) {
return
-
+
@@ -315,8 +310,7 @@ export default connect(
selectedSiteSlug,
selectedPlan,
isAutomatedTransfer: selectedSite ? isSiteAutomatedTransfer( state, selectedSite.ID ) : false,
- sitePlans: getPlansBySite( state, selectedSite ),
- jetpackConnectAuthorize: getAuthorizationData( state ),
+ redirectAfterAuth: getJetpackConnectRedirectAfterAuth( state ),
userId: user ? user.ID : null,
canPurchasePlans: selectedSite
? canCurrentUser( state, selectedSite.ID, 'manage_options' )
diff --git a/client/jetpack-connect/sso.jsx b/client/jetpack-connect/sso.jsx
index c3a8414da2ef1..68e3cfd772f7c 100644
--- a/client/jetpack-connect/sso.jsx
+++ b/client/jetpack-connect/sso.jsx
@@ -457,7 +457,7 @@ class JetpackSsoForm extends Component {
>
{ this.getReturnToSiteText() }
-
+
diff --git a/client/jetpack-connect/style.scss b/client/jetpack-connect/style.scss
index 2a01bdb0fea27..be00903bdd40e 100644
--- a/client/jetpack-connect/style.scss
+++ b/client/jetpack-connect/style.scss
@@ -99,10 +99,6 @@
.button {
width: 100%;
}
-
- .logged-out-form__links .gridicon {
- top: 2px;
- }
}
.jetpack-connect__back-button {
@@ -467,15 +463,6 @@
word-break: break-word;
}
-.jetpack-connect__help-button {
- .gridicon {
- width: 18px;
- height: 18px;
- position: relative;
- top: 4px;
- }
-}
-
.jetpack-connect__error-details {
margin-bottom: 16px;
}
diff --git a/client/jetpack-connect/test/__snapshots__/plans-skip-button.jsx.snap b/client/jetpack-connect/test/__snapshots__/plans-skip-button.jsx.snap
index 0b882f9ebd4d3..15b2bf5b68aa9 100644
--- a/client/jetpack-connect/test/__snapshots__/plans-skip-button.jsx.snap
+++ b/client/jetpack-connect/test/__snapshots__/plans-skip-button.jsx.snap
@@ -11,11 +11,11 @@ exports[`PlansSkipButton should render 1`] = `
>
Start with free
+
diff --git a/client/extensions/woocommerce/app/settings/email/mailchimp/setup-mailchimp.js b/client/extensions/woocommerce/app/settings/email/mailchimp/setup-mailchimp.js
index dc7d41f7e114a..d41f4e7e56c8f 100644
--- a/client/extensions/woocommerce/app/settings/email/mailchimp/setup-mailchimp.js
+++ b/client/extensions/woocommerce/app/settings/email/mailchimp/setup-mailchimp.js
@@ -10,14 +10,18 @@ import React from 'react';
/**
* Internal dependencies
*/
-import CampaignDefaultsStep from './setup-steps/campaign-defaults.js';
import Dialog from 'components/dialog';
import { getSiteTitle } from 'state/sites/selectors';
import { getStoreLocation } from 'woocommerce/state/sites/settings/general/selectors';
import { getCurrencyWithEdits } from 'woocommerce/state/ui/payments/currency/selectors';
import { getCurrentUserEmail } from 'state/current-user/selectors';
import { getSiteTimezoneValue } from 'state/selectors';
-import { isSubmittingApiKey, isApiKeyCorrect } from 'woocommerce/state/sites/settings/email/selectors';
+import {
+ isSubmittingApiKey,
+ isApiKeyCorrect,
+ isSubmittingNewsletterSetting,
+ isSubmittingStoreInfo,
+ } from 'woocommerce/state/sites/settings/email/selectors';
import KeyInputStep from './setup-steps/key-input.js';
import LogIntoMailchimp from './setup-steps/log-into-mailchimp.js';
import NewsletterSettings from './setup-steps/newsletter-settings.js';
@@ -43,11 +47,15 @@ const steps = {
[ LOG_INTO_MAILCHIMP_STEP ]: { number: 0, nextStep: KEY_INPUT_STEP },
[ KEY_INPUT_STEP ]: { number: 1, nextStep: STORE_INFO_STEP },
[ STORE_INFO_STEP ]: { number: 2, nextStep: CAMPAIGN_DEFAULTS_STEP },
- [ CAMPAIGN_DEFAULTS_STEP ]: { number: 3, nextStep: NEWSLETTER_SETTINGS_STEP },
- [ NEWSLETTER_SETTINGS_STEP ]: { number: 4, nextStep: STORE_SYNC },
- [ STORE_SYNC ]: { number: 5, nextStep: null },
+ // CAMPAIGN_DEFAULTS_STEP is also number 2 because it happens silently in the
+ // background and the number here is used for UI purposes
+ [ CAMPAIGN_DEFAULTS_STEP ]: { number: 2, nextStep: NEWSLETTER_SETTINGS_STEP },
+ [ NEWSLETTER_SETTINGS_STEP ]: { number: 3, nextStep: STORE_SYNC },
+ [ STORE_SYNC ]: { number: 4, nextStep: null },
};
+const uiStepsCount = steps[ STORE_SYNC ].number + 1;
+
const storeSettingsRequiredFields = [ 'store_name', 'store_street', 'store_city', 'store_state',
'store_postal_code', 'store_country', 'store_phone', 'store_locale', 'store_timezone',
'store_currency_code', 'admin_email' ];
@@ -78,7 +86,14 @@ class MailChimpSetup extends React.Component {
const { active_tab } = nextProps.settings;
if ( steps[ this.state.step ].nextStep === active_tab ) {
const settings = this.prepareDefaultValues( nextProps );
- this.setState( { step: active_tab, settings } );
+ if ( active_tab === CAMPAIGN_DEFAULTS_STEP ) {
+ // quickly to the next step
+ // we want CAMPAIGN_DEFAULTS_STEP to happen in the background
+ // we already have all the required information
+ this.setState( { step: active_tab, settings }, this.next );
+ } else {
+ this.setState( { step: active_tab, settings } );
+ }
if ( active_tab === STORE_SYNC ) {
nextProps.onClose( 'wizard-completed' );
}
@@ -227,20 +242,15 @@ class MailChimpSetup extends React.Component {
apiKey={ this.state.api_key_input }
isKeyCorrect={ keyCorrect } />;
}
- if ( STORE_INFO_STEP === step ) {
+ // we show the same UI view for two steps because the
+ // CAMPAIGN_DEFAULTS_STEP is executed silently in the background
+ if ( STORE_INFO_STEP === step || CAMPAIGN_DEFAULTS_STEP === step ) {
return MailChimp
+
+ { translate( 'Allow customers to subscribe to your MailChimp email list' ) }
+
MailChimp
-
- { this.renderStep() }
-
+
+
+
+
+ { this.renderStep() }
+
);
}
@@ -330,20 +342,22 @@ MailChimpSetup.propTypes = {
};
export default localize( connect(
- ( state, props ) => {
- const isSaving = isSubmittingApiKey( state, props.siteId );
- const isKeyCorrect = isApiKeyCorrect( state, props.siteId );
+ ( state, { siteId } ) => {
+ const isSavingApiKey = isSubmittingApiKey( state, siteId );
+ const isSavingStoreInfo = isSubmittingStoreInfo( state, siteId );
+ const isSavingNewsletterSettings = isSubmittingNewsletterSetting( state, siteId );
+ const isKeyCorrect = isApiKeyCorrect( state, siteId );
const address = getStoreLocation( state );
const currency = getCurrencyWithEdits( state );
- const isBusy = isSaving;
+ const isBusy = isSavingApiKey || isSavingStoreInfo || isSavingNewsletterSettings;
return {
isBusy,
address,
currency,
isKeyCorrect,
- siteTitle: getSiteTitle( state, props.siteId ),
+ siteTitle: getSiteTitle( state, siteId ),
currentUserEmail: getCurrentUserEmail( state ),
- timezone: getSiteTimezoneValue( state, props.siteId )
+ timezone: getSiteTimezoneValue( state, siteId )
};
},
{
diff --git a/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/campaign-defaults.js b/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/campaign-defaults.js
index fb28989b185fa..1541f14796972 100644
--- a/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/campaign-defaults.js
+++ b/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/campaign-defaults.js
@@ -11,40 +11,50 @@ import FormFieldset from 'components/forms/form-fieldset';
import FormInputValidation from 'components/forms/form-input-validation';
import FormLabel from 'components/forms/form-label';
import FormTextInput from 'components/forms/form-text-input';
+import FormSettingExplanation from 'components/forms/form-setting-explanation';
import { translate } from 'i18n-calypso';
// Get reed of this, this should not be visible to the user - he does not need this.
const CampaignDefaults = ( { storeData = {}, onChange, validateFields } ) => {
const fields = [
- { name: 'campaign_from_name', label: translate( 'From',
+ { name: 'campaign_from_name', explanation: translate( 'This is the name your emails will come from. Use ' +
+ 'something your subscribers will instantly recognize, like your company name.' ), label: translate( 'Default from name',
{ comment: 'label for field that informs who sends the message' } ) },
- { name: 'campaign_from_email', label: translate( 'From Email' ) },
- { name: 'campaign_subject', label: translate( 'Subject' ) },
- { name: 'campaign_permission_reminder', label: translate( 'Permission reminder' ) },
+ { name: 'campaign_from_email', explanation: translate( 'The address that will receive reply emails. Check it ' +
+ 'regularly to stay in touch with your audience.' ), label: translate( 'Default from address' ) },
+ { name: 'campaign_subject', explanation: translate( 'Keep it relevant and non-spammy.' ), label: translate( 'Default subject' ) },
+ { name: 'campaign_permission_reminder', explanation: translate( 'Displayed at the bottom of ' +
+ 'your emails' ), label: translate( 'Permission reminder' ) },
// campaign_language will be silently passed based on choice from the previous step.
];
return (
-
+
);
};
diff --git a/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/key-input.js b/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/key-input.js
index 6573cb86b0540..607433db70407 100644
--- a/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/key-input.js
+++ b/client/extensions/woocommerce/app/settings/email/mailchimp/setup-steps/key-input.js
@@ -11,20 +11,14 @@ import FormFieldset from 'components/forms/form-fieldset';
import FormLabel from 'components/forms/form-label';
import FormTextInput from 'components/forms/form-text-input';
import FormInputValidation from 'components/forms/form-input-validation';
+import FormSettingExplanation from 'components/forms/form-setting-explanation';
import { localize } from 'i18n-calypso';
const KeyInputStep = localize( ( { translate, onChange, apiKey, isKeyCorrect } ) => (
- { translate( 'Campaign Email Settings.' ) }
-
- + { translate( 'Configure the settings for emails sent using your MailChimp account below.' ) } +
+
{ fields.map( ( item, index ) => (
-
+
) ) }
-
+
-
- { item.label }
-
-
+
+
+ { item.label }
+
+
+ { item.explanation }
+
+ { ( validateFields && ! storeData[ item.name ] ) &&
+
+
- { translate( 'Now that you\'re signed in to MailChimp, you need an API key to start the connection process' ) }
-
-
-
+ { translate( 'To find your Mailchimp API key ' ) } - - { translate( 'click your profile picture, select \'Account\', and go to Extras > API keys.' ) } - - { translate( ' From there, grab an existing key or generate a new one for your store.' ) }
-+ { translate( 'Now that you\'re signed in to MailChimp, you need an API key to start the connection process.' ) } +
-
{ translate( 'Get started' ) }
- { translate( 'First, you\'ll have to have a MailChimp account. If you already have one, log in.' ) } + { translate( 'To get started, you need a MailChimp account. Please log in or register by clicking the button below.' ) }