@cshah18/sdk 4.2.0 → 4.4.0

package/dist/cobuy-sdk.esm.js

@@ -1852,9 +1852,12 @@ class LobbyModal {
         // Top section
         const topSection = this.createTopSection();
         mainContent.appendChild(topSection);
-        // Activity section
-        const activitySection = this.createActivitySection();
-        mainContent.appendChild(activitySection);
+        // 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);
+        }
         mainWrapper.appendChild(mainContent);
         modal.appendChild(background);
         modal.appendChild(mainWrapper);
@@ -1971,10 +1974,11 @@ class LobbyModal {
         connectedSection.appendChild(subtitle);
         // Check if group is fulfilled and has offline redemption
         const isComplete = !this.computeIsLocked(this.data);
-        if (isComplete &&
+        const hasOfflineRedemption = isComplete &&
             this.data.offlineRedemption &&
-            isValidOfflineRedemption(this.data.offlineRedemption)) {
-            // Show offline redemption view instead of link/share
+            isValidOfflineRedemption(this.data.offlineRedemption);
+        if (hasOfflineRedemption) {
+            // Show offline redemption view with integrated actions
             const offlineSection = this.createOfflineRedemptionSection(this.data.offlineRedemption);
             connectedSection.appendChild(offlineSection);
         }
@@ -2030,6 +2034,9 @@ 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";
@@ -2059,29 +2066,42 @@ 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(codeValue);
-        codeBox.appendChild(copyCodeBtn);
-        // Expiry info
+        codeBox.appendChild(codeRow);
+        topRow.appendChild(qrContainer);
+        topRow.appendChild(codeBox);
+        // Expiry info - compact single line
         const expiryInfo = document.createElement("div");
         expiryInfo.className = "offline-expiry-info";
-        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);
+        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";
         // 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));
-        section.appendChild(qrContainer);
-        section.appendChild(codeBox);
+        // Online checkout button
+        const onlineCheckoutBtn = document.createElement("button");
+        onlineCheckoutBtn.className = "offline-online-checkout-btn";
+        onlineCheckoutBtn.textContent = "Checkout Online";
+        onlineCheckoutBtn.addEventListener("click", () => {
+            this.close();
+            // Ensure modal closes before triggering checkout intent
+            window.setTimeout(() => {
+                this.triggerContinueToCheckout();
+            }, 0);
+        });
+        actionsRow.appendChild(downloadQRBtn);
+        actionsRow.appendChild(onlineCheckoutBtn);
+        section.appendChild(topRow);
         section.appendChild(expiryInfo);
-        section.appendChild(downloadQRBtn);
+        section.appendChild(actionsRow);
         // Inject styles for offline redemption section
         this.injectOfflineRedemptionStyles();
         return section;
@@ -2126,117 +2146,185 @@ class LobbyModal {
       .offline-redemption-section {
         display: flex;
         flex-direction: column;
-        gap: 16px;
-        padding: 16px 0;
+        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;
       }
 
       .offline-qr-container {
+        flex: 0 0 120px;
         display: flex;
         justify-content: center;
-        background: #f9fafb;
-        padding: 12px;
-        border-radius: 8px;
-        min-height: 160px;
         align-items: center;
+        background: white;
+        padding: 10px;
+        border-radius: 8px;
+        border: 1.5px solid #e5e7eb;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
       }
 
       .offline-qr-image {
-        max-width: 140px;
-        max-height: 140px;
+        max-width: 100px;
+        max-height: 100px;
         width: auto;
         height: auto;
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
       }
 
       .offline-qr-fallback {
         color: #9ca3af;
-        font-size: 12px;
+        font-size: 11px;
         text-align: center;
       }
 
       .offline-code-box {
+        flex: 1;
         display: flex;
         flex-direction: column;
-        gap: 6px;
+        gap: 8px;
+        justify-content: center;
+      }
+
+      .offline-code-row {
+        position: relative;
+        display: flex;
+        align-items: center;
       }
 
       .offline-code-label {
         margin: 0;
         font-size: 11px;
-        font-weight: 600;
-        color: #6b7280;
+        font-weight: 700;
+        color: #1f2937;
         text-transform: uppercase;
         letter-spacing: 0.5px;
       }
 
       .offline-code-value {
-        font-family: monospace;
+        font-family: 'Courier New', monospace;
         font-size: 14px;
-        font-weight: 600;
+        font-weight: 700;
         color: #111827;
-        padding: 10px 12px;
-        background: #f9fafb;
-        border: 1px solid #e5e7eb;
-        border-radius: 6px;
+        padding: 10px 40px 10px 12px;
+        background: white;
+        border: 1.5px solid #d1d5db;
+        border-radius: 8px;
         text-align: center;
-        letter-spacing: 1px;
+        letter-spacing: 1.5px;
         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;
+        word-break: break-all;
+      }
+
+      .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: 8px;
+        right: 6px;
+        top: 50%;
+        transform: translateY(-50%);
         background: none;
         border: none;
-        padding: 4px 8px;
+        padding: 5px 8px;
         cursor: pointer;
         color: #6b7280;
         display: flex;
         align-items: center;
-        transition: color 0.2s;
+        justify-content: center;
+        transition: all 0.2s;
+        border-radius: 4px;
       }
 
       .offline-copy-code-btn:hover {
-        color: #111827;
+        color: #3b82f6;
+        background: #eff6ff;
       }
 
       .offline-expiry-info {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
+        font-size: 11px;
+        color: #6b7280;
+        text-align: center;
+        padding: 6px 0;
       }
 
       .offline-expiry-label {
-        margin: 0;
-        font-size: 11px;
-        font-weight: 600;
-        color: #6b7280;
+        font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.5px;
+        color: #1f2937;
       }
 
       .offline-expiry-value {
-        margin: 0;
-        font-size: 13px;
+        font-weight: 600;
         color: #374151;
       }
 
-      .offline-download-qr-btn {
-        padding: 10px 16px;
-        background: #3b82f6;
-        color: white;
+      .offline-actions-row {
+        display: flex;
+        gap: 10px;
+      }
+
+      .offline-download-qr-btn,
+      .offline-online-checkout-btn {
+        flex: 1;
+        padding: 11px 16px;
         border: none;
-        border-radius: 6px;
+        border-radius: 8px;
         font-size: 13px;
-        font-weight: 600;
+        font-weight: 700;
         cursor: pointer;
-        transition: background 0.2s;
+        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);
       }
 
       .offline-download-qr-btn:hover:not(:disabled) {
-        background: #2563eb;
+        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);
       }
 
       .offline-download-qr-btn:disabled {
@@ -2246,6 +2334,21 @@ class LobbyModal {
     `;
         document.head.appendChild(style);
     }
+    /**
+     * Trigger the same checkout flow as clicking "Continue to Checkout" on the widget
+     */
+    triggerContinueToCheckout() {
+        const buttons = Array.from(document.querySelectorAll(".cobuy-button"));
+        const target = buttons.find((btn) => {
+            const text = (btn.textContent || "").trim().toLowerCase();
+            return text.includes("continue to checkout") || text === "checkout" || text.includes("checkout");
+        });
+        if (!target) {
+            this.logger.warn("[LobbyModal] Could not find a checkout button to trigger");
+            return;
+        }
+        target.click();
+    }
     /**
      * Create offer section
      */