chore(clerk-js,types): Display info tooltip for past due amounts in checkout (#6097)

Author: panteliselef

.changeset/tiny-cameras-battle.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Display info tooltip for past due amounts at checkout.

.changeset/violet-views-sip.md

@@ -0,0 +1,6 @@
+---
+'@clerk/localizations': patch
+'@clerk/types': patch
+---
+
+Introduce `commerce.checkout.pastDueNotice` localization key.

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 && (
             <LineItems.Group variant='tertiary'>
-              <LineItems.Title title={localizationKeys('commerce.pastDue')} />
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  <LineItems.Title
+                    title={localizationKeys('commerce.pastDue')}
+                    icon={InformationCircle}
+                  />
+                </Tooltip.Trigger>
+                <Tooltip.Content text={localizationKeys('commerce.checkout.pastDueNotice')} />
+              </Tooltip.Root>
               <LineItems.Description text={`${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}`} />
             </LineItems.Group>
           )}

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<HTMLTableCellElement, TitleProps>(({ 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 (
     <Dt
+      ref={ref}
       elementDescriptor={descriptors.lineItemsTitle}
       elementId={descriptors.lineItemsTitle.setId(variant)}
       sx={t => ({
@@ -102,7 +104,22 @@ function Title({ title, description }: TitleProps) {
         ...common.textVariants(t)[textVariant],
       })}
     >
-      <Span localizationKey={title} />
+      <Span
+        sx={t => ({
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: t.space.$1,
+        })}
+      >
+        {icon ? (
+          <Icon
+            size='md'
+            icon={icon}
+            aria-hidden
+          />
+        ) : null}
+        <Span localizationKey={title} />
+      </Span>
       {description ? (
         <Span
           localizationKey={description}
@@ -115,7 +132,7 @@ function Title({ title, description }: TitleProps) {
       ) : null}
     </Dt>
   );
-}
+});
 
 /* -------------------------------------------------------------------------------------------------
  * LineItems.Description

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',

packages/types/src/localization.ts

@@ -178,6 +178,7 @@ type _LocalizationResource = {
         subtitle: LocalizationValue;
       };
       downgradeNotice: LocalizationValue;
+      pastDueNotice: LocalizationValue;
       perMonth: LocalizationValue;
     };
   };