@abihealth/goapp-react-native 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [1.22.0](https://github.com/abiglobalhealth/react-native-sdk/compare/goapp-react-native-v1.21.0...goapp-react-native-v1.22.0) (2025-04-23)
+
+
+### Features
+
+* add caret to svg dependency ([#172](https://github.com/abiglobalhealth/react-native-sdk/issues/172)) ([79b08fc](https://github.com/abiglobalhealth/react-native-sdk/commit/79b08fc3761e6d5005208eb1b90b4b6a054bf206))
+* add SSL pinning ([#173](https://github.com/abiglobalhealth/react-native-sdk/issues/173)) ([07cbd47](https://github.com/abiglobalhealth/react-native-sdk/commit/07cbd47ef327a7c836d2671485963936ca2cf5f0))
+
 ## [1.21.0](https://github.com/abiglobalhealth/react-native-sdk/compare/goapp-react-native-v1.20.3...goapp-react-native-v1.21.0) (2025-04-14)
 
 

package/README.md

@@ -1,3 +1,273 @@
-# dependencies needed
+# Abi GoApp SDK Installation Guide
 
-`react-native-agora ract-native-svg`
+This guide explains how to install the `@abihealth/goapp-react-native` SDK and its peer dependencies. Correct installation and configuration are needed to use the SDK's features.
+
+## Installation Requirements
+
+Install the main package (`@abihealth/goapp-react-native`) and these essential peer dependencies:
+
+- **react-native-agora** ([npm](https://www.npmjs.com/package/react-native-agora)): For video calls
+- **react-native-svg** ([npm](https://www.npmjs.com/package/react-native-svg)): For rendering SVGs
+- **react-native-ssl-public-key-pinning** ([npm](https://www.npmjs.com/package/react-native-ssl-public-key-pinning)): For security
+
+Follow the instructions for your environment (Bare React Native or Expo). Always consult the official docs for each dependency for detailed information.
+
+## Expo Projects (Managed Workflow)
+
+Use these steps for Expo managed workflow (requires a development build).
+
+### 1. Install using expo install
+
+This command helps install compatible versions:
+
+```bash
+npx expo install @abihealth/goapp-react-native react-native-agora react-native-svg react-native-ssl-public-key-pinning
+```
+
+### 2. Configure Permissions and Plugins
+
+Set up permissions and required Expo plugins in `app.json` or `app.config.js`:
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-agora",
+        {
+          "cameraPermission": "Allow $(PRODUCT_NAME) to access camera for video.",
+          "microphonePermission": "Allow $(PRODUCT_NAME) to access microphone for video."
+        }
+      ]
+    ],
+    "android": {
+      "permissions": ["android.permission.CAMERA", "android.permission.RECORD_AUDIO"]
+    },
+    "ios": {
+      "infoPlist": {
+        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) access for video calls.",
+        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) access for video calls."
+      }
+    }
+  }
+}
+```
+
+> **Important**: Plugin configurations may change. Always check official react-native-agora docs. Verify Expo compatibility for react-native-ssl-public-key-pinning.
+
+### 3. Create a Development Build
+
+Standard Expo Go is insufficient. Create a development build:
+
+```bash
+npx expo run:android
+# or
+npx expo run:ios
+```
+
+Alternatively, use EAS Build:
+
+```bash
+eas build --profile development --platform [android|ios]
+```
+
+Install the build, then run your project:
+
+```bash
+npx expo start --dev-client
+```
+
+## Bare React Native Projects
+
+Use these steps for standard bare React Native projects.
+
+### 1. Install SDK and dependencies
+
+Using npm:
+
+```bash
+npm install @abihealth/goapp-react-native react-native-agora react-native-svg react-native-ssl-public-key-pinning
+```
+
+Or using Yarn:
+
+```bash
+yarn add @abihealth/goapp-react-native react-native-agora react-native-svg react-native-ssl-public-key-pinning
+```
+
+### 2. Link native dependencies (React Native < 0.60)
+
+If using RN < 0.60, you might need manual linking:
+
+```bash
+npx react-native link react-native-agora react-native-svg react-native-ssl-public-key-pinning
+```
+
+> Note: Autolinking should work for RN >= 0.60 (iOS/Android). Verify if issues arise.
+
+### 3. Install Pods (iOS)
+
+Install CocoaPods dependencies:
+
+```bash
+cd ios && pod install && cd ..
+```
+
+### 4. Android Setup & Permissions
+
+Add necessary permissions to `android/app/src/main/AndroidManifest.xml`:
+
+```xml
+<uses-permission android:name="android.permission.CAMERA" />
+<uses-permission android:name="android.permission.RECORD_AUDIO" />
+```
+
+Agora Specific: Ensure JitPack is in `android/build.gradle`:
+
+```gradle
+allprojects {
+    repositories {
+        // ... other repositories
+        maven { url 'https://www.jitpack.io' }
+    }
+}
+```
+
+### 5. iOS Setup & Permissions
+
+Add privacy descriptions to `ios/<YourProjectName>/Info.plist`:
+
+- **NSCameraUsageDescription**: Reason for camera access (e.g., "Enable video calls")
+- **NSMicrophoneUsageDescription**: Reason for microphone access (e.g., "Enable audio in video calls")
+
+## Post-Installation
+
+After installing and configuring dependencies, import and use `@abihealth/goapp-react-native`. Remember `react-native-ssl-public-key-pinning` needs careful key/domain setup. Ensure your build environment (SDK/NDK versions, Xcode) is correct.
+
+## Usage
+
+Basic guide to integrating SDK components:
+
+### 1. Import components and hooks
+
+```typescript
+import { ConsultationsProvider, VideoConsultation, useConsultation } from '@abihealth/goapp-react-native'
+```
+
+### 2. Wrap your app with ConsultationsProvider
+
+Initializes SDK context with necessary configuration:
+
+```jsx
+// Example App.js
+import React from 'react'
+import { ConsultationsProvider } from '@abihealth/goapp-react-native'
+import MainApp from './MainApp'
+
+const user_access_token = 'YOUR_USER_ACCESS_TOKEN' // Get from your app logic
+const region = 'YOUR_API_REGION' // Get from your app logic
+// Optional props
+const theme = {
+  /* Custom theme */
+}
+const components = {
+  /* Custom components */
+}
+
+const App = () => {
+  const onError = (error) => {
+    console.error('SDK Error:', error)
+    /* Handle error */
+  }
+
+  return (
+    <ConsultationsProvider
+      region={region}
+      token={user_access_token}
+      theme={theme} // Optional
+      components={components} // Optional
+      onError={onError} // Optional
+    >
+      {/* Other components */}
+    </ConsultationsProvider>
+  )
+}
+
+export default App
+```
+
+#### Provider Props:
+
+- `region` (string, required): API region
+- `token` (string, required): User authentication token
+- `theme` (object, optional): Customize visual theme
+- `components` (object, optional): Override default components
+- `onError` (function, optional): Error callback
+
+### 3. Use the VideoConsultation component
+
+Renders the video consultation UI:
+
+```jsx
+// Example ConsultationScreen.js
+import React from 'react'
+import { View } from 'react-native'
+import { VideoConsultation } from '@abihealth/goapp-react-native'
+
+// Optional props
+const options = {
+  /* Video call options */
+}
+
+const ConsultationScreen = () => {
+  const eventHandlers = {
+    /* Callbacks for events */
+  }
+
+  return <VideoConsultation options={options} eventHandlers={eventHandlers} />
+}
+
+export default ConsultationScreen
+```
+
+#### VideoConsultation Props:
+
+- `options` (object, optional): Video call appearance/behavior config
+- `eventHandlers` (object, optional): Callbacks for video call events
+
+### 4. Use the useConsultation hook
+
+Access consultation state and control functions:
+
+```jsx
+// Example ConsultationControls.js
+import React from 'react'
+import { View, Button, Text } from 'react-native'
+import { useConsultation } from '@abihealth/goapp-react-native'
+
+const ConsultationControls = () => {
+  const { consultation, start, cancel } = useConsultation()
+
+  const handleStart = () => start(/* params if needed */)
+  const handleCancel = () => cancel(/* params if needed */)
+
+  return (
+    <View>
+      {consultation && <Text>Consultation Info: {/* Details */}</Text>}
+      <Button title="Start" onPress={handleStart} />
+      <Button title="Cancel" onPress={handleCancel} />
+    </View>
+  )
+}
+
+export default ConsultationControls
+```
+
+#### useConsultation Hook returns:
+
+- `consultation` (object | null): Current/last consultation info
+- `start` (function): Initiates consultation
+- `cancel` (function): Cancels consultation
+- Other values may be available; check SDK docs
+
+Always consult the specific `@abihealth/goapp-react-native` documentation for details on props, events, hooks, parameters, and advanced configuration.

package/dist/common/api/partner.js

@@ -6,5 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPartnerInfo = void 0;
 var axios_1 = __importDefault(require("axios"));
 var PARTNER_URL = 'partner';
-var getPartnerInfo = function () { return axios_1.default.get(PARTNER_URL).then(function (response) { return response === null || response === void 0 ? void 0 : response.data; }); };
+var getPartnerInfo = function () {
+    return axios_1.default.get(PARTNER_URL).then(function (response) { return response === null || response === void 0 ? void 0 : response.data; });
+};
 exports.getPartnerInfo = getPartnerInfo;

package/dist/common/api/sslPinning.d.ts

@@ -0,0 +1 @@
+export declare const initializeSslPinning: (disableSslPinning: boolean) => Promise<void>;

package/dist/common/api/sslPinning.js

@@ -0,0 +1,61 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initializeSslPinning = void 0;
+var react_native_ssl_public_key_pinning_1 = require("react-native-ssl-public-key-pinning");
+var initializeSslPinning = function (disableSslPinning) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!disableSslPinning) return [3 /*break*/, 2];
+                return [4 /*yield*/, (0, react_native_ssl_public_key_pinning_1.disableSslPinning)()];
+            case 1:
+                _a.sent();
+                return [2 /*return*/, console.log('🔒🚫 SSL pinning disabled')];
+            case 2: return [4 /*yield*/, (0, react_native_ssl_public_key_pinning_1.initializeSslPinning)({
+                    'ape1.sdk.abi.ai': {
+                        publicKeyHashes: ['95kHJrJXD1L/WORHTc5rh99KvZ10Ipd9m7eW0JUsLnA=', 'b+nnCNzPN8D2jN0srTRwMXqLUjmnZODZ0k28NZFFrkc=']
+                    }
+                })];
+            case 3:
+                _a.sent();
+                return [2 /*return*/, console.log('🔒 SSL pinning initialized')];
+        }
+    });
+}); };
+exports.initializeSslPinning = initializeSslPinning;

package/dist/common/contexts/ConsultationContext.d.ts

@@ -11,6 +11,7 @@ interface ConsultationProviderProps {
     theme?: RecursivePartial<Theme>;
     components?: (theme: Theme) => Components;
     onError?: ErrorCallback;
+    disableSslPinning?: boolean;
 }
 export type ConsultationContextProps = ConsultationProviderProps & {
     consultation: Consultation | null;
@@ -23,5 +24,5 @@ export type ConsultationContextProps = ConsultationProviderProps & {
     initialised: boolean;
 };
 export declare const ConsultationContext: import("react").Context<ConsultationContextProps>;
-export declare const ConsultationProvider: ({ children, token, region, theme, components, onError }: PropsWithChildren<ConsultationProviderProps>) => import("react").JSX.Element;
+export declare const ConsultationProvider: ({ children, token, region, theme, components, onError, disableSslPinning }: PropsWithChildren<ConsultationProviderProps>) => import("react").JSX.Element;
 export {};

package/dist/common/contexts/ConsultationContext.js

@@ -42,6 +42,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConsultationProvider = exports.ConsultationContext = void 0;
 var config_1 = require("../api/config");
 var partner_1 = require("../api/partner");
+var sslPinning_1 = require("../api/sslPinning");
 var user_1 = require("../api/user");
 var websocket_1 = require("../api/websocket");
 var i18n_1 = __importDefault(require("../locale/i18n"));
@@ -49,6 +50,7 @@ var theme_1 = require("../types/theme");
 var axios_1 = require("axios");
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
+var react_native_ssl_public_key_pinning_1 = require("react-native-ssl-public-key-pinning");
 var ThemeContext_1 = require("./ThemeContext");
 // eslint-disable-next-line react-refresh/only-export-components
 exports.ConsultationContext = (0, react_1.createContext)({
@@ -66,73 +68,83 @@ exports.ConsultationContext = (0, react_1.createContext)({
     initialised: false
 });
 var ConsultationProvider = function (_a) {
-    var children = _a.children, token = _a.token, region = _a.region, theme = _a.theme, components = _a.components, _b = _a.onError, onError = _b === void 0 ? function () { } : _b;
-    var _c = (0, react_1.useState)(null), consultation = _c[0], setConsultation = _c[1];
-    var _d = (0, react_1.useState)(null), userId = _d[0], setUserId = _d[1];
-    var _e = (0, react_1.useState)(null), user = _e[0], setUser = _e[1];
-    var _f = (0, react_1.useState)(null), websocket = _f[0], setWebsocket = _f[1];
-    var _g = (0, react_1.useState)(null), slug = _g[0], setSlug = _g[1];
-    var _h = (0, react_1.useState)(false), initialised = _h[0], setInitialised = _h[1];
+    var children = _a.children, token = _a.token, region = _a.region, theme = _a.theme, components = _a.components, _b = _a.onError, onError = _b === void 0 ? function () { } : _b, _c = _a.disableSslPinning, disableSslPinning = _c === void 0 ? false : _c;
+    var _d = (0, react_1.useState)(null), consultation = _d[0], setConsultation = _d[1];
+    var _e = (0, react_1.useState)(null), userId = _e[0], setUserId = _e[1];
+    var _f = (0, react_1.useState)(null), user = _f[0], setUser = _f[1];
+    var _g = (0, react_1.useState)(null), websocket = _g[0], setWebsocket = _g[1];
+    var _h = (0, react_1.useState)(null), slug = _h[0], setSlug = _h[1];
+    var _j = (0, react_1.useState)(false), initialised = _j[0], setInitialised = _j[1];
     var handleError = function (e) {
         console.error('🚨 Error caught on handler', e);
         onError(e);
     };
     var initialise = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var partnerInfo, e_1, userResponse, e_2, activeConsultation, e_3, ws, e_4;
+        var e_1, partnerInfo, e_2, userResponse, e_3, activeConsultation, e_4, ws, e_5;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, (0, partner_1.getPartnerInfo)()];
+                    return [4 /*yield*/, (0, sslPinning_1.initializeSslPinning)(disableSslPinning)];
                 case 1:
-                    partnerInfo = _a.sent();
-                    setSlug(partnerInfo.slug);
+                    _a.sent();
                     return [3 /*break*/, 3];
                 case 2:
                     e_1 = _a.sent();
-                    console.error('Error getting partner info', e_1);
+                    console.error('Error initializing SSL pinning', e_1);
                     throw e_1;
                 case 3:
                     _a.trys.push([3, 5, , 6]);
-                    return [4 /*yield*/, (0, user_1.getUser)({ userId: userId })];
+                    return [4 /*yield*/, (0, partner_1.getPartnerInfo)()];
                 case 4:
-                    userResponse = _a.sent();
-                    setUser(userResponse);
+                    partnerInfo = _a.sent();
+                    setSlug(partnerInfo.slug);
                     return [3 /*break*/, 6];
                 case 5:
                     e_2 = _a.sent();
-                    console.error('Error getting user', e_2);
+                    console.error('Error getting partner info', e_2);
                     throw e_2;
                 case 6:
                     _a.trys.push([6, 8, , 9]);
-                    return [4 /*yield*/, (0, user_1.getActiveConsultation)({ userId: userId })];
+                    return [4 /*yield*/, (0, user_1.getUser)({ userId: userId })];
                 case 7:
-                    activeConsultation = _a.sent();
-                    console.log('⏮️ Active:', activeConsultation.consultation);
-                    setConsultation(activeConsultation === null || activeConsultation === void 0 ? void 0 : activeConsultation.consultation);
+                    userResponse = _a.sent();
+                    setUser(userResponse);
                     return [3 /*break*/, 9];
                 case 8:
                     e_3 = _a.sent();
-                    if ((0, axios_1.isAxiosError)(e_3) && e_3.status === 404) {
+                    console.error('Error getting user', e_3);
+                    throw e_3;
+                case 9:
+                    _a.trys.push([9, 11, , 12]);
+                    return [4 /*yield*/, (0, user_1.getActiveConsultation)({ userId: userId })];
+                case 10:
+                    activeConsultation = _a.sent();
+                    console.log('⏮️ Active:', activeConsultation.consultation);
+                    setConsultation(activeConsultation === null || activeConsultation === void 0 ? void 0 : activeConsultation.consultation);
+                    return [3 /*break*/, 12];
+                case 11:
+                    e_4 = _a.sent();
+                    if ((0, axios_1.isAxiosError)(e_4) && e_4.status === 404) {
                         setConsultation(null);
                     }
                     else {
-                        console.error('Error getting active consultation', e_3);
-                        throw e_3;
+                        console.error('Error getting active consultation', e_4);
+                        throw e_4;
                     }
-                    return [3 /*break*/, 9];
-                case 9:
-                    _a.trys.push([9, 11, , 12]);
+                    return [3 /*break*/, 12];
+                case 12:
+                    _a.trys.push([12, 14, , 15]);
                     return [4 /*yield*/, (0, websocket_1.connectWebsocket)({ token: token, userId: userId, region: region })];
-                case 10:
+                case 13:
                     ws = _a.sent();
                     setWebsocket(ws);
-                    return [3 /*break*/, 12];
-                case 11:
-                    e_4 = _a.sent();
-                    console.error('Error connecting to websocket', e_4);
-                    throw e_4;
-                case 12: return [2 /*return*/];
+                    return [3 /*break*/, 15];
+                case 14:
+                    e_5 = _a.sent();
+                    console.error('Error connecting to websocket', e_5);
+                    throw e_5;
+                case 15: return [2 /*return*/];
             }
         });
     }); };
@@ -145,7 +157,8 @@ var ConsultationProvider = function (_a) {
             var method = config.method, url = config.url, data = config.data;
             console.log({
                 service: 'API Rest',
-                message: "".concat(method === null || method === void 0 ? void 0 : method.toUpperCase(), " ").concat(url, " ").concat(data !== undefined ? "- body: ".concat(JSON.stringify(data)) : ' ')
+                message: "".concat(method === null || method === void 0 ? void 0 : method.toUpperCase(), " ").concat(url, " ").concat(data !== undefined ? "- body: ".concat(JSON.stringify(data)) : ' '),
+                headers: config.headers
             });
             return config;
         });
@@ -190,6 +203,10 @@ var ConsultationProvider = function (_a) {
             (0, websocket_1.connectWebsocket)({ token: token, userId: userId, region: region }).then(setWebsocket).catch(handleError);
         };
     }, [websocket]);
+    (0, react_1.useEffect)(function () {
+        var subscription = (0, react_native_ssl_public_key_pinning_1.addSslPinningErrorListener)(console.error);
+        return function () { return subscription.remove(); };
+    }, []);
     var value = {
         token: token,
         region: region,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abihealth/goapp-react-native",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,8 @@
     "react-native-bouncy-checkbox": "4.1.2",
     "react-native-date-picker": "5.0.1",
     "react-native-phone-input": "1.3.7",
-    "react-native-svg": "15.11.1",
+    "react-native-svg": "^15.11.1",
+    "react-native-ssl-public-key-pinning": "^1.2.5",
     "zod": "3.24.1"
   },
   "devDependencies": {