chore(clerk-js,localizations): Tidy up some commerce localizations

.changeset/soft-toys-flow.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add localizations for some commerce strings, general cleanups

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
     { "path": "./dist/clerk.browser.js", "maxSize": "69.2KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "53KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "106.3KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "106.5KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
@@ -22,7 +22,7 @@
     { "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.15KB" },
+    { "path": "./dist/paymentSources*.js", "maxSize": "9.17KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" }

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

@@ -23,11 +23,10 @@ export class CommerceSettings extends BaseResource implements CommerceSettingsRe
       return this;
     }
 
-    // TODO(@commerce): Remove `?.` once we launch.
-    this.billing.stripePublishableKey = data?.billing?.stripe_publishable_key || '';
-    this.billing.enabled = data?.billing?.enabled || false;
-    this.billing.hasPaidUserPlans = data?.billing?.has_paid_user_plans || false;
-    this.billing.hasPaidOrgPlans = data?.billing?.has_paid_org_plans || false;
+    this.billing.stripePublishableKey = data.billing.stripe_publishable_key || '';
+    this.billing.enabled = data.billing.enabled || false;
+    this.billing.hasPaidUserPlans = data.billing.has_paid_user_plans || false;
+    this.billing.hasPaidOrgPlans = data.billing.has_paid_org_plans || false;
 
     return this;
   }

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

@@ -22,7 +22,9 @@ const OrganizationPlansPageInternal = () => {
           paddingBlockEnd: t.space.$4,
         })}
       >
-        <Header.BackLink onClick={() => void navigate('../', { searchParams: new URLSearchParams('tab=plans') })}>
+        <Header.BackLink
+          onClick={() => void navigate('../', { searchParams: new URLSearchParams('tab=subscriptions') })}
+        >
           <Header.Title
             localizationKey={localizationKeys('organizationProfile.plansPage.title')}
             textVariant='h2'

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

@@ -2,6 +2,7 @@ import { Header } from '@/ui/elements/Header';
 import { LineItems } from '@/ui/elements/LineItems';
 
 import { usePaymentAttemptsContext, useStatements } from '../../contexts';
+import { useSubscriberTypeLocalizationRoot } from '../../contexts/components';
 import {
   Badge,
   Box,
@@ -23,6 +24,7 @@ export const PaymentAttemptPage = () => {
   const { params, navigate } = useRouter();
   const { isLoading } = useStatements();
   const { getPaymentAttemptById } = usePaymentAttemptsContext();
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
 
   const paymentAttempt = params.paymentAttemptId ? getPaymentAttemptById(params.paymentAttemptId) : null;
   const subscriptionItem = paymentAttempt?.subscriptionItem;
@@ -40,7 +42,9 @@ export const PaymentAttemptPage = () => {
   }
 
   if (!paymentAttempt) {
-    return <Text>Payment attempt not found</Text>;
+    return (
+      <Text localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.notFound`)} />
+    );
   }
 
   return (
@@ -56,7 +60,7 @@ export const PaymentAttemptPage = () => {
       >
         <Header.BackLink onClick={() => void navigate('../../', { searchParams: new URLSearchParams('tab=payments') })}>
           <Header.Title
-            localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__payments')}
+            localizationKey={localizationKeys(`${localizationRoot}.billingPage.start.headerTitle__payments`)}
             textVariant='h2'
           />
         </Header.BackLink>
@@ -173,7 +177,7 @@ export const PaymentAttemptPage = () => {
         >
           <Text
             variant='h3'
-            localizationKey={'Total due'}
+            localizationKey={localizationKeys('commerce.totalDue')}
             elementDescriptor={descriptors.paymentAttemptFooterLabel}
           />
           <Span

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

@@ -3,9 +3,23 @@ import React from 'react';
 
 import { Pagination } from '@/ui/elements/Pagination';
 
-import { usePaymentAttempts } from '../../../ui/contexts';
+import { usePaymentAttempts, useSubscriberTypeLocalizationRoot } from '../../../ui/contexts';
 import type { LocalizationKey } from '../../customizables';
-import { Badge, Col, descriptors, Flex, Spinner, Table, Tbody, Td, Text, Th, Thead, Tr } from '../../customizables';
+import {
+  Badge,
+  Col,
+  descriptors,
+  Flex,
+  localizationKeys,
+  Spinner,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+} from '../../customizables';
 import { useRouter } from '../../router';
 import type { PropsOfComponent } from '../../styledSystem';
 import { truncateWithEndVisible } from '../../utils/truncateTextWithEndVisible';
@@ -16,6 +30,7 @@ import { truncateWithEndVisible } from '../../utils/truncateTextWithEndVisible';
 
 export const PaymentAttemptsList = () => {
   const { data: paymentAttempts, isLoading } = usePaymentAttempts();
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
 
   return (
     <DataTable
@@ -25,8 +40,12 @@ export const PaymentAttemptsList = () => {
       pageCount={1}
       itemsPerPage={10}
       isLoading={isLoading}
-      emptyStateLocalizationKey='No payment history'
-      headers={['Date', 'Amount', 'Status']}
+      emptyStateLocalizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.empty`)}
+      headers={[
+        localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeaders__date`),
+        localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeaders__amount`),
+        localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeaders__status`),
+      ]}
       rows={(paymentAttempts?.data || []).map(i => (
         <PaymentAttemptsListRow
           key={i.id}

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

@@ -15,7 +15,7 @@ import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
 
 import { clerkUnsupportedEnvironmentWarning } from '../../../core/errors';
-import { useEnvironment, useSubscriberTypeContext } from '../../contexts';
+import { useEnvironment, useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts';
 import { descriptors, Flex, localizationKeys, Spinner, useAppearance, useLocalizations } from '../../customizables';
 import type { LocalizationKey } from '../../localization';
 import { handleError, normalizeColorString } from '../../utils';
@@ -236,6 +236,7 @@ const AddPaymentSourceForm = ({ children }: PropsWithChildren) => {
   const elements = useElements();
   const { displayConfig } = useEnvironment();
   const { t } = useLocalizations();
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
 
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -260,10 +261,8 @@ const AddPaymentSourceForm = ({ children }: PropsWithChildren) => {
     try {
       await onSuccess({ stripeSetupIntent: setupIntent });
     } catch (error) {
-      console.log('catch', error);
       void handleError(error, [], card.setError);
     } finally {
-      console.log('finally');
       card.setIdle();
       initializePaymentSource(); // resets the payment intent
     }
@@ -290,7 +289,6 @@ const AddPaymentSourceForm = ({ children }: PropsWithChildren) => {
               type: 'tabs',
               defaultCollapsed: false,
             },
-            // TODO(@COMMERCE): Should this be fetched from the fapi?
             paymentMethodOrder: paymentMethodOrder || ['card'],
             applePay: checkout
               ? {
@@ -311,7 +309,8 @@ const AddPaymentSourceForm = ({ children }: PropsWithChildren) => {
         <FormButtons
           isDisabled={!isPaymentElementReady}
           submitLabel={
-            submitLabel ?? localizationKeys('userProfile.billingPage.paymentSourcesSection.formButtonPrimary__add')
+            submitLabel ??
+            localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.formButtonPrimary__add`)
           }
           onReset={cancelAction}
           hideReset={!cancelAction}

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

@@ -10,7 +10,7 @@ import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 
 import { RemoveResourceForm } from '../../common';
 import { DevOnly } from '../../common/DevOnly';
-import { usePaymentSources, useSubscriberTypeContext } from '../../contexts';
+import { usePaymentSources, useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { Action } from '../../elements/Action';
 import { useActionContext } from '../../elements/Action/ActionRoot';
@@ -23,6 +23,7 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
   const { close } = useActionContext();
   const clerk = useClerk();
   const subscriberType = useSubscriberTypeContext();
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
 
   const onAddPaymentSourceSuccess = async (context: { stripeSetupIntent?: SetupIntent }) => {
     const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
@@ -40,9 +41,11 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
       onSuccess={onAddPaymentSourceSuccess}
       cancelAction={close}
     >
-      <AddPaymentSource.FormHeader text={localizationKeys('userProfile.billingPage.paymentSourcesSection.add')} />
+      <AddPaymentSource.FormHeader
+        text={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
+      />
       <AddPaymentSource.FormSubtitle
-        text={localizationKeys('userProfile.billingPage.paymentSourcesSection.addSubtitle')}
+        text={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.addSubtitle`)}
       />
       <DevOnly>
         <TestPaymentSource />
@@ -62,6 +65,7 @@ const RemoveScreen = ({
   const card = useCardState();
   const subscriberType = useSubscriberTypeContext();
   const { organization } = useOrganization();
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
   const ref = useRef(
     `${paymentSource.paymentMethod === 'card' ? paymentSource.cardType : paymentSource.paymentMethod} ${paymentSource.paymentMethod === 'card' ? `⋯ ${paymentSource.last4}` : '-'}`,
   );
@@ -81,14 +85,22 @@ const RemoveScreen = ({
 
   return (
     <RemoveResourceForm
-      title={localizationKeys('userProfile.billingPage.paymentSourcesSection.removeResource.title')}
-      messageLine1={localizationKeys('userProfile.billingPage.paymentSourcesSection.removeResource.messageLine1', {
-        identifier: ref.current,
-      })}
-      messageLine2={localizationKeys('userProfile.billingPage.paymentSourcesSection.removeResource.messageLine2')}
-      successMessage={localizationKeys('userProfile.billingPage.paymentSourcesSection.removeResource.successMessage', {
-        emailAddress: ref.current,
-      })}
+      title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.removeResource.title`)}
+      messageLine1={localizationKeys(
+        `${localizationRoot}.billingPage.paymentSourcesSection.removeResource.messageLine1`,
+        {
+          identifier: ref.current,
+        },
+      )}
+      messageLine2={localizationKeys(
+        `${localizationRoot}.billingPage.paymentSourcesSection.removeResource.messageLine2`,
+      )}
+      successMessage={localizationKeys(
+        `${localizationRoot}.billingPage.paymentSourcesSection.removeResource.successMessage`,
+        {
+          paymentSource: ref.current,
+        },
+      )}
       deleteResource={removePaymentSource}
       onSuccess={close}
       onReset={close}
@@ -99,7 +111,7 @@ const RemoveScreen = ({
 export const PaymentSources = withCardStateProvider(() => {
   const clerk = useClerk();
   const subscriberType = useSubscriberTypeContext();
-
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
   const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 
   const { data, isLoading, mutate: mutatePaymentSources } = usePaymentSources();
@@ -119,7 +131,7 @@ export const PaymentSources = withCardStateProvider(() => {
 
   return (
     <ProfileSection.Root
-      title={localizationKeys('userProfile.billingPage.paymentSourcesSection.title')}
+      title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
       centered={false}
       id='paymentSources'
       sx={t => ({
@@ -161,7 +173,7 @@ export const PaymentSources = withCardStateProvider(() => {
               <Action.Trigger value='add'>
                 <ProfileSection.ArrowButton
                   id='paymentSources'
-                  localizationKey={localizationKeys('userProfile.billingPage.paymentSourcesSection.add')}
+                  localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
                 />
               </Action.Trigger>
               <Action.Open value='add'>
@@ -188,10 +200,11 @@ const PaymentSourceMenu = ({
   const card = useCardState();
   const { organization } = useOrganization();
   const subscriberType = useSubscriberTypeContext();
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
 
   const actions = [
     {
-      label: localizationKeys('userProfile.billingPage.paymentSourcesSection.actionLabel__remove'),
+      label: localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.actionLabel__remove`),
       isDestructive: true,
       onClick: () => open(`remove-${paymentSource.id}`),
       isDisabled: !paymentSource.isRemovable,
@@ -200,7 +213,7 @@ const PaymentSourceMenu = ({
 
   if (!paymentSource.isDefault) {
     actions.unshift({
-      label: localizationKeys('userProfile.billingPage.paymentSourcesSection.actionLabel__default'),
+      label: localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.actionLabel__default`),
       isDestructive: false,
       onClick: () => {
         paymentSource

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

@@ -212,6 +212,9 @@ function SectionContentDetailsHeader({
           colorScheme='secondary'
           elementDescriptor={descriptors.statementSectionContentDetailsHeaderDescription}
           localizationKey={description}
+          sx={() => ({
+            textTransform: 'lowercase',
+          })}
         />
       </Box>
       <Box