diff --git a/client/my-sites/themes/activation-modal.jsx b/client/my-sites/themes/activation-modal.jsx index e7c57d75d99c..7be1afb10847 100644 --- a/client/my-sites/themes/activation-modal.jsx +++ b/client/my-sites/themes/activation-modal.jsx @@ -1,25 +1,30 @@ import { recordTracksEvent } from '@automattic/calypso-analytics'; -import { Dialog, Gridicon, Button, ScreenReaderText } from '@automattic/components'; +import { getPlan } from '@automattic/calypso-products'; +import { Button, Dialog, Gridicon, ScreenReaderText } from '@automattic/components'; import { Onboard } from '@automattic/data-stores'; import { localizeUrl } from '@automattic/i18n-utils'; +import { CheckboxControl } from '@wordpress/components'; import { translate } from 'i18n-calypso'; import PropTypes from 'prop-types'; import { Component } from 'react'; import { connect } from 'react-redux'; +import { THEME_TIERS } from 'calypso/components/theme-tier/constants'; import TrackComponentView from 'calypso/lib/analytics/track-component-view'; import { getSiteDomain } from 'calypso/state/sites/selectors'; import { acceptActivationModal, - dismissActivationModal, activate as activateTheme, + dismissActivationModal, } from 'calypso/state/themes/actions'; import { + getActiveTheme, getCanonicalTheme, + getThemeIdToActivate, + getThemeTierForTheme, isActivatingTheme, isThemeActive, + isThemeAllowedOnSite, shouldShowActivationModal, - getThemeIdToActivate, - getActiveTheme, } from 'calypso/state/themes/selectors'; import { getSelectedSiteId } from 'calypso/state/ui/selectors'; @@ -45,21 +50,43 @@ export class ActivationModal extends Component { newThemeId: PropTypes.string, }; + constructor( props ) { + super( props ); + const { isCurrentThemeAllowedOnSite } = props; + + this.state = { + checkboxChecked: isCurrentThemeAllowedOnSite, + }; + } + + onCheckboxChange = ( isChecked ) => { + this.setState( { checkboxChecked: isChecked } ); + }; + closeModalHandler = ( action = 'dismiss' ) => () => { - const { newThemeId, siteId, source } = this.props; + const { newThemeId, activeTheme, siteId, source, isCurrentThemeAllowedOnSite } = this.props; if ( 'activeTheme' === action ) { this.props.acceptActivationModal( newThemeId ); + const eventName = ! isCurrentThemeAllowedOnSite + ? 'calypso_theme_switch_plan_warning_accepted' + : 'calypso_theme_autoloading_homepage_modal_activate_click'; - recordTracksEvent( 'calypso_theme_autoloading_homepage_modal_activate_click', { + recordTracksEvent( eventName, { theme: newThemeId, + activeTheme: activeTheme.id, } ); return this.props.activateTheme( newThemeId, siteId, { source } ); } else if ( 'dismiss' === action ) { - recordTracksEvent( 'calypso_theme_autoloading_homepage_modal_dismiss', { + const eventName = ! isCurrentThemeAllowedOnSite + ? 'calypso_theme_switch_plan_warning_declined' + : 'calypso_theme_autoloading_homepage_modal_dismiss'; + + recordTracksEvent( eventName, { action: 'escape', theme: newThemeId, + activeTheme: activeTheme.id, } ); return this.props.dismissActivationModal(); } @@ -67,6 +94,8 @@ export class ActivationModal extends Component { render() { const { + isCurrentThemeAllowedOnSite, + activeThemeRequiredPlan, newTheme, activeTheme, isActivating, @@ -89,6 +118,10 @@ export class ActivationModal extends Component { return null; } + const eventName = ! isCurrentThemeAllowedOnSite + ? 'calypso_theme_switch_plan_warning_modal_view' + : 'calypso_theme_autoloading_homepage_modal_view'; + const isAIAssembler = siteIntent === SiteIntent.AIAssembler && activeTheme.id === 'assembler'; const translationArgs = { args: { @@ -127,8 +160,8 @@ export class ActivationModal extends Component { onClose={ this.closeModalHandler( 'dismiss' ) } >