@bigbinary/neeto-commons-rn 1.8.4 → 2.0.2

package/src/screens/team_members/RolesRadioGroup.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+
+import { Container, Typography, lightTheme } from "@bigbinary/neetoui-rn";
+
+import { type OrganizationRole } from "../../api/organization_roles";
+import { moderateScale } from "../../helpers/scale";
+
+/** The organization-roles endpoint also sends a human-readable description. */
+export type RoleOption = OrganizationRole & { description?: string };
+
+interface RadioCircleProps {
+  selected?: boolean;
+}
+
+const RadioCircle = ({ selected }: RadioCircleProps) => (
+  <View style={[styles.radioOuter, selected && styles.radioOuterSelected]}>
+    {selected && <View style={styles.radioInner} />}
+  </View>
+);
+
+interface RoleRowProps {
+  role: RoleOption;
+  isSelected: boolean;
+  isLast: boolean;
+  onSelect: () => void;
+}
+
+const RoleRow = ({ role, isSelected, isLast, onSelect }: RoleRowProps) => (
+  <Pressable
+    style={[
+      styles.roleRow,
+      isSelected && styles.roleRowSelected,
+      !isLast && styles.roleRowBorder,
+    ]}
+    onPress={onSelect}
+  >
+    <View style={styles.roleInfo}>
+      <Typography size="m" weight={isSelected ? "semibold" : "medium"}>
+        {role.name}
+      </Typography>
+      {!!role.description && (
+        <Typography
+          color={lightTheme.colors.palette.grey500}
+          size="xs"
+          weight="regular"
+        >
+          {role.description}
+        </Typography>
+      )}
+    </View>
+    <RadioCircle selected={isSelected} />
+  </Pressable>
+);
+
+interface RolesRadioGroupProps {
+  roles: RoleOption[];
+  selectedRole?: string;
+  updateRole: (role: string) => void;
+}
+
+const RolesRadioGroup = ({
+  roles,
+  selectedRole,
+  updateRole,
+}: RolesRadioGroupProps) => (
+  <Container style={styles.container}>
+    <Typography size="l" weight="medium">
+      Role<Typography color={lightTheme.colors.danger}>*</Typography>
+    </Typography>
+    <View style={styles.cardContainer}>
+      {roles.map((role, index) => (
+        <RoleRow
+          isLast={index === roles.length - 1}
+          isSelected={selectedRole === role.name}
+          key={role.id}
+          role={role}
+          onSelect={() => updateRole(role.name)}
+        />
+      ))}
+    </View>
+  </Container>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: moderateScale(8),
+    rowGap: moderateScale(8),
+  },
+  cardContainer: {
+    borderRadius: moderateScale(8),
+    borderWidth: 1,
+    borderColor: lightTheme.colors.palette.grey300,
+    overflow: "hidden",
+  },
+  roleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: moderateScale(14),
+    paddingHorizontal: moderateScale(16),
+  },
+  roleRowSelected: {
+    backgroundColor: "#E8F5E9",
+  },
+  roleRowBorder: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: lightTheme.colors.palette.grey300,
+  },
+  roleInfo: {
+    flex: 1,
+    rowGap: moderateScale(2),
+    marginRight: moderateScale(12),
+  },
+  radioOuter: {
+    width: moderateScale(22),
+    height: moderateScale(22),
+    borderRadius: moderateScale(11),
+    borderWidth: 2,
+    borderColor: lightTheme.colors.palette.grey400,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  radioOuterSelected: {
+    borderColor: lightTheme.colors.primary,
+  },
+  radioInner: {
+    width: moderateScale(12),
+    height: moderateScale(12),
+    borderRadius: moderateScale(6),
+    backgroundColor: lightTheme.colors.primary,
+  },
+});
+
+export default RolesRadioGroup;

package/src/screens/team_members/SaveButtons.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+
+import { Button, Container, lightTheme } from "@bigbinary/neetoui-rn";
+
+import { moderateScale } from "../../helpers/scale";
+
+interface SaveButtonsProps {
+  onSave: () => void;
+  onCancel: () => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+}
+
+const SaveButtons = ({
+  onSave,
+  onCancel,
+  disabled,
+  isLoading = false,
+}: SaveButtonsProps) => (
+  <Container style={styles.container}>
+    <Button
+      disabled={disabled}
+      isLoading={isLoading}
+      label="Save changes"
+      labelStyle={styles.buttonLabel}
+      style={styles.button}
+      onPress={() => onSave()}
+    />
+    <Button
+      label="Cancel"
+      labelStyle={styles.buttonLabel}
+      style={styles.button}
+      variant="secondary"
+      onPress={() => onCancel()}
+    />
+  </Container>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: lightTheme.colors.white,
+    bottom: 10,
+    columnGap: moderateScale(16),
+    flex: 1,
+    flexDirection: "row",
+    left: 0,
+    padding: moderateScale(16),
+    position: "absolute",
+    right: 0,
+    width: "100%",
+  },
+  button: {
+    flex: 1,
+    height: moderateScale(48),
+  },
+  buttonLabel: {
+    fontSize: lightTheme.fontSizes.m,
+  },
+});
+
+export default SaveButtons;

package/src/screens/team_members/constants.ts

@@ -0,0 +1,33 @@
+import Config from "react-native-config";
+
+export const LOADING_CARD = {
+  CARD_HEIGHT: 70,
+  TITLE_HEIGHT: 14,
+  SUBTITLE_HEIGHT: 10,
+};
+
+export const ADMIN_ROLE_NAME = "Admin";
+export const OWNER_ROLE_NAME = "Owner";
+export const ADMIN_ROLES = [ADMIN_ROLE_NAME, OWNER_ROLE_NAME];
+
+export interface RoleColor {
+  bg: string;
+  text: string;
+}
+
+// Keyed by role name, which the server owns — hence the open record rather
+// than a union of the four names spelled out here.
+export const ROLE_COLORS: Record<string, RoleColor> = {
+  Admin: { bg: "#E8F5E9", text: "#2E7D32" },
+  Standard: { bg: "#E8F5E9", text: "#388E3C" },
+  Manager: { bg: "#FFF3E0", text: "#E65100" },
+  Owner: { bg: "#E3F2FD", text: "#1565C0" },
+};
+
+export const DEFAULT_ROLE_COLOR: RoleColor = { bg: "#F5F5F5", text: "#616161" };
+
+// Read at module load, so an unset APP_DISPLAY_NAME would crash the import
+// graph rather than the screen that needs it.
+export const APP_NAME = (Config.APP_DISPLAY_NAME ?? "")
+  .split(" ")[0]
+  .substring(5);

package/src/screens/team_members/index.tsx

@@ -0,0 +1,223 @@
+import React, { useCallback, useState } from "react";
+import { StyleSheet } from "react-native";
+
+import { Edit, Delete } from "@bigbinary/neeto-icons-rn";
+import {
+  Container,
+  Divider,
+  Loader,
+  ParentView,
+  SearchBar,
+  FlashList,
+  Touchable,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+
+import Card from "./Card";
+import { LoadingCard } from "./LoadingCard";
+
+import { type TeamMember } from "../../api/team_members";
+import { BottomSheetMenu, EmptyView, Header } from "../../components";
+import ConfirmSheet from "../../components/ConfirmSheet";
+import { moderateScale } from "../../helpers/scale";
+import {
+  useFetchTeamMembers,
+  useRemoveTeamMember,
+} from "../../hooks/query/useTeamMembersApi";
+import { navigate } from "../../navigation/navigationService";
+import { SCREEN_NAMES } from "../../navigation/screenNames";
+
+type TeamMemberRenderItem = (info: {
+  item: TeamMember;
+}) => React.ReactElement | null;
+
+/**
+ * Host apps register this screen in their own navigator, so its route is not
+ * part of CommonsParamList.
+ */
+interface TeamMembersScreenProps {
+  route?: {
+    params?: {
+      canGoBack?: boolean;
+      bottomInset?: boolean;
+    };
+  };
+}
+
+const TeamMembersScreen = ({ route }: TeamMembersScreenProps) => {
+  const { canGoBack = false, bottomInset = false } = route?.params || {};
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedTeamMember, setSelectedTeamMember] =
+    useState<TeamMember | null>(null);
+  const [isActionsVisible, setIsActionsVisible] = useState(false);
+
+  const {
+    data: members = [],
+    isPending: isLoading,
+    isRefetching,
+    refetch,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+  } = useFetchTeamMembers(searchTerm);
+
+  const { mutate: removeTeamMember } = useRemoveTeamMember();
+
+  const handleAddMember = () => navigate(SCREEN_NAMES.AddTeamMemberScreen);
+
+  const handleDelete = () => {
+    if (!selectedTeamMember) return;
+
+    ConfirmSheet.show({
+      title: "Remove member?",
+      description: `${selectedTeamMember?.display_name} will lose access to the workspace. This can't be undone.`,
+      buttons: [
+        {
+          label: "Remove",
+          onPress: () => {
+            removeTeamMember({ id: selectedTeamMember.id });
+            setSelectedTeamMember(null);
+          },
+          variant: "danger",
+        },
+        {
+          label: "Cancel",
+          onPress: () => setSelectedTeamMember(null),
+        },
+      ],
+    });
+  };
+
+  const handleEdit = () => {
+    if (!selectedTeamMember) return;
+
+    navigate(SCREEN_NAMES.EditTeamMemberScreen, {
+      member: selectedTeamMember,
+    });
+    setSelectedTeamMember(null);
+  };
+
+  const renderItem = useCallback<TeamMemberRenderItem>(
+    ({ item }) => (
+      <Card
+        member={item}
+        onPress={member => {
+          setSelectedTeamMember(member);
+          setIsActionsVisible(true);
+        }}
+      />
+    ),
+    []
+  );
+
+  const renderFooter = useCallback(
+    () =>
+      isFetchingNextPage ? (
+        <Container style={styles.footerLoader}>
+          <Loader />
+        </Container>
+      ) : null,
+    [isFetchingNextPage]
+  );
+
+  const keyExtractor = useCallback(({ id }: TeamMember) => id, []);
+
+  const renderItemSeparator = () => <Container style={styles.itemSeparator} />;
+
+  const renderEmptyComponent = () => (
+    <EmptyView title="No team members found" />
+  );
+
+  return (
+    // v2's `bg`/`flex` are dropped: v3's ParentView already fills its parent
+    // and paints the active theme's primary background by default.
+    <ParentView barStyle="dark-content" bottomInset={bottomInset}>
+      <Header
+        canGoBack={canGoBack}
+        title="Team members"
+        RightComponent={() => (
+          <Touchable onPress={handleAddMember}>
+            <Typography
+              color={lightTheme.colors.palette.base}
+              size="m"
+              weight="medium"
+            >
+              + Add
+            </Typography>
+          </Touchable>
+        )}
+      />
+      <Divider style={styles.divider} />
+      <Container style={styles.searchContainer}>
+        <SearchBar
+          containerStyle={styles.searchBar}
+          placeholder="Search members..."
+          onCancel={() => setSearchTerm("")}
+          onChangeText={setSearchTerm}
+        />
+      </Container>
+      <FlashList
+        ItemSeparatorComponent={renderItemSeparator}
+        ListEmptyComponent={renderEmptyComponent}
+        ListFooterComponent={renderFooter}
+        SkeletonComponent={<LoadingCard />}
+        contentContainerStyle={styles.listContent}
+        data={members || []}
+        isLoading={isLoading}
+        keyExtractor={keyExtractor}
+        refreshing={isRefetching}
+        renderItem={renderItem}
+        showsVerticalScrollIndicator={false}
+        onEndReached={() => hasNextPage && fetchNextPage()}
+        onEndReachedThreshold={0.7}
+        onRefresh={refetch}
+      />
+      <BottomSheetMenu
+        isVisible={isActionsVisible}
+        title={selectedTeamMember?.display_name}
+        items={[
+          {
+            key: "edit",
+            label: "Edit member",
+            icon: Edit,
+            onPress: handleEdit,
+          },
+          {
+            key: "delete",
+            label: "Remove member",
+            icon: Delete,
+            color: lightTheme.colors.danger,
+            onPress: handleDelete,
+          },
+        ]}
+        onClose={() => setIsActionsVisible(false)}
+      />
+    </ParentView>
+  );
+};
+
+const styles = StyleSheet.create({
+  divider: {
+    backgroundColor: lightTheme.colors.palette.grey200,
+  },
+  searchContainer: {
+    paddingHorizontal: moderateScale(14),
+    paddingTop: moderateScale(10),
+  },
+  searchBar: {
+    borderColor: lightTheme.colors.palette.grey300,
+    height: moderateScale(36),
+  },
+  listContent: {
+    padding: moderateScale(16),
+  },
+  footerLoader: {
+    paddingVertical: moderateScale(8),
+  },
+  itemSeparator: {
+    height: moderateScale(12),
+  },
+});
+
+export default TeamMembersScreen;

package/src/screens/team_members/utils.ts

@@ -0,0 +1,84 @@
+import { _findBy, notEquals } from "@bigbinary/neeto-cist";
+import { equals, includes, move } from "ramda";
+
+import { ADMIN_ROLE_NAME, ADMIN_ROLES, APP_NAME } from "./constants";
+
+import { type GlobalRole } from "../../api/global_roles";
+
+/** `useFetchGlobalRoles` groups the global roles by their `app_name`. */
+export type GlobalRolesByApp = Partial<Record<string, GlobalRole[]>>;
+
+/** One row of the "add member" product matrix. */
+export interface ProductRole {
+  app_name: string;
+  active_role: string;
+  is_enabled: boolean;
+  is_primary: boolean;
+}
+
+// A type alias rather than an interface so the object keeps an implicit index
+// signature and stays assignable to the create-member payload.
+export type AddTeamMemberFormValues = {
+  email: string;
+  role: string;
+  products: ProductRole[];
+  otherProducts: boolean;
+};
+
+export const isAdminRole = (role: string) =>
+  includes(role, ADMIN_ROLES)
+    ? equals(ADMIN_ROLE_NAME)
+    : notEquals(ADMIN_ROLE_NAME);
+
+const getDefaultRole = (
+  roles: GlobalRole[],
+  currentAppRole: string,
+  appName: string
+) => {
+  if (appName === APP_NAME) {
+    return currentAppRole;
+  }
+
+  const condition = isAdminRole(currentAppRole);
+
+  const role = _findBy({ name: condition }, roles);
+
+  return role ? role.name : roles[0].name;
+};
+
+export const generateAppsRolesInitialValue = (
+  globalRoles: GlobalRolesByApp | undefined,
+  currentAppRole: string
+): ProductRole[] => {
+  if (!globalRoles) return [];
+
+  const appNames = Object.keys(globalRoles).filter(
+    name => (globalRoles[name]?.length ?? 0) > 0
+  );
+  const currentAppNameIndex = appNames.indexOf(APP_NAME);
+  const appNamesSorted =
+    currentAppNameIndex >= 0
+      ? move(currentAppNameIndex, 0, appNames)
+      : appNames;
+
+  return appNamesSorted.map(appName => ({
+    app_name: appName,
+    active_role: getDefaultRole(
+      globalRoles[appName] ?? [],
+      currentAppRole,
+      appName
+    ),
+    is_enabled: true,
+    is_primary: APP_NAME === appName,
+  }));
+};
+
+export const getInitialValues = (
+  role = "",
+  globalRoles?: GlobalRolesByApp
+): AddTeamMemberFormValues => ({
+  email: "",
+  role,
+  products: generateAppsRolesInitialValue(globalRoles, role),
+  otherProducts: true,
+});

package/src/slices/auth.ts

@@ -0,0 +1,86 @@
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+import notifee from "react-native-notify-kit";
+
+// A workspace the signed-in email belongs to. The snake_case keys are the
+// server's and reach consumers unchanged.
+export interface Organization {
+  id: string;
+  auth_token: string;
+  email: string;
+  name: string;
+  subdomain: string;
+  organization_name: string;
+  profile_image_url: string | null;
+  is_onboard?: boolean;
+}
+
+export interface AuthState {
+  appName: string | null;
+  isLoggedIn: boolean;
+  email: string;
+  subdomain: string;
+  name: string;
+  userId: string;
+  organization_name: string;
+  profile_image_url: string | null;
+  organizations: Organization[];
+}
+
+type LoginPayload = Pick<
+  Organization,
+  "email" | "name" | "subdomain" | "organization_name" | "profile_image_url"
+> & { id: string };
+
+const initialState: AuthState = {
+  appName: null,
+  isLoggedIn: false,
+  email: "",
+  subdomain: "",
+  name: "",
+  userId: "",
+  organization_name: "",
+  profile_image_url: null,
+  organizations: [],
+};
+
+const auth = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    setAppName: (state, { payload }: PayloadAction<{ appName: string }>) => {
+      state.appName = payload.appName;
+    },
+    setOrganizations: (
+      state,
+      { payload }: PayloadAction<{ organizations: Organization[] }>
+    ) => {
+      state.organizations = payload.organizations;
+    },
+    loginUserAction: (state, { payload }: PayloadAction<LoginPayload>) => {
+      state.isLoggedIn = true;
+      state.email = payload.email;
+      state.name = payload.name;
+      state.userId = payload.id;
+      state.subdomain = payload.subdomain;
+      state.organization_name = payload.organization_name;
+      state.profile_image_url = payload.profile_image_url;
+    },
+    logoutUserAction: state => {
+      state.isLoggedIn = initialState.isLoggedIn;
+      state.email = initialState.email;
+      state.name = initialState.name;
+      state.userId = initialState.userId;
+      state.subdomain = initialState.subdomain;
+      state.organization_name = initialState.organization_name;
+      state.profile_image_url = initialState.profile_image_url;
+      state.organizations = initialState.organizations;
+      // eslint-disable-next-line promise/prefer-await-to-then
+      notifee.setBadgeCount(0).catch(() => {});
+    },
+  },
+});
+
+export const {
+  actions: { setAppName, setOrganizations, loginUserAction, logoutUserAction },
+  reducer: authReducer,
+} = auth;

package/src/slices/index.ts

@@ -0,0 +1,7 @@
+import { combineReducers } from "redux";
+
+import { authReducer } from "./auth";
+
+export const rootReducer = combineReducers({
+  auth: authReducer,
+});

package/src/store/hooks.ts

@@ -0,0 +1,8 @@
+import { useDispatch, useSelector } from "react-redux";
+
+import { type AppDispatch, type RootState } from ".";
+
+// Internal typed wrappers so commons' own selectors know the shape of the
+// slices it owns. Not part of the published API — apps type their own.
+export const useAppSelector = useSelector.withTypes<RootState>();
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();

package/src/store/index.ts

@@ -0,0 +1,47 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { configureStore } from "@reduxjs/toolkit";
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+  type PersistConfig,
+} from "redux-persist";
+
+import { rootReducer } from "../slices";
+
+// Host apps merge their own reducers in through `updateRootReducer`, so the
+// state is commons' slices plus keys only the app knows about.
+export type CommonsState = ReturnType<typeof rootReducer>;
+export type RootState = CommonsState & Record<string, unknown>;
+
+const persistConfig: PersistConfig<CommonsState> = {
+  key: "root",
+  storage: AsyncStorage,
+  blacklist: [],
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+const baseStore = configureStore({
+  reducer: persistedReducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
+});
+const Persistor = persistStore(baseStore);
+
+// `Store.Persistor` is part of the published contract — apps and
+// `updateRootReducer` reach the persistor through the store.
+const Store = Object.assign(baseStore, { Persistor });
+
+export type AppDispatch = typeof Store.dispatch;
+
+export { Store, Persistor, persistConfig };