feat (sdk): add member remove confirm dialog

sdks/js/packages/core/react/components/organization/members/MemberRemoveConfirm.tsx

@@ -0,0 +1,64 @@
+import {
+    Flex,
+    Text,
+    Dialog,
+    Button,
+    Separator,
+    Image
+  } from '@raystack/apsara';
+  import cross from '~/react/assets/cross.svg';
+
+const MemberRemoveConfirm = ({ isOpen, setIsOpen, deleteMember, isLoading }: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  deleteMember: () => void;
+  isLoading: boolean;
+}) => {
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen} >
+      <Dialog.Content style={{ padding: 0, maxWidth: '400px', width: '100%', zIndex: '60' }}>
+        <Flex justify="between" style={{ padding: '16px 24px' }}>
+          <Text size={6} style={{ fontWeight: '500' }}>
+            Remove member?
+          </Text>
+          <Image
+            alt="cross"
+            src={cross}
+            onClick={() => isLoading ? null : setIsOpen(false)}
+            style={{ cursor: isLoading ? 'not-allowed' : 'pointer' }}
+            data-test-id="close-remove-member-dialog"
+          />
+        </Flex>
+        <Separator />
+        <Flex direction="column" gap="medium" style={{ padding: '24px' }}>
+          <Text size={4}>
+            Are you sure you want to remove this member from the organization?
+          </Text>
+        </Flex>
+        <Separator />
+        <Flex justify="end" style={{ padding: 'var(--pd-16)' }} gap="medium">
+          <Button
+            size="medium"
+            variant="secondary"
+            onClick={() => setIsOpen(false)}
+            data-test-id="cancel-remove-member-dialog"
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            size="medium"
+            variant="danger"
+            onClick={deleteMember}
+            data-test-id="confirm-remove-member-dialog"
+            disabled={isLoading}
+          >
+            {isLoading ? 'Removing...' : 'Remove'}
+          </Button>
+        </Flex>
+      </Dialog.Content>
+    </Dialog>
+  )
+}
+
+export default MemberRemoveConfirm

sdks/js/packages/core/react/components/organization/members/member.columns.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   DotsHorizontalIcon,
   TrashIcon,
@@ -9,7 +10,7 @@ import {
   DropdownMenu,
   Flex,
   Label,
-  Text
+  Text,
 } from '@raystack/apsara';
 import { useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
@@ -22,6 +23,7 @@ import {
 } from '~/src';
 import { Role } from '~/src/types';
 import { differenceWith, getInitials, isEqualById } from '~/utils';
+import MemberRemoveConfirm from './MemberRemoveConfirm';
 import styles from '../organization.module.css';
 
 export const getColumns = (
@@ -135,8 +137,11 @@ const MembersActions = ({
 }) => {
   const { client } = useFrontier();
   const navigate = useNavigate({ from: '/members' });
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   async function deleteMember() {
+    setIsLoading(true);
     try {
       // @ts-ignore
       if (member?.invited) {
@@ -157,6 +162,9 @@ const MembersActions = ({
       toast.error('Something went wrong', {
         description: error.message
       });
+    } finally {
+      setIsConfirmOpen(false);
+      setIsLoading(false);
     }
   }
   async function updateRole(role: V1Beta1Role) {
@@ -191,37 +199,45 @@ const MembersActions = ({
   }
 
   return canUpdateGroup ? (
-    <DropdownMenu style={{ padding: '0 !important' }}>
-      <DropdownMenu.Trigger asChild style={{ cursor: 'pointer' }}>
-        <DotsHorizontalIcon />
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content align="end">
-        <DropdownMenu.Group style={{ padding: 0 }}>
-          {excludedRoles.map((role: V1Beta1Role) => (
-            <DropdownMenu.Item style={{ padding: 0 }} key={role.id}>
+    <>
+      <DropdownMenu style={{ padding: '0 !important' }}>
+        <DropdownMenu.Trigger asChild style={{ cursor: 'pointer' }}>
+          <DotsHorizontalIcon />
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end">
+          <DropdownMenu.Group style={{ padding: 0 }}>
+            {excludedRoles.map((role: V1Beta1Role) => (
+              <DropdownMenu.Item style={{ padding: 0 }} key={role.id}>
+                <div
+                  onClick={() => updateRole(role)}
+                  className={styles.dropdownActionItem}
+                  data-test-id={`update-role-${role?.name}-dropdown-item`}
+                >
+                  <UpdateIcon />
+                  Make {role.title}
+                </div>
+              </DropdownMenu.Item>
+            ))}
+
+            <DropdownMenu.Item style={{ padding: 0 }}>
               <div
-                onClick={() => updateRole(role)}
+                onClick={() => setIsConfirmOpen(true)}
                 className={styles.dropdownActionItem}
-                data-test-id={`update-role-${role?.name}-dropdown-item`}
+                data-test-id="remove-member-dropdown-item"
               >
-                <UpdateIcon />
-                Make {role.title}
+                <TrashIcon />
+                Remove
               </div>
             </DropdownMenu.Item>
-          ))}
-
-          <DropdownMenu.Item style={{ padding: 0 }}>
-            <div
-              onClick={deleteMember}
-              className={styles.dropdownActionItem}
-              data-test-id="remove-member-dropdown-item"
-            >
-              <TrashIcon />
-              Remove
-            </div>
-          </DropdownMenu.Item>
-        </DropdownMenu.Group>
-      </DropdownMenu.Content>
-    </DropdownMenu>
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+      <MemberRemoveConfirm
+        isOpen={isConfirmOpen}
+        setIsOpen={setIsConfirmOpen}
+        deleteMember={deleteMember}
+        isLoading={isLoading}
+      />
+    </>
   ) : null;
 };