chore(clerk-js): Add API keys and Billing routes as valid reorder labels (#7383)

Author: wobsoriano

.changeset/little-buttons-try.md

@@ -0,0 +1,21 @@
+---
+"@clerk/astro": patch
+"@clerk/clerk-js": patch
+"@clerk/clerk-react": patch
+"@clerk/vue": patch
+---
+
+Allow reordering API Keys and Billing pages in `<UserProfile />` and `<OrganizationProfile />`.
+
+Example:
+
+```tsx
+export function CustomUserProfile() {
+  return (
+    <UserProfile>
+      <UserProfile.Page label="apiKeys" />
+      <UserProfile.Page label="billing" />
+    </UserProfile>
+  )
+}
+```

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro

@@ -1,7 +1,7 @@
 ---
 import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro';
 
-const reorderItemsLabels = ['general', 'members'] as const;
+const reorderItemsLabels = ['general', 'members', 'billing', 'apiKeys'] as const;
 type ReorderItemsLabels = (typeof reorderItemsLabels)[number];
 
 type Props<Label extends string> = {

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro

@@ -1,7 +1,7 @@
 ---
 import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro';
 
-const reorderItemsLabels = ['general', 'members'] as const;
+const reorderItemsLabels = ['general', 'members', 'billing', 'apiKeys'] as const;
 type ReorderItemsLabels = (typeof reorderItemsLabels)[number];
 
 type Props<Label extends string> = {

packages/astro/src/astro-components/interactive/UserProfile/UserProfilePage.astro

@@ -1,7 +1,7 @@
 ---
 import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro';
 
-const reorderItemsLabels = ['account', 'security'] as const;
+const reorderItemsLabels = ['account', 'security', 'billing', 'apiKeys'] as const;
 type ReorderItemsLabels = (typeof reorderItemsLabels)[number];
 
 type Props<Label extends string> = {

packages/clerk-js/src/ui/utils/createCustomPages.tsx

@@ -22,7 +22,7 @@ export type CustomPageContent = {
 };
 
 type ProfileReorderItem = {
-  label: 'account' | 'security' | 'members' | 'general';
+  label: 'account' | 'security' | 'members' | 'general' | 'billing' | 'apiKeys';
 };
 
 type ProfileCustomPage = {

packages/react/src/types.ts

@@ -131,15 +131,15 @@ type PageProps<T extends string> =
       labelIcon?: never;
     };
 
-export type UserProfilePageProps = PageProps<'account' | 'security'>;
+export type UserProfilePageProps = PageProps<'account' | 'security' | 'billing' | 'apiKeys'>;
 
 export type UserProfileLinkProps = {
   url: string;
   label: string;
   labelIcon: React.ReactNode;
 };
 
-export type OrganizationProfilePageProps = PageProps<'general' | 'members'>;
+export type OrganizationProfilePageProps = PageProps<'general' | 'members' | 'billing' | 'apiKeys'>;
 export type OrganizationProfileLinkProps = UserProfileLinkProps;
 
 type ButtonActionProps<T extends string> =

packages/react/src/utils/useCustomPages.tsx

@@ -20,7 +20,7 @@ export const useUserProfileCustomPages = (
   children: React.ReactNode | React.ReactNode[],
   options?: UseCustomPagesOptions,
 ) => {
-  const reorderItemsLabels = ['account', 'security'];
+  const reorderItemsLabels = ['account', 'security', 'billing', 'apiKeys'];
   return useCustomPages(
     {
       children,
@@ -38,7 +38,7 @@ export const useOrganizationProfileCustomPages = (
   children: React.ReactNode | React.ReactNode[],
   options?: UseCustomPagesOptions,
 ) => {
-  const reorderItemsLabels = ['general', 'members'];
+  const reorderItemsLabels = ['general', 'members', 'billing', 'apiKeys'];
   return useCustomPages(
     {
       children,

packages/vue/src/types.ts

@@ -83,14 +83,14 @@ type PageProps<T extends string> =
       url?: never;
     };
 
-export type UserProfilePageProps = PageProps<'account' | 'security'>;
+export type UserProfilePageProps = PageProps<'account' | 'security' | 'billing' | 'apiKeys'>;
 
 export type UserProfileLinkProps = {
   url: string;
   label: string;
 };
 
-export type OrganizationProfilePageProps = PageProps<'general' | 'members'>;
+export type OrganizationProfilePageProps = PageProps<'general' | 'members' | 'billing' | 'apiKeys'>;
 
 export type OrganizationLinkProps = {
   url: string;

packages/vue/src/utils/useCustomPages.ts

@@ -12,7 +12,7 @@ import { useCustomElementPortal } from './useCustomElementPortal';
 
 export const useUserProfileCustomPages = () => {
   const { customPages, customPagesPortals, addCustomPage } = useCustomPages({
-    reorderItemsLabels: ['account', 'security'],
+    reorderItemsLabels: ['account', 'security', 'billing', 'apiKeys'],
     PageComponent: UserProfilePage,
     LinkComponent: UserProfileLink,
     componentName: 'UserProfile',
@@ -31,7 +31,7 @@ export const useUserProfileCustomPages = () => {
 
 export const useOrganizationProfileCustomPages = () => {
   const { customPages, customPagesPortals, addCustomPage } = useCustomPages({
-    reorderItemsLabels: ['general', 'members'],
+    reorderItemsLabels: ['general', 'members', 'billing', 'apiKeys'],
     PageComponent: OrganizationProfilePage,
     LinkComponent: OrganizationProfileLink,
     componentName: 'OrganizationProfile',