From 6396222f198401abee88323ca0ec7765712ae73f Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Thu, 5 Dec 2024 15:41:06 +0100 Subject: [PATCH 1/8] New HC to 75% of users --- .../internals/components/help-center/async.tsx | 13 +------------ client/layout/index.jsx | 10 +++------- 2 files changed, 4 insertions(+), 19 deletions(-) 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 7652e7e1e99bd..f485bdab20aa7 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,29 +2,18 @@ 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 2ac273e4d4803..a3afbac0eb506 100644 --- a/client/layout/index.jsx +++ b/client/layout/index.jsx @@ -27,7 +27,6 @@ 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'; @@ -150,9 +149,8 @@ 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' - ); + + const shouldUseHelpCenterExperience = user?.ID ? user.ID % 100 < 75 : false; if ( ! loadHelpCenter ) { return null; @@ -173,9 +171,7 @@ function HelpCenterLoader( { sectionName, loadHelpCenter, currentRoute } ) { hidden={ sectionName === 'gutenberg-editor' && isDesktop } onboardingUrl={ onboardingUrl() } googleMailServiceFamily={ getGoogleMailServiceFamily() } - shouldUseHelpCenterExperience={ - ! isLoading && experimentAssignment?.variationName === 'treatment' - } + shouldUseHelpCenterExperience={ shouldUseHelpCenterExperience } /> ); } From 8156ff6783c30951a3b52042c384818332f81a34 Mon Sep 17 00:00:00 2001 From: Anthony Grullon Date: Thu, 5 Dec 2024 16:22:27 -0500 Subject: [PATCH 2/8] Add logic to determine Help Center experience usage based on user ID --- apps/help-center/help-center-gutenberg.js | 4 ++++ apps/help-center/help-center-wp-admin.js | 4 ++++ client/layout/index.jsx | 3 ++- packages/help-center/src/components/utils.tsx | 7 +++++++ 4 files changed, 17 insertions(+), 1 deletion(-) diff --git a/apps/help-center/help-center-gutenberg.js b/apps/help-center/help-center-gutenberg.js index ce740e23982a5..ad8b945a8eca2 100644 --- a/apps/help-center/help-center-gutenberg.js +++ b/apps/help-center/help-center-gutenberg.js @@ -2,6 +2,7 @@ import './config'; import { recordTracksEvent } from '@automattic/calypso-analytics'; import HelpCenter, { HelpIcon } from '@automattic/help-center'; +import { isUseHelpCenterExperienceEnabled } from '@automattic/help-center/src/components/utils'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { Button, Fill } from '@wordpress/components'; import { useMediaQuery } from '@wordpress/compose'; @@ -20,6 +21,8 @@ function HelpCenterContent() { const isDesktop = useMediaQuery( '(min-width: 480px)' ); const [ showHelpIcon, setShowHelpIcon ] = useState( false ); const { setShowHelpCenter } = useDispatch( 'automattic/help-center' ); + const userId = helpCenterData?.currentUser?.ID; + const shouldUseHelpCenterExperience = isUseHelpCenterExperienceEnabled( userId ); const show = useSelect( ( select ) => select( 'automattic/help-center' ).isHelpCenterShown() ); @@ -85,6 +88,7 @@ function HelpCenterContent() { hasPurchases={ false } onboardingUrl="https://wordpress.com/start" handleClose={ closeCallback } + shouldUseHelpCenterExperience={ shouldUseHelpCenterExperience } /> ); diff --git a/apps/help-center/help-center-wp-admin.js b/apps/help-center/help-center-wp-admin.js index 29cf99e1c444e..a3d5bbbe159d4 100644 --- a/apps/help-center/help-center-wp-admin.js +++ b/apps/help-center/help-center-wp-admin.js @@ -2,6 +2,7 @@ import './config'; import { recordTracksEvent } from '@automattic/calypso-analytics'; import HelpCenter from '@automattic/help-center'; +import { isUseHelpCenterExperienceEnabled } from '@automattic/help-center/src/components/utils'; import { QueryClientProvider, QueryClient } from '@tanstack/react-query'; import { useDispatch as useDataStoreDispatch, useSelect } from '@wordpress/data'; import { useEffect, useCallback } from '@wordpress/element'; @@ -17,6 +18,8 @@ function AdminHelpCenterContent() { } ) ); const button = document.getElementById( 'wp-admin-bar-help-center' ); const masterbarNotificationsButton = document.getElementById( 'wp-admin-bar-notes' ); + const userId = helpCenterData?.currentUser?.ID; + const shouldUseHelpCenterExperience = isUseHelpCenterExperienceEnabled( userId ); const closeHelpCenterWhenNotificationsPanelIsOpened = useCallback( () => { const helpCenterContainerIsVisible = document.querySelector( '.help-center__container' ); @@ -84,6 +87,7 @@ function AdminHelpCenterContent() { hasPurchases={ false } onboardingUrl="https://wordpress.com/start" handleClose={ closeCallback } + shouldUseHelpCenterExperience={ shouldUseHelpCenterExperience } /> ); diff --git a/client/layout/index.jsx b/client/layout/index.jsx index a3afbac0eb506..4c63f45f04b90 100644 --- a/client/layout/index.jsx +++ b/client/layout/index.jsx @@ -1,5 +1,6 @@ import config from '@automattic/calypso-config'; import { HelpCenter } from '@automattic/data-stores'; +import { isUseHelpCenterExperienceEnabled } from '@automattic/help-center/src/components/utils'; import { useLocale } from '@automattic/i18n-utils'; import { isWithinBreakpoint, subscribeIsWithinBreakpoint } from '@automattic/viewport'; import { useBreakpoint } from '@automattic/viewport-react'; @@ -150,7 +151,7 @@ function HelpCenterLoader( { sectionName, loadHelpCenter, currentRoute } ) { const primarySiteSlug = useSelector( getPrimarySiteSlug ); const primarySite = useSelector( ( state ) => getSiteBySlug( state, primarySiteSlug ) ); - const shouldUseHelpCenterExperience = user?.ID ? user.ID % 100 < 75 : false; + const shouldUseHelpCenterExperience = isUseHelpCenterExperienceEnabled( user?.ID ); if ( ! loadHelpCenter ) { return null; diff --git a/packages/help-center/src/components/utils.tsx b/packages/help-center/src/components/utils.tsx index 3fbb7aed9f391..d264eaf1641de 100644 --- a/packages/help-center/src/components/utils.tsx +++ b/packages/help-center/src/components/utils.tsx @@ -139,3 +139,10 @@ export const matchSupportInteractionId = ( return foundMatch; } }; + +export const isUseHelpCenterExperienceEnabled = ( userId: number ): boolean => { + if ( ! userId || userId % 100 > 75 ) { + return false; + } + return true; +}; From 8a1050cf84c781709934bea97d0dfaf1d436f511 Mon Sep 17 00:00:00 2001 From: Anthony Grullon Date: Thu, 5 Dec 2024 23:35:42 -0500 Subject: [PATCH 3/8] Update user ID retrieval method in Help Center Gutenberg component --- apps/help-center/help-center-gutenberg.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/help-center/help-center-gutenberg.js b/apps/help-center/help-center-gutenberg.js index ad8b945a8eca2..5f0bc4c01437d 100644 --- a/apps/help-center/help-center-gutenberg.js +++ b/apps/help-center/help-center-gutenberg.js @@ -21,7 +21,7 @@ function HelpCenterContent() { const isDesktop = useMediaQuery( '(min-width: 480px)' ); const [ showHelpIcon, setShowHelpIcon ] = useState( false ); const { setShowHelpCenter } = useDispatch( 'automattic/help-center' ); - const userId = helpCenterData?.currentUser?.ID; + const userId = window?.JetpackScriptData?.user?.current_user?.id; const shouldUseHelpCenterExperience = isUseHelpCenterExperienceEnabled( userId ); const show = useSelect( ( select ) => select( 'automattic/help-center' ).isHelpCenterShown() ); From b0cf41f49856969c93ec181b81059dac9cf44630 Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Fri, 6 Dec 2024 10:55:36 +0100 Subject: [PATCH 4/8] Revert to 50 --- packages/help-center/src/components/utils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/help-center/src/components/utils.tsx b/packages/help-center/src/components/utils.tsx index d264eaf1641de..e35ed1fc1413c 100644 --- a/packages/help-center/src/components/utils.tsx +++ b/packages/help-center/src/components/utils.tsx @@ -141,7 +141,7 @@ export const matchSupportInteractionId = ( }; export const isUseHelpCenterExperienceEnabled = ( userId: number ): boolean => { - if ( ! userId || userId % 100 > 75 ) { + if ( ! userId || userId % 100 > 50 ) { return false; } return true; From 14b282602c8e5c8dc374c037497672f81707a2fd Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Fri, 6 Dec 2024 11:05:25 +0100 Subject: [PATCH 5/8] Back to 75 --- packages/help-center/src/components/utils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/help-center/src/components/utils.tsx b/packages/help-center/src/components/utils.tsx index e35ed1fc1413c..d264eaf1641de 100644 --- a/packages/help-center/src/components/utils.tsx +++ b/packages/help-center/src/components/utils.tsx @@ -141,7 +141,7 @@ export const matchSupportInteractionId = ( }; export const isUseHelpCenterExperienceEnabled = ( userId: number ): boolean => { - if ( ! userId || userId % 100 > 50 ) { + if ( ! userId || userId % 100 > 75 ) { return false; } return true; From 36514411c01245cab1e59bef89056bf807d7cbae Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Fri, 6 Dec 2024 11:12:45 +0100 Subject: [PATCH 6/8] Move calculation inside the package --- apps/help-center/help-center-gutenberg.js | 4 ---- apps/help-center/help-center-wp-admin.js | 4 ---- client/layout/index.jsx | 4 ---- packages/help-center/src/components/help-center.tsx | 4 +++- 4 files changed, 3 insertions(+), 13 deletions(-) diff --git a/apps/help-center/help-center-gutenberg.js b/apps/help-center/help-center-gutenberg.js index 5f0bc4c01437d..ce740e23982a5 100644 --- a/apps/help-center/help-center-gutenberg.js +++ b/apps/help-center/help-center-gutenberg.js @@ -2,7 +2,6 @@ import './config'; import { recordTracksEvent } from '@automattic/calypso-analytics'; import HelpCenter, { HelpIcon } from '@automattic/help-center'; -import { isUseHelpCenterExperienceEnabled } from '@automattic/help-center/src/components/utils'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { Button, Fill } from '@wordpress/components'; import { useMediaQuery } from '@wordpress/compose'; @@ -21,8 +20,6 @@ function HelpCenterContent() { const isDesktop = useMediaQuery( '(min-width: 480px)' ); const [ showHelpIcon, setShowHelpIcon ] = useState( false ); const { setShowHelpCenter } = useDispatch( 'automattic/help-center' ); - const userId = window?.JetpackScriptData?.user?.current_user?.id; - const shouldUseHelpCenterExperience = isUseHelpCenterExperienceEnabled( userId ); const show = useSelect( ( select ) => select( 'automattic/help-center' ).isHelpCenterShown() ); @@ -88,7 +85,6 @@ function HelpCenterContent() { hasPurchases={ false } onboardingUrl="https://wordpress.com/start" handleClose={ closeCallback } - shouldUseHelpCenterExperience={ shouldUseHelpCenterExperience } /> ); diff --git a/apps/help-center/help-center-wp-admin.js b/apps/help-center/help-center-wp-admin.js index a3d5bbbe159d4..29cf99e1c444e 100644 --- a/apps/help-center/help-center-wp-admin.js +++ b/apps/help-center/help-center-wp-admin.js @@ -2,7 +2,6 @@ import './config'; import { recordTracksEvent } from '@automattic/calypso-analytics'; import HelpCenter from '@automattic/help-center'; -import { isUseHelpCenterExperienceEnabled } from '@automattic/help-center/src/components/utils'; import { QueryClientProvider, QueryClient } from '@tanstack/react-query'; import { useDispatch as useDataStoreDispatch, useSelect } from '@wordpress/data'; import { useEffect, useCallback } from '@wordpress/element'; @@ -18,8 +17,6 @@ function AdminHelpCenterContent() { } ) ); const button = document.getElementById( 'wp-admin-bar-help-center' ); const masterbarNotificationsButton = document.getElementById( 'wp-admin-bar-notes' ); - const userId = helpCenterData?.currentUser?.ID; - const shouldUseHelpCenterExperience = isUseHelpCenterExperienceEnabled( userId ); const closeHelpCenterWhenNotificationsPanelIsOpened = useCallback( () => { const helpCenterContainerIsVisible = document.querySelector( '.help-center__container' ); @@ -87,7 +84,6 @@ function AdminHelpCenterContent() { hasPurchases={ false } onboardingUrl="https://wordpress.com/start" handleClose={ closeCallback } - shouldUseHelpCenterExperience={ shouldUseHelpCenterExperience } /> ); diff --git a/client/layout/index.jsx b/client/layout/index.jsx index 4c63f45f04b90..cefef4e09b75f 100644 --- a/client/layout/index.jsx +++ b/client/layout/index.jsx @@ -1,6 +1,5 @@ import config from '@automattic/calypso-config'; import { HelpCenter } from '@automattic/data-stores'; -import { isUseHelpCenterExperienceEnabled } from '@automattic/help-center/src/components/utils'; import { useLocale } from '@automattic/i18n-utils'; import { isWithinBreakpoint, subscribeIsWithinBreakpoint } from '@automattic/viewport'; import { useBreakpoint } from '@automattic/viewport-react'; @@ -151,8 +150,6 @@ function HelpCenterLoader( { sectionName, loadHelpCenter, currentRoute } ) { const primarySiteSlug = useSelector( getPrimarySiteSlug ); const primarySite = useSelector( ( state ) => getSiteBySlug( state, primarySiteSlug ) ); - const shouldUseHelpCenterExperience = isUseHelpCenterExperienceEnabled( user?.ID ); - if ( ! loadHelpCenter ) { return null; } @@ -172,7 +169,6 @@ function HelpCenterLoader( { sectionName, loadHelpCenter, currentRoute } ) { hidden={ sectionName === 'gutenberg-editor' && isDesktop } onboardingUrl={ onboardingUrl() } googleMailServiceFamily={ getGoogleMailServiceFamily() } - shouldUseHelpCenterExperience={ shouldUseHelpCenterExperience } /> ); } diff --git a/packages/help-center/src/components/help-center.tsx b/packages/help-center/src/components/help-center.tsx index 68fdaab9f5754..9f7e7e5acd123 100644 --- a/packages/help-center/src/components/help-center.tsx +++ b/packages/help-center/src/components/help-center.tsx @@ -21,6 +21,7 @@ import { HELP_CENTER_STORE } from '../stores'; import { Container } from '../types'; import HelpCenterContainer from './help-center-container'; import HelpCenterSmooch from './help-center-smooch'; +import { isUseHelpCenterExperienceEnabled } from './utils'; import type { HelpCenterSelect } from '@automattic/data-stores'; import '../styles.scss'; @@ -92,7 +93,8 @@ export default function ContextualizedHelpCenter( props: Container & HelpCenterRequiredInformation ) { const shouldUseHelpCenterExperience = - config.isEnabled( 'help-center-experience' ) || props.shouldUseHelpCenterExperience; + config.isEnabled( 'help-center-experience' ) || + isUseHelpCenterExperienceEnabled( props.currentUser?.ID ); return ( From f0d92fbcdcabe1cb9c825df851bb26df33b1f75d Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Fri, 6 Dec 2024 16:05:08 +0100 Subject: [PATCH 7/8] Uncache auth response --- .../src/use-authenticate-zendesk-messaging.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/zendesk-client/src/use-authenticate-zendesk-messaging.ts b/packages/zendesk-client/src/use-authenticate-zendesk-messaging.ts index e24d3bdacdf00..722ffe02ead79 100644 --- a/packages/zendesk-client/src/use-authenticate-zendesk-messaging.ts +++ b/packages/zendesk-client/src/use-authenticate-zendesk-messaging.ts @@ -11,6 +11,11 @@ import wpcomRequest, { canAccessWpcomApis } from 'wpcom-proxy-request'; */ import type { APIFetchOptions, MessagingAuth, ZendeskAuthType } from './types'; +/** + * Bump me when the API response structure goes through a breaking change. + */ +const VERSION = 'v1'; + let isLoggedIn = false; export function useAuthenticateZendeskMessaging( @@ -21,7 +26,7 @@ export function useAuthenticateZendeskMessaging( const isTestMode = currentEnvironment !== 'production'; return useQuery( { - queryKey: [ 'getMessagingAuth', type, isTestMode ], + queryKey: [ 'getMessagingAuth', VERSION, type, isTestMode ], queryFn: () => { const params = { type, test_mode: String( isTestMode ) }; const wpcomParams = new URLSearchParams( params ); From 5c8d643829ecacf31c02ee855db6f58da60b1fbe Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Fri, 6 Dec 2024 16:11:46 +0100 Subject: [PATCH 8/8] Back to 50 --- packages/help-center/src/components/utils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/help-center/src/components/utils.tsx b/packages/help-center/src/components/utils.tsx index d264eaf1641de..e35ed1fc1413c 100644 --- a/packages/help-center/src/components/utils.tsx +++ b/packages/help-center/src/components/utils.tsx @@ -141,7 +141,7 @@ export const matchSupportInteractionId = ( }; export const isUseHelpCenterExperienceEnabled = ( userId: number ): boolean => { - if ( ! userId || userId % 100 > 75 ) { + if ( ! userId || userId % 100 > 50 ) { return false; } return true;