Help Center: Feedback in article sends paying users to support (#96782)

packages/help-center/src/components/help-center-feedback-form.tsx

@@ -10,6 +10,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
 import { useHelpCenterContext } from '../contexts/HelpCenterContext';
+import { useSupportStatus } from '../data/use-support-status';
 import { useResetSupportInteraction } from '../hooks/use-reset-support-interaction';
 import { ThumbsDownIcon, ThumbsUpIcon } from '../icons/thumbs';
 import HelpCenterContactSupportOption from './help-center-contact-support-option';
@@ -33,6 +34,9 @@ const HelpCenterFeedbackForm = ( {
 	const [ startedFeedback, setStartedFeedback ] = useState< boolean | null >( null );
 	const [ answerValue, setAnswerValue ] = useState< number | null >( null );
 
+	const { data } = useSupportStatus();
+	const isUserEligibleForPaidSupport = data?.eligibility.is_user_eligible ?? false;
+
 	const { sectionName, site } = useHelpCenterContext();
 	const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' );
 	const navigate = useNavigate();
@@ -132,7 +136,10 @@ const HelpCenterFeedbackForm = ( {
 								) }
 							</p>
 						</div>
-						<GetSupport onClickAdditionalEvent={ handleContactSupportClick } />
+						<GetSupport
+							onClickAdditionalEvent={ handleContactSupportClick }
+							isUserEligibleForPaidSupport={ isUserEligibleForPaidSupport }
+						/>
 					</>
 				) : (
 					<HelpCenterContactSupportOption

packages/odie-client/src/components/message/get-support.tsx

@@ -6,17 +6,21 @@ import './get-support.scss';
 
 interface GetSupportProps {
 	onClickAdditionalEvent?: () => void;
+	isUserEligibleForPaidSupport?: boolean;
 }
 
 interface ButtonConfig {
 	text: string;
 	action: () => Promise< void >;
 }
 
-export const GetSupport: React.FC< GetSupportProps > = ( { onClickAdditionalEvent } ) => {
+export const GetSupport: React.FC< GetSupportProps > = ( {
+	onClickAdditionalEvent,
+	isUserEligibleForPaidSupport,
+} ) => {
 	const navigate = useNavigate();
 	const newConversation = useCreateZendeskConversation();
-	const { shouldUseHelpCenterExperience, chat, isUserEligibleForPaidSupport } =
+	const { chat, isUserEligibleForPaidSupport: contextIsUserEligibleForPaidSupport } =
 		useOdieAssistantContext();
 
 	// Early return if user is already talking to a human
@@ -25,11 +29,9 @@ export const GetSupport: React.FC< GetSupportProps > = ( { onClickAdditionalEven
 	}
 
 	const getButtonConfig = (): ButtonConfig => {
-		if ( isUserEligibleForPaidSupport ) {
+		if ( isUserEligibleForPaidSupport || contextIsUserEligibleForPaidSupport ) {
 			return {
-				text: shouldUseHelpCenterExperience
-					? __( 'Get instant support', __i18n_text_domain__ )
-					: __( 'Get support', __i18n_text_domain__ ),
+				text: __( 'Get instant support', __i18n_text_domain__ ),
 				action: async () => {
 					onClickAdditionalEvent?.();
 					await newConversation();