@encorekit/web-sdk 0.1.0 → 0.1.5

package/examples/angular/angular.json

@@ -0,0 +1,73 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "encore-sdk-angular-example": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "css"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/encore-sdk-angular-example",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "assets": [],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "encore-sdk-angular-example:build:production"
+            },
+            "development": {
+              "buildTarget": "encore-sdk-angular-example:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
+

package/examples/angular/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "encore-sdk-angular-example",
+  "version": "1.0.0",
+  "description": "Angular example for Encore Web SDK",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.3.0",
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@encorekit/web-sdk": "^0.1.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.3.0",
+    "@angular/cli": "^17.3.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "typescript": "~5.4.2"
+  }
+}
+

package/examples/angular/src/app/app.component.html

@@ -0,0 +1,56 @@
+<div class="app">
+  <h1>🎯 Encore SDK</h1>
+  <p>Angular Example</p>
+
+  <div class="card">
+    <h2>SDK Status</h2>
+    <div class="user-info">
+      <strong>Status:</strong> {{ isInitialized ? '✓ Initialized' : '✗ Not Initialized' }}
+      <br />
+      <strong>User ID:</strong> {{ userId || 'Not set' }}
+    </div>
+
+    <div *ngIf="status" [class]="'status ' + status.type">
+      {{ status.message }}
+    </div>
+  </div>
+
+  <div class="card">
+    <h2>User Identification</h2>
+    <div class="input-group">
+      <label for="userId">Custom User ID:</label>
+      <input
+        id="userId"
+        type="text"
+        placeholder="Enter user ID (e.g., user-123)"
+        [(ngModel)]="customUserId"
+        [disabled]="!isInitialized"
+      />
+    </div>
+    <button
+      (click)="handleIdentifyUser()"
+      [disabled]="!isInitialized"
+      class="primary"
+    >
+      Identify User
+    </button>
+  </div>
+
+  <div class="card">
+    <h2>Present Offer</h2>
+    <p>Click the button below to display an offer to the user.</p>
+    <button
+      (click)="handlePresentOffer()"
+      [disabled]="!isInitialized"
+      class="success"
+    >
+      🎁 Present Offer
+    </button>
+  </div>
+
+  <div class="card">
+    <h2>Code Example</h2>
+    <pre>{{ codeExample }}</pre>
+  </div>
+</div>
+

package/examples/angular/src/app/app.component.ts

@@ -0,0 +1,114 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { EncoreService } from './encore.service';
+
+interface Status {
+  message: string;
+  type: 'info' | 'success' | 'error';
+}
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './app.component.html',
+})
+export class AppComponent implements OnInit {
+  isInitialized = false;
+  userId = '';
+  customUserId = '';
+  status: Status | null = null;
+
+  codeExample = `// Initialize SDK
+Encore.configure({
+  apiKey: 'your-api-key',
+  userId: 'user-123',
+  environment: 'production',
+})
+
+// Identify user with attributes
+Encore.identify('user-123', {
+  email: 'user@example.com'
+})
+
+// Present offer
+const result = await Encore.presentOffer()
+if (result.granted) {
+  console.log('Offer granted!')
+}`;
+
+  constructor(private encoreService: EncoreService) {}
+
+  ngOnInit() {
+    try {
+      this.encoreService.initialize('ENCORE_PUBLIC_API_KEY', 'production');
+      this.userId = this.encoreService.getCurrentUserId() || '';
+      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',
+      };
+    }
+  }
+
+  handleIdentifyUser() {
+    if (!this.customUserId.trim()) {
+      this.status = {
+        message: 'Please enter a user ID',
+        type: 'error',
+      };
+      return;
+    }
+
+    try {
+      this.encoreService.identify(this.customUserId, {
+        email: 'user@example.com',
+      });
+      this.userId = this.customUserId;
+      this.status = {
+        message: `User identified as: ${this.customUserId}`,
+        type: 'success',
+      };
+    } catch (error) {
+      this.status = {
+        message: `Failed to identify user: ${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: ${JSON.stringify(result.reason)}`,
+          type: 'info',
+        };
+      }
+    } catch (error) {
+      this.status = {
+        message: `Failed to present offer: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        type: 'error',
+      };
+    }
+  }
+}
+

package/examples/angular/src/app/encore.service.ts

@@ -0,0 +1,83 @@
+import { Injectable } from '@angular/core';
+import Encore from '@encorekit/web-sdk';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EncoreService {
+  private isInitialized = false;
+
+  constructor() {}
+
+  /**
+   * Generate or retrieve user ID from storage
+   */
+  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 the Encore SDK with specific user ID
+   */
+  initialize(apiKey: string, environment: 'production' | 'development' = 'production'): void {
+    try {
+      Encore.configure({
+        userId: 'test-angular',
+        apiKey,
+        environment,
+        logLevel: 'debug',
+      });
+      this.isInitialized = true;
+    } catch (error) {
+      console.error('Failed to initialize Encore SDK:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Get current user ID
+   */
+  getCurrentUserId(): string | null {
+    if (!this.isInitialized) {
+      console.warn('Encore SDK not initialized');
+      return null;
+    }
+    return Encore.getCurrentUserId();
+  }
+
+  /**
+   * Identify user with custom ID and attributes
+   */
+  identify(userId: string, attributes?: Record<string, any>): void {
+    if (!this.isInitialized) {
+      throw new Error('Encore SDK not initialized');
+    }
+    Encore.identify(userId, attributes);
+  }
+
+  /**
+   * Present an offer to the user
+   */
+  async presentOffer(): Promise<any> {
+    if (!this.isInitialized) {
+      throw new Error('Encore SDK not initialized');
+    }
+    return await Encore.presentOffer();
+  }
+
+  /**
+   * Check if SDK is initialized
+   */
+  getIsInitialized(): boolean {
+    return this.isInitialized;
+  }
+}
+

package/examples/angular/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Encore SDK - Angular Example</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
+

package/examples/angular/src/main.ts

@@ -0,0 +1,7 @@
+import 'zone.js';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent)
+  .catch((err) => console.error(err));
+

package/examples/angular/src/styles.css

@@ -0,0 +1,225 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+app-root {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  display: block;
+  text-align: center;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  font-size: 1.8em;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.card {
+  padding: 2em;
+  background-color: #1a1a1a;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+}
+
+.user-info {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  background-color: #2a2a2a;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.user-info strong {
+  color: #dd0031;
+}
+
+.button-group {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 1.5rem 0;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #dd0031;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button:disabled:hover {
+  border-color: transparent;
+}
+
+.primary {
+  background-color: #dd0031;
+  color: white;
+}
+
+.primary:hover {
+  background-color: #c3002f;
+  border-color: #c3002f;
+}
+
+.success {
+  background-color: #059669;
+  color: white;
+}
+
+.success:hover {
+  background-color: #047857;
+  border-color: #047857;
+}
+
+.status {
+  margin: 1rem 0;
+  padding: 0.8rem;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.status.info {
+  background-color: #1e40af;
+  color: white;
+}
+
+.status.success {
+  background-color: #059669;
+  color: white;
+}
+
+.status.error {
+  background-color: #dc2626;
+  color: white;
+}
+
+.input-group {
+  margin: 1rem 0;
+  text-align: left;
+}
+
+.input-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.input-group input {
+  width: 100%;
+  padding: 0.6em;
+  border-radius: 4px;
+  border: 1px solid #444;
+  background-color: #1a1a1a;
+  color: inherit;
+  font-size: 1em;
+  font-family: inherit;
+}
+
+.input-group input:focus {
+  outline: 2px solid #dd0031;
+  border-color: #dd0031;
+}
+
+code {
+  background-color: #2a2a2a;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+pre {
+  text-align: left;
+  background-color: #1a1a1a;
+  padding: 1rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  
+  button {
+    background-color: #f9f9f9;
+  }
+  
+  .card {
+    background-color: #f9f9f9;
+  }
+  
+  .user-info {
+    background-color: #efefef;
+  }
+  
+  .input-group input {
+    background-color: #ffffff;
+    border-color: #ccc;
+  }
+  
+  code {
+    background-color: #efefef;
+  }
+  
+  pre {
+    background-color: #f5f5f5;
+  }
+}
+

package/examples/angular/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
+