Calendly widget component

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;

client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/style.scss

@@ -0,0 +1,4 @@
+.calendly-widget {
+    min-width: 320px;
+    height: 630px;
+}

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?.();
 							} }

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;
     }