@encorekit/web-sdk 0.1.1 → 0.1.7

package/examples/vue/README.md

@@ -0,0 +1,212 @@
+# Encore SDK - Vue Example
+
+This example demonstrates how to integrate the Encore Web SDK into a Vue 3 application using Vite, TypeScript, and the Composition API.
+
+## 🚀 Quick Start
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+```
+
+The app will be available at `http://localhost:5173`
+
+## 📁 Project Structure
+
+```
+vue/
+├── src/
+│   ├── App.vue          # Main application component
+│   ├── main.ts          # Application entry point
+│   ├── style.css        # Global styles
+│   └── vite-env.d.ts    # Vite type definitions
+├── index.html           # HTML template
+├── package.json         # Dependencies and scripts
+├── tsconfig.json        # TypeScript configuration
+└── vite.config.ts       # Vite configuration
+```
+
+## 🔑 Configuration
+
+Before running the example, replace `'YOUR_API_KEY_HERE'` in `src/App.vue` with your actual Encore API key:
+
+```typescript
+Encore.configure({
+  apiKey: 'YOUR_API_KEY_HERE', // Get this from dashboard.encorekit.com
+  environment: 'production',
+  logLevel: 'debug',
+})
+```
+
+## 🎯 Features Demonstrated
+
+### 1. SDK Initialization
+The SDK is initialized when the component mounts using `onMounted`:
+
+```typescript
+import { onMounted } from 'vue'
+import Encore from '@encorekit/web-sdk'
+
+onMounted(() => {
+  Encore.configure({
+    apiKey: 'YOUR_API_KEY_HERE',
+    environment: 'production',
+    logLevel: 'debug',
+  })
+  
+  const currentUserId = Encore.getCurrentUserId()
+  userId.value = currentUserId || ''
+  isInitialized.value = true
+})
+```
+
+### 2. Reactive State Management
+Vue's reactivity system tracks SDK state:
+
+```typescript
+import { ref } from 'vue'
+
+const isInitialized = ref(false)
+const userId = ref('')
+const customUserId = ref('')
+```
+
+### 3. User Identification
+Users can be identified with custom IDs and attributes:
+
+```typescript
+const handleIdentifyUser = () => {
+  Encore.identify(customUserId.value, {
+    email: 'user@example.com',
+  })
+  userId.value = customUserId.value
+}
+```
+
+### 4. Presenting Offers
+Display targeted offers to users:
+
+```typescript
+const handlePresentOffer = async () => {
+  const result = await Encore.presentOffer()
+  
+  if (result.granted) {
+    console.log('Offer granted!')
+  }
+}
+```
+
+## 🏗️ Vue Patterns
+
+This example uses Vue 3 best practices:
+
+- **Composition API** - `<script setup>` for cleaner component logic
+- **Reactivity** - `ref()` for reactive state management
+- **Lifecycle Hooks** - `onMounted()` for initialization
+- **TypeScript** - Full type safety with TypeScript
+- **Template Syntax** - Vue's declarative template syntax
+- **Event Handling** - `@click` for user interactions
+
+## 📦 Dependencies
+
+- `vue` ^3.4.21 - Vue 3 framework
+- `@encorekit/web-sdk` ^0.2.0 - Encore Web SDK
+- `vite` ^5.4.1 - Build tool and dev server
+- `typescript` ^5.5.3 - TypeScript compiler
+- `vue-tsc` ^2.0.6 - Vue TypeScript compiler
+
+## 🔧 Available Scripts
+
+- `npm run dev` - Start development server with hot reload
+- `npm run build` - Build for production (with type checking)
+- `npm run preview` - Preview production build locally
+
+## 💡 Best Practices
+
+1. **Initialize Once** - Initialize the SDK in `onMounted` hook
+2. **Error Handling** - Always wrap SDK calls in try-catch blocks
+3. **Reactive State** - Use `ref()` or `reactive()` for state management
+4. **User Feedback** - Provide clear feedback for all SDK operations
+5. **Environment Variables** - In production, use environment variables for the API key
+6. **Type Safety** - Use TypeScript for better developer experience
+
+## 🎨 Customization
+
+### Using Environment Variables
+
+Create a `.env` file:
+
+```env
+VITE_ENCORE_API_KEY=your-api-key-here
+```
+
+Update `App.vue`:
+
+```typescript
+Encore.configure({
+  apiKey: import.meta.env.VITE_ENCORE_API_KEY,
+  environment: 'production',
+})
+```
+
+### Creating a Composable
+
+For better reusability, create a composable function:
+
+```typescript
+// composables/useEncore.ts
+import { ref, onMounted } from 'vue'
+import Encore from '@encorekit/web-sdk'
+
+export function useEncore(apiKey: string) {
+  const isInitialized = ref(false)
+  const userId = ref('')
+
+  onMounted(() => {
+    Encore.configure({ apiKey })
+    userId.value = Encore.getCurrentUserId() || ''
+    isInitialized.value = true
+  })
+
+  const presentOffer = async () => {
+    return await Encore.presentOffer()
+  }
+
+  const identify = (id: string, attributes?: Record<string, any>) => {
+    Encore.identify(id, attributes)
+    userId.value = id
+  }
+
+  return { isInitialized, userId, presentOffer, identify }
+}
+```
+
+Usage in component:
+
+```vue
+<script setup lang="ts">
+import { useEncore } from './composables/useEncore'
+
+const { userId, isInitialized, presentOffer, identify } = useEncore('YOUR_API_KEY')
+</script>
+```
+
+## 📚 Learn More
+
+- [Encore SDK Documentation](https://docs.encorekit.com)
+- [Vue 3 Documentation](https://vuejs.org)
+- [Vite Documentation](https://vitejs.dev)
+- [TypeScript Documentation](https://www.typescriptlang.org)
+
+## 🆘 Support
+
+- 📧 Email: admin@encorekit.com
+- 📖 Docs: https://docs.encorekit.com
+
+

package/examples/vue/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Encore SDK - Vue Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+

package/examples/vue/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "encore-sdk-vue-example",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Vue example for Encore Web SDK",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@encorekit/web-sdk": "^0.1.1",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1",
+    "vue-tsc": "^2.0.6"
+  }
+}
+

package/examples/vue/src/App.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import Encore from '@encorekit/web-sdk'
+
+const isInitialized = ref(false)
+const userId = ref('')
+const customUserId = ref('')
+const status = ref<{
+  message: string
+  type: 'info' | 'success' | 'error'
+} | null>(null)
+
+// Initialize SDK on mount
+onMounted(() => {
+  try {    
+    Encore.configure({
+      apiKey: 'ENCORE_PUBLIC_API_KEY', // Replace with your actual API key
+      userId: 'test-vue',
+      environment: 'production',
+      logLevel: 'debug',
+    })
+    
+    const currentUserId = Encore.getCurrentUserId()
+    userId.value = currentUserId || ''
+    isInitialized.value = true
+    status.value = {
+      message: 'Encore SDK initialized successfully!',
+      type: 'success',
+    }
+  } catch (error) {
+    status.value = {
+      message: `Failed to initialize SDK: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      type: 'error',
+    }
+  }
+})
+
+const handleIdentifyUser = () => {
+  if (!customUserId.value.trim()) {
+    status.value = {
+      message: 'Please enter a user ID',
+      type: 'error',
+    }
+    return
+  }
+
+  try {
+    Encore.identify(customUserId.value, {
+      email: 'user@example.com',
+    })
+    userId.value = customUserId.value
+    status.value = {
+      message: `User identified as: ${customUserId.value}`,
+      type: 'success',
+    }
+  } catch (error) {
+    status.value = {
+      message: `Failed to identify user: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      type: 'error',
+    }
+  }
+}
+
+const handlePresentOffer = async () => {
+  status.value = {
+    message: 'Presenting offer...',
+    type: 'info',
+  }
+
+  try {
+    const result = await Encore.presentOffer()
+    
+    if (result.granted) {
+      status.value = {
+        message: 'Offer granted successfully!',
+        type: 'success',
+      }
+    } else {
+      status.value = {
+        message: `Offer not granted: ${JSON.stringify(result.reason)}`,
+        type: 'info',
+      }
+    }
+  } catch (error) {
+    status.value = {
+      message: `Failed to present offer: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      type: 'error',
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="app">
+    <h1>🎯 Encore SDK</h1>
+    <p>Vue 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 v-if="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"
+          v-model="customUserId"
+          type="text"
+          placeholder="Enter user ID (e.g., user-123)"
+          :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>
+</template>
+
+<script lang="ts">
+const codeExample = `// Initialize SDK
+Encore.configure({
+  apiKey: 'your-api-key',
+  userId: 'user-123',
+  environment: 'production',
+})
+
+// Identify user
+Encore.identify('user-123', {
+  email: 'user@example.com'
+})
+
+// Present offer
+const result = await Encore.presentOffer()
+if (result.granted) {
+  console.log('Offer granted!')
+}`
+</script>
+

package/examples/vue/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+

package/examples/vue/src/style.css

@@ -0,0 +1,224 @@
+: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 {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  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: #42b883;
+}
+
+.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: #42b883;
+}
+
+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: #42b883;
+  color: white;
+}
+
+.primary:hover {
+  background-color: #33a06f;
+  border-color: #33a06f;
+}
+
+.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 #42b883;
+  border-color: #42b883;
+}
+
+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/vue/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+

package/examples/vue/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
+

package/examples/vue/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})
+