-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
100-year-plan: Embed Calendly Widget Popup #95291
Merged
Merged
Changes from all commits
Commits
Show all changes
31 commits
Select commit
Hold shift + click to select a range
9c5c3ea
Create Calendly modal component
bogiii ecd2a23
Extend calendly widget to support customisation
bogiii 3f595ce
Integrate Calendly widget into Modal component
bogiii 27272ec
Define content and details styles
bogiii df06702
Fix iframe container overflow style
bogiii f3c6504
Add mobile view support
bogiii d9d83a9
Translate strings
bogiii 9ce5a55
Customize modal close button to match the design
bogiii 08c51ef
Initial popup widget instead of inline embed
bogiii dab4954
Integrate Calendly popup embed solution
bogiii 6497d59
Remove unnecessary custom style
bogiii 3f41ea6
Adjust style for mobile views
bogiii 6df2762
Update calendly ID
bogiii b8cb2f1
Update calendly config id
bogiii 623c5f6
Update flow to redirect on thank-you page
bogiii 1195ef9
Update wrapper step to support hiding sidebar
bogiii 1abae9b
Extend VideoLoader component to support hidding wrapper contianer
bogiii 512f257
Match thank you step design
bogiii b942f5a
Remove button's box shadow
bogiii 0ab5d07
Close opened popup in the cleanup function
bogiii 7610c5a
Improve UX when user scheduled meeting
bogiii 9b2b0dd
Hide gdpr banner
bogiii bf1802c
Change Calendly primary color
bogiii 5c1d6a0
Typo: Add missing column
bogiii 96c4590
Create use-calendly-widget hook
bogiii bdea1d9
Replace Calendly component with a new hook solution
bogiii 5dd8540
Add missing button margin
bogiii 749eff9
Remove unused way of calendly integration
bogiii 0317bad
Fix typo in path of calendly widget logic
bogiii d1aae3c
Delete obsolete schedule appointment modal solution
bogiii 1ec04e9
Delete obsolete schedule appointment step solution
bogiii File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
119 changes: 119 additions & 0 deletions
119
...arative-flow/internals/steps-repository/components/calendly-widget/use-calendly-widget.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}; | ||
} |
88 changes: 0 additions & 88 deletions
88
...g/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/index.tsx
This file was deleted.
Oops, something went wrong.
4 changes: 0 additions & 4 deletions
4
.../stepper/declarative-flow/internals/steps-repository/components/calendy-widget/style.scss
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
HundredYearLoaderView
component has been updated to support rendering video without a container so we can reuse it in different contexts.