@bigbinary/neeto-commons-rn 1.8.5 → 2.0.3

package/src/screens/team_members/Checkbox.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import {
+  StyleSheet,
+  Image,
+  Pressable,
+  Text,
+  View,
+  type PressableProps,
+} from "react-native";
+
+import { lightTheme } from "@bigbinary/neetoui-rn";
+
+const checkmarkBase64 =
+  "data:image/png;base64,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";
+
+interface CheckboxProps extends Omit<PressableProps, "onPress" | "style"> {
+  onValueChange?: (value: boolean) => void;
+  value?: boolean;
+  label?: string;
+  disabled?: boolean;
+}
+
+const Checkbox = ({
+  onValueChange,
+  value,
+  label,
+  disabled = false,
+  ...other
+}: CheckboxProps) => {
+  const handleChange = () => {
+    onValueChange?.(!value);
+  };
+
+  return (
+    <Pressable
+      {...other}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: value, disabled }}
+      disabled={disabled}
+      style={styles.root}
+      onPress={handleChange}
+    >
+      <View style={[styles.checkRoot, value && styles.checked]}>
+        {value && (
+          <Image
+            style={StyleSheet.absoluteFill}
+            source={{
+              uri: checkmarkBase64,
+            }}
+          />
+        )}
+      </View>
+      <Text
+        style={[styles.checkboxLabel, disabled && styles.checkboxLabelDisabled]}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: 12,
+  },
+  checkRoot: {
+    height: 20,
+    width: 20,
+    borderRadius: 4,
+    borderWidth: 2,
+    borderColor: lightTheme.colors.palette.grey400,
+  },
+  checked: {
+    backgroundColor: lightTheme.colors.primary,
+    borderColor: lightTheme.colors.primary,
+  },
+  checkboxLabel: {
+    fontSize: 16,
+    color: lightTheme.colors.text.primary,
+  },
+  checkboxLabelDisabled: {
+    color: lightTheme.colors.palette.grey600,
+  },
+});
+
+export default Checkbox;

package/src/screens/team_members/Edit.tsx

@@ -0,0 +1,171 @@
+import React, { type ComponentType } from "react";
+import { StyleSheet } from "react-native";
+
+import {
+  Button as UIButton,
+  Container,
+  Input,
+  Loader,
+  ParentView,
+  ScrollView,
+  lightTheme,
+  type ButtonProps,
+} from "@bigbinary/neetoui-rn";
+import { useNavigation, type NavigationProp } from "@react-navigation/native";
+import { Formik } from "formik";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import * as Yup from "yup";
+
+import Email from "./Email";
+import RolesRadioGroup, { type RoleOption } from "./RolesRadioGroup";
+
+import { Header } from "../../components";
+import { moderateScale } from "../../helpers/scale";
+import { useFetchRoles } from "../../hooks/query/useRolesApi";
+import { useUpdateTeamMember } from "../../hooks/query/useTeamMembersApi";
+import {
+  type CommonsParamList,
+  type CommonsScreenProps,
+} from "../../navigation/types";
+
+// `onPress` is widened from Pressable's event handler so formik's web-typed
+// `handleSubmit` keeps flowing straight through, as it does today.
+const Button = UIButton as ComponentType<
+  Omit<ButtonProps, "onPress"> & { onPress?: () => void }
+>;
+
+// A type alias rather than an interface so the object keeps an implicit index
+// signature and stays assignable to the update payload.
+type EditTeamMemberFormValues = {
+  first_name?: string;
+  last_name?: string;
+  email?: string;
+  organization_role?: string;
+};
+
+const EditTeamMemberScreen = ({
+  route,
+}: CommonsScreenProps<"EditTeamMemberScreen">) => {
+  // The navigator types params as required, but a host app can still push
+  // this route without them; the fallback keeps the pre-TypeScript
+  // behaviour of an undefined member instead of throwing here.
+  const { member } =
+    route.params ?? ({} as CommonsParamList["EditTeamMemberScreen"]);
+  const navigation = useNavigation<NavigationProp<CommonsParamList>>();
+  const { bottom } = useSafeAreaInsets();
+
+  const { mutate: updateTeamMember, isPending: isUpdating } =
+    useUpdateTeamMember({ onSuccess: () => navigation.goBack() });
+  const { data: roles, isPending: isLoadingRoles } = useFetchRoles();
+
+  const handleUpdateTeamMember = (payload: EditTeamMemberFormValues) =>
+    updateTeamMember({ id: member.id, payload });
+
+  if (isLoadingRoles) {
+    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">
+        <Header canGoBack title="Edit team member" />
+        <Container style={styles.loader}>
+          <Loader color={lightTheme.colors.primary} size="l" />
+        </Container>
+      </ParentView>
+    );
+  }
+
+  return (
+    <ParentView barStyle="dark-content">
+      <Header canGoBack title="Edit team member" />
+      <Formik<EditTeamMemberFormValues>
+        enableReinitialize
+        validateOnBlur
+        initialValues={{
+          first_name: member?.first_name,
+          last_name: member?.last_name,
+          email: member?.email,
+          organization_role: member?.role,
+        }}
+        validationSchema={Yup.object().shape({
+          email: Yup.string().email().required(),
+        })}
+        onSubmit={values => handleUpdateTeamMember(values)}
+      >
+        {({ handleChange, handleSubmit, errors, isValid, values, dirty }) => (
+          <>
+            <ScrollView>
+              <Container style={styles.container}>
+                <Input
+                  label="First name"
+                  value={values?.first_name}
+                  onChangeText={handleChange("first_name")}
+                />
+                <Input
+                  label="Last name"
+                  value={values?.last_name}
+                  onChangeText={handleChange("last_name")}
+                />
+                <Email
+                  email={values?.email}
+                  error={errors?.email}
+                  updateEmail={handleChange("email")}
+                />
+                <RolesRadioGroup
+                  // `roles` is narrowed by the isLoadingRoles early return
+                  // above, which the compiler cannot see through.
+                  roles={roles as RoleOption[]}
+                  selectedRole={values?.organization_role}
+                  updateRole={handleChange("organization_role")}
+                />
+              </Container>
+            </ScrollView>
+            <Container
+              style={[
+                styles.footer,
+                { paddingBottom: Math.max(bottom, moderateScale(12)) },
+              ]}
+            >
+              <Button
+                disabled={!isValid || !dirty}
+                isLoading={isUpdating}
+                label="Continue"
+                labelStyle={styles.buttonLabel}
+                style={styles.button}
+                onPress={handleSubmit}
+              />
+            </Container>
+          </>
+        )}
+      </Formik>
+    </ParentView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: moderateScale(16),
+    rowGap: moderateScale(16),
+    marginBottom: moderateScale(16),
+  },
+  footer: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: lightTheme.colors.palette.grey200,
+    paddingTop: moderateScale(12),
+    paddingHorizontal: moderateScale(16),
+  },
+  button: {
+    borderRadius: moderateScale(12),
+    height: moderateScale(48),
+  },
+  buttonLabel: {
+    fontSize: lightTheme.fontSizes.m,
+  },
+  loader: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+  },
+});
+
+export default EditTeamMemberScreen;

package/src/screens/team_members/Email.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+
+import {
+  Container,
+  Input,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+
+import { moderateScale } from "../../helpers/scale";
+
+interface EmailProps {
+  /** Optional so the edit form can hand over a member without an email. */
+  email?: string;
+  error?: string;
+  updateEmail: (text: string) => void;
+  autoFocus?: boolean;
+}
+
+// v2 drew the border on Input's outer container (hence `containerProps`);
+// v3 draws it on the TextInput itself, so the outline colour goes to `style`.
+const Email = ({
+  email,
+  error = "",
+  updateEmail,
+  autoFocus = false,
+}: EmailProps) => (
+  <Container>
+    <Input
+      autoCapitalize="none"
+      autoFocus={autoFocus}
+      keyboardType="email-address"
+      label="Email"
+      style={error ? styles.inputError : styles.input}
+      value={email}
+      onChangeText={updateEmail}
+    />
+    {!!error && (
+      <Typography color={lightTheme.colors.danger} style={styles.error}>
+        {error}
+      </Typography>
+    )}
+  </Container>
+);
+
+const styles = StyleSheet.create({
+  input: {
+    borderColor: lightTheme.colors.palette.grey400,
+  },
+  inputError: {
+    borderColor: lightTheme.colors.danger,
+  },
+  error: {
+    paddingTop: moderateScale(2),
+  },
+});
+
+export default Email;

package/src/screens/team_members/LoadingCard.tsx

@@ -0,0 +1,75 @@
+import React, { useMemo } from "react";
+import { StyleSheet, useWindowDimensions } from "react-native";
+
+import { Container, lightTheme } from "@bigbinary/neetoui-rn";
+import ContentLoader, { Rect, Circle } from "react-content-loader/native";
+
+import { LOADING_CARD } from "./constants";
+
+import { moderateScale } from "../../helpers/scale";
+
+export const LoadingCard = () => {
+  const { width } = useWindowDimensions();
+
+  const dimensions = useMemo(
+    () => ({
+      width: moderateScale(width * 0.7),
+      titleWidth: moderateScale(width * 0.6),
+      subtitleWidth: moderateScale(width * 0.4),
+    }),
+    [width]
+  );
+
+  return (
+    <Container style={styles.card}>
+      <ContentLoader
+        backgroundColor={lightTheme.colors.background.primary}
+        foregroundColor={lightTheme.colors.palette.grey200}
+        height={moderateScale(LOADING_CARD.CARD_HEIGHT)}
+        speed={1.2}
+        width={dimensions.width}
+      >
+        <Circle
+          cx={moderateScale(24)}
+          cy={moderateScale(24)}
+          r={moderateScale(24)}
+        />
+        <Rect
+          height={moderateScale(LOADING_CARD.TITLE_HEIGHT)}
+          rx={moderateScale(5)}
+          ry={moderateScale(5)}
+          width={dimensions.titleWidth}
+          x={moderateScale(60)}
+          y={moderateScale(5)}
+        />
+        <Rect
+          height={moderateScale(LOADING_CARD.SUBTITLE_HEIGHT)}
+          rx={moderateScale(5)}
+          ry={moderateScale(5)}
+          width={dimensions.subtitleWidth}
+          x={moderateScale(60)}
+          y={moderateScale(27)}
+        />
+        <Rect
+          height={moderateScale(LOADING_CARD.SUBTITLE_HEIGHT)}
+          rx={moderateScale(5)}
+          ry={moderateScale(5)}
+          width={dimensions.subtitleWidth}
+          x={moderateScale(60)}
+          y={moderateScale(45)}
+        />
+      </ContentLoader>
+    </Container>
+  );
+};
+
+LoadingCard.displayName = "LoadingCard";
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: lightTheme.colors.background.secondary,
+    borderRadius: moderateScale(8),
+    marginBottom: moderateScale(12),
+    padding: moderateScale(12),
+  },
+});

package/src/screens/team_members/ProductSelect.tsx

@@ -0,0 +1,218 @@
+import React, { useState, type ComponentType } from "react";
+import { Pressable, StyleSheet } from "react-native";
+
+import { findIndexBy } from "@bigbinary/neeto-cist";
+import { Down } from "@bigbinary/neeto-icons-rn";
+import {
+  BottomSheet as UIBottomSheet,
+  Container,
+  Divider,
+  lightTheme,
+  Typography,
+  Touchable,
+  type BottomSheetProps,
+} from "@bigbinary/neetoui-rn";
+import { type FormikProps } from "formik";
+import { mergeRight } from "ramda";
+
+import Checkbox from "./Checkbox";
+import { APP_NAME } from "./constants";
+import {
+  type AddTeamMemberFormValues,
+  type GlobalRolesByApp,
+  type ProductRole,
+} from "./utils";
+
+import { ToggleSwitch } from "../../components/ToggleSwitch";
+import { moderateScale } from "../../helpers/scale";
+
+/** One selectable role inside the per-product dropdown sheet. */
+interface RoleSheetItem {
+  label: string;
+  value: string;
+}
+
+// `isVisible` starts out null here, which v3 narrowed to `boolean`.
+const BottomSheet = UIBottomSheet as ComponentType<
+  Omit<BottomSheetProps<RoleSheetItem>, "isVisible"> & {
+    isVisible: boolean | null;
+  }
+>;
+
+interface ProductSelectProps {
+  values: AddTeamMemberFormValues;
+  globalRoles: GlobalRolesByApp;
+  setFieldValue: FormikProps<AddTeamMemberFormValues>["setFieldValue"];
+}
+
+const ProductSelect = ({
+  // The empty defaults have never been exercised — Add always supplies both.
+  values = {} as AddTeamMemberFormValues,
+  globalRoles = {},
+  setFieldValue,
+}: ProductSelectProps) => {
+  const otherProducts = values?.otherProducts ?? true;
+  const [openDropdown, setOpenDropdown] = useState<boolean | null>(null);
+  const [selectedAppName, setSelectedAppName] = useState<string | null>(null);
+
+  const updateProduct = (appName: string, object: Partial<ProductRole>) => {
+    const products = values?.products || [];
+    const selectedProductIndex = findIndexBy({ app_name: appName }, products);
+
+    if (selectedProductIndex !== -1) {
+      const newValues = mergeRight(products[selectedProductIndex], object);
+      setFieldValue(`products.${selectedProductIndex}`, newValues);
+    }
+  };
+
+  const handleProductSelect = (appName: string, selected: boolean) => {
+    updateProduct(appName, { is_enabled: selected });
+
+    const hasAnyEnabled = values?.products
+      ?.filter(product => product.app_name !== APP_NAME)
+      ?.some(product =>
+        product.app_name === appName ? selected : product.is_enabled
+      );
+
+    if (values.otherProducts !== hasAnyEnabled) {
+      setFieldValue("otherProducts", hasAnyEnabled);
+    }
+  };
+
+  const handleRoleSelect = (appName: string, role: string) => {
+    updateProduct(appName, { active_role: role });
+  };
+
+  const handleToggleOtherProducts = (selected: boolean) => {
+    setFieldValue("otherProducts", selected);
+    setFieldValue(
+      "products",
+      values?.products?.map(product => ({
+        ...product,
+        is_enabled: product.app_name === APP_NAME ? true : selected,
+      }))
+    );
+  };
+
+  return (
+    <Container style={styles.container}>
+      <Container style={styles.toggleRow}>
+        <ToggleSwitch
+          value={otherProducts}
+          onValueChange={handleToggleOtherProducts}
+        />
+        <Typography style={styles.toggleLabel}>
+          Add <Typography weight="bold">{values?.email}</Typography> to the
+          following Neeto products.
+        </Typography>
+      </Container>
+      <Divider style={styles.divider} />
+      {values?.products.map(({ app_name, active_role, is_enabled }) => (
+        <Container key={app_name} style={styles.productList}>
+          <Checkbox
+            disabled={app_name === APP_NAME}
+            label={app_name}
+            value={is_enabled}
+            onValueChange={value => handleProductSelect(app_name, value)}
+          />
+          <Pressable
+            disabled={app_name === APP_NAME || !is_enabled}
+            style={styles.dropdown}
+            onPress={() => {
+              setSelectedAppName(app_name);
+              setOpenDropdown(true);
+            }}
+          >
+            <Typography
+              style={{
+                color: is_enabled
+                  ? lightTheme.colors.text.primary
+                  : lightTheme.colors.palette.grey600,
+              }}
+            >
+              {active_role}
+            </Typography>
+            <Down
+              size={moderateScale(22)}
+              color={
+                is_enabled
+                  ? lightTheme.colors.text.primary
+                  : lightTheme.colors.palette.grey600
+              }
+            />
+          </Pressable>
+        </Container>
+      ))}
+      <BottomSheet
+        isVisible={openDropdown}
+        ContentRow={({ item: { label }, onPress }) => (
+          <Touchable style={styles.roleRow} onPress={onPress}>
+            <Typography>{label}</Typography>
+          </Touchable>
+        )}
+        // `selectedAppName` is only null while the sheet is closed; the lookup
+        // and the role update below both ran with null before too (JS coerces
+        // it to the "null" key, which never matches).
+        data={globalRoles[selectedAppName as string]?.map(role => ({
+          label: role.name,
+          value: role.name,
+        }))}
+        hide={() => {
+          setSelectedAppName(null);
+          setOpenDropdown(false);
+        }}
+        onBackdropPress={() => {
+          setSelectedAppName(null);
+          setOpenDropdown(false);
+        }}
+        onItemPress={({ item }) =>
+          handleRoleSelect(selectedAppName as string, item.value)
+        }
+      />
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: moderateScale(8),
+  },
+  toggleRow: {
+    alignItems: "center",
+    columnGap: moderateScale(16),
+    flex: 1,
+    flexDirection: "row",
+    marginBottom: moderateScale(16),
+    maxWidth: "80%",
+  },
+  toggleLabel: {
+    flexWrap: "wrap",
+  },
+  divider: {
+    backgroundColor: lightTheme.colors.palette.grey200,
+  },
+  roleRow: {
+    paddingVertical: moderateScale(12),
+  },
+  productList: {
+    flex: 1,
+    flexDirection: "row",
+    maxWidth: "100%",
+    borderBottomWidth: 2,
+    paddingVertical: moderateScale(16),
+    borderBottomColor: lightTheme.colors.palette.grey200,
+    justifyContent: "space-between",
+    alignContent: "space-between",
+    alignItems: "center",
+  },
+  dropdown: {
+    flex: 1,
+    minWidth: 200,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    columnGap: moderateScale(6),
+  },
+});
+
+export default ProductSelect;