From e0d8bfa229dc85b7c1550ea56a5fe5072759363f Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 10 Aug 2023 21:12:25 +0300
Subject: [PATCH 1/5] feat(clerk-js): Add list of suggestions in
 OrganizationSwitcher

---
 .../OrganizationSwitcher.tsx                  |   6 +
 .../OtherOrganizationActions.tsx              |   2 +
 .../UserSuggestionList.tsx                    | 153 ++++++++++++++++++
 packages/localizations/src/en-US.ts           |   3 +
 packages/types/src/localization.ts            |   3 +
 5 files changed, 167 insertions(+)
 create mode 100644 packages/clerk-js/src/ui/components/OrganizationSwitcher/UserSuggestionList.tsx

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx
index b3187127360..f959c37f0c9 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx
+++ b/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 (
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
index 1acae816509..172f0b8b9f6 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
+++ b/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>
   );
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserSuggestionList.tsx
new file mode 100644
index 00000000000..0a685e534f5
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserSuggestionList.tsx
@@ -0,0 +1,153 @@
+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'
+      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>
+  );
+});
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 97f4282eae0..260cef24595 100644
--- a/packages/localizations/src/en-US.ts
+++ b/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}}',
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
index 6f2ae449c90..b8f5a01a791 100644
--- a/packages/types/src/localization.ts
+++ b/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;

From d2851551da044853446e41d1c9d47328d0872012 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 10 Aug 2023 21:14:34 +0300
Subject: [PATCH 2/5] feat(clerk-js): Create a "small" size button

---
 .../UserInvitationList.tsx                    | 19 +++++++++----------
 .../UserSuggestionList.tsx                    |  1 +
 .../src/ui/elements/OrganizationPreview.tsx   |  2 +-
 .../clerk-js/src/ui/primitives/Button.tsx     |  5 ++++-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationList.tsx
index 966640ffe5f..b175e26a60d 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationList.tsx
+++ b/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')}
+    />
   );
 };
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserSuggestionList.tsx
index 0a685e534f5..0bf6948d45c 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserSuggestionList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserSuggestionList.tsx
@@ -121,6 +121,7 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
       elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
       textVariant='buttonExtraSmallBold'
       variant='solid'
+      size='sm'
       isLoading={card.isLoading}
       onClick={handleAccept}
       localizationKey={localizationKeys('organizationSwitcher.suggestionsAccept')}
diff --git a/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx b/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx
index 7036e34df19..6c155fa8688 100644
--- a/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx
+++ b/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
diff --git a/packages/clerk-js/src/ui/primitives/Button.tsx b/packages/clerk-js/src/ui/primitives/Button.tsx
index 21f6a002cbf..6fdc5ceafee 100644
--- a/packages/clerk-js/src/ui/primitives/Button.tsx
+++ b/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;

From 91b8faf1ffab1e0aa78ad890c7c011ac6a9d863d Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 10 Aug 2023 21:27:30 +0300
Subject: [PATCH 3/5] feat(clerk-js): Allow `automatic_suggestion` to be set
 for a verified domain

---
 .../ui/components/OrganizationProfile/VerifiedDomainPage.tsx  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx
index 6d3725f55e0..b2d84e9ef5a 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx
+++ b/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

From 304fe9d85c6e6575336a071d703c50bfa21f0c22 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 10 Aug 2023 21:29:28 +0300
Subject: [PATCH 4/5] chore(clerk-js): Add changeset

---
 .changeset/thin-moles-obey.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/thin-moles-obey.md

diff --git a/.changeset/thin-moles-obey.md b/.changeset/thin-moles-obey.md
new file mode 100644
index 00000000000..5e154ea690b
--- /dev/null
+++ b/.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

From 2497c3a62e147baa2ff594334eed68b0fca9bd8c Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 11 Aug 2023 10:43:00 +0300
Subject: [PATCH 5/5] fix(types): PublicOrganizationDataJSON should not extend
 ClerkResourceJSON

---
 packages/types/src/json.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/types/src/json.ts b/packages/types/src/json.ts
index 13a47b46a99..e08541fe07f 100644
--- a/packages/types/src/json.ts
+++ b/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;