feat(clerk-js,types,clerk-react): Add internal open/close checkout methods #5481
Conversation
🦋 Changeset detectedLatest commit: d29bf85 The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
alexcarpenter
changed the title
| componentsControls.openDrawer = (name, props) => { | ||
| setState(s => ({ | ||
| ...s, | ||
| [`${name}Drawer`]: { | ||
| open: true, | ||
| props, | ||
| }, | ||
| })); | ||
| }; | ||
|
|
||
| componentsControls.closeDrawer = name => { | ||
| setState(s => ({ | ||
| ...s, | ||
| [`${name}Drawer`]: { | ||
| ...s[`${name}Drawer`], | ||
| open: false, | ||
| }, | ||
| })); | ||
| }; |
There was a problem hiding this comment.
Introducing new drawer specific methods as we want to have an exit animation for the drawers, and removing all the props causes issues with portaling into the profile components.
There was a problem hiding this comment.
It would be great to consolidate the modal/drawer handling at some point in the future. I would expect them to function the same, just be a different flavor of UI. Maybe there's a good reason to keep them separate though? 🤔
There was a problem hiding this comment.
If we want modals to have an exit animation, we'd need to follow this updated drawer pattern, currently all modals are removed immediately but wiping out the props.
| planPeriod, | ||
| orgId: subscriberType === 'org' ? organization?.id : undefined, | ||
| onSubscriptionComplete: onSubscriptionChange, | ||
| portalId: mode === 'modal' ? PROFILE_CARD_SCROLLBOX_ID : undefined, |
There was a problem hiding this comment.
does mode indicate the context PricingTable is rendered in? I feel like I would expect mode to dictate how PricingTable behaves itself, but not necessarily how it behaves depending on where it's rendered.
As a semi-related nit, I might rename mode to context.
There was a problem hiding this comment.
Mode is set on the PricingTable and I think was originally adding following the other components, but there is no modal mode for PricingTable, so yeah, it is confusing, as its only a mounted component. Will refactor naming approach in a follow up PR.
| clerk.__internal_openCheckout({ | ||
| planId: plan.id, | ||
| planPeriod, | ||
| orgId: subscriberType === 'org' ? organization?.id : undefined, | ||
| onSubscriptionComplete: onSubscriptionChange, | ||
| portalId: mode === 'modal' ? PROFILE_CARD_SCROLLBOX_ID : undefined, |
| componentsControls.openDrawer = (name, props) => { | ||
| setState(s => ({ | ||
| ...s, | ||
| [`${name}Drawer`]: { | ||
| open: true, | ||
| props, | ||
| }, | ||
| })); | ||
| }; | ||
|
|
||
| componentsControls.closeDrawer = name => { | ||
| setState(s => ({ | ||
| ...s, | ||
| [`${name}Drawer`]: { | ||
| ...s[`${name}Drawer`], | ||
| open: false, | ||
| }, | ||
| })); | ||
| }; |
There was a problem hiding this comment.
It would be great to consolidate the modal/drawer handling at some point in the future. I would expect them to function the same, just be a different flavor of UI. Maybe there's a good reason to keep them separate though? 🤔
…and-clerkclosecheckout-methods-to
alexcarpenter
deleted the
alexcarpenter/com-257-add-clerkopencheckout-and-clerkclosecheckout-methods-to
branch
Description
Introduce
clerk.__internal_openCheckout()andclerk.__internal_closeCheckout()methods, and move<Checkout />component out of the<PricingTable />component.Resolves COM-257
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change