@bigbinary/neeto-commons-rn 1.8.4 → 2.0.2

package/src/hooks/usePushNotificationPermissions.ts

@@ -0,0 +1,111 @@
+import { useEffect, useState, useCallback } from "react";
+import { AppState, Platform } from "react-native";
+
+import {
+  RESULTS,
+  checkNotifications,
+  requestNotifications,
+  type PermissionStatus,
+} from "react-native-permissions";
+
+import { bugsnagErrorHandler } from "../config/bugsnag";
+import { STORAGE_KEYS } from "../constants";
+import { getItem, setItem } from "../helpers/asyncStore";
+
+export const usePushNotificationPermissions = () => {
+  const [appState, setAppState] = useState(AppState.currentState);
+  const [notificationPermission, setNotificationPermission] = useState(false);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", nextAppState => {
+      setAppState(nextAppState);
+    });
+
+    return () => {
+      subscription?.remove();
+    };
+  }, []);
+
+  const checkNotificationPermission = useCallback(async (): Promise<{
+    isGranted: boolean;
+    status?: PermissionStatus;
+  }> => {
+    try {
+      if (Platform.OS === "android" && Platform.Version < 33) {
+        return { isGranted: true };
+      }
+
+      const { status } = await checkNotifications();
+
+      return {
+        isGranted: status === RESULTS.GRANTED,
+        status,
+      };
+    } catch (error) {
+      bugsnagErrorHandler(JSON.stringify(error), "notification");
+
+      return { isGranted: false };
+    }
+  }, []);
+
+  const requestNotificationPermission = useCallback(async () => {
+    try {
+      const permissionRequested = await getItem(
+        STORAGE_KEYS.NOTIFICATION_PERMISSION_REQUESTED
+      );
+
+      if (permissionRequested !== null) {
+        return false;
+      }
+
+      const { status } = await requestNotifications([
+        "alert",
+        "sound",
+        "badge",
+      ]);
+
+      if (status === RESULTS.GRANTED) {
+        await setItem(STORAGE_KEYS.NOTIFICATION_PERMISSION_REQUESTED, true);
+
+        return true;
+      }
+      await setItem(STORAGE_KEYS.NOTIFICATION_PERMISSION_REQUESTED, false);
+
+      return false;
+    } catch (error) {
+      bugsnagErrorHandler(JSON.stringify(error), "notification");
+
+      return false;
+    }
+  }, []);
+
+  useEffect(() => {
+    const handlePermissions = async () => {
+      try {
+        const { isGranted, status } = await checkNotificationPermission();
+
+        if (isGranted) {
+          setNotificationPermission(true);
+
+          return;
+        }
+
+        if (status === RESULTS.DENIED) {
+          const granted = await requestNotificationPermission();
+          setNotificationPermission(granted);
+        } else {
+          setNotificationPermission(false);
+        }
+      } catch (error) {
+        bugsnagErrorHandler(JSON.stringify(error), "notification");
+        setNotificationPermission(false);
+      }
+    };
+
+    if (appState === "active") {
+      handlePermissions();
+    }
+  }, [appState, checkNotificationPermission, requestNotificationPermission]);
+
+  return [notificationPermission];
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./components";
+export * from "./store";
+export * from "./hooks";
+export * from "./constants";
+export * from "./screens";
+export * from "./slices";
+export * from "./contexts";
+export * from "./initializers";

package/src/initializers/index.ts

@@ -0,0 +1,3 @@
+import { logRocket } from "./logRocket";
+
+export { logRocket };

package/src/initializers/logRocket.ts

@@ -0,0 +1,25 @@
+import LogRocket from "@logrocket/react-native";
+import Config from "react-native-config";
+
+import { Store } from "../store";
+
+export const logRocket = () => {
+  if (!Config.LOG_ROCKET_API_KEY || __DEV__) return;
+
+  const { isLoggedIn, userId, name, email, subdomain } = Store.getState().auth;
+
+  LogRocket.init(Config.LOG_ROCKET_API_KEY);
+
+  if (!isLoggedIn) {
+    //End the current session gracefully during logout
+    LogRocket.shutdown();
+    // Reinitialize LogRocket to capture the login screen after logout
+    LogRocket.init(Config.LOG_ROCKET_API_KEY);
+  } else {
+    LogRocket.identify(userId, {
+      name,
+      email,
+      organization: subdomain,
+    });
+  }
+};

package/src/localization/i18n.ts

@@ -0,0 +1,19 @@
+import i18next, { type i18n as I18nInstance } from "i18next";
+import { initReactI18next } from "react-i18next";
+
+// Annotated rather than inferred: the emitted declaration has to be able to
+// name this type without pointing back into node_modules.
+const i18n: I18nInstance = i18next.createInstance();
+
+// initAsync: false makes init synchronous, so the provider can build the
+// strings facade on first render without a loading state. i18next 25 renamed
+// this from initImmediate; the old name was silently ignored.
+i18n.use(initReactI18next).init({
+  lng: "en",
+  fallbackLng: "en",
+  resources: {},
+  interpolation: { escapeValue: false },
+  initAsync: false,
+});
+
+export { i18n };

package/src/localization/index.ts

@@ -0,0 +1,14 @@
+import en from "./translations/en.json";
+
+// The English catalog is the source of truth for the key set; other locales
+// are partial overlays on top of it.
+export type CommonsCatalog = typeof en;
+
+const strings: { en: CommonsCatalog } & Record<
+  string,
+  Partial<CommonsCatalog>
+> = {
+  en,
+};
+
+export { strings };

package/src/navigation/navigationService.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+import { type NavigationContainerRef } from "@react-navigation/native";
+
+// The host app owns the route tree, so commons can only describe it as
+// "some route name, with some params".
+type AnyParamList = Record<string, object | undefined>;
+
+type NavigationRef =
+  React.RefObject<NavigationContainerRef<AnyParamList> | null>;
+
+interface ResetRoute {
+  name: string;
+  params?: object;
+}
+
+export const navigationRef: NavigationRef =
+  React.createRef<NavigationContainerRef<AnyParamList>>();
+
+// The host app's NavigationContainer ref. Held as the ref object itself (not a
+// copy of `.current`) so reads stay live no matter when the container mounts.
+let hostNavigationRef = navigationRef;
+
+export const setHostNavigationRef = (ref?: NavigationRef | null) => {
+  if (ref) hostNavigationRef = ref;
+};
+
+export function navigate(name: string, params?: object) {
+  hostNavigationRef.current?.navigate(name, params);
+}
+
+export function reset(routes: ResetRoute | ResetRoute[]) {
+  hostNavigationRef.current?.reset({
+    index: 0,
+    routes: Array.isArray(routes) ? routes : [routes],
+  });
+}

package/src/navigation/screenNames.ts

@@ -0,0 +1,11 @@
+// Disabling this rule as we don't want to mix SCREEN_NAMES with constants
+/* eslint-disable @bigbinary/neeto/no-dangling-constants */
+export const SCREEN_NAMES = {
+  Login: "Login",
+  OTPVerification: "OTPVerification",
+  SubDomain: "SubDomain",
+  UnBoarded: "UnBoarded",
+  ChatWidget: "ChatWidget",
+  AddTeamMemberScreen: "AddTeamMemberScreen",
+  EditTeamMemberScreen: "EditTeamMemberScreen",
+} as const;

package/src/navigation/stacks.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+
+import { SCREEN_NAMES } from "./screenNames";
+import { type CommonsParamList } from "./types";
+
+import {
+  IncompleteOnboardingInfo,
+  OTPVerificationScreen,
+  SubDomainScreen,
+  LoginScreen,
+} from "../screens";
+
+const Stack = createNativeStackNavigator<CommonsParamList>();
+
+export const AuthStack = () => (
+  <Stack.Navigator screenOptions={{ headerShown: false }}>
+    <Stack.Screen component={LoginScreen} name={SCREEN_NAMES.Login} />
+    <Stack.Screen
+      component={OTPVerificationScreen}
+      name={SCREEN_NAMES.OTPVerification}
+    />
+    <Stack.Screen component={SubDomainScreen} name={SCREEN_NAMES.SubDomain} />
+    <Stack.Screen
+      component={IncompleteOnboardingInfo}
+      name={SCREEN_NAMES.UnBoarded}
+    />
+  </Stack.Navigator>
+);

package/src/navigation/types.ts

@@ -0,0 +1,19 @@
+import { type NativeStackScreenProps } from "@react-navigation/native-stack";
+
+import { type TeamMember } from "../api/team_members";
+import { type Organization } from "../slices/auth";
+
+// The screens commons itself registers. A host app's navigator is a superset
+// of this; commons only ever navigates to its own routes.
+export type CommonsParamList = {
+  Login: undefined;
+  OTPVerification: { email: string; userId: string };
+  SubDomain: { organizations: Organization[] };
+  UnBoarded: { name: string; subdomain: string };
+  ChatWidget: undefined;
+  AddTeamMemberScreen: undefined;
+  EditTeamMemberScreen: { member: TeamMember };
+};
+
+export type CommonsScreenProps<T extends keyof CommonsParamList> =
+  NativeStackScreenProps<CommonsParamList, T>;

package/src/providers/NeetoCommonsRNProvider.tsx

@@ -0,0 +1,77 @@
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  type ReactNode,
+} from "react";
+
+import { type NavigationContainerRef } from "@react-navigation/native";
+import { Provider } from "react-redux";
+import { type Reducer } from "redux";
+import { PersistGate } from "redux-persist/integration/react";
+
+import { initializeConfigs } from "../config";
+import {
+  LocalizationProvider,
+  type HostStrings,
+} from "../contexts/localization";
+import {
+  navigationRef,
+  setHostNavigationRef,
+} from "../navigation/navigationService";
+import { setAppName } from "../slices/auth";
+import { Persistor, Store } from "../store";
+import { updateRootReducer } from "../store/utils";
+
+initializeConfigs();
+
+export interface NeetoCommonsRNProviderProps {
+  appName: string;
+  hostNavigationRef?: React.RefObject<NavigationContainerRef<
+    Record<string, object | undefined>
+  > | null>;
+  hostStrings?: HostStrings;
+  hostRootReducer: Record<string, Reducer>;
+  blacklistedReducers?: string[];
+  children?: ReactNode;
+}
+
+export const NeetoCommonsRNProvider = ({
+  appName,
+  hostNavigationRef,
+  hostStrings,
+  hostRootReducer,
+  blacklistedReducers,
+  children,
+}: NeetoCommonsRNProviderProps) => {
+  const prevReducersRef = useRef<Record<string, Reducer> | null>(null);
+  const prevBlacklistRef = useRef<string[] | undefined>(undefined);
+  if (
+    prevReducersRef.current !== hostRootReducer ||
+    prevBlacklistRef.current !== blacklistedReducers
+  ) {
+    prevReducersRef.current = hostRootReducer;
+    prevBlacklistRef.current = blacklistedReducers;
+    updateRootReducer({ reducers: hostRootReducer, blacklistedReducers });
+  }
+
+  useLayoutEffect(() => {
+    setHostNavigationRef(hostNavigationRef);
+
+    return () => setHostNavigationRef(navigationRef);
+  }, [hostNavigationRef]);
+
+  useEffect(() => {
+    Store.dispatch(setAppName({ appName }));
+  }, [appName]);
+
+  return (
+    <Provider store={Store}>
+      <PersistGate loading={null} persistor={Persistor}>
+        <LocalizationProvider hostStrings={hostStrings}>
+          {children}
+        </LocalizationProvider>
+      </PersistGate>
+    </Provider>
+  );
+};

package/src/providers/index.ts

@@ -0,0 +1 @@
+export { NeetoCommonsRNProvider } from "./NeetoCommonsRNProvider";

package/src/screens/NotificationsScreen.tsx

@@ -0,0 +1,290 @@
+import React, { useMemo, type ComponentType, type ReactElement } from "react";
+import {
+  ActivityIndicator,
+  SectionList,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+
+import {
+  Container,
+  Divider,
+  Loader,
+  ParentView,
+  Touchable,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+import dayjs from "dayjs";
+
+import { type NotificationItem } from "../api/notifications";
+import { EmptyView, Header } from "../components";
+import { dateTimeFormats } from "../constants";
+import { formatDateTime } from "../helpers";
+import { moderateScale } from "../helpers/scale";
+import { openDeepLinkingUrl } from "../helpers/utils";
+import { useLocalization } from "../hooks";
+import { useNotification } from "../hooks/query/useNotification";
+
+/** One day's worth of notifications, as the SectionList consumes them. */
+interface NotificationSection {
+  title: string;
+  data: NotificationItem[];
+}
+
+const renderFooter = () => (
+  <Container style={styles.footer}>
+    <ActivityIndicator color={lightTheme.colors.palette.grey800} size="small" />
+  </Container>
+);
+
+interface NotificationListItemProps {
+  notification: NotificationItem;
+  CustomNotificationContent?: ComponentType<{
+    notification: NotificationItem;
+  }> | null;
+  itemStyles?: StyleProp<ViewStyle>;
+  markAllLoading?: boolean;
+}
+
+const NotificationListItem = ({
+  notification,
+  CustomNotificationContent = null,
+  itemStyles = {},
+  markAllLoading,
+}: NotificationListItemProps) => {
+  const { useMarkReadUnreadNotification } = useNotification();
+
+  const { mutate: markReadUnreadNotification } =
+    useMarkReadUnreadNotification();
+
+  return (
+    <>
+      <Touchable
+        disabled={markAllLoading}
+        style={[
+          styles.item,
+          notification.read_at ? styles.itemRead : styles.itemUnread,
+          itemStyles,
+        ]}
+        onPress={() => {
+          if (!notification.read_at) {
+            markReadUnreadNotification({
+              readAt: dayjs().toISOString(),
+              notificationId: notification.id,
+            });
+          }
+          openDeepLinkingUrl(notification.url);
+        }}
+      >
+        {CustomNotificationContent ? (
+          <CustomNotificationContent {...{ notification }} />
+        ) : (
+          <>
+            <Typography size="s" style={styles.itemBody} weight="medium">
+              {notification.body}
+            </Typography>
+            <Container style={styles.itemTitleRow}>
+              <Typography
+                color={lightTheme.colors.palette.grey500}
+                size="s"
+                style={styles.itemTitle}
+                weight="regular"
+              >
+                {notification.title}
+              </Typography>
+            </Container>
+            <Typography
+              color={lightTheme.colors.palette.grey500}
+              size="xs"
+              style={styles.itemTimestamp}
+              weight="regular"
+            >
+              {formatDateTime.fromNow(notification.created_at)}
+            </Typography>
+          </>
+        )}
+      </Touchable>
+      <Divider
+        orientation="horizontal"
+        style={styles.itemDivider}
+        thickness={1}
+      />
+    </>
+  );
+};
+
+export interface NotificationsScreenProps {
+  CustomNotificationContent?: ComponentType<{
+    notification: NotificationItem;
+  }> | null;
+  itemStyles?: StyleProp<ViewStyle>;
+}
+
+export const NotificationsScreen = ({
+  CustomNotificationContent = null,
+  itemStyles = [],
+}: NotificationsScreenProps) => {
+  const { useFetchNotifications, useMarkAllReadNotification } =
+    useNotification();
+
+  const {
+    data: { notifications, totalNotifications } = {},
+    isPending: isNotificationsLoading,
+    refetch: refetchSubmissions,
+    isRefetching: notificationsRefetching,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useFetchNotifications();
+
+  const { mutate: markAllRead, isPending: isMarkingAllRead } =
+    useMarkAllReadNotification();
+  const { strings } = useLocalization();
+  const markAllLoading = isMarkingAllRead || notificationsRefetching;
+
+  const unreadNotifications = useMemo(
+    () => notifications?.filter(n => !n.read_at) || [],
+    [notifications]
+  );
+
+  const sectionedNotifications = useMemo(
+    () =>
+      notifications?.reduce<NotificationSection[]>((sections, notification) => {
+        const title = dayjs(notification.created_at).format(
+          dateTimeFormats.dateWeek
+        );
+        const sectionExists = sections.find(section => section.title === title);
+        if (!sectionExists) {
+          sections.push({
+            title,
+            data: [notification],
+          });
+
+          return sections;
+        }
+        sectionExists.data.push(notification);
+
+        return sections;
+      }, []),
+    [notifications]
+  );
+
+  const handleMarkAllAsRead = () =>
+    markAllRead(undefined, {
+      // eslint-disable-next-line no-console
+      onError: e => console.error("mark-all-read failed", e),
+    });
+
+  return (
+    <ParentView barStyle="dark-content">
+      <Header
+        canGoBack
+        isLoading={markAllLoading}
+        showMarkAllOption={unreadNotifications.length > 0}
+        title="Notifications"
+        onMarkAllAsRead={handleMarkAllAsRead}
+      />
+      {isNotificationsLoading ? (
+        <Container style={styles.loaderWrapper}>
+          <Loader />
+        </Container>
+      ) : (
+        <SectionList
+          keyExtractor={({ id }, index) => id + index}
+          refreshing={notificationsRefetching}
+          sections={sectionedNotifications || []}
+          // Both slots receive `false` rather than null while the condition is
+          // unmet; VirtualizedList only tests them for truthiness, so nothing
+          // renders — as before. React's types admit only a component/element.
+          ListEmptyComponent={
+            (totalNotifications === 0 && (
+              <EmptyView
+                title={strings.commons.notificationScreen.empty.title}
+              />
+            )) as unknown as ReactElement
+          }
+          ListFooterComponent={
+            (isFetchingNextPage && renderFooter) as unknown as ComponentType
+          }
+          renderItem={({ item: notification }) => (
+            <NotificationListItem
+              {...{
+                notification,
+                CustomNotificationContent,
+                itemStyles,
+                markAllLoading,
+              }}
+            />
+          )}
+          renderSectionHeader={({ section: { title } }) => (
+            // `flexDirection="col"` is not a React Native value; it resolved
+            // to the default `column`, which is what the style now states.
+            <Container style={styles.sectionHeader}>
+              <Typography
+                color={lightTheme.colors.palette.grey700}
+                size="xs"
+                style={styles.sectionHeaderText}
+                weight="medium"
+              >
+                {title}
+              </Typography>
+            </Container>
+          )}
+          onEndReached={() => hasNextPage && fetchNextPage()}
+          onEndReachedThreshold={0.2}
+          onRefresh={refetchSubmissions}
+        />
+      )}
+    </ParentView>
+  );
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    marginBottom: moderateScale(3),
+    marginTop: moderateScale(2),
+  },
+  item: {
+    paddingHorizontal: moderateScale(16),
+    paddingVertical: moderateScale(12),
+  },
+  itemRead: {
+    backgroundColor: lightTheme.colors.white,
+  },
+  itemUnread: {
+    backgroundColor: lightTheme.colors.palette.purple200,
+  },
+  itemBody: {
+    marginBottom: moderateScale(4),
+  },
+  itemTitleRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingTop: moderateScale(1),
+  },
+  itemTitle: {
+    flex: 1,
+  },
+  itemTimestamp: {
+    alignSelf: "flex-end",
+  },
+  itemDivider: {
+    backgroundColor: lightTheme.colors.palette.grey200,
+  },
+  loaderWrapper: {
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+  },
+  sectionHeader: {
+    flexDirection: "column",
+  },
+  sectionHeaderText: {
+    backgroundColor: lightTheme.colors.white,
+    marginBottom: moderateScale(8),
+    paddingLeft: moderateScale(16),
+    paddingTop: moderateScale(18),
+  },
+});