@oxyhq/services 12.2.0 → 13.0.0

package/src/ui/screens/AccountMembersScreen.tsx

@@ -0,0 +1,481 @@
+import type React from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import {
+  View,
+  ScrollView,
+  TouchableOpacity,
+  ActivityIndicator,
+  Platform,
+  KeyboardAvoidingView,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast, Dialog, useDialogControl } from '@oxyhq/bloom';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { H1, Text } from '@oxyhq/bloom/typography';
+import { Button } from '@oxyhq/bloom/button';
+import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
+import { Divider } from '@oxyhq/bloom/divider';
+import type { AccountMember, AccountRole } from '@oxyhq/core';
+import { logger as loggerUtil } from '@oxyhq/core';
+import type { BaseScreenProps } from '../types/navigation';
+import Header from '../components/Header';
+import { useOxy } from '../context/OxyContext';
+import { useI18n } from '../hooks/useI18n';
+
+/** Roles assignable via invite / role change — everything except `owner`. */
+type AssignableRole = Exclude<AccountRole, 'owner'>;
+
+const ASSIGNABLE_ROLES: AssignableRole[] = ['admin', 'editor', 'developer', 'billing', 'viewer'];
+
+const errorMessage = (error: unknown, fallback: string): string =>
+  error instanceof Error && error.message ? error.message : fallback;
+
+const isUserNotFound = (error: unknown): boolean => {
+  const message = error instanceof Error ? error.message.toLowerCase() : '';
+  return message.includes('user not found') || message.includes('not found');
+};
+
+/**
+ * Manage the members of an account (invite by username/email, change roles,
+ * remove, transfer ownership). Gated on the caller's `callerMembership`
+ * permissions. Receives the target `accountId` via navigation props.
+ */
+const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, accountId }) => {
+  const bloomTheme = useTheme();
+  const colors = bloomTheme.colors;
+  const { t } = useI18n();
+  const { oxyServices, canUsePrivateApi } = useOxy();
+  const queryClient = useQueryClient();
+
+  const id = typeof accountId === 'string' ? accountId : '';
+
+  const roleLabel = useCallback((role: AccountRole): string => {
+    return t(`accounts.roles.${role}.label`) || role.charAt(0).toUpperCase() + role.slice(1);
+  }, [t]);
+
+  const accountQuery = useQuery({
+    queryKey: ['accounts', 'detail', id],
+    queryFn: () => oxyServices.getAccount(id),
+    enabled: canUsePrivateApi && id.length > 0,
+  });
+
+  const callerMembership = accountQuery.data?.callerMembership ?? null;
+  const permissions = callerMembership?.permissions ?? [];
+  // The owner of an account (relationship 'self'/'owner') gets an implicit
+  // full-permission set even when no explicit membership row exists.
+  const isImplicitOwner = accountQuery.data
+    ? accountQuery.data.relationship !== 'member'
+    : false;
+  const can = useCallback(
+    (permission: string): boolean => isImplicitOwner || permissions.includes(permission),
+    [isImplicitOwner, permissions],
+  );
+
+  const canRead = can('members:read');
+  const canInvite = can('members:invite');
+  const canUpdate = can('members:update');
+  const canRemove = can('members:remove');
+  const canTransfer = can('ownership:transfer');
+
+  const membersQuery = useQuery({
+    queryKey: ['accounts', 'members', id],
+    queryFn: () => oxyServices.listAccountMembers(id),
+    enabled: canUsePrivateApi && id.length > 0 && canRead,
+  });
+  const members = useMemo<AccountMember[]>(() => membersQuery.data ?? [], [membersQuery.data]);
+  const ownerCount = useMemo(() => members.filter((m) => m.role === 'owner').length, [members]);
+
+  const invalidateMembers = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ['accounts', 'members', id] });
+    queryClient.invalidateQueries({ queryKey: ['accounts', 'detail', id] });
+  }, [queryClient, id]);
+
+  // --- Invite form state ---
+  const [inviteIdentifier, setInviteIdentifier] = useState('');
+  const [inviteRole, setInviteRole] = useState<AssignableRole>('editor');
+  const [inviteError, setInviteError] = useState<string | null>(null);
+
+  const inviteMutation = useMutation({
+    mutationKey: ['accounts', 'members', 'invite', id],
+    mutationFn: (input: { usernameOrEmail: string; role: AssignableRole }) =>
+      oxyServices.inviteAccountMember(id, input),
+    onSuccess: () => {
+      setInviteIdentifier('');
+      setInviteRole('editor');
+      setInviteError(null);
+      invalidateMembers();
+      toast.success(t('accounts.members.toasts.added') || 'Member added');
+    },
+    onError: (error) => {
+      if (isUserNotFound(error)) {
+        const message = t('accounts.members.errors.userNotFound') || 'User not found';
+        setInviteError(message);
+        toast.error(message);
+        return;
+      }
+      toast.error(errorMessage(error, t('accounts.members.toasts.addFailed') || 'Failed to add member'));
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationKey: ['accounts', 'members', 'update', id],
+    mutationFn: (input: { memberId: string; role: AssignableRole }) =>
+      oxyServices.updateAccountMember(id, input.memberId, { role: input.role }),
+    onSuccess: () => {
+      invalidateMembers();
+      toast.success(t('accounts.members.toasts.roleUpdated') || 'Role updated');
+    },
+    onError: (error) => {
+      toast.error(errorMessage(error, t('accounts.members.toasts.roleFailed') || 'Failed to update role'));
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationKey: ['accounts', 'members', 'remove', id],
+    mutationFn: (memberId: string) => oxyServices.removeAccountMember(id, memberId),
+    onSuccess: () => {
+      invalidateMembers();
+      toast.success(t('accounts.members.toasts.removed') || 'Member removed');
+    },
+    onError: (error) => {
+      toast.error(errorMessage(error, t('accounts.members.toasts.removeFailed') || 'Failed to remove member'));
+    },
+  });
+
+  const transferMutation = useMutation({
+    mutationKey: ['accounts', 'members', 'transfer', id],
+    mutationFn: (userId: string) => oxyServices.transferAccountOwnership(id, { userId }),
+    onSuccess: () => {
+      invalidateMembers();
+      toast.success(t('accounts.members.toasts.transferred') || 'Ownership transferred');
+    },
+    onError: (error) => {
+      toast.error(errorMessage(error, t('accounts.members.toasts.transferFailed') || 'Failed to transfer ownership'));
+    },
+  });
+
+  const [memberToRemove, setMemberToRemove] = useState<AccountMember | null>(null);
+  const [memberToPromote, setMemberToPromote] = useState<AccountMember | null>(null);
+  const removeDialog = useDialogControl();
+  const transferDialog = useDialogControl();
+
+  const handleInvite = useCallback(() => {
+    const usernameOrEmail = inviteIdentifier.trim();
+    if (!usernameOrEmail) {
+      setInviteError(t('accounts.members.errors.identifierRequired') || 'Enter a username or email to invite');
+      return;
+    }
+    setInviteError(null);
+    inviteMutation.mutate({ usernameOrEmail, role: inviteRole });
+  }, [inviteIdentifier, inviteRole, inviteMutation, t]);
+
+  const handleChangeRole = useCallback((member: AccountMember, role: AccountRole) => {
+    if (role === member.role || role === 'owner') {
+      return;
+    }
+    updateMutation.mutate({ memberId: member._id, role });
+  }, [updateMutation]);
+
+  const confirmRemove = useCallback((member: AccountMember) => {
+    setMemberToRemove(member);
+    removeDialog.open();
+  }, [removeDialog]);
+
+  const confirmTransfer = useCallback((member: AccountMember) => {
+    setMemberToPromote(member);
+    transferDialog.open();
+  }, [transferDialog]);
+
+  const title = t('accounts.members.title') || 'Members';
+
+  if (!id) {
+    return (
+      <View className="flex-1 bg-bg">
+        <Header title={title} onBack={goBack} onClose={onClose} showBackButton showCloseButton elevation="subtle" />
+        <View className="flex-1 items-center justify-center px-screen-margin">
+          <Text className="text-body font-body text-text-secondary text-center">
+            {t('accounts.members.errors.missingAccount') || 'No account selected.'}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View className="flex-1 bg-bg">
+      <Header title={title} onBack={goBack} onClose={onClose} showBackButton showCloseButton elevation="subtle" />
+
+      <KeyboardAvoidingView
+        className="flex-1"
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 88 : 0}
+      >
+        <ScrollView
+          className="flex-1"
+          contentContainerClassName="px-screen-margin pt-space-24 pb-space-32 gap-space-24"
+          showsVerticalScrollIndicator={false}
+          keyboardShouldPersistTaps="handled"
+        >
+          <View className="gap-space-8">
+            <H1 className="text-headerBold font-headerBold text-text">{title}</H1>
+            <Text className="text-body font-body text-text-secondary">
+              {t('accounts.members.subtitle') || 'People with access to this account.'}
+            </Text>
+          </View>
+
+          {!accountQuery.isLoading && !canRead ? (
+            <Text className="text-body font-body text-text-secondary text-center py-space-24">
+              {t('accounts.members.errors.noPermission') || 'You do not have permission to view members.'}
+            </Text>
+          ) : null}
+
+          {/* Invite form */}
+          {canInvite ? (
+            <View className="gap-space-12 p-space-16 rounded-radius-20 bg-fill">
+              <Text className="text-body font-bodyBold text-text">
+                {t('accounts.members.invite.title') || 'Add a member'}
+              </Text>
+              <TextField isInvalid={!!inviteError}>
+                <TextFieldInput
+                  floatingLabel
+                  label={t('accounts.members.invite.identifierLabel') || 'Username or email'}
+                  value={inviteIdentifier}
+                  onChangeText={(value) => {
+                    setInviteIdentifier(value);
+                    if (inviteError) setInviteError(null);
+                  }}
+                  isInvalid={!!inviteError}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  autoComplete="off"
+                />
+              </TextField>
+              {inviteError ? (
+                <Text className="text-caption font-caption px-space-4" style={{ color: colors.negative }}>
+                  {inviteError}
+                </Text>
+              ) : null}
+
+              <Text className="text-caption font-caption text-text-secondary px-space-4">
+                {t('accounts.members.invite.roleLabel') || 'Role'}
+              </Text>
+              <View className="flex-row flex-wrap gap-space-8">
+                {ASSIGNABLE_ROLES.map((role) => {
+                  const selected = role === inviteRole;
+                  return (
+                    <TouchableOpacity
+                      key={role}
+                      accessibilityRole="radio"
+                      accessibilityState={{ selected }}
+                      accessibilityLabel={roleLabel(role)}
+                      onPress={() => setInviteRole(role)}
+                      activeOpacity={0.7}
+                      className="px-space-12 py-space-8 rounded-radius-full"
+                      style={{
+                        backgroundColor: selected ? colors.primary : colors.card,
+                        borderWidth: 1,
+                        borderColor: selected ? colors.primary : colors.border,
+                      }}
+                    >
+                      <Text
+                        className="text-caption font-bodyBold"
+                        style={{ color: selected ? colors.background : colors.text }}
+                      >
+                        {roleLabel(role)}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+
+              <Button
+                variant="primary"
+                onPress={handleInvite}
+                disabled={inviteMutation.isPending || !inviteIdentifier.trim()}
+                loading={inviteMutation.isPending}
+                accessibilityLabel={t('accounts.members.invite.submit') || 'Add member'}
+                className="w-full"
+              >
+                {t('accounts.members.invite.submit') || 'Add member'}
+              </Button>
+            </View>
+          ) : null}
+
+          {/* Member list */}
+          {canRead ? (
+            <View className="gap-space-8">
+              {membersQuery.isLoading ? (
+                <View className="items-center py-space-24">
+                  <ActivityIndicator color={colors.primary} />
+                </View>
+              ) : members.length === 0 ? (
+                <Text className="text-body font-body text-text-secondary text-center py-space-24">
+                  {t('accounts.members.empty') || 'No members yet.'}
+                </Text>
+              ) : (
+                <View className="rounded-radius-20 bg-fill overflow-hidden">
+                  {members.map((member, index) => {
+                    const isOwner = member.role === 'owner';
+                    const isLastOwner = isOwner && ownerCount <= 1;
+                    const canEditThisRole = canUpdate && !isOwner;
+                    const canRemoveThisMember = canRemove && !isLastOwner && (!isOwner || canTransfer);
+                    const canTransferToThis = canTransfer && !isOwner && member.status === 'active';
+                    return (
+                      <View key={member._id}>
+                        {index > 0 ? <Divider color={colors.border} spacing={0} /> : null}
+                        <View className="p-space-16 gap-space-8">
+                          <View className="flex-row items-center gap-space-8">
+                            <Text className="text-body font-bodyBold text-text flex-1" numberOfLines={1}>
+                              {member.memberUserId}
+                            </Text>
+                            {isOwner ? (
+                              <View className="px-space-8 py-space-4 rounded-radius-full" style={{ backgroundColor: colors.primarySubtle }}>
+                                <Text className="text-caption font-bodyBold" style={{ color: colors.primary }}>
+                                  {roleLabel('owner')}
+                                </Text>
+                              </View>
+                            ) : null}
+                            {member.status !== 'active' ? (
+                              <View className="px-space-8 py-space-4 rounded-radius-full" style={{ backgroundColor: colors.card }}>
+                                <Text className="text-caption font-caption capitalize text-text-secondary">
+                                  {member.status}
+                                </Text>
+                              </View>
+                            ) : null}
+                          </View>
+
+                          {/* Role chips (editable) or static role label */}
+                          {canEditThisRole ? (
+                            <View className="flex-row flex-wrap gap-space-8">
+                              {ASSIGNABLE_ROLES.map((role) => {
+                                const selected = role === member.role;
+                                return (
+                                  <TouchableOpacity
+                                    key={role}
+                                    accessibilityRole="radio"
+                                    accessibilityState={{ selected }}
+                                    accessibilityLabel={roleLabel(role)}
+                                    onPress={() => handleChangeRole(member, role)}
+                                    disabled={updateMutation.isPending}
+                                    activeOpacity={0.7}
+                                    className="px-space-12 py-space-4 rounded-radius-full"
+                                    style={{
+                                      backgroundColor: selected ? colors.primary : colors.card,
+                                      borderWidth: 1,
+                                      borderColor: selected ? colors.primary : colors.border,
+                                    }}
+                                  >
+                                    <Text
+                                      className="text-caption font-bodyBold"
+                                      style={{ color: selected ? colors.background : colors.text }}
+                                    >
+                                      {roleLabel(role)}
+                                    </Text>
+                                  </TouchableOpacity>
+                                );
+                              })}
+                            </View>
+                          ) : !isOwner ? (
+                            <Text className="text-caption font-caption text-text-secondary">
+                              {roleLabel(member.role)}
+                            </Text>
+                          ) : null}
+
+                          {/* Actions */}
+                          {(canTransferToThis || canRemoveThisMember) ? (
+                            <View className="flex-row gap-space-16 pt-space-4">
+                              {canTransferToThis ? (
+                                <TouchableOpacity
+                                  accessibilityRole="button"
+                                  accessibilityLabel={t('accounts.members.actions.transfer') || 'Transfer ownership'}
+                                  onPress={() => confirmTransfer(member)}
+                                  activeOpacity={0.7}
+                                  className="flex-row items-center gap-space-4"
+                                >
+                                  <Ionicons name="swap-horizontal-outline" size={16} color={colors.icon} />
+                                  <Text className="text-caption font-bodyBold text-text-secondary">
+                                    {t('accounts.members.actions.transfer') || 'Transfer ownership'}
+                                  </Text>
+                                </TouchableOpacity>
+                              ) : null}
+                              {canRemoveThisMember ? (
+                                <TouchableOpacity
+                                  accessibilityRole="button"
+                                  accessibilityLabel={t('accounts.members.actions.remove') || 'Remove member'}
+                                  onPress={() => confirmRemove(member)}
+                                  activeOpacity={0.7}
+                                  className="flex-row items-center gap-space-4"
+                                >
+                                  <Ionicons name="trash-outline" size={16} color={colors.error} />
+                                  <Text className="text-caption font-bodyBold" style={{ color: colors.error }}>
+                                    {t('accounts.members.actions.remove') || 'Remove'}
+                                  </Text>
+                                </TouchableOpacity>
+                              ) : null}
+                            </View>
+                          ) : null}
+                        </View>
+                      </View>
+                    );
+                  })}
+                </View>
+              )}
+            </View>
+          ) : null}
+        </ScrollView>
+      </KeyboardAvoidingView>
+
+      <Dialog
+        control={removeDialog}
+        title={t('accounts.members.removeConfirm.title') || 'Remove member'}
+        description={
+          t('accounts.members.removeConfirm.description')
+          || 'Remove this member from the account? They will lose all access.'
+        }
+        actions={[
+          {
+            label: t('accounts.members.actions.remove') || 'Remove',
+            color: 'destructive',
+            onPress: () => {
+              const target = memberToRemove;
+              setMemberToRemove(null);
+              if (target) {
+                removeMutation.mutate(target._id);
+              } else {
+                loggerUtil.debug('Remove confirmed with no pending member', { component: 'AccountMembersScreen' });
+              }
+            },
+          },
+          { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+        ]}
+      />
+      <Dialog
+        control={transferDialog}
+        title={t('accounts.members.transferConfirm.title') || 'Transfer ownership'}
+        description={
+          t('accounts.members.transferConfirm.description')
+          || 'Transfer ownership of this account to this member? You will be demoted to admin. This cannot be undone.'
+        }
+        actions={[
+          {
+            label: t('accounts.members.actions.transfer') || 'Transfer ownership',
+            color: 'destructive',
+            onPress: () => {
+              const target = memberToPromote;
+              setMemberToPromote(null);
+              if (target) {
+                transferMutation.mutate(target.memberUserId);
+              } else {
+                loggerUtil.debug('Transfer confirmed with no pending member', { component: 'AccountMembersScreen' });
+              }
+            },
+          },
+          { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+        ]}
+      />
+    </View>
+  );
+};
+
+export default AccountMembersScreen;