@bigbinary/neeto-commons-rn 1.8.4 → 2.0.2

package/src/screens/profile/ProfileScreen.tsx

@@ -0,0 +1,251 @@
+import React, { type ReactNode } from "react";
+import { Linking, ScrollView, StyleSheet } from "react-native";
+
+import { LeftArrow, Help } from "@bigbinary/neeto-icons-rn";
+import {
+  Typography,
+  Container,
+  Alert,
+  ParentView,
+  Button,
+  Loader,
+  Touchable,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+import { GoogleSignin } from "@react-native-google-signin/google-signin";
+import Config from "react-native-config";
+import DeviceInfo from "react-native-device-info";
+
+import { UserData } from "./UserData";
+
+import { Header } from "../../components";
+import {
+  NotificationPreferenceList,
+  type NotificationPreference,
+} from "../../components/NotificationPreferenceList";
+import { STORAGE_KEYS } from "../../constants";
+import { getItem } from "../../helpers/asyncStore";
+import { removeSecureValue } from "../../helpers/keychain";
+import { moderateScale } from "../../helpers/scale";
+import { useLocalization } from "../../hooks";
+import { useNotification } from "../../hooks/query/useNotification";
+import { useFetchProfileDetails } from "../../hooks/query/useProfile";
+import { logoutUserAction } from "../../slices/auth";
+import { useAppDispatch } from "../../store/hooks";
+
+export interface ProfileScreenProps {
+  canGoBack?: boolean;
+  notificationPreferencesData?: NotificationPreference[];
+  hasNotificationPermission?: boolean;
+  isNotificationPreferencesUpdating?: boolean;
+  children?: ReactNode;
+  openChatWidget?: (() => void) | null;
+}
+
+export const ProfileScreen = ({
+  canGoBack = false,
+  notificationPreferencesData,
+  hasNotificationPermission,
+  isNotificationPreferencesUpdating,
+  children,
+  openChatWidget = null,
+}: ProfileScreenProps) => {
+  const { strings } = useLocalization();
+  const dispatch = useAppDispatch();
+
+  const { useDeleteTokenMutation } = useNotification();
+  const { mutate: deleteToken, isPending: isDeletingToken } =
+    useDeleteTokenMutation();
+
+  const { data: userDetails } = useFetchProfileDetails();
+
+  const handleNotificationSettings = async () => await Linking.openSettings();
+
+  const handleLogout = async () => {
+    const googleSignedIn = GoogleSignin.hasPreviousSignIn();
+
+    if (googleSignedIn) {
+      await GoogleSignin.signOut();
+    }
+
+    const deviceNotificationId = await getItem<string>(
+      STORAGE_KEYS.DEVICE_TOKEN
+    );
+
+    if (deviceNotificationId) {
+      deleteToken(deviceNotificationId);
+    } else {
+      await removeSecureValue("userAuth");
+      dispatch(logoutUserAction());
+    }
+  };
+
+  const openConfirmLogoutAlert = () => {
+    Alert.show({
+      title: strings.commons.confirmMessage.Logout.title,
+      description: strings.commons.confirmMessage.Logout.message,
+      buttons: [
+        {
+          label: strings.commons.confirmMessage.Logout.title,
+          onPress: handleLogout,
+          variant: "danger",
+        },
+        { label: strings.commons.buttons.noCancel, onPress: () => {} },
+      ],
+    });
+  };
+
+  return (
+    // v2's `flex={1}` is dropped: v3's ParentView already fills its parent.
+    <ParentView barStyle="dark-content" bottomInset={false}>
+      <Header canGoBack={canGoBack} title={strings.commons.headers.Settings} />
+      <ScrollView
+        contentContainerStyle={styles.scrollContentContainer}
+        showsVerticalScrollIndicator={false}
+      >
+        <Container>
+          <UserData {...{ userDetails }} />
+          {hasNotificationPermission ? (
+            <NotificationPreferenceList
+              data={notificationPreferencesData}
+              isLoading={isNotificationPreferencesUpdating}
+              title={strings.commons.profileScreen.notifyTitle}
+            />
+          ) : (
+            !isNotificationPreferencesUpdating && (
+              <Container style={styles.notificationsDisabled}>
+                <Typography
+                  size="3xl"
+                  style={styles.notificationsDisabledTitle}
+                  weight="semibold"
+                >
+                  {strings.commons.disabledNotifications.title}
+                </Typography>
+                <Typography
+                  color={lightTheme.colors.palette.grey500}
+                  size="s"
+                  style={styles.notificationsDisabledDescription}
+                >
+                  {strings.commons.disabledNotifications.description.replace(
+                    "{0}",
+                    Config.APP_DISPLAY_NAME as string
+                  )}
+                </Typography>
+                <Button
+                  label={strings.commons.disabledNotifications.button}
+                  labelStyle={styles.notificationSettingsButtonLabel}
+                  style={styles.notificationSettingsButton}
+                  onPress={handleNotificationSettings}
+                />
+              </Container>
+            )
+          )}
+          {children}
+          {openChatWidget && (
+            <Touchable style={styles.helpButton} onPress={openChatWidget}>
+              <Typography style={styles.helpButtonLabel}>
+                {strings.commons.buttons.helpAndSupport}
+              </Typography>
+              <Help
+                color={lightTheme.colors.text.primary}
+                size={moderateScale(22)}
+                viewBox="0 0 25 25"
+              />
+            </Touchable>
+          )}
+        </Container>
+        <Container style={styles.footer}>
+          <Typography
+            color={lightTheme.colors.palette.grey600}
+            size="s"
+            weight="regular"
+          >
+            {Config.APP_DISPLAY_NAME} {strings.commons.common.version}
+            {DeviceInfo.getVersion()}
+          </Typography>
+          <Touchable
+            disabled={isDeletingToken}
+            style={styles.logoutButton}
+            onPress={openConfirmLogoutAlert}
+          >
+            {isDeletingToken ? (
+              <Loader size="s" />
+            ) : (
+              <LeftArrow
+                color={lightTheme.colors.text.primary}
+                size={moderateScale(20)}
+                viewBox="0 0 20 20"
+              />
+            )}
+            <Typography style={styles.logoutButtonLabel}>
+              {isDeletingToken
+                ? strings.commons.buttons.loggingOut
+                : strings.commons.buttons.Logout}
+            </Typography>
+          </Touchable>
+        </Container>
+      </ScrollView>
+    </ParentView>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollContentContainer: {
+    flexGrow: 1,
+    justifyContent: "space-between",
+    paddingBottom: moderateScale(16),
+    paddingHorizontal: moderateScale(16),
+  },
+  notificationsDisabled: {
+    alignItems: "center",
+    borderColor: lightTheme.colors.palette.grey300,
+    borderRadius: moderateScale(15),
+    borderWidth: moderateScale(1),
+    marginTop: moderateScale(10),
+    padding: moderateScale(18),
+  },
+  notificationsDisabledTitle: {
+    marginTop: moderateScale(10),
+  },
+  notificationsDisabledDescription: {
+    marginTop: moderateScale(10),
+    textAlign: "center",
+  },
+  notificationSettingsButton: {
+    borderRadius: moderateScale(10),
+    marginTop: moderateScale(24),
+    width: moderateScale(192),
+  },
+  notificationSettingsButtonLabel: {
+    fontSize: lightTheme.fontSizes.m,
+  },
+  helpButton: {
+    alignItems: "center",
+    flexDirection: "row",
+    backgroundColor: lightTheme.colors.background.secondary,
+    justifyContent: "space-between",
+    paddingVertical: moderateScale(12),
+    marginTop: moderateScale(24),
+    paddingHorizontal: moderateScale(12),
+  },
+  helpButtonLabel: {
+    fontFamily: lightTheme.fonts.regular,
+    fontSize: lightTheme.fontSizes.l,
+    textAlign: "left",
+  },
+  footer: {
+    marginTop: moderateScale(16),
+  },
+  logoutButton: {
+    alignItems: "center",
+    flexDirection: "row",
+    alignSelf: "flex-start",
+    marginLeft: -1,
+  },
+  logoutButtonLabel: {
+    color: lightTheme.colors.text.primary,
+    fontFamily: lightTheme.fonts.regular,
+    fontSize: lightTheme.fontSizes.xl,
+    marginLeft: moderateScale(6),
+  },
+});

package/src/screens/profile/UserData.tsx

@@ -0,0 +1,92 @@
+import React, { type ComponentType } from "react";
+import { StyleSheet } from "react-native";
+
+import {
+  Avatar as UIAvatar,
+  Typography,
+  Container,
+  lightTheme,
+  type AvatarProps,
+} from "@bigbinary/neetoui-rn";
+import Config from "react-native-config";
+
+import { type Profile } from "../../api/profile";
+import { OrganizationItem } from "../../components/OrganizationItem";
+import { moderateScale } from "../../helpers/scale";
+
+// The profile endpoint sends `null` for users without a picture; v3 narrowed
+// `imageUrl` to `string | undefined`.
+const Avatar = UIAvatar as ComponentType<
+  Omit<AvatarProps, "imageUrl"> & { imageUrl?: string | null }
+>;
+
+/**
+ * The profile endpoint also returns the split name fields and the
+ * organization block; `Profile` only declares the subset commons consumed
+ * before. See the migration report.
+ */
+export type ProfileDetails = Profile & {
+  first_name?: string;
+  last_name?: string;
+  organization?: { name?: string; subdomain?: string };
+};
+
+export interface UserDataProps {
+  userDetails?: ProfileDetails;
+}
+
+export const renderSubdomainURL = (subdomain: string) =>
+  `${subdomain}${Config.URL_SUFFIX}`;
+
+export const UserData = ({ userDetails }: UserDataProps) => (
+  <Container>
+    <Container style={styles.identity}>
+      <Container>
+        <Avatar
+          imageUrl={userDetails?.profile_image_url}
+          name={`${userDetails?.first_name || ""} ${
+            userDetails?.last_name || ""
+          }`}
+        />
+      </Container>
+      <Container style={styles.names}>
+        <Typography
+          color={lightTheme.colors.text.primary}
+          numberOfLines={2}
+          size="xl"
+          weight="semibold"
+        >
+          {userDetails?.first_name || ""} {userDetails?.last_name || ""}
+        </Typography>
+        <Typography color={lightTheme.colors.palette.grey700} weight="regular">
+          {userDetails?.email}
+        </Typography>
+      </Container>
+    </Container>
+    <Container style={styles.organization}>
+      <OrganizationItem
+        name={userDetails?.organization?.name || ""}
+        subdomain={
+          userDetails?.organization?.subdomain
+            ? renderSubdomainURL(userDetails?.organization?.subdomain)
+            : ""
+        }
+      />
+    </Container>
+  </Container>
+);
+
+const styles = StyleSheet.create({
+  identity: {
+    alignItems: "center",
+    flexDirection: "row",
+  },
+  names: {
+    flex: 1,
+    justifyContent: "space-between",
+    marginLeft: moderateScale(12),
+  },
+  organization: {
+    marginTop: moderateScale(30),
+  },
+});

package/src/screens/team_members/Add.tsx

@@ -0,0 +1,248 @@
+import React, { useState } from "react";
+import { StyleSheet } from "react-native";
+
+import { findIndexBy } from "@bigbinary/neeto-cist";
+import {
+  Button,
+  Container,
+  Loader,
+  ParentView,
+  ScrollView,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+import { useNavigation, type NavigationProp } from "@react-navigation/native";
+import { Formik, type FormikProps } from "formik";
+import * as Yup from "yup";
+
+import { APP_NAME } from "./constants";
+import Email from "./Email";
+import ProductSelect from "./ProductSelect";
+import RolesRadioGroup from "./RolesRadioGroup";
+import SaveButtons from "./SaveButtons";
+import {
+  getInitialValues,
+  type AddTeamMemberFormValues,
+  type GlobalRolesByApp,
+} from "./utils";
+
+import { type OrganizationRole } from "../../api/organization_roles";
+import { Header } from "../../components";
+import { moderateScale } from "../../helpers/scale";
+import {
+  useFetchGlobalRoles,
+  useFetchRoles,
+} from "../../hooks/query/useRolesApi";
+import { useCreateMember } from "../../hooks/query/useTeamMembersApi";
+import { type CommonsParamList } from "../../navigation/types";
+
+interface FormContentProps extends Pick<
+  FormikProps<AddTeamMemberFormValues>,
+  | "handleChange"
+  | "handleSubmit"
+  | "setFieldValue"
+  | "errors"
+  | "isValid"
+  | "values"
+  | "dirty"
+> {
+  currentStep: number;
+  setCurrentStep: (step: number) => void;
+  roles: OrganizationRole[];
+  globalRoles: GlobalRolesByApp;
+  isLoadingCreateMember: boolean;
+  navigation: NavigationProp<CommonsParamList>;
+}
+
+const FormContent = ({
+  currentStep,
+  setCurrentStep,
+  roles,
+  globalRoles,
+  isLoadingCreateMember,
+  handleChange,
+  handleSubmit,
+  setFieldValue,
+  errors,
+  isValid,
+  values,
+  dirty,
+  navigation,
+}: FormContentProps) => {
+  const handleRoleChange = (role: string) => {
+    setFieldValue("role", role);
+
+    const currentAppIndex = findIndexBy(
+      { app_name: APP_NAME },
+      values.products
+    );
+
+    if (currentAppIndex !== -1) {
+      setFieldValue(`products.${currentAppIndex}.active_role`, role);
+    }
+  };
+
+  return (
+    <>
+      <ScrollView>
+        <Container style={styles.container}>
+          {currentStep === 1 ? (
+            <>
+              <Email
+                autoFocus
+                email={values?.email}
+                error={errors?.email}
+                updateEmail={handleChange("email")}
+              />
+              <RolesRadioGroup
+                roles={roles}
+                selectedRole={values?.role}
+                updateRole={handleRoleChange}
+              />
+            </>
+          ) : (
+            <ProductSelect
+              globalRoles={globalRoles}
+              setFieldValue={setFieldValue}
+              values={values}
+            />
+          )}
+        </Container>
+      </ScrollView>
+      {currentStep === 1 ? (
+        <Container style={styles.footer}>
+          <Button
+            disabled={!isValid || !dirty}
+            label="Continue"
+            labelStyle={styles.continueButtonLabel}
+            style={styles.continueButton}
+            onPress={() => setCurrentStep(2)}
+          />
+        </Container>
+      ) : (
+        <SaveButtons
+          disabled={!isValid || !dirty}
+          isLoading={isLoadingCreateMember}
+          onCancel={() => navigation.goBack()}
+          onSave={handleSubmit}
+        />
+      )}
+    </>
+  );
+};
+
+const AddTeamMemberScreen = () => {
+  const navigation = useNavigation<NavigationProp<CommonsParamList>>();
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const { mutate: createMember, isPending: isLoadingCreateMember } =
+    useCreateMember({ onSuccess: () => navigation.goBack() });
+
+  const { data: roles = [], isPending: isLoadingRoles } = useFetchRoles();
+  const { data: globalRoles = {}, isPending: isLoadingGlobalRoles } =
+    useFetchGlobalRoles();
+
+  const handleBackPress = () => {
+    if (currentStep === 2) {
+      setCurrentStep(1);
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  const handleCreateMember = (values: AddTeamMemberFormValues) => {
+    const payload = {
+      emails: [values.email],
+      products: values.products,
+      organization_role: values.role,
+    };
+    createMember({ payload });
+  };
+
+  if (isLoadingRoles || isLoadingGlobalRoles) {
+    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="Add team member" />
+        <Container style={styles.loader}>
+          <Loader color={lightTheme.colors.primary} size="l" />
+        </Container>
+      </ParentView>
+    );
+  }
+
+  return (
+    <ParentView barStyle="dark-content">
+      <Header canGoBack title="Add team member" onBackPress={handleBackPress} />
+      <Formik
+        enableReinitialize
+        validateOnBlur
+        initialValues={getInitialValues(roles?.[1]?.name, globalRoles)}
+        validationSchema={Yup.object().shape({
+          email: Yup.string().email().required(),
+        })}
+        onSubmit={handleCreateMember}
+      >
+        {({
+          handleChange,
+          handleSubmit,
+          setFieldValue,
+          errors,
+          isValid,
+          values,
+          dirty,
+        }) => (
+          <FormContent
+            currentStep={currentStep}
+            dirty={dirty}
+            errors={errors}
+            globalRoles={globalRoles}
+            handleChange={handleChange}
+            handleSubmit={handleSubmit}
+            isLoadingCreateMember={isLoadingCreateMember}
+            isValid={isValid}
+            navigation={navigation}
+            roles={roles}
+            setCurrentStep={setCurrentStep}
+            setFieldValue={setFieldValue}
+            values={values}
+          />
+        )}
+      </Formik>
+    </ParentView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: moderateScale(16),
+    rowGap: moderateScale(16),
+    marginBottom: moderateScale(48),
+  },
+  loader: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+  },
+  footer: {
+    backgroundColor: lightTheme.colors.white,
+    bottom: 10,
+    columnGap: moderateScale(16),
+    flex: 1,
+    flexDirection: "row",
+    left: 0,
+    padding: moderateScale(16),
+    position: "absolute",
+    right: 0,
+    width: "100%",
+  },
+  continueButton: {
+    height: moderateScale(48),
+  },
+  continueButtonLabel: {
+    fontSize: lightTheme.fontSizes.m,
+  },
+});
+
+export default AddTeamMemberScreen;

package/src/screens/team_members/Card.tsx

@@ -0,0 +1,124 @@
+import React, { type ComponentType } from "react";
+import { StyleSheet, View } from "react-native";
+
+import { MenuVertical } from "@bigbinary/neeto-icons-rn";
+import {
+  Avatar as UIAvatar,
+  Container,
+  Touchable,
+  lightTheme,
+  Typography,
+  type AvatarProps,
+} from "@bigbinary/neetoui-rn";
+
+import { DEFAULT_ROLE_COLOR, ROLE_COLORS } from "./constants";
+
+import { type TeamMember } from "../../api/team_members";
+import { moderateScale } from "../../helpers/scale";
+
+// The list endpoint sends `null` for members without a picture; v3 narrowed
+// `imageUrl` to `string | undefined`.
+const Avatar = UIAvatar as ComponentType<
+  Omit<AvatarProps, "imageUrl"> & { imageUrl?: string | null }
+>;
+
+interface RolePillProps {
+  role: string;
+}
+
+const RolePill = ({ role }: RolePillProps) => {
+  const colors = ROLE_COLORS[role] || DEFAULT_ROLE_COLOR;
+
+  return (
+    <View style={[styles.pill, { backgroundColor: colors.bg }]}>
+      <Typography size="2xs" style={{ color: colors.text }} weight="medium">
+        {role}
+      </Typography>
+    </View>
+  );
+};
+
+interface CardProps {
+  member: TeamMember;
+  onPress: (member: TeamMember) => void;
+}
+
+const Card = ({ member, onPress }: CardProps) => (
+  <View style={styles.card}>
+    <Avatar
+      imageUrl={member?.profile_image_url}
+      name={member?.display_name || member?.name}
+    />
+    <Container style={styles.cardContent}>
+      <Container style={styles.nameRow}>
+        <Typography
+          numberOfLines={1}
+          size="l"
+          style={styles.name}
+          weight="medium"
+        >
+          {member?.display_name || member.name}
+        </Typography>
+        {member.role && <RolePill role={member.role} />}
+      </Container>
+      <Typography
+        color={lightTheme.colors.palette.grey500}
+        numberOfLines={1}
+        size="s"
+        weight="regular"
+      >
+        {member.email}
+      </Typography>
+    </Container>
+    <Touchable
+      rippleConfig={{ shouldOverflowContainer: true }}
+      style={styles.menuButton}
+      onPress={() => onPress(member)}
+    >
+      <MenuVertical
+        color={lightTheme.colors.palette.grey500}
+        size={moderateScale(20)}
+      />
+    </Touchable>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "transparent",
+    borderRadius: moderateScale(12),
+    borderWidth: 1,
+    borderColor: lightTheme.colors.border.primary,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: moderateScale(16),
+    paddingHorizontal: moderateScale(12),
+    columnGap: moderateScale(12),
+  },
+  cardContent: {
+    flex: 1,
+    rowGap: moderateScale(4),
+  },
+  nameRow: {
+    alignItems: "center",
+    columnGap: moderateScale(8),
+    flexDirection: "row",
+    flexShrink: 1,
+  },
+  name: {
+    flexShrink: 1,
+  },
+  menuButton: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: moderateScale(12),
+    paddingVertical: moderateScale(8),
+  },
+  pill: {
+    paddingHorizontal: moderateScale(8),
+    paddingVertical: moderateScale(2),
+    borderRadius: moderateScale(4),
+  },
+});
+
+export default Card;