diff --git a/.changeset/tiny-cameras-battle.md b/.changeset/tiny-cameras-battle.md new file mode 100644 index 00000000000..2d866ebacf8 --- /dev/null +++ b/.changeset/tiny-cameras-battle.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Display info tooltip for past due amounts at checkout. diff --git a/.changeset/violet-views-sip.md b/.changeset/violet-views-sip.md new file mode 100644 index 00000000000..814b9bb3862 --- /dev/null +++ b/.changeset/violet-views-sip.md @@ -0,0 +1,6 @@ +--- +'@clerk/localizations': patch +'@clerk/types': patch +--- + +Introduce `commerce.checkout.pastDueNotice` localization key. diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx index af18cfd0760..a6f08a684bc 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx @@ -14,11 +14,12 @@ import { Drawer } from '@/ui/elements/Drawer'; import { LineItems } from '@/ui/elements/LineItems'; import { SegmentedControl } from '@/ui/elements/SegmentedControl'; import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select'; +import { Tooltip } from '@/ui/elements/Tooltip'; import { DevOnly } from '../../common/DevOnly'; import { useCheckoutContext, usePaymentSources } from '../../contexts'; import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Text } from '../../customizables'; -import { ChevronUpDown } from '../../icons'; +import { ChevronUpDown, InformationCircle } from '../../icons'; import { handleError } from '../../utils'; import * as AddPaymentSource from '../PaymentSources/AddPaymentSource'; import { PaymentSourceRow } from '../PaymentSources/PaymentSourceRow'; @@ -79,7 +80,15 @@ export const CheckoutForm = withCardStateProvider(() => { )} {showPastDue && ( - + + + + + + )} diff --git a/packages/clerk-js/src/ui/elements/LineItems.tsx b/packages/clerk-js/src/ui/elements/LineItems.tsx index 1f4e4c68f4f..461806babf4 100644 --- a/packages/clerk-js/src/ui/elements/LineItems.tsx +++ b/packages/clerk-js/src/ui/elements/LineItems.tsx @@ -83,9 +83,10 @@ function Group({ children, borderTop = false, variant = 'primary' }: GroupProps) interface TitleProps { title: string | LocalizationKey; description?: string | LocalizationKey; + icon?: React.ComponentType; } -function Title({ title, description }: TitleProps) { +const Title = React.forwardRef(({ title, description, icon }, ref) => { const context = React.useContext(GroupContext); if (!context) { throw new Error('LineItems.Title must be used within LineItems.Group'); @@ -94,6 +95,7 @@ function Title({ title, description }: TitleProps) { const textVariant = variant === 'primary' ? 'subtitle' : 'caption'; return (
({ @@ -102,7 +104,22 @@ function Title({ title, description }: TitleProps) { ...common.textVariants(t)[textVariant], })} > - + ({ + display: 'inline-flex', + alignItems: 'center', + gap: t.space.$1, + })} + > + {icon ? ( + + ) : null} + + {description ? ( ); -} +}); /* ------------------------------------------------------------------------------------------------- * LineItems.Description diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index 533cf82048b..e8e829d98e4 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -38,6 +38,7 @@ export const enUS: LocalizationResource = { description__subscriptionSuccessful: 'Your new subscription is all set.', downgradeNotice: 'You will keep your current subscription and its features until the end of the billing cycle, then you will be switched to this subscription.', + pastDueNotice: 'Your previous subscription was past due, with no payment.', emailForm: { subtitle: 'Before you can complete your purchase you must add an email address where receipts will be sent.', title: 'Add an email address', diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts index 77b54c7b90d..4208d30e653 100644 --- a/packages/types/src/localization.ts +++ b/packages/types/src/localization.ts @@ -178,6 +178,7 @@ type _LocalizationResource = { subtitle: LocalizationValue; }; downgradeNotice: LocalizationValue; + pastDueNotice: LocalizationValue; perMonth: LocalizationValue; }; };