refactor(clerk-js,types): Update subscriptions listing UI

.changeset/smooth-signs-type.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Update SubscriptionsList UI to be rendered within ProfileSections within UserProfile and OrganizationProfile.

integration/tests/pricing-table.test.ts

@@ -113,7 +113,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
 
       await u.po.userProfile.waitForMounted();
       await u.po.userProfile.switchToBillingTab();
-      await u.po.page.getByRole('button', { name: 'View all plans' }).click();
+      await u.po.page.getByRole('button', { name: 'Switch plans' }).click();
       await u.po.pricingTable.waitForMounted();
       await expect(u.po.page.getByRole('heading', { name: 'Pro' })).toBeVisible();
     });

packages/clerk-js/bundlewatch.config.json

@@ -23,8 +23,8 @@
     { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },
     { "path": "./dist/checkout*.js", "maxSize": "5.79KB" },
     { "path": "./dist/paymentSources*.js", "maxSize": "9.06KB" },
-    { "path": "./dist/up-billing-page*.js", "maxSize": "2.4KB" },
-    { "path": "./dist/op-billing-page*.js", "maxSize": "2.4KB" },
+    { "path": "./dist/up-billing-page*.js", "maxSize": "2.5KB" },
+    { "path": "./dist/op-billing-page*.js", "maxSize": "2.5KB" },
     { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" }
   ]
 }

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

@@ -14,7 +14,7 @@ import { useCheckoutContext } from '../../contexts';
 import { Box, Button, Col, descriptors, Form, localizationKeys, Text } from '../../customizables';
 import { Alert, Drawer, LineItems, SegmentedControl, Select, SelectButton, SelectOptionList } from '../../elements';
 import { useFetch } from '../../hooks';
-import { ArrowUpDown } from '../../icons';
+import { ChevronUpDown } from '../../icons';
 import { animations } from '../../styledSystem';
 import { handleError } from '../../utils';
 import { AddPaymentSource, PaymentSourceRow } from '../PaymentSources';
@@ -309,7 +309,7 @@ const ExistingPaymentSourceForm = ({
             value={selectedPaymentSource?.id}
           />
           <SelectButton
-            icon={ArrowUpDown}
+            icon={ChevronUpDown}
             sx={t => ({
               justifyContent: 'space-between',
               backgroundColor: t.colors.$colorBackground,

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

@@ -6,11 +6,12 @@ import {
   SubscriberTypeContext,
   useSubscriptions,
 } from '../../contexts';
-import { Button, Col, descriptors, Flex, localizationKeys } from '../../customizables';
+import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
 import {
   Alert,
   Card,
   Header,
+  ProfileSection,
   Tab,
   TabPanel,
   TabPanels,
@@ -20,6 +21,7 @@ import {
   withCardStateProvider,
 } from '../../elements';
 import { useTabState } from '../../hooks/useTabState';
+import { ArrowsUpDown } from '../../icons';
 import { useRouter } from '../../router';
 import { InvoicesList } from '../Invoices';
 import { PaymentSources } from '../PaymentSources';
@@ -53,7 +55,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
       >
         <Header.Root>
           <Header.Title
-            localizationKey={localizationKeys('userProfile.billingPage.title')}
+            localizationKey={localizationKeys('organizationProfile.billingPage.title')}
             textVariant='h2'
           />
         </Header.Root>
@@ -68,56 +70,70 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
             <Tab
               localizationKey={
                 subscriptions.data.length > 0
-                  ? localizationKeys('userProfile.billingPage.start.headerTitle__subscriptions')
-                  : localizationKeys('userProfile.billingPage.start.headerTitle__plans')
+                  ? localizationKeys('organizationProfile.billingPage.start.headerTitle__subscriptions')
+                  : localizationKeys('organizationProfile.billingPage.start.headerTitle__plans')
               }
             />
-            <Tab localizationKey={localizationKeys('userProfile.billingPage.start.headerTitle__invoices')} />
+            <Tab localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__invoices')} />
           </TabsList>
           <TabPanels>
             <TabPanel sx={{ width: '100%', flexDirection: 'column' }}>
-              <Flex
-                sx={{ width: '100%', flexDirection: 'column' }}
-                gap={4}
-              >
-                {subscriptions.data.length > 0 ? (
-                  <>
+              {subscriptions.data.length > 0 ? (
+                <Flex
+                  sx={{ width: '100%', flexDirection: 'column' }}
+                  gap={4}
+                >
+                  <ProfileSection.Root
+                    id='subscriptionsList'
+                    title={localizationKeys('organizationProfile.billingPage.subscriptionsListSection.title')}
+                    centered={false}
+                    sx={t => ({
+                      borderTop: 'none',
+                      paddingTop: t.space.$1,
+                    })}
+                  >
                     <Protect condition={has => !has({ permission: 'org:sys_billing:manage' })}>
                       <Alert
                         variant='info'
                         colorScheme='info'
-                        title={localizationKeys('organizationProfile.billingPage.alerts.noPemissionsToManageBilling')}
+                        title={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
                       />
                     </Protect>
                     <SubscriptionsList />
-                    <Button
-                      localizationKey='View all plans'
-                      hasArrow
-                      variant='ghost'
-                      onClick={() => navigate('plans')}
-                      sx={{
-                        width: 'fit-content',
-                      }}
+                    <ProfileSection.ArrowButton
+                      id='subscriptionsList'
+                      textLocalizationKey={localizationKeys(
+                        'organizationProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',
+                      )}
+                      sx={[
+                        t => ({
+                          justifyContent: 'start',
+                          height: t.sizes.$8,
+                        }),
+                      ]}
+                      leftIcon={ArrowsUpDown}
+                      leftIconSx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}
+                      onClick={() => void navigate('plans')}
                     />
-                    <Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>
-                      <PaymentSources />
-                    </Protect>
-                  </>
-                ) : (
-                  <>
-                    <Protect condition={has => !has({ permission: 'org:sys_billing:manage' })}>
-                      <Alert
-                        variant='info'
-                        colorScheme='info'
-                        title={localizationKeys('organizationProfile.billingPage.alerts.noPemissionsToManageBilling')}
-                      />
-                    </Protect>
-                    <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
-                      <PricingTable />
-                    </PricingTableContext.Provider>
-                  </>
-                )}
-              </Flex>
+                  </ProfileSection.Root>
+                  <Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>
+                    <PaymentSources />
+                  </Protect>
+                </Flex>
+              ) : (
+                <>
+                  <Protect condition={has => !has({ permission: 'org:sys_billing:manage' })}>
+                    <Alert
+                      variant='info'
+                      colorScheme='info'
+                      title={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
+                    />
+                  </Protect>
+                  <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
+                    <PricingTable />
+                  </PricingTableContext.Provider>
+                </>
+              )}
             </TabPanel>
             <TabPanel sx={{ width: '100%' }}>
               <InvoicesContextProvider>

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

@@ -36,7 +36,7 @@ const OrganizationPlansPageInternal = () => {
           <Alert
             variant='info'
             colorScheme='info'
-            title={localizationKeys('organizationProfile.billingPage.alerts.noPemissionsToManageBilling')}
+            title={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
           />
         </Protect>
         <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>

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

@@ -102,7 +102,7 @@ export const PaymentSources = () => {
     <ProfileSection.Root
       title={localizationKeys('userProfile.billingPage.paymentSourcesSection.title')}
       centered={false}
-      id='profile'
+      id='paymentSources'
       sx={t => ({
         flex: 1,
         borderTopWidth: t.borderWidths.$normal,

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

@@ -5,10 +5,11 @@ import {
   SubscriberTypeContext,
   useSubscriptions,
 } from '../../contexts';
-import { Button, Col, descriptors, Flex, localizationKeys } from '../../customizables';
+import { Col, descriptors, localizationKeys } from '../../customizables';
 import {
   Card,
   Header,
+  ProfileSection,
   Tab,
   TabPanel,
   TabPanels,
@@ -18,6 +19,7 @@ import {
   withCardStateProvider,
 } from '../../elements';
 import { useTabState } from '../../hooks/useTabState';
+import { ArrowsUpDown } from '../../icons';
 import { useRouter } from '../../router';
 import { InvoicesList } from '../Invoices';
 import { PaymentSources } from '../PaymentSources';
@@ -77,22 +79,38 @@ const BillingPageInternal = withCardStateProvider(() => {
           <TabPanels>
             <TabPanel sx={_ => ({ width: '100%', flexDirection: 'column' })}>
               {subscriptions.data.length > 0 ? (
-                <Flex
-                  sx={{ width: '100%', flexDirection: 'column' }}
-                  gap={4}
-                >
-                  <SubscriptionsList />
-                  <Button
-                    localizationKey='View all plans'
-                    hasArrow
-                    variant='ghost'
-                    onClick={() => navigate('plans')}
-                    sx={{
-                      width: 'fit-content',
-                    }}
-                  />
+                <>
+                  <ProfileSection.Root
+                    id='subscriptionsList'
+                    title={localizationKeys('userProfile.billingPage.subscriptionsListSection.title')}
+                    centered={false}
+                    sx={t => ({
+                      borderTop: 'none',
+                      paddingTop: t.space.$1,
+                    })}
+                  >
+                    <SubscriptionsList />
+                    <ProfileSection.ArrowButton
+                      id='subscriptionsList'
+                      textLocalizationKey={localizationKeys(
+                        'userProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',
+                      )}
+                      sx={[
+                        t => ({
+                          justifyContent: 'start',
+                          height: t.sizes.$8,
+                        }),
+                      ]}
+                      leftIcon={ArrowsUpDown}
+                      leftIconSx={t => ({
+                        width: t.sizes.$4,
+                        height: t.sizes.$4,
+                      })}
+                      onClick={() => void navigate('plans')}
+                    />
+                  </ProfileSection.Root>
                   <PaymentSources />
-                </Flex>
+                </>
               ) : (
                 <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
                   <PricingTable />

packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 
 import { descriptors, Flex, Icon, Input, Text } from '../../customizables';
 import { Select, SelectButton, SelectOptionList } from '../../elements';
-import { ArrowUpDown, Check } from '../../icons';
+import { Check, ChevronUpDown } from '../../icons';
 import { common, type PropsOfComponent } from '../../styledSystem';
 import type { FeedbackType } from '../../utils';
 import { mergeRefs } from '../../utils';
@@ -128,7 +128,7 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
           })}
           hoverAsFocus
           isDisabled={rest.isDisabled}
-          icon={ArrowUpDown}
+          icon={ChevronUpDown}
           iconSx={t => ({
             color: rest.isDisabled ? t.colors.$neutralAlpha300 : t.colors.$neutralAlpha500,
           })}

packages/clerk-js/src/ui/icons/index.ts

@@ -9,7 +9,7 @@ export { default as ApplePay } from './apple-pay.svg';
 export { default as ArrowLeftIcon } from './arrow-left.svg';
 export { default as ArrowRightButtonIcon } from './arrow-right-button.svg';
 export { default as ArrowRightIcon } from './arrow-right.svg';
-export { default as ArrowUpDown } from './arrow-up-down.svg';
+export { default as ArrowsUpDown } from './arrows-up-down.svg';
 export { default as AuthApp } from './auth-app.svg';
 export { default as Billing } from './billing.svg';
 export { default as Block } from './block.svg';
@@ -21,6 +21,7 @@ export { default as Check } from './check.svg';
 export { default as CheckCircle } from './check-circle.svg';
 export { default as CheckmarkFilled } from './checkmark-filled.svg';
 export { default as ChevronDown } from './chevron-down.svg';
+export { default as ChevronUpDown } from './chevron-up-down.svg';
 export { default as Clipboard } from './clipboard.svg';
 export { default as Close } from './close.svg';
 export { default as CogFilled } from './cog-filled.svg';

packages/localizations/src/ar-SA.ts

@@ -156,7 +156,7 @@ export const arSA: LocalizationResource = {
   organizationProfile: {
     billingPage: {
       alerts: {
-        noPemissionsToManageBilling: undefined,
+        noPermissionsToManageBilling: undefined,
       },
     },
     badge__automaticInvitation: 'دعوات تلقائية',

packages/localizations/src/be-BY.ts

@@ -157,7 +157,7 @@ export const beBY: LocalizationResource = {
   organizationProfile: {
     billingPage: {
       alerts: {
-        noPemissionsToManageBilling: undefined,
+        noPermissionsToManageBilling: undefined,
       },
     },
     badge__automaticInvitation: 'Automatic invitations',

packages/localizations/src/bg-BG.ts

@@ -155,7 +155,7 @@ export const bgBG: LocalizationResource = {
   organizationProfile: {
     billingPage: {
       alerts: {
-        noPemissionsToManageBilling: undefined,
+        noPermissionsToManageBilling: undefined,
       },
     },
     badge__automaticInvitation: 'Автоматични покани',

packages/localizations/src/ca-ES.ts

@@ -155,7 +155,7 @@ export const caES: LocalizationResource = {
   organizationProfile: {
     billingPage: {
       alerts: {
-        noPemissionsToManageBilling: undefined,
+        noPermissionsToManageBilling: undefined,
       },
     },
     badge__automaticInvitation: 'Invitacions automàtiques',

packages/localizations/src/cs-CZ.ts

@@ -157,7 +157,7 @@ export const csCZ: LocalizationResource = {
   organizationProfile: {
     billingPage: {
       alerts: {
-        noPemissionsToManageBilling: undefined,
+        noPermissionsToManageBilling: undefined,
       },
     },
     badge__automaticInvitation: 'Automatic invitations',

packages/localizations/src/da-DK.ts

@@ -156,7 +156,7 @@ export const daDK: LocalizationResource = {
   organizationProfile: {
     billingPage: {
       alerts: {
-        noPemissionsToManageBilling: undefined,
+        noPermissionsToManageBilling: undefined,
       },
     },
     badge__automaticInvitation: 'Automatiske invitationer',

packages/localizations/src/de-DE.ts

@@ -158,7 +158,7 @@ export const deDE: LocalizationResource = {
   organizationProfile: {
     billingPage: {
       alerts: {
-        noPemissionsToManageBilling: undefined,
+        noPermissionsToManageBilling: undefined,
       },
     },
     badge__automaticInvitation: 'Automatische Einladungen',

packages/localizations/src/el-GR.ts

@@ -156,7 +156,7 @@ export const elGR: LocalizationResource = {
   organizationProfile: {
     billingPage: {
       alerts: {
-        noPemissionsToManageBilling: undefined,
+        noPermissionsToManageBilling: undefined,
       },
     },
     badge__automaticInvitation: 'Αυτόματες προσκλήσεις',

packages/localizations/src/en-GB.ts

@@ -156,7 +156,7 @@ export const enGB: LocalizationResource = {
   organizationProfile: {
     billingPage: {
       alerts: {
-        noPemissionsToManageBilling: undefined,
+        noPermissionsToManageBilling: undefined,
       },
     },
     badge__automaticInvitation: 'Automatic invitations',