97 lines
4.0 KiB
JavaScript
97 lines
4.0 KiB
JavaScript
function createConsumptionPlansAction({
|
|
messageTypes,
|
|
appendBackgroundRequestLog,
|
|
consumptionPlansState,
|
|
getNestedValue,
|
|
openAccountPlansModal,
|
|
renderOpportunitiesTable,
|
|
requestConsumerTokenServiceOnce,
|
|
sendRuntimeMessage,
|
|
showCopyConfirmation,
|
|
environment
|
|
}) {
|
|
const { document } = environment;
|
|
function createCloudConsumptionButton(opportunity) {
|
|
const button = document.createElement("button");
|
|
const optyNumber = String(opportunity.OptyNumber || "");
|
|
const partyNumber = getNestedValue(opportunity, ["CustomerAccount", "PartyNumber"]);
|
|
const requestState = consumptionPlansState.accountPlansRequestState.get(optyNumber);
|
|
const isLoading = requestState && requestState.status === "loading";
|
|
|
|
button.type = "button";
|
|
button.className = "opportunities-extension-action-button";
|
|
button.setAttribute("aria-label", `View cloud consumption for ${optyNumber || "opportunity"}`);
|
|
button.title = isLoading ? "Loading customer consumption" : "View customer consumption";
|
|
button.disabled = Boolean(isLoading);
|
|
button.classList.toggle("opportunities-extension-action-button-loading", Boolean(isLoading));
|
|
button.append(createCloudConsumptionIcon());
|
|
button.addEventListener("click", () => {
|
|
if (!partyNumber) {
|
|
showCopyConfirmation("Customer Party Number is unavailable.", true);
|
|
return;
|
|
}
|
|
|
|
const currentRequests = consumptionPlansState.accountPlansRequestState;
|
|
currentRequests.set(optyNumber, { status: "loading" });
|
|
openAccountPlansModal(opportunity, [], "loading");
|
|
renderOpportunitiesTable();
|
|
requestConsumerTokenServiceOnce()
|
|
.then((authorizations) => sendRuntimeMessage({
|
|
type: messageTypes.requestAccountPlans,
|
|
partyNumber: String(partyNumber),
|
|
authorizations
|
|
}))
|
|
.then((response) => {
|
|
if (consumptionPlansState.accountPlansRequestState !== currentRequests) return;
|
|
appendBackgroundRequestLog(response && response.debugRequests);
|
|
|
|
if (!response || !response.ok) {
|
|
throw new Error(response && response.error ? response.error : "Unable to load cloud consumption.");
|
|
}
|
|
|
|
consumptionPlansState.accountPlansRequestState.set(optyNumber, {
|
|
status: "ready",
|
|
plans: Array.isArray(response.plans) ? response.plans : []
|
|
});
|
|
renderOpportunitiesTable();
|
|
openAccountPlansModal(opportunity, response.plans || [], "ready");
|
|
}).catch((error) => {
|
|
if (consumptionPlansState.accountPlansRequestState !== currentRequests) return;
|
|
const errorMessage = error.message || "Unable to load cloud consumption.";
|
|
consumptionPlansState.accountPlansRequestState.set(optyNumber, {
|
|
status: "error",
|
|
error: errorMessage
|
|
});
|
|
renderOpportunitiesTable();
|
|
openAccountPlansModal(opportunity, [], "error", errorMessage);
|
|
showCopyConfirmation(errorMessage, true);
|
|
});
|
|
});
|
|
return button;
|
|
}
|
|
|
|
function createCloudConsumptionIcon() {
|
|
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
const cloud = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
const usage = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
|
|
svg.setAttribute("viewBox", "0 0 24 24");
|
|
svg.setAttribute("aria-hidden", "true");
|
|
svg.setAttribute("focusable", "false");
|
|
cloud.setAttribute("d", "M7.2 18.5h10.1a4.2 4.2 0 0 0 .5-8.37A6.25 6.25 0 0 0 5.9 8.75a4.9 4.9 0 0 0 1.3 9.75Z");
|
|
usage.setAttribute("d", "M9 15v-2m3 2v-4m3 4V9");
|
|
|
|
[cloud, usage].forEach((path) => {
|
|
path.setAttribute("fill", "none");
|
|
path.setAttribute("stroke", "currentColor");
|
|
path.setAttribute("stroke-linecap", "round");
|
|
path.setAttribute("stroke-linejoin", "round");
|
|
path.setAttribute("stroke-width", "1.7");
|
|
});
|
|
svg.append(cloud, usage);
|
|
return svg;
|
|
}
|
|
|
|
return { createCloudConsumptionButton, createCloudConsumptionIcon };
|
|
}
|