npm - @playbasis-ai/qwikcard-sdk - Versions diffs - 2.3.4 - Mend

@playbasis-ai/qwikcard-sdk 2.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/CHANGELOG.md +142 -0
package/LICENSE +21 -0
package/README.md +267 -0
package/SDK_HANDOVER_GUIDE.md +129 -0
package/dist/PlaybasisProvider.d.ts +19 -0
package/dist/PlaybasisProvider.d.ts.map +1 -0
package/dist/PlaybasisProvider.js +24 -0
package/dist/QwikCardApp.d.ts +9 -0
package/dist/QwikCardApp.d.ts.map +1 -0
package/dist/QwikCardApp.js +210 -0
package/dist/api/client.d.ts +66 -0
package/dist/api/client.d.ts.map +1 -0
package/dist/api/client.js +196 -0
package/dist/components/Badge.d.ts +8 -0
package/dist/components/Badge.d.ts.map +1 -0
package/dist/components/Badge.js +34 -0
package/dist/components/BadgeIcon.d.ts +10 -0
package/dist/components/BadgeIcon.d.ts.map +1 -0
package/dist/components/BadgeIcon.js +51 -0
package/dist/components/Button.d.ts +10 -0
package/dist/components/Button.d.ts.map +1 -0
package/dist/components/Button.js +40 -0
package/dist/components/GradientCard.d.ts +9 -0
package/dist/components/GradientCard.d.ts.map +1 -0
package/dist/components/GradientCard.js +28 -0
package/dist/components/PointsBalance.d.ts +8 -0
package/dist/components/PointsBalance.d.ts.map +1 -0
package/dist/components/PointsBalance.js +85 -0
package/dist/components/ProgressBar.d.ts +8 -0
package/dist/components/ProgressBar.d.ts.map +1 -0
package/dist/components/ProgressBar.js +41 -0
package/dist/components/QuestProgress.d.ts +10 -0
package/dist/components/QuestProgress.d.ts.map +1 -0
package/dist/components/QuestProgress.js +94 -0
package/dist/components/RadialGauge.d.ts +8 -0
package/dist/components/RadialGauge.d.ts.map +1 -0
package/dist/components/RadialGauge.js +53 -0
package/dist/components/RewardCard.d.ts +10 -0
package/dist/components/RewardCard.d.ts.map +1 -0
package/dist/components/RewardCard.js +64 -0
package/dist/components/RulesModal.d.ts +7 -0
package/dist/components/RulesModal.d.ts.map +1 -0
package/dist/components/RulesModal.js +106 -0
package/dist/hooks/useBadges.d.ts +12 -0
package/dist/hooks/useBadges.d.ts.map +1 -0
package/dist/hooks/useBadges.js +42 -0
package/dist/hooks/usePoints.d.ts +13 -0
package/dist/hooks/usePoints.d.ts.map +1 -0
package/dist/hooks/usePoints.js +70 -0
package/dist/hooks/useQuests.d.ts +12 -0
package/dist/hooks/useQuests.d.ts.map +1 -0
package/dist/hooks/useQuests.js +41 -0
package/dist/hooks/useQwikApp.d.ts +16 -0
package/dist/hooks/useQwikApp.d.ts.map +1 -0
package/dist/hooks/useQwikApp.js +42 -0
package/dist/hooks/useRewards.d.ts +12 -0
package/dist/hooks/useRewards.d.ts.map +1 -0
package/dist/hooks/useRewards.js +56 -0
package/dist/index.d.ts +27 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +29 -0
package/dist/theme/context.d.ts +8 -0
package/dist/theme/context.d.ts.map +1 -0
package/dist/theme/context.js +8 -0
package/dist/theme/tokens.d.ts +35 -0
package/dist/theme/tokens.d.ts.map +1 -0
package/dist/theme/tokens.js +33 -0
package/dist/types/index.d.ts +119 -0
package/dist/types/index.d.ts.map +1 -0
package/dist/types/index.js +4 -0
package/dist/web/widgetAssets.d.ts +4 -0
package/dist/web/widgetAssets.d.ts.map +1 -0
package/dist/web/widgetAssets.js +5 -0
package/dist/web/widgetHtml.d.ts +2 -0
package/dist/web/widgetHtml.d.ts.map +1 -0
package/dist/web/widgetHtml.js +299 -0
package/dist/web/widgetTypes.d.ts +128 -0
package/dist/web/widgetTypes.d.ts.map +1 -0
package/dist/web/widgetTypes.js +1 -0
package/package.json +86 -0
package/src/PlaybasisProvider.tsx +72 -0
package/src/QwikCardApp.tsx +302 -0
package/src/api/client.ts +307 -0
package/src/components/Badge.tsx +51 -0
package/src/components/BadgeIcon.tsx +97 -0
package/src/components/Button.tsx +70 -0
package/src/components/GradientCard.tsx +49 -0
package/src/components/PointsBalance.tsx +122 -0
package/src/components/ProgressBar.tsx +65 -0
package/src/components/QuestProgress.tsx +153 -0
package/src/components/RadialGauge.tsx +101 -0
package/src/components/RewardCard.tsx +123 -0
package/src/components/RulesModal.tsx +171 -0
package/src/hooks/useBadges.ts +59 -0
package/src/hooks/usePoints.ts +91 -0
package/src/hooks/useQuests.ts +60 -0
package/src/hooks/useQwikApp.ts +49 -0
package/src/hooks/useRewards.ts +74 -0
package/src/index.ts +34 -0
package/src/theme/context.tsx +17 -0
package/src/theme/tokens.ts +68 -0
package/src/types/index.ts +176 -0
package/src/web/widgetAssets.d.ts +3 -0
package/src/web/widgetAssets.ts +6 -0
package/src/web/widgetHtml.ts +302 -0
package/src/web/widgetTypes.ts +146 -0

package/src/web/widgetHtml.ts ADDED Viewed

@@ -0,0 +1,302 @@
+import { WIDGET_CSS, WIDGET_UMD_JS, WIDGET_SDK_VERSION } from './widgetAssets';
+const escapeScript = (value: string) => value.replace(/<\/script/gi, '<\\/script');
+export const getWidgetHtml = () => {
+  const umd = escapeScript(WIDGET_UMD_JS);
+  const css = WIDGET_CSS;
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <title>Playbasis Widget</title>
+    <style>
+      /* Base reset and responsive constraints */
+      *, *::before, *::after {
+        box-sizing: border-box;
+      }
+      html, body {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        background: white;
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        font-size: 14px;
+      }
+      /* Widget root container - CRITICAL for init() */
+      #pb-widget-root {
+        width: 100%;
+        min-height: 100vh;
+        max-width: 100vw;
+        overflow-x: hidden;
+        position: relative;
+      }
+      /* Playbasis widget container (created by init()) */
+      #playbasis-widget-container {
+        width: 100% !important;
+        max-width: 100vw !important;
+        height: auto !important;
+      }
+      /* Force responsive sizing on shadow DOM and children */
+      #playbasis-widget-container > * {
+        width: 100% !important;
+        max-width: 100vw !important;
+      }
+      /* Constrain SVG elements */
+      svg {
+        max-width: 100% !important;
+        height: auto !important;
+      }
+      /* Aggressive constraints on progress/orb elements */
+      [class*="progress"],
+      [class*="Progress"],
+      [class*="orb"],
+      [class*="Orb"],
+      [class*="radial"],
+      [class*="Radial"],
+      [class*="circular"],
+      [class*="Circular"] {
+        max-width: min(200px, 50vw) !important;
+        max-height: min(200px, 50vw) !important;
+        width: auto !important;
+        height: auto !important;
+      }
+      /* Dashboard and layout containers */
+      [class*="dashboard"],
+      [class*="Dashboard"],
+      [class*="container"],
+      [class*="Container"] {
+        width: 100% !important;
+        max-width: 100vw !important;
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+      }
+      /* Responsive text scaling */
+      @media (max-width: 375px) {
+        html { font-size: 12px; }
+        [class*="text-"] { font-size: 0.875em !important; }
+      }
+      @media (min-width: 376px) and (max-width: 430px) {
+        html { font-size: 14px; }
+      }
+      @media (min-width: 431px) {
+        html { font-size: 16px; }
+      }
+      /* Mobile-specific overrides */
+      @media (max-width: 430px) {
+        [class*="w-"] {
+          max-width: 100vw !important;
+        }
+        [class*="h-64"],
+        [class*="h-72"],
+        [class*="h-80"],
+        [class*="h-96"] {
+          height: auto !important;
+          max-height: 50vh !important;
+        }
+      }
+    </style>
+    <style>${css}</style>
+  </head>
+  <body>
+    <!-- ERROR DISPLAY -->
+    <div id="error-display" style="display:none; padding:20px; font-family:sans-serif; color:#ef4444; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:90%; z-index:10000;">
+      <h3 style="margin-bottom:10px; font-size:16px;">Widget Error</h3>
+      <div id="error-message" style="font-size:11px; opacity:0.8; font-family:monospace; white-space:pre-wrap; word-break:break-word;"></div>
+    </div>
+    <!-- WIDGET MOUNT POINT (required by PlaybasisWidget.init) -->
+    <div id="pb-widget-root"></div>
+    <!-- POLYFILLS -->
+    <script>
+      // Fix 1: process.env.NODE_ENV polyfill
+      if (typeof window.process === 'undefined') {
+        window.process = { env: { NODE_ENV: 'production' } };
+      }
+      // Fix 2: module/exports polyfill for UMD compatibility
+      var __pbModuleExports = {};
+      if (typeof window.module === 'undefined') {
+        window.module = { exports: __pbModuleExports };
+      }
+      if (typeof window.exports === 'undefined') {
+        window.exports = __pbModuleExports;
+      }
+    </script>
+    <!-- WIDGET UMD BUNDLE -->
+    <script>
+      // Embedded @playbasis/widget-sdk UMD build (v${WIDGET_SDK_VERSION})
+      try {
+        ${umd}
+        // Fix 2 (cont): Re-attach to window if UMD exported to module.exports
+        if (!window.PlaybasisWidget && window.module && window.module.exports) {
+          if (window.module.exports.PlaybasisWidget) {
+            window.PlaybasisWidget = window.module.exports;
+          } else if (typeof window.module.exports === 'object' && window.module.exports.init) {
+            // Direct export case
+            window.PlaybasisWidget = window.module.exports;
+          }
+        }
+      } catch (e) {
+        console.error('Failed to load widget bundle:', e);
+        if (typeof showError === 'function') {
+          showError('Bundle Error: ' + e.message);
+        }
+      }
+    </script>
+    <!-- BOOTSTRAP BRIDGE -->
+    <script>
+      (function () {
+        function safeParse(text) {
+          try { return JSON.parse(text); } catch { return null; }
+        }
+        function postToNative(payload) {
+          if (!window.ReactNativeWebView && !window.ReactNativeWebView.postMessage) return;
+          window.ReactNativeWebView.postMessage(JSON.stringify(payload));
+        }
+        window.showError = function(msg) {
+          var el = document.getElementById('error-display');
+          var txt = document.getElementById('error-message');
+          if (el && txt) {
+            el.style.display = 'block';
+            txt.textContent = msg;
+          }
+          postToNative({ type: 'ERROR', error: msg });
+        };
+        window.onerror = function(msg, url, line, col, error) {
+          var errorStr = msg;
+          if (error && error.message) errorStr = error.message;
+          window.showError(errorStr);
+          return false;
+        };
+        var initConfig = null;
+        var bootstrapData = null;
+        var mounted = false;
+        // Native -> Web message handler
+        window.__PB_HANDLE_NATIVE_MESSAGE__ = function (payload) {
+          try {
+            if (!payload) return;
+            if (payload.type === 'RESPONSE') {
+               if (!payload.ok) {
+                 console.error('[PlaybasisWidget] Native bootstrap error:', payload.error);
+                 window.showError('Native Bootstrap Failed: ' + (payload.error || 'Unknown'));
+                 return;
+               }
+               bootstrapData = payload.data || null;
+               tryMount();
+            }
+          } catch (e) {
+            window.showError('Message Handle Error: ' + e.message);
+          }
+        };
+        function tryMount() {
+          if (mounted || !initConfig || !bootstrapData) return;
+          // Verify container exists
+          var container = document.getElementById('pb-widget-root');
+          if (!container) {
+            window.showError('Container #pb-widget-root not found in DOM');
+            return;
+          }
+          // Locate widget module
+          var PlaybasisWidget = window.PlaybasisWidget;
+          if (!PlaybasisWidget) {
+            window.showError('PlaybasisWidget not found on window');
+            return;
+          }
+          // Find init function (could be PlaybasisWidget.init or PlaybasisWidget.PlaybasisWidget.init)
+          var initFn = null;
+          var targetObject = null;
+          if (typeof PlaybasisWidget.init === 'function') {
+            initFn = PlaybasisWidget.init;
+            targetObject = PlaybasisWidget;
+          } else if (PlaybasisWidget.PlaybasisWidget && typeof PlaybasisWidget.PlaybasisWidget.init === 'function') {
+            initFn = PlaybasisWidget.PlaybasisWidget.init;
+            targetObject = PlaybasisWidget.PlaybasisWidget;
+          }
+          if (!initFn) {
+            window.showError('PlaybasisWidget.init function not found');
+            return;
+          }
+          try {
+            mounted = true;
+            var tenantId = initConfig.config.tenantId;
+            var userId = initConfig.config.playerId;
+            // Call init with proper this context
+            initFn.call(targetObject, {
+              container: container,
+              embedded: true,   // CRITICAL: Disable Shadow DOM so CSS applies correctly
+              apiKey: 'embedded',
+              tenantId: tenantId,
+              userId: userId,
+              themeName: 'qwik',
+              bootstrap: {
+                tenantId: tenantId,
+                ...bootstrapData,
+              },
+            });
+          } catch (e) {
+            window.showError('Mount Error: ' + e.message);
+            console.error('[PlaybasisWidget] Mount error details:', e);
+          }
+        }
+        function initIfReady() {
+          var init = window.__PB_INIT__;
+          if (!init || init.__applied) return;
+          init.__applied = true;
+          initConfig = init;
+          // Request bootstrap data from native
+          postToNative({
+            type: 'REQUEST',
+            requestId: String(Date.now()) + '-' + Math.random().toString(16).slice(2),
+            resource: 'bootstrap'
+          });
+        }
+        // Poll for injectedJavaScript
+        var start = Date.now();
+        var timer = setInterval(function () {
+          initIfReady();
+          if (Date.now() - start > 8000) {
+            clearInterval(timer);
+            if (!mounted && !bootstrapData) {
+               console.warn('[PlaybasisWidget] Bootstrap timed out');
+            }
+          }
+        }, 50);
+        // Listen for messages from native
+        function handleIncoming(event) {
+          var payload = typeof event.data === 'string' ? safeParse(event.data) : event.data;
+          if (payload) window.__PB_HANDLE_NATIVE_MESSAGE__(payload);
+        }
+        window.addEventListener('message', handleIncoming);
+        document.addEventListener('message', handleIncoming);
+      })();
+    </script>
+  </body>
+</html>`;
+};

package/src/web/widgetTypes.ts ADDED Viewed

@@ -0,0 +1,146 @@
+export type WidgetBridgeResource = 'bootstrap';
+export type WidgetBridgeMessage =
+  | {
+      type: 'INIT';
+      config: {
+        tenantId: string;
+        playerId: string;
+        baseUrl?: string;
+      };
+      platform?: string;
+    }
+  | {
+      type: 'REQUEST';
+      requestId: string;
+      resource: WidgetBridgeResource;
+    }
+  | {
+      type: 'RESPONSE';
+      requestId: string;
+      ok: true;
+      data: WidgetBootstrapData;
+    }
+  | {
+      type: 'RESPONSE';
+      requestId: string;
+      ok: false;
+      error: string;
+    }
+  | {
+      type: 'ERROR';
+      error: string;
+    }
+  | {
+      type: 'OPEN_GAME';
+      url: string;
+      title?: string;
+    };
+export interface WidgetUserState {
+  userId: string;
+  level: number;
+  exp: number;
+  compositeScore: number;
+  positiveChangePct: number;
+}
+export interface WidgetTransaction {
+  id: string;
+  type: 'earn' | 'spend' | 'bonus';
+  amount: number;
+  description: string;
+  timestamp: number;
+}
+export interface WidgetCollectionItem {
+  id: string;
+  category: string;
+  rarity: string;
+  unlocked: boolean;
+}
+export interface WidgetNotification {
+  id: string;
+  type: 'badge' | 'level_up' | 'goal' | 'reward' | 'leaderboard';
+  message: string;
+  timestamp?: number;
+  read?: boolean;
+}
+export type WidgetGoalType = 'financial' | 'habit' | 'performance';
+export type WidgetGoalStatus = 'on_track' | 'at_risk' | 'completed';
+export interface WidgetGoal {
+  goalId: string;
+  type: WidgetGoalType;
+  target: number;
+  current: number;
+  progressPct: number;
+  startDate: string;
+  endDate: string;
+  status: WidgetGoalStatus;
+  rewards?: { xp?: number; badges?: string[] };
+}
+export interface WidgetActivityDay {
+  date: string;
+  count: number;
+}
+export interface WidgetLeaderboardEntry {
+  scope: 'global' | 'team' | 'season';
+  rank: number;
+  delta: number;
+}
+export type WidgetBadgeRarity = 'common' | 'rare' | 'epic' | 'legendary';
+export interface WidgetBadge {
+  id: string;
+  name: string;
+  rarity: WidgetBadgeRarity;
+  unlocked: boolean;
+  imageUrl?: string;
+}
+export interface WidgetLeaderboardEntryDisplay {
+  userId?: string;
+  rank: number;
+  displayName: string;
+  score: number;
+  delta?: number;
+  isCurrentUser?: boolean;
+  avatarUrl?: string;
+}
+export interface WidgetWallet {
+  currency: string;
+  balance: number;
+  earnedDelta: number;
+  // Optional extension for QwikCard-specific display.
+  qwikCoins?: number;
+}
+export interface WidgetReward {
+  id: string;
+  name: string;
+  description: string;
+  cost: number;
+  imageUrl?: string;
+}
+export interface WidgetBootstrapData {
+  tenantId: string;
+  user: WidgetUserState;
+  wallet: WidgetWallet | null;
+  goals: WidgetGoal[];
+  activities: WidgetActivityDay[];
+  transactions?: WidgetTransaction[];
+  collections?: WidgetCollectionItem[];
+  badges: WidgetBadge[];
+  rewards?: WidgetReward[];
+  leaderboardEntries: WidgetLeaderboardEntryDisplay[];
+  leaderboard?: WidgetLeaderboardEntry | null;
+  notifications?: WidgetNotification[];
+}