Implemented the customer rate card view, including SKU search

src/features/consumption/header-view.js

@@ -0,0 +1,54 @@
+function createConsumptionHeaderView({ createCloseIcon, formatOracleResponseDate, environment }) {
+  const { document } = environment;
+  function createHeader({ titleId, customerLabel, closeLabel, onClose, titleText = "Cloud Consumption" }) {
+    const header = document.createElement("header");
+    header.className = "opportunities-extension-account-plans-header";
+    const heading = document.createElement("div");
+    const title = document.createElement("h2");
+    title.id = titleId;
+    title.textContent = titleText;
+    const subtitle = document.createElement("p");
+    subtitle.textContent = customerLabel;
+    heading.append(title, subtitle);
+    const closeButton = document.createElement("button");
+    closeButton.type = "button";
+    closeButton.className = "opportunities-extension-icon-button";
+    closeButton.setAttribute("aria-label", closeLabel);
+    closeButton.title = "Close";
+    closeButton.append(createCloseIcon());
+    closeButton.addEventListener("click", onClose);
+    header.append(heading, closeButton);
+    return header;
+  }
+  function createDetails(plan, { contractAction = null } = {}) {
+    const details = document.createElement("dl");
+    details.className = "opportunities-extension-account-plan-details";
+    const fields = [
+      { label: "Booking Customer", value: plan.bookingCustomer },
+      { label: "Sold To Party Name", value: plan.soldToPartyName },
+      { label: "Contract ID", value: plan.contractId },
+      { label: "Header Status", value: plan.hdrStatusCode },
+      { label: "Start Date", value: formatOracleResponseDate(plan.startDate) },
+      { label: "End Date", value: formatOracleResponseDate(plan.endDate) }
+    ];
+    fields.forEach(field => {
+      const group = document.createElement("div");
+      const term = document.createElement("dt");
+      const description = document.createElement("dd");
+      term.textContent = field.label;
+      description.textContent = field.value === null || field.value === undefined || field.value === "" ? "-" : String(field.value);
+      if (field.label === "Contract ID" && contractAction) {
+        group.className = "opportunities-extension-contract-row";
+        const value = document.createElement("span");
+        value.textContent = description.textContent;
+        description.textContent = "";
+        description.className = "opportunities-extension-contract-ratecard";
+        description.append(value, contractAction);
+      }
+      group.append(term, description);
+      details.append(group);
+    });
+    return details;
+  }
+  return { createHeader, createDetails };
+}