MetaboxFill.js

/* External dependencies */
import { useSelect } from "@wordpress/data";
import { Fragment, lazy, Suspense } from "@wordpress/element";
import { Fill } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import PropTypes from "prop-types";

/* Internal dependencies */
import WincherSEOPerformanceModal from "../../containers/WincherSEOPerformanceModal";
import CollapsibleCornerstone from "../../containers/CollapsibleCornerstone";
import SnippetEditor from "../../containers/SnippetEditor";
import Warning from "../../containers/Warning";
import { KeywordInput, ReadabilityAnalysis, SeoAnalysis, InclusiveLanguageAnalysis, ContentBlocks } from "@yoast/externals/components";
import InsightsCollapsible from "../../insights/components/insights-collapsible";
import MetaboxCollapsible from "../MetaboxCollapsible";
import { InternalLinkingSuggestionsUpsell } from "../modals/InternalLinkingSuggestionsUpsell";
import SidebarItem from "../SidebarItem";
import AdvancedSettings from "../../containers/AdvancedSettings";
import SocialMetadataPortal from "../portals/SocialMetadataPortal";
import SchemaTabContainer from "../../containers/SchemaTab";
import SEMrushRelatedKeyphrases from "../../containers/SEMrushRelatedKeyphrases";
import KeywordUpsell from "../modals/KeywordUpsell";
import { BlackFridayPromotion } from "../BlackFridayPromotion";
import { withMetaboxWarningsCheck } from "../higherorder/withMetaboxWarningsCheck";
import isBlockEditor from "../../helpers/isBlockEditor";
import useToggleMarkerStatus from "./hooks/useToggleMarkerStatus";
import { EditorIntro } from "../EditorIntro";

// Lazy-loaded so the planner module is not bundled into block-editor.js.
const ContentPlannerEditorItem = lazy( () => import(
	/* webpackChunkName: "ai-content-planner-editor" */
	"../../ai-content-planner/containers/content-planner-editor-item"
) );

const BlackFridayPromotionWithMetaboxWarningsCheck = withMetaboxWarningsCheck( BlackFridayPromotion );

/* eslint-disable complexity */
/**
 * Creates the Metabox component.
 *
 * @param {Object} settings The feature toggles.
 *
 * @returns {wp.Element} The Metabox component.
 */
export default function MetaboxFill( { settings } ) {
	const { isTerm, isPost, isAiFeatureActive } = useSelect( ( select ) => ( {
		isTerm: select( "yoast-seo/editor" ).getIsTerm(),
		isPost: select( "yoast-seo/editor" ).getPostType() === "post",
		isAiFeatureActive: select( "yoast-seo/editor" ).getPreference( "isAiFeatureActive" ),
	} ), [] );

	const isBlockEditorActive = isBlockEditor();

	if ( isBlockEditorActive ) {
		useToggleMarkerStatus();
	}

	return (
		<>
			<Fill name="YoastMetabox">
				<SidebarItem
					key="warning"
					renderPriority={ 0 }
				>
					<Warning />
				</SidebarItem>
				{ isBlockEditorActive ? (
					<SidebarItem
						key="editor-intro"
						renderPriority={ 1 }
					>
						<EditorIntro withPromptForContentSuggestions={ isAiFeatureActive && isPost }>
							<BlackFridayPromotionWithMetaboxWarningsCheck location={ "metabox" } inEditorIntro={ true } />
						</EditorIntro>
					</SidebarItem>
				) : (
					<SidebarItem
						key="time-constrained-notification"
						renderPriority={ 1 }
					>
						<BlackFridayPromotionWithMetaboxWarningsCheck location={ "metabox" } />
					</SidebarItem>
				) }
				{ isPost && isBlockEditorActive && isAiFeatureActive && <SidebarItem key="content-planner" renderPriority={ 2 }>
					<Suspense fallback={ null }>
						<ContentPlannerEditorItem location="metabox" />
					</Suspense>
				</SidebarItem> }
				{ settings.isKeywordAnalysisActive && <SidebarItem key="keyword-input" renderPriority={ 8 }>
					<KeywordInput
						isSEMrushIntegrationActive={ settings.isSEMrushIntegrationActive }
					/>
					{ ! window.wpseoScriptData.metabox.isPremium && <Fill name="YoastRelatedKeyphrases">
						<SEMrushRelatedKeyphrases />
					</Fill> }
				</SidebarItem> }
				<SidebarItem key="search-appearance" renderPriority={ 9 }>
					<MetaboxCollapsible
						id={ "yoast-snippet-editor-metabox" }
						title={ __( "Search appearance", "wordpress-seo" ) } initialIsOpen={ true }
					>
						<SnippetEditor hasPaperStyle={ false } />
					</MetaboxCollapsible>
				</SidebarItem>
				{ settings.isContentAnalysisActive && <SidebarItem key="readability-analysis" renderPriority={ 10 }>
					<ReadabilityAnalysis
						shouldUpsell={ settings.shouldUpsell }
					/>
				</SidebarItem> }
				{ settings.isKeywordAnalysisActive && <SidebarItem key="seo-analysis" renderPriority={ 20 }>
					<Fragment>
						<SeoAnalysis
							shouldUpsell={ settings.shouldUpsell }
						/>
					</Fragment>
				</SidebarItem> }
				{ settings.isInclusiveLanguageAnalysisActive && <SidebarItem key="inclusive-language-analysis" renderPriority={ 21 }>
					<InclusiveLanguageAnalysis />
				</SidebarItem> }
				{ settings.isKeywordAnalysisActive && <SidebarItem key="additional-keywords-upsell" renderPriority={ 22 }>
					{ settings.shouldUpsell && <KeywordUpsell /> }
				</SidebarItem> }
				{ settings.isKeywordAnalysisActive && settings.isWincherIntegrationActive &&
					<SidebarItem key="wincher-seo-performance" renderPriority={ 23 }>
						<WincherSEOPerformanceModal location="metabox" />
					</SidebarItem>
				}
				{ settings.shouldUpsell && ! isTerm && <SidebarItem key="internal-linking-suggestions-upsell" renderPriority={ 25 }>
					<InternalLinkingSuggestionsUpsell />
				</SidebarItem> }
				{ settings.isCornerstoneActive && <SidebarItem key="cornerstone" renderPriority={ 30 }>
					<CollapsibleCornerstone />
				</SidebarItem> }
				{ settings.displayAdvancedTab && <SidebarItem key="advanced" renderPriority={ 40 }>
					<MetaboxCollapsible id={ "collapsible-advanced-settings" } title={ __( "Advanced", "wordpress-seo" ) }>
						<AdvancedSettings />
					</MetaboxCollapsible>
				</SidebarItem> }
				{ settings.displaySchemaSettings && <SidebarItem key="schema" renderPriority={ 50 }>
					<SchemaTabContainer />
				</SidebarItem> }
				{ isBlockEditorActive &&
					<SidebarItem key="content-blocks" renderPriority={ 24 }>
						<ContentBlocks />
					</SidebarItem>
				}
				<SidebarItem
					key="social"
					renderPriority={ -1 }
				>
					<SocialMetadataPortal target="wpseo-section-social" />
				</SidebarItem>
				{ settings.isInsightsEnabled && <SidebarItem key="insights" renderPriority={ 52 }>
					<InsightsCollapsible location="metabox" />
				</SidebarItem> }
			</Fill>
		</>
	);
}

MetaboxFill.propTypes = {
	settings: PropTypes.object.isRequired,
};

/* eslint-enable complexity */