klaritics-react-native-sdk 1.0.0

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "klaritics-react-native-sdk",
+  "version": "1.0.0",
+  "description": "React Native Klaritics SDK",
+  "homepage": "https://deeptaai.com/",
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "license": "UNLICENSED",
+  "author": {
+    "name": "Kousik Dasari",
+    "email": "kousik.d@deeptaai.com"
+  },
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.tsx",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "react-native-anthra-sdk.podspec",
+    "!android/build",
+    "!android/bin",
+    "!android/.settings",
+    "!android/.gradle",
+    "!android/.project",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "build": "bob build"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-native": "^0.73.0",
+    "eslint": "^8.57.0",
+    "eslint-config-custom": "workspace:*",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "react": "^18.3.1",
+    "react-native": "^0.74.3",
+    "react-native-builder-bob": "^0.24.0",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.5.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-native": {
+      "optional": false
+    }
+  }
+}

package/react-native-anthra-sdk.podspec

@@ -0,0 +1,21 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-anthra-sdk"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "11.0" }
+  s.source       = { :git => "https://github.com/udaykoushik/react-native-anthra-sdk.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm}"
+
+  s.dependency "React-Core"
+  s.dependency 'AnthraSDK'
+
+end

package/src/index.tsx

@@ -0,0 +1,397 @@
+import { useEffect, useMemo, type ReactNode } from 'react'
+import { NativeModules, View, ViewProps } from 'react-native'
+import { getTag, pruneAttributes } from './utils'
+
+const { Klaritics } = NativeModules
+
+interface KlariticsOptions {
+  /**
+   * Server URL to send data to, e.g. `https://server.example.klaritics.com`
+   * (no trailing slash). Required.
+   */
+  host: string
+}
+
+interface KlariticsProviderProps {
+  /**
+   * A unique application key obtained from the Klaritics dashboard.
+   */
+  apiKey: string
+  options: KlariticsOptions
+  children?: ReactNode
+}
+
+/**
+ *
+ * Initialise the Klaritics SDK. Maps to the native
+ * `Klaritics.setup(context, new KlariticsConfig(appId, host))`.
+ *
+ * @param {string} apiKey - A unique application key from the Klaritics dashboard.
+ * @param {KlariticsOptions} options - SDK options. `host` is required.
+ *
+ * @example
+ * setup('<klaritics_app_id>', { host: 'https://us.i.klaritics.com' })
+ *
+ */
+export function setup(apiKey: string, options: KlariticsOptions) {
+  if (apiKey === undefined || apiKey === null || apiKey.trim() === '') {
+    console.error('apiKey cannot be null or empty')
+    return
+  }
+  if (!options || !options.host || options.host.trim() === '') {
+    console.error('options.host cannot be null or empty')
+    return
+  }
+
+  Klaritics.setup(apiKey, options.host)
+}
+
+/**
+ *
+ * Provider that initialises the Klaritics SDK when mounted and renders its
+ * children. Place it near the root of your app.
+ *
+ * @example
+ * <KlariticsProvider
+ *   apiKey='<klaritics_app_id>'
+ *   options={{ host: 'https://us.i.klaritics.com' }}
+ * >
+ *   <MyComponent />
+ * </KlariticsProvider>
+ *
+ */
+export function KlariticsProvider({
+  apiKey,
+  options,
+  children,
+}: KlariticsProviderProps) {
+  /**
+   * **NOTE**: Disable exhaustive-deps rule as the SDK should be set up only
+   * once, when the provider first mounts.
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => setup(apiKey, options), [])
+
+  return <>{children}</>
+}
+
+interface ApxorViewProps extends ViewProps {
+  tag?: string
+}
+
+/**
+ * A wrapper over React Native's `View` component to track the View changes in the app.
+ *
+ * **NOTE**:
+ * 1. Fundamentally, tags are meant to be constant and unique.
+ * 2. Even if they change at runtime, ApxorSDK ignores them.
+ *
+ * @example
+ * <ApxorView
+ *   tag='<unique_constant_tag>'
+ *   {...otherViewProps}
+ * >
+ *   // Your code goes here
+ * </ApxorView>
+ *
+ */
+export function ApxorView({ children, tag = '', ...others }: ApxorViewProps) {
+  /**
+   * **NOTE**: Disable exhaustive-deps rule as we don't want to recompute the `nativeID`.
+   */
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const nativeID = useMemo(() => `tag_${getTag(tag)}`, [])
+
+  return (
+    <View
+      nativeID={nativeID}
+      {...others}
+    >
+      {children}
+    </View>
+  )
+}
+
+/**
+ *
+ * Set a Unique ID for each user. A User ID can be email, phone number etc.
+ * @param {string} userId - A Unique ID.
+ *
+ * @example
+ * RNApxorSDK.setUserIdentifier("john@doe.com")
+ *
+ */
+export function setUserIdentifier(userId: string) {
+  if (userId === undefined || userId === null || userId.trim() === '') {
+    console.error('User Id cannot be null or empty')
+    return
+  }
+  Klaritics.setUserIdentifier(userId)
+}
+
+/**
+ *
+ * Set attributes with which we can identify and group users. User attributes can be gender, city, LoginMode/SignupMode etc.
+ * @param {object} userAttributes - User attributes in the form of key-value pairs.
+ *
+ * @example
+ * RNApxorSDK.setUserCustomInfo({
+ *   gender: "Male",
+ *   city: "New York",
+ * })
+ *
+ */
+export function setUserCustomInfo(userAttributes: object) {
+  
+  Klaritics.setUserCustomInfo(pruneAttributes(userAttributes))
+}
+
+/**
+ *
+ * Logs an app event.
+ * @param {string} eventName - Name of the event.
+ * @param {object|null} [attributes=null] - Attributes of the event in the form of key-value pairs.
+ * @param {boolean} [isAggregate=false] - Whether the event is an aggregate event or not. Defaults to `false`.
+ *
+ * @example
+ * RNApxorSDK.logAppEvent('ADD_TO_CART', {
+ *   userId: 'john@doe.com',
+ *   value: 1299,
+ *   item: 'Sony Head Phones 1201',
+ * })
+ *
+ */
+export function logAppEvent(
+  eventName: string,
+  attributes: object | null = null,
+  isAggregate: boolean = false,
+) {
+  if (
+    eventName === undefined ||
+    eventName === null ||
+    eventName.trim() === ''
+  ) {
+    console.error('Event name cannot be null or empty')
+    return
+  }
+
+  Klaritics.logAppEvent(eventName, pruneAttributes(attributes), isAggregate)
+}
+
+/**
+ * Logs an aggregate event.
+ * @param {string} eventName - Name of the event.
+ * @param {object} attributes - Attributes of the event in the form of key-value pairs.
+ *
+ * @example
+ * RNApxorSDK.logAggregateEvent("Login", {
+ *   loginMode: "Google",
+ *   id: "46Juzcyx",
+ * })
+ *
+ */
+export function logAggregateEvent(eventName: string, attributes: object) {
+  if (
+    eventName === undefined ||
+    eventName === null ||
+    eventName.trim() === ''
+  ) {
+    console.error('Event name cannot be null or empty')
+    return
+  }
+
+  Klaritics.logAppEvent(eventName, pruneAttributes(attributes), true)
+}
+
+/**
+ * Logs a client event.
+ * @param {string} eventName - Name of the event.
+ * @param {object|null} [attributes=null] - Attributes of the event in the form of key-value pairs.
+ *
+ * @example
+ * RNApxorSDK.logClientEvent("SoftBackPressed", {
+ *   Screen: "HomeScreen",
+ * })
+ *
+ */
+export function logClientEvent(
+  eventName: string,
+  attributes: object | null = null,
+) {
+  if (
+    eventName === undefined ||
+    eventName === null ||
+    eventName.trim() === ''
+  ) {
+    console.error('Event name cannot be null or empty')
+    return
+  }
+  
+  Klaritics.logClientEvent(eventName, pruneAttributes(attributes))
+}
+
+/**
+ *
+ * Set session attributes.
+ * @param {object} sessionAttributes - Session attributes in the form of key-value pairs.
+ *
+ * @example
+ * RNApxorSDK.setSessionCustomInfo({
+ *   network: "4G",
+ * })
+ *
+ */
+export function setSessionCustomInfo(sessionAttributes: object) {
+  
+  Klaritics.setSessionCustomInfo(pruneAttributes(sessionAttributes))
+}
+
+/**
+ * Logs a navigation event.
+ * @param {string} screenName - Name of the screen.
+ *
+ * **NOTE** : Only use this method on every screen change callback if you are not using the [this snippet for automatic screen tracking](https://guides.apxor.com/getting-started-with-apxor/api-guides/react-native#track-navigation).
+ *
+ * @example
+ * RNApxorSDK.logNavigationEvent("HomeScreen")
+ *
+ */
+export function logNavigationEvent(screenName: string) {
+  if (
+    screenName === undefined ||
+    screenName === null ||
+    screenName.trim() === ''
+  ) {
+    console.error('Screen name cannot be null or empty')
+    return
+  }
+ 
+  Klaritics.logNavigationEvent(screenName)
+}
+
+/**
+ *
+ * Track tabs inside your activity to analyze time spent on each tab.
+ * @param {string} screenName - Name of the screen.
+ *
+ * @example
+ * RNApxorSDK.trackScreen("SettingsScreen")
+ *
+ */
+export function trackScreen(screenName: string) {
+  if (
+    screenName === undefined ||
+    screenName === null ||
+    screenName.trim() === ''
+  ) {
+    console.error('Screen name cannot be null or empty')
+    return
+  }
+ 
+  Klaritics.trackScreen(screenName)
+}
+
+/**
+ *
+ * Handle push notifications.
+ * @param {any|null} [remoteMessage=null] - Remote message object.
+ * @returns {boolean} - Returns `true` if the message is an APX push notification, `false` otherwise.
+ *
+ * @example
+ * RNApxorSDK.handlePushNotification(remoteMessage)
+ *
+ */
+export function handlePushNotification(
+  remoteMessage: any | null = null,
+): boolean {
+  if (
+    remoteMessage &&
+    remoteMessage.data &&
+    Boolean(remoteMessage.data.is_apx)
+  ) {
+    Klaritics.handlePushNotification(remoteMessage.data)
+    return true
+  }
+  return false
+}
+
+/**
+ *
+ * Launch an event using native device emitter when a registered notification occurs.
+ * @param {string} notification - Name of the notification.
+ * @param {string} key - Key of the notification.
+ *
+ * @example
+ * RNApxorSDK.registerSimpleNotification("Notification", "key")
+ *
+ */
+export function registerSimpleNotification(notification: string, key: string) {
+  if (notification == null || key == null) {
+    console.error('Notification, key must not be null')
+    return
+  }
+  console.log('notification recieved')
+  
+  Klaritics.registerSimpleNotification(notification, key)
+}
+
+/**
+ *
+ * Launch a callback for a specified notificaion when it is removed.
+ * @param {string} notification - Name of the notification.
+ * @param {string} key - Key of the notification.
+ *
+ * @example
+ * RNApxorSDK.unregisterSimpleNotification("Notification", "key")
+ *
+ */
+export function unregisterSimpleNotification(
+  notification: string,
+  key: string,
+) {
+  if (notification == null || key == null) {
+    console.error('Notification, key must not be null')
+    return
+  }
+  
+  Klaritics.unregisterSimpleNotification(notification, key)
+}
+
+/**
+ *
+ * Provide key and value of a config option that will be used by the ApxorSDK to apply dynamic changes to campaign.
+ * @param {string} key - Key of the config.
+ * @param {string} value - Value of the config.
+ *
+ * @example
+ * RNApxorSDK.setApxorDynamicConfig("key", "value")
+ *
+ */
+export function setApxorDynamicConfig(key: string, value: string) {
+  if (key == null || value == null) {
+    console.error('Key and Value must not be null')
+    return
+  }
+ 
+  Klaritics.setApxorDynamicConfig(key, value)
+}
+
+// Default export is an object with all the named exports (functions and components)
+export default {
+  KlariticsProvider,
+  setup,
+  ApxorView,
+  setUserIdentifier,
+  setUserCustomInfo,
+  logAppEvent,
+  logAggregateEvent,
+  logClientEvent,
+  setSessionCustomInfo,
+  logNavigationEvent,
+  trackScreen,
+  handlePushNotification,
+  registerSimpleNotification,
+  unregisterSimpleNotification,
+  setApxorDynamicConfig,
+}

package/src/utils.ts

@@ -0,0 +1,44 @@
+/**
+ * A utility function to get the formatted tag name from the given string.
+ * @param {string} tag Tag Name
+ * @returns Formatted Tag Name
+ */
+export function getTag(tag: string) {
+  return tag.toLowerCase().replace(/[\s]+/g, '_')
+}
+
+/**
+ * A utility function to check if the given value is valid.
+ * @param aValue Value to check
+ * @returns `true` if valid, `false` otherwise
+ */
+export function isValidValue(aValue: unknown) {
+  if (typeof aValue === 'number' && (isNaN(aValue) || !isFinite(aValue))) {
+    return false
+  } else if (aValue === undefined || aValue == null) {
+    return false
+  }
+  return true
+}
+
+/**
+ * A utility function to prune null, NaN, undefined or Inifinity values from an object.
+ * @param {any} obj Object to prune
+ * @returns The Pruned object
+ */
+export function pruneAttributes(obj: any) {
+  if (typeof obj !== 'object') {
+    return {}
+  }
+  for (const key in obj) {
+    if (typeof obj[key] === 'object') {
+      obj[key] = pruneAttributes(obj[key]) // Recurse on nested object
+      if (Object.keys(obj[key]).length === 0) {
+        delete obj[key] // Remove empty object
+      }
+    } else if (!isValidValue(obj[key])) {
+      delete obj[key] // remove null, NaN, undefined or Inifinity
+    }
+  }
+  return obj
+}