From 78592e824af552185d19288906226eed00ba720a Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Mon, 28 Jul 2025 17:48:48 -0700
Subject: [PATCH 1/5] refactor statement page and payment attempt page

---
 .changeset/slow-foxes-lay.md                  |  7 +++
 packages/clerk-js/bundlewatch.config.json     |  6 +-
 .../core/modules/commerce/CommerceBilling.ts  | 22 ++++++++
 .../PaymentAttempts/PaymentAttemptPage.tsx    | 21 +++++--
 .../ui/components/Statements/Statement.tsx    |  8 ++-
 .../components/Statements/StatementPage.tsx   | 55 ++++++++++++++++---
 packages/localizations/src/en-US.ts           |  1 +
 packages/types/src/commerce.ts                | 20 +++++++
 packages/types/src/localization.ts            |  1 +
 9 files changed, 122 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/slow-foxes-lay.md

diff --git a/.changeset/slow-foxes-lay.md b/.changeset/slow-foxes-lay.md
new file mode 100644
index 00000000000..b867879ae4b
--- /dev/null
+++ b/.changeset/slow-foxes-lay.md
@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Refactor billing statement page and payment attempt page data loading
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index cc0a673db41..3f37a1ae6cd 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -1,9 +1,9 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "618KB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "72.2KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "72.45KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115.08KB" },
-    { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
+    { "path": "./dist/clerk.headless*.js", "maxSize": "55.2KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "113KB" },
     { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "118KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
@@ -23,7 +23,7 @@
     { "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": "8.45KB" },
+    { "path": "./dist/checkout*.js", "maxSize": "8.5KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/up-plans-page*.js", "maxSize": "1.0KB" },
diff --git a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts
index 725bd728081..760a29996f8 100644
--- a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts
+++ b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts
@@ -103,6 +103,18 @@ export class CommerceBilling implements CommerceBillingNamespace {
     });
   };
 
+  getStatement = async (params: { id: string; orgId?: string }): Promise<CommerceStatementResource> => {
+    const statement = (
+      await BaseResource._fetch({
+        path: params.orgId
+          ? `/organizations/${params.orgId}/commerce/statements/${params.id}`
+          : `/me/commerce/statements/${params.id}`,
+        method: 'GET',
+      })
+    )?.response as unknown as CommerceStatementJSON;
+    return new CommerceStatement(statement);
+  };
+
   getPaymentAttempts = async (
     params: GetPaymentAttemptsParams,
   ): Promise<ClerkPaginatedResponse<CommercePaymentResource>> => {
@@ -122,6 +134,16 @@ export class CommerceBilling implements CommerceBillingNamespace {
     });
   };
 
+  getPaymentAttempt = async (params: { id: string; orgId?: string }): Promise<CommercePaymentResource> => {
+    const paymentAttempt = (await BaseResource._fetch({
+      path: params.orgId
+        ? `/organizations/${params.orgId}/commerce/payment_attempts/${params.id}`
+        : `/me/commerce/payment_attempts/${params.id}`,
+      method: 'GET',
+    })) as unknown as CommercePaymentJSON;
+    return new CommercePayment(paymentAttempt);
+  };
+
   startCheckout = async (params: CreateCheckoutParams) => {
     const { orgId, ...rest } = params;
     const json = (
diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
index 77b3c7f0e5c..f98771c787f 100644
--- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -1,10 +1,12 @@
+import { useClerk, useOrganization } from '@clerk/shared/react';
+import useSWR from 'swr';
+
 import { Header } from '@/ui/elements/Header';
 import { LineItems } from '@/ui/elements/LineItems';
 import { formatDate } from '@/ui/utils/formatDate';
 import { truncateWithEndVisible } from '@/ui/utils/truncateTextWithEndVisible';
 
-import { usePaymentAttemptsContext, useStatements } from '../../contexts';
-import { useSubscriberTypeLocalizationRoot } from '../../contexts/components';
+import { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts/components';
 import {
   Badge,
   Box,
@@ -23,11 +25,20 @@ import { useRouter } from '../../router';
 
 export const PaymentAttemptPage = () => {
   const { params, navigate } = useRouter();
-  const { isLoading } = useStatements();
-  const { getPaymentAttemptById } = usePaymentAttemptsContext();
+  const subscriberType = useSubscriberTypeContext();
+  const { organization } = useOrganization();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
+  const clerk = useClerk();
+
+  const { data: paymentAttempt, isLoading } = useSWR(
+    params.paymentAttemptId ? { type: 'payment-attempt', id: params.paymentAttemptId } : null,
+    () =>
+      clerk.billing.getPaymentAttempt({
+        id: params.paymentAttemptId,
+        orgId: subscriberType === 'org' ? organization?.id : undefined,
+      }),
+  );
 
-  const paymentAttempt = params.paymentAttemptId ? getPaymentAttemptById(params.paymentAttemptId) : null;
   const subscriptionItem = paymentAttempt?.subscriptionItem;
 
   if (isLoading) {
diff --git a/packages/clerk-js/src/ui/components/Statements/Statement.tsx b/packages/clerk-js/src/ui/components/Statements/Statement.tsx
index 1e5b0614272..2cef2bc3e28 100644
--- a/packages/clerk-js/src/ui/components/Statements/Statement.tsx
+++ b/packages/clerk-js/src/ui/components/Statements/Statement.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { LocalizationKey } from '../../customizables';
 import { Badge, Box, Button, descriptors, Heading, Icon, Span, Text } from '../../customizables';
 import { useClipboard } from '../../hooks';
@@ -279,7 +281,7 @@ function SectionContentDetailsListItem({
   icon?: React.ReactNode;
   label: string | LocalizationKey;
   labelIcon?: React.ComponentType;
-  value: string | LocalizationKey;
+  value: string | LocalizationKey | React.ReactElement;
   valueTruncated?: boolean;
   valueCopyable?: boolean;
 }) {
@@ -348,12 +350,14 @@ function SectionContentDetailsListItem({
               {valueTruncated ? truncateWithEndVisible(value) : value}
             </Text>
           </>
+        ) : React.isValidElement(value) ? (
+          value
         ) : (
           <Text
             elementDescriptor={descriptors.statementSectionContentDetailsListItemValue}
             colorScheme='secondary'
             variant='caption'
-            localizationKey={value}
+            localizationKey={value as LocalizationKey}
           />
         )}
       </Span>
diff --git a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
index e7e71184626..7801a0e05e9 100644
--- a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
+++ b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
@@ -1,19 +1,41 @@
+import { useClerk, useOrganization } from '@clerk/shared/react';
+import useSWR from 'swr';
+
 import { Header } from '@/ui/elements/Header';
 import { formatDate } from '@/ui/utils/formatDate';
 
-import { useStatements, useStatementsContext, useSubscriberTypeLocalizationRoot } from '../../contexts';
-import { Box, descriptors, localizationKeys, Spinner, Text, useLocalizations } from '../../customizables';
-import { Plus, RotateLeftRight } from '../../icons';
+import { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts/components';
+import {
+  Box,
+  descriptors,
+  Icon,
+  localizationKeys,
+  SimpleButton,
+  Span,
+  Spinner,
+  Text,
+  useLocalizations,
+} from '../../customizables';
+import { ArrowRightIcon, Plus, RotateLeftRight } from '../../icons';
 import { useRouter } from '../../router';
 import { Statement } from './Statement';
 
 export const StatementPage = () => {
   const { params, navigate } = useRouter();
-  const { isLoading } = useStatements();
-  const { getStatementById } = useStatementsContext();
+  const subscriberType = useSubscriberTypeContext();
+  const { organization } = useOrganization();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
   const { t } = useLocalizations();
-  const statement = params.statementId ? getStatementById(params.statementId) : null;
+  const clerk = useClerk();
+
+  const { data: statement, isLoading } = useSWR(
+    params.statementId ? { type: 'statement', id: params.statementId } : null,
+    () =>
+      clerk.billing.getStatement({
+        id: params.statementId,
+        orgId: subscriberType === 'org' ? organization?.id : undefined,
+      }),
+  );
 
   if (isLoading) {
     return (
@@ -91,9 +113,24 @@ export const StatementPage = () => {
                                 )
                           }
                           labelIcon={item.chargeType === 'recurring' ? RotateLeftRight : Plus}
-                          value={item.id}
-                          valueTruncated
-                          valueCopyable
+                          value={
+                            <SimpleButton
+                              onClick={() => void navigate(`../../payment-attempt/${item.id}`)}
+                              variant='link'
+                              colorScheme='primary'
+                              textVariant='buttonSmall'
+                              sx={t => ({
+                                gap: t.space.$1,
+                              })}
+                            >
+                              <Span localizationKey={localizationKeys('commerce.viewPayment')} />
+                              <Icon
+                                icon={ArrowRightIcon}
+                                size='sm'
+                                aria-hidden
+                              />
+                            </SimpleButton>
+                          }
                         />
                         {item.subscriptionItem.credit && item.subscriptionItem.credit.amount.amount > 0 ? (
                           <Statement.SectionContentDetailsListItem
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index cb64ff7594a..358eee86270 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -147,6 +147,7 @@ export const enUS: LocalizationResource = {
     totalDue: 'Total due',
     totalDueToday: 'Total Due Today',
     viewFeatures: 'View features',
+    viewPayment: 'View payment',
     year: 'Year',
   },
   createOrganization: {
diff --git a/packages/types/src/commerce.ts b/packages/types/src/commerce.ts
index aa82e021a4a..edda22a2895 100644
--- a/packages/types/src/commerce.ts
+++ b/packages/types/src/commerce.ts
@@ -26,6 +26,16 @@ export interface CommerceBillingNamespace {
    */
   getPaymentAttempts: (params: GetPaymentAttemptsParams) => Promise<ClerkPaginatedResponse<CommercePaymentResource>>;
 
+  /**
+   * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change.
+   * It is advised to pin the SDK version and the clerk-js version to a specific version to avoid breaking changes.
+   * @example
+   * ```tsx
+   * <ClerkProvider clerkJsVersion="x.x.x" />
+   * ```
+   */
+  getPaymentAttempt: (params: { id: string; orgId?: string }) => Promise<CommercePaymentResource>;
+
   /**
    * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change.
    * It is advised to pin the SDK version and the clerk-js version to a specific version to avoid breaking changes.
@@ -79,6 +89,16 @@ export interface CommerceBillingNamespace {
    */
   getStatements: (params: GetStatementsParams) => Promise<ClerkPaginatedResponse<CommerceStatementResource>>;
 
+  /**
+   * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change.
+   * It is advised to pin the SDK version and the clerk-js version to a specific version to avoid breaking changes.
+   * @example
+   * ```tsx
+   * <ClerkProvider clerkJsVersion="x.x.x" />
+   * ```
+   */
+  getStatement: (params: { id: string; orgId?: string }) => Promise<CommerceStatementResource>;
+
   /**
    * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change.
    * It is advised to pin the SDK version and the clerk-js version to a specific version to avoid breaking changes.
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
index 4ff866aa834..dfe18584273 100644
--- a/packages/types/src/localization.ts
+++ b/packages/types/src/localization.ts
@@ -186,6 +186,7 @@ export type __internal_LocalizationResource = {
     defaultFreePlanActive: LocalizationValue;
     viewFeatures: LocalizationValue;
     seeAllFeatures: LocalizationValue;
+    viewPayment: LocalizationValue;
     availableFeatures: LocalizationValue;
     subtotal: LocalizationValue;
     credit: LocalizationValue;

From 324f03b9e96952fc380741edac90d2b42ea855c6 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Tue, 29 Jul 2025 09:42:40 -0700
Subject: [PATCH 2/5] feedback

---
 .../PaymentAttempts/PaymentAttemptPage.tsx    | 30 +++++++++++++++++--
 .../components/Statements/StatementPage.tsx   | 26 ++++++++++++++--
 .../contexts/components/PaymentAttempts.tsx   | 17 -----------
 .../src/ui/contexts/components/Statements.tsx | 17 -----------
 4 files changed, 51 insertions(+), 39 deletions(-)
 delete mode 100644 packages/clerk-js/src/ui/contexts/components/PaymentAttempts.tsx
 delete mode 100644 packages/clerk-js/src/ui/contexts/components/Statements.tsx

diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
index f98771c787f..09a45ed548e 100644
--- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -1,6 +1,7 @@
 import { useClerk, useOrganization } from '@clerk/shared/react';
 import useSWR from 'swr';
 
+import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
 import { LineItems } from '@/ui/elements/LineItems';
 import { formatDate } from '@/ui/utils/formatDate';
@@ -18,6 +19,7 @@ import {
   Span,
   Spinner,
   Text,
+  useLocalizations,
 } from '../../customizables';
 import { useClipboard } from '../../hooks';
 import { Check, Copy } from '../../icons';
@@ -28,10 +30,21 @@ export const PaymentAttemptPage = () => {
   const subscriberType = useSubscriberTypeContext();
   const { organization } = useOrganization();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
+  const { translateError } = useLocalizations();
   const clerk = useClerk();
 
-  const { data: paymentAttempt, isLoading } = useSWR(
-    params.paymentAttemptId ? { type: 'payment-attempt', id: params.paymentAttemptId } : null,
+  const {
+    data: paymentAttempt,
+    isLoading,
+    error,
+  } = useSWR(
+    params.paymentAttemptId
+      ? {
+          type: 'payment-attempt',
+          id: params.paymentAttemptId,
+          orgId: subscriberType === 'org' ? organization?.id : undefined,
+        }
+      : null,
     () =>
       clerk.billing.getPaymentAttempt({
         id: params.paymentAttemptId,
@@ -53,6 +66,19 @@ export const PaymentAttemptPage = () => {
     );
   }
 
+  if (error) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+        <Alert
+          variant='danger'
+          colorScheme='danger'
+        >
+          {translateError(error)}
+        </Alert>
+      </Box>
+    );
+  }
+
   return (
     <>
       <Header.Root
diff --git a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
index 7801a0e05e9..015d1489edf 100644
--- a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
+++ b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
@@ -1,6 +1,7 @@
 import { useClerk, useOrganization } from '@clerk/shared/react';
 import useSWR from 'swr';
 
+import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
 import { formatDate } from '@/ui/utils/formatDate';
 
@@ -25,11 +26,17 @@ export const StatementPage = () => {
   const subscriberType = useSubscriberTypeContext();
   const { organization } = useOrganization();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
-  const { t } = useLocalizations();
+  const { t, translateError } = useLocalizations();
   const clerk = useClerk();
 
-  const { data: statement, isLoading } = useSWR(
-    params.statementId ? { type: 'statement', id: params.statementId } : null,
+  const {
+    data: statement,
+    isLoading,
+    error,
+  } = useSWR(
+    params.statementId
+      ? { type: 'statement', id: params.statementId, orgId: subscriberType === 'org' ? organization?.id : undefined }
+      : null,
     () =>
       clerk.billing.getStatement({
         id: params.statementId,
@@ -49,6 +56,19 @@ export const StatementPage = () => {
     );
   }
 
+  if (error) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+        <Alert
+          variant='danger'
+          colorScheme='danger'
+        >
+          {translateError(error)}
+        </Alert>
+      </Box>
+    );
+  }
+
   return (
     <>
       <Header.Root
diff --git a/packages/clerk-js/src/ui/contexts/components/PaymentAttempts.tsx b/packages/clerk-js/src/ui/contexts/components/PaymentAttempts.tsx
deleted file mode 100644
index 6cebd091095..00000000000
--- a/packages/clerk-js/src/ui/contexts/components/PaymentAttempts.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useCallback } from 'react';
-
-import { usePaymentAttempts } from './Plans';
-
-export const usePaymentAttemptsContext = () => {
-  const { data: payments } = usePaymentAttempts();
-  const getPaymentAttemptById = useCallback(
-    (paymentAttemptId: string) => {
-      return payments.find(payment => payment.id === paymentAttemptId);
-    },
-    [payments],
-  );
-
-  return {
-    getPaymentAttemptById,
-  };
-};
diff --git a/packages/clerk-js/src/ui/contexts/components/Statements.tsx b/packages/clerk-js/src/ui/contexts/components/Statements.tsx
deleted file mode 100644
index b33f537c5d6..00000000000
--- a/packages/clerk-js/src/ui/contexts/components/Statements.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useCallback } from 'react';
-
-import { useStatements } from './Plans';
-
-export const useStatementsContext = () => {
-  const { data: statements } = useStatements();
-  const getStatementById = useCallback(
-    (statementId: string) => {
-      return statements.find(statement => statement.id === statementId);
-    },
-    [statements],
-  );
-
-  return {
-    getStatementById,
-  };
-};

From 5d31b9f564bb1dc980e4d9468fb00efe918d4ba8 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Tue, 29 Jul 2025 09:56:24 -0700
Subject: [PATCH 3/5] cleanup

---
 .../PaymentAttempts/PaymentAttemptPage.tsx    | 28 +++++++------------
 .../components/Statements/StatementPage.tsx   | 27 ++++++------------
 .../src/ui/contexts/components/index.ts       |  2 --
 3 files changed, 19 insertions(+), 38 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
index 09a45ed548e..778c13fad5e 100644
--- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -30,7 +30,7 @@ export const PaymentAttemptPage = () => {
   const subscriberType = useSubscriberTypeContext();
   const { organization } = useOrganization();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
-  const { translateError } = useLocalizations();
+  const { t, translateError } = useLocalizations();
   const clerk = useClerk();
 
   const {
@@ -66,19 +66,6 @@ export const PaymentAttemptPage = () => {
     );
   }
 
-  if (error) {
-    return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
-        <Alert
-          variant='danger'
-          colorScheme='danger'
-        >
-          {translateError(error)}
-        </Alert>
-      </Box>
-    );
-  }
-
   return (
     <>
       <Header.Root
@@ -98,10 +85,15 @@ export const PaymentAttemptPage = () => {
         </Header.BackLink>
       </Header.Root>
       {!paymentAttempt ? (
-        <Text
-          localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.notFound`)}
-          sx={{ textAlign: 'center' }}
-        />
+        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+          <Alert
+            variant='danger'
+            colorScheme='danger'
+          >
+            {translateError(error.errors[0]) ||
+              t(localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.notFound`))}
+          </Alert>
+        </Box>
       ) : (
         <Box
           elementDescriptor={descriptors.paymentAttemptRoot}
diff --git a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
index 015d1489edf..e0f1024e1ee 100644
--- a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
+++ b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
@@ -14,7 +14,6 @@ import {
   SimpleButton,
   Span,
   Spinner,
-  Text,
   useLocalizations,
 } from '../../customizables';
 import { ArrowRightIcon, Plus, RotateLeftRight } from '../../icons';
@@ -56,19 +55,6 @@ export const StatementPage = () => {
     );
   }
 
-  if (error) {
-    return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
-        <Alert
-          variant='danger'
-          colorScheme='danger'
-        >
-          {translateError(error)}
-        </Alert>
-      </Box>
-    );
-  }
-
   return (
     <>
       <Header.Root
@@ -90,10 +76,15 @@ export const StatementPage = () => {
         </Header.BackLink>
       </Header.Root>
       {!statement ? (
-        <Text
-          localizationKey={localizationKeys(`${localizationRoot}.billingPage.statementsSection.notFound`)}
-          sx={{ textAlign: 'center' }}
-        />
+        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+          <Alert
+            variant='danger'
+            colorScheme='danger'
+          >
+            {translateError(error.errors[0]) ||
+              t(localizationKeys(`${localizationRoot}.billingPage.statementsSection.notFound`))}
+          </Alert>
+        </Box>
       ) : (
         <Statement.Root>
           <Statement.Header
diff --git a/packages/clerk-js/src/ui/contexts/components/index.ts b/packages/clerk-js/src/ui/contexts/components/index.ts
index 0d79e53f98f..408688463e8 100644
--- a/packages/clerk-js/src/ui/contexts/components/index.ts
+++ b/packages/clerk-js/src/ui/contexts/components/index.ts
@@ -13,8 +13,6 @@ export * from './GoogleOneTap';
 export * from './Waitlist';
 export * from './PricingTable';
 export * from './Checkout';
-export * from './Statements';
-export * from './PaymentAttempts';
 export * from './Plans';
 export * from './ApiKeys';
 export * from './OAuthConsent';

From 3856df9a6cf8f1e69f6c06943fdd75b64c3546ff Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Tue, 29 Jul 2025 10:09:59 -0700
Subject: [PATCH 4/5] fixes

---
 .../ui/components/PaymentAttempts/PaymentAttemptPage.tsx  | 4 ++--
 .../src/ui/components/Statements/StatementPage.tsx        | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
index 778c13fad5e..7a7c0be281c 100644
--- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -42,13 +42,13 @@ export const PaymentAttemptPage = () => {
       ? {
           type: 'payment-attempt',
           id: params.paymentAttemptId,
-          orgId: subscriberType === 'org' ? organization?.id : undefined,
+          orgId: subscriberType === 'organization' ? organization?.id : undefined,
         }
       : null,
     () =>
       clerk.billing.getPaymentAttempt({
         id: params.paymentAttemptId,
-        orgId: subscriberType === 'org' ? organization?.id : undefined,
+        orgId: subscriberType === 'organization' ? organization?.id : undefined,
       }),
   );
 
diff --git a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
index e0f1024e1ee..fc0ceb3027c 100644
--- a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
+++ b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
@@ -34,12 +34,16 @@ export const StatementPage = () => {
     error,
   } = useSWR(
     params.statementId
-      ? { type: 'statement', id: params.statementId, orgId: subscriberType === 'org' ? organization?.id : undefined }
+      ? {
+          type: 'statement',
+          id: params.statementId,
+          orgId: subscriberType === 'organization' ? organization?.id : undefined,
+        }
       : null,
     () =>
       clerk.billing.getStatement({
         id: params.statementId,
-        orgId: subscriberType === 'org' ? organization?.id : undefined,
+        orgId: subscriberType === 'organization' ? organization?.id : undefined,
       }),
   );
 

From 56352ec5f207820ca069f17586ad83270c742e8f Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Tue, 29 Jul 2025 11:17:48 -0700
Subject: [PATCH 5/5] localizations

---
 packages/localizations/src/ar-SA.ts | 1 +
 packages/localizations/src/be-BY.ts | 1 +
 packages/localizations/src/bg-BG.ts | 1 +
 packages/localizations/src/bn-IN.ts | 1 +
 packages/localizations/src/ca-ES.ts | 1 +
 packages/localizations/src/cs-CZ.ts | 1 +
 packages/localizations/src/da-DK.ts | 1 +
 packages/localizations/src/de-DE.ts | 1 +
 packages/localizations/src/el-GR.ts | 1 +
 packages/localizations/src/en-GB.ts | 1 +
 packages/localizations/src/es-CR.ts | 1 +
 packages/localizations/src/es-ES.ts | 1 +
 packages/localizations/src/es-MX.ts | 1 +
 packages/localizations/src/es-UY.ts | 1 +
 packages/localizations/src/fa-IR.ts | 1 +
 packages/localizations/src/fi-FI.ts | 1 +
 packages/localizations/src/fr-FR.ts | 1 +
 packages/localizations/src/he-IL.ts | 1 +
 packages/localizations/src/hi-IN.ts | 1 +
 packages/localizations/src/hr-HR.ts | 1 +
 packages/localizations/src/hu-HU.ts | 1 +
 packages/localizations/src/id-ID.ts | 1 +
 packages/localizations/src/is-IS.ts | 1 +
 packages/localizations/src/it-IT.ts | 1 +
 packages/localizations/src/ja-JP.ts | 1 +
 packages/localizations/src/kk-KZ.ts | 1 +
 packages/localizations/src/ko-KR.ts | 1 +
 packages/localizations/src/mn-MN.ts | 1 +
 packages/localizations/src/ms-MY.ts | 1 +
 packages/localizations/src/nb-NO.ts | 1 +
 packages/localizations/src/nl-BE.ts | 1 +
 packages/localizations/src/nl-NL.ts | 1 +
 packages/localizations/src/pl-PL.ts | 1 +
 packages/localizations/src/pt-BR.ts | 1 +
 packages/localizations/src/pt-PT.ts | 1 +
 packages/localizations/src/ro-RO.ts | 1 +
 packages/localizations/src/ru-RU.ts | 1 +
 packages/localizations/src/sk-SK.ts | 1 +
 packages/localizations/src/sr-RS.ts | 1 +
 packages/localizations/src/sv-SE.ts | 1 +
 packages/localizations/src/ta-IN.ts | 1 +
 packages/localizations/src/te-IN.ts | 1 +
 packages/localizations/src/th-TH.ts | 1 +
 packages/localizations/src/tr-TR.ts | 1 +
 packages/localizations/src/uk-UA.ts | 1 +
 packages/localizations/src/vi-VN.ts | 1 +
 packages/localizations/src/zh-CN.ts | 1 +
 packages/localizations/src/zh-TW.ts | 1 +
 48 files changed, 48 insertions(+)

diff --git a/packages/localizations/src/ar-SA.ts b/packages/localizations/src/ar-SA.ts
index 7f231c2a68d..ecd6f395b5f 100644
--- a/packages/localizations/src/ar-SA.ts
+++ b/packages/localizations/src/ar-SA.ts
@@ -154,6 +154,7 @@ export const arSA: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/be-BY.ts b/packages/localizations/src/be-BY.ts
index 1fa0db9597b..96863225a1a 100644
--- a/packages/localizations/src/be-BY.ts
+++ b/packages/localizations/src/be-BY.ts
@@ -154,6 +154,7 @@ export const beBY: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/bg-BG.ts b/packages/localizations/src/bg-BG.ts
index 3d9bf7348bd..363cb69b43f 100644
--- a/packages/localizations/src/bg-BG.ts
+++ b/packages/localizations/src/bg-BG.ts
@@ -154,6 +154,7 @@ export const bgBG: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/bn-IN.ts b/packages/localizations/src/bn-IN.ts
index 6af8dfccb99..418dfdd309e 100644
--- a/packages/localizations/src/bn-IN.ts
+++ b/packages/localizations/src/bn-IN.ts
@@ -154,6 +154,7 @@ export const bnIN: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/ca-ES.ts b/packages/localizations/src/ca-ES.ts
index ac2f2352634..2eaa4268f3b 100644
--- a/packages/localizations/src/ca-ES.ts
+++ b/packages/localizations/src/ca-ES.ts
@@ -154,6 +154,7 @@ export const caES: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/cs-CZ.ts b/packages/localizations/src/cs-CZ.ts
index 439065c910b..b3cd403f767 100644
--- a/packages/localizations/src/cs-CZ.ts
+++ b/packages/localizations/src/cs-CZ.ts
@@ -158,6 +158,7 @@ export const csCZ: LocalizationResource = {
     totalDue: 'Celkem k zaplacení',
     totalDueToday: 'Celkem k zaplacení dnes',
     viewFeatures: 'Zobrazit funkce',
+    viewPayment: undefined,
     year: 'Rok',
   },
   createOrganization: {
diff --git a/packages/localizations/src/da-DK.ts b/packages/localizations/src/da-DK.ts
index cd63084f454..cb5bff57790 100644
--- a/packages/localizations/src/da-DK.ts
+++ b/packages/localizations/src/da-DK.ts
@@ -154,6 +154,7 @@ export const daDK: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/de-DE.ts b/packages/localizations/src/de-DE.ts
index 40ca9071436..c842e103aad 100644
--- a/packages/localizations/src/de-DE.ts
+++ b/packages/localizations/src/de-DE.ts
@@ -157,6 +157,7 @@ export const deDE: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: 'Heute fällig',
     viewFeatures: 'Funktionen anzeigen',
+    viewPayment: undefined,
     year: 'Jahr',
   },
   createOrganization: {
diff --git a/packages/localizations/src/el-GR.ts b/packages/localizations/src/el-GR.ts
index 6885f3b2722..890a21d44d8 100644
--- a/packages/localizations/src/el-GR.ts
+++ b/packages/localizations/src/el-GR.ts
@@ -154,6 +154,7 @@ export const elGR: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/en-GB.ts b/packages/localizations/src/en-GB.ts
index b048817ee51..d1321aa1e94 100644
--- a/packages/localizations/src/en-GB.ts
+++ b/packages/localizations/src/en-GB.ts
@@ -154,6 +154,7 @@ export const enGB: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/es-CR.ts b/packages/localizations/src/es-CR.ts
index ec1836e964a..4999eec6756 100644
--- a/packages/localizations/src/es-CR.ts
+++ b/packages/localizations/src/es-CR.ts
@@ -154,6 +154,7 @@ export const esCR: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/es-ES.ts b/packages/localizations/src/es-ES.ts
index fe773022cc6..c06d806277d 100644
--- a/packages/localizations/src/es-ES.ts
+++ b/packages/localizations/src/es-ES.ts
@@ -154,6 +154,7 @@ export const esES: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/es-MX.ts b/packages/localizations/src/es-MX.ts
index 8ab1e744c6d..8785a7c3aeb 100644
--- a/packages/localizations/src/es-MX.ts
+++ b/packages/localizations/src/es-MX.ts
@@ -154,6 +154,7 @@ export const esMX: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/es-UY.ts b/packages/localizations/src/es-UY.ts
index e195ec77d32..5149df6b9de 100644
--- a/packages/localizations/src/es-UY.ts
+++ b/packages/localizations/src/es-UY.ts
@@ -154,6 +154,7 @@ export const esUY: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/fa-IR.ts b/packages/localizations/src/fa-IR.ts
index 8c9aafe7d01..e5c91b0a988 100644
--- a/packages/localizations/src/fa-IR.ts
+++ b/packages/localizations/src/fa-IR.ts
@@ -158,6 +158,7 @@ export const faIR: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: 'سررسید کل امروز',
     viewFeatures: 'مشاهده ویژگی ها',
+    viewPayment: undefined,
     year: 'سال',
   },
   createOrganization: {
diff --git a/packages/localizations/src/fi-FI.ts b/packages/localizations/src/fi-FI.ts
index a3b02b66237..5ae11693b28 100644
--- a/packages/localizations/src/fi-FI.ts
+++ b/packages/localizations/src/fi-FI.ts
@@ -154,6 +154,7 @@ export const fiFI: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/fr-FR.ts b/packages/localizations/src/fr-FR.ts
index ce6097b94e6..b32a88eadc7 100644
--- a/packages/localizations/src/fr-FR.ts
+++ b/packages/localizations/src/fr-FR.ts
@@ -156,6 +156,7 @@ export const frFR: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: "Total dû aujourd'hui",
     viewFeatures: 'Voir les fonctionnalités',
+    viewPayment: undefined,
     year: 'An',
   },
   createOrganization: {
diff --git a/packages/localizations/src/he-IL.ts b/packages/localizations/src/he-IL.ts
index e698684c647..6f4abb1a29c 100644
--- a/packages/localizations/src/he-IL.ts
+++ b/packages/localizations/src/he-IL.ts
@@ -154,6 +154,7 @@ export const heIL: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/hi-IN.ts b/packages/localizations/src/hi-IN.ts
index a4222322c50..dd94a200965 100644
--- a/packages/localizations/src/hi-IN.ts
+++ b/packages/localizations/src/hi-IN.ts
@@ -154,6 +154,7 @@ export const hiIN: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/hr-HR.ts b/packages/localizations/src/hr-HR.ts
index 8ad7c3a0705..9e3e464e408 100644
--- a/packages/localizations/src/hr-HR.ts
+++ b/packages/localizations/src/hr-HR.ts
@@ -154,6 +154,7 @@ export const hrHR: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/hu-HU.ts b/packages/localizations/src/hu-HU.ts
index e5fd2700de9..0ea1960ad9d 100644
--- a/packages/localizations/src/hu-HU.ts
+++ b/packages/localizations/src/hu-HU.ts
@@ -154,6 +154,7 @@ export const huHU: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/id-ID.ts b/packages/localizations/src/id-ID.ts
index 7583d763157..50372f329c2 100644
--- a/packages/localizations/src/id-ID.ts
+++ b/packages/localizations/src/id-ID.ts
@@ -154,6 +154,7 @@ export const idID: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/is-IS.ts b/packages/localizations/src/is-IS.ts
index 0a160eacc02..2622ab715c4 100644
--- a/packages/localizations/src/is-IS.ts
+++ b/packages/localizations/src/is-IS.ts
@@ -154,6 +154,7 @@ export const isIS: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/it-IT.ts b/packages/localizations/src/it-IT.ts
index d4914eb5548..df2f2613e0b 100644
--- a/packages/localizations/src/it-IT.ts
+++ b/packages/localizations/src/it-IT.ts
@@ -160,6 +160,7 @@ export const itIT: LocalizationResource = {
     totalDue: 'Totale dovuto',
     totalDueToday: 'Totale dovuto oggi',
     viewFeatures: 'Visualizza funzionalità',
+    viewPayment: undefined,
     year: 'Anno',
   },
   createOrganization: {
diff --git a/packages/localizations/src/ja-JP.ts b/packages/localizations/src/ja-JP.ts
index ba0a194fdd7..e0b94b4b124 100644
--- a/packages/localizations/src/ja-JP.ts
+++ b/packages/localizations/src/ja-JP.ts
@@ -154,6 +154,7 @@ export const jaJP: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/kk-KZ.ts b/packages/localizations/src/kk-KZ.ts
index ee53194775c..2dcead7175e 100644
--- a/packages/localizations/src/kk-KZ.ts
+++ b/packages/localizations/src/kk-KZ.ts
@@ -154,6 +154,7 @@ export const kkKZ: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/ko-KR.ts b/packages/localizations/src/ko-KR.ts
index d03c7921d6f..594da8b0b5e 100644
--- a/packages/localizations/src/ko-KR.ts
+++ b/packages/localizations/src/ko-KR.ts
@@ -154,6 +154,7 @@ export const koKR: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/mn-MN.ts b/packages/localizations/src/mn-MN.ts
index f9ceba12cfd..82bb64b61c1 100644
--- a/packages/localizations/src/mn-MN.ts
+++ b/packages/localizations/src/mn-MN.ts
@@ -154,6 +154,7 @@ export const mnMN: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/ms-MY.ts b/packages/localizations/src/ms-MY.ts
index 0d4d67ffd3c..72d4d358143 100644
--- a/packages/localizations/src/ms-MY.ts
+++ b/packages/localizations/src/ms-MY.ts
@@ -154,6 +154,7 @@ export const msMY: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/nb-NO.ts b/packages/localizations/src/nb-NO.ts
index 7870cc5f8a5..fb3775bd280 100644
--- a/packages/localizations/src/nb-NO.ts
+++ b/packages/localizations/src/nb-NO.ts
@@ -154,6 +154,7 @@ export const nbNO: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/nl-BE.ts b/packages/localizations/src/nl-BE.ts
index daca9acd34c..c1baa668f5d 100644
--- a/packages/localizations/src/nl-BE.ts
+++ b/packages/localizations/src/nl-BE.ts
@@ -154,6 +154,7 @@ export const nlBE: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/nl-NL.ts b/packages/localizations/src/nl-NL.ts
index 1c9ae9e7a1f..8356c744cb1 100644
--- a/packages/localizations/src/nl-NL.ts
+++ b/packages/localizations/src/nl-NL.ts
@@ -154,6 +154,7 @@ export const nlNL: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/pl-PL.ts b/packages/localizations/src/pl-PL.ts
index eb513255e6b..8f67beb1f89 100644
--- a/packages/localizations/src/pl-PL.ts
+++ b/packages/localizations/src/pl-PL.ts
@@ -154,6 +154,7 @@ export const plPL: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/pt-BR.ts b/packages/localizations/src/pt-BR.ts
index 84c038377bb..b97b5137696 100644
--- a/packages/localizations/src/pt-BR.ts
+++ b/packages/localizations/src/pt-BR.ts
@@ -158,6 +158,7 @@ export const ptBR: LocalizationResource = {
     totalDue: 'Total devido',
     totalDueToday: 'Total devido hoje',
     viewFeatures: 'Ver recursos',
+    viewPayment: undefined,
     year: 'Ano',
   },
   createOrganization: {
diff --git a/packages/localizations/src/pt-PT.ts b/packages/localizations/src/pt-PT.ts
index a93fbd9a6cc..2ccf47c850d 100644
--- a/packages/localizations/src/pt-PT.ts
+++ b/packages/localizations/src/pt-PT.ts
@@ -154,6 +154,7 @@ export const ptPT: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/ro-RO.ts b/packages/localizations/src/ro-RO.ts
index aaf27f21528..9969b3bd5c5 100644
--- a/packages/localizations/src/ro-RO.ts
+++ b/packages/localizations/src/ro-RO.ts
@@ -154,6 +154,7 @@ export const roRO: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/ru-RU.ts b/packages/localizations/src/ru-RU.ts
index a4499e2e908..379a4521160 100644
--- a/packages/localizations/src/ru-RU.ts
+++ b/packages/localizations/src/ru-RU.ts
@@ -154,6 +154,7 @@ export const ruRU: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/sk-SK.ts b/packages/localizations/src/sk-SK.ts
index 8251ebf4c68..6860c25a396 100644
--- a/packages/localizations/src/sk-SK.ts
+++ b/packages/localizations/src/sk-SK.ts
@@ -154,6 +154,7 @@ export const skSK: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/sr-RS.ts b/packages/localizations/src/sr-RS.ts
index 4c0ab72bda1..df713771207 100644
--- a/packages/localizations/src/sr-RS.ts
+++ b/packages/localizations/src/sr-RS.ts
@@ -154,6 +154,7 @@ export const srRS: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/sv-SE.ts b/packages/localizations/src/sv-SE.ts
index 99d72a6f07c..198394b1d25 100644
--- a/packages/localizations/src/sv-SE.ts
+++ b/packages/localizations/src/sv-SE.ts
@@ -154,6 +154,7 @@ export const svSE: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/ta-IN.ts b/packages/localizations/src/ta-IN.ts
index d937a81a6ea..78365eda9bb 100644
--- a/packages/localizations/src/ta-IN.ts
+++ b/packages/localizations/src/ta-IN.ts
@@ -154,6 +154,7 @@ export const taIN: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/te-IN.ts b/packages/localizations/src/te-IN.ts
index 08b8882d867..c988a863128 100644
--- a/packages/localizations/src/te-IN.ts
+++ b/packages/localizations/src/te-IN.ts
@@ -154,6 +154,7 @@ export const teIN: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/th-TH.ts b/packages/localizations/src/th-TH.ts
index ebb2707edb2..45249a08b1c 100644
--- a/packages/localizations/src/th-TH.ts
+++ b/packages/localizations/src/th-TH.ts
@@ -154,6 +154,7 @@ export const thTH: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/tr-TR.ts b/packages/localizations/src/tr-TR.ts
index 5600b1d2a47..9bfb429e76a 100644
--- a/packages/localizations/src/tr-TR.ts
+++ b/packages/localizations/src/tr-TR.ts
@@ -154,6 +154,7 @@ export const trTR: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/uk-UA.ts b/packages/localizations/src/uk-UA.ts
index 3216135a2da..ffdf1e6e3b8 100644
--- a/packages/localizations/src/uk-UA.ts
+++ b/packages/localizations/src/uk-UA.ts
@@ -154,6 +154,7 @@ export const ukUA: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/vi-VN.ts b/packages/localizations/src/vi-VN.ts
index 8300ac25f2d..f0c7056f74e 100644
--- a/packages/localizations/src/vi-VN.ts
+++ b/packages/localizations/src/vi-VN.ts
@@ -158,6 +158,7 @@ export const viVN: LocalizationResource = {
     totalDue: 'Tổng cần thanh toán',
     totalDueToday: 'Tổng cần thanh toán hôm nay',
     viewFeatures: 'Xem tính năng',
+    viewPayment: undefined,
     year: 'Năm',
   },
   createOrganization: {
diff --git a/packages/localizations/src/zh-CN.ts b/packages/localizations/src/zh-CN.ts
index 76facbcc215..8d6a685cf88 100644
--- a/packages/localizations/src/zh-CN.ts
+++ b/packages/localizations/src/zh-CN.ts
@@ -154,6 +154,7 @@ export const zhCN: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {
diff --git a/packages/localizations/src/zh-TW.ts b/packages/localizations/src/zh-TW.ts
index 2ca2be64a2d..cd924fcff06 100644
--- a/packages/localizations/src/zh-TW.ts
+++ b/packages/localizations/src/zh-TW.ts
@@ -154,6 +154,7 @@ export const zhTW: LocalizationResource = {
     totalDue: undefined,
     totalDueToday: undefined,
     viewFeatures: undefined,
+    viewPayment: undefined,
     year: undefined,
   },
   createOrganization: {