pporto/opportunities-extension
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Implemented the customer rate card view, including SKU search

Browse Source
This commit is contained in:
Paulo Porto
2026-09-22 20:25:41 -03:00
parent 9ac5ffb11d
commit b4d8d9dbc1
23 changed files with 1854 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/features/consumption/header-view.js Normal file
View File

@@ -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 };
}

58
src/features/consumption/plans-view.js
View File

@@ -2,12 +2,14 @@ function createConsumptionPlansView({
ACCOUNT_PLANS_MODAL_ID,
DEFAULT_CONSUMPTION_TREND_PERIOD,
MODAL_ID,
createCloseIcon,
createConsumptionHeader,
createConsumptionTrendSection,
loadPlanDetailForPanel,
closePlanDetailPopover,
createRatecardButton,
closeRatecardDrawer,
createSvgElement,
formatOracleResponseDate,
createPlanDetails,
getNestedValue,
loadConsumptionTrendForPanel,
environment
@@ -31,12 +33,14 @@ function createConsumptionPlansView({
}
closePlanDetailPopover();
closeRatecardDrawer({ immediate: true, restoreFocus: false });
existingModal?.remove();
const modal = document.createElement("section");
modal.id = ACCOUNT_PLANS_MODAL_ID;
modal.className = "opportunities-extension-account-plans-modal";
modal.dataset.optyNumber = optyNumber;
modal.dataset.customerLabel = getNestedValue(opportunity, ["CustomerAccount", "PartyUniqueName"]) || opportunity.Name || opportunity.OptyNumber || "Opportunity";
modal.setAttribute("role", "dialog");
modal.setAttribute("aria-modal", "true");
modal.setAttribute("aria-labelledby", "opportunities-extension-account-plans-title");
@@ -45,26 +49,12 @@ function createConsumptionPlansView({
const dialog = document.createElement("div");
dialog.className = "opportunities-extension-account-plans-dialog";
const header = document.createElement("header");
header.className = "opportunities-extension-account-plans-header";
const heading = document.createElement("div");
const title = document.createElement("h2");
title.id = "opportunities-extension-account-plans-title";
title.textContent = "Cloud Consumption";
const subtitle = document.createElement("p");
subtitle.textContent = getNestedValue(opportunity, ["CustomerAccount", "PartyUniqueName"]) || opportunity.Name || opportunity.OptyNumber || "Opportunity";
heading.append(title, subtitle);
const closeButton = document.createElement("button");
closeButton.type = "button";
closeButton.className = "opportunities-extension-icon-button";
closeButton.setAttribute("aria-label", "Close cloud consumption");
closeButton.title = "Close";
closeButton.append(createCloseIcon());
closeButton.addEventListener("click", closeAccountPlansModal);
header.append(heading, closeButton);
const header = createConsumptionHeader({
titleId: "opportunities-extension-account-plans-title",
customerLabel: modal.dataset.customerLabel,
closeLabel: "Close cloud consumption",
onClose: closeAccountPlansModal
});
const content = document.createElement("div");
content.className = "opportunities-extension-account-plans-content";
@@ -123,6 +113,7 @@ function createConsumptionPlansView({
tab.addEventListener("click", () => {
closePlanDetailPopover();
closeRatecardDrawer({ immediate: true, restoreFocus: false });
tabList.querySelectorAll("[role='tab']").forEach((candidate) => {
const isSelected = candidate === tab;
candidate.setAttribute("aria-selected", String(isSelected));
@@ -329,31 +320,12 @@ function createConsumptionPlansView({
}
function createAccountPlanDetails(plan) {
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);
group.append(term, description);
details.append(group);
});
return details;
return createPlanDetails(plan, { contractAction: createRatecardButton(plan) });
}
function closeAccountPlansModal() {
closePlanDetailPopover();
closeRatecardDrawer({ immediate: true, restoreFocus: false });
const modal = document.getElementById(ACCOUNT_PLANS_MODAL_ID);
if (modal) {