120 lines
2.7 KiB
JavaScript
120 lines
2.7 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __, sprintf } from '@wordpress/i18n';
|
|
import { Button } from '@wordpress/components';
|
|
import classnames from 'classnames';
|
|
import { Component } from '@wordpress/element';
|
|
import interpolateComponents from 'interpolate-components';
|
|
import { WebPreview } from '@woocommerce/components';
|
|
import { recordEvent } from '@woocommerce/tracks';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
|
|
const devices = [
|
|
{
|
|
key: 'mobile',
|
|
icon: 'phone_android',
|
|
},
|
|
{
|
|
key: 'tablet',
|
|
icon: 'tablet_android',
|
|
},
|
|
{
|
|
key: 'desktop',
|
|
icon: 'desktop_windows',
|
|
},
|
|
];
|
|
|
|
class ThemePreview extends Component {
|
|
constructor() {
|
|
super( ...arguments );
|
|
|
|
this.state = {
|
|
device: 'desktop',
|
|
};
|
|
|
|
this.handleDeviceClick = this.handleDeviceClick.bind( this );
|
|
}
|
|
|
|
handleDeviceClick( device ) {
|
|
const { theme } = this.props;
|
|
recordEvent( 'storeprofiler_store_theme_demo_device', {
|
|
device,
|
|
theme: theme.slug,
|
|
} );
|
|
this.setState( { device } );
|
|
}
|
|
|
|
render() {
|
|
const { isBusy, onChoose, onClose, theme } = this.props;
|
|
const { demo_url: demoUrl, slug, title } = theme;
|
|
const { device: currentDevice } = this.state;
|
|
|
|
return (
|
|
<div className="woocommerce-theme-preview">
|
|
<div className="woocommerce-theme-preview__toolbar">
|
|
<Button
|
|
className="woocommerce-theme-preview__close"
|
|
onClick={ onClose }
|
|
>
|
|
<i className="material-icons-outlined">close</i>
|
|
</Button>
|
|
<div className="woocommerce-theme-preview__theme-name">
|
|
{ interpolateComponents( {
|
|
/* translators: Describing who a previewed theme is developed by. E.g., Storefront developed by WooCommerce */
|
|
mixedString: sprintf(
|
|
__(
|
|
'{{strong}}%s{{/strong}} developed by WooCommerce',
|
|
'woocommerce-admin'
|
|
),
|
|
title
|
|
),
|
|
components: {
|
|
strong: <strong />,
|
|
},
|
|
} ) }
|
|
</div>
|
|
<div className="woocommerce-theme-preview__devices">
|
|
{ devices.map( ( device ) => (
|
|
<Button
|
|
key={ device.key }
|
|
className={ classnames(
|
|
'woocommerce-theme-preview__device',
|
|
{
|
|
'is-selected':
|
|
device.key === currentDevice,
|
|
}
|
|
) }
|
|
onClick={ () =>
|
|
this.handleDeviceClick( device.key )
|
|
}
|
|
>
|
|
<i className="material-icons-outlined">
|
|
{ device.icon }
|
|
</i>
|
|
</Button>
|
|
) ) }
|
|
</div>
|
|
<Button
|
|
isPrimary
|
|
onClick={ () => onChoose( slug, 'preview' ) }
|
|
isBusy={ isBusy }
|
|
>
|
|
{ __( 'Choose', 'woocommerce-admin' ) }
|
|
</Button>
|
|
</div>
|
|
<WebPreview
|
|
src={ demoUrl }
|
|
title={ title }
|
|
className={ `is-${ currentDevice }` }
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ThemePreview;
|