Skip to content

Commit

Permalink
Rewrite declarative checklist
Browse files Browse the repository at this point in the history
  • Loading branch information
@sirreal
sirreal committed Jul 17, 2018
1 parent 331a507 commit d3d9ba1
Showing 1 changed file with 94 additions and 95 deletions.
189 changes: 94 additions & 95 deletions client/extensions/woocommerce/app/dashboard/setup/tasks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { localize } from 'i18n-calypso';
import { find } from 'lodash';
import page from 'page';

/**
Expand All @@ -17,7 +16,8 @@ import {
getTriedCustomizerDuringInitialSetup,
getCheckedTaxSetup,
} from 'woocommerce/state/sites/setup-choices/selectors';
import Checklist from 'blocks/checklist';
import Checklist from 'components/checklist';
import Item from 'components/checklist/item';
import { getTotalProducts, areProductsLoaded } from 'woocommerce/state/sites/products/selectors';
import { fetchProducts } from 'woocommerce/state/sites/products/actions';
import { fetchPaymentMethods } from 'woocommerce/state/sites/payment-methods/actions';
Expand Down Expand Up @@ -61,114 +61,113 @@ class SetupTasks extends Component {
}
};

getSetupTasks = () => {
const {
site,
triedCustomizer,
hasProducts,
paymentsAreSetUp,
shippingIsSetUp,
taxesAreSetUp,
translate,
} = this.props;
const siteSlug = encodeURIComponent( '//' + site.slug );
const customizerUrl = getLink(
'https://:site/wp-admin/customize.php?store-wpcom-nux=true&return=' + siteSlug,
site
);

return [
{
id: 'add-product',
title: translate( 'Add a product' ),
buttonText: translate( 'Add a product' ),
buttonPrimary: true,
completedTitle: translate( 'You have added a product' ),
completedButtonText: translate( 'View products' ),
description: translate( 'Start by adding the first product to your\u00a0store.' ),
duration: translate( '3 mins' ),
url: getLink( '/store/product/:site', site ),
completed: hasProducts,
},
{
id: 'set-up-shipping',
title: translate( 'Review shipping' ),
buttonText: translate( 'Review shipping' ),
buttonPrimary: true,
completedTitle: translate( 'Shipping is set up' ),
completedButtonText: translate( 'View shipping' ),
description: translate( "We've set up shipping based on your store location." ),
duration: translate( '2 mins' ),
url: getLink( '/store/settings/shipping/:site', site ),
completed: shippingIsSetUp,
},
{
id: 'set-up-payments',
title: translate( 'Review payments' ),
buttonText: translate( 'Review payments' ),
buttonPrimary: true,
completedTitle: translate( 'Payments are set up' ),
completedButtonText: translate( 'Review payments' ),
description: translate( 'Choose how you would like your customers to pay you.' ),
duration: translate( '2 mins' ),
url: getLink( '/store/settings/payments/:site', site ),
completed: paymentsAreSetUp,
},
{
id: 'set-up-taxes',
title: translate( 'Review taxes' ),
buttonText: translate( 'Review taxes' ),
buttonPrimary: true,
completedTitle: translate( 'Taxes are setup' ),
completedButtonText: translate( 'Review taxes' ),
description: translate( "We've set up automatic tax calculations for you." ),
duration: translate( '2 mins' ),
url: getLink( '/store/settings/taxes/:site', site ),
completed: taxesAreSetUp,
},
{
id: 'view-and-customize',
title: translate( 'View and customize' ),
buttonText: translate( 'Customize' ),
buttonPrimary: true,
completedTitle: translate( 'View and customize' ),
completedButtonText: translate( 'View and customize' ),
description: translate(
'View your store and make any final tweaks before opening for business.'
),
duration: translate( '4 mins' ),
url: customizerUrl,
completed: triedCustomizer,
},
];
};

handleAction = id => {
const task = find( this.getSetupTasks(), { id } );

getClickHandler = ( id, url ) => () => {
recordTrack( 'calypso_woocommerce_dashboard_action_click', {
action: id,
} );

if ( 'view-and-customize' === id ) {
this.props.setTriedCustomizerDuringInitialSetup( this.props.site.ID, true );
window.open( task.url );
window.open( url );
} else {
page.redirect( task.url );
page.redirect( url );
}
};

render = () => {
const {
site,
triedCustomizer,
hasProducts,
paymentsAreSetUp,
shippingIsSetUp,
taxesAreSetUp,
translate,
} = this.props;
const siteSlug = encodeURIComponent( '//' + site.slug );
return (
<div className="setup__checklist">
<QuerySettingsGeneral siteId={ this.props.site.ID } />
<Checklist
tasks={ this.getSetupTasks() }
onAction={ this.handleAction }
onToggle={ this.handleToggle }
isLoading={ this.props.loading || ! this.props.productsLoaded }
placeholderCount={ 5 }
/>
isPlaceholder={ this.props.loading || ! this.props.productsLoaded }
inferCompletedCount
>
<Item
onClick={ this.getClickHandler(
'add-product',
getLink( '/store/product/:site', site )
) }
title={ translate( 'Add a product' ) }
buttonText={ translate( 'Add a product' ) }
buttonPrimary
completedTitle={ translate( 'You have added a product' ) }
completedButtonText={ translate( 'View products' ) }
description={ translate( 'Start by adding the first product to your\u00a0store.' ) }
duration={ translate( '3 mins' ) }
completed={ hasProducts }
/>
<Item
onClick={ this.getClickHandler(
'set-up-shipping',
getLink( '/store/settings/shipping/:site', site )
) }
title={ translate( 'Review shipping' ) }
buttonText={ translate( 'Review shipping' ) }
buttonPrimary
completedTitle={ translate( 'Shipping is set up' ) }
completedButtonText={ translate( 'View shipping' ) }
description={ translate( "We've set up shipping based on your store location." ) }
duration={ translate( '2 mins' ) }
completed={ shippingIsSetUp }
/>
<Item
onClick={ this.getClickHandler(
'set-up-payments',
getLink( '/store/settings/payments/:site', site )
) }
title={ translate( 'Review payments' ) }
buttonText={ translate( 'Review payments' ) }
buttonPrimary
completedTitle={ translate( 'Payments are set up' ) }
completedButtonText={ translate( 'Review payments' ) }
description={ translate( 'Choose how you would like your customers to pay you.' ) }
duration={ translate( '2 mins' ) }
completed={ paymentsAreSetUp }
/>
<Item
onClick={ this.getClickHandler(
'set-up-taxes',
getLink( '/store/settings/taxes/:site', site )
) }
title={ translate( 'Review taxes' ) }
buttonText={ translate( 'Review taxes' ) }
buttonPrimary
completedTitle={ translate( 'Taxes are setup' ) }
completedButtonText={ translate( 'Review taxes' ) }
description={ translate( "We've set up automatic tax calculations for you." ) }
duration={ translate( '2 mins' ) }
completed={ taxesAreSetUp }
/>
<Item
onClick={ this.getClickHandler(
'view-and-customize',
getLink(
'https://:site/wp-admin/customize.php?store-wpcom-nux=true&return=' + siteSlug,
site
)
) }
title={ translate( 'View and customize' ) }
buttonText={ translate( 'Customize' ) }
buttonPrimary
completedTitle={ translate( 'View and customize' ) }
completedButtonText={ translate( 'View and customize' ) }
description={ translate(
'View your store and make any final tweaks before opening for business.'
) }
duration={ translate( '4 mins' ) }
completed={ triedCustomizer }
/>
</Checklist>
</div>
);
};
Expand Down

0 comments on commit d3d9ba1

Please sign in to comment.