Implementation of the customer consumption display

2026-09-07 16:11:00 -03:00
parent f0fb99d1ef
commit 5b1a35430a
9 changed files with 4323 additions and 94 deletions
--- a/tests/fixtures/consumption-trend.html
+++ b/tests/fixtures/consumption-trend.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Consumption Trend Visual Test</title>
+    <style>
+      html, body { width: 100%; min-height: 100%; margin: 0; }
+      body { font-family: Arial, sans-serif; }
+      #opportunities-extension-modal { position: fixed; inset: 0; }
+    </style>
+  </head>
+  <body>
+    <div id="opportunities-extension-modal" class="opportunities-extension-modal" data-theme="light"></div>
+    <script>
+      window.chrome = { runtime: { onMessage: { addListener() {} } } };
+
+      async function initialize() {
+        const source = await fetch("/src/content.js").then((response) => response.text());
+        const marker = /\r?\n  if \(insertTile\(\)\) \{/;
+        const exposure = `
+  window.__trendHarness = {
+    ensureStyles: ensureExtensionStyles,
+    createAccountPlanDetails,
+    createConsumptionTrendSection,
+    renderConsumptionTrendChart
+  };
+  return;
+`;
+        const testableSource = source
+          .replace("  if (!isAllowedPage()) {", "  if (false) {")
+          .replace(marker, `${exposure}\n  if (insertTile()) {`);
+        window.eval(testableSource);
+
+        const plan = {
+          subPlanNum: "11276098",
+          planType: "Universal Credits",
+          bookingCustomer: "Example Customer",
+          soldToPartyName: "Example Sold To",
+          contractId: "12345678",
+          hdrStatusCode: "ACTIVE",
+          startDate: "2026-06-01",
+          endDate: "2027-05-31"
+        };
+        const items = [
+          ["20-Jun-26", 29000, 0], ["27-Jun-26", 30000, 0], ["04-Jul-26", 33000, 0],
+          ["11-Jul-26", 28500, 0], ["18-Jul-26", 29500, 0], ["25-Jul-26", 23000, 10000],
+          ["01-Aug-26", 0, 29000], ["08-Aug-26", 0, 32000], ["15-Aug-26", 0, 30000],
+          ["22-Aug-26", 31000, 4500], ["29-Aug-26", 37000, 0], ["05-Sep-26", 35000, 0],
+          ["12-Sep-26", 2000, 0]
+        ].flatMap(([label, funded, overage]) => {
+          const [day, month, year] = label.split("-");
+          const monthNumber = { Jun: "06", Jul: "07", Aug: "08", Sep: "09" }[month];
+          const base = {
+            fyDate: `20${year}-${monthNumber}-${day}`,
+            fiscalTime: [label],
+            fiscalQtr: "FY27-Q1",
+            currencyCode: "USD",
+            arrCd: 0
+          };
+          const rows = [{ ...base, usageCategory: "Funded Allocation", usedAmount: funded }];
+          if (overage) rows.push({ ...base, usageCategory: "OVERAGE", usedAmount: overage });
+          return rows;
+        });
+
+        window.__trendHarness.ensureStyles();
+        const overlay = document.getElementById("opportunities-extension-modal");
+        overlay.dataset.theme = new URLSearchParams(window.location.search).get("theme") === "dark"
+          ? "dark"
+          : "light";
+        const modal = document.createElement("section");
+        modal.className = "opportunities-extension-account-plans-modal";
+        const dialog = document.createElement("div");
+        dialog.className = "opportunities-extension-account-plans-dialog";
+        const header = document.createElement("header");
+        header.className = "opportunities-extension-account-plans-header";
+        header.innerHTML = "<div><h2>Cloud Consumption</h2><p>Example customer</p></div>";
+        const content = document.createElement("div");
+        content.className = "opportunities-extension-account-plans-content";
+        const tabs = document.createElement("div");
+        tabs.className = "opportunities-extension-account-plans-tabs";
+        tabs.innerHTML = '<button class="opportunities-extension-account-plan-tab" aria-selected="true"><span class="opportunities-extension-account-plan-status-indicator" data-active="true"></span>Universal Credits 11276098</button>';
+        const panel = document.createElement("section");
+        panel.className = "opportunities-extension-account-plan-panel";
+        const trend = window.__trendHarness.createConsumptionTrendSection(plan);
+        panel.append(window.__trendHarness.createAccountPlanDetails(plan), trend);
+        content.append(tabs, panel);
+        dialog.append(header, content);
+        modal.append(dialog);
+        overlay.append(modal);
+        window.__trendHarness.renderConsumptionTrendChart(
+          trend,
+          trend.querySelector(".opportunities-extension-consumption-chart"),
+          items,
+          "weekly",
+          plan.subPlanNum
+        );
+      }
+
+      initialize();
+    </script>
+  </body>
+</html>