new hook for subscriberType localization root

Author: aeliox

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

@@ -1,7 +1,8 @@
 import { Header } from '@/ui/elements/Header';
 import { LineItems } from '@/ui/elements/LineItems';
 
-import { usePaymentAttemptsContext, useStatements, useSubscriberTypeContext } from '../../contexts';
+import { usePaymentAttemptsContext, useStatements } from '../../contexts';
+import { useSubscriberTypeLocalizationRoot } from '../../contexts/components';
 import {
   Badge,
   Box,
@@ -23,8 +24,7 @@ export const PaymentAttemptPage = () => {
   const { params, navigate } = useRouter();
   const { isLoading } = useStatements();
   const { getPaymentAttemptById } = usePaymentAttemptsContext();
-  const subscriberType = useSubscriberTypeContext();
-  const localizationRoot = subscriberType === 'user' ? 'userProfile' : 'organizationProfile';
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
 
   const paymentAttempt = params.paymentAttemptId ? getPaymentAttemptById(params.paymentAttemptId) : null;
   const subscriptionItem = paymentAttempt?.subscriptionItem;

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

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Pagination } from '@/ui/elements/Pagination';
 
-import { usePaymentAttempts, useSubscriberTypeContext } from '../../../ui/contexts';
+import { usePaymentAttempts, useSubscriberTypeLocalizationRoot } from '../../../ui/contexts';
 import type { LocalizationKey } from '../../customizables';
 import {
   Badge,
@@ -30,8 +30,7 @@ import { truncateWithEndVisible } from '../../utils/truncateTextWithEndVisible';
 
 export const PaymentAttemptsList = () => {
   const { data: paymentAttempts, isLoading } = usePaymentAttempts();
-  const subscriberType = useSubscriberTypeContext();
-  const localizationRoot = subscriberType === 'user' ? 'userProfile' : 'organizationProfile';
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
 
   return (
     <DataTable

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,8 +236,7 @@ const AddPaymentSourceForm = ({ children }: PropsWithChildren) => {
   const elements = useElements();
   const { displayConfig } = useEnvironment();
   const { t } = useLocalizations();
-  const subscriberType = useSubscriberTypeContext();
-  const localizationRoot = subscriberType === 'user' ? 'userProfile' : 'organizationProfile';
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
 
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();

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,7 +23,7 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
   const { close } = useActionContext();
   const clerk = useClerk();
   const subscriberType = useSubscriberTypeContext();
-  const localizationRoot = subscriberType === 'user' ? 'userProfile' : 'organizationProfile';
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
 
   const onAddPaymentSourceSuccess = async (context: { stripeSetupIntent?: SetupIntent }) => {
     const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
@@ -65,7 +65,7 @@ const RemoveScreen = ({
   const card = useCardState();
   const subscriberType = useSubscriberTypeContext();
   const { organization } = useOrganization();
-  const localizationRoot = subscriberType === 'user' ? 'userProfile' : 'organizationProfile';
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
   const ref = useRef(
     `${paymentSource.paymentMethod === 'card' ? paymentSource.cardType : paymentSource.paymentMethod} ${paymentSource.paymentMethod === 'card' ? `⋯ ${paymentSource.last4}` : '-'}`,
   );
@@ -111,7 +111,7 @@ const RemoveScreen = ({
 export const PaymentSources = withCardStateProvider(() => {
   const clerk = useClerk();
   const subscriberType = useSubscriberTypeContext();
-  const localizationRoot = subscriberType === 'user' ? 'userProfile' : 'organizationProfile';
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
   const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 
   const { data, isLoading, mutate: mutatePaymentSources } = usePaymentSources();
@@ -200,7 +200,7 @@ const PaymentSourceMenu = ({
   const card = useCardState();
   const { organization } = useOrganization();
   const subscriberType = useSubscriberTypeContext();
-  const localizationRoot = subscriberType === 'user' ? 'userProfile' : 'organizationProfile';
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
 
   const actions = [
     {

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

@@ -1,6 +1,6 @@
 import { Header } from '@/ui/elements/Header';
 
-import { useStatements, useStatementsContext, useSubscriberTypeContext } from '../../contexts';
+import { useStatements, useStatementsContext, useSubscriberTypeLocalizationRoot } from '../../contexts';
 import { Box, descriptors, localizationKeys, Spinner, Text, useLocalizations } from '../../customizables';
 import { Plus, RotateLeftRight } from '../../icons';
 import { useRouter } from '../../router';
@@ -10,9 +10,8 @@ export const StatementPage = () => {
   const { params, navigate } = useRouter();
   const { isLoading } = useStatements();
   const { getStatementById } = useStatementsContext();
-  const subscriberType = useSubscriberTypeContext();
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
   const { t } = useLocalizations();
-  const localizationRoot = subscriberType === 'user' ? 'userProfile' : 'organizationProfile';
   const statement = params.statementId ? getStatementById(params.statementId) : null;
 
   if (isLoading) {

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

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Pagination } from '@/ui/elements/Pagination';
 
-import { useStatements, useSubscriberTypeContext } from '../../../ui/contexts';
+import { useStatements, useSubscriberTypeLocalizationRoot } from '../../../ui/contexts';
 import type { LocalizationKey } from '../../customizables';
 import {
   Col,
@@ -29,8 +29,7 @@ import { truncateWithEndVisible } from '../../utils/truncateTextWithEndVisible';
 
 export const StatementsList = () => {
   const { data: statements, isLoading } = useStatements();
-  const subscriberType = useSubscriberTypeContext();
-  const localizationRoot = subscriberType === 'user' ? 'userProfile' : 'organizationProfile';
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
 
   return (
     <DataTable

packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

@@ -3,7 +3,12 @@ import type { CommerceSubscriptionResource } from '@clerk/types';
 import { ProfileSection } from '@/ui/elements/Section';
 
 import { useProtect } from '../../common';
-import { usePlansContext, useSubscriberTypeContext, useSubscriptions } from '../../contexts';
+import {
+  usePlansContext,
+  useSubscriberTypeContext,
+  useSubscriberTypeLocalizationRoot,
+  useSubscriptions,
+} from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import {
   Badge,
@@ -34,8 +39,8 @@ export function SubscriptionsList({
   arrowButtonEmptyText: LocalizationKey;
 }) {
   const { handleSelectPlan, captionForSubscription, canManageSubscription } = usePlansContext();
+  const localizationRoot = useSubscriberTypeLocalizationRoot();
   const subscriberType = useSubscriberTypeContext();
-  const localizationRoot = subscriberType === 'user' ? 'userProfile' : 'organizationProfile';
   const { data: subscriptions } = useSubscriptions();
   const canManageBilling = useProtect(
     has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',

packages/clerk-js/src/ui/contexts/components/SubscriberType.ts

@@ -4,3 +4,8 @@ const DEFAUlT = 'user';
 export const SubscriberTypeContext = createContext<'user' | 'org'>(DEFAUlT);
 
 export const useSubscriberTypeContext = () => useContext(SubscriberTypeContext) || DEFAUlT;
+
+export const useSubscriberTypeLocalizationRoot = () => {
+  const subscriberType = useSubscriberTypeContext();
+  return subscriberType === 'user' ? 'userProfile' : 'organizationProfile';
+};