feat(clerk-js,types): Add PaymentSourceRow for displaying payment sources (#5570)

Co-authored-by: Alex Carpenter <alex.carpenter@clerk.dev>
Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

Author: aeliox

.changeset/tall-clocks-call.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add `PaymentSourceRow` for displaying payment sources

packages/clerk-js/bundlewatch.config.json

@@ -21,7 +21,7 @@
     { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "5KB" },
     { "path": "./dist/checkout*.js", "maxSize": "3KB" },
-    { "path": "./dist/paymentSources*.js", "maxSize": "8.1KB" },
+    { "path": "./dist/paymentSources*.js", "maxSize": "8.2KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "1KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "1KB" },
     { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" }

packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

@@ -9,13 +9,13 @@ import type {
 import { useMemo, useState } from 'react';
 
 import { __experimental_PaymentSourcesContext, useCheckoutContext } from '../../contexts';
-import { Box, Button, Col, descriptors, Flex, Form, Icon, localizationKeys, Text } from '../../customizables';
+import { Box, Button, Col, descriptors, Form, localizationKeys } from '../../customizables';
 import { Alert, Disclosure, Divider, Drawer, LineItems, Select, SelectButton, SelectOptionList } from '../../elements';
 import { useFetch } from '../../hooks';
-import { ArrowUpDown, CreditCard } from '../../icons';
+import { ArrowUpDown } from '../../icons';
 import { animations } from '../../styledSystem';
 import { handleError } from '../../utils';
-import { AddPaymentSource } from '../PaymentSources';
+import { AddPaymentSource, PaymentSourceRow } from '../PaymentSources';
 
 const capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);
 
@@ -170,6 +170,7 @@ const CheckoutFormElements = ({
             <Disclosure.Content>
               <Col gap={3}>
                 <PaymentSourceMethods
+                  checkout={checkout}
                   paymentSources={paymentSources}
                   totalDueNow={checkout.totals.totalDueNow || checkout.totals.grandTotal}
                   onPaymentSourceSubmit={onPaymentSourceSubmit}
@@ -208,19 +209,21 @@ const CheckoutFormElements = ({
 };
 
 const PaymentSourceMethods = ({
+  checkout,
   totalDueNow,
   paymentSources,
   onPaymentSourceSubmit,
   isSubmitting,
 }: {
+  checkout: __experimental_CommerceCheckoutResource;
   totalDueNow: __experimental_CommerceMoney;
   paymentSources: __experimental_CommercePaymentSourceResource[];
   onPaymentSourceSubmit: React.FormEventHandler<HTMLFormElement>;
   isSubmitting: boolean;
 }) => {
   const [selectedPaymentSource, setSelectedPaymentSource] = useState<
     __experimental_CommercePaymentSourceResource | undefined
-  >(paymentSources.length > 0 ? paymentSources[0] : undefined);
+  >(checkout.paymentSource || paymentSources.find(p => p.isDefault));
 
   const options = useMemo(() => {
     return paymentSources.map(source => {
@@ -241,7 +244,7 @@ const PaymentSourceMethods = ({
       })}
     >
       <Select
-        elementId='role'
+        elementId='paymentSource'
         options={options}
         value={selectedPaymentSource?.id || null}
         onChange={option => {
@@ -263,20 +266,7 @@ const PaymentSourceMethods = ({
             backgroundColor: t.colors.$colorBackground,
           })}
         >
-          {selectedPaymentSource && (
-            <Flex
-              gap={3}
-              align='center'
-            >
-              <Icon icon={CreditCard} />
-              <Text
-                as='span'
-                colorScheme='body'
-              >
-                {capitalize(selectedPaymentSource.cardType)} ⋯ {selectedPaymentSource.last4}
-              </Text>
-            </Flex>
-          )}
+          {selectedPaymentSource && <PaymentSourceRow paymentSource={selectedPaymentSource} />}
         </SelectButton>
         <SelectOptionList
           sx={t => ({

packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx

@@ -0,0 +1,55 @@
+import type { __experimental_CommercePaymentSourceResource } from '@clerk/types';
+
+import { Badge, descriptors, Flex, Icon, localizationKeys, Text } from '../../customizables';
+import { ApplePay, CreditCard } from '../../icons';
+
+export const PaymentSourceRow = ({
+  paymentSource,
+}: {
+  paymentSource: __experimental_CommercePaymentSourceResource;
+}) => {
+  return (
+    <Flex
+      sx={{ overflow: 'hidden' }}
+      gap={2}
+      align='baseline'
+      elementDescriptor={descriptors.paymentSourceRow}
+    >
+      <Icon
+        icon={paymentSource.walletType === 'apple_pay' ? ApplePay : CreditCard}
+        sx={{ alignSelf: 'center' }}
+        elementDescriptor={descriptors.paymentSourceRowIcon}
+      />
+      <Text
+        sx={t => ({ color: t.colors.$colorText, textTransform: 'capitalize' })}
+        truncate
+        elementDescriptor={descriptors.paymentSourceRowType}
+      >
+        {paymentSource.paymentMethod === 'card' ? paymentSource.cardType : paymentSource.paymentMethod}
+      </Text>
+      <Text
+        sx={t => ({ color: t.colors.$colorTextSecondary })}
+        variant='caption'
+        truncate
+        elementDescriptor={descriptors.paymentSourceRowValue}
+      >
+        {paymentSource.paymentMethod === 'card' ? `⋯ ${paymentSource.last4}` : '-'}
+      </Text>
+      {paymentSource.isDefault && (
+        <Badge
+          elementDescriptor={descriptors.paymentSourceRowBadge}
+          elementId={descriptors.paymentSourceRowBadge.setId('default')}
+          localizationKey={localizationKeys('badge__default')}
+        />
+      )}
+      {paymentSource.status === 'expired' && (
+        <Badge
+          elementDescriptor={descriptors.paymentSourceRowBadge}
+          elementId={descriptors.paymentSourceRowBadge.setId('expired')}
+          colorScheme='danger'
+          localizationKey={localizationKeys('badge__expired')}
+        />
+      )}
+    </Flex>
+  );
+};

packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx

@@ -4,14 +4,14 @@ import { Fragment, useRef } from 'react';
 
 import { RemoveResourceForm } from '../../common';
 import { usePaymentSourcesContext } from '../../contexts';
-import { Badge, Flex, Icon, localizationKeys, Text } from '../../customizables';
+import { localizationKeys } from '../../customizables';
 import { ProfileSection, ThreeDotsMenu, useCardState } from '../../elements';
 import { Action } from '../../elements/Action';
 import { useActionContext } from '../../elements/Action/ActionRoot';
 import { useFetch } from '../../hooks';
-import { ApplePay, CreditCard } from '../../icons';
 import { handleError } from '../../utils';
 import { AddPaymentSource } from './AddPaymentSource';
+import { PaymentSourceRow } from './PaymentSourceRow';
 
 const AddScreen = ({ onSuccess }: { onSuccess: () => void }) => {
   const { close } = useActionContext();
@@ -108,36 +108,7 @@ const PaymentSources = (_: __experimental_PaymentSourcesProps) => {
           {paymentSources.map(paymentSource => (
             <Fragment key={paymentSource.id}>
               <ProfileSection.Item id='paymentSources'>
-                <Flex
-                  sx={{ overflow: 'hidden' }}
-                  gap={2}
-                  align='baseline'
-                >
-                  <Icon
-                    icon={paymentSource.walletType === 'apple_pay' ? ApplePay : CreditCard}
-                    sx={{ alignSelf: 'center' }}
-                  />
-                  <Text
-                    sx={t => ({ color: t.colors.$colorText, textTransform: 'capitalize' })}
-                    truncate
-                  >
-                    {paymentSource.paymentMethod === 'card' ? paymentSource.cardType : paymentSource.paymentMethod}
-                  </Text>
-                  <Text
-                    sx={t => ({ color: t.colors.$colorTextSecondary })}
-                    variant='caption'
-                    truncate
-                  >
-                    {paymentSource.paymentMethod === 'card' ? `⋯ ${paymentSource.last4}` : '-'}
-                  </Text>
-                  {paymentSource.isDefault && <Badge localizationKey={localizationKeys('badge__default')} />}
-                  {paymentSource.status === 'expired' && (
-                    <Badge
-                      colorScheme='danger'
-                      localizationKey={localizationKeys('badge__expired')}
-                    />
-                  )}
-                </Flex>
+                <PaymentSourceRow paymentSource={paymentSource} />
                 <PaymentSourceMenu
                   paymentSource={paymentSource}
                   revalidate={revalidate}

packages/clerk-js/src/ui/components/PaymentSources/index.ts

@@ -1,2 +1,3 @@
 export * from './AddPaymentSource';
 export * from './PaymentSources';
+export * from './PaymentSourceRow';

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -330,6 +330,13 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'selectOptionsContainer',
   'selectOption',
 
+  'paymentSourceRow',
+  'paymentSourceRowIcon',
+  'paymentSourceRowText',
+  'paymentSourceRowType',
+  'paymentSourceRowValue',
+  'paymentSourceRowBadge',
+
   'menuButton',
   'menuButtonEllipsis',
   'menuList',

packages/types/src/appearance.ts

@@ -454,6 +454,13 @@ export type ElementsConfig = {
   selectOptionsContainer: WithOptions<SelectId>;
   selectOption: WithOptions<SelectId>;
 
+  paymentSourceRow: WithOptions;
+  paymentSourceRowIcon: WithOptions;
+  paymentSourceRowText: WithOptions;
+  paymentSourceRowType: WithOptions;
+  paymentSourceRowValue: WithOptions;
+  paymentSourceRowBadge: WithOptions<'default' | 'expired'>;
+
   menuButton: WithOptions<MenuId>;
   menuButtonEllipsis: WithOptions;
   menuList: WithOptions<MenuId>;

packages/types/src/elementIds.ts

@@ -52,4 +52,4 @@ export type OrganizationPreviewId =
 export type CardActionId = 'havingTrouble' | 'alternativeMethods' | 'signUp' | 'signIn' | 'usePasskey' | 'waitlist';
 
 export type MenuId = 'invitation' | 'member' | ProfileSectionId;
-export type SelectId = 'countryCode' | 'role';
+export type SelectId = 'countryCode' | 'role' | 'paymentSource';