feat(clerk-js,types): Refactor <Checkout /> components
#5359
Conversation
🦋 Changeset detectedLatest commit: 50c1b52 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
<CheckoutPage /> implementation<Checkout /> components
| */ | ||
| export type ElementsConfig = { | ||
| button: WithOptions; | ||
| button: WithOptions<string>; |
There was a problem hiding this comment.
Should we introduce a commerceButton that has the supported providers typed?
There was a problem hiding this comment.
In what ways is button different that commerceButton ? Would you ever only want to target this while exluding any other button ?
There was a problem hiding this comment.
Its not, just looking for a way for folks to target the specific commerce provider buttons, similar to what we do with socialButtons. The question is whether I should follow the socialButtons approach or just expose setting and elementId on the button descriptor.
There was a problem hiding this comment.
You can do paymentButtons but i think you still need to use elementIds.
There was a problem hiding this comment.
Yeah, is that the preferred approach vs opening button to accept elementIds?
alexcarpenter
changed the title
<Checkout /> components<Checkout /> components
| </LineItems.Description> | ||
| </LineItems.Group> | ||
| <LineItems.Group borderTop> | ||
| <LineItems.Title>Total{totals.totalDueNow ? ' Due Today' : ''}</LineItems.Title> |
There was a problem hiding this comment.
| <LineItems.Title>Total{totals.totalDueNow ? ' Due Today' : ''}</LineItems.Title> | |
| {/* TODO(@COMMERCE): needs localization */} | |
| <LineItems.Title>Total{totals.totalDueNow ? ' Due Today' : ''}</LineItems.Title> |
| </LineItems.Description> | ||
| </LineItems.Group> | ||
| <LineItems.Group variant='tertiary'> | ||
| <LineItems.Title>Tax</LineItems.Title> |
There was a problem hiding this comment.
| <LineItems.Title>Tax</LineItems.Title> | |
| {/* TODO(@COMMERCE): needs localization */} | |
| <LineItems.Title>Tax</LineItems.Title> |
| borderTop | ||
| variant='tertiary' | ||
| > | ||
| <LineItems.Title>Subtotal</LineItems.Title> |
There was a problem hiding this comment.
| <LineItems.Title>Subtotal</LineItems.Title> | |
| {/* TODO(@COMMERCE): needs localization */} | |
| <LineItems.Title>Subtotal</LineItems.Title> |
| <LineItems.Root> | ||
| <LineItems.Group> | ||
| <LineItems.Title>{plan.name}</LineItems.Title> | ||
| <LineItems.Description suffix={`per month${planPeriod === 'annual' ? ', times 12 months' : ''}`}> |
There was a problem hiding this comment.
{/* TODO(@Commerce): needs localization */}
| <LineItems.Description suffix={`per month${planPeriod === 'annual' ? ', times 12 months' : ''}`}> | |
| <LineItems.Description suffix={`per month${planPeriod === 'annual' ? ', times 12 months' : ''}`}> |
| <LineItems.Root> | ||
| <LineItems.Group> | ||
| <LineItems.Title>{plan.name}</LineItems.Title> | ||
| <LineItems.Description suffix={`per month${planPeriod === 'annual' ? ', times 12 months' : ''}`}> |
There was a problem hiding this comment.
{/* TODO(@Commerce): needs localization */}
| <LineItems.Description suffix={`per month${planPeriod === 'annual' ? ', times 12 months' : ''}`}> | |
| <LineItems.Description suffix={`per month${planPeriod === 'annual' ? ', times 12 months' : ''}`}> |
| <Drawer.Body> | ||
| <CheckoutPage {...props} /> | ||
| </Drawer.Body> | ||
| <CheckoutPage {...props} /> |
There was a problem hiding this comment.
Isn't that tying the checkout page to be always in a drawer? Do we want users to be able to embed this onto a separate page?
There was a problem hiding this comment.
<Checkout /> would be what the user implements on the page which always renders in the <Drawer />.
Description
Refactoring
<Checkout />components to connect descriptors and theming.Resolves COM-137
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change