chore(clerk-js,types,localizations): Tidy up checkout complete state (#5644)

Author: aeliox

.changeset/tender-chefs-punch.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Chore: tidy up checkout complete state for upcoming subscriptions

packages/clerk-js/bundlewatch.config.json

@@ -3,7 +3,7 @@
     { "path": "./dist/clerk.js", "maxSize": "590kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "73.88KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "99KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "99.2KB" },
     { "path": "./dist/vendors*.js", "maxSize": "36KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
@@ -20,7 +20,7 @@
     { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
     { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "5.28KB" },
-    { "path": "./dist/checkout*.js", "maxSize": "3KB" },
+    { "path": "./dist/checkout*.js", "maxSize": "3.05KB" },
     { "path": "./dist/paymentSources*.js", "maxSize": "8.2KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "1KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "1KB" },

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

@@ -3,6 +3,7 @@ import type { __experimental_CommerceCheckoutResource } from '@clerk/types';
 import { Box, Button, descriptors, Heading, Icon, localizationKeys, Span, Text } from '../../customizables';
 import { Drawer, LineItems, useDrawerContext } from '../../elements';
 import { Check } from '../../icons';
+import { formatDate } from '../../utils';
 
 const capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);
 
@@ -77,18 +78,22 @@ export const CheckoutComplete = ({ checkout }: { checkout: __experimental_Commer
               elementDescriptor={descriptors.checkoutSuccessTitle}
               as='h2'
               textVariant='h2'
-            >
-              {/* TODO(@COMMERCE): needs localization */}
-              Payment was successful!
-            </Heading>
+              localizationKey={
+                checkout.subscription?.status === 'active'
+                  ? localizationKeys('__experimental_commerce.checkout.title__paymentSuccessful')
+                  : localizationKeys('__experimental_commerce.checkout.title__subscriptionSuccessful')
+              }
+            />
             <Text
               elementDescriptor={descriptors.checkoutSuccessDescription}
               colorScheme='secondary'
               sx={t => ({ textAlign: 'center', paddingInline: t.space.$8, marginBlockStart: t.space.$2 })}
-            >
-              {/* TODO(@COMMERCE): needs localization */}
-              Minim adipisicing enim fugiat enim est ad nisi exercitation nisi exercitation quis culpa.
-            </Text>
+              localizationKey={
+                checkout.subscription?.status === 'active'
+                  ? localizationKeys('__experimental_commerce.checkout.description__paymentSuccessful')
+                  : localizationKeys('__experimental_commerce.checkout.description__subscriptionSuccessful')
+              }
+            />
           </Span>
         </Span>
       </Drawer.Body>
@@ -100,8 +105,7 @@ export const CheckoutComplete = ({ checkout }: { checkout: __experimental_Commer
       >
         <LineItems.Root>
           <LineItems.Group variant='secondary'>
-            {/* TODO(@COMMERCE): needs localization */}
-            <LineItems.Title title='Total paid' />
+            <LineItems.Title title={localizationKeys('__experimental_commerce.checkout.lineItems.title__totalPaid')} />
             <LineItems.Description
               text={
                 checkout.invoice
@@ -111,19 +115,27 @@ export const CheckoutComplete = ({ checkout }: { checkout: __experimental_Commer
             />
           </LineItems.Group>
           <LineItems.Group variant='secondary'>
-            {/* TODO(@COMMERCE): needs localization */}
-            <LineItems.Title title='Payment method' />
+            <LineItems.Title
+              title={
+                checkout.subscription?.status === 'active'
+                  ? localizationKeys('__experimental_commerce.checkout.lineItems.title__paymentMethod')
+                  : localizationKeys('__experimental_commerce.checkout.lineItems.title__subscriptionBegins')
+              }
+            />
             <LineItems.Description
               text={
-                checkout.paymentSource
-                  ? `${capitalize(checkout.paymentSource.cardType)} ⋯ ${checkout.paymentSource.last4}`
-                  : '–'
+                checkout.subscription?.status === 'active'
+                  ? checkout.paymentSource
+                    ? `${capitalize(checkout.paymentSource.cardType)} ⋯ ${checkout.paymentSource.last4}`
+                    : '–'
+                  : checkout.subscription?.periodStart
+                    ? formatDate(new Date(checkout.subscription.periodStart))
+                    : '–'
               }
             />
           </LineItems.Group>
           <LineItems.Group variant='tertiary'>
-            {/* TODO(@COMMERCE): needs localization */}
-            <LineItems.Title title='Invoice ID' />
+            <LineItems.Title title={localizationKeys('__experimental_commerce.checkout.lineItems.title__invoiceId')} />
             <LineItems.Description
               text={checkout.invoice ? checkout.invoice.id : '–'}
               truncateText

packages/localizations/src/en-US.ts

@@ -13,6 +13,18 @@ export const enUS: LocalizationResource = {
     reSubscribe: 'Re-subscribe',
     month: 'Month',
     switchPlan: 'Switch to this plan',
+    checkout: {
+      title__paymentSuccessful: 'Payment was successful!',
+      title__subscriptionSuccessful: 'Success!',
+      description__paymentSuccessful: 'Your new subscription is all set.',
+      description__subscriptionSuccessful: 'Your new subscription is all set.',
+      lineItems: {
+        title__totalPaid: 'Total paid',
+        title__paymentMethod: 'Payment method',
+        title__invoiceId: 'Invoice ID',
+        title__subscriptionBegins: 'Subscription begins',
+      },
+    },
   },
   backButton: 'Back',
   badge__currentPlan: 'Current Plan',

packages/types/src/localization.ts

@@ -114,6 +114,18 @@ type _LocalizationResource = {
     switchPlan: LocalizationValue;
     billedAnnually: LocalizationValue;
     accountFunds: LocalizationValue;
+    checkout: {
+      title__paymentSuccessful: LocalizationValue;
+      title__subscriptionSuccessful: LocalizationValue;
+      description__paymentSuccessful: LocalizationValue;
+      description__subscriptionSuccessful: LocalizationValue;
+      lineItems: {
+        title__totalPaid: LocalizationValue;
+        title__paymentMethod: LocalizationValue;
+        title__invoiceId: LocalizationValue;
+        title__subscriptionBegins: LocalizationValue;
+      };
+    };
   };
   signUp: {
     start: {