Spaces:

Mbonea
/

Wifiv2

Running

App Files Files Community

Mbonea commited on Jun 1

Commit

c545977

1 Parent(s): 1daf642

Improve portal payment and success UX

Browse files

Files changed (4) hide show

mockups/portal-redesign.html +354 -0
public/engine.js +33 -3
src/routes/portal.routes.js +27 -13
src/views/screens/portal.ejs +79 -42

mockups/portal-redesign.html ADDED Viewed

	@@ -0,0 +1,354 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>WiFi Portal Mock</title>
+  <style>
+    * { box-sizing: border-box; }
+    :root {
+      --ink: #101418;
+      --muted: #5f6b76;
+      --line: #dfe5ea;
+      --soft: #f3f6f8;
+      --brand: #1463ff;
+      --good: #0f9f6e;
+      --warn: #c2410c;
+      --card: #ffffff;
+      --radius: 8px;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: linear-gradient(180deg, #eef4f7 0%, #f9fbfc 48%, #edf2f5 100%);
+      color: var(--ink);
+      display: grid;
+      place-items: center;
+      padding: 20px;
+    }
+    .phone {
+      width: min(390px, 100%);
+      background: var(--card);
+      border: 1px solid rgba(16, 20, 24, 0.08);
+      border-radius: 18px;
+      box-shadow: 0 24px 70px rgba(20, 35, 48, 0.16);
+      overflow: hidden;
+    }
+    .top {
+      padding: 22px 22px 16px;
+      border-bottom: 1px solid var(--line);
+      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+    }
+    .brand-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 14px;
+      margin-bottom: 18px;
+    }
+    .mark {
+      width: 38px;
+      height: 38px;
+      border-radius: 8px;
+      background: var(--ink);
+      display: grid;
+      place-items: center;
+      color: #fff;
+      font-weight: 800;
+      letter-spacing: 0;
+    }
+    .network-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 7px 10px;
+      border: 1px solid #cde2ff;
+      color: #0d4cbf;
+      background: #f2f7ff;
+      border-radius: 999px;
+      font-size: 11px;
+      font-weight: 700;
+    }
+    .pulse {
+      width: 7px;
+      height: 7px;
+      border-radius: 99px;
+      background: var(--good);
+      box-shadow: 0 0 0 4px rgba(15, 159, 110, 0.14);
+    }
+    h1 {
+      font-size: 27px;
+      line-height: 1.05;
+      letter-spacing: 0;
+      margin: 0 0 7px;
+    }
+    .lead {
+      margin: 0;
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1.45;
+    }
+    .section {
+      padding: 18px 22px 22px;
+    }
+    .label {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      color: var(--muted);
+      font-size: 11px;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      margin-bottom: 9px;
+    }
+    .plans {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+    .plan {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 10px;
+      padding: 13px 14px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: #fff;
+      align-items: center;
+    }
+    .plan.selected {
+      border-color: var(--brand);
+      background: #f5f9ff;
+      box-shadow: 0 0 0 3px rgba(20, 99, 255, 0.09);
+    }
+    .plan strong {
+      display: block;
+      font-size: 14px;
+      margin-bottom: 3px;
+    }
+    .plan span {
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .price {
+      font-size: 15px;
+      font-weight: 800;
+      white-space: nowrap;
+    }
+    .field {
+      margin-bottom: 14px;
+    }
+    .input {
+      width: 100%;
+      height: 46px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      padding: 0 13px;
+      font-size: 15px;
+      font-weight: 600;
+      outline: none;
+      background: #fff;
+    }
+    .input:focus {
+      border-color: var(--brand);
+      box-shadow: 0 0 0 3px rgba(20, 99, 255, 0.12);
+    }
+    .pay-row {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 9px;
+    }
+    .btn {
+      height: 46px;
+      border: 0;
+      border-radius: var(--radius);
+      background: var(--ink);
+      color: #fff;
+      font-size: 13px;
+      font-weight: 800;
+      cursor: default;
+    }
+    .alt {
+      background: var(--soft);
+      color: var(--ink);
+      border: 1px solid var(--line);
+    }
+    .notice {
+      display: flex;
+      gap: 10px;
+      padding: 12px;
+      border-radius: var(--radius);
+      background: #fff7ed;
+      border: 1px solid #fed7aa;
+      color: #7c2d12;
+      font-size: 12px;
+      line-height: 1.4;
+      margin-top: 14px;
+    }
+    .success {
+      border-top: 1px solid var(--line);
+      background: #fbfdfc;
+      padding: 20px 22px 22px;
+    }
+    .success-card {
+      border: 1px solid #b9efd8;
+      background: linear-gradient(180deg, #f5fffa 0%, #ffffff 100%);
+      border-radius: 10px;
+      padding: 17px;
+    }
+    .status {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      color: #066046;
+      font-size: 12px;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 0.07em;
+      margin-bottom: 12px;
+    }
+    .check {
+      width: 23px;
+      height: 23px;
+      border-radius: 99px;
+      background: var(--good);
+      color: #fff;
+      display: grid;
+      place-items: center;
+      font-weight: 900;
+      font-size: 13px;
+    }
+    .success h2 {
+      margin: 0 0 6px;
+      font-size: 23px;
+      letter-spacing: 0;
+    }
+    .success p {
+      margin: 0 0 16px;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+    .voucher {
+      border: 1px dashed #94a3b8;
+      border-radius: 8px;
+      padding: 13px;
+      background: #fff;
+      margin-bottom: 12px;
+    }
+    .voucher small {
+      display: block;
+      color: var(--muted);
+      font-size: 10px;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      margin-bottom: 7px;
+    }
+    .voucher code {
+      font-family: "SFMono-Regular", Consolas, monospace;
+      font-size: 26px;
+      font-weight: 900;
+      letter-spacing: 0.08em;
+      color: var(--ink);
+    }
+    .stats {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      margin-bottom: 14px;
+    }
+    .stat {
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      padding: 10px;
+      background: #fff;
+    }
+    .stat span {
+      display: block;
+      color: var(--muted);
+      font-size: 10px;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 0.07em;
+      margin-bottom: 4px;
+    }
+    .stat strong {
+      font-size: 14px;
+    }
+    .success-actions {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+    @media (max-width: 360px) {
+      body { padding: 0; align-items: stretch; }
+      .phone { border-radius: 0; min-height: 100vh; }
+      .success-actions, .stats { grid-template-columns: 1fr; }
+      h1 { font-size: 24px; }
+    }
+  </style>
+</head>
+<body>
+  <main class="phone">
+    <section class="top">
+      <div class="brand-row">
+        <div class="mark">W</div>
+        <div class="network-pill"><span class="pulse"></span> Sunset Guest WiFi</div>
+      </div>
+      <h1>Choose your WiFi pass</h1>
+      <p class="lead">Pay by mobile money or enter a voucher from the attendant.</p>
+    </section>
+    <section class="section">
+      <div class="label"><span>Plans</span><span>5 Mbps up / 2 Mbps down</span></div>
+      <div class="plans">
+        <div class="plan selected">
+          <div><strong>1 Hour</strong><span>Good for quick browsing</span></div>
+          <div class="price">500 TZS</div>
+        </div>
+        <div class="plan">
+          <div><strong>All Day</strong><span>Valid until midnight</span></div>
+          <div class="price">2,000 TZS</div>
+        </div>
+      </div>
+      <div class="field">
+        <div class="label"><span>M-Pesa number</span></div>
+        <input class="input" value="0765 123 456" aria-label="M-Pesa number">
+      </div>
+      <div class="pay-row">
+        <button class="btn">Pay 500 TZS</button>
+        <button class="btn alt">Enter voucher code</button>
+      </div>
+      <div class="notice">
+        <strong>!</strong>
+        <span>If payment starts while the AP is not reporting online, the voucher is still created. Omada validates the code when the guest connects.</span>
+      </div>
+    </section>
+    <section class="success">
+      <div class="success-card">
+        <div class="status"><span class="check">✓</span> Connected</div>
+        <h2>You are online</h2>
+        <p>Save this voucher. You can use it again on this device until it expires.</p>
+        <div class="voucher">
+          <small>Voucher code</small>
+          <code>VqG00O</code>
+        </div>
+        <div class="stats">
+          <div class="stat"><span>Time left</span><strong>59 minutes</strong></div>
+          <div class="stat"><span>Speed</span><strong>2 Mbps down</strong></div>
+          <div class="stat"><span>Upload</span><strong>5 Mbps up</strong></div>
+          <div class="stat"><span>Network</span><strong>Sunset Guest</strong></div>
+        </div>
+        <div class="success-actions">
+          <button class="btn">Continue</button>
+          <button class="btn alt">Copy code</button>
+        </div>
+      </div>
+    </section>
+  </main>
+</body>
+</html>

public/engine.js CHANGED Viewed

@@ -202,15 +202,45 @@
     const metaEl = $('success-meta');
     if (metaEl) {
       const hours = data.expiresIn ? Math.ceil(data.expiresIn / 3600) : '?';
       metaEl.innerHTML = `
-        <div class="meta-row"><span>Speed</span><strong>${data.speedDown} ↓ / ${data.speedUp} ↑</strong></div>
-        <div class="meta-row"><span>Valid for</span><strong>${hours < 24 ? hours + 'h' : Math.ceil(hours/24) + 'd'}</strong></div>
-        <div class="meta-row"><span>Reconnect?</span><strong>Enter code above on login page</strong></div>
       `;
     }
     showScreen('success');
   }
   function omadaAuthPayload(code) {
     return {
       code,

     const metaEl = $('success-meta');
     if (metaEl) {
       const hours = data.expiresIn ? Math.ceil(data.expiresIn / 3600) : '?';
+      const validFor = hours === '?'
+        ? 'Available'
+        : hours < 24
+          ? `${hours} ${hours === 1 ? 'hour' : 'hours'}`
+          : `${Math.ceil(hours / 24)} ${Math.ceil(hours / 24) === 1 ? 'day' : 'days'}`;
       metaEl.innerHTML = `
+        <div class="meta-row"><span class="meta-key">Time left</span><strong class="meta-val">${validFor}</strong></div>
+        <div class="meta-row"><span class="meta-key">Download</span><strong class="meta-val">${data.speedDown || 'Active'}</strong></div>
+        <div class="meta-row"><span class="meta-key">Upload</span><strong class="meta-val">${data.speedUp || 'Active'}</strong></div>
+        <div class="meta-row"><span class="meta-key">Reconnect</span><strong class="meta-val">Use this code</strong></div>
       `;
     }
     showScreen('success');
   }
+  const successCopyBtn = $('success-copy-btn');
+  if (successCopyBtn) {
+    successCopyBtn.addEventListener('click', async () => {
+      const code = $('success-code')?.textContent?.trim();
+      if (!code || code === '—') return;
+      try {
+        await navigator.clipboard.writeText(code);
+        successCopyBtn.textContent = 'Copied';
+        setTimeout(() => { successCopyBtn.textContent = 'Copy code'; }, 1800);
+      } catch {
+        successCopyBtn.textContent = 'Select code';
+        setTimeout(() => { successCopyBtn.textContent = 'Copy code'; }, 1800);
+      }
+    });
+  }
+  const successContinueBtn = $('success-continue-btn');
+  if (successContinueBtn) {
+    successContinueBtn.addEventListener('click', () => {
+      const target = P.originUrl && /^https?:\/\//i.test(P.originUrl) ? P.originUrl : 'http://example.com';
+      window.location.href = target;
+    });
+  }
   function omadaAuthPayload(code) {
     return {
       code,

src/routes/portal.routes.js CHANGED Viewed

@@ -450,20 +450,34 @@ router.post('/:siteId/purchase', purchaseLimiter, async (req, res) => {
     if (!device) return res.status(404).json({ error: 'Device not found' });
-    const siteDevices = await omada.getSiteDevices(siteId);
-    const omadaDevice = siteDevices.find(d => normalizeMac(d.mac) === normalizeMac(device.mac));
-    const liveStatus = mapOmadaDeviceStatus(omadaDevice?.statusCategory);
-    if (liveStatus && liveStatus !== device.status) {
-      await db.query(
-        `UPDATE devices SET status = ?, last_seen_at = NOW() WHERE id = ?`,
-        [liveStatus, device.id]
-      );
-      device.status = liveStatus;
-    }
-    if (!omadaDevice || liveStatus !== 'online') {
-      return res.status(404).json({ error: 'Device not found or offline' });
     }
     if (!['trial', 'active'].includes(device.billing_status)) {
       return res.status(403).json({ error: 'WiFi service unavailable — billing suspended' });

     if (!device) return res.status(404).json({ error: 'Device not found' });
+    try {
+      const siteDevices = await omada.getSiteDevices(siteId);
+      const omadaDevice = siteDevices.find(d => normalizeMac(d.mac) === normalizeMac(device.mac));
+      const liveStatus = mapOmadaDeviceStatus(omadaDevice?.statusCategory);
+      if (liveStatus && liveStatus !== device.status) {
+        await db.query(
+          `UPDATE devices SET status = ?, last_seen_at = NOW() WHERE id = ?`,
+          [liveStatus, device.id]
+        );
+        device.status = liveStatus;
+      }
+      if (!omadaDevice || liveStatus !== 'online') {
+        console.warn('[portal/purchase] starting payment while Omada AP is not reported online:', {
+          siteId,
+          deviceId: device.id,
+          dbStatus: device.status,
+          liveStatus: liveStatus || null,
+          omadaDeviceFound: Boolean(omadaDevice),
+        });
+      }
+    } catch (omadaErr) {
+      console.warn('[portal/purchase] Omada live status check skipped:', {
+        siteId,
+        deviceId: device.id,
+        error: omadaErr.message,
+      });
     }
     if (!['trial', 'active'].includes(device.billing_status)) {
       return res.status(403).json({ error: 'WiFi service unavailable — billing suspended' });

src/views/screens/portal.ejs CHANGED Viewed

@@ -626,75 +626,105 @@
     }
     /* ── Success ── */
     .success-badge {
       display: inline-flex;
       align-items: center;
-      gap: 6px;
-      background: var(--black);
-      color: #fff;
-      border-radius: 20px;
-      padding: 5px 12px;
-      font-size: 10px;
-      font-weight: 700;
       text-transform: uppercase;
-      letter-spacing: 0.12em;
-      margin-bottom: 20px;
     }
     .success-badge::before {
-      content: '';
-      width: 6px; height: 6px;
-      background: #22C55E;
       border-radius: 50%;
     }
     .success-headline {
-      font-size: 26px;
       font-weight: 800;
-      letter-spacing: -0.05em;
       color: var(--text-primary);
-      margin-bottom: 20px;
       line-height: 1.1;
     }
     .code-panel {
-      background: var(--nest);
-      border-radius: var(--radius-card);
-      padding: 18px 20px;
-      margin-bottom: 18px;
     }
     .code-panel .field-label { margin-bottom: 8px; }
     .code-value {
       font-size: 26px;
-      font-weight: 800;
       color: var(--text-primary);
-      letter-spacing: 4px;
       font-family: 'Courier New', monospace;
     }
     .meta-grid {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
     }
     .meta-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px 0;
-      border-bottom: 1px solid var(--nest);
     }
-    .meta-row:last-child { border-bottom: none; }
     .meta-key {
       font-size: 10px;
-      font-weight: 700;
       text-transform: uppercase;
-      letter-spacing: 0.1em;
       color: var(--text-disabled);
     }
     .meta-val {
       font-size: 13px;
-      font-weight: 700;
       color: var(--text-primary);
     }
     /* ── Empty state ── */
@@ -895,13 +925,20 @@
       <!-- SCREEN 4: Connected! -->
       <div id="screen-success" class="screen">
-        <div class="success-badge">Connected</div>
-        <h2 class="success-headline">You're online.</h2>
-        <div class="code-panel">
-          <span class="field-label">Your Omada Voucher Code - Save to Reconnect</span>
-          <div class="code-value" id="success-code">—</div>
         </div>
-        <div class="meta-grid" id="success-meta"></div>
       </div>
     </div>

     }
     /* ── Success ── */
+    .success-card {
+      border: 1px solid #B9EFD8;
+      background: linear-gradient(180deg, #F5FFFA 0%, #FFFFFF 100%);
+      border-radius: 10px;
+      padding: 18px;
+    }
     .success-badge {
       display: inline-flex;
       align-items: center;
+      gap: 9px;
+      color: #066046;
+      font-size: 11px;
+      font-weight: 800;
       text-transform: uppercase;
+      letter-spacing: 0.08em;
+      margin-bottom: 14px;
     }
     .success-badge::before {
+      content: '✓';
+      width: 23px;
+      height: 23px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: #0F9F6E;
+      color: #FFFFFF;
       border-radius: 50%;
+      font-size: 13px;
+      font-weight: 900;
+      letter-spacing: 0;
     }
     .success-headline {
+      font-size: 24px;
       font-weight: 800;
+      letter-spacing: 0;
       color: var(--text-primary);
+      margin-bottom: 7px;
       line-height: 1.1;
     }
+    .success-copy {
+      margin-bottom: 16px;
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--text-secondary);
+    }
     .code-panel {
+      background: var(--card);
+      border: 1px dashed rgba(0,0,0,0.34);
+      border-radius: 8px;
+      padding: 14px;
+      margin-bottom: 12px;
     }
     .code-panel .field-label { margin-bottom: 8px; }
     .code-value {
       font-size: 26px;
+      font-weight: 900;
       color: var(--text-primary);
+      letter-spacing: 0.08em;
       font-family: 'Courier New', monospace;
+      overflow-wrap: anywhere;
     }
     .meta-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      margin-bottom: 14px;
     }
     .meta-row {
+      padding: 10px;
+      border: 1px solid rgba(0,0,0,0.08);
+      border-radius: 8px;
+      background: var(--card);
     }
     .meta-key {
+      display: block;
+      margin-bottom: 4px;
       font-size: 10px;
+      font-weight: 800;
       text-transform: uppercase;
+      letter-spacing: 0.08em;
       color: var(--text-disabled);
     }
     .meta-val {
+      display: block;
       font-size: 13px;
+      font-weight: 800;
       color: var(--text-primary);
+      line-height: 1.3;
+    }
+    .success-actions {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+    @media (max-width: 360px) {
+      .meta-grid,
+      .success-actions {
+        grid-template-columns: 1fr;
+      }
     }
     /* ── Empty state ── */
       <!-- SCREEN 4: Connected! -->
       <div id="screen-success" class="screen">
+        <div class="success-card">
+          <div class="success-badge">Connected</div>
+          <h2 class="success-headline">You are online</h2>
+          <p class="success-copy">Save this voucher. You can use it again on this device until it expires.</p>
+          <div class="code-panel">
+            <span class="field-label">Voucher Code</span>
+            <div class="code-value" id="success-code">—</div>
+          </div>
+          <div class="meta-grid" id="success-meta"></div>
+          <div class="success-actions">
+            <button class="btn-primary" id="success-continue-btn" type="button">Continue</button>
+            <button class="btn-ghost" id="success-copy-btn" type="button">Copy code</button>
+          </div>
         </div>
       </div>
     </div>