Implemented the Plan Detail view to display consumption overages or forfeitures

src/content/application.js

@@ -361,12 +361,26 @@ function createContentApplication(overrides = {}) {
     showCopyConfirmation: (...args) => opportunitiesLinks.showCopyConfirmation(...args),
     environment
   });
+  const consumptionPlanDetailView = createConsumptionPlanDetailView({
+    createCloseIcon: (...args) => contentIcons.createCloseIcon(...args),
+    environment
+  });
+  const consumptionPlanDetailController = createConsumptionPlanDetailController({
+    messageTypes,
+    requestConsumerTokenServiceOnce: (...args) => authContentSession.requestConsumerTokenServiceOnce(...args),
+    sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
+    appendBackgroundRequestLog: (...args) => debugContentLog.appendBackgroundRequestLog(...args),
+    renderPlanDetailBadges: (...args) => consumptionPlanDetailView.renderPlanDetailBadges(...args),
+    environment
+  });
   const consumptionPlansView = createConsumptionPlansView({
     ACCOUNT_PLANS_MODAL_ID: contracts.ACCOUNT_PLANS_MODAL_ID,
     DEFAULT_CONSUMPTION_TREND_PERIOD: contracts.DEFAULT_CONSUMPTION_TREND_PERIOD,
     MODAL_ID: contracts.MODAL_ID,
     createCloseIcon: (...args) => contentIcons.createCloseIcon(...args),
     createConsumptionTrendSection: (...args) => consumptionTrendController.createConsumptionTrendSection(...args),
+    loadPlanDetailForPanel: (...args) => consumptionPlanDetailController.loadPlanDetailForPanel(...args),
+    closePlanDetailPopover: (...args) => consumptionPlanDetailView.closePlanDetailPopover(...args),
     createSvgElement: (...args) => consumptionChart.createSvgElement(...args),
     formatOracleResponseDate: (...args) => opportunitiesFormatters.formatOracleResponseDate(...args),
     getNestedValue: (...args) => opportunitiesFormatters.getNestedValue(...args),
@@ -374,6 +388,7 @@ function createContentApplication(overrides = {}) {
     environment
   });
   const consumptionTrendController = createConsumptionTrendController({
+    createPlanDetailSection: (...args) => consumptionPlanDetailController.createPlanDetailSection(...args),
     messageTypes,
     CONSUMPTION_TREND_PERIODS: contracts.CONSUMPTION_TREND_PERIODS,
     DEFAULT_CONSUMPTION_TREND_PERIOD: contracts.DEFAULT_CONSUMPTION_TREND_PERIOD,
@@ -462,6 +477,8 @@ function createContentApplication(overrides = {}) {
     serviceRequestsAction,
     serviceRequestsView,
     consumptionPlansView,
+    consumptionPlanDetailController,
+    consumptionPlanDetailView,
     consumptionTrendController,
     consumptionChart,
     consumptionModel,