🪟 🎉 Free connector program enrollment modal #21396
Conversation
| } | ||
|
|
||
| const EnrollmentModalContent: React.FC<EnrollmentModalContentProps> = ({ closeModal, createCheckout, workspaceId }) => { | ||
| const [isLoading, setIsLoading] = useState(false); |
There was a problem hiding this comment.
We have to manage the loading state manually here. Although createCheckout() is a react-query mutation, and returns an isLoading property, we can't use it. The way our ModalService works, it's content slot doesn't receive prop updates. We also cannot use useStripeCheckout() here, because it's rendered in ModalServiceProvider, which is outside of the ServiceProvider context.
| const startStripeCheckout = async () => { | ||
| setIsLoading(true); | ||
| // Use the current URL as a success URL but attach the STRIPE_SUCCESS_QUERY to it | ||
| const successUrl = new URL(window.location.href); | ||
| successUrl.searchParams.set(STRIPE_SUCCESS_QUERY, "true"); | ||
| const { stripeUrl } = await createCheckout({ | ||
| workspaceId, | ||
| successUrl: successUrl.href, | ||
| cancelUrl: window.location.href, | ||
| stripeMode: "setup", | ||
| }); | ||
|
|
||
| // Forward to stripe as soon as we created a checkout session successfully | ||
| window.location.assign(stripeUrl); | ||
| }; |
There was a problem hiding this comment.
Largely copied from our credit purchasing flow here.
After successfully entering a card, users will be redirected back to the URL they came from with an extra query param: ?stripeCheckoutSuccess=true
| <div className={styles.pill}>Pill #1</div> | ||
| <div className={styles.pill}>Pill #2</div> |
There was a problem hiding this comment.
This depends on #21228
| @@ -3,6 +3,7 @@ export interface StripeCheckoutSessionCreate { | |||
| successUrl: string; | |||
| cancelUrl: string; | |||
| quantity?: number; | |||
| stripeMode: "payment" | "setup"; | |||
There was a problem hiding this comment.
This is a new required param for createCheckout
...components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/MailSvg.tsx
Outdated
Show resolved
Hide resolved
...ages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx
Outdated
Show resolved
Hide resolved
...ages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx
Outdated
Show resolved
Hide resolved
...oud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentModal.module.scss
Outdated
Show resolved
Hide resolved
|
Oh weird, I was certain I had deleted them locally... should be gone now 🙂 |
What
Closes #21224
Adds components for the enrollment modal for the free connector program:
Figma designs: https://www.figma.com/file/wihAJg5mkp61I7lLHs0IpV/FREE-CONNECTOR-PROGRAM?node-id=1106%3A23359&t=sv3jVkm9Yn7QlwMU-0
How
FreeConnectorProgramEnrollmentButton, which contains all the logic required to render the modal.createCheckout()method in ourStripeServiceto accept the new "setup" modeThe idea is that this button can be used in various other components where an "Enroll now!" CTA is required.
Recommended reading order
Top to bottom
Considerations
FreeConnectorProgramEnrollmentButtonis a very long name 😄 Maybe we should use aFCP*prefix for these components? Long names don't bother me too much, so I don't feel super strongly.