@cshah18/sdk 3.0.5 → 4.0.0

package/dist/cobuy-sdk.esm.js

@@ -304,11 +304,44 @@ class GroupListModal {
         this.currentSessionId = null;
         this.onGroupJoined = null;
         this.onViewProgress = null;
+        this.socketListenerRegistered = false;
         this.escapeHandler = (event) => {
             if (event.key === "Escape") {
                 this.close();
             }
         };
+        this.handleGroupMemberJoinedEvent = (event) => {
+            this.onGroupMemberJoined(event);
+        };
+        /** Handle group member joined socket event and update groups list */
+        this.onGroupMemberJoined = (event) => {
+            const detail = event.detail || {};
+            const productId = detail.product_id;
+            const groupData = detail.group;
+            // Only process if this is for the current product
+            if (!productId || !this.currentProductId || productId !== this.currentProductId) {
+                return;
+            }
+            if (!groupData) {
+                return;
+            }
+            const groupId = groupData.id;
+            const participantsCount = groupData.participants_count;
+            if (!groupId) {
+                return;
+            }
+            // Find and update the group in the list
+            const groupIndex = this.groups.findIndex((g) => g.groupId === groupId);
+            if (groupIndex !== -1) {
+                // Update the joined count
+                if (typeof participantsCount === "number") {
+                    this.groups[groupIndex].joined = participantsCount;
+                }
+                this.logger.info(`[GroupListModal] Updated group ${groupId} - participants: ${participantsCount}`);
+                // Re-render the specific group card
+                this.updateGroupCard(groupId);
+            }
+        };
         this.logger = new Logger(debug);
         this.groups = groups;
         this.liveCount = liveCount;
@@ -335,6 +368,65 @@ class GroupListModal {
     hasGroup(groupId) {
         return this.groups.some((group) => group.groupId === groupId);
     }
+    /** Subscribe to socket events for real-time group updates */
+    subscribeToSocketEvents() {
+        if (typeof window === "undefined" || this.socketListenerRegistered) {
+            return;
+        }
+        window.addEventListener("group:member:joined", this.handleGroupMemberJoinedEvent);
+        this.socketListenerRegistered = true;
+        this.logger.debug("[GroupListModal] Socket event listeners registered");
+    }
+    /** Unsubscribe from socket events */
+    unsubscribeFromSocketEvents() {
+        if (typeof window === "undefined" || !this.socketListenerRegistered) {
+            return;
+        }
+        window.removeEventListener("group:member:joined", this.handleGroupMemberJoinedEvent);
+        this.socketListenerRegistered = false;
+        this.logger.debug("[GroupListModal] Socket event listeners unregistered");
+    }
+    /** Update the rendered group card with new data */
+    updateGroupCard(groupId) {
+        if (!this.overlayEl) {
+            return;
+        }
+        const groupCard = this.overlayEl.querySelector(`[data-group-id="${groupId}"]`);
+        if (!groupCard) {
+            return;
+        }
+        const group = this.groups.find((g) => g.groupId === groupId);
+        if (!group) {
+            return;
+        }
+        // Update the progress info
+        const remaining = Math.max(group.total - group.joined, 0);
+        const joinedCountEl = groupCard.querySelector(".cobuy-joined-count");
+        const spotsLeftEl = groupCard.querySelector(".cobuy-spots-left");
+        if (joinedCountEl) {
+            joinedCountEl.textContent = `${group.joined} Joined`;
+        }
+        if (spotsLeftEl) {
+            spotsLeftEl.textContent = `${remaining} ${remaining === 1 ? "spot" : "spots"} left`;
+        }
+        // Update the progress bar
+        const progressFill = groupCard.querySelector(".cobuy-gl-progress-fill");
+        if (progressFill) {
+            const pct = Math.max(0, Math.min(100, Math.round((group.joined / group.total) * 100)));
+            progressFill.style.width = `${pct}%`;
+        }
+        // Update member avatars
+        const membersContainer = groupCard.querySelector(".cobuy-group-members");
+        if (membersContainer) {
+            // Clear existing avatars
+            membersContainer.innerHTML = "";
+            // Recreate avatars with updated joined count
+            for (let i = 0; i < group.total; i++) {
+                const avatar = this.createMemberAvatar(i >= group.joined);
+                membersContainer.appendChild(avatar);
+            }
+        }
+    }
     async open(productId, sessionId, joinedGroupId) {
         if (this.overlayEl) {
             this.logger.debug("Group list modal already open");
@@ -380,6 +472,8 @@ class GroupListModal {
         this.overlayEl = overlay;
         document.body.appendChild(overlay);
         document.addEventListener("keydown", this.escapeHandler);
+        // Subscribe to socket events for real-time group updates
+        this.subscribeToSocketEvents();
         requestAnimationFrame(() => {
             overlay.classList.add("cobuy-gl-open");
         });
@@ -477,6 +571,8 @@ class GroupListModal {
         if (!this.overlayEl) {
             return;
         }
+        // Unsubscribe from socket events
+        this.unsubscribeFromSocketEvents();
         // Clear any running countdown intervals to avoid leaks
         this.countdownIntervals.forEach((id) => window.clearInterval(id));
         this.countdownIntervals = [];
@@ -720,6 +816,7 @@ class GroupListModal {
     createGroupCard(group) {
         const card = document.createElement("div");
         card.className = "cobuy-group-card";
+        card.setAttribute("data-group-id", group.groupId);
         const header = document.createElement("div");
         header.className = "cobuy-group-card-header";
         const groupId = document.createElement("div");
@@ -3422,6 +3519,7 @@ class WidgetRoot {
     createWidget(rewardData, container, options) {
         const isFulfilled = this.groupFulfilled;
         const activeReward = this.frozenReward || (rewardData === null || rewardData === void 0 ? void 0 : rewardData.reward) || null;
+        this.logger.info(`activeReward: ${JSON.stringify(activeReward)}`);
         const wrapper = document.createElement("div");
         wrapper.className = "cobuy-widget";
         wrapper.style.display = "grid";
@@ -3461,28 +3559,31 @@ class WidgetRoot {
         rewardLine.style.opacity = "0";
         rewardLine.style.animation =
             "cobuy-fadeIn var(--cobuy-animation-duration, 300ms) var(--cobuy-animation-easing, ease-out) forwards";
-        if (isFulfilled) {
-            const rewardText = this.formatRewardText(activeReward);
-            rewardLine.textContent = rewardText
-                ? `Reward available: ${rewardText}`
-                : "Reward available for this group";
-            rewardLine.setAttribute("aria-label", rewardText ? `Reward locked in: ${rewardText}` : "Reward available for this group");
-            rewardLine.title = rewardLine.textContent;
-        }
-        else if (activeReward) {
-            const rewardText = this.formatRewardText(activeReward);
-            rewardLine.textContent = rewardText
-                ? `Save up to ${rewardText} with CoBuy`
-                : "CoBuy reward available";
-            rewardLine.setAttribute("aria-label", `Eligible for CoBuy reward: ${rewardLine.textContent}`);
-            rewardLine.title = rewardLine.textContent;
-        }
-        else {
-            rewardLine.textContent = "CoBuy offer loading or unavailable";
-            rewardLine.setAttribute("aria-label", "CoBuy offer loading or unavailable");
-            rewardLine.title = "CoBuy offer loading or unavailable";
-            rewardLine.style.color = "#6b7280";
-        }
+        // if (isFulfilled) {
+        //   const rewardText = this.formatRewardText(activeReward);
+        //   rewardLine.textContent = rewardText
+        //     ? `Reward available: ${rewardText}`
+        //     : "Reward available for this group";
+        //   rewardLine.setAttribute(
+        //     "aria-label",
+        //     rewardText ? `Reward locked in: ${rewardText}` : "Reward available for this group",
+        //   );
+        //   rewardLine.title = rewardLine.textContent;
+        // }
+        // else if (activeReward) {
+        //   const rewardText = this.formatRewardText(activeReward);
+        //   rewardLine.textContent = rewardText
+        //     ? `Save up to ${rewardText} with CoBuy`
+        //     : "CoBuy reward available";
+        //   rewardLine.setAttribute("aria-label", `Eligible for CoBuy reward: ${rewardLine.textContent}`);
+        //   rewardLine.title = rewardLine.textContent;
+        // } 
+        // else {
+        //   rewardLine.textContent = "CoBuy offer loading or unavailable";
+        //   rewardLine.setAttribute("aria-label", "CoBuy offer loading or unavailable");
+        //   rewardLine.title = "CoBuy offer loading or unavailable";
+        //   rewardLine.style.color = "#6b7280";
+        // }
         sections.reward = rewardLine;
         // Button - semantic button element with accessibility
         const button = document.createElement("button");