chore(clerk-js): Address leftover commerce TODOs

.changeset/silent-zebras-refuse.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Cleanup leftover Commerce-launch TODOs

packages/clerk-js/bundlewatch.config.json

@@ -9,22 +9,26 @@
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
     { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
-    { "path": "./dist/organizationprofile*.js", "maxSize": "12KB" },
+    { "path": "./dist/organizationprofile*.js", "maxSize": "10KB" },
     { "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationlist*.js", "maxSize": "5.5KB" },
     { "path": "./dist/signin*.js", "maxSize": "14KB" },
     { "path": "./dist/signup*.js", "maxSize": "8.5KB" },
     { "path": "./dist/userbutton*.js", "maxSize": "5KB" },
-    { "path": "./dist/userprofile*.js", "maxSize": "16.5KB" },
+    { "path": "./dist/userprofile*.js", "maxSize": "16KB" },
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },
     { "path": "./dist/onetap*.js", "maxSize": "1KB" },
     { "path": "./dist/waitlist*.js", "maxSize": "1.5KB" },
     { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },
     { "path": "./dist/checkout*.js", "maxSize": "7.25KB" },
     { "path": "./dist/paymentSources*.js", "maxSize": "9.17KB" },
-    { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
+    { "path": "./dist/up-billing-page*.js", "maxSize": "3.5KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" },
+    { "path": "./dist/up-plans-page*.js", "maxSize": "1.0KB" },
+    { "path": "./dist/op-plans-page*.js", "maxSize": "1.0KB" },
+    { "path": "./dist/statement-page*.js", "maxSize": "1.0KB" },
+    { "path": "./dist/payment-attempt-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/sessionTasks*.js", "maxSize": "1.5KB" }
   ]
 }

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

@@ -6,7 +6,6 @@ import { LineItems } from '@/ui/elements/LineItems';
 
 import { useCheckoutContext } from '../../contexts';
 import { Box, descriptors, Flex, localizationKeys, useLocalizations } from '../../customizables';
-// TODO(@COMMERCE): Is this causing bundle size  issues ?
 import { EmailForm } from '../UserProfile/EmailForm';
 import { useCheckoutContextRoot } from './CheckoutPage';
 
@@ -101,7 +100,6 @@ export const AddEmailForm = () => {
           padding: t.space.$4,
         })}
       >
-        {/* TODO(@COMMERCE): How does ths operate for orgs ? */}
         <EmailForm
           title={localizationKeys('commerce.checkout.emailForm.title')}
           subtitle={localizationKeys('commerce.checkout.emailForm.subtitle')}

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

@@ -6,9 +6,6 @@ import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Route, Switch } from '../../router';
 import { OrganizationGeneralPage } from './OrganizationGeneralPage';
 import { OrganizationMembers } from './OrganizationMembers';
-import { OrganizationPaymentAttemptPage } from './OrganizationPaymentAttemptPage';
-import { OrganizationPlansPage } from './OrganizationPlansPage';
-import { OrganizationStatementPage } from './OrganizationStatementPage';
 
 const OrganizationBillingPage = lazy(() =>
   import(/* webpackChunkName: "op-billing-page"*/ './OrganizationBillingPage').then(module => ({
@@ -22,6 +19,24 @@ const OrganizationAPIKeysPage = lazy(() =>
   })),
 );
 
+const OrganizationPlansPage = lazy(() =>
+  import(/* webpackChunkName: "op-plans-page"*/ './OrganizationPlansPage').then(module => ({
+    default: module.OrganizationPlansPage,
+  })),
+);
+
+const OrganizationStatementPage = lazy(() =>
+  import(/* webpackChunkName: "statement-page"*/ './OrganizationStatementPage').then(module => ({
+    default: module.OrganizationStatementPage,
+  })),
+);
+
+const OrganizationPaymentAttemptPage = lazy(() =>
+  import(/* webpackChunkName: "payment-attempt-page"*/ './OrganizationPaymentAttemptPage').then(module => ({
+    default: module.OrganizationPaymentAttemptPage,
+  })),
+);
+
 export const OrganizationProfileRoutes = () => {
   const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot } =
     useOrganizationProfileContext();
@@ -82,19 +97,16 @@ export const OrganizationProfileRoutes = () => {
                   </Suspense>
                 </Route>
                 <Route path='plans'>
-                  {/* TODO(@commerce): Should this be lazy loaded ? */}
                   <Suspense fallback={''}>
                     <OrganizationPlansPage />
                   </Suspense>
                 </Route>
                 <Route path='statement/:statementId'>
-                  {/* TODO(@commerce): Should this be lazy loaded ? */}
                   <Suspense fallback={''}>
                     <OrganizationStatementPage />
                   </Suspense>
                 </Route>
                 <Route path='payment-attempt/:paymentAttemptId'>
-                  {/* TODO(@commerce): Should this be lazy loaded ? */}
                   <Suspense fallback={''}>
                     <OrganizationPaymentAttemptPage />
                   </Suspense>

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

@@ -250,7 +250,7 @@ const AddPaymentSourceForm = ({ children }: PropsWithChildren) => {
     const { setupIntent, error } = await stripe.confirmSetup({
       elements,
       confirmParams: {
-        return_url: '', // TODO(@COMMERCE): need to figure this out
+        return_url: '',
       },
       redirect: 'if_required',
     });
@@ -294,7 +294,7 @@ const AddPaymentSourceForm = ({ children }: PropsWithChildren) => {
               ? {
                   recurringPaymentRequest: {
                     paymentDescription: `${t(localizationKeys(checkout.planPeriod === 'month' ? 'commerce.paymentSource.applePayDescription.monthly' : 'commerce.paymentSource.applePayDescription.annual'))}`,
-                    managementURL: displayConfig.homeUrl, // TODO(@COMMERCE): is this the right URL?
+                    managementURL: displayConfig.homeUrl,
                     regularBilling: {
                       amount: checkout.totals.totalDueNow?.amount || checkout.totals.grandTotal.amount,
                       label: checkout.plan.name,

packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx

@@ -4,10 +4,7 @@ import { CustomPageContentContainer } from '../../common/CustomPageContentContai
 import { USER_PROFILE_NAVBAR_ROUTE_ID } from '../../constants';
 import { useEnvironment, useUserProfileContext } from '../../contexts';
 import { Route, Switch } from '../../router';
-import { PaymentAttemptPage } from '../PaymentAttempts';
-import { StatementPage } from '../Statements';
 import { AccountPage } from './AccountPage';
-import { PlansPage } from './PlansPage';
 import { SecurityPage } from './SecurityPage';
 
 const BillingPage = lazy(() =>
@@ -22,6 +19,24 @@ const APIKeysPage = lazy(() =>
   })),
 );
 
+const PlansPage = lazy(() =>
+  import(/* webpackChunkName: "up-plans-page"*/ './PlansPage').then(module => ({
+    default: module.PlansPage,
+  })),
+);
+
+const StatementPage = lazy(() =>
+  import(/* webpackChunkName: "statement-page"*/ '../Statements').then(module => ({
+    default: module.StatementPage,
+  })),
+);
+
+const PaymentAttemptPage = lazy(() =>
+  import(/* webpackChunkName: "payment-attempt-page"*/ '../PaymentAttempts').then(module => ({
+    default: module.PaymentAttemptPage,
+  })),
+);
+
 export const UserProfileRoutes = () => {
   const { pages } = useUserProfileContext();
   const { apiKeysSettings, commerceSettings } = useEnvironment();
@@ -74,19 +89,16 @@ export const UserProfileRoutes = () => {
                 </Suspense>
               </Route>
               <Route path='plans'>
-                {/* TODO(@commerce): Should this be lazy loaded ? */}
                 <Suspense fallback={''}>
                   <PlansPage />
                 </Suspense>
               </Route>
               <Route path='statement/:statementId'>
-                {/* TODO(@commerce): Should this be lazy loaded ? */}
                 <Suspense fallback={''}>
                   <StatementPage />
                 </Suspense>
               </Route>
               <Route path='payment-attempt/:paymentAttemptId'>
-                {/* TODO(@commerce): Should this be lazy loaded ? */}
                 <Suspense fallback={''}>
                   <PaymentAttemptPage />
                 </Suspense>