100-year-plan: Embed Calendly Widget Popup

client/components/hundred-year-loader-view.tsx

@@ -8,6 +8,7 @@ const DESKTOP_EARTH_LOOP_URL = 'https://wpcom.files.wordpress.com/2023/09/earth-
 type LoaderProps = {
 	isMobile: boolean;
 	loadingText: TranslateResult;
+	hideVideoContainer?: boolean;
 };
 
 const FullPageContainer = styled.div< { isMobile: boolean } >`
@@ -51,7 +52,7 @@ export const VideoPreload = memo( ( { isMobile }: { isMobile: boolean } ) =>
 	)
 );
 
-function VideoLoader( { isMobile, loadingText }: LoaderProps ) {
+function VideoLoader( { isMobile, loadingText, hideVideoContainer }: LoaderProps ) {
 	const videoObject = useRef< HTMLVideoElement | null >( null );
 
 	const FullPageVideoContainer = styled( FullPageContainer )< { isMobile: boolean } >`
@@ -65,8 +66,9 @@ function VideoLoader( { isMobile, loadingText }: LoaderProps ) {
 			opacity: 25%;
 		}
 	`;
-	return (
-		<FullPageVideoContainer isMobile={ isMobile }>
+
+	const videoElement = (
+		<>
 			{ isMobile ? (
 				<video
 					ref={ videoObject }
@@ -92,7 +94,15 @@ function VideoLoader( { isMobile, loadingText }: LoaderProps ) {
 					loop
 				/>
 			) }
-			<h1 className="wp-brand-font">{ loadingText }</h1>
+		</>
+	);
+
+	return hideVideoContainer ? (
+		videoElement
+	) : (
+		<FullPageVideoContainer isMobile={ isMobile }>
+			{ videoElement }
+			{ !! loadingText && <h1 className="wp-brand-font">{ loadingText }</h1> }
 		</FullPageVideoContainer>
 	);
 }

client/landing/stepper/declarative-flow/hundred-year-plan.ts

@@ -39,11 +39,6 @@ const HundredYearPlanFlow: Flow = {
 							asyncComponent: () =>
 								import( './internals/steps-repository/hundred-year-plan-diy-or-difm' ),
 						},
-						{
-							slug: 'schedule-appointment',
-							asyncComponent: () =>
-								import( './internals/steps-repository/hundred-year-plan-schedule-appointment' ),
-						},
 						{
 							slug: 'thank-you',
 							asyncComponent: () =>
@@ -127,11 +122,9 @@ const HundredYearPlanFlow: Flow = {
 				case 'diy-or-difm':
 					if ( 'diy' === providedDependencies?.diyOrDifmChoice ) {
 						return navigate( hasSite ? 'new-or-existing-site' : 'setup' );
+					} else if ( providedDependencies?.nextStep === 'thank-you' ) {
+						return navigate( 'thank-you' );
 					}
-					// TODO: add VIP flow
-					return navigate( 'schedule-appointment' );
-				case 'schedule-appointment':
-					return navigate( 'thank-you' );
 				case 'new-or-existing-site':
 					if ( 'new-site' === providedDependencies?.newExistingSiteChoice ) {
 						return navigate( 'setup' );

client/landing/stepper/declarative-flow/internals/steps-repository/components/calendly-widget/use-calendly-widget.ts

@@ -0,0 +1,119 @@
+import { useCallback, useEffect } from 'react';
+
+const CALENDLY_SCRIPT_URL = 'https://assets.calendly.com/assets/external/widget.js';
+
+declare global {
+	interface Window {
+		Calendly: any;
+	}
+}
+
+type CalendlyPrefillData = {
+	name?: string;
+	email?: string;
+	// Add other prefill fields as needed
+};
+
+type CalendlyProps = {
+	url: string;
+	id?: string;
+	prefill?: CalendlyPrefillData;
+	hideLandingPageDetails?: boolean;
+	hideEventTypeDetails?: boolean;
+	hideGdprBanner?: boolean;
+	onSchedule?: () => void;
+	onCalendlyViewed?: () => void;
+};
+
+function isCalendlyEvent( e: MessageEvent ): boolean {
+	return (
+		e.origin === 'https://calendly.com' && e.data.event && e.data.event.indexOf( 'calendly.' ) === 0
+	);
+}
+
+export function useCalendlyWidget( props: CalendlyProps ) {
+	const {
+		url,
+		prefill,
+		hideLandingPageDetails,
+		hideEventTypeDetails,
+		hideGdprBanner,
+		onSchedule,
+		onCalendlyViewed,
+	} = props;
+
+	/**
+	 * Load the Calendly <script>
+	 */
+	const loadCalendlyScript = useCallback( () => {
+		// Check if the script is already loaded
+		if ( ! document.querySelector( `script[src="${ CALENDLY_SCRIPT_URL }"]` ) ) {
+			const script = document.createElement( 'script' );
+			script.src = CALENDLY_SCRIPT_URL;
+			script.async = true;
+			document.body.appendChild( script );
+		}
+	}, [ CALENDLY_SCRIPT_URL ] );
+
+	/**
+	 * Remove the Calendly <script>
+	 */
+	const removeCalendlyScript = useCallback( () => {
+		const existingScript = document.querySelector( `script[src="${ CALENDLY_SCRIPT_URL }"]` );
+		existingScript?.remove();
+	}, [ CALENDLY_SCRIPT_URL ] );
+
+	/**
+	 * Load the Calendly <script> on mount and remove it on unmount
+	 */
+	useEffect( () => {
+		loadCalendlyScript();
+		return removeCalendlyScript;
+	}, [ url ] );
+
+	/**
+	 * Listen for Calendly events
+	 */
+	useEffect( () => {
+		const handleMessage = ( e: MessageEvent ) => {
+			if ( isCalendlyEvent( e ) && e.data.event === 'calendly.event_scheduled' ) {
+				onSchedule?.();
+			} else if ( isCalendlyEvent( e ) && e.data.event === 'calendly.event_type_viewed' ) {
+				onCalendlyViewed?.();
+			}
+		};
+
+		window.addEventListener( 'message', handleMessage );
+		return () => window.removeEventListener( 'message', handleMessage );
+	}, [ onSchedule, onCalendlyViewed ] );
+
+	/**
+	 * Open the Calendly popup widget
+	 */
+	const openCalendlyPopup = useCallback( () => {
+		const queryParams = new URLSearchParams();
+
+		queryParams.set( 'primary_color', '000000' );
+		queryParams.set( 'hide_gdpr_banner', hideGdprBanner ? '1' : '0' );
+		queryParams.set( 'hide_event_type_details', hideEventTypeDetails ? '1' : '0' );
+		queryParams.set( 'hide_landing_page_details', hideLandingPageDetails ? '1' : '0' );
+
+		window?.Calendly?.initPopupWidget( {
+			url: `https://calendly.com/${ url }?${ queryParams.toString() }`,
+			prefill: prefill || {},
+			utm: {},
+		} );
+	}, [ url, prefill, hideLandingPageDetails, hideEventTypeDetails, hideGdprBanner ] );
+
+	/**
+	 * Close the Calendly popup widget
+	 */
+	const closeCalendlyPopup = useCallback( () => {
+		window?.Calendly?.closePopupWidget();
+	}, [ url ] );
+
+	return {
+		openCalendlyPopup,
+		closeCalendlyPopup,
+	};
+}