feat(clerk-js): Add list of suggestions in OrganizationSwitcher

.changeset/thin-moles-obey.md

@@ -0,0 +1,9 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+'@clerk/types': patch
+---
+
+Introduces list of suggestions within <OrganizationSwitcher/>
++ Users can request to join a suggested organization

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

@@ -26,6 +26,10 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
   const enrollmentMode = useFormControl('enrollmentMode', '', {
     type: 'radio',
     radioOptions: [
+      {
+        value: 'automatic_suggestion',
+        label: 'Automatic suggestion',
+      },
       {
         value: 'automatic_invitation',
         // TODO: Add labels

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

@@ -12,10 +12,16 @@ const _OrganizationSwitcher = withFloatingTree(() => {
     offset: 8,
   });
 
+  /**
+   * Prefetch user invitations and suggestions
+   */
   useCoreOrganizationList({
     userInvitations: {
       infinite: true,
     },
+    userSuggestions: {
+      infinite: true,
+    },
   });
 
   return (

packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx

@@ -7,6 +7,7 @@ import { Action, SecondaryActions } from '../../elements';
 import { UserInvitationList } from './UserInvitationList';
 import type { UserMembershipListProps } from './UserMembershipList';
 import { UserMembershipList } from './UserMembershipList';
+import { UserSuggestionList } from './UserSuggestionList';
 
 export interface OrganizationActionListProps extends UserMembershipListProps {
   onCreateOrganizationClick: React.MouseEventHandler;
@@ -45,6 +46,7 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
     <SecondaryActions elementDescriptor={descriptors.organizationSwitcherPopoverActions}>
       <UserMembershipList {...{ onPersonalWorkspaceClick, onOrganizationClick }} />
       <UserInvitationList />
+      <UserSuggestionList />
       <CreateOrganizationButton {...{ onCreateOrganizationClick }} />
     </SecondaryActions>
   );

packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationList.tsx

@@ -117,16 +117,15 @@ const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource
   };
 
   return (
-    <>
-      <Button
-        elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
-        textVariant='buttonExtraSmallBold'
-        variant='solid'
-        isLoading={card.isLoading}
-        onClick={handleAccept}
-        localizationKey={localizationKeys('organizationSwitcher.invitationAccept')}
-      />
-    </>
+    <Button
+      elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
+      textVariant='buttonExtraSmallBold'
+      variant='solid'
+      size='sm'
+      isLoading={card.isLoading}
+      onClick={handleAccept}
+      localizationKey={localizationKeys('organizationSwitcher.invitationAccept')}
+    />
   );
 };
 

packages/clerk-js/src/ui/components/OrganizationSwitcher/UserSuggestionList.tsx

@@ -0,0 +1,154 @@
+import type { OrganizationSuggestionResource } from '@clerk/types';
+
+import { useCoreOrganizationList } from '../../contexts';
+import { Box, Button, descriptors, Flex, localizationKeys, Spinner, Text } from '../../customizables';
+import { OrganizationPreview, useCardState, withCardStateProvider } from '../../elements';
+import { useInView } from '../../hooks';
+import { common } from '../../styledSystem';
+import { handleError } from '../../utils';
+
+export const UserSuggestionList = () => {
+  const { userSuggestions } = useCoreOrganizationList({
+    userSuggestions: {
+      infinite: true,
+    },
+  });
+
+  const { ref } = useInView({
+    threshold: 0,
+    onChange: inView => {
+      if (inView) {
+        userSuggestions.fetchNext?.();
+      }
+    },
+  });
+
+  if ((userSuggestions.count ?? 0) === 0) {
+    return null;
+  }
+
+  return (
+    <Flex
+      direction='col'
+      elementDescriptor={descriptors.organizationSwitcherPopoverInvitationActions}
+    >
+      <Text
+        variant='smallRegular'
+        sx={t => ({
+          minHeight: 'unset',
+          height: t.space.$12,
+          padding: `${t.space.$3} ${t.space.$6}`,
+          display: 'flex',
+          alignItems: 'center',
+        })}
+        // Handle plurals
+        localizationKey={localizationKeys(
+          (userSuggestions.count ?? 0) > 1
+            ? 'organizationSwitcher.suggestionCountLabel_many'
+            : 'organizationSwitcher.suggestionCountLabel_single',
+          {
+            count: userSuggestions.count,
+          },
+        )}
+      />
+      <Box
+        sx={t => ({
+          maxHeight: `calc(4 * ${t.sizes.$12})`,
+          overflowY: 'auto',
+          ...common.unstyledScrollbar(t),
+        })}
+      >
+        {userSuggestions?.data?.map(inv => {
+          return (
+            <SuggestionPreview
+              key={inv.id}
+              {...inv}
+            />
+          );
+        })}
+
+        {(userSuggestions.hasNextPage || userSuggestions.isFetching) && (
+          <Box
+            ref={ref}
+            sx={t => ({
+              width: '100%',
+              height: t.space.$12,
+              position: 'relative',
+            })}
+          >
+            <Box
+              sx={{
+                margin: 'auto',
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translateY(-50%) translateX(-50%)',
+              }}
+            >
+              <Spinner
+                size='md'
+                colorScheme='primary'
+              />
+            </Box>
+          </Box>
+        )}
+      </Box>
+    </Flex>
+  );
+};
+
+const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) => {
+  const card = useCardState();
+  const { userSuggestions } = useCoreOrganizationList({
+    userSuggestions: {
+      infinite: true,
+    },
+  });
+
+  const mutateSwrState = () => {
+    (userSuggestions as any)?.unstable__mutate?.();
+  };
+
+  const handleAccept = () => {
+    return card
+      .runAsync(props.accept())
+      .then(mutateSwrState)
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  return (
+    <Button
+      elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
+      textVariant='buttonExtraSmallBold'
+      variant='solid'
+      size='sm'
+      isLoading={card.isLoading}
+      onClick={handleAccept}
+      localizationKey={localizationKeys('organizationSwitcher.suggestionsAccept')}
+    />
+  );
+};
+
+const SuggestionPreview = withCardStateProvider((props: OrganizationSuggestionResource) => {
+  return (
+    <Flex
+      align='center'
+      gap={2}
+      sx={t => ({
+        minHeight: 'unset',
+        height: t.space.$12,
+        justifyContent: 'space-between',
+        padding: `0 ${t.space.$6}`,
+      })}
+    >
+      <OrganizationPreview
+        elementId='organizationSwitcher'
+        avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
+        organization={props.publicOrganizationData}
+        size='sm'
+      />
+
+      <AcceptRejectSuggestionButtons {...props} />
+    </Flex>
+  );
+});

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

@@ -27,7 +27,7 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
       elementId={descriptors.organizationPreview.setId(elementId)}
       gap={4}
       align='center'
-      sx={[{ minWidth: '0px', width: '100%' }, sx]}
+      sx={[{ minWidth: '0' }, sx]}
       {...rest}
     >
       <Flex

packages/clerk-js/src/ui/primitives/Button.tsx

@@ -31,6 +31,10 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       size: {
         iconLg: { minHeight: theme.sizes.$14, width: theme.sizes.$14 },
         xs: { minHeight: theme.sizes.$1x5, padding: `${theme.space.$1x5} ${theme.space.$1x5}` },
+        sm: {
+          minHeight: theme.sizes.$8,
+          padding: `${theme.space.$2} ${theme.space.$3x5}`,
+        },
         md: {
           minHeight: theme.sizes.$9,
           padding: `${theme.space.$2x5} ${theme.space.$5}`,
@@ -131,7 +135,6 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
     },
   };
 });
-
 type OwnProps = PrimitiveProps<'button'> & {
   isLoading?: boolean;
   loadingText?: string;

packages/localizations/src/en-US.ts

@@ -530,6 +530,9 @@ export const enUS: LocalizationResource = {
     invitationCountLabel_single: '1 pending invitation to join:',
     invitationCountLabel_many: '{{count}} pending invitations to join:',
     invitationAccept: 'Join',
+    suggestionCountLabel_single: '1 suggested organization:',
+    suggestionCountLabel_many: '{{count}} suggested organizations:',
+    suggestionsAccept: 'Request to join',
   },
   impersonationFab: {
     title: 'Signed in as {{identifier}}',

packages/types/src/json.ts

@@ -364,7 +364,7 @@ export interface OrganizationDomainJSON extends ClerkResourceJSON {
   updated_at: number;
 }
 
-export interface PublicOrganizationDataJSON extends ClerkResourceJSON {
+export interface PublicOrganizationDataJSON {
   id: string;
   name: string;
   slug: string | null;
@@ -381,6 +381,15 @@ export interface OrganizationSuggestionJSON extends ClerkResourceJSON {
   updated_at: number;
 }
 
+export interface OrganizationSuggestionJSON extends ClerkResourceJSON {
+  object: 'organization_suggestion';
+  id: string;
+  public_organization_data: PublicOrganizationDataJSON;
+  status: OrganizationSuggestionStatus;
+  created_at: number;
+  updated_at: number;
+}
+
 export interface OrganizationMembershipRequestJSON extends ClerkResourceJSON {
   object: 'organization_membership_request';
   id: string;

packages/types/src/localization.ts

@@ -551,6 +551,9 @@ type _LocalizationResource = {
     invitationCountLabel_single: LocalizationValue;
     invitationCountLabel_many: LocalizationValue;
     invitationAccept: LocalizationValue;
+    suggestionCountLabel_single: LocalizationValue;
+    suggestionCountLabel_many: LocalizationValue;
+    suggestionsAccept: LocalizationValue;
   };
   impersonationFab: {
     title: LocalizationValue;