@cshah18/sdk 3.0.4 → 4.0.0

package/dist/cobuy-sdk.umd.js

@@ -307,11 +307,44 @@ var CoBuySDK = (function (exports) {
             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;
@@ -338,6 +371,65 @@ var CoBuySDK = (function (exports) {
         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");
@@ -383,6 +475,8 @@ var CoBuySDK = (function (exports) {
             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");
             });
@@ -480,6 +574,8 @@ var CoBuySDK = (function (exports) {
             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 = [];
@@ -723,6 +819,7 @@ var CoBuySDK = (function (exports) {
         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");
@@ -2636,7 +2733,6 @@ var CoBuySDK = (function (exports) {
         }
         /** 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) {
@@ -2661,6 +2757,9 @@ var CoBuySDK = (function (exports) {
                         this.groupFulfilled = true;
                     }
                 }
+                else {
+                    this.groupFulfilled = false;
+                }
                 this.refreshRenderedContainers();
             }
             catch (error) {
@@ -3051,7 +3150,6 @@ var CoBuySDK = (function (exports) {
                 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;
@@ -3308,7 +3406,6 @@ var CoBuySDK = (function (exports) {
          */
         async fetchPrimaryGroup(productId) {
             var _a;
-            console.log("fetch primary group called");
             if (!this.apiClient) {
                 return null;
             }
@@ -3425,6 +3522,7 @@ var CoBuySDK = (function (exports) {
         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";
@@ -3464,28 +3562,31 @@ var CoBuySDK = (function (exports) {
             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");
@@ -8954,9 +9055,7 @@ var CoBuySDK = (function (exports) {
                     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 };
                     }
                 }
@@ -9377,7 +9476,6 @@ var CoBuySDK = (function (exports) {
                         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());
                             }
                         }