woocommerce/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/theme/preview.js

100 lines
2.6 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* 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';
/**
* WooCommerce dependencies
*/
import { WebPreview } from '@woocommerce/components';
/**
* Internal dependencies
*/
import { recordEvent } from 'lib/tracks';
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, 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={ demo_url } title={ title } className={ `is-${ currentDevice }` } />
</div>
);
}
}
export default ThemePreview;