@cshah18/sdk 4.1.0 → 4.2.0

package/dist/cobuy-sdk.esm.js

@@ -1852,12 +1852,9 @@ class LobbyModal {
         // Top section
         const topSection = this.createTopSection();
         mainContent.appendChild(topSection);
-        // Activity section (hidden when offline redemption is present to keep layout compact)
-        const hasOfflineRedemption = this.data.offlineRedemption && isValidOfflineRedemption(this.data.offlineRedemption);
-        if (!hasOfflineRedemption) {
-            const activitySection = this.createActivitySection();
-            mainContent.appendChild(activitySection);
-        }
+        // Activity section
+        const activitySection = this.createActivitySection();
+        mainContent.appendChild(activitySection);
         mainWrapper.appendChild(mainContent);
         modal.appendChild(background);
         modal.appendChild(mainWrapper);
@@ -1974,11 +1971,10 @@ class LobbyModal {
         connectedSection.appendChild(subtitle);
         // Check if group is fulfilled and has offline redemption
         const isComplete = !this.computeIsLocked(this.data);
-        const hasOfflineRedemption = isComplete &&
+        if (isComplete &&
             this.data.offlineRedemption &&
-            isValidOfflineRedemption(this.data.offlineRedemption);
-        if (hasOfflineRedemption) {
-            // Show offline redemption view with integrated actions
+            isValidOfflineRedemption(this.data.offlineRedemption)) {
+            // Show offline redemption view instead of link/share
             const offlineSection = this.createOfflineRedemptionSection(this.data.offlineRedemption);
             connectedSection.appendChild(offlineSection);
         }
@@ -2034,9 +2030,6 @@ class LobbyModal {
         const section = document.createElement("div");
         section.className = "offline-redemption-section";
         section.id = "lobbyOfflineRedemptionSection";
-        // Top row: QR + Code side by side
-        const topRow = document.createElement("div");
-        topRow.className = "offline-top-row";
         // QR Code container
         const qrContainer = document.createElement("div");
         qrContainer.className = "offline-qr-container";
@@ -2066,40 +2059,29 @@ class LobbyModal {
         copyCodeBtn.className = "offline-copy-code-btn";
         copyCodeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`;
         copyCodeBtn.addEventListener("click", () => this.copyOfflineRedemptionCode(offlineRedemption.redemption_code, copyCodeBtn));
-        const codeRow = document.createElement("div");
-        codeRow.className = "offline-code-row";
-        codeRow.appendChild(codeValue);
-        codeRow.appendChild(copyCodeBtn);
         codeBox.appendChild(codeLabel);
-        codeBox.appendChild(codeRow);
-        topRow.appendChild(qrContainer);
-        topRow.appendChild(codeBox);
-        // Expiry info - compact single line
+        codeBox.appendChild(codeValue);
+        codeBox.appendChild(copyCodeBtn);
+        // Expiry info
         const expiryInfo = document.createElement("div");
         expiryInfo.className = "offline-expiry-info";
-        expiryInfo.innerHTML = `<span class="offline-expiry-label">Valid Until:</span> <span class="offline-expiry-value">${formatExpiryDate(offlineRedemption.offline_expires_at)}</span>`;
-        // Action buttons row
-        const actionsRow = document.createElement("div");
-        actionsRow.className = "offline-actions-row";
+        const expiryLabel = document.createElement("p");
+        expiryLabel.className = "offline-expiry-label";
+        expiryLabel.textContent = "Valid Until";
+        const expiryValue = document.createElement("p");
+        expiryValue.className = "offline-expiry-value";
+        expiryValue.textContent = formatExpiryDate(offlineRedemption.offline_expires_at);
+        expiryInfo.appendChild(expiryLabel);
+        expiryInfo.appendChild(expiryValue);
         // Download QR button
         const downloadQRBtn = document.createElement("button");
         downloadQRBtn.className = "offline-download-qr-btn";
         downloadQRBtn.textContent = "Download QR";
         downloadQRBtn.addEventListener("click", () => this.downloadOfflineQR(offlineRedemption, downloadQRBtn));
-        // Online checkout button
-        const onlineCheckoutBtn = document.createElement("button");
-        onlineCheckoutBtn.className = "offline-online-checkout-btn";
-        onlineCheckoutBtn.textContent = "Checkout Online";
-        onlineCheckoutBtn.addEventListener("click", () => {
-            if (this.data.groupLink) {
-                window.open(this.data.groupLink, "_blank");
-            }
-        });
-        actionsRow.appendChild(downloadQRBtn);
-        actionsRow.appendChild(onlineCheckoutBtn);
-        section.appendChild(topRow);
+        section.appendChild(qrContainer);
+        section.appendChild(codeBox);
         section.appendChild(expiryInfo);
-        section.appendChild(actionsRow);
+        section.appendChild(downloadQRBtn);
         // Inject styles for offline redemption section
         this.injectOfflineRedemptionStyles();
         return section;
@@ -2144,184 +2126,117 @@ class LobbyModal {
       .offline-redemption-section {
         display: flex;
         flex-direction: column;
-        gap: 14px;
-        padding: 16px;
-        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
-        border: 1.5px solid #e5e7eb;
-        border-radius: 12px;
-        margin-top: 12px;
-      }
-
-      .offline-top-row {
-        display: flex;
-        gap: 14px;
-        align-items: stretch;
+        gap: 16px;
+        padding: 16px 0;
       }
 
       .offline-qr-container {
-        flex: 0 0 120px;
         display: flex;
         justify-content: center;
-        align-items: center;
-        background: white;
-        padding: 10px;
+        background: #f9fafb;
+        padding: 12px;
         border-radius: 8px;
-        border: 1.5px solid #e5e7eb;
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+        min-height: 160px;
+        align-items: center;
       }
 
       .offline-qr-image {
-        max-width: 100px;
-        max-height: 100px;
+        max-width: 140px;
+        max-height: 140px;
         width: auto;
         height: auto;
-        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
       }
 
       .offline-qr-fallback {
         color: #9ca3af;
-        font-size: 11px;
+        font-size: 12px;
         text-align: center;
       }
 
       .offline-code-box {
-        flex: 1;
         display: flex;
         flex-direction: column;
-        gap: 8px;
-        justify-content: center;
-      }
-
-      .offline-code-row {
-        position: relative;
-        display: flex;
-        align-items: center;
+        gap: 6px;
       }
 
       .offline-code-label {
         margin: 0;
         font-size: 11px;
-        font-weight: 700;
-        color: #1f2937;
+        font-weight: 600;
+        color: #6b7280;
         text-transform: uppercase;
         letter-spacing: 0.5px;
       }
 
       .offline-code-value {
-        font-family: 'Courier New', monospace;
+        font-family: monospace;
         font-size: 14px;
-        font-weight: 700;
+        font-weight: 600;
         color: #111827;
-        padding: 10px 40px 10px 12px;
-        background: white;
-        border: 1.5px solid #d1d5db;
-        border-radius: 8px;
+        padding: 10px 12px;
+        background: #f9fafb;
+        border: 1px solid #e5e7eb;
+        border-radius: 6px;
         text-align: center;
-        letter-spacing: 1.5px;
+        letter-spacing: 1px;
         position: relative;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-        transition: all 0.2s;
-      }
-
-      .offline-code-row .offline-code-value {
-        width: 100%;
-      }
-
-      .offline-code-value:hover {
-        border-color: #3b82f6;
-        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1);
       }
 
       .offline-copy-code-btn {
         position: absolute;
-        right: 6px;
-        top: 50%;
-        transform: translateY(-50%);
+        right: 8px;
         background: none;
         border: none;
-        padding: 5px 8px;
+        padding: 4px 8px;
         cursor: pointer;
         color: #6b7280;
         display: flex;
         align-items: center;
-        justify-content: center;
-        transition: all 0.2s;
-        border-radius: 4px;
+        transition: color 0.2s;
       }
 
       .offline-copy-code-btn:hover {
-        color: #3b82f6;
-        background: #eff6ff;
+        color: #111827;
       }
 
       .offline-expiry-info {
-        font-size: 11px;
-        color: #6b7280;
-        text-align: center;
-        padding: 6px 0;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
       }
 
       .offline-expiry-label {
-        font-weight: 700;
+        margin: 0;
+        font-size: 11px;
+        font-weight: 600;
+        color: #6b7280;
         text-transform: uppercase;
         letter-spacing: 0.5px;
-        color: #1f2937;
       }
 
       .offline-expiry-value {
-        font-weight: 600;
+        margin: 0;
+        font-size: 13px;
         color: #374151;
       }
 
-      .offline-actions-row {
-        display: flex;
-        gap: 10px;
-      }
-
-      .offline-download-qr-btn,
-      .offline-online-checkout-btn {
-        flex: 1;
-        padding: 11px 16px;
+      .offline-download-qr-btn {
+        padding: 10px 16px;
+        background: #3b82f6;
+        color: white;
         border: none;
-        border-radius: 8px;
+        border-radius: 6px;
         font-size: 13px;
-        font-weight: 700;
+        font-weight: 600;
         cursor: pointer;
-        transition: all 0.2s;
-        text-transform: uppercase;
-        letter-spacing: 0.4px;
-      }
-
-      .offline-download-qr-btn {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-        color: white;
-        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
+        transition: background 0.2s;
       }
 
       .offline-download-qr-btn:hover:not(:disabled) {
-        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
-        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
-        transform: translateY(-1px);
-      }
-
-      .offline-online-checkout-btn {
-        background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
-        color: white;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-      }
-
-      .offline-online-checkout-btn:hover {
-        background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-        transform: translateY(-1px);
-      }
-
-      .offline-download-qr-btn:active:not(:disabled),
-      .offline-online-checkout-btn:active {
-        transform: translateY(0);
+        background: #2563eb;
       }
 
       .offline-download-qr-btn:disabled {
@@ -5622,12 +5537,28 @@ class ApiClient {
      * @param checkoutRef - The checkout reference ID from the prepare step
      * @returns Promise with success status
      */
-    async confirmCheckout(groupId, checkoutRef) {
+    async confirmCheckout(groupId, checkoutRef, data) {
         const endpoint = buildApiUrl("", API_ENDPOINTS.GROUP_CHECKOUT_CONFIRM, { groupId });
         this.logger.info(`Confirming checkout for group: ${groupId}`);
-        const response = await this.post(endpoint, {
+        const payload = {
             checkout_ref: checkoutRef,
-        });
+        };
+        // Add optional fields if provided
+        if (data) {
+            if (data.order_id)
+                payload.order_id = data.order_id;
+            if (data.order_total !== undefined)
+                payload.order_total = data.order_total;
+            if (data.discount_applied !== undefined)
+                payload.discount_applied = data.discount_applied;
+            if (data.currency)
+                payload.currency = data.currency;
+            if (data.payment_method)
+                payload.payment_method = data.payment_method;
+            if (data.metadata)
+                payload.metadata = data.metadata;
+        }
+        const response = await this.post(endpoint, payload);
         if (response.success) {
             this.logger.info("Checkout confirmed successfully");
             return {
@@ -10531,14 +10462,31 @@ class CoBuy {
      *
      * @param groupId - The group ID to confirm checkout for
      * @param checkoutRef - The checkout reference ID from the prepare step
+    /**
+     * Confirm checkout for a group
+     * Should be called after validateCheckout to complete the checkout process.
+     *
+     * @param groupId The group ID to confirm checkout for
+     * @param checkoutRef The checkout reference from the prepare step
+     * @param data Optional order details (order_id, order_total, discount_applied, currency, payment_method, metadata)
      *
      * @example
      * ```typescript
      * // Confirm checkout for a group
      * await CoBuy.confirmCheckout('fae238ae-7468-47e9-9eec-b6d52fe3b012', 'chk_9a6d8750-ed60-4795-a207-2abe955e8509');
+     *
+     * // Confirm checkout with order details
+     * await CoBuy.confirmCheckout('fae238ae-7468-47e9-9eec-b6d52fe3b012', 'chk_9a6d8750-ed60-4795-a207-2abe955e8509', {
+     *   order_id: 'ORDER-1001',
+     *   order_total: 100.00,
+     *   discount_applied: 20.00,
+     *   currency: 'USD',
+     *   payment_method: 'card',
+     *   metadata: { coupon_code: 'WELCOME20', customer_id: 'cust_123' }
+     * });
      * ```
      */
-    async confirmCheckout(groupId, checkoutRef) {
+    async confirmCheckout(groupId, checkoutRef, data) {
         if (!this.configManager.isInitialized()) {
             this.logger.warn("SDK not initialized, cannot confirm checkout");
             return;
@@ -10548,7 +10496,7 @@ class CoBuy {
             return;
         }
         try {
-            const response = await this.apiClient.confirmCheckout(groupId, checkoutRef);
+            const response = await this.apiClient.confirmCheckout(groupId, checkoutRef, data);
             if (response.success) {
                 this.logger.info(`Checkout confirmed successfully for group: ${groupId}`);
                 // Directly refresh widgets. If we can infer productId, refresh only matching widgets.