@playbasis-ai/qwikcard-sdk 2.3.4

package/src/QwikCardApp.tsx

@@ -0,0 +1,302 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { View, ActivityIndicator, Platform, Alert, TouchableOpacity, Text } from 'react-native';
+import { WebView, type WebViewMessageEvent } from 'react-native-webview';
+
+import { PlaybasisProvider, usePlaybasis } from './PlaybasisProvider';
+import { useTheme } from './theme/context';
+import { getWidgetHtml } from './web/widgetHtml';
+import type { WidgetBootstrapData, WidgetBridgeMessage } from './web/widgetTypes';
+
+export interface QwikCardAppProps {
+  apiKey: string;
+  tenantId: string;
+  playerId: string;
+  baseUrl?: string;
+  leaderboardId?: string;
+}
+
+function AppContent({ leaderboardId }: { leaderboardId?: string }) {
+  const theme = useTheme();
+  const { client, tenantId, playerId, baseUrl } = usePlaybasis();
+
+  const webViewRef = useRef<WebView>(null);
+  const [activeGame, setActiveGame] = useState<{ url: string; title?: string } | null>(null);
+  const isQwikDark = theme.colors.background.toLowerCase() === '#0f1419';
+  const gameHeaderStyle = {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: isQwikDark ? '#e2e8f0' : theme.colors.surface,
+    backgroundColor: isQwikDark ? '#ffffff' : theme.colors.background,
+  };
+  const gameHeaderTextColor = isQwikDark ? '#0f172a' : theme.colors.text.primary;
+  const closeGame = () => {
+    setActiveGame(null);
+    webViewRef.current?.injectJavaScript(
+      "window.PlaybasisWidget?.useWidgetStore?.getState?.()?.setActiveTab?.('play'); true;",
+    );
+  };
+
+  const html = useMemo(() => getWidgetHtml(), []);
+
+  const buildBootstrapPayload = useCallback(async (): Promise<WidgetBootstrapData> => {
+    if (!playerId) {
+      throw new Error('Missing playerId for widget bootstrap');
+    }
+
+    const [player, balances, quests, allBadges, playerBadges, rewards] = await Promise.all([
+      client.getPlayer(playerId),
+      client.getBalances(playerId),
+      client.getPlayerQuests(playerId),
+      client.getBadges(),
+      client.getPlayerBadges(playerId),
+      client.getRewards().catch(() => []), // Gracefully handle if rewards endpoint doesn't exist
+    ]);
+
+    const xp = balances.find((b) => b.currency === 'xp')?.balance ?? 0;
+    const qwikCoins = balances.find((b) => b.currency === 'qwik-coins')?.balance ?? 0;
+
+    const leaderboardEntries = leaderboardId
+      ? await (async () => {
+          try {
+            const res = await client.getLeaderboard(leaderboardId, { limit: 50 });
+            return res.entries.map((e) => ({
+              userId: e.playerId,
+              rank: e.rank,
+              displayName: e.displayName,
+              score: e.score,
+              isCurrentUser: e.playerId === player.id,
+            }));
+          } catch {
+            return [];
+          }
+        })()
+      : [];
+
+    return {
+      user: {
+        userId: player.id,
+        level: Math.max(1, Math.floor(xp / 1000) + 1),
+        exp: xp,
+        compositeScore: xp,
+        positiveChangePct: 0,
+      },
+      wallet: {
+        currency: 'XP',
+        balance: xp,
+        earnedDelta: 0,
+        qwikCoins,
+      },
+      goals: quests.map((q) => ({
+        goalId: q.id,
+        type: 'financial',
+        target: q.target,
+        current: q.progress,
+        progressPct: q.target > 0 ? Math.round((q.progress / q.target) * 100) : 0,
+        startDate: new Date().toISOString().slice(0, 10),
+        endDate: q.expiresAt ?? new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
+        status:
+          q.status === 'completed' ? 'completed' : q.status === 'expired' ? 'at_risk' : 'on_track',
+        rewards: {
+          xp: q.rewards?.find((r) => r.type === 'points')?.amount || 100,
+          badges: (q.rewards
+            ?.filter((r) => r.type === 'badge')
+            .map((r) => r.badgeId)
+            .filter(Boolean) || []) as string[],
+        },
+      })),
+      badges: allBadges.map((b) => ({
+        id: b.id,
+        name: b.name,
+        rarity: 'common',
+        unlocked: playerBadges.some((pb) => pb.id === b.id && pb.isEarned),
+        imageUrl: b.imageUrl,
+      })),
+      rewards: rewards.map((r) => ({
+        id: r.id,
+        name: r.name,
+        description: r.description || '',
+        cost: r.cost || 0,
+        imageUrl: r.imageUrl,
+      })),
+      activities: [],
+      leaderboardEntries,
+      tenantId,
+    };
+  }, [client, leaderboardId, playerId, tenantId]);
+
+  const handleMessage = useCallback(
+    async (event: WebViewMessageEvent) => {
+      let message: WidgetBridgeMessage;
+      try {
+        message = JSON.parse(event.nativeEvent.data) as WidgetBridgeMessage;
+      } catch {
+        return;
+      }
+
+      if (message.type === 'ERROR') {
+        // Handle errors from WebView
+        console.error('[QwikCardApp] WebView Error:', message.error);
+        Alert.alert('Widget Error', message.error || 'An unknown error occurred in the widget.');
+        return;
+      }
+
+      if (message.type === 'OPEN_GAME') {
+        setActiveGame({ url: message.url, title: message.title });
+        return;
+      }
+
+      if (message.type !== 'REQUEST') return;
+
+      const sendResponse = (payload: WidgetBridgeMessage) => {
+        const js = `window.__PB_HANDLE_NATIVE_MESSAGE__ && window.__PB_HANDLE_NATIVE_MESSAGE__(${JSON.stringify(
+          payload,
+        )}); true;`;
+        webViewRef.current?.injectJavaScript(js);
+      };
+
+      const requestId = message.requestId;
+
+      if (!playerId) {
+        sendResponse({
+          type: 'RESPONSE',
+          requestId,
+          ok: false,
+          error: 'PlayerId is required for widget data requests',
+        });
+        return;
+      }
+
+      try {
+        switch (message.resource) {
+          case 'bootstrap': {
+            const data = await buildBootstrapPayload();
+            sendResponse({ type: 'RESPONSE', requestId, ok: true, data });
+            return;
+          }
+          default: {
+            sendResponse({
+              type: 'RESPONSE',
+              requestId,
+              ok: false,
+              error: `Unsupported resource: ${String((message as any).resource)}`,
+            });
+            return;
+          }
+        }
+      } catch (error) {
+        sendResponse({
+          type: 'RESPONSE',
+          requestId,
+          ok: false,
+          error: error instanceof Error ? error.message : 'Failed to process widget request',
+        });
+      }
+    },
+    [buildBootstrapPayload, playerId],
+  );
+
+  const injectedJavaScript = useMemo(() => {
+    // Seed initial config for the widget and establish a stable native->web message handler.
+    // The web layer will immediately request `bootstrap` from native.
+    const initPayload: WidgetBridgeMessage = {
+      type: 'INIT',
+      config: {
+        tenantId,
+        playerId: playerId ?? '',
+        baseUrl,
+      },
+      platform: Platform.OS,
+    };
+    return `window.__PB_INIT__ = ${JSON.stringify(initPayload)}; true;`;
+  }, [tenantId, playerId, baseUrl]);
+
+  if (!playerId) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.background,
+        }}
+      >
+        <ActivityIndicator size="large" color={theme.colors.primary} />
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: theme.colors.background }}>
+      <View style={{ flex: 1, display: activeGame ? 'none' : 'flex' }}>
+        <WebView
+          ref={webViewRef}
+          originWhitelist={['*']}
+          source={{ html }}
+          onMessage={handleMessage}
+          injectedJavaScript={injectedJavaScript}
+          javaScriptEnabled
+          domStorageEnabled
+          allowsInlineMediaPlayback
+          startInLoadingState
+          renderLoading={() => (
+            <View
+              style={{
+                flex: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: theme.colors.background,
+              }}
+            >
+              <ActivityIndicator size="large" color={theme.colors.primary} />
+            </View>
+          )}
+          // Reduce common RN/WebView UX papercuts.
+          keyboardDisplayRequiresUserAction={false as any}
+          setSupportMultipleWindows={false}
+          // Avoid white flashes on iOS.
+          style={{ backgroundColor: theme.colors.background }}
+        />
+      </View>
+      {activeGame && (
+        <View style={{ flex: 1 }}>
+          <View style={gameHeaderStyle}>
+            <TouchableOpacity
+              onPress={closeGame}
+              style={{ paddingVertical: 4, paddingRight: 8 }}
+            >
+              <Text style={{ color: theme.colors.primary, fontWeight: '700' }}>← Arcade</Text>
+            </TouchableOpacity>
+            <Text
+              style={{
+                marginLeft: 4,
+                color: gameHeaderTextColor,
+                fontWeight: '700',
+              }}
+            >
+              {activeGame.title || 'Play'}
+            </Text>
+          </View>
+          <WebView
+            originWhitelist={['*']}
+            source={{ uri: activeGame.url }}
+            javaScriptEnabled
+            domStorageEnabled
+            allowsInlineMediaPlayback
+            startInLoadingState
+          />
+        </View>
+      )}
+    </View>
+  );
+}
+
+export function QwikCardApp(props: QwikCardAppProps) {
+  return (
+    <PlaybasisProvider {...props}>
+      <AppContent leaderboardId={props.leaderboardId} />
+    </PlaybasisProvider>
+  );
+}

package/src/api/client.ts

@@ -0,0 +1,307 @@
+import type {
+  Badge,
+  LeaderboardEntry,
+  Player,
+  PlayerRank,
+  PointBalance,
+  Quest,
+  RedemptionResult,
+  Reward,
+  TrackEventInput,
+} from '../types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Configuration
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ClientConfig {
+  apiKey: string;
+  tenantId: string;
+  baseUrl?: string;
+  fetchImpl?: typeof fetch;
+}
+
+const DEFAULT_BASE_URL = 'https://apim-pb-staging.azure-api.net/playbasis/v1';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Client
+// ─────────────────────────────────────────────────────────────────────────────
+
+export class PlaybasisClient {
+  private readonly baseUrl: string;
+  private readonly fetchImpl: typeof fetch;
+  private readonly apiKey: string;
+  private readonly tenantId: string;
+
+  constructor(config: ClientConfig) {
+    this.tenantId = config.tenantId;
+    this.baseUrl = (config.baseUrl || DEFAULT_BASE_URL).replace(/\/+$/, '');
+    this.fetchImpl = config.fetchImpl ?? fetch;
+    this.apiKey = config.apiKey;
+  }
+
+  /**
+   * Generate a unique ID for idempotency keys.
+   * Uses crypto.randomUUID when available, falls back to timestamp + random.
+   */
+  private generateId(): string {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+      return crypto.randomUUID();
+    }
+    // Fallback for environments without crypto.randomUUID
+    return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+  }
+
+  private async request<T>(
+    method: 'GET' | 'POST' | 'PATCH',
+    path: string,
+    options?: { body?: unknown; headers?: Record<string, string> },
+  ): Promise<T> {
+    const url = `${this.baseUrl}${path.startsWith('/') ? '' : '/'}${path}`;
+
+    // Build headers with Content-Type set before creating init
+    const headers: Record<string, string> = {
+      'Ocp-Apim-Subscription-Key': this.apiKey,
+      'X-Tenant-ID': this.tenantId,
+      ...options?.headers,
+    };
+
+    // Set Content-Type before assigning to init to avoid mutation after reference
+    if (options?.body !== undefined) {
+      headers['Content-Type'] = headers['Content-Type'] ?? 'application/json';
+    }
+
+    const init: RequestInit = {
+      method,
+      headers,
+      body: options?.body !== undefined ? JSON.stringify(options.body) : undefined,
+    };
+
+    const response = await this.fetchImpl(url, init);
+    const text = await response.text();
+
+    // Safely parse JSON - server may return non-JSON (e.g., HTML error page)
+    let json: unknown;
+    if (text) {
+      try {
+        json = JSON.parse(text);
+      } catch {
+        // Response is not valid JSON - leave as undefined
+        json = undefined;
+      }
+    }
+
+    const getErrorMessage = (value: unknown): string | undefined => {
+      if (!value || typeof value !== 'object') return undefined;
+      if (!('message' in value)) return undefined;
+      const messageValue = (value as { message?: unknown }).message;
+      return typeof messageValue === 'string' ? messageValue : undefined;
+    };
+
+    if (!response.ok) {
+      const errorMessage =
+        getErrorMessage(json) ||
+        (text && !json ? text.slice(0, 200) : null) ||
+        `Request failed: ${response.status} ${response.statusText}`;
+      throw new Error(String(errorMessage));
+    }
+
+    return json as T;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Players
+  // ─────────────────────────────────────────────────────────────────────────
+
+  async createPlayer(input: {
+    displayName: string;
+    email?: string;
+    metadata?: Record<string, unknown>;
+  }): Promise<Player> {
+    const data = await this.request<{ player: Player }>('POST', '/players', { body: input });
+    return data.player;
+  }
+
+  async getPlayer(playerId: string): Promise<Player> {
+    const data = await this.request<{ player: Player }>(
+      'GET',
+      `/players/${encodeURIComponent(playerId)}`,
+    );
+    return data.player;
+  }
+
+  async updatePlayer(
+    playerId: string,
+    updates: Partial<{ displayName: string; metadata: Record<string, unknown> }>,
+  ): Promise<Player> {
+    const data = await this.request<{ player: Player }>(
+      'PATCH',
+      `/players/${encodeURIComponent(playerId)}`,
+      {
+        body: updates,
+      },
+    );
+    return data.player;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Points
+  // ─────────────────────────────────────────────────────────────────────────
+
+  async getBalances(playerId: string): Promise<PointBalance[]> {
+    const data = await this.request<{ balances: PointBalance[] }>(
+      'GET',
+      `/players/${encodeURIComponent(playerId)}/points`,
+    );
+    return data.balances;
+  }
+
+  async earnPoints(input: {
+    playerId: string;
+    currency: string;
+    amount: number;
+    reason?: string;
+  }): Promise<PointBalance> {
+    const idempotencyKey = `earn-${input.playerId}-${this.generateId()}`;
+    const data = await this.request<{ balance: PointBalance }>('POST', '/points/earn', {
+      body: input,
+      headers: { 'Idempotency-Key': idempotencyKey },
+    });
+    return data.balance;
+  }
+
+  async redeemPoints(input: {
+    playerId: string;
+    currency: string;
+    amount: number;
+    reason?: string;
+  }): Promise<PointBalance> {
+    const idempotencyKey = `redeem-${input.playerId}-${this.generateId()}`;
+    const data = await this.request<{ balance: PointBalance }>('POST', '/points/redeem', {
+      body: input,
+      headers: { 'Idempotency-Key': idempotencyKey },
+    });
+    return data.balance;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Events
+  // ─────────────────────────────────────────────────────────────────────────
+
+  async trackEvent(input: TrackEventInput): Promise<{ eventId: string }> {
+    const idempotencyKey = input.referenceId || `evt-${input.playerId}-${this.generateId()}`;
+    const event = {
+      id: idempotencyKey,
+      source: 'qwikcard-app',
+      type: input.type,
+      specversion: '1.0',
+      time: new Date().toISOString(),
+      subject: input.playerId,
+      data: input.data || {},
+    };
+    const data = await this.request<{ event?: { id?: string } }>('POST', '/events', {
+      body: event,
+      headers: { 'Idempotency-Key': idempotencyKey },
+    });
+    return { eventId: data.event?.id || idempotencyKey };
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Quests
+  // ─────────────────────────────────────────────────────────────────────────
+
+  async getQuests(): Promise<Quest[]> {
+    const data = await this.request<{ quests?: Quest[] }>('GET', '/quests');
+    return data.quests || [];
+  }
+
+  async getPlayerQuests(playerId: string): Promise<Quest[]> {
+    const data = await this.request<{ quests?: Quest[] }>(
+      'GET',
+      `/players/${encodeURIComponent(playerId)}/quests`,
+    );
+    return data.quests || [];
+  }
+
+  async getQuestProgress(playerId: string, questId: string): Promise<Quest> {
+    const data = await this.request<{ quest: Quest }>(
+      'GET',
+      `/players/${encodeURIComponent(playerId)}/quests/${encodeURIComponent(questId)}`,
+    );
+    return data.quest;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Badges
+  // ─────────────────────────────────────────────────────────────────────────
+
+  async getBadges(): Promise<Badge[]> {
+    const data = await this.request<{ badges?: Badge[] }>('GET', '/badges');
+    return data.badges || [];
+  }
+
+  async getPlayerBadges(playerId: string): Promise<Badge[]> {
+    const data = await this.request<{ badges?: Badge[] }>(
+      'GET',
+      `/players/${encodeURIComponent(playerId)}/badges`,
+    );
+    return data.badges || [];
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Rewards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  async getRewards(): Promise<Reward[]> {
+    const data = await this.request<{ rewards?: Reward[] }>('GET', '/rewards');
+    return data.rewards || [];
+  }
+
+  async redeemReward(playerId: string, rewardId: string): Promise<RedemptionResult> {
+    const idempotencyKey = `reward-${playerId}-${rewardId}-${this.generateId()}`;
+    const data = await this.request<RedemptionResult>('POST', '/rewards/redeem', {
+      body: { playerId, rewardId },
+      headers: { 'Idempotency-Key': idempotencyKey },
+    });
+    return data;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Leaderboards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  async getLeaderboard(
+    leaderboardId: string,
+    options?: { limit?: number; cursor?: string },
+  ): Promise<{ entries: LeaderboardEntry[]; total: number }> {
+    const params = new URLSearchParams();
+    if (options?.limit) params.set('limit', String(options.limit));
+    if (options?.cursor) params.set('cursor', options.cursor);
+
+    const data = await this.request<{
+      leaderboard?: { entries?: LeaderboardEntry[]; total?: number };
+    }>('GET', `/leaderboards/${encodeURIComponent(leaderboardId)}?${params}`);
+    return {
+      entries: data.leaderboard?.entries || [],
+      total: data.leaderboard?.total || 0,
+    };
+  }
+
+  async getPlayerRank(leaderboardId: string, playerId: string): Promise<PlayerRank> {
+    const data = await this.request<{ player: PlayerRank }>(
+      'GET',
+      `/leaderboards/${encodeURIComponent(leaderboardId)}/players/${encodeURIComponent(playerId)}`,
+    );
+    return data.player;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Health Check
+  // ─────────────────────────────────────────────────────────────────────────
+
+  async health(): Promise<{ status: string }> {
+    return this.request<{ status: string }>('GET', '/health');
+  }
+}
+
+export default PlaybasisClient;

package/src/components/Badge.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { useTheme } from '../theme/context';
+
+interface BadgeProps {
+  label: string;
+  value?: string;
+  color?: string; // Optional override
+}
+
+export function StatBadge({ label, value, color }: BadgeProps) {
+  const theme = useTheme();
+  const accentColor = color || theme.colors.primary;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: `${accentColor}1A`, // 10% opacity
+          borderColor: `${accentColor}33`, // 20% opacity
+          borderRadius: theme.borderRadius.m,
+        },
+      ]}
+    >
+      <Text style={[styles.label, { color: theme.colors.text.secondary }]}>{label}</Text>
+      {value && <Text style={[styles.value, { color: accentColor }]}>{value}</Text>}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 10,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 2,
+  },
+  value: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+});