De-calypsofy the Help Center

apps/editing-toolkit/editing-toolkit-plugin/help-center/class-help-center.php

@@ -124,11 +124,21 @@ public function enqueue_script() {
 			'before'
 		);
 
+		$user_id         = get_current_user_id();
+		$user            = get_userdata( $user_id );
+		$primary_site_id = $user->primary_blog;
+		$user_email      = $user->user_email;
+
 		wp_localize_script(
 			'help-center-script',
 			'helpCenterData',
 			array(
-				'currentSite' => $this->get_current_site(),
+				'currentSite'   => $this->get_current_site(),
+				'adminUrl'      => admin_url(),
+				'locale'        => get_locale(),
+				'currentUserId' => get_current_user_id(),
+				'primarySiteId' => $primary_site_id,
+				'userEmail'     => $user_email,
 			)
 		);
 

apps/editing-toolkit/editing-toolkit-plugin/help-center/src/admin-bar.js

@@ -5,7 +5,6 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useCallback } from '@wordpress/element';
 import * as ReactDOM from 'react-dom';
 import { whatsNewQueryClient } from '../../common/what-new-query-client';
-import CalypsoStateProvider from './CalypsoStateProvider';
 
 function AdminHelpCenterContent() {
 	const { setShowHelpCenter } = useDispatch( 'automattic/help-center' );
@@ -34,15 +33,27 @@ function AdminHelpCenterContent() {
 
 	button.onclick = handleToggleHelpCenter;
 
-	return <HelpCenter handleClose={ closeCallback } />;
+	return (
+		<HelpCenter
+			adminUrl={ window.helpCenterData.admin_url }
+			isJetpackSite={ window.helpCenterData.currentSite.jetpack }
+			locale={ window.helpCenterData.locale }
+			sectionName="wp-admin"
+			currentUserId={ window.helpCenterData.current_user_id }
+			currentUserEmail={ window.helpCenterData.userEmail }
+			isBusinessOrEcomPlanUser={ window.helpCenterData.is_business_or_ecommerce_plan_user }
+			selectedSiteId={ window.helpCenterData.current }
+			hasPurchases={ false }
+			primarySiteId={ window.helpCenterData.primary_site_id }
+			handleClose={ closeCallback }
+		/>
+	);
 }
 
 if ( window?.helpCenterAdminBar?.isLoaded ) {
 	ReactDOM.render(
 		<QueryClientProvider client={ whatsNewQueryClient }>
-			<CalypsoStateProvider>
-				<AdminHelpCenterContent />
-			</CalypsoStateProvider>
+			<AdminHelpCenterContent />
 		</QueryClientProvider>,
 		document.getElementById( 'help-center-masterbar' )
 	);

apps/editing-toolkit/editing-toolkit-plugin/help-center/src/help-center.js

@@ -1,23 +1,18 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import HelpCenter, { HelpIcon } from '@automattic/help-center';
-import { LocaleProvider } from '@automattic/i18n-utils';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { Button, Fill } from '@wordpress/components';
 import { useMediaQuery } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
 import clsx from 'clsx';
-import { useSelector } from 'react-redux';
-import { getSectionName } from 'calypso/state/ui/selectors';
 import { whatsNewQueryClient } from '../../common/what-new-query-client';
-import CalypsoStateProvider from './CalypsoStateProvider';
 import useActionHooks from './use-action-hooks';
 
 function HelpCenterContent() {
 	const [ helpIconRef, setHelpIconRef ] = useState();
 	const isDesktop = useMediaQuery( '(min-width: 480px)' );
-	const sectionName = useSelector( getSectionName );
 	const [ showHelpIcon, setShowHelpIcon ] = useState( false );
 	const { setShowHelpCenter } = useDispatch( 'automattic/help-center' );
 
@@ -27,7 +22,7 @@ function HelpCenterContent() {
 		recordTracksEvent( `calypso_inlinehelp_${ show ? 'close' : 'show' }`, {
 			force_site_id: true,
 			location: 'help-center',
-			section: sectionName,
+			section: 'gutenberg-editor',
 		} );
 
 		setShowHelpCenter( ! show );
@@ -67,7 +62,19 @@ function HelpCenterContent() {
 	return (
 		<>
 			{ isDesktop && showHelpIcon && <Fill name="PinnedItems/core">{ content }</Fill> }
-			<HelpCenter handleClose={ closeCallback } />
+			<HelpCenter
+				adminUrl={ window.helpCenterData.admin_url }
+				isJetpackSite={ window.helpCenterData.currentSite.jetpack }
+				locale={ window.helpCenterData.locale }
+				sectionName="gutenberg-editor"
+				currentUserId={ window.helpCenterData.current_user_id }
+				currentUserEmail={ window.helpCenterData.userEmail }
+				isBusinessOrEcomPlanUser={ window.helpCenterData.is_business_or_ecommerce_plan_user }
+				selectedSiteId={ window.helpCenterData.current }
+				hasPurchases={ false }
+				primarySiteId={ window.helpCenterData.primary_site_id }
+				handleClose={ closeCallback }
+			/>
 		</>
 	);
 }
@@ -76,11 +83,7 @@ registerPlugin( 'etk-help-center', {
 	render: () => {
 		return (
 			<QueryClientProvider client={ whatsNewQueryClient }>
-				<CalypsoStateProvider>
-					<LocaleProvider localeSlug={ window.helpCenterLocale?.locale }>
-						<HelpCenterContent />
-					</LocaleProvider>
-				</CalypsoStateProvider>
+				<HelpCenterContent />
 			</QueryClientProvider>
 		);
 	},

client/blocks/inline-help/inline-help-search-card.tsx

@@ -2,11 +2,8 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import debugFactory from 'debug';
 import { useTranslate } from 'i18n-calypso';
-import PropTypes from 'prop-types';
 import { useRef, useEffect } from 'react';
 import SearchCard from 'calypso/components/search-card';
-import { useSelector } from 'calypso/state';
-import { getSectionName } from 'calypso/state/ui/selectors';
 
 /**
  * Module variables
@@ -19,6 +16,7 @@ type Props = {
 	isVisible?: boolean;
 	placeholder?: string;
 	onSearch?: ( query: string ) => void;
+	sectionName: string;
 };
 
 const AUTO_FOCUS_LOCATION = [ 'help-center', 'inline-help-popover' ];
@@ -29,10 +27,10 @@ const InlineHelpSearchCard = ( {
 	isVisible = true,
 	placeholder,
 	onSearch,
+	sectionName,
 }: Props ) => {
 	const cardRef = useRef< { searchInput: HTMLInputElement } >();
 	const translate = useTranslate();
-	const sectionName = useSelector( getSectionName );
 
 	// Focus in the input element.
 	useEffect( () => {
@@ -81,11 +79,4 @@ const InlineHelpSearchCard = ( {
 	);
 };
 
-InlineHelpSearchCard.propTypes = {
-	searchQuery: PropTypes.string,
-	onSearch: PropTypes.func,
-	placeholder: PropTypes.string,
-	location: PropTypes.string,
-};
-
 export default InlineHelpSearchCard;

client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx

@@ -1,6 +1,15 @@
+import { isWpComBusinessPlan, isWpComEcommercePlan } from '@automattic/calypso-products';
 import { HelpCenter, HelpCenterSelect } from '@automattic/data-stores';
+import { useLocale } from '@automattic/i18n-utils';
 import { useDispatch, useSelect } from '@wordpress/data';
 import AsyncLoad from 'calypso/components/async-load';
+import { useSelector } from 'calypso/state';
+import { getCurrentUserEmail, getCurrentUserId } from 'calypso/state/current-user/selectors';
+import { getUserPurchases } from 'calypso/state/purchases/selectors';
+import getPrimarySiteId from 'calypso/state/selectors/get-primary-site-id';
+import hasCancelableUserPurchases from 'calypso/state/selectors/has-cancelable-user-purchases';
+import { getSiteAdminUrl, isJetpackSite } from 'calypso/state/sites/selectors';
+import { getSection, getSelectedSiteId } from 'calypso/state/ui/selectors';
 
 const HELP_CENTER_STORE = HelpCenter.register();
 
@@ -10,6 +19,24 @@ const AsyncHelpCenter = () => {
 		( select ) => ( select( HELP_CENTER_STORE ) as HelpCenterSelect ).isHelpCenterShown(),
 		[]
 	);
+	const locale = useLocale();
+	const sectionName = useSelector( getSection );
+	const currentUserId = useSelector( getCurrentUserId );
+	const currentUserEmail = useSelector( getCurrentUserEmail );
+	const selectedSiteId = useSelector( getSelectedSiteId );
+	const userPurchases = useSelector( getUserPurchases );
+	const hasPurchases = useSelector( hasCancelableUserPurchases );
+	const primarySiteId = useSelector( getPrimarySiteId );
+	const adminUrl = useSelector( ( state ) => getSiteAdminUrl( state, selectedSiteId ) );
+	const isJetpack = useSelector( ( state ) =>
+		isJetpackSite( state, selectedSiteId, { treatAtomicAsJetpackSite: false } )
+	);
+	const purchases = useSelector( getUserPurchases );
+	const purchaseSlugs = purchases && purchases.map( ( purchase ) => purchase.productSlug );
+	const isBusinessOrEcomPlanUser = !! (
+		purchaseSlugs &&
+		( purchaseSlugs.some( isWpComBusinessPlan ) || purchaseSlugs.some( isWpComEcommercePlan ) )
+	);
 
 	const handleClose = () => setShowHelpCenter( false );
 
@@ -18,7 +45,22 @@ const AsyncHelpCenter = () => {
 	}
 
 	return (
-		<AsyncLoad require="@automattic/help-center" placeholder={ null } handleClose={ handleClose } />
+		<AsyncLoad
+			require="@automattic/help-center"
+			adminUrl={ adminUrl }
+			isJetpackSite={ isJetpack }
+			isBusinessOrEcomPlanUser={ isBusinessOrEcomPlanUser }
+			locale={ locale }
+			sectionName={ sectionName }
+			currentUserId={ currentUserId }
+			currentUserEmail={ currentUserEmail }
+			selectedSiteId={ selectedSiteId }
+			userPurchases={ userPurchases }
+			hasPurchases={ hasPurchases }
+			primarySiteId={ primarySiteId }
+			placeholder={ null }
+			handleClose={ handleClose }
+		/>
 	);
 };
 

client/layout/index.jsx

@@ -1,6 +1,6 @@
 import config from '@automattic/calypso-config';
 import { HelpCenter } from '@automattic/data-stores';
-import { shouldLoadInlineHelp } from '@automattic/help-center';
+import { useLocale } from '@automattic/i18n-utils';
 import { isWithinBreakpoint, subscribeIsWithinBreakpoint } from '@automattic/viewport';
 import { useBreakpoint } from '@automattic/viewport-react';
 import { useShouldShowCriticalAnnouncementsQuery } from '@automattic/whats-new';
@@ -32,9 +32,14 @@ import { isWcMobileApp, isWpMobileApp } from 'calypso/lib/mobile-app';
 import isReaderTagEmbedPage from 'calypso/lib/reader/is-reader-tag-embed-page';
 import { getMessagePathForJITM } from 'calypso/lib/route';
 import UserVerificationChecker from 'calypso/lib/user/verification-checker';
+import { useSelector } from 'calypso/state';
 import { getAdminColor } from 'calypso/state/admin-color/selectors';
 import { isOffline } from 'calypso/state/application/selectors';
-import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
+import {
+	isUserLoggedIn,
+	getCurrentUserEmail,
+	getCurrentUserId,
+} from 'calypso/state/current-user/selectors';
 import {
 	getShouldShowCollapsedGlobalSidebar,
 	getShouldShowGlobalSidebar,
@@ -43,11 +48,14 @@ import {
 import { isUserNewerThan, WEEK_IN_MILLISECONDS } from 'calypso/state/guided-tours/contexts';
 import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors';
 import { getPreference } from 'calypso/state/preferences/selectors';
+import { getUserPurchases } from 'calypso/state/purchases/selectors';
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
+import getPrimarySiteId from 'calypso/state/selectors/get-primary-site-id';
+import hasCancelableUserPurchases from 'calypso/state/selectors/has-cancelable-user-purchases';
 import isAtomicSite from 'calypso/state/selectors/is-site-automated-transfer';
 import isWooCommerceCoreProfilerFlow from 'calypso/state/selectors/is-woocommerce-core-profiler-flow';
 import { getIsOnboardingAffiliateFlow } from 'calypso/state/signup/flow/selectors';
-import { isJetpackSite } from 'calypso/state/sites/selectors';
+import { getSiteAdminUrl, isJetpackSite } from 'calypso/state/sites/selectors';
 import { isSupportSession } from 'calypso/state/support/selectors';
 import { getCurrentLayoutFocus } from 'calypso/state/ui/layout-focus/selectors';
 import {
@@ -58,7 +66,8 @@ import {
 import BodySectionCssClass from './body-section-css-class';
 import GlobalNotifications from './global-notifications';
 import LayoutLoader from './loader';
-import { handleScroll } from './utils';
+import { shouldLoadInlineHelp, handleScroll } from './utils';
+
 // goofy import for environment badge, which is SSR'd
 import 'calypso/components/environment-badge/style.scss';
 
@@ -136,16 +145,38 @@ function HelpCenterLoader( { sectionName, loadHelpCenter, currentRoute } ) {
 		setShowHelpCenter( false );
 	}, [ setShowHelpCenter ] );
 
+	const locale = useLocale();
+	const currentUserId = useSelector( getCurrentUserId );
+	const currentUserEmail = useSelector( getCurrentUserEmail );
+	const selectedSiteId = useSelector( getSelectedSiteId );
+	const userPurchases = useSelector( getUserPurchases );
+	const hasPurchases = useSelector( hasCancelableUserPurchases );
+	const primarySiteId = useSelector( getPrimarySiteId );
+	const adminUrl = useSelector( ( state ) => getSiteAdminUrl( state, selectedSiteId ) );
+	const isJetpack = useSelector( ( state ) =>
+		isJetpackSite( state, selectedSiteId, { treatAtomicAsJetpackSite: false } )
+	);
+
 	if ( ! loadHelpCenter ) {
 		return null;
 	}
 
 	return (
 		<AsyncLoad
 			require="@automattic/help-center"
+			adminUrl={ adminUrl }
+			isJetpackSite={ isJetpack }
 			placeholder={ null }
 			handleClose={ handleClose }
 			currentRoute={ currentRoute }
+			locale={ locale }
+			sectionName={ sectionName }
+			currentUserId={ currentUserId }
+			currentUserEmail={ currentUserEmail }
+			selectedSiteId={ selectedSiteId }
+			userPurchases={ userPurchases }
+			hasPurchases={ hasPurchases }
+			primarySiteId={ primarySiteId }
 			// hide Calypso's version of the help-center on Desktop, because the Editor has its own help-center
 			hidden={ sectionName === 'gutenberg-editor' && isDesktop }
 		/>