add benefit eligibility setting to HR members

packages/features/team-accounts/src/components/members/account-members-table.tsx

@@ -25,6 +25,7 @@ import { Trans } from '@kit/ui/trans';
 import { RemoveMemberDialog } from './remove-member-dialog';
 import { RoleBadge } from './role-badge';
 import { TransferOwnershipDialog } from './transfer-ownership-dialog';
+import UpdateEmployeeBenefitDialog from './update-employee-benefit-dialog';
 import { UpdateMemberRoleDialog } from './update-member-role-dialog';
 
 type Members =
@@ -34,6 +35,7 @@ interface Permissions {
   canUpdateRole: (roleHierarchy: number) => boolean;
   canRemoveFromAccount: (roleHierarchy: number) => boolean;
   canTransferOwnership: boolean;
+  canUpdateBenefit: boolean;
 }
 
 type AccountMembersTableProps = {
@@ -43,6 +45,7 @@ type AccountMembersTableProps = {
   userRoleHierarchy: number;
   isPrimaryOwner: boolean;
   canManageRoles: boolean;
+  canUpdateBenefit: boolean;
   membersBenefitsUsage: {
     personal_account_id: string;
     benefit_amount: number;
@@ -57,6 +60,7 @@ export function AccountMembersTable({
   isPrimaryOwner,
   userRoleHierarchy,
   canManageRoles,
+  canUpdateBenefit,
   membersBenefitsUsage,
 }: AccountMembersTableProps) {
   const [search, setSearch] = useState('');
@@ -74,6 +78,7 @@ export function AccountMembersTable({
       );
     },
     canTransferOwnership: isPrimaryOwner,
+    canUpdateBenefit,
   };
 
   const columns = useGetColumns(permissions, {
@@ -211,8 +216,7 @@ function useGetColumns(
       {
         header: t('roleLabel'),
         cell: ({ row }) => {
-          const { role, primary_owner_user_id, user_id } = row.original;
-          const isPrimaryOwner = primary_owner_user_id === user_id;
+          const { role } = row.original;
 
           return (
             <span
@@ -265,6 +269,7 @@ function ActionsDropdown({
   const [isRemoving, setIsRemoving] = useState(false);
   const [isTransferring, setIsTransferring] = useState(false);
   const [isUpdatingRole, setIsUpdatingRole] = useState(false);
+  const [isUpdatingBenefit, setIsUpdatingBenefit] = useState(false);
 
   const isCurrentUser = member.user_id === currentUserId;
   const isPrimaryOwner = member.primary_owner_user_id === member.user_id;
@@ -316,6 +321,12 @@ function ActionsDropdown({
               <Trans i18nKey={'teams:removeMember'} />
             </DropdownMenuItem>
           </If>
+
+          <If condition={permissions.canUpdateBenefit}>
+            <DropdownMenuItem onClick={() => setIsUpdatingBenefit(true)}>
+              <Trans i18nKey={'teams:updateBenefit'} />
+            </DropdownMenuItem>
+          </If>
         </DropdownMenuContent>
       </DropdownMenu>
 
@@ -348,6 +359,16 @@ function ActionsDropdown({
           userId={member.user_id}
         />
       </If>
+
+      <If condition={isUpdatingBenefit}>
+        <UpdateEmployeeBenefitDialog
+          isOpen
+          setIsOpen={setIsUpdatingBenefit}
+          accountId={member.account_id}
+          userId={member.user_id}
+          isEligibleForBenefits={member.is_eligible_for_benefits}
+        />
+      </If>
     </>
   );
 }

packages/features/team-accounts/src/components/members/update-employee-benefit-dialog.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Alert, AlertDescription } from '@kit/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import { updateEmployeeBenefitAction } from '../../server/actions/team-members-server-actions';
+
+const UpdateEmployeeBenefitDialog = ({
+  isOpen,
+  setIsOpen,
+  accountId,
+  userId,
+  isEligibleForBenefits,
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  accountId: string;
+  userId: string;
+  isEligibleForBenefits: boolean;
+}) => {
+  const router = useRouter();
+  const [isSubmitting, startTransition] = useTransition();
+  const [error, setError] = useState<boolean>();
+  const updateEmployeeBenefit = () => {
+    startTransition(async () => {
+      try {
+        await updateEmployeeBenefitAction({ accountId, userId });
+
+        setIsOpen(false);
+
+        router.refresh();
+      } catch {
+        setError(true);
+      }
+    });
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            <Trans i18nKey="team:updateBenefitHeading" />
+          </AlertDialogTitle>
+
+          <AlertDialogDescription>
+            {isEligibleForBenefits ? (
+              <Trans i18nKey="team:removeBenefitDescription" />
+            ) : (
+              <Trans i18nKey="team:allowBenefitDescription" />
+            )}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <If condition={error}>
+          <Alert variant="destructive">
+            <AlertDescription>
+              <Trans i18nKey="teams:updateBenefiErrorMessage" />
+            </AlertDescription>
+          </Alert>
+        </If>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            <Trans i18nKey="common:cancel" />
+          </AlertDialogCancel>
+
+          <Button
+            data-test="update-member-benefit"
+            variant="destructive"
+            disabled={isSubmitting}
+            onClick={updateEmployeeBenefit}
+          >
+            {isEligibleForBenefits ? (
+              <Trans i18nKey="teams:removeBenefitSubmitLabel" />
+            ) : (
+              <Trans i18nKey="teams:allowBenefitSubmitLabel" />
+            )}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default UpdateEmployeeBenefitDialog;