@playbasis-ai/qwikcard-sdk 2.3.4

package/src/components/RewardCard.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+
+import { GradientCard } from './GradientCard';
+import { Button } from './Button';
+import { useTheme } from '../theme/context';
+import type { Reward } from '../types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Props
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface RewardCardProps {
+  reward: Reward;
+  onRedeem?: () => void;
+  disabled?: boolean;
+  style?: object;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function RewardCard({ reward, onRedeem, disabled = false, style }: RewardCardProps) {
+  const theme = useTheme();
+  const isAvailable = reward.available && !disabled;
+
+  return (
+    <GradientCard style={[styles.container, style]}>
+      {reward.imageUrl ? (
+        <Image source={{ uri: reward.imageUrl }} style={styles.image} resizeMode="cover" />
+      ) : (
+        <View style={[styles.imagePlaceholder, { backgroundColor: 'rgba(255, 69, 0, 0.1)' }]}>
+          <Text style={styles.placeholderText}>🎁</Text>
+        </View>
+      )}
+
+      <View style={styles.content}>
+        <Text style={[styles.name, { color: theme.colors.text.primary }]}>{reward.name}</Text>
+        <Text
+          style={[styles.description, { color: theme.colors.text.secondary }]}
+          numberOfLines={2}
+        >
+          {reward.description}
+        </Text>
+
+        <View style={styles.footer}>
+          <View style={styles.cost}>
+            <Text style={[styles.costAmount, { color: theme.colors.text.primary }]}>
+              {reward.cost}
+            </Text>
+            <Text style={[styles.costCurrency, { color: theme.colors.text.secondary }]}>
+              {reward.currency}
+            </Text>
+          </View>
+
+          {onRedeem && (
+            <Button
+              title={isAvailable ? 'Redeem' : 'Unavailable'}
+              onPress={onRedeem}
+              variant={isAvailable ? 'primary' : 'secondary'}
+              style={{ opacity: isAvailable ? 1 : 0.6 }}
+            />
+          )}
+        </View>
+      </View>
+    </GradientCard>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 8,
+  },
+  image: {
+    width: '100%',
+    height: 140,
+  },
+  imagePlaceholder: {
+    width: '100%',
+    height: 140,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  placeholderText: {
+    fontSize: 48,
+  },
+  content: {
+    padding: 16,
+  },
+  name: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 4,
+  },
+  description: {
+    fontSize: 14,
+    marginBottom: 16,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  cost: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+  },
+  costAmount: {
+    fontSize: 20,
+    fontWeight: '800',
+  },
+  costCurrency: {
+    fontSize: 12,
+    marginLeft: 4,
+  },
+});
+
+export default RewardCard;

package/src/components/RulesModal.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  SafeAreaView,
+} from 'react-native';
+
+import { useTheme } from '../theme/context';
+import { GradientCard } from './GradientCard';
+
+interface RulesModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export function RulesModal({ visible, onClose }: RulesModalProps) {
+  const theme = useTheme();
+
+  const rules = [
+    { icon: '🛍️', title: 'Spend & Earn', desc: 'Earn 1 XP for every $5 spent on your QwikCard.' },
+    { icon: '🧾', title: 'Pay Bills', desc: 'Get +50 XP and 1 Qwik Coin for every bill paid.' },
+    {
+      icon: '🔥',
+      title: 'Streaks',
+      desc: 'Maintain a daily login streak for massive XP milestones.',
+    },
+    {
+      icon: '🤝',
+      title: 'Refer Friends',
+      desc: 'Earn +500 XP and 5 Qwik Coins when friends activate.',
+    },
+    { icon: '📊', title: 'Credit Checks', desc: 'Check your credit score weekly to earn +50 XP.' },
+    {
+      icon: '💡',
+      title: 'Financial Literacy',
+      desc: 'Complete quizzes to earn +100 XP per lesson.',
+    },
+  ];
+
+  return (
+    <Modal visible={visible} animationType="slide" transparent={true} onRequestClose={onClose}>
+      <View style={styles.overlay}>
+        <SafeAreaView style={styles.safeArea}>
+          <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+            <View style={styles.header}>
+              <Text style={[styles.title, { color: theme.colors.text.primary }]}>How to Play</Text>
+              <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                <Text style={{ fontSize: 24, color: theme.colors.text.secondary }}>✕</Text>
+              </TouchableOpacity>
+            </View>
+
+            <ScrollView contentContainerStyle={styles.scrollContent}>
+              <Text style={[styles.subtitle, { color: theme.colors.text.secondary }]}>
+                Level up your financial future by building healthy habits. Here is how you earn
+                rewards:
+              </Text>
+
+              {rules.map((rule, index) => (
+                <GradientCard key={index} style={styles.ruleCard}>
+                  <View style={styles.ruleRow}>
+                    <View style={styles.iconContainer}>
+                      <Text style={{ fontSize: 24 }}>{rule.icon}</Text>
+                    </View>
+                    <View style={styles.textContainer}>
+                      <Text style={[styles.ruleTitle, { color: theme.colors.text.primary }]}>
+                        {rule.title}
+                      </Text>
+                      <Text style={[styles.ruleDesc, { color: theme.colors.text.secondary }]}>
+                        {rule.desc}
+                      </Text>
+                    </View>
+                  </View>
+                </GradientCard>
+              ))}
+
+              <TouchableOpacity
+                onPress={onClose}
+                style={[styles.actionButton, { backgroundColor: theme.colors.primary }]}
+              >
+                <Text style={styles.actionButtonText}>Got it!</Text>
+              </TouchableOpacity>
+            </ScrollView>
+          </View>
+        </SafeAreaView>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.85)',
+  },
+  safeArea: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  container: {
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+    height: '90%',
+    padding: 24,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '900',
+  },
+  closeButton: {
+    padding: 8,
+  },
+  scrollContent: {
+    paddingBottom: 40,
+  },
+  subtitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 24,
+  },
+  ruleCard: {
+    padding: 16,
+    marginBottom: 12,
+    borderRadius: 20,
+  },
+  ruleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 14,
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  ruleTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginBottom: 2,
+  },
+  ruleDesc: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  actionButton: {
+    marginTop: 24,
+    padding: 18,
+    borderRadius: 18,
+    alignItems: 'center',
+  },
+  actionButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '800',
+  },
+});

package/src/hooks/useBadges.ts

@@ -0,0 +1,59 @@
+import { useState, useEffect, useCallback } from 'react';
+
+import { usePlaybasis } from '../PlaybasisProvider';
+import type { Badge } from '../types';
+
+interface UseBadgesReturn {
+  badges: Badge[];
+  earnedBadges: Badge[];
+  allBadges: Badge[];
+  loading: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+}
+
+export function useBadges(): UseBadgesReturn {
+  const { client, playerId } = usePlaybasis();
+  const [badges, setBadges] = useState<Badge[]>([]);
+  const [allBadges, setAllBadges] = useState<Badge[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchBadges = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Fetch all available badges
+      const all = await client.getBadges();
+      setAllBadges(all);
+
+      // Fetch player's earned badges
+      if (playerId) {
+        const playerBadges = await client.getPlayerBadges(playerId);
+        setBadges(playerBadges);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch badges'));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, playerId]);
+
+  useEffect(() => {
+    fetchBadges();
+  }, [fetchBadges]);
+
+  const earnedBadges = badges.filter((b) => b.isEarned);
+
+  return {
+    badges,
+    earnedBadges,
+    allBadges,
+    loading,
+    error,
+    refresh: fetchBadges,
+  };
+}
+
+export default useBadges;

package/src/hooks/usePoints.ts

@@ -0,0 +1,91 @@
+import { useState, useEffect, useCallback } from 'react';
+
+import { usePlaybasis } from '../PlaybasisProvider';
+import type { PointBalance, Currency } from '../types';
+
+interface UsePointsReturn {
+  balances: PointBalance[];
+  xp: number;
+  qwikCoins: number;
+  loading: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+  earn: (currency: Currency, amount: number, reason?: string) => Promise<PointBalance | null>;
+}
+
+export function usePoints(): UsePointsReturn {
+  const { client, playerId } = usePlaybasis();
+  const [balances, setBalances] = useState<PointBalance[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchBalances = useCallback(async () => {
+    if (!playerId) {
+      setBalances([]);
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const playerBalances = await client.getBalances(playerId);
+      setBalances(playerBalances);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch balances'));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, playerId]);
+
+  useEffect(() => {
+    fetchBalances();
+  }, [fetchBalances]);
+
+  const earn = useCallback(
+    async (currency: Currency, amount: number, reason?: string): Promise<PointBalance | null> => {
+      if (!playerId) return null;
+
+      try {
+        const balance = await client.earnPoints({
+          playerId,
+          currency,
+          amount,
+          reason,
+        });
+        // Update local state
+        setBalances((prev) => {
+          const idx = prev.findIndex((b) => b.currency === currency);
+          if (idx >= 0) {
+            const updated = [...prev];
+            updated[idx] = balance;
+            return updated;
+          }
+          return [...prev, balance];
+        });
+        return balance;
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Failed to earn points'));
+        return null;
+      }
+    },
+    [client, playerId],
+  );
+
+  // Helper getters for common currencies
+  const xp = balances.find((b) => b.currency === 'xp')?.balance ?? 0;
+  const qwikCoins = balances.find((b) => b.currency === 'coins')?.balance ?? 0;
+
+  return {
+    balances,
+    xp,
+    qwikCoins,
+    loading,
+    error,
+    refresh: fetchBalances,
+    earn,
+  };
+}
+
+export default usePoints;

package/src/hooks/useQuests.ts

@@ -0,0 +1,60 @@
+import { useState, useEffect, useCallback } from 'react';
+
+import { usePlaybasis } from '../PlaybasisProvider';
+import type { Quest } from '../types';
+
+interface UseQuestsReturn {
+  quests: Quest[];
+  completedQuests: Quest[];
+  activeQuests: Quest[];
+  loading: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+}
+
+export function useQuests(): UseQuestsReturn {
+  const { client, playerId } = usePlaybasis();
+  const [quests, setQuests] = useState<Quest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchQuests = useCallback(async () => {
+    if (!playerId) {
+      setQuests([]);
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const playerQuests = await client.getPlayerQuests(playerId);
+      setQuests(playerQuests);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch quests'));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, playerId]);
+
+  useEffect(() => {
+    fetchQuests();
+  }, [fetchQuests]);
+
+  const activeQuests = quests.filter(
+    (q) => q.status === 'in_progress' || q.status === 'not_started',
+  );
+  const completedQuests = quests.filter((q) => q.status === 'completed');
+
+  return {
+    quests,
+    activeQuests,
+    completedQuests,
+    loading,
+    error,
+    refresh: fetchQuests,
+  };
+}
+
+export default useQuests;

package/src/hooks/useQwikApp.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+import { usePlaybasis } from '../PlaybasisProvider';
+import { usePoints } from './usePoints';
+import { useQuests } from './useQuests';
+import { useRewards } from './useRewards';
+import { useBadges } from './useBadges';
+
+/**
+ * Validates and aggregates all SDK data hooks.
+ * Use this to ensure the "App" has all necessary data loaded.
+ */
+export function useQwikApp() {
+  const { client, playerId } = usePlaybasis();
+  const { balances, refresh: refreshPoints, loading: loadingPoints } = usePoints();
+  const { quests, loading: loadingQuests } = useQuests();
+  const { rewards, loading: loadingRewards } = useRewards();
+  const { badges, loading: loadingBadges } = useBadges();
+
+  const [isReady, setIsReady] = useState(false);
+
+  // Check if critical data is loaded
+  const isLoading = loadingPoints || loadingQuests || loadingRewards || loadingBadges;
+
+  useEffect(() => {
+    if (!isLoading && playerId) {
+      setIsReady(true);
+    }
+  }, [isLoading, playerId]);
+
+  const refreshAll = async () => {
+    await Promise.all([
+      refreshPoints(),
+      // Add other refresh methods if exposed by hooks
+    ]);
+  };
+
+  return {
+    isReady,
+    isLoading,
+    refreshAll,
+    data: {
+      balances,
+      quests,
+      rewards,
+      badges,
+    },
+  };
+}

package/src/hooks/useRewards.ts

@@ -0,0 +1,74 @@
+import { useState, useEffect, useCallback } from 'react';
+
+import { usePlaybasis } from '../PlaybasisProvider';
+import type { Reward, RedemptionResult } from '../types';
+
+interface UseRewardsReturn {
+  rewards: Reward[];
+  loading: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+  redeem: (rewardId: string) => Promise<RedemptionResult>;
+  redeeming: boolean;
+}
+
+export function useRewards(): UseRewardsReturn {
+  const { client, playerId } = usePlaybasis();
+  const [rewards, setRewards] = useState<Reward[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [redeeming, setRedeeming] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchRewards = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const allRewards = await client.getRewards();
+      setRewards(allRewards);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch rewards'));
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+
+  useEffect(() => {
+    fetchRewards();
+  }, [fetchRewards]);
+
+  const redeem = useCallback(
+    async (rewardId: string): Promise<RedemptionResult> => {
+      if (!playerId) {
+        return { success: false, message: 'No player ID set' };
+      }
+
+      setRedeeming(true);
+      try {
+        const result = await client.redeemReward(playerId, rewardId);
+        // Refresh rewards after redemption
+        await fetchRewards();
+        return result;
+      } catch (err) {
+        return {
+          success: false,
+          message: err instanceof Error ? err.message : 'Redemption failed',
+        };
+      } finally {
+        setRedeeming(false);
+      }
+    },
+    [client, playerId, fetchRewards],
+  );
+
+  return {
+    rewards,
+    loading,
+    error,
+    refresh: fetchRewards,
+    redeem,
+    redeeming,
+  };
+}
+
+export default useRewards;

package/src/index.ts

@@ -0,0 +1,34 @@
+/**
+ * Playbasis SDK for QwikCard College Rewards
+ *
+ * @packageDocumentation
+ */
+
+export { PlaybasisProvider, usePlaybasis } from './PlaybasisProvider';
+export { PlaybasisClient } from './api/client';
+export { useQuests } from './hooks/useQuests';
+export { useRewards } from './hooks/useRewards';
+export { useBadges } from './hooks/useBadges';
+export { usePoints } from './hooks/usePoints';
+export { QuestProgress } from './components/QuestProgress';
+export { RewardCard } from './components/RewardCard';
+export { BadgeIcon } from './components/BadgeIcon';
+export { PointsBalance } from './components/PointsBalance';
+
+// Theme
+export * from './theme/context';
+export * from './theme/tokens';
+
+// New Components
+export * from './components/GradientCard';
+export * from './components/Badge'; // Exports StatBadge
+export * from './components/Button';
+export * from './components/ProgressBar';
+export * from './components/RadialGauge';
+export * from './components/RulesModal';
+
+// App
+export { QwikCardApp } from './QwikCardApp';
+export { useQwikApp } from './hooks/useQwikApp';
+
+export * from './types';

package/src/theme/context.tsx

@@ -0,0 +1,17 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+
+import { QwikTheme, qwikTheme } from './tokens';
+
+const ThemeContext = createContext<QwikTheme>(qwikTheme);
+
+export const ThemeProvider = ({
+  children,
+  theme = qwikTheme,
+}: {
+  children: ReactNode;
+  theme?: QwikTheme;
+}) => {
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => useContext(ThemeContext);