# react-web-altibbi

React **web** SDK + demo app for Altibbi services. Web port of [`react-native-altibbi`](https://github.com/altibbi-com/altibbi-react-native) — same functionality, same public API, in the browser.

## What's inside

| Layer | RN original | Web port |
| --- | --- | --- |
| REST API (`src/sdk/connection.ts`) | `fetch` + RN FormData | `fetch` + browser `File`/`Blob` upload |
| Constants/init (`service.ts`) | identical | identical |
| Types & data (`types.ts`, `data.ts`) | identical | identical |
| Realtime socket (`src/sdk/socket.ts`) | native Pusher bridge | `pusher-js` (same `TBISocket` API) |
| Video (`src/sdk/video/`) | native OpenTok | OpenTok.js `@opentok/client` (same `TBISession`/`TBIPublisher`/`TBISubscriber`/`TBISubscriberView`) |
| Chat | `@sendbird/chat` | `@sendbird/chat` (platform-agnostic) |

The SDK lives in [`src/sdk/`](src/sdk/) and re-exports the same names as the RN package (`init`, `TBIConstants`, `createConsultation`, `TBISession`, `TBISocket`, `AltibbiChat`, …). The demo app under [`src/screens/`](src/screens/) mirrors the RN `example/` app screen-for-screen using `react-router`.

## API differences vs react-native-altibbi

- **`uploadMedia(file, type, fileName)`** and `uploadSinaMedia` take a `File`/`Blob` (from an `<input type="file">`) instead of a file path string.
- **`getPrescription(id)`** returns a `fetch` `Response`; on web do `const blob = await res.blob()` then `URL.createObjectURL(blob)` to download.
- Socket/video are backed by `pusher-js` / OpenTok.js; the component and class APIs are unchanged.

## Run

```bash
npm install
npm run dev        # http://localhost:5173
npm run build      # typecheck + production bundle
```

Set your credentials in [`src/screens/Home.tsx`](src/screens/Home.tsx) `init(USER_JWT, BASE_URL, 'ar', SINA_ENDPOINT)`.

## Screens

Home, Consultation, ConsultationList, ConsultationDetails, WaitingRoom (socket), Video (OpenTok.js), Chat (Sendbird), AskSina, SinaChatRoom, User, UserList, UserDetails, EditUser.
