chore(types,clerk-js): Update prefix for checkout status (#6438)

Author: panteliselef

.changeset/fluffy-beers-bet.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+[Billing Beta]: Update prefix for checkout status
+Replaces `awaiting_` with `needs_`. 

packages/clerk-js/src/core/modules/checkout/__tests__/manager.spec.ts

@@ -72,7 +72,7 @@ describe('createCheckoutManager', () => {
         error: null,
         checkout: null,
         fetchStatus: 'idle',
-        status: 'awaiting_initialization',
+        status: 'needs_initialization',
       });
     });
 
@@ -138,7 +138,7 @@ describe('createCheckoutManager', () => {
         isStarting: false,
         error: null,
         fetchStatus: 'idle',
-        status: 'awaiting_confirmation',
+        status: 'needs_confirmation',
       });
 
       expect(listener1).toHaveBeenCalledWith(expectedState);
@@ -186,7 +186,7 @@ describe('createCheckoutManager', () => {
           checkout: mockCheckout,
           error: null,
           fetchStatus: 'idle',
-          status: 'awaiting_confirmation',
+          status: 'needs_confirmation',
         }),
       );
     });
@@ -230,7 +230,7 @@ describe('createCheckoutManager', () => {
           isStarting: false,
           error: mockError,
           fetchStatus: 'error',
-          status: 'awaiting_initialization',
+          status: 'needs_initialization',
         }),
       );
     });
@@ -473,7 +473,7 @@ describe('createCheckoutManager', () => {
         error: null,
         checkout: null,
         fetchStatus: 'idle',
-        status: 'awaiting_initialization',
+        status: 'needs_initialization',
       });
 
       // Should notify listeners
@@ -515,7 +515,7 @@ describe('createCheckoutManager', () => {
       manager.clearCheckout();
       state = manager.getCacheState();
       expect(state.checkout).toBeNull();
-      expect(state.status).toBe('awaiting_initialization');
+      expect(state.status).toBe('needs_initialization');
     });
   });
 
@@ -554,17 +554,17 @@ describe('createCheckoutManager', () => {
     });
 
     it('should derive status based on checkout state', async () => {
-      // Initially awaiting initialization
-      expect(manager.getCacheState().status).toBe('awaiting_initialization');
+      // Initially needs initialization
+      expect(manager.getCacheState().status).toBe('needs_initialization');
 
-      // After starting checkout - awaiting confirmation
+      // After starting checkout - needs confirmation
       const pendingCheckout = createMockCheckoutResource({ status: 'pending' });
       const startOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
         .fn()
         .mockResolvedValue(pendingCheckout);
 
       await manager.executeOperation('start', startOperation);
-      expect(manager.getCacheState().status).toBe('awaiting_confirmation');
+      expect(manager.getCacheState().status).toBe('needs_confirmation');
 
       // After completing checkout - completed
       const completedCheckout = createMockCheckoutResource({ status: 'completed' });
@@ -631,7 +631,7 @@ describe('createCheckoutManager', () => {
       const state2 = manager2.getCacheState();
 
       expect(state1.checkout?.id).toBe('checkout1');
-      expect(state1.status).toBe('awaiting_confirmation');
+      expect(state1.status).toBe('needs_confirmation');
 
       expect(state2.checkout?.id).toBe('checkout2');
       expect(state2.isStarting).toBe(false);

packages/clerk-js/src/core/modules/checkout/manager.ts

@@ -36,8 +36,8 @@ const createManagerCache = <CacheKey, CacheState>() => {
 const managerCache = createManagerCache<CheckoutKey, __experimental_CheckoutCacheState>();
 
 const CHECKOUT_STATUS = {
-  AWAITING_INITIALIZATION: 'awaiting_initialization',
-  AWAITING_CONFIRMATION: 'awaiting_confirmation',
+  NEEDS_INITIALIZATION: 'needs_initialization',
+  NEEDS_CONFIRMATION: 'needs_confirmation',
   COMPLETED: 'completed',
 } as const;
 
@@ -61,8 +61,8 @@ function deriveCheckoutState(
 
   const status = (() => {
     if (baseState.checkout?.status === CHECKOUT_STATUS.COMPLETED) return CHECKOUT_STATUS.COMPLETED;
-    if (baseState.checkout) return CHECKOUT_STATUS.AWAITING_CONFIRMATION;
-    return CHECKOUT_STATUS.AWAITING_INITIALIZATION;
+    if (baseState.checkout) return CHECKOUT_STATUS.NEEDS_CONFIRMATION;
+    return CHECKOUT_STATUS.NEEDS_INITIALIZATION;
   })();
 
   return {

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

@@ -23,7 +23,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
             <Drawer.Content>
               <Drawer.Header title={localizationKeys('commerce.checkout.title')} />
               <CheckoutPage.Root>
-                <CheckoutPage.Stage name='awaiting_initialization'>
+                <CheckoutPage.Stage name='needs_initialization'>
                   <CheckoutPage.FetchStatus status='fetching'>
                     <Spinner
                       sx={{
@@ -49,7 +49,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
                   <CheckoutComplete />
                 </CheckoutPage.Stage>
 
-                <CheckoutPage.Stage name='awaiting_confirmation'>
+                <CheckoutPage.Stage name='needs_confirmation'>
                   <CheckoutForm />
                 </CheckoutPage.Stage>
               </CheckoutPage.Root>

packages/types/src/clerk.ts

@@ -60,7 +60,7 @@ import type { UserResource } from './user';
 import type { Autocomplete, DeepPartial, DeepSnakeToCamel } from './utils';
 import type { WaitlistResource } from './waitlist';
 
-type __experimental_CheckoutStatus = 'awaiting_initialization' | 'awaiting_confirmation' | 'completed';
+type __experimental_CheckoutStatus = 'needs_initialization' | 'needs_confirmation' | 'completed';
 
 export type __experimental_CheckoutCacheState = Readonly<{
   isStarting: boolean;