frontend/src/features/deposit/Deposit.tsx

@@ -8,7 +8,7 @@ const Deposit = (): JSX.Element => {
   const {
     loading,
     selectedUser,
-    setSelectedUser,
+    toggleSelectedUser,
     amount,
     setAmount,
     userQuery,
@@ -80,9 +80,7 @@ const Deposit = (): JSX.Element => {
           <UserCard
             key={user.id}
             active={selectedUser === user.id}
-            onUser={() => {
+            onUser={() => toggleSelectedUser(user.id)}
-              setSelectedUser(user.id);
-            }}
             user={user}
           />
         ))}

frontend/src/features/deposit/useDeposit.ts

@@ -10,6 +10,9 @@ export const useDeposit = () => {
   const [selectedUser, setSelectedUser] = useState("");
   const [amount, setAmount] = useState("");
   const [userQuery, setUserQuery] = useState("");
+  const toggleSelectedUser = (userId: string) => {
+    setSelectedUser((currentUserId) => (currentUserId === userId ? "" : userId));
+  };
   const filteredUsers = (data?.allUsers || []).filter((user) =>
     `${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`.includes(userQuery.toLowerCase()),
   );
@@ -56,7 +59,7 @@ export const useDeposit = () => {
   return {
     loading,
     selectedUser,
-    setSelectedUser,
+    toggleSelectedUser,
     amount,
     setAmount,
     userQuery,

frontend/src/features/register/Register.tsx

@@ -15,7 +15,7 @@ const Register = (): JSX.Element => {
     loading,
     showAll,
     setShowAll,
-    setSelectedUser,
+    toggleSelectedUser,
     selectedUser,
     addToOrder,
     order,
@@ -36,14 +36,14 @@ const Register = (): JSX.Element => {
           <UserCard
             key={USER_EXTERNAL}
             user={null}
-            onUser={() => setSelectedUser(USER_EXTERNAL)}
+            onUser={() => toggleSelectedUser(USER_EXTERNAL)}
             active={selectedUser == USER_EXTERNAL}
           />
           {users.map((user) => (
             <UserCard
               key={user.id}
               user={user}
-              onUser={() => setSelectedUser(user.id)}
+              onUser={() => toggleSelectedUser(user.id)}
               active={selectedUser == user.id}
             />
           ))}

frontend/src/features/register/useRegister.ts

@@ -47,6 +47,10 @@ export const useRegister = () => {
     setSelectedUser("");
   };
 
+  const toggleSelectedUser = (userId: string) => {
+    setSelectedUser((currentUserId) => (currentUserId === userId ? "" : userId));
+  };
+
   const addToOrder = (productId: string) => {
     let added = false;
     const newOrder = order.map((orderLine: OrderLineInput) => {
@@ -101,7 +105,7 @@ export const useRegister = () => {
     products,
     showAll,
     setShowAll,
-    setSelectedUser,
+    toggleSelectedUser,
     selectedUser,
     addToOrder,
     order,