@pixels-online/pixels-client-js-sdk 2.7.0 → 2.8.0

package/README.md

@@ -74,6 +74,98 @@ client.on('playerUpdated', (player) => {
 });
 ```
 
+### 3. Render Offer UI/UX
+
+Each offer object returned by the SDK includes helper methods for rendering offer state in your UI.
+
+#### Checking if an Offer is Claimable
+
+Use `offer.canClaim()` to determine whether the player has met all requirements and can claim the offer:
+
+```typescript
+const claimable = offer.canClaim?.();
+renderClaimButton(offer, { disabled: !claimable });
+```
+
+### Displaying Offer Progress
+
+Use `offer.getProgressPercent()` to get the player's overall completion percentage (0–100):
+
+```typescript
+const progress = offer.getProgressPercent?.() ?? 0;
+
+// Example: render a progress bar
+renderProgressBar(offer, { percent: progress });
+```
+
+### Rendering Completion Conditions
+
+Use `offer.getCompletionConditions()` to get a list of individual conditions, each with `isMet` (boolean) and `text` (human-readable description):
+
+```typescript
+const conditions = offer.getCompletionConditions?.() ?? [];
+
+for (const condition of conditions) {
+  renderCondition({
+    text: condition.text,
+    completed: condition.isMet,
+  });
+}
+
+// Example React rendering
+function OfferConditions({ offer }) {
+  const conditions = offer.getCompletionConditions?.() ?? [];
+  return (
+    <ul>
+      {conditions.map((c, i) => (
+        <li key={i} style={{ color: c.isMet ? 'green' : 'gray' }}>
+          {c.isMet ? '✓' : '○'} {c.text}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### Rendering Team Offer Sibling Progress
+
+For team offers (offers where all team members must complete for anyone to claim), use `offer.getSiblingProgress()` to display each sibling's progress:
+
+```typescript
+const isTeamOffer = offer.labels?.includes('team_offer');
+
+if (isTeamOffer) {
+  const siblingProgress = offer.getSiblingProgress?.() ?? [];
+
+  for (const sibling of siblingProgress) {
+    renderSiblingRow({
+      playerId: sibling.playerId,
+      percentCompleted: sibling.percentCompleted,
+      isComplete: sibling.isComplete,
+    });
+  }
+}
+
+// Example React rendering
+function TeamProgress({ offer }) {
+  const siblings = offer.getSiblingProgress?.() ?? [];
+  if (!siblings.length) return null;
+
+  return (
+    <div>
+      <h4>Team Progress</h4>
+      {siblings.map((s) => (
+        <div key={s.playerId}>
+          <span>{s.playerId}</span>
+          <span>{s.percentCompleted}%</span>
+          <span>{s.isComplete ? '✓ Complete' : 'In Progress'}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
 ### 3. Claim Offers
 
 ```typescript
@@ -291,40 +383,12 @@ const assetHelper = new AssetHelper(assetResolver, fallbackImage);
 const rewardAsset = assetHelper.resolveRewardAsset(reward, assetId);
 ```
 
-## 🧪 Testing
-
-The SDK includes comprehensive test coverage:
-
-```bash
-# Run all tests
-npm test
-
-# Run unit tests
-npm run test:unit
-
-# Run integration tests
-npm run test:integration
-
-# Run e2e tests
-npm run test:e2e
-
-# Run with coverage
-npm run test:coverage
-
-# Watch mode
-npm run test:watch
-```
-
 ## 🌍 Environments
 
 The SDK supports multiple environments:
 
 - **`test`** - Sandbox environment for development
 - **`live`** - Production environment
-- **`staging`** - Staging environment
-- **`preview`** - Preview environment
-- **`dev`** - Development environment
-- **Custom URL** - Provide your own endpoint
 
 ## � Migration Guide
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixels-online/pixels-client-js-sdk",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "Pixels Client JS SDK",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",