fix types

Author: panteliselef

packages/clerk-js/src/core/clerk.ts

@@ -29,6 +29,7 @@ import type {
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
+  CheckoutSignalValue,
   Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
@@ -51,7 +52,6 @@ import type {
   JoinWaitlistParams,
   ListenerCallback,
   NavigateOptions,
-  NullableCheckoutSignal,
   OrganizationListProps,
   OrganizationProfileProps,
   OrganizationResource,
@@ -351,7 +351,7 @@ export class Clerk implements ClerkInterface {
     return Clerk._apiKeys;
   }
 
-  __experimental_checkout(options: __experimental_CheckoutOptions): NullableCheckoutSignal {
+  __experimental_checkout(options: __experimental_CheckoutOptions): CheckoutSignalValue {
     if (!this._checkout) {
       this._checkout = (params: any) => createCheckoutInstance(this, params);
     }

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

@@ -1,4 +1,4 @@
-import type { __experimental_CheckoutOptions, NullableCheckoutSignal } from '@clerk/types';
+import type { __experimental_CheckoutOptions, CheckoutSignalValue } from '@clerk/types';
 
 import { CheckoutFuture, createSignals } from '@/core/resources/CommerceCheckout';
 
@@ -19,7 +19,7 @@ const cache = new Map<CheckoutKey, { resource: CheckoutFuture; signals: ReturnTy
 /**
  * Create a checkout instance with the given options
  */
-function createCheckoutInstance(clerk: Clerk, options: __experimental_CheckoutOptions): NullableCheckoutSignal {
+function createCheckoutInstance(clerk: Clerk, options: __experimental_CheckoutOptions): CheckoutSignalValue {
   const { for: forOrganization, planId, planPeriod } = options;
 
   if (!clerk.isSignedIn || !clerk.user) {
@@ -40,7 +40,7 @@ function createCheckoutInstance(clerk: Clerk, options: __experimental_CheckoutOp
   if (cache.has(checkoutKey)) {
     return (
       cache.get(checkoutKey) as { resource: CheckoutFuture; signals: ReturnType<typeof createSignals> }
-    ).signals.computedSignal();
+    ).signals.computedSignal() as CheckoutSignalValue;
   }
 
   const signals = createSignals();
@@ -51,7 +51,7 @@ function createCheckoutInstance(clerk: Clerk, options: __experimental_CheckoutOp
     planPeriod,
   });
   cache.set(checkoutKey, { resource: checkout, signals });
-  return signals.computedSignal();
+  return signals.computedSignal() as CheckoutSignalValue;
 }
 
 export { createCheckoutInstance };

packages/clerk-js/src/core/resources/CommerceCheckout.ts

@@ -1,5 +1,6 @@
 import { retry } from '@clerk/shared/retry';
 import type {
+  CheckoutFutureResource,
   CheckoutFutureResourceLax,
   CheckoutSignalValue,
   CommerceCheckoutJSON,
@@ -128,15 +129,16 @@ export const createSignals = () => {
   const resourceSignal = signal<{ resource: CheckoutFuture | null }>({ resource: null });
   const errorSignal = signal<{ error: unknown }>({ error: null });
   const fetchSignal = signal<{ status: 'idle' | 'fetching' }>({ status: 'idle' });
-  // @ts-expect-error - CheckoutSignal is not yet defined
-  const computedSignal: CheckoutSignal = computed(() => {
-    const resource = resourceSignal().resource;
-    const error = errorSignal().error;
-    const fetchStatus = fetchSignal().status;
-
-    const errors = errorsToParsedErrors(error);
-    return { errors: errors, fetchStatus, checkout: resource };
-  });
+  const computedSignal = computed<Omit<CheckoutSignalValue, 'checkout'> & { checkout: CheckoutFutureResource | null }>(
+    () => {
+      const resource = resourceSignal().resource;
+      const error = errorSignal().error;
+      const fetchStatus = fetchSignal().status;
+
+      const errors = errorsToParsedErrors(error);
+      return { errors: errors, fetchStatus, checkout: resource };
+    },
+  );
 
   return { resourceSignal, errorSignal, fetchSignal, computedSignal };
 };
@@ -208,6 +210,9 @@ export class CheckoutFuture implements CheckoutFutureResourceLax {
 
   async confirm(params: ConfirmCheckoutParams): Promise<{ error: unknown }> {
     return this.runAsyncResourceTask('confirm', async () => {
+      if (!this.resource.id) {
+        throw new Error('Clerk: Call `start` before `confirm`');
+      }
       await this.resource.confirm(params);
     });
   }
@@ -233,7 +238,6 @@ function createRunAsyncResourceTask(
       startBatch();
       signals.errorSignal({ error: null });
       signals.fetchSignal({ status: 'fetching' });
-      // signals.resourceSignal({ resource: null });
       beforeTask?.();
       endBatch();
       startBatch();
@@ -243,7 +247,6 @@ function createRunAsyncResourceTask(
         return { error: null };
       } catch (err) {
         signals.errorSignal({ error: err });
-        endBatch();
         return { error: err };
       } finally {
         pendingOperations.delete(operationType);

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

@@ -1,5 +1,10 @@
 import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';
-import type { CommerceMoneyAmount, CommercePaymentSourceResource, ConfirmCheckoutParams } from '@clerk/types';
+import type {
+  CommerceMoneyAmount,
+  CommercePaymentSourceResource,
+  ConfirmCheckoutParams,
+  RemoveFunctions,
+} from '@clerk/types';
 import { useMemo, useState } from 'react';
 
 import { Card } from '@/ui/elements/Card';
@@ -347,10 +352,9 @@ const ExistingPaymentSourceForm = withCardStateProvider(
 
     const { payWithExistingPaymentSource } = useCheckoutMutations();
     const card = useCardState();
-    const [selectedPaymentSource, setSelectedPaymentSource] = useState<CommercePaymentSourceResource | undefined>(
-      // @ts-expect-error - paymentSource is missing functions
-      paymentSource || paymentSources.find(p => p.isDefault),
-    );
+    const [selectedPaymentSource, setSelectedPaymentSource] = useState<
+      RemoveFunctions<CommercePaymentSourceResource> | undefined
+    >(paymentSource || paymentSources.find(p => p.isDefault));
 
     const options = useMemo(() => {
       return paymentSources.map(source => {

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

@@ -1,9 +1,13 @@
-import type { CommercePaymentSourceResource } from '@clerk/types';
+import type { CommercePaymentSourceResource, RemoveFunctions } from '@clerk/types';
 
 import { Badge, descriptors, Flex, Icon, localizationKeys, Text } from '../../customizables';
 import { CreditCard, GenericPayment } from '../../icons';
 
-export const PaymentSourceRow = ({ paymentSource }: { paymentSource: CommercePaymentSourceResource }) => {
+export const PaymentSourceRow = ({
+  paymentSource,
+}: {
+  paymentSource: RemoveFunctions<CommercePaymentSourceResource>;
+}) => {
   return (
     <Flex
       sx={{ overflow: 'hidden' }}

packages/react/src/stateProxy.ts

@@ -1,11 +1,11 @@
 import { inBrowser } from '@clerk/shared/browser';
 import type {
   CheckoutFutureResource,
+  CheckoutSignalValue,
   Clerk,
   CommerceSubscriptionPlanPeriod,
   Errors,
   ForPayerType,
-  NullableCheckoutSignal,
   State,
 } from '@clerk/types';
 
@@ -121,7 +121,7 @@ export class StateProxy implements State {
     };
   }
 
-  private buildCheckoutProxy(params: CheckoutSignalProps): NullableCheckoutSignal {
+  private buildCheckoutProxy(params: CheckoutSignalProps): CheckoutSignalValue {
     const gateProperty = this.gateProperty.bind(this);
     const targetCheckout = () => this.checkout(params);
     const target = () => targetCheckout().checkout as CheckoutFutureResource;
@@ -132,37 +132,39 @@ export class StateProxy implements State {
         global: null,
       },
       fetchStatus: 'idle' as const,
-      // @ts-expect-error - CheckoutFutureResource is not yet defined
       checkout: {
         get status() {
-          return gateProperty(target, 'status', 'needs_initialization');
+          return gateProperty(target, 'status', 'needs_initialization') as 'needs_initialization';
         },
         get externalClientSecret() {
-          return gateProperty(target, 'externalClientSecret', null);
+          return gateProperty(target, 'externalClientSecret', null) as null;
         },
         get externalGatewayId() {
-          return gateProperty(target, 'externalGatewayId', null);
+          return gateProperty(target, 'externalGatewayId', null) as null;
         },
         get paymentSource() {
-          return gateProperty(target, 'paymentSource', null);
+          return gateProperty(target, 'paymentSource', null) as null;
         },
         get plan() {
-          return gateProperty(target, 'plan', null);
+          return gateProperty(target, 'plan', null) as null;
         },
         get planPeriod() {
-          return gateProperty(target, 'planPeriod', null);
+          return gateProperty(target, 'planPeriod', null) as null;
         },
         get totals() {
-          return gateProperty(target, 'totals', null);
+          return gateProperty(target, 'totals', null) as null;
         },
         get isImmediatePlanChange() {
-          return gateProperty(target, 'isImmediatePlanChange', false);
+          return gateProperty(target, 'isImmediatePlanChange', false) as null;
         },
         get freeTrialEndsAt() {
-          return gateProperty(target, 'freeTrialEndsAt', null);
+          return gateProperty(target, 'freeTrialEndsAt', null) as null;
         },
         get payer() {
-          return gateProperty(target, 'payer', null);
+          return gateProperty(target, 'payer', null) as null;
+        },
+        get planPeriodStart() {
+          return gateProperty(target, 'planPeriodStart', null) as null;
         },
 
         start: this.gateMethod<ReturnType<typeof target>, 'start'>(target, 'start'),

packages/types/src/clerk.ts

@@ -88,12 +88,8 @@ export interface CheckoutSignalValue {
   checkout: CheckoutFutureResource;
 }
 
-export type NullableCheckoutSignal = Omit<CheckoutSignalValue, 'checkout'> & {
-  checkout: CheckoutFutureResource | null;
-};
-
 export interface CheckoutSignal {
-  (): NullableCheckoutSignal;
+  (): CheckoutSignalValue;
 }
 
 export type __experimental_CheckoutOptions = {
@@ -102,7 +98,7 @@ export type __experimental_CheckoutOptions = {
   planId: string;
 };
 
-type __experimental_CheckoutFunction = (options: __experimental_CheckoutOptions) => NullableCheckoutSignal;
+type __experimental_CheckoutFunction = (options: __experimental_CheckoutOptions) => CheckoutSignalValue;
 
 /**
  * @inline

packages/types/src/commerce.ts

@@ -2,7 +2,7 @@ import type { DeletedObjectResource } from './deletedObject';
 import type { ClerkPaginatedResponse, ClerkPaginationParams } from './pagination';
 import type { ClerkResource } from './resource';
 import type { CommerceFeatureJSONSnapshot } from './snapshots';
-import type { ForceNull, RemoveFunctions } from './utils';
+import type { ForceNull, Prettify, RemoveFunctions } from './utils';
 
 type WithOptionalOrgType<T> = T & {
   /**
@@ -1365,11 +1365,11 @@ export interface CheckoutFutureProperties {
   /**
    * The payment source being used for the checkout, such as a credit card or bank account.
    */
-  paymentSource: RemoveFunctions<CommercePaymentSourceResource> | null;
+  paymentSource: Prettify<RemoveFunctions<CommercePaymentSourceResource>> | null;
   /**
    * The subscription plan details for the checkout.
    */
-  plan: RemoveFunctions<CommercePlanResource>;
+  plan: Prettify<RemoveFunctions<CommercePlanResource>>;
   /**
    * The billing period for the plan.
    */
@@ -1398,7 +1398,7 @@ export interface CheckoutFutureProperties {
    * <ClerkProvider clerkJsVersion="x.x.x" />
    * ```
    */
-  payer: RemoveFunctions<CommercePayerResource>;
+  payer: Prettify<RemoveFunctions<CommercePayerResource>>;
 }
 
 type CheckoutPropertiesPerStatus =

packages/types/src/utils.ts

@@ -127,3 +127,7 @@ export type Override<T, U> = Omit<T, keyof U> & U;
 export type RemoveFunctions<T extends object> = {
   [K in keyof T as T[K] extends (...args: any[]) => any ? never : K]: T[K];
 };
+
+export type Prettify<T> = {
+  [K in keyof T]: T[K];
+} & {};