5️⃣ <OrganizationProfile/> List, add, edit, remove Domains

.changeset/nervous-lizards-repeat.md

@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduces domains and invitations in <OrganizationProfile />
+
+- The "Members" page now accommodates Domain and Individual invitations 
+- The "Settings" page allows for the addition, edit and removal of a domain

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

@@ -37,7 +37,7 @@ export class OrganizationDomain extends BaseResource implements OrganizationDoma
  return new OrganizationDomain(json);
  }
 
-prepareDomainAffiliationVerification = async (
+prepareAffiliationVerification = async (
  params: PrepareAffiliationVerificationParams,
  ): Promise<OrganizationDomainResource> => {
  return this._basePost({

packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap

@@ -10,7 +10,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": null,
 }
@@ -26,7 +26,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": {
  "attempts": 1,

packages/clerk-js/src/ui/common/CalloutWithAction.tsx

@@ -0,0 +1,47 @@
+import type { MouseEvent } from 'react';
+
+import { Col, Flex, Link, Text } from '../customizables';
+import type { LocalizationKey } from '../localization';
+
+type CalloutWithActionProps = {
+ text: LocalizationKey;
+ actionLabel?: LocalizationKey;
+ onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<any>;
+};
+export const CalloutWithAction = (props: CalloutWithActionProps) => {
+ const { text, actionLabel, onClick: onClickProp } = props;
+
+ const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+ if (onClickProp) {
+ void onClickProp?.(e);
+ }
+ };
+
+ return (
+ <Flex
+ sx={theme => ({
+ background: theme.colors.$blackAlpha50,
+ padding: theme.space.$4,
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ borderRadius: theme.radii.$md,
+ })}
+ >
+ <Col gap={4}>
+ <Text
+ sx={t => ({
+ lineHeight: t.lineHeights.$tall,
+ })}
+ localizationKey={text}
+ />
+
+ <Link
+ colorScheme={'primary'}
+ variant='regularMedium'
+ localizationKey={actionLabel}
+ onClick={onClick}
+ />
+ </Col>
+ </Flex>
+ );
+};

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

@@ -1,5 +1,6 @@
 export * from './BlockButtons';
 export * from './constants';
+export * from './CalloutWithAction';
 export * from './forms';
 export * from './redirects';
 export * from './verification';
@@ -10,5 +11,6 @@ export * from './EmailLinkStatusCard';
 export * from './Wizard';
 export * from './RemoveResourcePage';
 export * from './PrintableComponent';
+export * from './RemoveResourcePage';
 export * from './withOrganizationsEnabledGuard';
 export * from './QRCode';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const AddDomainPage = withCardStateProvider(() => {
+ const title = localizationKeys('organizationProfile.createDomainPage.title');
+ const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
+ const card = useCardState();
+ const { organization } = useCoreOrganization();
+ const { navigate } = useRouter();
+
+ const nameField = useFormControl('name', '', {
+ type: 'text',
+ label: localizationKeys('formFieldLabel__organizationEmailDomain'),
+ placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'),
+ });
+
+ if (!organization) {
+ return null;
+ }
+
+ const canSubmit = organization.name !== nameField.value;
+
+ const onSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ return organization
+ .createDomain(nameField.value)
+ .then(res => {
+ if (res.verification && res.verification.status === 'verified') {
+ return navigate(`../domain/${res.id}`);
+ }
+ return navigate(`../domain/${res.id}/verify`);
+ })
+ .catch(err => {
+ handleError(err, [nameField], card.setError);
+ });
+ };
+
+ return (
+ <ContentPage
+ headerTitle={title}
+ headerSubtitle={subtitle}
+ Breadcrumbs={OrganizationProfileBreadcrumbs}
+ >
+ <Form.Root onSubmit={onSubmit}>
+ <Form.ControlRow elementId={nameField.id}>
+ <Form.Control
+ {...nameField.props}
+ autoFocus
+ required
+ />
+ </Form.ControlRow>
+ <FormButtons isDisabled={!canSubmit} />
+ </Form.Root>
+ </ContentPage>
+ );
+});

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

@@ -0,0 +1,133 @@
+import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
+import type { OrganizationDomainVerificationStatus } from '@clerk/types';
+import React, { useMemo } from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { Badge, Box, Col, descriptors, Spinner } from '../../customizables';
+import { ArrowBlockButton } from '../../elements';
+import { useInView } from '../../hooks';
+import { useRouter } from '../../router';
+
+type DomainListProps = GetDomainsParams & {
+ verificationStatus?: OrganizationDomainVerificationStatus;
+ enrollmentMode?: OrganizationEnrollmentMode;
+ /**
+ * Enables internal links to navigate to the correct page
+ * based on when this component is used
+ */
+ redirectSubPath: string;
+ fallback?: React.ReactNode;
+};
+
+export const DomainList = (props: DomainListProps) => {
+ const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
+ const { organization, membership, domains } = useCoreOrganization({
+ domains: {
+ infinite: true,
+ ...rest,
+ },
+ });
+
+ const { ref } = useInView({
+ threshold: 0,
+ onChange: inView => {
+ if (inView) {
+ void domains?.fetchNext?.();
+ }
+ },
+ });
+ const { navigate } = useRouter();
+
+ const isAdmin = membership?.role === 'admin';
+
+ const domainList = useMemo(() => {
+ if (!domains?.data) {
+ return [];
+ }
+
+ return domains.data.filter(d => {
+ let matchesStatus = true;
+ let matchesMode = true;
+ if (verificationStatus) {
+ matchesStatus = !!d.verification && d.verification.status === verificationStatus;
+ }
+ if (enrollmentMode) {
+ matchesMode = d.enrollmentMode === enrollmentMode;
+ }
+
+ return matchesStatus && matchesMode;
+ });
+ }, [domains?.data]);
+
+ if (!organization || !isAdmin) {
+ return null;
+ }
+
+ // TODO: Split this to smaller components
+ return (
+ <Col>
+ {domainList.length === 0 && !domains?.isLoading && fallback}
+ {domainList.map(d => (
+ <ArrowBlockButton
+ key={d.id}
+ elementDescriptor={descriptors.accordionTriggerButton}
+ variant='ghost'
+ colorScheme='neutral'
+ badge={
+ !verificationStatus ? (
+ d.verification && d.verification.status === 'verified' ? (
+ <Badge textVariant={'extraSmallRegular'}>Verified</Badge>
+ ) : (
+ <Badge
+ textVariant={'extraSmallRegular'}
+ colorScheme={'warning'}
+ >
+ Unverified
+ </Badge>
+ )
+ ) : undefined
+ }
+ sx={t => ({
+ padding: `${t.space.$3} ${t.space.$4}`,
+ minHeight: t.sizes.$10,
+ })}
+ onClick={() => {
+ d.verification && d.verification.status === 'verified'
+ ? void navigate(`${redirectSubPath}${d.id}`)
+ : void navigate(`${redirectSubPath}${d.id}/verify`);
+ }}
+ >
+ {d.name}
+ </ArrowBlockButton>
+ ))}
+ {(domains?.hasNextPage || domains?.isFetching) && (
+ <Box
+ ref={domains?.isFetching ? undefined : ref}
+ sx={[
+ t => ({
+ width: '100%',
+ height: t.space.$10,
+ position: 'relative',
+ }),
+ ]}
+ >
+ <Box
+ sx={{
+ display: 'flex',
+ margin: 'auto',
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateY(-50%) translateX(-50%)',
+ }}
+ >
+ <Spinner
+ size='md'
+ colorScheme='primary'
+ />
+ </Box>
+ </Box>
+ )}
+ </Col>
+ );
+};

.changeset/nervous-lizards-repeat.md

@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduces domains and invitations in <OrganizationProfile />
+
+- The "Members" page now accommodates Domain and Individual invitations 
+- The "Settings" page allows for the addition, edit and removal of a domain

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

@@ -37,7 +37,7 @@ export class OrganizationDomain extends BaseResource implements OrganizationDoma
  return new OrganizationDomain(json);
  }
 
-prepareDomainAffiliationVerification = async (
+prepareAffiliationVerification = async (
  params: PrepareAffiliationVerificationParams,
  ): Promise<OrganizationDomainResource> => {
  return this._basePost({

packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap

@@ -10,7 +10,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": null,
 }
@@ -26,7 +26,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": {
  "attempts": 1,

packages/clerk-js/src/ui/common/CalloutWithAction.tsx

@@ -0,0 +1,47 @@
+import type { MouseEvent } from 'react';
+
+import { Col, Flex, Link, Text } from '../customizables';
+import type { LocalizationKey } from '../localization';
+
+type CalloutWithActionProps = {
+ text: LocalizationKey;
+ actionLabel?: LocalizationKey;
+ onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<any>;
+};
+export const CalloutWithAction = (props: CalloutWithActionProps) => {
+ const { text, actionLabel, onClick: onClickProp } = props;
+
+ const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+ if (onClickProp) {
+ void onClickProp?.(e);
+ }
+ };
+
+ return (
+ <Flex
+ sx={theme => ({
+ background: theme.colors.$blackAlpha50,
+ padding: theme.space.$4,
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ borderRadius: theme.radii.$md,
+ })}
+ >
+ <Col gap={4}>
+ <Text
+ sx={t => ({
+ lineHeight: t.lineHeights.$tall,
+ })}
+ localizationKey={text}
+ />
+
+ <Link
+ colorScheme={'primary'}
+ variant='regularMedium'
+ localizationKey={actionLabel}
+ onClick={onClick}
+ />
+ </Col>
+ </Flex>
+ );
+};

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

@@ -1,5 +1,6 @@
 export * from './BlockButtons';
 export * from './constants';
+export * from './CalloutWithAction';
 export * from './forms';
 export * from './redirects';
 export * from './verification';
@@ -10,5 +11,6 @@ export * from './EmailLinkStatusCard';
 export * from './Wizard';
 export * from './RemoveResourcePage';
 export * from './PrintableComponent';
+export * from './RemoveResourcePage';
 export * from './withOrganizationsEnabledGuard';
 export * from './QRCode';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const AddDomainPage = withCardStateProvider(() => {
+ const title = localizationKeys('organizationProfile.createDomainPage.title');
+ const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
+ const card = useCardState();
+ const { organization } = useCoreOrganization();
+ const { navigate } = useRouter();
+
+ const nameField = useFormControl('name', '', {
+ type: 'text',
+ label: localizationKeys('formFieldLabel__organizationEmailDomain'),
+ placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'),
+ });
+
+ if (!organization) {
+ return null;
+ }
+
+ const canSubmit = organization.name !== nameField.value;
+
+ const onSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ return organization
+ .createDomain(nameField.value)
+ .then(res => {
+ if (res.verification && res.verification.status === 'verified') {
+ return navigate(`../domain/${res.id}`);
+ }
+ return navigate(`../domain/${res.id}/verify`);
+ })
+ .catch(err => {
+ handleError(err, [nameField], card.setError);
+ });
+ };
+
+ return (
+ <ContentPage
+ headerTitle={title}
+ headerSubtitle={subtitle}
+ Breadcrumbs={OrganizationProfileBreadcrumbs}
+ >
+ <Form.Root onSubmit={onSubmit}>
+ <Form.ControlRow elementId={nameField.id}>
+ <Form.Control
+ {...nameField.props}
+ autoFocus
+ required
+ />
+ </Form.ControlRow>
+ <FormButtons isDisabled={!canSubmit} />
+ </Form.Root>
+ </ContentPage>
+ );
+});

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

@@ -0,0 +1,133 @@
+import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
+import type { OrganizationDomainVerificationStatus } from '@clerk/types';
+import React, { useMemo } from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { Badge, Box, Col, descriptors, Spinner } from '../../customizables';
+import { ArrowBlockButton } from '../../elements';
+import { useInView } from '../../hooks';
+import { useRouter } from '../../router';
+
+type DomainListProps = GetDomainsParams & {
+ verificationStatus?: OrganizationDomainVerificationStatus;
+ enrollmentMode?: OrganizationEnrollmentMode;
+ /**
+ * Enables internal links to navigate to the correct page
+ * based on when this component is used
+ */
+ redirectSubPath: string;
+ fallback?: React.ReactNode;
+};
+
+export const DomainList = (props: DomainListProps) => {
+ const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
+ const { organization, membership, domains } = useCoreOrganization({
+ domains: {
+ infinite: true,
+ ...rest,
+ },
+ });
+
+ const { ref } = useInView({
+ threshold: 0,
+ onChange: inView => {
+ if (inView) {
+ void domains?.fetchNext?.();
+ }
+ },
+ });
+ const { navigate } = useRouter();
+
+ const isAdmin = membership?.role === 'admin';
+
+ const domainList = useMemo(() => {
+ if (!domains?.data) {
+ return [];
+ }
+
+ return domains.data.filter(d => {
+ let matchesStatus = true;
+ let matchesMode = true;
+ if (verificationStatus) {
+ matchesStatus = !!d.verification && d.verification.status === verificationStatus;
+ }
+ if (enrollmentMode) {
+ matchesMode = d.enrollmentMode === enrollmentMode;
+ }
+
+ return matchesStatus && matchesMode;
+ });
+ }, [domains?.data]);
+
+ if (!organization || !isAdmin) {
+ return null;
+ }
+
+ // TODO: Split this to smaller components
+ return (
+ <Col>
+ {domainList.length === 0 && !domains?.isLoading && fallback}
+ {domainList.map(d => (
+ <ArrowBlockButton
+ key={d.id}
+ elementDescriptor={descriptors.accordionTriggerButton}
+ variant='ghost'
+ colorScheme='neutral'
+ badge={
+ !verificationStatus ? (
+ d.verification && d.verification.status === 'verified' ? (
+ <Badge textVariant={'extraSmallRegular'}>Verified</Badge>
+ ) : (
+ <Badge
+ textVariant={'extraSmallRegular'}
+ colorScheme={'warning'}
+ >
+ Unverified
+ </Badge>
+ )
+ ) : undefined
+ }
+ sx={t => ({
+ padding: `${t.space.$3} ${t.space.$4}`,
+ minHeight: t.sizes.$10,
+ })}
+ onClick={() => {
+ d.verification && d.verification.status === 'verified'
+ ? void navigate(`${redirectSubPath}${d.id}`)
+ : void navigate(`${redirectSubPath}${d.id}/verify`);
+ }}
+ >
+ {d.name}
+ </ArrowBlockButton>
+ ))}
+ {(domains?.hasNextPage || domains?.isFetching) && (
+ <Box
+ ref={domains?.isFetching ? undefined : ref}
+ sx={[
+ t => ({
+ width: '100%',
+ height: t.space.$10,
+ position: 'relative',
+ }),
+ ]}
+ >
+ <Box
+ sx={{
+ display: 'flex',
+ margin: 'auto',
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateY(-50%) translateX(-50%)',
+ }}
+ >
+ <Spinner
+ size='md'
+ colorScheme='primary'
+ />
+ </Box>
+ </Box>
+ )}
+ </Col>
+ );
+};

.changeset/nervous-lizards-repeat.md

@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduces domains and invitations in <OrganizationProfile />
+
+- The "Members" page now accommodates Domain and Individual invitations 
+- The "Settings" page allows for the addition, edit and removal of a domain

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

@@ -37,7 +37,7 @@ export class OrganizationDomain extends BaseResource implements OrganizationDoma
  return new OrganizationDomain(json);
  }
 
-prepareDomainAffiliationVerification = async (
+prepareAffiliationVerification = async (
  params: PrepareAffiliationVerificationParams,
  ): Promise<OrganizationDomainResource> => {
  return this._basePost({

packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap

@@ -10,7 +10,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": null,
 }
@@ -26,7 +26,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": {
  "attempts": 1,

packages/clerk-js/src/ui/common/CalloutWithAction.tsx

@@ -0,0 +1,47 @@
+import type { MouseEvent } from 'react';
+
+import { Col, Flex, Link, Text } from '../customizables';
+import type { LocalizationKey } from '../localization';
+
+type CalloutWithActionProps = {
+ text: LocalizationKey;
+ actionLabel?: LocalizationKey;
+ onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<any>;
+};
+export const CalloutWithAction = (props: CalloutWithActionProps) => {
+ const { text, actionLabel, onClick: onClickProp } = props;
+
+ const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+ if (onClickProp) {
+ void onClickProp?.(e);
+ }
+ };
+
+ return (
+ <Flex
+ sx={theme => ({
+ background: theme.colors.$blackAlpha50,
+ padding: theme.space.$4,
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ borderRadius: theme.radii.$md,
+ })}
+ >
+ <Col gap={4}>
+ <Text
+ sx={t => ({
+ lineHeight: t.lineHeights.$tall,
+ })}
+ localizationKey={text}
+ />
+
+ <Link
+ colorScheme={'primary'}
+ variant='regularMedium'
+ localizationKey={actionLabel}
+ onClick={onClick}
+ />
+ </Col>
+ </Flex>
+ );
+};

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

@@ -1,5 +1,6 @@
 export * from './BlockButtons';
 export * from './constants';
+export * from './CalloutWithAction';
 export * from './forms';
 export * from './redirects';
 export * from './verification';
@@ -10,5 +11,6 @@ export * from './EmailLinkStatusCard';
 export * from './Wizard';
 export * from './RemoveResourcePage';
 export * from './PrintableComponent';
+export * from './RemoveResourcePage';
 export * from './withOrganizationsEnabledGuard';
 export * from './QRCode';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const AddDomainPage = withCardStateProvider(() => {
+ const title = localizationKeys('organizationProfile.createDomainPage.title');
+ const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
+ const card = useCardState();
+ const { organization } = useCoreOrganization();
+ const { navigate } = useRouter();
+
+ const nameField = useFormControl('name', '', {
+ type: 'text',
+ label: localizationKeys('formFieldLabel__organizationEmailDomain'),
+ placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'),
+ });
+
+ if (!organization) {
+ return null;
+ }
+
+ const canSubmit = organization.name !== nameField.value;
+
+ const onSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ return organization
+ .createDomain(nameField.value)
+ .then(res => {
+ if (res.verification && res.verification.status === 'verified') {
+ return navigate(`../domain/${res.id}`);
+ }
+ return navigate(`../domain/${res.id}/verify`);
+ })
+ .catch(err => {
+ handleError(err, [nameField], card.setError);
+ });
+ };
+
+ return (
+ <ContentPage
+ headerTitle={title}
+ headerSubtitle={subtitle}
+ Breadcrumbs={OrganizationProfileBreadcrumbs}
+ >
+ <Form.Root onSubmit={onSubmit}>
+ <Form.ControlRow elementId={nameField.id}>
+ <Form.Control
+ {...nameField.props}
+ autoFocus
+ required
+ />
+ </Form.ControlRow>
+ <FormButtons isDisabled={!canSubmit} />
+ </Form.Root>
+ </ContentPage>
+ );
+});

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

@@ -0,0 +1,133 @@
+import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
+import type { OrganizationDomainVerificationStatus } from '@clerk/types';
+import React, { useMemo } from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { Badge, Box, Col, descriptors, Spinner } from '../../customizables';
+import { ArrowBlockButton } from '../../elements';
+import { useInView } from '../../hooks';
+import { useRouter } from '../../router';
+
+type DomainListProps = GetDomainsParams & {
+ verificationStatus?: OrganizationDomainVerificationStatus;
+ enrollmentMode?: OrganizationEnrollmentMode;
+ /**
+ * Enables internal links to navigate to the correct page
+ * based on when this component is used
+ */
+ redirectSubPath: string;
+ fallback?: React.ReactNode;
+};
+
+export const DomainList = (props: DomainListProps) => {
+ const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
+ const { organization, membership, domains } = useCoreOrganization({
+ domains: {
+ infinite: true,
+ ...rest,
+ },
+ });
+
+ const { ref } = useInView({
+ threshold: 0,
+ onChange: inView => {
+ if (inView) {
+ void domains?.fetchNext?.();
+ }
+ },
+ });
+ const { navigate } = useRouter();
+
+ const isAdmin = membership?.role === 'admin';
+
+ const domainList = useMemo(() => {
+ if (!domains?.data) {
+ return [];
+ }
+
+ return domains.data.filter(d => {
+ let matchesStatus = true;
+ let matchesMode = true;
+ if (verificationStatus) {
+ matchesStatus = !!d.verification && d.verification.status === verificationStatus;
+ }
+ if (enrollmentMode) {
+ matchesMode = d.enrollmentMode === enrollmentMode;
+ }
+
+ return matchesStatus && matchesMode;
+ });
+ }, [domains?.data]);
+
+ if (!organization || !isAdmin) {
+ return null;
+ }
+
+ // TODO: Split this to smaller components
+ return (
+ <Col>
+ {domainList.length === 0 && !domains?.isLoading && fallback}
+ {domainList.map(d => (
+ <ArrowBlockButton
+ key={d.id}
+ elementDescriptor={descriptors.accordionTriggerButton}
+ variant='ghost'
+ colorScheme='neutral'
+ badge={
+ !verificationStatus ? (
+ d.verification && d.verification.status === 'verified' ? (
+ <Badge textVariant={'extraSmallRegular'}>Verified</Badge>
+ ) : (
+ <Badge
+ textVariant={'extraSmallRegular'}
+ colorScheme={'warning'}
+ >
+ Unverified
+ </Badge>
+ )
+ ) : undefined
+ }
+ sx={t => ({
+ padding: `${t.space.$3} ${t.space.$4}`,
+ minHeight: t.sizes.$10,
+ })}
+ onClick={() => {
+ d.verification && d.verification.status === 'verified'
+ ? void navigate(`${redirectSubPath}${d.id}`)
+ : void navigate(`${redirectSubPath}${d.id}/verify`);
+ }}
+ >
+ {d.name}
+ </ArrowBlockButton>
+ ))}
+ {(domains?.hasNextPage || domains?.isFetching) && (
+ <Box
+ ref={domains?.isFetching ? undefined : ref}
+ sx={[
+ t => ({
+ width: '100%',
+ height: t.space.$10,
+ position: 'relative',
+ }),
+ ]}
+ >
+ <Box
+ sx={{
+ display: 'flex',
+ margin: 'auto',
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateY(-50%) translateX(-50%)',
+ }}
+ >
+ <Spinner
+ size='md'
+ colorScheme='primary'
+ />
+ </Box>
+ </Box>
+ )}
+ </Col>
+ );
+};

.changeset/nervous-lizards-repeat.md

@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduces domains and invitations in <OrganizationProfile />
+
+- The "Members" page now accommodates Domain and Individual invitations 
+- The "Settings" page allows for the addition, edit and removal of a domain

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

@@ -37,7 +37,7 @@ export class OrganizationDomain extends BaseResource implements OrganizationDoma
  return new OrganizationDomain(json);
  }
 
-prepareDomainAffiliationVerification = async (
+prepareAffiliationVerification = async (
  params: PrepareAffiliationVerificationParams,
  ): Promise<OrganizationDomainResource> => {
  return this._basePost({

packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap

@@ -10,7 +10,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": null,
 }
@@ -26,7 +26,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": {
  "attempts": 1,

packages/clerk-js/src/ui/common/CalloutWithAction.tsx

@@ -0,0 +1,47 @@
+import type { MouseEvent } from 'react';
+
+import { Col, Flex, Link, Text } from '../customizables';
+import type { LocalizationKey } from '../localization';
+
+type CalloutWithActionProps = {
+ text: LocalizationKey;
+ actionLabel?: LocalizationKey;
+ onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<any>;
+};
+export const CalloutWithAction = (props: CalloutWithActionProps) => {
+ const { text, actionLabel, onClick: onClickProp } = props;
+
+ const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+ if (onClickProp) {
+ void onClickProp?.(e);
+ }
+ };
+
+ return (
+ <Flex
+ sx={theme => ({
+ background: theme.colors.$blackAlpha50,
+ padding: theme.space.$4,
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ borderRadius: theme.radii.$md,
+ })}
+ >
+ <Col gap={4}>
+ <Text
+ sx={t => ({
+ lineHeight: t.lineHeights.$tall,
+ })}
+ localizationKey={text}
+ />
+
+ <Link
+ colorScheme={'primary'}
+ variant='regularMedium'
+ localizationKey={actionLabel}
+ onClick={onClick}
+ />
+ </Col>
+ </Flex>
+ );
+};

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

@@ -1,5 +1,6 @@
 export * from './BlockButtons';
 export * from './constants';
+export * from './CalloutWithAction';
 export * from './forms';
 export * from './redirects';
 export * from './verification';
@@ -10,5 +11,6 @@ export * from './EmailLinkStatusCard';
 export * from './Wizard';
 export * from './RemoveResourcePage';
 export * from './PrintableComponent';
+export * from './RemoveResourcePage';
 export * from './withOrganizationsEnabledGuard';
 export * from './QRCode';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const AddDomainPage = withCardStateProvider(() => {
+ const title = localizationKeys('organizationProfile.createDomainPage.title');
+ const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
+ const card = useCardState();
+ const { organization } = useCoreOrganization();
+ const { navigate } = useRouter();
+
+ const nameField = useFormControl('name', '', {
+ type: 'text',
+ label: localizationKeys('formFieldLabel__organizationEmailDomain'),
+ placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'),
+ });
+
+ if (!organization) {
+ return null;
+ }
+
+ const canSubmit = organization.name !== nameField.value;
+
+ const onSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ return organization
+ .createDomain(nameField.value)
+ .then(res => {
+ if (res.verification && res.verification.status === 'verified') {
+ return navigate(`../domain/${res.id}`);
+ }
+ return navigate(`../domain/${res.id}/verify`);
+ })
+ .catch(err => {
+ handleError(err, [nameField], card.setError);
+ });
+ };
+
+ return (
+ <ContentPage
+ headerTitle={title}
+ headerSubtitle={subtitle}
+ Breadcrumbs={OrganizationProfileBreadcrumbs}
+ >
+ <Form.Root onSubmit={onSubmit}>
+ <Form.ControlRow elementId={nameField.id}>
+ <Form.Control
+ {...nameField.props}
+ autoFocus
+ required
+ />
+ </Form.ControlRow>
+ <FormButtons isDisabled={!canSubmit} />
+ </Form.Root>
+ </ContentPage>
+ );
+});

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

@@ -0,0 +1,133 @@
+import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
+import type { OrganizationDomainVerificationStatus } from '@clerk/types';
+import React, { useMemo } from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { Badge, Box, Col, descriptors, Spinner } from '../../customizables';
+import { ArrowBlockButton } from '../../elements';
+import { useInView } from '../../hooks';
+import { useRouter } from '../../router';
+
+type DomainListProps = GetDomainsParams & {
+ verificationStatus?: OrganizationDomainVerificationStatus;
+ enrollmentMode?: OrganizationEnrollmentMode;
+ /**
+ * Enables internal links to navigate to the correct page
+ * based on when this component is used
+ */
+ redirectSubPath: string;
+ fallback?: React.ReactNode;
+};
+
+export const DomainList = (props: DomainListProps) => {
+ const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
+ const { organization, membership, domains } = useCoreOrganization({
+ domains: {
+ infinite: true,
+ ...rest,
+ },
+ });
+
+ const { ref } = useInView({
+ threshold: 0,
+ onChange: inView => {
+ if (inView) {
+ void domains?.fetchNext?.();
+ }
+ },
+ });
+ const { navigate } = useRouter();
+
+ const isAdmin = membership?.role === 'admin';
+
+ const domainList = useMemo(() => {
+ if (!domains?.data) {
+ return [];
+ }
+
+ return domains.data.filter(d => {
+ let matchesStatus = true;
+ let matchesMode = true;
+ if (verificationStatus) {
+ matchesStatus = !!d.verification && d.verification.status === verificationStatus;
+ }
+ if (enrollmentMode) {
+ matchesMode = d.enrollmentMode === enrollmentMode;
+ }
+
+ return matchesStatus && matchesMode;
+ });
+ }, [domains?.data]);
+
+ if (!organization || !isAdmin) {
+ return null;
+ }
+
+ // TODO: Split this to smaller components
+ return (
+ <Col>
+ {domainList.length === 0 && !domains?.isLoading && fallback}
+ {domainList.map(d => (
+ <ArrowBlockButton
+ key={d.id}
+ elementDescriptor={descriptors.accordionTriggerButton}
+ variant='ghost'
+ colorScheme='neutral'
+ badge={
+ !verificationStatus ? (
+ d.verification && d.verification.status === 'verified' ? (
+ <Badge textVariant={'extraSmallRegular'}>Verified</Badge>
+ ) : (
+ <Badge
+ textVariant={'extraSmallRegular'}
+ colorScheme={'warning'}
+ >
+ Unverified
+ </Badge>
+ )
+ ) : undefined
+ }
+ sx={t => ({
+ padding: `${t.space.$3} ${t.space.$4}`,
+ minHeight: t.sizes.$10,
+ })}
+ onClick={() => {
+ d.verification && d.verification.status === 'verified'
+ ? void navigate(`${redirectSubPath}${d.id}`)
+ : void navigate(`${redirectSubPath}${d.id}/verify`);
+ }}
+ >
+ {d.name}
+ </ArrowBlockButton>
+ ))}
+ {(domains?.hasNextPage || domains?.isFetching) && (
+ <Box
+ ref={domains?.isFetching ? undefined : ref}
+ sx={[
+ t => ({
+ width: '100%',
+ height: t.space.$10,
+ position: 'relative',
+ }),
+ ]}
+ >
+ <Box
+ sx={{
+ display: 'flex',
+ margin: 'auto',
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateY(-50%) translateX(-50%)',
+ }}
+ >
+ <Spinner
+ size='md'
+ colorScheme='primary'
+ />
+ </Box>
+ </Box>
+ )}
+ </Col>
+ );
+};

.changeset/nervous-lizards-repeat.md

@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduces domains and invitations in <OrganizationProfile />
+
+- The "Members" page now accommodates Domain and Individual invitations 
+- The "Settings" page allows for the addition, edit and removal of a domain

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

@@ -37,7 +37,7 @@ export class OrganizationDomain extends BaseResource implements OrganizationDoma
  return new OrganizationDomain(json);
  }
 
-prepareDomainAffiliationVerification = async (
+prepareAffiliationVerification = async (
  params: PrepareAffiliationVerificationParams,
  ): Promise<OrganizationDomainResource> => {
  return this._basePost({

packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap

@@ -10,7 +10,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": null,
 }
@@ -26,7 +26,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": {
  "attempts": 1,

packages/clerk-js/src/ui/common/CalloutWithAction.tsx

@@ -0,0 +1,47 @@
+import type { MouseEvent } from 'react';
+
+import { Col, Flex, Link, Text } from '../customizables';
+import type { LocalizationKey } from '../localization';
+
+type CalloutWithActionProps = {
+ text: LocalizationKey;
+ actionLabel?: LocalizationKey;
+ onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<any>;
+};
+export const CalloutWithAction = (props: CalloutWithActionProps) => {
+ const { text, actionLabel, onClick: onClickProp } = props;
+
+ const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+ if (onClickProp) {
+ void onClickProp?.(e);
+ }
+ };
+
+ return (
+ <Flex
+ sx={theme => ({
+ background: theme.colors.$blackAlpha50,
+ padding: theme.space.$4,
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ borderRadius: theme.radii.$md,
+ })}
+ >
+ <Col gap={4}>
+ <Text
+ sx={t => ({
+ lineHeight: t.lineHeights.$tall,
+ })}
+ localizationKey={text}
+ />
+
+ <Link
+ colorScheme={'primary'}
+ variant='regularMedium'
+ localizationKey={actionLabel}
+ onClick={onClick}
+ />
+ </Col>
+ </Flex>
+ );
+};

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

@@ -1,5 +1,6 @@
 export * from './BlockButtons';
 export * from './constants';
+export * from './CalloutWithAction';
 export * from './forms';
 export * from './redirects';
 export * from './verification';
@@ -10,5 +11,6 @@ export * from './EmailLinkStatusCard';
 export * from './Wizard';
 export * from './RemoveResourcePage';
 export * from './PrintableComponent';
+export * from './RemoveResourcePage';
 export * from './withOrganizationsEnabledGuard';
 export * from './QRCode';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const AddDomainPage = withCardStateProvider(() => {
+ const title = localizationKeys('organizationProfile.createDomainPage.title');
+ const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
+ const card = useCardState();
+ const { organization } = useCoreOrganization();
+ const { navigate } = useRouter();
+
+ const nameField = useFormControl('name', '', {
+ type: 'text',
+ label: localizationKeys('formFieldLabel__organizationEmailDomain'),
+ placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'),
+ });
+
+ if (!organization) {
+ return null;
+ }
+
+ const canSubmit = organization.name !== nameField.value;
+
+ const onSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ return organization
+ .createDomain(nameField.value)
+ .then(res => {
+ if (res.verification && res.verification.status === 'verified') {
+ return navigate(`../domain/${res.id}`);
+ }
+ return navigate(`../domain/${res.id}/verify`);
+ })
+ .catch(err => {
+ handleError(err, [nameField], card.setError);
+ });
+ };
+
+ return (
+ <ContentPage
+ headerTitle={title}
+ headerSubtitle={subtitle}
+ Breadcrumbs={OrganizationProfileBreadcrumbs}
+ >
+ <Form.Root onSubmit={onSubmit}>
+ <Form.ControlRow elementId={nameField.id}>
+ <Form.Control
+ {...nameField.props}
+ autoFocus
+ required
+ />
+ </Form.ControlRow>
+ <FormButtons isDisabled={!canSubmit} />
+ </Form.Root>
+ </ContentPage>
+ );
+});

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

@@ -0,0 +1,133 @@
+import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
+import type { OrganizationDomainVerificationStatus } from '@clerk/types';
+import React, { useMemo } from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { Badge, Box, Col, descriptors, Spinner } from '../../customizables';
+import { ArrowBlockButton } from '../../elements';
+import { useInView } from '../../hooks';
+import { useRouter } from '../../router';
+
+type DomainListProps = GetDomainsParams & {
+ verificationStatus?: OrganizationDomainVerificationStatus;
+ enrollmentMode?: OrganizationEnrollmentMode;
+ /**
+ * Enables internal links to navigate to the correct page
+ * based on when this component is used
+ */
+ redirectSubPath: string;
+ fallback?: React.ReactNode;
+};
+
+export const DomainList = (props: DomainListProps) => {
+ const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
+ const { organization, membership, domains } = useCoreOrganization({
+ domains: {
+ infinite: true,
+ ...rest,
+ },
+ });
+
+ const { ref } = useInView({
+ threshold: 0,
+ onChange: inView => {
+ if (inView) {
+ void domains?.fetchNext?.();
+ }
+ },
+ });
+ const { navigate } = useRouter();
+
+ const isAdmin = membership?.role === 'admin';
+
+ const domainList = useMemo(() => {
+ if (!domains?.data) {
+ return [];
+ }
+
+ return domains.data.filter(d => {
+ let matchesStatus = true;
+ let matchesMode = true;
+ if (verificationStatus) {
+ matchesStatus = !!d.verification && d.verification.status === verificationStatus;
+ }
+ if (enrollmentMode) {
+ matchesMode = d.enrollmentMode === enrollmentMode;
+ }
+
+ return matchesStatus && matchesMode;
+ });
+ }, [domains?.data]);
+
+ if (!organization || !isAdmin) {
+ return null;
+ }
+
+ // TODO: Split this to smaller components
+ return (
+ <Col>
+ {domainList.length === 0 && !domains?.isLoading && fallback}
+ {domainList.map(d => (
+ <ArrowBlockButton
+ key={d.id}
+ elementDescriptor={descriptors.accordionTriggerButton}
+ variant='ghost'
+ colorScheme='neutral'
+ badge={
+ !verificationStatus ? (
+ d.verification && d.verification.status === 'verified' ? (
+ <Badge textVariant={'extraSmallRegular'}>Verified</Badge>
+ ) : (
+ <Badge
+ textVariant={'extraSmallRegular'}
+ colorScheme={'warning'}
+ >
+ Unverified
+ </Badge>
+ )
+ ) : undefined
+ }
+ sx={t => ({
+ padding: `${t.space.$3} ${t.space.$4}`,
+ minHeight: t.sizes.$10,
+ })}
+ onClick={() => {
+ d.verification && d.verification.status === 'verified'
+ ? void navigate(`${redirectSubPath}${d.id}`)
+ : void navigate(`${redirectSubPath}${d.id}/verify`);
+ }}
+ >
+ {d.name}
+ </ArrowBlockButton>
+ ))}
+ {(domains?.hasNextPage || domains?.isFetching) && (
+ <Box
+ ref={domains?.isFetching ? undefined : ref}
+ sx={[
+ t => ({
+ width: '100%',
+ height: t.space.$10,
+ position: 'relative',
+ }),
+ ]}
+ >
+ <Box
+ sx={{
+ display: 'flex',
+ margin: 'auto',
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateY(-50%) translateX(-50%)',
+ }}
+ >
+ <Spinner
+ size='md'
+ colorScheme='primary'
+ />
+ </Box>
+ </Box>
+ )}
+ </Col>
+ );
+};

.changeset/nervous-lizards-repeat.md

@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduces domains and invitations in <OrganizationProfile />
+
+- The "Members" page now accommodates Domain and Individual invitations 
+- The "Settings" page allows for the addition, edit and removal of a domain

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

@@ -37,7 +37,7 @@ export class OrganizationDomain extends BaseResource implements OrganizationDoma
  return new OrganizationDomain(json);
  }
 
-prepareDomainAffiliationVerification = async (
+prepareAffiliationVerification = async (
  params: PrepareAffiliationVerificationParams,
  ): Promise<OrganizationDomainResource> => {
  return this._basePost({

packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap

@@ -10,7 +10,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": null,
 }
@@ -26,7 +26,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": {
  "attempts": 1,

packages/clerk-js/src/ui/common/CalloutWithAction.tsx

@@ -0,0 +1,47 @@
+import type { MouseEvent } from 'react';
+
+import { Col, Flex, Link, Text } from '../customizables';
+import type { LocalizationKey } from '../localization';
+
+type CalloutWithActionProps = {
+ text: LocalizationKey;
+ actionLabel?: LocalizationKey;
+ onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<any>;
+};
+export const CalloutWithAction = (props: CalloutWithActionProps) => {
+ const { text, actionLabel, onClick: onClickProp } = props;
+
+ const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+ if (onClickProp) {
+ void onClickProp?.(e);
+ }
+ };
+
+ return (
+ <Flex
+ sx={theme => ({
+ background: theme.colors.$blackAlpha50,
+ padding: theme.space.$4,
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ borderRadius: theme.radii.$md,
+ })}
+ >
+ <Col gap={4}>
+ <Text
+ sx={t => ({
+ lineHeight: t.lineHeights.$tall,
+ })}
+ localizationKey={text}
+ />
+
+ <Link
+ colorScheme={'primary'}
+ variant='regularMedium'
+ localizationKey={actionLabel}
+ onClick={onClick}
+ />
+ </Col>
+ </Flex>
+ );
+};

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

@@ -1,5 +1,6 @@
 export * from './BlockButtons';
 export * from './constants';
+export * from './CalloutWithAction';
 export * from './forms';
 export * from './redirects';
 export * from './verification';
@@ -10,5 +11,6 @@ export * from './EmailLinkStatusCard';
 export * from './Wizard';
 export * from './RemoveResourcePage';
 export * from './PrintableComponent';
+export * from './RemoveResourcePage';
 export * from './withOrganizationsEnabledGuard';
 export * from './QRCode';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const AddDomainPage = withCardStateProvider(() => {
+ const title = localizationKeys('organizationProfile.createDomainPage.title');
+ const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
+ const card = useCardState();
+ const { organization } = useCoreOrganization();
+ const { navigate } = useRouter();
+
+ const nameField = useFormControl('name', '', {
+ type: 'text',
+ label: localizationKeys('formFieldLabel__organizationEmailDomain'),
+ placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'),
+ });
+
+ if (!organization) {
+ return null;
+ }
+
+ const canSubmit = organization.name !== nameField.value;
+
+ const onSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ return organization
+ .createDomain(nameField.value)
+ .then(res => {
+ if (res.verification && res.verification.status === 'verified') {
+ return navigate(`../domain/${res.id}`);
+ }
+ return navigate(`../domain/${res.id}/verify`);
+ })
+ .catch(err => {
+ handleError(err, [nameField], card.setError);
+ });
+ };
+
+ return (
+ <ContentPage
+ headerTitle={title}
+ headerSubtitle={subtitle}
+ Breadcrumbs={OrganizationProfileBreadcrumbs}
+ >
+ <Form.Root onSubmit={onSubmit}>
+ <Form.ControlRow elementId={nameField.id}>
+ <Form.Control
+ {...nameField.props}
+ autoFocus
+ required
+ />
+ </Form.ControlRow>
+ <FormButtons isDisabled={!canSubmit} />
+ </Form.Root>
+ </ContentPage>
+ );
+});

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

@@ -0,0 +1,133 @@
+import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
+import type { OrganizationDomainVerificationStatus } from '@clerk/types';
+import React, { useMemo } from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { Badge, Box, Col, descriptors, Spinner } from '../../customizables';
+import { ArrowBlockButton } from '../../elements';
+import { useInView } from '../../hooks';
+import { useRouter } from '../../router';
+
+type DomainListProps = GetDomainsParams & {
+ verificationStatus?: OrganizationDomainVerificationStatus;
+ enrollmentMode?: OrganizationEnrollmentMode;
+ /**
+ * Enables internal links to navigate to the correct page
+ * based on when this component is used
+ */
+ redirectSubPath: string;
+ fallback?: React.ReactNode;
+};
+
+export const DomainList = (props: DomainListProps) => {
+ const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
+ const { organization, membership, domains } = useCoreOrganization({
+ domains: {
+ infinite: true,
+ ...rest,
+ },
+ });
+
+ const { ref } = useInView({
+ threshold: 0,
+ onChange: inView => {
+ if (inView) {
+ void domains?.fetchNext?.();
+ }
+ },
+ });
+ const { navigate } = useRouter();
+
+ const isAdmin = membership?.role === 'admin';
+
+ const domainList = useMemo(() => {
+ if (!domains?.data) {
+ return [];
+ }
+
+ return domains.data.filter(d => {
+ let matchesStatus = true;
+ let matchesMode = true;
+ if (verificationStatus) {
+ matchesStatus = !!d.verification && d.verification.status === verificationStatus;
+ }
+ if (enrollmentMode) {
+ matchesMode = d.enrollmentMode === enrollmentMode;
+ }
+
+ return matchesStatus && matchesMode;
+ });
+ }, [domains?.data]);
+
+ if (!organization || !isAdmin) {
+ return null;
+ }
+
+ // TODO: Split this to smaller components
+ return (
+ <Col>
+ {domainList.length === 0 && !domains?.isLoading && fallback}
+ {domainList.map(d => (
+ <ArrowBlockButton
+ key={d.id}
+ elementDescriptor={descriptors.accordionTriggerButton}
+ variant='ghost'
+ colorScheme='neutral'
+ badge={
+ !verificationStatus ? (
+ d.verification && d.verification.status === 'verified' ? (
+ <Badge textVariant={'extraSmallRegular'}>Verified</Badge>
+ ) : (
+ <Badge
+ textVariant={'extraSmallRegular'}
+ colorScheme={'warning'}
+ >
+ Unverified
+ </Badge>
+ )
+ ) : undefined
+ }
+ sx={t => ({
+ padding: `${t.space.$3} ${t.space.$4}`,
+ minHeight: t.sizes.$10,
+ })}
+ onClick={() => {
+ d.verification && d.verification.status === 'verified'
+ ? void navigate(`${redirectSubPath}${d.id}`)
+ : void navigate(`${redirectSubPath}${d.id}/verify`);
+ }}
+ >
+ {d.name}
+ </ArrowBlockButton>
+ ))}
+ {(domains?.hasNextPage || domains?.isFetching) && (
+ <Box
+ ref={domains?.isFetching ? undefined : ref}
+ sx={[
+ t => ({
+ width: '100%',
+ height: t.space.$10,
+ position: 'relative',
+ }),
+ ]}
+ >
+ <Box
+ sx={{
+ display: 'flex',
+ margin: 'auto',
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateY(-50%) translateX(-50%)',
+ }}
+ >
+ <Spinner
+ size='md'
+ colorScheme='primary'
+ />
+ </Box>
+ </Box>
+ )}
+ </Col>
+ );
+};

.changeset/nervous-lizards-repeat.md

@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduces domains and invitations in <OrganizationProfile />
+
+- The "Members" page now accommodates Domain and Individual invitations 
+- The "Settings" page allows for the addition, edit and removal of a domain

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

@@ -37,7 +37,7 @@ export class OrganizationDomain extends BaseResource implements OrganizationDoma
  return new OrganizationDomain(json);
  }
 
-prepareDomainAffiliationVerification = async (
+prepareAffiliationVerification = async (
  params: PrepareAffiliationVerificationParams,
  ): Promise<OrganizationDomainResource> => {
  return this._basePost({

packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap

@@ -10,7 +10,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": null,
 }
@@ -26,7 +26,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": {
  "attempts": 1,

packages/clerk-js/src/ui/common/CalloutWithAction.tsx

@@ -0,0 +1,47 @@
+import type { MouseEvent } from 'react';
+
+import { Col, Flex, Link, Text } from '../customizables';
+import type { LocalizationKey } from '../localization';
+
+type CalloutWithActionProps = {
+ text: LocalizationKey;
+ actionLabel?: LocalizationKey;
+ onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<any>;
+};
+export const CalloutWithAction = (props: CalloutWithActionProps) => {
+ const { text, actionLabel, onClick: onClickProp } = props;
+
+ const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+ if (onClickProp) {
+ void onClickProp?.(e);
+ }
+ };
+
+ return (
+ <Flex
+ sx={theme => ({
+ background: theme.colors.$blackAlpha50,
+ padding: theme.space.$4,
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ borderRadius: theme.radii.$md,
+ })}
+ >
+ <Col gap={4}>
+ <Text
+ sx={t => ({
+ lineHeight: t.lineHeights.$tall,
+ })}
+ localizationKey={text}
+ />
+
+ <Link
+ colorScheme={'primary'}
+ variant='regularMedium'
+ localizationKey={actionLabel}
+ onClick={onClick}
+ />
+ </Col>
+ </Flex>
+ );
+};

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

@@ -1,5 +1,6 @@
 export * from './BlockButtons';
 export * from './constants';
+export * from './CalloutWithAction';
 export * from './forms';
 export * from './redirects';
 export * from './verification';
@@ -10,5 +11,6 @@ export * from './EmailLinkStatusCard';
 export * from './Wizard';
 export * from './RemoveResourcePage';
 export * from './PrintableComponent';
+export * from './RemoveResourcePage';
 export * from './withOrganizationsEnabledGuard';
 export * from './QRCode';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const AddDomainPage = withCardStateProvider(() => {
+ const title = localizationKeys('organizationProfile.createDomainPage.title');
+ const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
+ const card = useCardState();
+ const { organization } = useCoreOrganization();
+ const { navigate } = useRouter();
+
+ const nameField = useFormControl('name', '', {
+ type: 'text',
+ label: localizationKeys('formFieldLabel__organizationEmailDomain'),
+ placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'),
+ });
+
+ if (!organization) {
+ return null;
+ }
+
+ const canSubmit = organization.name !== nameField.value;
+
+ const onSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ return organization
+ .createDomain(nameField.value)
+ .then(res => {
+ if (res.verification && res.verification.status === 'verified') {
+ return navigate(`../domain/${res.id}`);
+ }
+ return navigate(`../domain/${res.id}/verify`);
+ })
+ .catch(err => {
+ handleError(err, [nameField], card.setError);
+ });
+ };
+
+ return (
+ <ContentPage
+ headerTitle={title}
+ headerSubtitle={subtitle}
+ Breadcrumbs={OrganizationProfileBreadcrumbs}
+ >
+ <Form.Root onSubmit={onSubmit}>
+ <Form.ControlRow elementId={nameField.id}>
+ <Form.Control
+ {...nameField.props}
+ autoFocus
+ required
+ />
+ </Form.ControlRow>
+ <FormButtons isDisabled={!canSubmit} />
+ </Form.Root>
+ </ContentPage>
+ );
+});

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

@@ -0,0 +1,133 @@
+import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
+import type { OrganizationDomainVerificationStatus } from '@clerk/types';
+import React, { useMemo } from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { Badge, Box, Col, descriptors, Spinner } from '../../customizables';
+import { ArrowBlockButton } from '../../elements';
+import { useInView } from '../../hooks';
+import { useRouter } from '../../router';
+
+type DomainListProps = GetDomainsParams & {
+ verificationStatus?: OrganizationDomainVerificationStatus;
+ enrollmentMode?: OrganizationEnrollmentMode;
+ /**
+ * Enables internal links to navigate to the correct page
+ * based on when this component is used
+ */
+ redirectSubPath: string;
+ fallback?: React.ReactNode;
+};
+
+export const DomainList = (props: DomainListProps) => {
+ const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
+ const { organization, membership, domains } = useCoreOrganization({
+ domains: {
+ infinite: true,
+ ...rest,
+ },
+ });
+
+ const { ref } = useInView({
+ threshold: 0,
+ onChange: inView => {
+ if (inView) {
+ void domains?.fetchNext?.();
+ }
+ },
+ });
+ const { navigate } = useRouter();
+
+ const isAdmin = membership?.role === 'admin';
+
+ const domainList = useMemo(() => {
+ if (!domains?.data) {
+ return [];
+ }
+
+ return domains.data.filter(d => {
+ let matchesStatus = true;
+ let matchesMode = true;
+ if (verificationStatus) {
+ matchesStatus = !!d.verification && d.verification.status === verificationStatus;
+ }
+ if (enrollmentMode) {
+ matchesMode = d.enrollmentMode === enrollmentMode;
+ }
+
+ return matchesStatus && matchesMode;
+ });
+ }, [domains?.data]);
+
+ if (!organization || !isAdmin) {
+ return null;
+ }
+
+ // TODO: Split this to smaller components
+ return (
+ <Col>
+ {domainList.length === 0 && !domains?.isLoading && fallback}
+ {domainList.map(d => (
+ <ArrowBlockButton
+ key={d.id}
+ elementDescriptor={descriptors.accordionTriggerButton}
+ variant='ghost'
+ colorScheme='neutral'
+ badge={
+ !verificationStatus ? (
+ d.verification && d.verification.status === 'verified' ? (
+ <Badge textVariant={'extraSmallRegular'}>Verified</Badge>
+ ) : (
+ <Badge
+ textVariant={'extraSmallRegular'}
+ colorScheme={'warning'}
+ >
+ Unverified
+ </Badge>
+ )
+ ) : undefined
+ }
+ sx={t => ({
+ padding: `${t.space.$3} ${t.space.$4}`,
+ minHeight: t.sizes.$10,
+ })}
+ onClick={() => {
+ d.verification && d.verification.status === 'verified'
+ ? void navigate(`${redirectSubPath}${d.id}`)
+ : void navigate(`${redirectSubPath}${d.id}/verify`);
+ }}
+ >
+ {d.name}
+ </ArrowBlockButton>
+ ))}
+ {(domains?.hasNextPage || domains?.isFetching) && (
+ <Box
+ ref={domains?.isFetching ? undefined : ref}
+ sx={[
+ t => ({
+ width: '100%',
+ height: t.space.$10,
+ position: 'relative',
+ }),
+ ]}
+ >
+ <Box
+ sx={{
+ display: 'flex',
+ margin: 'auto',
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateY(-50%) translateX(-50%)',
+ }}
+ >
+ <Spinner
+ size='md'
+ colorScheme='primary'
+ />
+ </Box>
+ </Box>
+ )}
+ </Col>
+ );
+};

.changeset/nervous-lizards-repeat.md

@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduces domains and invitations in <OrganizationProfile />
+
+- The "Members" page now accommodates Domain and Individual invitations 
+- The "Settings" page allows for the addition, edit and removal of a domain

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

@@ -37,7 +37,7 @@ export class OrganizationDomain extends BaseResource implements OrganizationDoma
  return new OrganizationDomain(json);
  }
 
-prepareDomainAffiliationVerification = async (
+prepareAffiliationVerification = async (
  params: PrepareAffiliationVerificationParams,
  ): Promise<OrganizationDomainResource> => {
  return this._basePost({

packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap

@@ -10,7 +10,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": null,
 }
@@ -26,7 +26,7 @@ OrganizationDomain {
  "name": "clerk.dev",
  "organizationId": "test_org_id",
  "pathRoot": "",
- "prepareDomainAffiliationVerification": [Function],
+ "prepareAffiliationVerification": [Function],
  "update": [Function],
  "verification": {
  "attempts": 1,

packages/clerk-js/src/ui/common/CalloutWithAction.tsx

@@ -0,0 +1,47 @@
+import type { MouseEvent } from 'react';
+
+import { Col, Flex, Link, Text } from '../customizables';
+import type { LocalizationKey } from '../localization';
+
+type CalloutWithActionProps = {
+ text: LocalizationKey;
+ actionLabel?: LocalizationKey;
+ onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<any>;
+};
+export const CalloutWithAction = (props: CalloutWithActionProps) => {
+ const { text, actionLabel, onClick: onClickProp } = props;
+
+ const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+ if (onClickProp) {
+ void onClickProp?.(e);
+ }
+ };
+
+ return (
+ <Flex
+ sx={theme => ({
+ background: theme.colors.$blackAlpha50,
+ padding: theme.space.$4,
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ borderRadius: theme.radii.$md,
+ })}
+ >
+ <Col gap={4}>
+ <Text
+ sx={t => ({
+ lineHeight: t.lineHeights.$tall,
+ })}
+ localizationKey={text}
+ />
+
+ <Link
+ colorScheme={'primary'}
+ variant='regularMedium'
+ localizationKey={actionLabel}
+ onClick={onClick}
+ />
+ </Col>
+ </Flex>
+ );
+};

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

@@ -1,5 +1,6 @@
 export * from './BlockButtons';
 export * from './constants';
+export * from './CalloutWithAction';
 export * from './forms';
 export * from './redirects';
 export * from './verification';
@@ -10,5 +11,6 @@ export * from './EmailLinkStatusCard';
 export * from './Wizard';
 export * from './RemoveResourcePage';
 export * from './PrintableComponent';
+export * from './RemoveResourcePage';
 export * from './withOrganizationsEnabledGuard';
 export * from './QRCode';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const AddDomainPage = withCardStateProvider(() => {
+ const title = localizationKeys('organizationProfile.createDomainPage.title');
+ const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
+ const card = useCardState();
+ const { organization } = useCoreOrganization();
+ const { navigate } = useRouter();
+
+ const nameField = useFormControl('name', '', {
+ type: 'text',
+ label: localizationKeys('formFieldLabel__organizationEmailDomain'),
+ placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'),
+ });
+
+ if (!organization) {
+ return null;
+ }
+
+ const canSubmit = organization.name !== nameField.value;
+
+ const onSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ return organization
+ .createDomain(nameField.value)
+ .then(res => {
+ if (res.verification && res.verification.status === 'verified') {
+ return navigate(`../domain/${res.id}`);
+ }
+ return navigate(`../domain/${res.id}/verify`);
+ })
+ .catch(err => {
+ handleError(err, [nameField], card.setError);
+ });
+ };
+
+ return (
+ <ContentPage
+ headerTitle={title}
+ headerSubtitle={subtitle}
+ Breadcrumbs={OrganizationProfileBreadcrumbs}
+ >
+ <Form.Root onSubmit={onSubmit}>
+ <Form.ControlRow elementId={nameField.id}>
+ <Form.Control
+ {...nameField.props}
+ autoFocus
+ required
+ />
+ </Form.ControlRow>
+ <FormButtons isDisabled={!canSubmit} />
+ </Form.Root>
+ </ContentPage>
+ );
+});

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

@@ -0,0 +1,133 @@
+import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
+import type { OrganizationDomainVerificationStatus } from '@clerk/types';
+import React, { useMemo } from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { Badge, Box, Col, descriptors, Spinner } from '../../customizables';
+import { ArrowBlockButton } from '../../elements';
+import { useInView } from '../../hooks';
+import { useRouter } from '../../router';
+
+type DomainListProps = GetDomainsParams & {
+ verificationStatus?: OrganizationDomainVerificationStatus;
+ enrollmentMode?: OrganizationEnrollmentMode;
+ /**
+ * Enables internal links to navigate to the correct page
+ * based on when this component is used
+ */
+ redirectSubPath: string;
+ fallback?: React.ReactNode;
+};
+
+export const DomainList = (props: DomainListProps) => {
+ const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
+ const { organization, membership, domains } = useCoreOrganization({
+ domains: {
+ infinite: true,
+ ...rest,
+ },
+ });
+
+ const { ref } = useInView({
+ threshold: 0,
+ onChange: inView => {
+ if (inView) {
+ void domains?.fetchNext?.();
+ }
+ },
+ });
+ const { navigate } = useRouter();
+
+ const isAdmin = membership?.role === 'admin';
+
+ const domainList = useMemo(() => {
+ if (!domains?.data) {
+ return [];
+ }
+
+ return domains.data.filter(d => {
+ let matchesStatus = true;
+ let matchesMode = true;
+ if (verificationStatus) {
+ matchesStatus = !!d.verification && d.verification.status === verificationStatus;
+ }
+ if (enrollmentMode) {
+ matchesMode = d.enrollmentMode === enrollmentMode;
+ }
+
+ return matchesStatus && matchesMode;
+ });
+ }, [domains?.data]);
+
+ if (!organization || !isAdmin) {
+ return null;
+ }
+
+ // TODO: Split this to smaller components
+ return (
+ <Col>
+ {domainList.length === 0 && !domains?.isLoading && fallback}
+ {domainList.map(d => (
+ <ArrowBlockButton
+ key={d.id}
+ elementDescriptor={descriptors.accordionTriggerButton}
+ variant='ghost'
+ colorScheme='neutral'
+ badge={
+ !verificationStatus ? (
+ d.verification && d.verification.status === 'verified' ? (
+ <Badge textVariant={'extraSmallRegular'}>Verified</Badge>
+ ) : (
+ <Badge
+ textVariant={'extraSmallRegular'}
+ colorScheme={'warning'}
+ >
+ Unverified
+ </Badge>
+ )
+ ) : undefined
+ }
+ sx={t => ({
+ padding: `${t.space.$3} ${t.space.$4}`,
+ minHeight: t.sizes.$10,
+ })}
+ onClick={() => {
+ d.verification && d.verification.status === 'verified'
+ ? void navigate(`${redirectSubPath}${d.id}`)
+ : void navigate(`${redirectSubPath}${d.id}/verify`);
+ }}
+ >
+ {d.name}
+ </ArrowBlockButton>
+ ))}
+ {(domains?.hasNextPage || domains?.isFetching) && (
+ <Box
+ ref={domains?.isFetching ? undefined : ref}
+ sx={[
+ t => ({
+ width: '100%',
+ height: t.space.$10,
+ position: 'relative',
+ }),
+ ]}
+ >
+ <Box
+ sx={{
+ display: 'flex',
+ margin: 'auto',
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateY(-50%) translateX(-50%)',
+ }}
+ >
+ <Spinner
+ size='md'
+ colorScheme='primary'
+ />
+ </Box>
+ </Box>
+ )}
+ </Col>
+ );
+};