[Odie][Experiment] Slide in odie on plans page when compare plans but…

…ton is visible (Automattic#80371)

* Slide in Odie on plans page when Compare Plans button is visible

* Add track event

* Rename experiment

client/my-sites/plan-features-2023-grid/index.tsx

@@ -124,6 +124,7 @@ export type PlanFeatures2023GridProps = {
 	showUpgradeableStorage: boolean; // feature flag used to show the storage add-on dropdown
 	stickyRowOffset: number;
 	usePricingMetaForGridPlans: UsePricingMetaForGridPlans;
+	showOdie?: () => void;
 };
 
 type PlanFeatures2023GridConnectedProps = {
@@ -224,6 +225,9 @@ export class PlanFeatures2023Grid extends Component<
 	PlanFeatures2023GridType,
 	PlanFeatures2023GridState
 > {
+	observer: IntersectionObserver | null = null;
+	buttonRef: React.RefObject< HTMLButtonElement > = createRef< HTMLButtonElement >();
+
 	state: PlanFeatures2023GridState = {
 		showPlansComparisonGrid: false,
 		selectedStorage: {},
@@ -235,6 +239,25 @@ export class PlanFeatures2023Grid extends Component<
 		// TODO clk: move these to PlansFeaturesMain (after Woo plans migrate)
 		this.props.recordTracksEvent( 'calypso_wp_plans_test_view' );
 		retargetViewPlans();
+
+		this.observer = new IntersectionObserver( ( entries ) => {
+			entries.forEach( ( entry ) => {
+				if ( entry.isIntersecting ) {
+					this.props.showOdie?.();
+					this.observer?.disconnect();
+				}
+			} );
+		} );
+
+		if ( this.buttonRef.current ) {
+			this.observer.observe( this.buttonRef.current );
+		}
+	}
+
+	componentWillUnmount() {
+		if ( this.observer ) {
+			this.observer.disconnect();
+		}
 	}
 
 	toggleShowPlansComparisonGrid = () => {
@@ -906,7 +929,7 @@ export class PlanFeatures2023Grid extends Component<
 				</div>
 				{ ! hidePlansFeatureComparison && (
 					<div className="plan-features-2023-grid__toggle-plan-comparison-button-container">
-						<Button onClick={ this.toggleShowPlansComparisonGrid }>
+						<Button onClick={ this.toggleShowPlansComparisonGrid } ref={ this.buttonRef }>
 							{ this.state.showPlansComparisonGrid
 								? translate( 'Hide comparison' )
 								: translate( 'Compare plans' ) }

client/my-sites/plans-features-main/index.tsx

@@ -29,6 +29,7 @@ import usePlanFeaturesForGridPlans from 'calypso/my-sites/plan-features-2023-gri
 import useRestructuredPlanFeaturesForComparisonGrid from 'calypso/my-sites/plan-features-2023-grid/hooks/npm-ready/data-store/use-restructured-plan-features-for-comparison-grid';
 import PlanNotice from 'calypso/my-sites/plans-features-main/components/plan-notice';
 import PlanTypeSelector from 'calypso/my-sites/plans-features-main/components/plan-type-selector';
+import { useOdieAssistantContext } from 'calypso/odie/context';
 import { getCurrentUserName } from 'calypso/state/current-user/selectors';
 import canUpgradeToPlan from 'calypso/state/selectors/can-upgrade-to-plan';
 import getDomainFromHomeUpsellInQuery from 'calypso/state/selectors/get-domain-from-home-upsell-in-query';
@@ -119,6 +120,7 @@ type OnboardingPricingGrid2023Props = PlansFeaturesMainProps & {
 	wpcomFreeDomainSuggestion: DataResponse< DomainSuggestion >;
 	isCustomDomainAllowedOnFreePlan: DataResponse< boolean >;
 	isGlobalStylesOnPersonal?: boolean;
+	showOdie?: () => void;
 };
 
 const SecondaryFormattedHeader = ( { siteSlug }: { siteSlug?: string | null } ) => {
@@ -167,6 +169,7 @@ const OnboardingPricingGrid2023 = ( props: OnboardingPricingGrid2023Props ) => {
 		isSpotlightOnCurrentPlan,
 		showUpgradeableStorage,
 		isGlobalStylesOnPersonal,
+		showOdie,
 	} = props;
 	const translate = useTranslate();
 	const { setShowDomainUpsellDialog } = useDispatch( WpcomPlansUI.store );
@@ -271,6 +274,7 @@ const OnboardingPricingGrid2023 = ( props: OnboardingPricingGrid2023Props ) => {
 			require="calypso/my-sites/plan-features-2023-grid"
 			{ ...asyncProps }
 			planTypeSelectorProps={ planTypeSelectorProps }
+			showOdie={ showOdie }
 		/>
 	);
 
@@ -359,6 +363,8 @@ const PlansFeaturesMain = ( {
 		_customerType = 'business';
 	}
 
+	const { isVisible, setIsVisible, trackEvent } = useOdieAssistantContext();
+
 	const isDisplayingPlansNeededForFeature = () => {
 		if (
 			selectedFeature &&
@@ -658,6 +664,15 @@ const PlansFeaturesMain = ( {
 						isSpotlightOnCurrentPlan={ isSpotlightOnCurrentPlanAllowed && isSpotlightOnCurrentPlan }
 						showUpgradeableStorage={ showUpgradeableStorage }
 						isGlobalStylesOnPersonal={ globalStylesInPersonalPlan }
+						showOdie={ () => {
+							if ( ! isVisible ) {
+								trackEvent( 'calypso_odie_chat_toggle_visibility', {
+									visibility: true,
+									trigger: 'scroll',
+								} );
+								setIsVisible( true );
+							}
+						} }
 					/>
 				</>
 			) }

client/odie/context/index.tsx

@@ -1,7 +1,8 @@
 import config from '@automattic/calypso-config';
 import { createContext, useContext, useEffect, useState } from 'react';
 import { useExperiment } from 'calypso/lib/explat';
-import { useSelector } from 'calypso/state';
+import { useDispatch, useSelector } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import OdieAssistant from '..';
 import { getOdieInitialPrompt } from './initial-prompts';
@@ -38,6 +39,7 @@ interface OdieAssistantContextInterface {
 	setIsNudging: ( isNudging: boolean ) => void;
 	setIsVisible: ( isVisible: boolean ) => void;
 	setIsLoading: ( isLoading: boolean ) => void;
+	trackEvent: ( event: string, properties?: Record< string, unknown > ) => void;
 }
 
 const defaultContextInterfaceValues = {
@@ -56,6 +58,7 @@ const defaultContextInterfaceValues = {
 	setIsNudging: noop,
 	setIsVisible: noop,
 	setIsLoading: noop,
+	trackEvent: noop,
 };
 
 // Create a default new context
@@ -76,7 +79,8 @@ const OdieAssistantProvider = ( {
 	sectionName: OdieAllowedSectionNames;
 	children: ReactNode;
 } ) => {
-	const [ , experimentAssignment ] = useExperiment( 'calypso_plans_wapuu_sales_agent_v0' );
+	const dispatch = useDispatch();
+	const [ , experimentAssignment ] = useExperiment( 'calypso_plans_wapuu_sales_agent_v1' );
 	const odieIsEnabled =
 		config.isEnabled( 'odie' ) ||
 		( experimentAssignment?.variationName === 'treatment' &&
@@ -103,6 +107,10 @@ const OdieAssistantProvider = ( {
 		} );
 	}, [ sectionName, siteId ] );
 
+	const trackEvent = ( event: string, properties?: Record< string, unknown > ) => {
+		dispatch( recordTracksEvent( event, properties ) );
+	};
+
 	const addMessage = ( message: Message ) => {
 		setMessages( ( prevMessages ) => {
 			const lastMessage = prevMessages[ prevMessages.length - 1 ];
@@ -141,6 +149,7 @@ const OdieAssistantProvider = ( {
 				setIsLoading,
 				setIsNudging,
 				setIsVisible,
+				trackEvent,
 			} }
 		>
 			{ children }