diff --git a/client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx b/client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx index f485bdab20aa7..7652e7e1e99bd 100644 --- a/client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx +++ b/client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx @@ -2,18 +2,29 @@ import { HelpCenter } from '@automattic/data-stores'; import { useDispatch } from '@wordpress/data'; import { useCallback } from 'react'; import AsyncLoad from 'calypso/components/async-load'; +import { useExperiment } from 'calypso/lib/explat'; const HELP_CENTER_STORE = HelpCenter.register(); const AsyncHelpCenter = () => { const { setShowHelpCenter } = useDispatch( HELP_CENTER_STORE ); + const [ isLoading, experimentAssignment ] = useExperiment( + 'calypso_helpcenter_new_support_flow' + ); const handleClose = useCallback( () => { setShowHelpCenter( false ); }, [ setShowHelpCenter ] ); return ( - + ); }; diff --git a/client/layout/index.jsx b/client/layout/index.jsx index 4c865474efeb0..ac458b1eba632 100644 --- a/client/layout/index.jsx +++ b/client/layout/index.jsx @@ -27,6 +27,7 @@ import EmptyMasterbar from 'calypso/layout/masterbar/empty'; import MasterbarLoggedIn from 'calypso/layout/masterbar/logged-in'; import OfflineStatus from 'calypso/layout/offline-status'; import isA8CForAgencies from 'calypso/lib/a8c-for-agencies/is-a8c-for-agencies'; +import { useExperiment } from 'calypso/lib/explat'; import { getGoogleMailServiceFamily } from 'calypso/lib/gsuite'; import isJetpackCloud from 'calypso/lib/jetpack/is-jetpack-cloud'; import { isWcMobileApp, isWpMobileApp } from 'calypso/lib/mobile-app'; @@ -149,6 +150,9 @@ function HelpCenterLoader( { sectionName, loadHelpCenter, currentRoute } ) { const selectedSite = useSelector( getSelectedSite ); const primarySiteSlug = useSelector( getPrimarySiteSlug ); const primarySite = useSelector( ( state ) => getSiteBySlug( state, primarySiteSlug ) ); + const [ isLoading, experimentAssignment ] = useExperiment( + 'calypso_helpcenter_new_support_flow' + ); if ( ! loadHelpCenter ) { return null; @@ -169,6 +173,9 @@ function HelpCenterLoader( { sectionName, loadHelpCenter, currentRoute } ) { hidden={ sectionName === 'gutenberg-editor' && isDesktop } onboardingUrl={ onboardingUrl() } googleMailServiceFamily={ getGoogleMailServiceFamily() } + shouldUseHelpCenterExperience={ + ! isLoading && experimentAssignment?.variationName === 'treatment' + } /> ); } diff --git a/packages/help-center/src/components/help-center-chat.tsx b/packages/help-center/src/components/help-center-chat.tsx index 959e85204ab18..5bd662205543b 100644 --- a/packages/help-center/src/components/help-center-chat.tsx +++ b/packages/help-center/src/components/help-center-chat.tsx @@ -3,7 +3,6 @@ * External Dependencies */ import { recordTracksEvent } from '@automattic/calypso-analytics'; -import config from '@automattic/calypso-config'; import OdieAssistantProvider, { OdieAssistant } from '@automattic/odie-client'; import { useEffect } from '@wordpress/element'; import { useNavigate, useParams } from 'react-router-dom'; @@ -24,7 +23,8 @@ export function HelpCenterChat( { const navigate = useNavigate(); const shouldUseWapuu = useShouldUseWapuu(); const preventOdieAccess = ! shouldUseWapuu && ! isUserEligibleForPaidSupport; - const { currentUser, site, canConnectToZendesk } = useHelpCenterContext(); + const { currentUser, site, shouldUseHelpCenterExperience, canConnectToZendesk } = + useHelpCenterContext(); const { id: conversationId = null } = useParams(); useEffect( () => { @@ -37,11 +37,11 @@ export function HelpCenterChat( { } }, [] ); - const odieVersion = config.isEnabled( 'help-center-experience' ) ? '14.0.3' : null; + const odieVersion = shouldUseHelpCenterExperience ? '14.0.3' : null; return ( { - const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' ); + const { shouldUseHelpCenterExperience } = useHelpCenterContext(); const { canConnectToZendesk } = useHelpCenterContext(); const { __ } = useI18n(); const { data: supportInteractionsResolved } = useGetSupportInteractions( diff --git a/packages/help-center/src/components/help-center-feedback-form.tsx b/packages/help-center/src/components/help-center-feedback-form.tsx index 4fb427580c7fc..99365bdc6edb5 100644 --- a/packages/help-center/src/components/help-center-feedback-form.tsx +++ b/packages/help-center/src/components/help-center-feedback-form.tsx @@ -1,5 +1,4 @@ import { recordTracksEvent } from '@automattic/calypso-analytics'; -import config from '@automattic/calypso-config'; import { getPlan } from '@automattic/calypso-products'; import { HelpCenterSite } from '@automattic/data-stores'; import { GetSupport } from '@automattic/odie-client/src/components/message/get-support'; @@ -36,9 +35,7 @@ const HelpCenterFeedbackForm = ( { const { data } = useSupportStatus(); const isUserEligibleForPaidSupport = data?.eligibility.is_user_eligible ?? false; - - const { sectionName, site } = useHelpCenterContext(); - const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' ); + const { sectionName, site, shouldUseHelpCenterExperience } = useHelpCenterContext(); const navigate = useNavigate(); const productSlug = ( site as HelpCenterSite )?.plan?.product_slug; const plan = getPlan( productSlug ); diff --git a/packages/help-center/src/components/help-center-header.tsx b/packages/help-center/src/components/help-center-header.tsx index e3e98e5b04ef1..3532a42d839f0 100644 --- a/packages/help-center/src/components/help-center-header.tsx +++ b/packages/help-center/src/components/help-center-header.tsx @@ -1,5 +1,4 @@ /* eslint-disable no-restricted-imports */ -import config from '@automattic/calypso-config'; import { Gridicon } from '@automattic/components'; import { EllipsisMenu } from '@automattic/odie-client'; import { useManageSupportInteraction } from '@automattic/odie-client/src/data'; @@ -12,6 +11,7 @@ import { useI18n } from '@wordpress/react-i18n'; import clsx from 'clsx'; import { Route, Routes, useLocation, useSearchParams } from 'react-router-dom'; import { v4 as uuidv4 } from 'uuid'; +import { useHelpCenterContext } from '../contexts/HelpCenterContext'; import { usePostByUrl } from '../hooks'; import { useResetSupportInteraction } from '../hooks/use-reset-support-interaction'; import { DragIcon } from '../icons'; @@ -106,7 +106,7 @@ const HeaderText = () => { }; }, [] ); - const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' ); + const { shouldUseHelpCenterExperience } = useHelpCenterContext(); useEffect( () => { if ( currentSupportInteraction ) { @@ -156,7 +156,8 @@ const Content = ( { onMinimize }: { onMinimize?: () => void } ) => { const { __ } = useI18n(); const { pathname } = useLocation(); - const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' ); + const { shouldUseHelpCenterExperience } = useHelpCenterContext(); + const shouldDisplayClearChatButton = shouldUseHelpCenterExperience && pathname.startsWith( '/odie' ); const isHelpCenterHome = pathname === '/'; @@ -190,6 +191,7 @@ const ContentMinimized = ( { const { __ } = useI18n(); const formattedUnreadCount = unreadCount > 9 ? '9+' : unreadCount; + const { shouldUseHelpCenterExperience } = useHelpCenterContext(); return ( <>

) : null } - { shouldDisplayRecentConversations && } + { shouldUseHelpCenterExperience && } { sections } ); diff --git a/packages/help-center/src/components/help-center-smooch.tsx b/packages/help-center/src/components/help-center-smooch.tsx index d5a80c62a6e9f..2da34a2207953 100644 --- a/packages/help-center/src/components/help-center-smooch.tsx +++ b/packages/help-center/src/components/help-center-smooch.tsx @@ -54,7 +54,8 @@ const HelpCenterSmooch: React.FC = () => { const { isMessagingScriptLoaded } = useLoadZendeskMessaging( 'zendesk_support_chat_key', isHelpCenterShown && isEligibleForChat, - isEligibleForChat + isEligibleForChat, + true ); const { setIsChatLoaded, setUnreadCount, setZendeskClientId } = useDataStoreDispatch( HELP_CENTER_STORE ); diff --git a/packages/help-center/src/components/help-center.tsx b/packages/help-center/src/components/help-center.tsx index a0e9ca4336906..2514522838940 100644 --- a/packages/help-center/src/components/help-center.tsx +++ b/packages/help-center/src/components/help-center.tsx @@ -27,9 +27,9 @@ const HelpCenter: React.FC< Container > = ( { handleClose, hidden, currentRoute = window.location.pathname + window.location.search, + shouldUseHelpCenterExperience, } ) => { const portalParent = useRef( document.createElement( 'div' ) ).current; - const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' ); const { isHelpCenterShown, isMinimized } = useSelect( ( select ) => { const helpCenterSelect: HelpCenterSelect = select( HELP_CENTER_STORE ); @@ -82,9 +82,12 @@ const HelpCenter: React.FC< Container > = ( { export default function ContextualizedHelpCenter( props: Container & HelpCenterRequiredInformation ) { + const shouldUseHelpCenterExperience = + config.isEnabled( 'help-center-experience' ) || props.shouldUseHelpCenterExperience; + return ( - - + + ); } diff --git a/packages/help-center/src/contexts/HelpCenterContext.tsx b/packages/help-center/src/contexts/HelpCenterContext.tsx index 6471646b8d266..98c6f07e099ee 100644 --- a/packages/help-center/src/contexts/HelpCenterContext.tsx +++ b/packages/help-center/src/contexts/HelpCenterContext.tsx @@ -13,6 +13,7 @@ export type HelpCenterRequiredInformation = { googleMailServiceFamily: string; onboardingUrl: string; canConnectToZendesk: boolean; + shouldUseHelpCenterExperience?: boolean; }; const HelpCenterRequiredContext = createContext< HelpCenterRequiredInformation >( { @@ -35,6 +36,7 @@ const HelpCenterRequiredContext = createContext< HelpCenterRequiredInformation > googleMailServiceFamily: '', onboardingUrl: '', canConnectToZendesk: false, + shouldUseHelpCenterExperience: false, } ); export const HelpCenterRequiredContextProvider: React.FC< { diff --git a/packages/help-center/src/types.ts b/packages/help-center/src/types.ts index 98b71cbe57992..33c67d60aee51 100644 --- a/packages/help-center/src/types.ts +++ b/packages/help-center/src/types.ts @@ -9,6 +9,7 @@ export interface Container { hidden?: boolean; currentRoute?: string; openingCoordinates?: ReturnType< typeof useOpeningCoordinates >; + shouldUseHelpCenterExperience?: boolean; } export interface PostObject { diff --git a/packages/odie-client/src/context/index.tsx b/packages/odie-client/src/context/index.tsx index 94dacb053bf29..80036eef6bf8d 100644 --- a/packages/odie-client/src/context/index.tsx +++ b/packages/odie-client/src/context/index.tsx @@ -1,5 +1,4 @@ import { recordTracksEvent } from '@automattic/calypso-analytics'; -import config from '@automattic/calypso-config'; import { useResetSupportInteraction } from '@automattic/help-center/src/hooks/use-reset-support-interaction'; import { HELP_CENTER_STORE } from '@automattic/help-center/src/stores'; import { useSelect } from '@wordpress/data'; @@ -70,6 +69,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( { version = null, currentUser, children, + shouldUseHelpCenterExperience, } ) => { const { botNameSlug, isMinimized, isChatLoaded } = useSelect( ( select ) => { const store = select( HELP_CENTER_STORE ) as HelpCenterSelect; @@ -91,7 +91,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( { */ const { mainChatState, setMainChatState } = useGetCombinedChat( canConnectToZendesk, - config.isEnabled( 'help-center-experience' ) + shouldUseHelpCenterExperience ); /** @@ -188,7 +188,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( { setChatStatus, setMessageLikedStatus, setWaitAnswerToFirstMessageFromHumanSupport, - shouldUseHelpCenterExperience: config.isEnabled( 'help-center-experience' ), + shouldUseHelpCenterExperience: shouldUseHelpCenterExperience ?? false, trackEvent, version: overriddenVersion, waitAnswerToFirstMessageFromHumanSupport, diff --git a/packages/zendesk-client/src/use-load-zendesk-messaging.ts b/packages/zendesk-client/src/use-load-zendesk-messaging.ts index 7fd7a5aeb7cb4..c7b6d43a2c619 100644 --- a/packages/zendesk-client/src/use-load-zendesk-messaging.ts +++ b/packages/zendesk-client/src/use-load-zendesk-messaging.ts @@ -14,13 +14,14 @@ import type { ZendeskConfigName } from './types'; export function useLoadZendeskMessaging( keyConfigName: ZendeskConfigName, enabled = true, - tryAuthenticating = true + tryAuthenticating = true, + shouldUseHelpCenterExperience = false ) { const [ isMessagingScriptLoaded, setMessagingScriptLoaded ] = useState( false ); const zendeskKey: string = config( keyConfigName ); const { data: authData } = useAuthenticateZendeskMessaging( isMessagingScriptLoaded && tryAuthenticating, - config.isEnabled( 'help-center-experience' ) ? 'messenger' : 'zendesk' + shouldUseHelpCenterExperience ? 'messenger' : 'zendesk' ); useEffect( () => { if ( ! enabled || isMessagingScriptLoaded ) {