@cshah18/sdk 3.0.4 → 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");
@@ -2633,7 +2730,6 @@ class WidgetRoot {
     }
     /** Fetch latest group data and re-render containers */
     async refreshGroupDataFromRealtime() {
-        console.log("request group data realtime callledddd");
         // Debounce rapid refreshes to prevent loops and reduce API load
         const now = Date.now();
         if (now - this.lastGroupDataRefreshTime < this.GROUP_REFRESH_DEBOUNCE) {
@@ -2658,6 +2754,9 @@ class WidgetRoot {
                     this.groupFulfilled = true;
                 }
             }
+            else {
+                this.groupFulfilled = false;
+            }
             this.refreshRenderedContainers();
         }
         catch (error) {
@@ -3048,7 +3147,6 @@ class WidgetRoot {
             let groupData = null;
             if (this.apiClient) {
                 rewardData = await this.fetchRewardWithRetry(options.productId);
-                console.log("from renderrrr");
                 groupData = await this.fetchPrimaryGroup(options.productId);
                 this.currentGroupData = groupData;
                 this.currentGroupId = (groupData === null || groupData === void 0 ? void 0 : groupData.id) || null;
@@ -3305,7 +3403,6 @@ class WidgetRoot {
      */
     async fetchPrimaryGroup(productId) {
         var _a;
-        console.log("fetch primary group called");
         if (!this.apiClient) {
             return null;
         }
@@ -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");
@@ -8951,9 +9052,7 @@ class CoBuy {
                 const ref = window.localStorage.getItem(key);
                 if (ref) {
                     this.logger.debug(`[SDK] Retrieved checkout reference via prefix: ${key}`);
-                    const parsedGroupId = key.startsWith(`${basePrefix}_`)
-                        ? key.substring(basePrefix.length + 1)
-                        : null;
+                    const parsedGroupId = key.startsWith(`${basePrefix}_`) ? key.substring(basePrefix.length + 1) : null;
                     return { key, checkoutRef: ref, groupId: parsedGroupId };
                 }
             }
@@ -9374,7 +9473,6 @@ class CoBuy {
                     const pid = typeof w.getProductId === "function" ? w.getProductId() : null;
                     if (!productId || pid === productId) {
                         if (typeof w.requestRefresh === "function") {
-                            console.log("calling refresshh now");
                             refreshPromises.push(w.requestRefresh());
                         }
                     }