From 212134bf3beaaa5e694c8426f50b59dc3c109e89 Mon Sep 17 00:00:00 2001
From: Tim Broddin <tim@wannabes.be>
Date: Mon, 30 Sep 2024 11:57:34 +0200
Subject: [PATCH] Calendly widget component

---
 .../components/calendy-widget/index.tsx       | 19 +++++++++----------
 .../components/calendy-widget/style.scss      |  4 ++++
 .../index.tsx                                 |  6 +++++-
 .../styles.scss                               |  2 +-
 4 files changed, 19 insertions(+), 12 deletions(-)
 create mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/style.scss

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/index.tsx
index 839f99c030e56c..4a0905d19ae1c0 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/index.tsx
@@ -54,22 +54,21 @@ const CalendlyWidget: React.FC< CalendlyWidgetProps > = ( { url, id, prefill, on
 		}
 
 		const loadCalendly = async () => {
-			while ( typeof window.Calendly === 'undefined' ) {
+			while ( typeof window.Calendly === 'undefined' || ! url ) {
 				await new Promise( ( resolve ) => setTimeout( resolve, 100 ) );
 			}
 
-			// Clear out the container div when props change.
 			const element = document.getElementById( widgetId );
 			if ( element ) {
+				// Clear out the container div when props change.
 				element.innerHTML = '';
+				window.Calendly.initInlineWidget( {
+					url: `https://calendly.com/${ url }`,
+					parentElement: document.getElementById( widgetId ),
+					prefill: prefill || {},
+					utm: {},
+				} );
 			}
-
-			window.Calendly.initInlineWidget( {
-				url: `https://calendly.com/${ url }`,
-				parentElement: document.getElementById( widgetId ),
-				prefill: prefill || {},
-				utm: {},
-			} );
 		};
 
 		loadCalendly();
@@ -83,7 +82,7 @@ const CalendlyWidget: React.FC< CalendlyWidgetProps > = ( { url, id, prefill, on
 		};
 	}, [ url, widgetId, prefill ] );
 
-	return <div id={ widgetId } style={ { minWidth: '320px', height: '630px' } } />;
+	return <div id={ widgetId } className="calendly-widget" />;
 };
 
 export default CalendlyWidget;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/style.scss
new file mode 100644
index 00000000000000..5c8534a694b817
--- /dev/null
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/style.scss
@@ -0,0 +1,4 @@
+.calendly-widget {
+    min-width: 320px;
+    height: 630px;
+}
\ No newline at end of file
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/index.tsx
index 5ce6c7799abdd0..92571bb40826a7 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/index.tsx
@@ -40,7 +40,11 @@ const HundredYearPlanScheduleAppointment: Step = function HundredYearPlanSchedul
 					<div className="hundred-year-plan-schedule-appointment-content__right-pane">
 						<CalendlyWidget
 							url={ CALENDLY_ID }
-							prefill={ { name: currentUser?.display_name, email: currentUser?.email } }
+							prefill={
+								currentUser
+									? { name: currentUser?.display_name, email: currentUser?.email }
+									: undefined
+							}
 							onSchedule={ () => {
 								submit?.();
 							} }
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/styles.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/styles.scss
index d6151a3e6b2cb9..d6c9cbf92eeea8 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/styles.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/styles.scss
@@ -11,7 +11,7 @@
         width: 50%;
     }
 
-    .calendly-inline-widget {
+    .calendly-widget {
         min-width: 320px;
         height: 700px;
     }