Skip to content

Commit d74b809

Browse files
committed
compat with internal hooks
1 parent 7e1308a commit d74b809

34 files changed

+712
-302
lines changed

packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useClerk, useOrganizationContext } from '@clerk/shared/react';
1+
import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';
22
import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
33

44
import { Alert } from '@/ui/elements/Alert';
@@ -21,7 +21,7 @@ import {
2121
Text,
2222
useLocalizations,
2323
} from '../../customizables';
24-
import { __internal_usePaymentAttemptQuery, useClipboard } from '../../hooks';
24+
import { useClipboard } from '../../hooks';
2525
import { Check, Copy } from '../../icons';
2626
import { useRouter } from '../../router';
2727

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { __internal_usePlanDetailsQuery } from '@clerk/shared/react/index';
12
import type {
23
__internal_PlanDetailsProps,
34
BillingPlanResource,
@@ -26,7 +27,6 @@ import {
2627
Text,
2728
useLocalizations,
2829
} from '../../customizables';
29-
import { __internal_usePlanDetailsQuery } from '../../hooks';
3030

3131
type PlanFeature = BillingPlanResource['features'][number];
3232

packages/clerk-js/src/ui/components/Statements/StatementPage.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { useClerk, useOrganizationContext } from '@clerk/shared/react';
2-
import useSWR from 'swr';
1+
import { __internal_useStatementQuery } from '@clerk/shared/react/index';
32
import type { BillingStatementResource } from '@clerk/shared/types';
43

54
import { Alert } from '@/ui/elements/Alert';
@@ -17,7 +16,6 @@ import {
1716
Spinner,
1817
useLocalizations,
1918
} from '../../customizables';
20-
import { __internal_useStatementQuery } from '../../hooks';
2119
import { ArrowRightIcon, Plus, RotateLeftRight } from '../../icons';
2220
import { useRouter } from '../../router';
2321
import { Statement } from './Statement';

packages/clerk-js/src/ui/hooks/index.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ export * from './useDirection';
55
export * from './useEmailLink';
66
export * from './useEnabledThirdPartyProviders';
77
export * from './useEnterpriseSSOLink';
8-
export * from './usePaymentAttemptQuery';
98
export * from './useFetch';
109
export * from './useInView';
1110
export * from './useLoadingStatus';
@@ -14,10 +13,8 @@ export * from './usePassword';
1413
export * from './usePasswordComplexity';
1514
export * from './usePopover';
1615
export * from './usePrefersReducedMotion';
17-
export * from './usePlanDetailsQuery';
1816
export * from './useSafeState';
1917
export * from './useScrollLock';
2018
export * from './useSearchInput';
21-
export * from './useStatementQuery';
2219
export * from './useTotalEnabledAuthMethods';
2320
export * from './useWindowEventListener';
Lines changed: 0 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +0,0 @@
1-
import { billingPaymentAttemptQueryKeys, useClerk, useClerkQuery, useOrganizationContext } from '@clerk/shared/react';
2-
import type { BillingPaymentResource, ClerkAPIResponseError, ForPayerType } from '@clerk/shared/types';
3-
import { useMemo } from 'react';
4-
5-
function keepPreviousDataFn<Data>(previousData: Data): Data {
6-
return previousData;
7-
}
8-
9-
type UsePaymentAttemptQueryParams = {
10-
paymentAttemptId?: string | null;
11-
for?: ForPayerType;
12-
enabled?: boolean;
13-
keepPreviousData?: boolean;
14-
};
15-
16-
const usePaymentAttemptQueryInternal = (params: UsePaymentAttemptQueryParams = {}) => {
17-
const { paymentAttemptId = null, enabled = true, keepPreviousData = false, for: forType = 'user' } = params;
18-
const clerk = useClerk();
19-
const { organization } = useOrganizationContext();
20-
21-
const organizationId = forType === 'organization' ? (organization?.id ?? null) : null;
22-
const userId = clerk.user?.id ?? null;
23-
24-
const { queryKey } = useMemo(
25-
() =>
26-
billingPaymentAttemptQueryKeys({
27-
paymentAttemptId,
28-
forType,
29-
userId,
30-
orgId: organizationId,
31-
}),
32-
[paymentAttemptId, forType, userId, organizationId],
33-
);
34-
35-
const queryEnabled = Boolean(paymentAttemptId) && enabled && (forType !== 'organization' || Boolean(organizationId));
36-
37-
const queryResult = useClerkQuery<BillingPaymentResource, ClerkAPIResponseError>({
38-
queryKey,
39-
queryFn: () => {
40-
if (!paymentAttemptId) {
41-
throw new Error('paymentAttemptId is required to fetch a payment attempt');
42-
}
43-
return clerk.billing.getPaymentAttempt({
44-
id: paymentAttemptId,
45-
orgId: organizationId ?? undefined,
46-
});
47-
},
48-
enabled: queryEnabled,
49-
placeholderData: keepPreviousData ? keepPreviousDataFn : undefined,
50-
staleTime: 1_000 * 60,
51-
});
52-
53-
return {
54-
...queryResult,
55-
error: queryResult.error ?? undefined,
56-
};
57-
};
58-
59-
export const __internal_usePaymentAttemptQuery = usePaymentAttemptQueryInternal;
Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +0,0 @@
1-
import { billingPlanDetailQueryKeys, useClerk, useClerkQuery } from '@clerk/shared/react';
2-
import type { BillingPlanResource, ClerkAPIResponseError } from '@clerk/shared/types';
3-
import { useMemo } from 'react';
4-
5-
function keepPreviousDataFn<Data>(previousData: Data): Data {
6-
return previousData;
7-
}
8-
9-
type UsePlanDetailsQueryParams = {
10-
planId?: string | null;
11-
initialPlan?: BillingPlanResource | null;
12-
enabled?: boolean;
13-
keepPreviousData?: boolean;
14-
};
15-
16-
export const __internal_usePlanDetailsQuery = (params: UsePlanDetailsQueryParams = {}) => {
17-
const { planId, initialPlan = null, enabled = true, keepPreviousData = true } = params;
18-
const clerk = useClerk();
19-
20-
const targetPlanId = planId ?? initialPlan?.id ?? null;
21-
22-
const { queryKey } = useMemo(() => billingPlanDetailQueryKeys({ planId: targetPlanId }), [targetPlanId]);
23-
24-
const queryEnabled = Boolean(targetPlanId) && enabled;
25-
26-
const queryResult = useClerkQuery<BillingPlanResource, ClerkAPIResponseError>({
27-
queryKey,
28-
queryFn: () => {
29-
if (!targetPlanId) {
30-
throw new Error('planId is required to fetch plan details');
31-
}
32-
return clerk.billing.getPlan({ id: targetPlanId });
33-
},
34-
enabled: queryEnabled,
35-
initialData: initialPlan ?? undefined,
36-
placeholderData: keepPreviousData ? keepPreviousDataFn : undefined,
37-
refetchOnWindowFocus: false,
38-
retry: false,
39-
staleTime: 1_000 * 60,
40-
});
41-
42-
return {
43-
...queryResult,
44-
error: queryResult.error ?? undefined,
45-
};
46-
};
Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +0,0 @@
1-
import { billingStatementQueryKeys, useClerk, useClerkQuery, useOrganizationContext } from '@clerk/shared/react';
2-
import type { BillingStatementResource, ClerkAPIResponseError, ForPayerType } from '@clerk/shared/types';
3-
import { useMemo } from 'react';
4-
5-
function keepPreviousDataFn<Data>(previousData: Data): Data {
6-
return previousData;
7-
}
8-
9-
type UseStatementQueryParams = {
10-
statementId?: string | null;
11-
for?: ForPayerType;
12-
enabled?: boolean;
13-
keepPreviousData?: boolean;
14-
};
15-
16-
const useStatementQueryInternal = (params: UseStatementQueryParams = {}) => {
17-
const { statementId = null, enabled = true, keepPreviousData = false, for: forType = 'user' } = params;
18-
const clerk = useClerk();
19-
const { organization } = useOrganizationContext();
20-
21-
const organizationId = forType === 'organization' ? (organization?.id ?? null) : null;
22-
const userId = clerk.user?.id ?? null;
23-
24-
const { queryKey } = useMemo(
25-
() =>
26-
billingStatementQueryKeys({
27-
statementId,
28-
forType,
29-
userId,
30-
orgId: organizationId,
31-
}),
32-
[statementId, forType, userId, organizationId],
33-
);
34-
35-
const queryEnabled = Boolean(statementId) && enabled && (forType !== 'organization' || Boolean(organizationId));
36-
37-
const queryResult = useClerkQuery<BillingStatementResource, ClerkAPIResponseError>({
38-
queryKey,
39-
queryFn: () => {
40-
if (!statementId) {
41-
throw new Error('statementId is required to fetch a statement');
42-
}
43-
return clerk.billing.getStatement({ id: statementId, orgId: organizationId ?? undefined });
44-
},
45-
enabled: queryEnabled,
46-
placeholderData: keepPreviousData ? keepPreviousDataFn : undefined,
47-
staleTime: 1_000 * 60,
48-
});
49-
50-
return {
51-
...queryResult,
52-
error: queryResult.error ?? undefined,
53-
};
54-
};
55-
56-
export const __internal_useStatementQuery = useStatementQueryInternal;

packages/shared/src/react/clerk-rq/billingQueryKeys.ts

Lines changed: 0 additions & 79 deletions
This file was deleted.

packages/shared/src/react/hooks/createCacheKeys.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import type { ResourceCacheStableKey } from '../stable-keys';
1+
import type { __internal_ResourceCacheStableKey, ResourceCacheStableKey } from '../stable-keys';
2+
import type { QueryKeyWithArgs } from './usePageOrInfinite.types';
23

34
/**
45
* @internal
@@ -8,7 +9,7 @@ export function createCacheKeys<
89
T extends Record<string, unknown> = Record<string, unknown>,
910
U extends Record<string, unknown> | undefined = undefined,
1011
>(params: {
11-
stablePrefix: ResourceCacheStableKey;
12+
stablePrefix: ResourceCacheStableKey | __internal_ResourceCacheStableKey;
1213
authenticated: boolean;
1314
tracked: T;
1415
untracked: U extends { args: Params } ? U : never;
@@ -20,3 +21,12 @@ export function createCacheKeys<
2021
authenticated: params.authenticated,
2122
};
2223
}
24+
25+
export function toSWRQuery<T extends { queryKey: QueryKeyWithArgs<unknown> }>(keys: T) {
26+
const { queryKey } = keys;
27+
return {
28+
type: queryKey[0],
29+
...queryKey[2],
30+
...(queryKey[3] as { args: Record<string, unknown> }).args,
31+
};
32+
}

packages/shared/src/react/hooks/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,6 @@ export { usePaymentMethods as __experimental_usePaymentMethods } from './usePaym
1515
export { usePlans as __experimental_usePlans } from './usePlans';
1616
export { useSubscription as __experimental_useSubscription } from './useSubscription';
1717
export { useCheckout as __experimental_useCheckout } from './useCheckout';
18+
export { __internal_useStatementQuery } from './useStatementQuery';
19+
export { __internal_usePlanDetailsQuery } from './usePlanDetailsQuery';
20+
export { __internal_usePaymentAttemptQuery } from './usePaymentAttemptQuery';

0 commit comments

Comments
 (0)