tas-uell-sdk 0.0.5 → 0.1.0

package/README.md

@@ -29,7 +29,7 @@ npm install @ng-bootstrap/ng-bootstrap @opentok/client interactjs
 
 ### 1. Create an HTTP Adapter
 
-The library requires an HTTP adapter that implements `TasHttpClient` interface:
+The library requires an HTTP adapter that implements the `TasHttpClient` interface:
 
 ```typescript
 import { Injectable } from '@angular/core';
@@ -41,9 +41,21 @@ import { TasHttpClient } from 'tas-uell-sdk';
 export class TasHttpAdapterService implements TasHttpClient {
   constructor(private http: HttpClient) {}
 
+  get<T>(url: string, options: { headers?: Record<string, string> }): Observable<T> {
+    return this.http.get<T>(`https://your-api.com/${url}`, {
+      headers: options.headers,
+    });
+  }
+
   post<T>(url: string, options: { body: any; headers?: Record<string, string> }): Observable<T> {
-    return this.http.post<T>(`https://your-api.com/${url}`, options.body, { 
-      headers: options.headers 
+    return this.http.post<T>(`https://your-api.com/${url}`, options.body, {
+      headers: options.headers,
+    });
+  }
+
+  patch<T>(url: string, options: { body: any; headers?: Record<string, string> }): Observable<T> {
+    return this.http.patch<T>(`https://your-api.com/${url}`, options.body, {
+      headers: options.headers,
     });
   }
 }
@@ -60,22 +72,26 @@ import { TasHttpAdapterService } from './adapters/tas-http-adapter.service';
 @NgModule({
   imports: [
     TasUellSdkModule.forRoot({
-      config: { 
-        tokBoxApiKey: 'YOUR_TOKBOX_API_KEY' 
+      config: {
+        tokBoxApiKey: 'YOUR_TOKBOX_API_KEY',
+        // apiBaseUrl: 'https://your-api.com/v2', // Optional
       },
-      httpClient: TasHttpAdapterService
-    })
-  ]
+      httpClient: TasHttpAdapterService,
+    }),
+  ],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 ### 3. Add Global Styles
 
-Add the TAS modal styles to your global `styles.scss`:
+Add the TAS modal styles to your global `styles.scss`. You can either import the library's global styles or copy the CSS below:
 
 ```scss
-/* TAS Video Modal */
+/* Option 1: Import from library */
+@import 'tas-uell-sdk/src/lib/styles/tas-global.scss';
+
+/* Option 2: Manual styles */
 .tas-video-modal {
   .modal-dialog {
     max-width: 100vw;
@@ -93,7 +109,6 @@ Add the TAS modal styles to your global `styles.scss`:
   }
 }
 
-/* TAS Waiting Room Modal */
 .tas-waiting-room-modal {
   .modal-dialog {
     max-width: 480px;
@@ -122,76 +137,171 @@ Add `<tas-floating-call>` to your root component template (e.g., `app.component.
 
 ## Usage
 
+> **Note:** The appointment/room must be pre-created in your backend before using this library.
+
 ### TAS Button Component
 
 Use the `<tas-btn>` component to initiate a video call:
 
 ```html
 <tas-btn
-  [appointmentId]="appointment.id"
-  [product]="'your-product'"
-  [tenantId]="tenantId"
+  [roomType]="'TAS'"
+  [entityId]="appointment.entityId"
+  [tenant]="tenantId"
+  [businessRole]="'BACKOFFICE'"
   [currentUser]="currentUser"
-  [ownerUserIds]="[ownerId]"
-  [regularUserIds]="regularUserIds"
-  [moderatorUserIds]="moderatorUserIds"
 ></tas-btn>
 ```
 
 ### Input Properties
 
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `appointmentId` | `number` | Yes | The appointment/session ID |
-| `product` | `string` | Yes | Product identifier |
-| `tenantId` | `string` | Yes | Tenant identifier |
-| `currentUser` | `TasCurrentUser` | Yes | Current user info (name, lastname, role) |
-| `ownerUserIds` | `number[]` | Yes | Array with exactly one owner user ID |
-| `regularUserIds` | `number[]` | No | Array of regular participant user IDs |
-| `moderatorUserIds` | `number[]` | No | Array of moderator user IDs |
+| Property | Type | Required | Default | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `entityId` | `number` | Yes | - | The entity/ausencia ID |
+| `tenant` | `string` | Yes | - | Tenant identifier |
+| `roomType` | `TasRoomType` | No | `'TAS'` | Room type (TAS, JM, WEBINAR, WELLNESS_MANAGER) |
+| `businessRole` | `TasBusinessRole` | No | `'USER'` | Role (ADMIN_MANAGER, MANAGER, BACKOFFICE, USER) |
+| `currentUser` | `TasCurrentUser` | Yes | - | Current user info (name, lastname, role) |
+
+### Waiting Room Behavior
+
+When clicking the TAS button, a waiting room modal opens:
+
+1. **Status Check**: The library calls `/v2/proxy/video/status` to get session info
+2. **Token Acquisition**: Calls `/v2/proxy/video/start` to get the video call token
 
-### TasCurrentUser Interface
+**Owner/Backoffice Users** (`businessRole: 'BACKOFFICE'` or user with `role: 'OWNER'`):
+- Token is obtained immediately after status check
+- Once token is received, the "Join" button appears
+- If `/start` fails, an error screen is shown with a "Retry" button
 
+**Non-Owner Users** (regular attendees):
+- See "Medicina laboral te va a admitir en unos instantes..."
+- Wait until the backend marks the session as `joinable: true`
+- Once joinable, the token is obtained and the "Join" button appears
+
+### Error Handling
+
+The library handles errors gracefully:
+- If `/status` fails: Shows error with retry option
+- If `/start` fails: Shows error message from backend, stops polling, shows retry option
+- Network errors: Displays user-friendly error message
+
+## Interfaces & Enums
+
+### TasCurrentUser
 ```typescript
 interface TasCurrentUser {
+  id: number;
   name: string;
   lastname: string;
-  role: TasUserRole; // 'OWNER' | 'USER' | 'MODERATOR'
+  role: TasUserRole;
 }
 ```
 
-## Exported Components
+### TasCallConfig
+```typescript
+interface TasCallConfig {
+  roomType: TasRoomType;
+  entityId: number;
+  tenant: string;
+  businessRole: TasBusinessRole;
+  currentUser: TasCurrentUser;
+}
+```
 
-- `TasButtonComponent` - Button to initiate video calls
-- `TasVideocallComponent` - Full-screen video call interface
-- `TasWaitingRoomComponent` - Pre-call waiting room
-- `TasFloatingCallComponent` - Picture-in-Picture floating window
+### TasAppointment
+```typescript
+interface TasAppointment {
+  id: number;
+  agendaId: number;
+  date: string;       // "YYYY-MM-DD"
+  startTime: string;  // "HH:mm"
+  endTime: string;    // "HH:mm"
+  bookingType: string;
+  status: AppointmentStatus;
+  title: string;
+  notes: string;
+}
+```
+
+### Enums
+- **TasUserRole**: `OWNER`, `USER`, `MODERATOR`
+- **TasBusinessRole**: `ADMIN_MANAGER`, `MANAGER`, `BACKOFFICE`, `USER`
+- **TasRoomType**: `TAS`, `JM`, `WEBINAR`, `WELLNESS_MANAGER`
+- **CallState**: `IDLE`, `CONNECTING`, `CONNECTED`, `DISCONNECTED`, `ERROR`
+- **ViewMode**: `FULLSCREEN`, `PIP`
+- **AppointmentStatus**: `CONFIRMED`, `CANCELLED`
 
 ## Exported Services
 
-- `TasService` - Core service for managing video sessions
+### TasService
+Core service for managing video sessions and state.
 
-## Exported Interfaces & Types
+**Public API:**
+- `callState$: Observable<CallState>` - Current connection status
+- `viewMode$: Observable<ViewMode>` - Current view mode
+- `isMuted$: Observable<boolean>` - Local audio mute state
+- `joinable$: Observable<boolean>` - Whether the call is joinable
+- `ownerHasJoined$: Observable<boolean>` - Whether an owner has joined
+- `toggleMute()` - Toggles local audio
+- `disconnectSession()` - Ends the current session
+- `getProxyVideoStatus(params)` - Gets session status
+- `getAppointments(params)` - Gets user appointments within date range
 
-- `TasConfig`
-- `TasHttpClient`
-- `TasCurrentUser`
-- `CreateRoomRequest`
-- `CreateRoomResponse`
-- `GenerateTokenRequest`
-- `GenerateTokenResponse`
-- `TasRoomType`
-- `TasSessionType`
-- `TasUserRole`
-- `CallState`
-- `ViewMode`
+## Exported Components
 
-## Building the Library
+### TasButtonComponent - `<tas-btn>`
 
-```bash
-ng build tas-uell-sdk --configuration=production
+Initiates video calls. Supports style variants:
+
+```html
+<!-- Default (pink) -->
+<tas-btn [entityId]="123" [tenant]="'tenant'" [currentUser]="user"></tas-btn>
+
+<!-- Teal variant with custom label -->
+<tas-btn variant="teal" buttonLabel="Ingresar" [entityId]="123" [tenant]="'tenant'" [currentUser]="user"></tas-btn>
 ```
 
+| Property | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `variant` | `'default' \| 'teal'` | `'default'` | Button style variant |
+| `buttonLabel` | `string` | `'Iniciar TAS'` | Button text |
+
+### TasIncomingAppointmentComponent - `<tas-incoming-appointment>`
+
+Displays the user's next scheduled appointment or an empty state. Uses `<tas-btn>` internally.
+
+```html
+<tas-incoming-appointment
+  [entityId]="123"
+  [tenant]="'tenant'"
+  [currentUser]="user"
+  [businessRole]="'USER'"
+  (enterCall)="onEnterCall($event)"
+></tas-incoming-appointment>
+```
+
+| Property | Type | Required | Default | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `entityId` | `number` | Yes | - | Entity/ausencia ID |
+| `tenant` | `string` | Yes | - | Tenant identifier |
+| `currentUser` | `TasCurrentUser` | Yes | - | Current user info |
+| `roomType` | `TasRoomType` | No | `'TAS'` | Room type |
+| `businessRole` | `TasBusinessRole` | No | `'USER'` | User's business role |
+
+| Output | Type | Description |
+| :--- | :--- | :--- |
+| `enterCall` | `EventEmitter<TasAppointment>` | Emits appointment when clicking "Ingresar" |
+
+**Note:** Requires the `TasHttpClient` adapter to implement the `get()` method.
+
+### Other Components
+- `TasVideocallComponent` - Full-screen video call interface
+- `TasWaitingRoomComponent` - Pre-call waiting room
+- `TasFloatingCallComponent` - `<tas-floating-call>`
+- `TasAvatarComponent` - `<tas-avatar>`
+
 ## License
 
 MIT

package/esm2020/lib/components/tas-avatar/tas-avatar.component.mjs

@@ -0,0 +1,75 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import * as i0 from "@angular/core";
+export class TasAvatarComponent {
+    constructor() {
+        this.name = '';
+        this.size = 80;
+    }
+    get initials() {
+        if (!this.name)
+            return '';
+        return this.name
+            .split(' ')
+            .filter((n) => n.length > 0)
+            .map((n) => n[0])
+            .join('')
+            .toUpperCase()
+            .substring(0, 2);
+    }
+    get fontSize() {
+        return Math.round(this.size * 0.4);
+    }
+}
+TasAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TasAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasAvatarComponent, selector: "tas-avatar", inputs: { name: "name", size: "size" }, ngImport: i0, template: `
+    <div
+      class="avatar"
+      [style.width.px]="size"
+      [style.height.px]="size"
+      [style.fontSize.px]="fontSize"
+    >
+      <span class="initials">{{ initials }}</span>
+    </div>
+  `, isInline: true, styles: [".avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#fff;color:#0072ac;font-weight:600;font-family:inherit;box-shadow:0 4px 12px #00000026}.initials{text-transform:uppercase;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasAvatarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tas-avatar',
+                    template: `
+    <div
+      class="avatar"
+      [style.width.px]="size"
+      [style.height.px]="size"
+      [style.fontSize.px]="fontSize"
+    >
+      <span class="initials">{{ initials }}</span>
+    </div>
+  `,
+                    styles: [
+                        `
+      .avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background-color: #ffffff;
+        color: #0072ac;
+        font-weight: 600;
+        font-family: inherit;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      .initials {
+        text-transform: uppercase;
+        user-select: none;
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFzLWF2YXRhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90YXMtdWVsbC1zZGsvc3JjL2xpYi9jb21wb25lbnRzL3Rhcy1hdmF0YXIvdGFzLWF2YXRhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBb0MxRSxNQUFNLE9BQU8sa0JBQWtCO0lBbEMvQjtRQW1DVyxTQUFJLEdBQVcsRUFBRSxDQUFDO1FBQ2xCLFNBQUksR0FBVyxFQUFFLENBQUM7S0FnQjVCO0lBZEMsSUFBSSxRQUFRO1FBQ1YsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJO1lBQUUsT0FBTyxFQUFFLENBQUM7UUFDMUIsT0FBTyxJQUFJLENBQUMsSUFBSTthQUNiLEtBQUssQ0FBQyxHQUFHLENBQUM7YUFDVixNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDO2FBQzNCLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO2FBQ2hCLElBQUksQ0FBQyxFQUFFLENBQUM7YUFDUixXQUFXLEVBQUU7YUFDYixTQUFTLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ3JCLENBQUM7SUFFRCxJQUFJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksR0FBRyxHQUFHLENBQUMsQ0FBQztJQUNyQyxDQUFDOztnSEFqQlUsa0JBQWtCO29HQUFsQixrQkFBa0IsMEZBaENuQjs7Ozs7Ozs7O0dBU1Q7NEZBdUJVLGtCQUFrQjtrQkFsQzlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLFlBQVk7b0JBQ3RCLFFBQVEsRUFBRTs7Ozs7Ozs7O0dBU1Q7b0JBQ0QsTUFBTSxFQUFFO3dCQUNOOzs7Ozs7Ozs7Ozs7Ozs7OztLQWlCQztxQkFDRjtvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDaEQ7OEJBRVUsSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Rhcy1hdmF0YXInLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiYXZhdGFyXCJcbiAgICAgIFtzdHlsZS53aWR0aC5weF09XCJzaXplXCJcbiAgICAgIFtzdHlsZS5oZWlnaHQucHhdPVwic2l6ZVwiXG4gICAgICBbc3R5bGUuZm9udFNpemUucHhdPVwiZm9udFNpemVcIlxuICAgID5cbiAgICAgIDxzcGFuIGNsYXNzPVwiaW5pdGlhbHNcIj57eyBpbml0aWFscyB9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgLmF2YXRhciB7XG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7XG4gICAgICAgIGNvbG9yOiAjMDA3MmFjO1xuICAgICAgICBmb250LXdlaWdodDogNjAwO1xuICAgICAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICAgICAgYm94LXNoYWRvdzogMCA0cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMTUpO1xuICAgICAgfVxuXG4gICAgICAuaW5pdGlhbHMge1xuICAgICAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICAgIH1cbiAgICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVGFzQXZhdGFyQ29tcG9uZW50IHtcbiAgQElucHV0KCkgbmFtZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHNpemU6IG51bWJlciA9IDgwO1xuXG4gIGdldCBpbml0aWFscygpOiBzdHJpbmcge1xuICAgIGlmICghdGhpcy5uYW1lKSByZXR1cm4gJyc7XG4gICAgcmV0dXJuIHRoaXMubmFtZVxuICAgICAgLnNwbGl0KCcgJylcbiAgICAgIC5maWx0ZXIoKG4pID0+IG4ubGVuZ3RoID4gMClcbiAgICAgIC5tYXAoKG4pID0+IG5bMF0pXG4gICAgICAuam9pbignJylcbiAgICAgIC50b1VwcGVyQ2FzZSgpXG4gICAgICAuc3Vic3RyaW5nKDAsIDIpO1xuICB9XG5cbiAgZ2V0IGZvbnRTaXplKCk6IG51bWJlciB7XG4gICAgcmV0dXJuIE1hdGgucm91bmQodGhpcy5zaXplICogMC40KTtcbiAgfVxufVxuIl19