c

app.js

@@ -494,10 +494,8 @@ function populateDemoShell() {
   document.getElementById("contract-body").innerHTML = `
     <div class="contract-row">
       <div class="contract-info">
-        <span class="contract-type">Auto - Monthly</span>
+        <span class="contract-type">Junior \u2013 Monthly</span>
-        <span class="contract-expires">No expiration</span>
       </div>
-      <a href="#" class="btn btn-ghost btn-sm" style="margin-left:auto;flex-shrink:0;" onclick="return false">Cancel</a>
     </div>`;
 
   // Backups
@@ -1436,72 +1434,24 @@ function renderContract(data) {
     return;
   }
 
-  const item = data[0];
+  headerDot.className = "contract-dot contract-dot--green";
-  const type = (item.type || "").trim();
-  const expires = item.expires || "";
-
-  // Determine status
-  const t = type.toLowerCase();
-  let expired = false;
-  if (expires && expires.trim()) {
-    try {
-      expired = new Date(expires) < new Date();
-    } catch (_) {}
-  }
-
-  let statusClass;
-  if (!type || expired || t.includes("none")) {
-    statusClass = "contract-dot--red";
-  } else if (t.includes("auto")) {
-    statusClass = "contract-dot--green";
-  } else {
-    statusClass = "contract-dot--yellow";
-  }
-
-  // Update the header dot
-  headerDot.className = `contract-dot ${statusClass}`;
   headerDot.style.visibility = "visible";
 
-  // Empty type — show placeholder row with extend button on the right
+  const item = data[0];
-  if (!type) {
+  const product = stripQuotes(item.product || "");
-    body.innerHTML = `
+  const period = stripQuotes(item.period || "");
-      <div class="contract-row">
+  const type = stripQuotes(item.type || "");
-        <div class="contract-info">
-          <span class="contract-type">No contract</span>
-          <span class="contract-expires">Stripe payments can take up to 24hrs to be recognized.</span>
-        </div>
-        <a href="${escAttr(CONTRACT_EXTEND_URL)}" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-left:auto;flex-shrink:0;">Extend Contract</a>
-      </div>`;
-    return;
-  }
 
-  const expLabel =
+  const label =
-    expires && expires.trim()
+    product && period
-      ? new Date(expires).toLocaleDateString("en-US", {
+      ? `${product} \u2013 ${period}`
-          month: "short",
+      : product || period || type || "—";
-          day: "numeric",
-          year: "numeric",
-        })
-      : "No expiration";
-
-  const extendHtml =
-    statusClass === "contract-dot--red"
-      ? `<a href="${escAttr(CONTRACT_EXTEND_URL)}" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-top:8px;display:inline-flex;">Extend Contract</a>`
-      : "";
-
-  const cancelHtml =
-    statusClass === "contract-dot--green"
-      ? `<a href="${escAttr(CONTRACT_CANCEL_URL)}" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-left:auto;flex-shrink:0;">Cancel</a>`
-      : "";
 
   body.innerHTML = `
     <div class="contract-row">
       <div class="contract-info">
-        <span class="contract-type">${escHtml(type)}</span>
+        <span class="contract-type">${escHtml(label)}</span>
-        <span class="contract-expires">${escHtml(expLabel)}</span>
-        ${extendHtml}
       </div>
-      ${cancelHtml}
     </div>`;
 }