From 6d9186f303bd9244929eb2fa4046606a08eb0a7e Mon Sep 17 00:00:00 2001
From: Haris Chaniotakis <haris@clerk.dev>
Date: Mon, 2 Oct 2023 11:25:56 +0300
Subject: [PATCH 1/2] feat(types,clerk-js): Introduce user method to leave an
 organization

Introduce a new leaveOrganization() method on the User resource, which you can
use in order to leave an organization as a user.
---
 .changeset/early-tigers-report.md            |  6 ++++++
 packages/clerk-js/src/core/resources/User.ts | 11 +++++++++++
 packages/types/src/user.ts                   |  1 +
 3 files changed, 18 insertions(+)
 create mode 100644 .changeset/early-tigers-report.md

diff --git a/.changeset/early-tigers-report.md b/.changeset/early-tigers-report.md
new file mode 100644
index 0000000000..4d8031cd70
--- /dev/null
+++ b/.changeset/early-tigers-report.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Introduce a new user resource method to leave an organization. You can now call 'user.leaveOrganization(<org_id>)' when a user chooses to leave an organization instead of 'organization.removeMember(<user_id>)' which is mostly meant for organization based actions.
diff --git a/packages/clerk-js/src/core/resources/User.ts b/packages/clerk-js/src/core/resources/User.ts
index eab0bdd37c..8c46dca10a 100644
--- a/packages/clerk-js/src/core/resources/User.ts
+++ b/packages/clerk-js/src/core/resources/User.ts
@@ -270,6 +270,17 @@ export class User extends BaseResource implements UserResource {
   getOrganizationMemberships: GetOrganizationMemberships = retrieveMembership =>
     OrganizationMembership.retrieve(retrieveMembership);
 
+  leaveOrganization = async (organizationId: string): Promise<DeletedObjectResource> => {
+    const json = (
+      await BaseResource._fetch<DeletedObjectJSON>({
+        path: `${this.path()}/organization_memberships/${organizationId}`,
+        method: 'DELETE',
+      })
+    )?.response as unknown as DeletedObjectJSON;
+
+    return new DeletedObject(json);
+  };
+
   get verifiedExternalAccounts() {
     return this.externalAccounts.filter(externalAccount => externalAccount.verification?.status == 'verified');
   }
diff --git a/packages/types/src/user.ts b/packages/types/src/user.ts
index bea8d4aa09..169b9af2fe 100644
--- a/packages/types/src/user.ts
+++ b/packages/types/src/user.ts
@@ -108,6 +108,7 @@ export interface UserResource extends ClerkResource {
   getOrganizationSuggestions: (
     params?: GetUserOrganizationSuggestionsParams,
   ) => Promise<ClerkPaginatedResponse<OrganizationSuggestionResource>>;
+  leaveOrganization: (organizationId: string) => Promise<DeletedObjectResource>;
   createTOTP: () => Promise<TOTPResource>;
   verifyTOTP: (params: VerifyTOTPParams) => Promise<TOTPResource>;
   disableTOTP: () => Promise<DeletedObjectResource>;

From f91e3d668e679d8ebb88d99c9432de66a8152226 Mon Sep 17 00:00:00 2001
From: Haris Chaniotakis <haris@clerk.dev>
Date: Mon, 2 Oct 2023 11:27:52 +0300
Subject: [PATCH 2/2] chore(clerk-js): Use the new user.leaveOrganization()
 method in <OrgProfile /> when leaving an org

We replace the usage of the old 'organization.removeMember()' method with
the new one we recently introduced, in the <OrgProfile /> component when
a user chooses to leave the current organization
---
 .changeset/shaggy-bottles-worry.md                     |  2 ++
 .../OrganizationProfile/ActionConfirmationPage.tsx     | 10 +++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/shaggy-bottles-worry.md

diff --git a/.changeset/shaggy-bottles-worry.md b/.changeset/shaggy-bottles-worry.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/shaggy-bottles-worry.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
index 3b1fde4c20..ceb303314e 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -17,15 +17,15 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 export const LeaveOrganizationPage = () => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
-  const { organization, membership } = useCoreOrganization();
+  const { organization } = useCoreOrganization();
   const user = useCoreUser();
 
-  if (!organization || !membership) {
+  if (!organization) {
     return null;
   }
 
   const leave = () => {
-    return card.runAsync(organization.removeMember(user.id)).then(navigateAfterLeaveOrganization);
+    return card.runAsync(user.leaveOrganization(organization.id)).then(navigateAfterLeaveOrganization);
   };
 
   return (
@@ -50,9 +50,9 @@ export const LeaveOrganizationPage = () => {
 export const DeleteOrganizationPage = () => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
-  const { organization, membership } = useCoreOrganization();
+  const { organization } = useCoreOrganization();
 
-  if (!organization || !membership) {
+  if (!organization) {
     return null;
   }