Angular Integration

import { Injectable } from '@angular/core';
import Encore from '@encorekit/web-sdk';

@Injectable({ providedIn: 'root' })
export class EncoreService {
  private isInitialized = false;

  private generateUserId(): string {
    const storageKey = 'encore_user_id';
    let userId = localStorage.getItem(storageKey);
    
    if (!userId) {
      userId = 'user_' + Math.random().toString(36).substring(2, 15);
      localStorage.setItem(storageKey, userId);
    }
    
    return userId;
  }

  initialize(
    apiKey: string,
    userId: string,
    environment: 'production' | 'development' = 'production'
  ): void {
    if (this.isInitialized) {
      console.warn('Encore SDK already initialized');
      return;
    }

    Encore.configure({
      userId,
      apiKey,
      environment,
      logLevel: 'debug',
    });

    this.isInitialized = true;
  }

  initializeWithAutoUserId(
    apiKey: string,
    environment: 'production' | 'development' = 'production'
  ): string {
    const userId = this.generateUserId();
    this.initialize(apiKey, userId, environment);
    return userId;
  }

  identify(userId: string, attributes?: Record<string, any>): void {
    Encore.identify(userId, attributes);
  }

  async presentOffer(): Promise<any> {
    return await Encore.presentOffer();
  }

  getCurrentUserId(): string | null {
    return Encore.getCurrentUserId();
  }
}

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EncoreService } from './encore.service';
import { environment } from '../environments/environment';

interface Status {
  message: string;
  type: 'info' | 'success' | 'error';
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div>
      <h1>Encore SDK - Angular</h1>
      <p>Status: {{ isInitialized ? '✓ Initialized' : '✗ Not Initialized' }}</p>
      <p>User ID: {{ userId || 'Not set' }}</p>
      
      <div *ngIf="status" [class]="'status-' + status.type">
        {{ status.message }}
      </div>
      
      <button (click)="handlePresentOffer()" [disabled]="!isInitialized">
        🎁 Present Offer
      </button>
    </div>
  `
})
export class AppComponent implements OnInit {
  isInitialized = false;
  userId = '';
  status: Status | null = null;

  constructor(private encoreService: EncoreService) {}

  ngOnInit() {
    try {
      this.userId = this.encoreService.initializeWithAutoUserId(
        environment.encoreApiKey,
        'production'
      );
      this.isInitialized = true;
      this.status = {
        message: 'Encore SDK initialized successfully!',
        type: 'success',
      };
    } catch (error) {
      this.status = {
        message: `Failed to initialize SDK: ${error instanceof Error ? error.message : 'Unknown error'}`,
        type: 'error',
      };
    }
  }

  async handlePresentOffer() {
    this.status = {
      message: 'Presenting offer...',
      type: 'info',
    };

    try {
      const result = await this.encoreService.presentOffer();

      if (result.granted) {
        this.status = {
          message: 'Offer granted successfully!',
          type: 'success',
        };
      } else {
        this.status = {
          message: 'Offer not granted',
          type: 'info',
        };
      }
    } catch (error) {
      this.status = {
        message: `Failed to present offer: ${error instanceof Error ? error.message : 'Unknown error'}`,
        type: 'error',
      };
    }
  }
}

export const environment = {
  production: true,
  encoreApiKey: 'your-api-key-here'
};

export const environment = {
  production: false,
  encoreApiKey: 'your-dev-api-key-here'
};