@bigbinary/neeto-commons-rn 1.8.5 → 2.0.3

package/src/contexts/localization.tsx

@@ -0,0 +1,183 @@
+import React, {
+  useContext,
+  createContext,
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+  type ReactNode,
+} from "react";
+
+import { mergeDeepRight } from "ramda";
+
+import { getItem, setItem } from "../helpers/asyncStore";
+import {
+  strings as commonsCatalog,
+  type CommonsCatalog,
+} from "../localization";
+import { i18n } from "../localization/i18n";
+
+export type FormatStringArg = unknown;
+
+export type FormatString = (
+  template: string,
+  ...args: FormatStringArg[]
+) => string | Array<string | ReactNode>;
+
+// Host apps deep-merge their own catalogs in at the root, so the facade
+// cannot enumerate its own key set.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type HostStringsRoot = Record<string, any>;
+
+export type LocalizedStrings = HostStringsRoot & {
+  commons: CommonsCatalog;
+  formatString: FormatString;
+};
+
+export interface LocalizationValue {
+  strings: LocalizedStrings;
+  code: string;
+}
+
+export type ChangeLanguage = (languageCode: string) => void;
+
+// Locale code -> catalog, as a host app passes it in.
+export type HostStrings = Record<string, Record<string, unknown>>;
+
+const LocalizationContext = createContext<LocalizationValue | undefined>(
+  undefined
+);
+
+const LocalizationUpdateContext = createContext<ChangeLanguage | undefined>(
+  undefined
+);
+
+// Both hooks are only reachable under the provider, which always supplies a
+// value; the assertions keep consumers free of null checks.
+export const useLocalization = () =>
+  useContext(LocalizationContext) as LocalizationValue;
+
+export const useLocalizationUpdate = () =>
+  useContext(LocalizationUpdateContext) as ChangeLanguage;
+
+// Drop-in replacement for LocalizedStrings.formatString: supports positional
+// {0} tokens, named {token} tokens (single object argument), and returns an
+// array when any argument is a React element.
+export const formatString: FormatString = (template, ...args) => {
+  const named =
+    args.length === 1 &&
+    typeof args[0] === "object" &&
+    args[0] !== null &&
+    !React.isValidElement(args[0])
+      ? (args[0] as Record<string, unknown>)
+      : null;
+
+  const parts = String(template)
+    .split(/(\{[\w\d]+\})/g)
+    .filter(part => part !== "")
+    .map(part => {
+      const match = part.match(/^\{([\w\d]+)\}$/);
+      if (!match) return part;
+
+      const value = named ? named[match[1]] : args[Number(match[1])];
+
+      return value === undefined || value === null ? "" : value;
+    });
+
+  return parts.some(React.isValidElement)
+    ? (parts as Array<string | ReactNode>)
+    : parts.join("");
+};
+
+const buildStrings = (
+  language: string,
+  hostStrings: HostStrings = {}
+): LocalizedStrings => {
+  const commons = mergeDeepRight(
+    commonsCatalog.en,
+    commonsCatalog[language] ?? {}
+  ) as CommonsCatalog;
+
+  const host = mergeDeepRight(
+    hostStrings.en ?? {},
+    hostStrings[language] ?? {}
+  );
+
+  return { ...host, commons, formatString };
+};
+
+interface LocalizationProviderProps {
+  children?: ReactNode;
+  hostStrings?: HostStrings;
+  initialLanguage?: string;
+}
+
+export const LocalizationProvider = ({
+  children,
+  hostStrings = {},
+  initialLanguage = "en",
+}: LocalizationProviderProps) => {
+  const [language, setLanguage] = useState(initialLanguage);
+
+  const strings = useMemo(() => {
+    const languages = new Set([
+      "en",
+      ...Object.keys(commonsCatalog),
+      ...Object.keys(hostStrings),
+    ]);
+
+    languages.forEach(lang => {
+      i18n.addResourceBundle(
+        lang,
+        "commons",
+        mergeDeepRight(commonsCatalog.en, commonsCatalog[lang] ?? {}),
+        true,
+        true
+      );
+
+      i18n.addResourceBundle(
+        lang,
+        "host",
+        mergeDeepRight(hostStrings.en ?? {}, hostStrings[lang] ?? {}),
+        true,
+        true
+      );
+    });
+
+    return buildStrings(language, hostStrings);
+  }, [language, hostStrings]);
+
+  const changeLanguage = useCallback<ChangeLanguage>(languageCode => {
+    if (!languageCode) return;
+
+    i18n.changeLanguage(languageCode);
+    setItem("language", languageCode);
+    setLanguage(languageCode);
+  }, []);
+
+  useEffect(() => {
+    const restoreStoredLanguage = async () => {
+      try {
+        const storedLanguage = await getItem<string>("language");
+        if (storedLanguage) changeLanguage(storedLanguage);
+      } catch {
+        // Keep the initial language when restore fails.
+      }
+    };
+
+    restoreStoredLanguage();
+  }, [changeLanguage]);
+
+  const value = useMemo(
+    () => ({ strings, code: language }),
+    [strings, language]
+  );
+
+  return (
+    <LocalizationContext.Provider value={value}>
+      <LocalizationUpdateContext.Provider value={changeLanguage}>
+        {children}
+      </LocalizationUpdateContext.Provider>
+    </LocalizationContext.Provider>
+  );
+};

package/src/helpers/asyncStore.ts

@@ -0,0 +1,39 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const setItem = async (key: string, value: unknown) => {
+  try {
+    return await AsyncStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    return null;
+  }
+};
+
+// The stored value is whatever JSON the caller wrote, so callers name the
+// type they expect: getItem<string>(STORAGE_KEYS.DEVICE_TOKEN).
+const getItem = async <T = unknown>(key: string): Promise<T | null> => {
+  try {
+    const jsonValue = await AsyncStorage.getItem(key);
+
+    return jsonValue !== null ? (JSON.parse(jsonValue) as T) : null;
+  } catch {
+    return null;
+  }
+};
+
+const removeItem = async (key: string) => {
+  try {
+    return await AsyncStorage.removeItem(key);
+  } catch {
+    return null;
+  }
+};
+
+const getAllKeys = async () => {
+  try {
+    return await AsyncStorage.getAllKeys();
+  } catch {
+    return null;
+  }
+};
+
+export { setItem, getItem, removeItem, getAllKeys };

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export { formatDateTime } from "../config/dayjs";

package/src/helpers/keychain.ts

@@ -0,0 +1,46 @@
+import * as Keychain from "react-native-keychain";
+
+// To avoid calling keychain every time we are caching key & value in local cache variable.
+
+const cache: Record<string, string> = {};
+export const setSecureValue = async (key: string, value: string) => {
+  try {
+    await Keychain.setGenericPassword(key, value, { service: key });
+    cache[key] = value;
+  } catch {
+    return false;
+  }
+
+  return null;
+};
+
+export const getSecureValue = async (key: string) => {
+  if (cache[key]) {
+    return cache[key];
+  }
+
+  try {
+    const result = await Keychain.getGenericPassword({ service: key });
+    // getGenericPassword resolves to `false` when the service has no entry.
+    if (result && result.password) {
+      cache[key] = result.password;
+
+      return result.password;
+    }
+
+    return false;
+  } catch {
+    return false;
+  }
+};
+
+export const removeSecureValue = async (key: string) => {
+  try {
+    await Keychain.resetGenericPassword({ service: key });
+    delete cache[key];
+  } catch {
+    return false;
+  }
+
+  return null;
+};

package/src/helpers/notifications/apnsToken.ts

@@ -0,0 +1,69 @@
+import {
+  NativeEventEmitter,
+  NativeModules,
+  Platform,
+  type EmitterSubscription,
+} from "react-native";
+
+import { DEVICE_TOKEN_TIMEOUT_MS } from "./constants";
+import { type NeetoAPNSTokenModule } from "./types";
+
+// JS side of the NeetoAPNSToken native module (see
+// ios/neetoCommons/NeetoAPNSToken.m for the reference implementation apps
+// copy). iOS is Firebase-free: UIKit hands the APNs token to the AppDelegate,
+// which forwards it to the module; this resolves it to JS. Resolves null when
+// registration cannot complete (simulator, module not linked, timeout) — the
+// caller already treats a missing token as "skip registration".
+export const getAPNSToken = (): Promise<string | null> => {
+  const NeetoAPNSToken = NativeModules.NeetoAPNSToken as
+    NeetoAPNSTokenModule | undefined;
+
+  if (Platform.OS !== "ios" || !NeetoAPNSToken) return Promise.resolve(null);
+
+  return new Promise(resolve => {
+    const emitter = new NativeEventEmitter(
+      NeetoAPNSToken as unknown as ConstructorParameters<
+        typeof NativeEventEmitter
+      >[0]
+    );
+    let settled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let receivedSubscription: EmitterSubscription | null = null;
+    let errorSubscription: EmitterSubscription | null = null;
+
+    const finish = (token: string | null) => {
+      if (settled) return;
+      settled = true;
+      receivedSubscription?.remove();
+      errorSubscription?.remove();
+      if (timer) clearTimeout(timer);
+      resolve(token || null);
+    };
+
+    receivedSubscription = emitter.addListener(
+      "neetoAPNSTokenReceived",
+      ({ token }: { token: string }) => finish(token)
+    );
+
+    errorSubscription = emitter.addListener("neetoAPNSTokenError", () =>
+      finish(null)
+    );
+    timer = setTimeout(() => finish(null), DEVICE_TOKEN_TIMEOUT_MS);
+
+    const resolveExistingOrRegister = async () => {
+      try {
+        const existingToken = await NeetoAPNSToken.getToken();
+
+        if (existingToken) {
+          finish(existingToken);
+        } else {
+          NeetoAPNSToken.registerForRemoteNotifications();
+        }
+      } catch {
+        finish(null);
+      }
+    };
+
+    resolveExistingOrRegister();
+  });
+};

package/src/helpers/notifications/constants.ts

@@ -0,0 +1,34 @@
+import {
+  AndroidImportance,
+  type AndroidChannel,
+} from "react-native-notify-kit";
+
+// Server payloads bake these channel ids into android_channel_id — the ids
+// must exist byte-identically on device.
+export const NOTIFICATION_CHANNELS: AndroidChannel[] = [
+  {
+    id: "default",
+    name: "Default Channel",
+    importance: AndroidImportance.HIGH,
+    sound: "default",
+    vibration: true,
+    lights: true,
+    badge: true,
+  },
+  {
+    id: "channel_01",
+    name: "Channel 01",
+    importance: AndroidImportance.HIGH,
+    lights: true,
+    vibration: true,
+    badge: true,
+  },
+];
+
+export const NOTIFICATION_CHANNEL_IDS = NOTIFICATION_CHANNELS.map(
+  ({ id }) => id
+);
+
+// How long to wait for the APNs registration callback before treating the
+// token as unavailable (simulators without push entitlement never call back).
+export const DEVICE_TOKEN_TIMEOUT_MS = 10000;

package/src/helpers/notifications/getDeviceToken.ts

@@ -0,0 +1,17 @@
+import { Platform } from "react-native";
+
+import messaging from "@react-native-firebase/messaging";
+
+import { getAPNSToken } from "./apnsToken";
+
+// iOS keeps the historical APNs-direct backend contract with no Firebase at
+// all — the raw APNs token comes from the NeetoAPNSToken native module.
+// Android registers the FCM token via @react-native-firebase/messaging
+// (Firebase links Android-only; see react-native.config.js).
+export const getDeviceToken = (): Promise<string | null> => {
+  if (Platform.OS === "ios") {
+    return getAPNSToken();
+  }
+
+  return messaging().getToken();
+};

package/src/helpers/notifications/index.ts

@@ -0,0 +1,3 @@
+export { usePushNotification } from "./usePushNotification";
+export { registerBackgroundHandlers } from "./registerBackgroundHandlers";
+export { NOTIFICATION_CHANNELS, NOTIFICATION_CHANNEL_IDS } from "./constants";

package/src/helpers/notifications/registerBackgroundHandlers.ts

@@ -0,0 +1,62 @@
+import { Platform } from "react-native";
+
+import messaging from "@react-native-firebase/messaging";
+import dayjs from "dayjs";
+import notifee, { EventType } from "react-native-notify-kit";
+
+import { type NotificationPressHandler } from "./types";
+
+import { markReadUnReadNotificationAPI } from "../../api/notifications";
+
+// Must be called at module scope (before AppRegistry.registerComponent) —
+// handlers registered inside components are too late for killed-state
+// notifications.
+export const registerBackgroundHandlers = (
+  onNotificationPress?: NotificationPressHandler
+) => {
+  // FCM background handler — Android-only (iOS is Firebase-free; killed-state
+  // APNs alert pushes are displayed by the OS).
+  if (Platform.OS === "android") {
+    messaging().setBackgroundMessageHandler(async remoteMessage => {
+      // Data-only messages need manual display; notification-type messages
+      // are displayed by the OS automatically.
+      if (remoteMessage.data && !remoteMessage.notification) {
+        await notifee.displayNotification({
+          // FCM types a data value as string | object | number; the neeto
+          // notifications engine only ever sends strings.
+          title: (remoteMessage.data.title as string) || "New Notification",
+          body:
+            (remoteMessage.data.message as string) || "You have a new message",
+          data: remoteMessage.data,
+          android: {
+            channelId: "default",
+            smallIcon: "ic_notification",
+            sound: "default",
+            pressAction: { id: "default" },
+          },
+        });
+      }
+    });
+  }
+
+  notifee.onBackgroundEvent(async ({ type, detail }) => {
+    if (type !== EventType.PRESS) return;
+
+    const notification = detail.notification;
+    const notificationId = notification?.data?.notification_id as
+      string | undefined;
+
+    if (notificationId) {
+      try {
+        await markReadUnReadNotificationAPI({
+          notificationId,
+          readAt: dayjs().toISOString(),
+        });
+      } catch {
+        // Best-effort; the list screen will reconcile on next fetch.
+      }
+    }
+
+    onNotificationPress?.(notification);
+  });
+};

package/src/helpers/notifications/types.ts

@@ -0,0 +1,27 @@
+// The data bag the neeto_notifications engine sends, normalised across the
+// FCM and APNs payload shapes.
+export interface NotificationData {
+  url?: string;
+  notification_id?: string;
+  title?: string;
+  message?: string;
+  [key: string]: unknown;
+}
+
+// What reaches a press handler. notifee delivers `{ notification }` event
+// details; the FCM foreground path delivers the message itself.
+export interface PressedNotification {
+  data?: NotificationData;
+  notification?: { data?: NotificationData };
+}
+
+export type NotificationPressHandler = (
+  notification?: PressedNotification
+) => void;
+
+// The native module apps copy into their iOS target; absent on Android and
+// on iOS builds that have not added the files yet.
+export interface NeetoAPNSTokenModule {
+  getToken: () => Promise<string | null>;
+  registerForRemoteNotifications: () => void;
+}

package/src/helpers/notifications/usePushNotification.ts

@@ -0,0 +1,208 @@
+import { useEffect, useCallback, useState } from "react";
+import { Platform } from "react-native";
+
+import messaging from "@react-native-firebase/messaging";
+import dayjs from "dayjs";
+import notifee, { EventType } from "react-native-notify-kit";
+import { RESULTS, checkNotifications } from "react-native-permissions";
+
+import { NOTIFICATION_CHANNELS } from "./constants";
+import { getDeviceToken } from "./getDeviceToken";
+import {
+  type NotificationPressHandler,
+  type PressedNotification,
+} from "./types";
+
+import { bugsnagErrorHandler } from "../../config/bugsnag";
+import { STORAGE_KEYS } from "../../constants";
+import { useNotification } from "../../hooks/query/useNotification";
+import { useAppState } from "../../hooks/useAppState";
+import { Store } from "../../store";
+import { getItem, setItem } from "../asyncStore";
+
+let pendingRegistrationToken: string | null = null;
+
+interface PushNotificationOptions {
+  handleClick: NotificationPressHandler;
+}
+
+export const usePushNotification = (
+  isLoggedIn: boolean,
+  { handleClick }: PushNotificationOptions = { handleClick: () => {} }
+) => {
+  const appState = useAppState();
+  const [notificationPermission, setNotificationPermission] = useState(false);
+
+  const { useRegisterTokenMutation, useMarkReadUnreadNotification } =
+    useNotification();
+  const { mutate: registerToken } = useRegisterTokenMutation();
+
+  const { mutate: markReadUnreadNotification } =
+    useMarkReadUnreadNotification();
+
+  useEffect(() => {
+    const checkPermission = async () => {
+      try {
+        if (Platform.OS === "android" && Platform.Version < 33) {
+          setNotificationPermission(true);
+
+          return;
+        }
+
+        const { status } = await checkNotifications();
+        setNotificationPermission(status === RESULTS.GRANTED);
+      } catch (error) {
+        bugsnagErrorHandler(JSON.stringify(error), "notification");
+      }
+    };
+
+    if (appState === "active") {
+      checkPermission();
+    }
+  }, [appState]);
+
+  const createChannels = useCallback(async () => {
+    if (Platform.OS !== "android") return;
+
+    for (const channel of NOTIFICATION_CHANNELS) {
+      await notifee.createChannel(channel);
+    }
+  }, []);
+
+  const handleTokenRegistration = useCallback(
+    async (token: string | null) => {
+      const currentIsLoggedIn = Store.getState()?.auth?.isLoggedIn || false;
+      if (!currentIsLoggedIn || !token) return;
+
+      if (pendingRegistrationToken === token) return;
+      pendingRegistrationToken = token;
+
+      const storedToken = await getItem<string>(STORAGE_KEYS.DEVICE_TOKEN);
+      if (storedToken === token) {
+        pendingRegistrationToken = null;
+
+        return;
+      }
+
+      const payload = {
+        device: {
+          device_token: token,
+          platform: Platform.OS,
+        },
+      };
+
+      registerToken(payload, {
+        onSuccess: async () => {
+          await setItem(STORAGE_KEYS.DEVICE_TOKEN, token);
+          pendingRegistrationToken = null;
+        },
+        onError: () => {
+          pendingRegistrationToken = null;
+        },
+      });
+    },
+    [registerToken]
+  );
+
+  const markNotificationsAsRead = useCallback(
+    (notification: PressedNotification) => {
+      const notificationId =
+        notification?.data?.notification_id ||
+        notification?.notification?.data?.notification_id;
+      handleClick(notification);
+      if (notificationId) {
+        markReadUnreadNotification({
+          readAt: dayjs().toISOString(),
+          notificationId,
+        });
+      }
+    },
+    [handleClick, markReadUnreadNotification]
+  );
+
+  // Foreground FCM message → display via notifee. Android-only: iOS is
+  // Firebase-free (APNs-direct; foreground presentation is handled by the
+  // OS + notifee's UNUserNotificationCenter delegate).
+  useEffect(() => {
+    if (Platform.OS !== "android") return undefined;
+
+    const unsubscribe = messaging().onMessage(async remoteMessage => {
+      // FCM types a data value as string | object | number; the neeto
+      // notifications engine only ever sends strings.
+      const title =
+        remoteMessage.notification?.title ||
+        (remoteMessage.data?.title as string) ||
+        "New Notification";
+
+      const body =
+        remoteMessage.notification?.body ||
+        (remoteMessage.data?.message as string) ||
+        "You have a new message";
+
+      await notifee.displayNotification({
+        title,
+        body,
+        data: { url: remoteMessage.data?.url, ...remoteMessage.data } as Record<
+          string,
+          string | number | object
+        >,
+        android: {
+          channelId: "default",
+          smallIcon: "ic_notification",
+          sound: "default",
+          pressAction: { id: "default" },
+        },
+      });
+    });
+
+    return unsubscribe;
+  }, []);
+
+  // Foreground notification interaction events
+  useEffect(() => {
+    const unsubscribe = notifee.onForegroundEvent(({ type, detail }) => {
+      if (type === EventType.PRESS) {
+        markNotificationsAsRead(detail.notification as PressedNotification);
+      }
+    });
+
+    return unsubscribe;
+  }, [markNotificationsAsRead]);
+
+  // FCM token refresh listener — Android-only (no Firebase on iOS; the APNs
+  // token is re-fetched on every app-active initialize and deduped).
+  useEffect(() => {
+    if (Platform.OS !== "android") return undefined;
+
+    const unsubscribe = messaging().onTokenRefresh(async () => {
+      const token = await getDeviceToken();
+      await handleTokenRegistration(token);
+    });
+
+    return unsubscribe;
+  }, [handleTokenRegistration]);
+
+  const initializePN = useCallback(async () => {
+    try {
+      await createChannels();
+      const token = await getDeviceToken();
+      if (!token) {
+        bugsnagErrorHandler(
+          `${Platform.OS === "ios" ? "APNs" : "FCM"} token registration failed — no token returned`,
+          "notification"
+        );
+      }
+      await handleTokenRegistration(token);
+    } catch (error) {
+      bugsnagErrorHandler(JSON.stringify(error), "notification");
+    }
+  }, [createChannels, handleTokenRegistration]);
+
+  useEffect(() => {
+    if (isLoggedIn && appState === "active" && notificationPermission) {
+      initializePN();
+    }
+  }, [initializePN, isLoggedIn, appState, notificationPermission]);
+
+  return [];
+};