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

/**
 * External dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { decodeEntities } from '@wordpress/html-entities';
import InfoIcon from 'gridicons/dist/info';
import {
	Button,
	Card,
	CardBody,
	CardFooter,
	TabPanel,
	Tooltip,
} from '@wordpress/components';
import { withDispatch, withSelect } from '@wordpress/data';
import { H } from '@woocommerce/components';
import { ONBOARDING_STORE_NAME } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { Text } from '@woocommerce/experimental';

/**
 * Internal dependencies
 */
import './style.scss';
import ThemeUploader from './uploader';
import ThemePreview from './preview';
import { getPriceValue } from '../../../dashboard/utils';
import { getAdminSetting, setAdminSetting } from '~/utils/admin-settings';
import SkipButton from '../skip-button';

class Theme extends Component {
	constructor() {
		super( ...arguments );

		this.state = {
			activeTab: 'all',
			chosen: null,
			demo: null,
			uploadedThemes: [],
		};

		this.handleUploadComplete = this.handleUploadComplete.bind( this );
		this.onChoose = this.onChoose.bind( this );
		this.onClosePreview = this.onClosePreview.bind( this );
		this.onSelectTab = this.onSelectTab.bind( this );
		this.openDemo = this.openDemo.bind( this );
	}

	componentDidUpdate( prevProps ) {
		const { isError, isUpdatingProfileItems, createNotice } = this.props;
		const { chosen } = this.state;
		const isRequestSuccessful =
			! isUpdatingProfileItems &&
			prevProps.isUpdatingProfileItems &&
			! isError &&
			chosen;
		const isRequestError =
			! isUpdatingProfileItems && prevProps.isRequesting && isError;

		if ( isRequestSuccessful ) {
			/* eslint-disable react/no-did-update-set-state */
			this.setState( { chosen: null } );
			/* eslint-enable react/no-did-update-set-state */
			this.props.goToNextStep();
		}

		if ( isRequestError ) {
			/* eslint-disable react/no-did-update-set-state */
			this.setState( { chosen: null } );
			/* eslint-enable react/no-did-update-set-state */
			createNotice(
				'error',
				__(
					'There was a problem selecting your store theme',
					'woocommerce'
				)
			);
		}
	}

	onChoose( theme, location = '' ) {
		const { updateProfileItems } = this.props;
		const { is_installed: isInstalled, price, slug } = theme;
		const { activeTheme = '' } = getAdminSetting( 'onboarding', {} );

		this.setState( { chosen: slug } );
		recordEvent( 'storeprofiler_store_theme_choose', {
			theme: slug,
			location,
		} );

		if ( slug !== activeTheme && isInstalled ) {
			this.activateTheme( slug );
		} else if ( slug !== activeTheme && getPriceValue( price ) <= 0 ) {
			this.installTheme( slug );
		} else {
			updateProfileItems( { theme: slug } );
		}
	}

	installTheme( slug ) {
		const { createNotice } = this.props;

		apiFetch( {
			path: '/wc-admin/onboarding/themes/install?theme=' + slug,
			method: 'POST',
		} )
			.then( () => {
				this.activateTheme( slug );
			} )
			.catch( ( response ) => {
				this.setState( { chosen: null } );
				createNotice( 'error', response.message );
			} );
	}

	activateTheme( slug ) {
		const { createNotice, updateProfileItems } = this.props;

		apiFetch( {
			path: '/wc-admin/onboarding/themes/activate?theme=' + slug,
			method: 'POST',
		} )
			.then( ( response ) => {
				createNotice(
					'success',
					sprintf(
						/* translators: The name of the theme that was installed and activated */
						__(
							'%s was installed and activated on your site',
							'woocommerce'
						),
						response.name
					)
				);
				setAdminSetting( 'onboarding', {
					...getAdminSetting( 'onboarding', {} ),
					activeTheme: response.slug,
				} );
				updateProfileItems( { theme: slug } );
			} )
			.catch( ( response ) => {
				this.setState( { chosen: null } );
				createNotice( 'error', response.message );
			} );
	}

	onClosePreview() {
		const { demo } = this.state;
		recordEvent( 'storeprofiler_store_theme_demo_close', {
			theme: demo.slug,
		} );
		document.body.classList.remove( 'woocommerce-theme-preview-active' );
		this.setState( { demo: null } );
	}

	openDemo( theme ) {
		recordEvent( 'storeprofiler_store_theme_live_demo', {
			theme: theme.slug,
		} );
		document.body.classList.add( 'woocommerce-theme-preview-active' );
		this.setState( { demo: theme } );
	}

	renderTheme( theme ) {
		const {
			demo_url: demoUrl,
			has_woocommerce_support: hasSupport,
			image,
			slug,
			title,
		} = theme;
		const { chosen } = this.state;
		const { activeTheme = '' } = getAdminSetting( 'onboarding', {} );

		return (
			<Card className="woocommerce-profile-wizard__theme" key={ slug }>
				<CardBody size={ null }>
					{ image && (
						<div
							className="woocommerce-profile-wizard__theme-image"
							style={ { backgroundImage: `url(${ image })` } }
							role="img"
							aria-label={ title }
						/>
					) }
				</CardBody>
				<CardBody className="woocommerce-profile-wizard__theme-details">
					<H className="woocommerce-profile-wizard__theme-name">
						{ title }
						{ ! hasSupport && (
							<Tooltip
								text={ __(
									'This theme does not support WooCommerce.',
									'woocommerce'
								) }
							>
								<span>
									<InfoIcon
										role="img"
										aria-hidden="true"
										focusable="false"
									/>
								</span>
							</Tooltip>
						) }
					</H>
					<p className="woocommerce-profile-wizard__theme-status">
						{ this.getThemeStatus( theme ) }
					</p>
				</CardBody>
				<CardFooter>
					{ slug === activeTheme ? (
						<Button
							isPrimary
							onClick={ () => this.onChoose( theme, 'card' ) }
							isBusy={ chosen === slug }
							disabled={ chosen === slug }
						>
							{ __(
								'Continue with my active theme',
								'woocommerce'
							) }
						</Button>
					) : (
						<Button
							isSecondary
							onClick={ () => this.onChoose( theme, 'card' ) }
							isBusy={ chosen === slug }
							disabled={ chosen === slug }
						>
							{ __( 'Choose', 'woocommerce' ) }
						</Button>
					) }
					{ demoUrl && (
						<Button
							isTertiary
							onClick={ () => this.openDemo( theme ) }
						>
							{ __( 'Live demo', 'woocommerce' ) }
						</Button>
					) }
				</CardFooter>
			</Card>
		);
	}

	getThemeStatus( theme ) {
		const { is_installed: isInstalled, price, slug } = theme;
		const { activeTheme = '' } = getAdminSetting( 'onboarding', {} );

		if ( activeTheme === slug ) {
			return __( 'Currently active theme', 'woocommerce' );
		}
		if ( isInstalled ) {
			return __( 'Installed', 'woocommerce' );
		} else if ( getPriceValue( price ) <= 0 ) {
			return __( 'Free', 'woocommerce' );
		}

		return sprintf(
			__( '%s per year', 'woocommerce' ),
			decodeEntities( price )
		);
	}

	doesActiveThemeSupportWooCommerce() {
		const { activeTheme = '' } = getAdminSetting( 'onboarding', {} );
		const allThemes = this.getThemes();
		const currentTheme = allThemes.find(
			( theme ) => theme.slug === activeTheme
		);
		return currentTheme && currentTheme.has_woocommerce_support;
	}

	onSelectTab( tab ) {
		recordEvent( 'storeprofiler_store_theme_navigate', {
			navigation: tab,
		} );
		this.setState( { activeTab: tab } );
	}

	getPriceValue( string ) {
		return Number( decodeEntities( string ).replace( /[^0-9.-]+/g, '' ) );
	}

	getThemes( activeTab = 'all' ) {
		const { uploadedThemes } = this.state;
		const { activeTheme = '', themes = [] } = getAdminSetting(
			'onboarding',
			{}
		);
		const allThemes = [
			...themes.filter(
				( theme ) =>
					theme &&
					( theme.has_woocommerce_support ||
						theme.slug === activeTheme )
			),
			...uploadedThemes,
		];

		switch ( activeTab ) {
			case 'paid':
				return allThemes.filter(
					( theme ) => getPriceValue( theme.price ) > 0
				);
			case 'free':
				return allThemes.filter(
					( theme ) => getPriceValue( theme.price ) <= 0
				);
			case 'all':
			default:
				return allThemes;
		}
	}

	handleUploadComplete( upload ) {
		if ( upload.status === 'success' && upload.theme_data ) {
			this.setState( {
				uploadedThemes: [
					...this.state.uploadedThemes,
					upload.theme_data,
				],
			} );

			recordEvent( 'storeprofiler_store_theme_upload', {
				theme: upload.theme_data.slug,
			} );
		}
	}

	render() {
		const { activeTab, chosen, demo } = this.state;
		const themes = this.getThemes( activeTab );
		const activeThemeSupportsWooCommerce =
			this.doesActiveThemeSupportWooCommerce();

		return (
			<Fragment>
				<div className="woocommerce-profile-wizard__step-header">
					<Text
						variant="title.small"
						as="h2"
						size="20"
						lineHeight="28px"
					>
						{ __( 'Choose a theme', 'woocommerce' ) }
					</Text>
					<Text variant="body" as="p">
						{ __(
							"Choose how your store appears to customers. And don't worry, you can always switch themes and edit them later.",
							'woocommerce'
						) }
					</Text>
				</div>
				<TabPanel
					className="woocommerce-profile-wizard__themes-tab-panel"
					activeClass="is-active"
					onSelect={ this.onSelectTab }
					tabs={ [
						{
							name: 'all',
							title: __( 'All themes', 'woocommerce' ),
						},
						{
							name: 'paid',
							title: __( 'Paid themes', 'woocommerce' ),
						},
						{
							name: 'free',
							title: __( 'Free themes', 'woocommerce' ),
						},
					] }
				>
					{ () => (
						<div className="woocommerce-profile-wizard__themes">
							{ themes &&
								themes.map( ( theme ) =>
									this.renderTheme( theme )
								) }
							<ThemeUploader
								onUploadComplete={ this.handleUploadComplete }
							/>
						</div>
					) }
				</TabPanel>
				{ demo && (
					<ThemePreview
						theme={ demo }
						onChoose={ () => this.onChoose( demo, 'card' ) }
						onClose={ this.onClosePreview }
						isBusy={ chosen === demo.slug }
					/>
				) }
				{ activeThemeSupportsWooCommerce && (
					<SkipButton
						onSkipped={ () => {
							const { activeTheme = '' } = getAdminSetting(
								'onboarding',
								{}
							);
							recordEvent(
								'storeprofiler_store_theme_skip_step',
								{ activeTheme }
							);
						} }
					/>
				) }
			</Fragment>
		);
	}
}

export default compose(
	withSelect( ( select ) => {
		const { getProfileItems, getOnboardingError, isOnboardingRequesting } =
			select( ONBOARDING_STORE_NAME );

		return {
			isError: Boolean( getOnboardingError( 'updateProfileItems' ) ),
			isUpdatingProfileItems:
				isOnboardingRequesting( 'updateProfileItems' ),
			profileItems: getProfileItems(),
		};
	} ),
	withDispatch( ( dispatch ) => {
		const { updateProfileItems } = dispatch( ONBOARDING_STORE_NAME );
		const { createNotice } = dispatch( 'core/notices' );

		return {
			createNotice,
			updateProfileItems,
		};
	} )
)( Theme );