Implemented the Plan Detail view to display consumption overages or forfeitures

src/features/consumption/plan-detail-view.js

@@ -0,0 +1,160 @@
+function createConsumptionPlanDetailView({ createCloseIcon, environment }) {
+  const { document, window, setTimeout, clearTimeout } = environment;
+  let active = null;
+  let sequence = 0;
+  const fields = [
+    ["pricingModel", "Pricing model"], ["lineStatus", "Line status"],
+    ["startDate", "Start date"], ["endDate", "End date"],
+    ["committedCredits", "Committed credits", true], ["consumed", "Consumed", true],
+    ["consumptionL30Days", "Consumption last 30 days", true], ["monthsRemaining", "Months remaining"],
+    ["projectedConsumption", "Projected consumption", true], ["projectedDelta", "Projected delta", true],
+    ["orderId", "Order number"]
+  ];
+  function node(tag, className, text) {
+    const result = document.createElement(tag);
+    if (className) result.className = className;
+    if (text !== undefined) result.textContent = text;
+    return result;
+  }
+  function statusBadge(record, tag = "span") {
+    const text = String(record.projectedStatus || "Unknown");
+    const badge = node(tag, "opportunities-extension-projection-badge", text);
+    badge.dataset.status = text.trim().toLowerCase();
+    return badge;
+  }
+  function orderLink(record, text) {
+    try {
+      const url = new URL(record.orderTrackerURL);
+      if (url.origin !== "https://accountdashboard.oracle.com" || url.username || url.password) return null;
+      const link = node("a", "", text);
+      link.href = url.href;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+      return link;
+    } catch { return null; }
+  }
+  function createLineDetails(record) {
+    const section = node("section", "opportunities-extension-projection-line");
+    const heading = node("h3");
+    heading.append(statusBadge(record));
+    section.append(heading);
+    const details = node("dl", "opportunities-extension-projection-fields");
+    fields.forEach(([key, label, numeric]) => {
+      const raw = record[key];
+      let text = raw === null || raw === undefined || raw === "" ? "-" : String(raw);
+      if (numeric && text !== "-" && Number.isFinite(Number(raw))) {
+        text = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(Number(raw));
+      }
+      const group = node("div");
+      const value = node("dd");
+      const link = key === "orderId" && text !== "-" ? orderLink(record, text) : null;
+      if (link) value.append(link);
+      else value.textContent = text;
+      group.append(node("dt", "", label), value);
+      details.append(group);
+    });
+    section.append(details);
+    if (Array.isArray(record.clines) && record.clines.length) {
+      const children = node("div", "opportunities-extension-projection-children");
+      record.clines.forEach(child => children.append(createLineDetails(child)));
+      section.append(children);
+    }
+    return section;
+  }
+  function closePlanDetailPopover(restoreFocus = false) {
+    if (!active) return;
+    const previous = active;
+    active = null;
+    clearTimeout(previous.timer);
+    previous.popover.hidden = true;
+    previous.button.setAttribute("aria-expanded", "false");
+    document.removeEventListener("pointerdown", previous.outside, true);
+    window.removeEventListener("resize", previous.resize);
+    if (restoreFocus && previous.button.isConnected) {
+      previous.suppressFocus = true;
+      previous.button.focus();
+      previous.suppressFocus = false;
+    }
+  }
+  function positionPopover(entry) {
+    const rect = entry.button.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const width = Math.min(560, viewportWidth - 24);
+    const height = Math.min(520, viewportHeight - 24);
+    entry.popover.style.width = `${width}px`;
+    entry.popover.style.maxHeight = `${height}px`;
+    const below = viewportHeight - rect.bottom - 12;
+    const actualHeight = Math.min(entry.popover.getBoundingClientRect().height, height);
+    entry.popover.style.left = `${Math.max(12, Math.min(rect.left, viewportWidth - width - 12))}px`;
+    entry.popover.style.top = `${Math.max(12, below >= actualHeight ? rect.bottom + 4 : Math.min(rect.top - actualHeight - 4, viewportHeight - actualHeight - 12))}px`;
+  }
+  function createInteractiveBadge(record) {
+    const wrapper = node("div", "opportunities-extension-projection-wrapper");
+    const button = statusBadge(record, "button");
+    button.type = "button";
+    button.setAttribute("aria-label", `Projected status: ${button.textContent}. View plan details`);
+    button.setAttribute("aria-haspopup", "dialog");
+    button.setAttribute("aria-expanded", "false");
+    const popover = node("div", "opportunities-extension-projection-popover");
+    popover.id = `opportunities-extension-projection-${++sequence}`;
+    popover.hidden = true;
+    popover.setAttribute("role", "dialog");
+    popover.setAttribute("aria-label", "Consumption plan details");
+    popover.tabIndex = -1;
+    button.setAttribute("aria-controls", popover.id);
+    const dismiss = node("button", "opportunities-extension-projection-dismiss");
+    dismiss.type = "button";
+    dismiss.setAttribute("aria-label", "Close plan details");
+    dismiss.title = "Close plan details";
+    dismiss.append(createCloseIcon());
+    dismiss.addEventListener("click", () => closePlanDetailPopover(true));
+    popover.append(dismiss, createLineDetails(record));
+    const entry = { button, popover, wrapper, pinned: false, timer: null, suppressFocus: false,
+      outside: event => { if (!wrapper.contains(event.target)) closePlanDetailPopover(); },
+      resize: () => positionPopover(entry) };
+    function open() {
+      if (active !== entry) {
+        closePlanDetailPopover();
+        entry.pinned = false;
+        active = entry;
+        document.addEventListener("pointerdown", entry.outside, true);
+        window.addEventListener("resize", entry.resize);
+      }
+      clearTimeout(entry.timer);
+      popover.hidden = false;
+      button.setAttribute("aria-expanded", "true");
+      positionPopover(entry);
+    }
+    wrapper.addEventListener("pointerenter", open);
+    wrapper.addEventListener("pointerleave", () => {
+      if (entry.pinned || wrapper.contains(document.activeElement)) return;
+      entry.timer = setTimeout(() => { if (active === entry) closePlanDetailPopover(); }, 180);
+    });
+    wrapper.addEventListener("focusin", () => { if (!entry.suppressFocus) open(); });
+    wrapper.addEventListener("focusout", event => { if (!wrapper.contains(event.relatedTarget) && active === entry) closePlanDetailPopover(); });
+    button.addEventListener("click", () => {
+      if (active === entry && entry.pinned) closePlanDetailPopover();
+      else { open(); entry.pinned = true; }
+    });
+    wrapper.addEventListener("keydown", event => {
+      if (event.key === "Escape" && active === entry) {
+        event.preventDefault();
+        event.stopPropagation();
+        closePlanDetailPopover(true);
+      }
+    });
+    wrapper.append(button, popover);
+    return wrapper;
+  }
+  function renderPlanDetailBadges(section, items) {
+    if (active && section.contains(active.button)) closePlanDetailPopover();
+    section.textContent = "";
+    if (!items.length) {
+      section.append(node("span", "opportunities-extension-projection-empty", "No projection data"));
+      return;
+    }
+    items.forEach(record => section.append(createInteractiveBadge(record)));
+  }
+  return { renderPlanDetailBadges, createLineDetails, closePlanDetailPopover };
+}