Skip to content

Commit 4696c51

Browse files
LauraBeatrisLauraBeatris
authored
chore(ui): Add ProfileCard.Page for UserProfile and OrganizationProfile (#8602)
1 parent aa9e975 commit 4696c51

17 files changed

Lines changed: 488 additions & 391 deletions

‎.changeset/chatty-maps-shine.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/ui': patch
3+
---
4+
5+
Add `ProfileCard.Page` for `UserProfile` and `OrganizationProfile` pages

‎packages/ui/src/common/CustomPageContentContainer.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
import { Col, descriptors } from '../customizables';
2+
import { ProfileCard } from '../elements/ProfileCard';
23
import type { CustomPageContent } from '../utils/createCustomPages';
34
import { ExternalElementMounter } from '../utils/ExternalElementMounter';
45

56
export const CustomPageContentContainer = ({ mount, unmount }: Omit<CustomPageContent, 'url'>) => {
67
return (
7-
<Col
8-
elementDescriptor={descriptors.page}
9-
gap={8}
10-
>
8+
<ProfileCard.Page>
119
<Col
12-
elementDescriptor={descriptors.profilePage}
10+
elementDescriptor={descriptors.page}
1311
gap={8}
1412
>
15-
<ExternalElementMounter
16-
mount={mount}
17-
unmount={unmount}
18-
/>
13+
<Col
14+
elementDescriptor={descriptors.profilePage}
15+
gap={8}
16+
>
17+
<ExternalElementMounter
18+
mount={mount}
19+
unmount={unmount}
20+
/>
21+
</Col>
1922
</Col>
20-
</Col>
23+
</ProfileCard.Page>
2124
);
2225
};

‎packages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { APIKeysContext, useOrganizationProfileContext } from '@/ui/contexts';
44
import { Col, localizationKeys } from '@/ui/customizables';
55
import { Header } from '@/ui/elements/Header';
66
import { useUnsafeNavbarContext } from '@/ui/elements/Navbar';
7+
import { ProfileCard } from '@/ui/elements/ProfileCard';
78

89
import { APIKeysPage } from '../APIKeys/APIKeys';
910

@@ -18,19 +19,21 @@ export const OrganizationAPIKeysPage = () => {
1819
}
1920

2021
return (
21-
<Col gap={4}>
22-
<Header.Root>
23-
<Header.Title
24-
localizationKey={localizationKeys('organizationProfile.apiKeysPage.title')}
25-
textVariant='h2'
26-
/>
27-
</Header.Root>
28-
<APIKeysContext.Provider value={{ ...apiKeysProps, componentName: 'APIKeys' }}>
29-
<APIKeysPage
30-
subject={organization.id}
31-
revokeModalRoot={contentRef}
32-
/>
33-
</APIKeysContext.Provider>
34-
</Col>
22+
<ProfileCard.Page>
23+
<Col gap={4}>
24+
<Header.Root>
25+
<Header.Title
26+
localizationKey={localizationKeys('organizationProfile.apiKeysPage.title')}
27+
textVariant='h2'
28+
/>
29+
</Header.Root>
30+
<APIKeysContext.Provider value={{ ...apiKeysProps, componentName: 'APIKeys' }}>
31+
<APIKeysPage
32+
subject={organization.id}
33+
revokeModalRoot={contentRef}
34+
/>
35+
</APIKeysContext.Provider>
36+
</Col>
37+
</ProfileCard.Page>
3538
);
3639
};

‎packages/ui/src/components/OrganizationProfile/OrganizationBillingPage.tsx‎

Lines changed: 56 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Card } from '@/ui/elements/Card';
22
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
33
import { Header } from '@/ui/elements/Header';
4+
import { ProfileCard } from '@/ui/elements/ProfileCard';
45
import { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';
56

67
import { Protect } from '../../common';
@@ -24,63 +25,67 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
2425
const { selectedTab, handleTabChange } = useTabState(orgTabMap);
2526

2627
return (
27-
<Col
28-
elementDescriptor={descriptors.page}
29-
sx={t => ({ gap: t.space.$8, color: t.colors.$colorForeground })}
30-
>
28+
<ProfileCard.Page>
3129
<Col
32-
elementDescriptor={descriptors.profilePage}
33-
elementId={descriptors.profilePage.setId('billing')}
34-
gap={4}
30+
elementDescriptor={descriptors.page}
31+
sx={t => ({ gap: t.space.$8, color: t.colors.$colorForeground })}
3532
>
36-
<Header.Root>
37-
<Header.Title
38-
localizationKey={localizationKeys('organizationProfile.billingPage.title')}
39-
textVariant='h2'
40-
/>
41-
</Header.Root>
42-
43-
<Card.Alert>{card.error}</Card.Alert>
44-
45-
<Tabs
46-
value={selectedTab}
47-
onChange={handleTabChange}
33+
<Col
34+
elementDescriptor={descriptors.profilePage}
35+
elementId={descriptors.profilePage.setId('billing')}
36+
gap={4}
4837
>
49-
<TabsList sx={t => ({ gap: t.space.$6 })}>
50-
<Tab
51-
localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__subscriptions')}
38+
<Header.Root>
39+
<Header.Title
40+
localizationKey={localizationKeys('organizationProfile.billingPage.title')}
41+
textVariant='h2'
5242
/>
53-
<Tab localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__statements')} />
54-
<Tab localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__payments')} />
55-
</TabsList>
56-
<TabPanels>
57-
<TabPanel sx={{ width: '100%', flexDirection: 'column' }}>
58-
<SubscriptionsList
59-
title={localizationKeys('organizationProfile.billingPage.subscriptionsListSection.title')}
60-
switchPlansLabel={localizationKeys(
61-
'organizationProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',
62-
)}
63-
newSubscriptionLabel={localizationKeys(
64-
'organizationProfile.billingPage.subscriptionsListSection.actionLabel__newSubscription',
65-
)}
66-
manageSubscriptionLabel={localizationKeys(
67-
'organizationProfile.billingPage.subscriptionsListSection.actionLabel__manageSubscription',
68-
)}
43+
</Header.Root>
44+
45+
<Card.Alert>{card.error}</Card.Alert>
46+
47+
<Tabs
48+
value={selectedTab}
49+
onChange={handleTabChange}
50+
>
51+
<TabsList sx={t => ({ gap: t.space.$6 })}>
52+
<Tab
53+
localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__subscriptions')}
54+
/>
55+
<Tab
56+
localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__statements')}
6957
/>
70-
<Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>
71-
<PaymentMethods />
72-
</Protect>
73-
</TabPanel>
74-
<TabPanel sx={{ width: '100%' }}>
75-
<StatementsList />
76-
</TabPanel>
77-
<TabPanel sx={{ width: '100%' }}>
78-
<PaymentAttemptsList />
79-
</TabPanel>
80-
</TabPanels>
81-
</Tabs>
58+
<Tab localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__payments')} />
59+
</TabsList>
60+
<TabPanels>
61+
<TabPanel sx={{ width: '100%', flexDirection: 'column' }}>
62+
<SubscriptionsList
63+
title={localizationKeys('organizationProfile.billingPage.subscriptionsListSection.title')}
64+
switchPlansLabel={localizationKeys(
65+
'organizationProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',
66+
)}
67+
newSubscriptionLabel={localizationKeys(
68+
'organizationProfile.billingPage.subscriptionsListSection.actionLabel__newSubscription',
69+
)}
70+
manageSubscriptionLabel={localizationKeys(
71+
'organizationProfile.billingPage.subscriptionsListSection.actionLabel__manageSubscription',
72+
)}
73+
/>
74+
<Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>
75+
<PaymentMethods />
76+
</Protect>
77+
</TabPanel>
78+
<TabPanel sx={{ width: '100%' }}>
79+
<StatementsList />
80+
</TabPanel>
81+
<TabPanel sx={{ width: '100%' }}>
82+
<PaymentAttemptsList />
83+
</TabPanel>
84+
</TabPanels>
85+
</Tabs>
86+
</Col>
8287
</Col>
83-
</Col>
88+
</ProfileCard.Page>
8489
);
8590
});
8691

‎packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useOrganization } from '@clerk/shared/react';
22

33
import { Header } from '@/ui/elements/Header';
44
import { OrganizationPreview } from '@/ui/elements/OrganizationPreview';
5+
import { ProfileCard } from '@/ui/elements/ProfileCard';
56
import { ProfileSection } from '@/ui/elements/Section';
67

78
import { Protect, useProtect } from '../../common';
@@ -56,29 +57,31 @@ const DeleteOrganizationScreen = () => {
5657

5758
export const OrganizationGeneralPage = () => {
5859
return (
59-
<Col
60-
elementDescriptor={descriptors.page}
61-
sx={t => ({ gap: t.space.$8 })}
62-
>
60+
<ProfileCard.Page>
6361
<Col
64-
elementDescriptor={descriptors.profilePage}
65-
elementId={descriptors.profilePage.setId('organizationGeneral')}
62+
elementDescriptor={descriptors.page}
63+
sx={t => ({ gap: t.space.$8 })}
6664
>
67-
<Header.Root>
68-
<Header.Title
69-
localizationKey={localizationKeys('organizationProfile.start.headerTitle__general')}
70-
sx={t => ({ marginBottom: t.space.$4 })}
71-
textVariant='h2'
72-
/>
73-
</Header.Root>
74-
<OrganizationProfileSection />
75-
<Protect permission='org:sys_domains:read'>
76-
<OrganizationDomainsSection />
77-
</Protect>
78-
<OrganizationLeaveSection />
79-
<OrganizationDeleteSection />
65+
<Col
66+
elementDescriptor={descriptors.profilePage}
67+
elementId={descriptors.profilePage.setId('organizationGeneral')}
68+
>
69+
<Header.Root>
70+
<Header.Title
71+
localizationKey={localizationKeys('organizationProfile.start.headerTitle__general')}
72+
sx={t => ({ marginBottom: t.space.$4 })}
73+
textVariant='h2'
74+
/>
75+
</Header.Root>
76+
<OrganizationProfileSection />
77+
<Protect permission='org:sys_domains:read'>
78+
<OrganizationDomainsSection />
79+
</Protect>
80+
<OrganizationLeaveSection />
81+
<OrganizationDeleteSection />
82+
</Col>
8083
</Col>
81-
</Col>
84+
</ProfileCard.Page>
8285
);
8386
};
8487

0 commit comments

Comments
 (0)