diff --git a/client/assets/images/icons/close-icon.svg b/client/assets/images/icons/close-icon.svg
new file mode 100644
index 0000000000000..15f68d2e4f891
--- /dev/null
+++ b/client/assets/images/icons/close-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/client/components/hundred-year-loader-view.tsx b/client/components/hundred-year-loader-view.tsx
index 1e23eeca451cc..d8f0c4783b5de 100644
--- a/client/components/hundred-year-loader-view.tsx
+++ b/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 (
-
+
+ const videoElement = (
+ <>
{ isMobile ? (
) }
- { loadingText }
+ >
+ );
+
+ return hideVideoContainer ? (
+ videoElement
+ ) : (
+
+ { videoElement }
+ { !! loadingText && { loadingText }
}
);
}
diff --git a/client/landing/stepper/declarative-flow/hundred-year-plan.ts b/client/landing/stepper/declarative-flow/hundred-year-plan.ts
index 3b7f9149bc144..705942db36890 100644
--- a/client/landing/stepper/declarative-flow/hundred-year-plan.ts
+++ b/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' );
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendly-widget/use-calendly-widget.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendly-widget/use-calendly-widget.ts
new file mode 100644
index 0000000000000..e2761f7306fc7
--- /dev/null
+++ b/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