woocommerce/plugins/woocommerce-admin/client/dashboard/components/cart-modal.js

185 lines
4.4 KiB
JavaScript

/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { Button, Modal } from '@wordpress/components';
import { find } from 'lodash';
import { decodeEntities } from '@wordpress/html-entities';
import { withSelect } from '@wordpress/data';
import { List } from '@woocommerce/components';
import { ONBOARDING_STORE_NAME, PLUGINS_STORE_NAME } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import { getProductIdsForCart } from '../utils';
import sanitizeHTML from '../../lib/sanitize-html';
import { getInAppPurchaseUrl } from '../../lib/in-app-purchase';
import { getAdminSetting } from '~/utils/admin-settings';
class CartModal extends Component {
constructor( props ) {
super( props );
this.state = {
purchaseNowButtonBusy: false,
purchaseLaterButtonBusy: false,
};
}
onClickPurchaseNow() {
const { productIds, onClickPurchaseNow } = this.props;
this.setState( { purchaseNowButtonBusy: true } );
if ( ! productIds.length ) {
return;
}
recordEvent( 'tasklist_modal_proceed_checkout', {
product_ids: productIds,
purchase_install: true,
} );
const url = getInAppPurchaseUrl(
'https://woocommerce.com/cart?utm_medium=product',
{
'wccom-replace-with': productIds.join( ',' ),
}
);
if ( onClickPurchaseNow ) {
onClickPurchaseNow( url );
return;
}
window.location = url;
}
onClickPurchaseLater() {
const { productIds } = this.props;
recordEvent( 'tasklist_modal_proceed_checkout', {
product_ids: productIds,
purchase_install: false,
} );
this.setState( { purchaseLaterButtonBusy: true } );
this.props.onClickPurchaseLater();
}
onClose() {
const { onClose, productIds } = this.props;
recordEvent( 'tasklist_modal_proceed_checkout', {
product_ids: productIds,
purchase_install: false,
} );
onClose();
}
renderProducts() {
const { productIds, productTypes } = this.props;
const { themes = [] } = getAdminSetting( 'onboarding', {} );
const listItems = [];
productIds.forEach( ( productId ) => {
const productInfo = find( productTypes, ( productType ) => {
return productType.product === productId;
} );
if ( productInfo ) {
listItems.push( {
title: productInfo.label,
content: productInfo.description,
} );
}
const themeInfo = find( themes, ( theme ) => {
return theme.id === productId;
} );
if ( themeInfo ) {
listItems.push( {
title: sprintf(
__( '%s — %s per year', 'woocommerce-admin' ),
themeInfo.title,
decodeEntities( themeInfo.price )
),
content: (
<span
dangerouslySetInnerHTML={ sanitizeHTML(
themeInfo.excerpt
) }
/>
),
} );
}
} );
return <List items={ listItems } />;
}
render() {
const { purchaseNowButtonBusy, purchaseLaterButtonBusy } = this.state;
return (
<Modal
title={ __(
'Would you like to add the following paid features to your store now?',
'woocommerce-admin'
) }
onRequestClose={ () => this.onClose() }
className="woocommerce-cart-modal"
>
{ this.renderProducts() }
<p className="woocommerce-cart-modal__help-text">
{ __(
"You won't have access to this functionality until the extensions have been purchased and installed.",
'woocommerce-admin'
) }
</p>
<div className="woocommerce-cart-modal__actions">
<Button
isLink
isBusy={ purchaseLaterButtonBusy }
onClick={ () => this.onClickPurchaseLater() }
>
{ __( "I'll do it later", 'woocommerce-admin' ) }
</Button>
<Button
isPrimary
isBusy={ purchaseNowButtonBusy }
onClick={ () => this.onClickPurchaseNow() }
>
{ __( 'Buy now', 'woocommerce-admin' ) }
</Button>
</div>
</Modal>
);
}
}
export default compose(
withSelect( ( select ) => {
const { getInstalledPlugins } = select( PLUGINS_STORE_NAME );
const { getProductTypes, getProfileItems } = select(
ONBOARDING_STORE_NAME
);
const profileItems = getProfileItems();
const installedPlugins = getInstalledPlugins();
const productTypes = getProductTypes();
const productIds = getProductIdsForCart(
productTypes,
profileItems,
false,
installedPlugins
);
return { profileItems, productIds, productTypes };
} )
)( CartModal );