Use constants for checking theme support / template mode

ampproject · Sep 8, 2021 · 6bf38d4 · 6bf38d4
1 parent 44abf32
commit 6bf38d4
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 18 deletions.
diff --git a/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js b/assets/src/onboarding-wizard/components/template-mode-override-context-provider.js
@@ -14,6 +14,7 @@ import { createContext, useState, useEffect, useContext } from '@wordpress/eleme
 import { Options } from '../../components/options-context-provider';
 import { ReaderThemes } from '../../components/reader-themes-context-provider';
 import { User } from '../../components/user-context-provider';
+import { READER } from '../../common/constants';
 import { Navigation } from './navigation-context-provider';
 
 export const TemplateModeOverride = createContext();
@@ -61,7 +62,7 @@ export function TemplateModeOverrideContextProvider( { children } ) {
 	 * Override with transitional if the user has selected reader mode and their currently active theme is the same as the selected reader theme.
 	 */
 	useEffect( () => {
-		if ( 'done' === currentPageSlug && 'reader' === themeSupport && selectedTheme.name === currentTheme.name ) {
+		if ( 'done' === currentPageSlug && READER === themeSupport && selectedTheme.name === currentTheme.name ) {
 			if ( ! readerModeWasOverridden ) {
 				updateOptions( { theme_support: 'transitional' } );
 				setReaderModeWasOverridden( true );

diff --git a/assets/src/onboarding-wizard/pages/done/index.js b/assets/src/onboarding-wizard/pages/done/index.js
@@ -27,6 +27,7 @@ import { IconLaptopToggles } from '../../../components/svg/icon-laptop-toggles';
 import { IconLaptopSearch } from '../../../components/svg/icon-laptop-search';
 import { AMPSettingToggle } from '../../../components/amp-setting-toggle';
 import { NavMenu } from '../../../components/nav-menu';
+import { READER, STANDARD, TRANSITIONAL } from '../../../common/constants';
 import { Preview } from './preview';
 import { Saving } from './saving';
 import { usePreview } from './use-preview';
@@ -92,7 +93,7 @@ export function Done() {
 					<IconLaptopSearch />
 					{ __( 'Review', 'amp' ) }
 				</h2>
-				{ 'reader' === themeSupport && downloadedTheme === readerTheme && (
+				{ READER === themeSupport && downloadedTheme === readerTheme && (
 					<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_SUCCESS }>
 						{ __( 'Your Reader theme was automatically installed', 'amp' ) }
 					</AMPNotice>
@@ -105,12 +106,12 @@ export function Done() {
 				<p>
 					{ __( 'Your site is ready to bring great experiences to your users!', 'amp' ) }
 				</p>
-				{ 'standard' === themeSupport && (
+				{ STANDARD === themeSupport && (
 					<p>
 						{ __( 'In Standard mode there is a single AMP version of your site. Browse your site below to ensure it meets your expectations.', 'amp' ) }
 					</p>
 				) }
-				{ 'transitional' === themeSupport && (
+				{ TRANSITIONAL === themeSupport && (
 					<>
 						<p>
 							{ __( 'In Transitional mode AMP and non-AMP versions of your site are served using your currently active theme.', 'amp' ) }
@@ -120,7 +121,7 @@ export function Done() {
 						</p>
 					</>
 				) }
-				{ 'reader' === themeSupport && (
+				{ READER === themeSupport && (
 					<>
 						<p>
 							{ __( 'In Reader mode AMP is served using your selected Reader theme, and pages for your non-AMP site are served using your primary theme. Browse your site below to ensure it meets your expectations, and toggle the AMP setting to compare both versions.', 'amp' ) }
@@ -141,12 +142,12 @@ export function Done() {
 				</div>
 			</div>
 			<div className="done__preview-container">
-				{ 'reader' === themeSupport && downloadingThemeError && (
+				{ READER === themeSupport && downloadingThemeError && (
 					<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_INFO }>
 						{ __( 'There was an error downloading your Reader theme. As a result, your site is currently using the legacy reader theme. Please install your chosen theme manually.', 'amp' ) }
 					</AMPNotice>
 				) }
-				{ 'standard' !== themeSupport && (
+				{ STANDARD !== themeSupport && (
 					<AMPSettingToggle
 						text={ __( 'AMP', 'amp' ) }
 						checked={ isPreviewingAMP }

diff --git a/assets/src/onboarding-wizard/pages/done/use-preview.js b/assets/src/onboarding-wizard/pages/done/use-preview.js
@@ -13,6 +13,7 @@ import { PREVIEW_URLS } from 'amp-settings'; // From WP inline script.
  * Internal dependencies
  */
 import { Options } from '../../../components/options-context-provider';
+import { STANDARD } from '../../../common/constants';
 
 /**
  * Gets the title for the preview page selector.
@@ -47,7 +48,7 @@ const links = Object.keys( PREVIEW_URLS ).map( ( type ) => ( {
 
 export function usePreview() {
 	const { editedOptions: { theme_support: themeSupport } } = useContext( Options );
-	const [ isPreviewingAMP, setIsPreviewingAMP ] = useState( themeSupport !== 'standard' );
+	const [ isPreviewingAMP, setIsPreviewingAMP ] = useState( themeSupport !== STANDARD );
 	const [ previewedPageType, setPreviewedPageType ] = useState( links[ 0 ].type );
 
 	const toggleIsPreviewingAMP = () => setIsPreviewingAMP( ( mode ) => ! mode );

diff --git a/assets/src/onboarding-wizard/pages/template-mode/screen-ui.js b/assets/src/onboarding-wizard/pages/template-mode/screen-ui.js
@@ -66,8 +66,8 @@ export function ScreenUI( { currentThemeIsAmongReaderThemes, developerToolsOptio
 				details={ sectionText.standard.details }
 				detailsUrl="https://amp-wp.org/documentation/getting-started/standard/"
 				initialOpen={ true }
-				mode="standard"
-				previouslySelected={ savedCurrentMode === 'standard' && technicalQuestionChanged && ! firstTimeInWizard }
+				mode={ STANDARD }
+				previouslySelected={ savedCurrentMode === STANDARD && technicalQuestionChanged && ! firstTimeInWizard }
 			>
 				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ getRecommendationLevelType( recommendationLevels[ STANDARD ] ) }>
 					{ sectionText.standard.compatibility }
@@ -78,8 +78,8 @@ export function ScreenUI( { currentThemeIsAmongReaderThemes, developerToolsOptio
 				details={ sectionText.transitional.details }
 				detailsUrl="https://amp-wp.org/documentation/getting-started/transitional/"
 				initialOpen={ true }
-				mode="transitional"
-				previouslySelected={ savedCurrentMode === 'transitional' && technicalQuestionChanged && ! firstTimeInWizard }
+				mode={ TRANSITIONAL }
+				previouslySelected={ savedCurrentMode === TRANSITIONAL && technicalQuestionChanged && ! firstTimeInWizard }
 			>
 				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ getRecommendationLevelType( recommendationLevels[ TRANSITIONAL ] ) }>
 					{ sectionText.transitional.compatibility }
@@ -90,8 +90,8 @@ export function ScreenUI( { currentThemeIsAmongReaderThemes, developerToolsOptio
 				details={ sectionText.reader.details }
 				detailsUrl="https://amp-wp.org/documentation/getting-started/reader/"
 				initialOpen={ true }
-				mode="reader"
-				previouslySelected={ savedCurrentMode === 'reader' && technicalQuestionChanged && ! firstTimeInWizard }
+				mode={ READER }
+				previouslySelected={ savedCurrentMode === READER && technicalQuestionChanged && ! firstTimeInWizard }
 			>
 				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ getRecommendationLevelType( recommendationLevels[ READER ] ) }>
 					{ sectionText.reader.compatibility }

diff --git a/assets/src/settings-page/mobile-redirection.js b/assets/src/settings-page/mobile-redirection.js
@@ -8,6 +8,7 @@ import { useContext } from '@wordpress/element';
  */
 import { RedirectToggle } from '../components/redirect-toggle';
 import { Options } from '../components/options-context-provider';
+import { STANDARD } from '../common/constants';
 
 /**
  * Mobile redirection section of the settings page.
@@ -18,7 +19,7 @@ export function MobileRedirection() {
 	const { theme_support: themeSupport } = editedOptions || {};
 
 	// Don't show if the mode is standard or the themeSupport is not yet set.
-	if ( ! themeSupport || 'standard' === themeSupport ) {
+	if ( ! themeSupport || STANDARD === themeSupport ) {
 		return null;
 	}
 

diff --git a/assets/src/settings-page/paired-url-structure.js b/assets/src/settings-page/paired-url-structure.js
@@ -15,6 +15,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Options } from '../components/options-context-provider';
 import { AMPDrawer } from '../components/amp-drawer';
 import { AMPNotice, NOTICE_TYPE_INFO, NOTICE_SIZE_LARGE } from '../components/amp-notice';
+import { STANDARD } from '../common/constants';
 
 /**
  * @typedef {{name: string, slug: string, type: string}} Source
@@ -295,7 +296,7 @@ export function PairedUrlStructure( { focusedSection } ) {
 	const { theme_support: themeSupport } = editedOptions || {};
 
 	// Don't show if the mode is standard or the themeSupport is not yet set.
-	if ( ! themeSupport || 'standard' === themeSupport ) {
+	if ( ! themeSupport || STANDARD === themeSupport ) {
 		return null;
 	}
 

diff --git a/assets/src/settings-page/settings-footer.js b/assets/src/settings-page/settings-footer.js
@@ -21,6 +21,7 @@ import { Options } from '../components/options-context-provider';
 import { ReaderThemes } from '../components/reader-themes-context-provider';
 import { ErrorContext } from '../components/error-context-provider';
 import { User } from '../components/user-context-provider';
+import { READER } from '../common/constants';
 
 /**
  * Renders an error notice.
@@ -60,7 +61,7 @@ export function SettingsFooter() {
 
 	const hasChanges = hasOptionsChanges || hasDeveloperToolsOptionChange;
 	const isBusy = savingOptions || downloadingTheme || savingDeveloperToolsOption;
-	const disabled = ! hasChanges || isBusy || ! themeSupport || ( 'reader' === themeSupport && ! readerTheme );
+	const disabled = ! hasChanges || isBusy || ! themeSupport || ( READER === themeSupport && ! readerTheme );
 
 	return (
 		<section className="amp-settings-nav">

diff --git a/assets/src/settings-page/supported-templates.js b/assets/src/settings-page/supported-templates.js
@@ -15,6 +15,7 @@ import { CheckboxControl } from '@wordpress/components';
  */
 import { SupportedTemplatesToggle } from '../components/supported-templates-toggle';
 import { Options } from '../components/options-context-provider';
+import { READER } from '../common/constants';
 
 /**
  * Determine whether the supportable templates include the static front page.
@@ -231,7 +232,7 @@ export function SupportedTemplatesFieldset() {
 		reader_theme: readerTheme,
 	} = editedOptions || {};
 
-	if ( ( 'reader' === themeSupport && 'legacy' === readerTheme ) || ! supportableTemplates ) {
+	if ( ( READER === themeSupport && 'legacy' === readerTheme ) || ! supportableTemplates ) {
 		return null;
 	}