Implemented the customer rate card view, including SKU search

src/content/application.js

@@ -373,16 +373,42 @@ function createContentApplication(overrides = {}) {
     renderPlanDetailBadges: (...args) => consumptionPlanDetailView.renderPlanDetailBadges(...args),
     environment
   });
+  const ratecardModel = createRatecardModel();
+  const consumptionHeaderView = createConsumptionHeaderView({
+    createCloseIcon: (...args) => contentIcons.createCloseIcon(...args),
+    formatOracleResponseDate: (...args) => opportunitiesFormatters.formatOracleResponseDate(...args),
+    environment
+  });
+  const ratecardView = createRatecardView({
+    ACCOUNT_PLANS_MODAL_ID: contracts.ACCOUNT_PLANS_MODAL_ID,
+    columns: ratecardModel.columns,
+    formatValue: (...args) => ratecardModel.formatValue(...args),
+    selectItems: (...args) => ratecardModel.selectItems(...args),
+    createPlanDetails: (...args) => consumptionHeaderView.createDetails(...args),
+    createConsumptionHeader: (...args) => consumptionHeaderView.createHeader(...args),
+    environment
+  });
+  const ratecardController = createRatecardController({
+    messageTypes,
+    requestConsumerTokenServiceOnce: (...args) => authContentSession.requestConsumerTokenServiceOnce(...args),
+    sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
+    appendBackgroundRequestLog: (...args) => debugContentLog.appendBackgroundRequestLog(...args),
+    openRatecardDrawer: (...args) => ratecardView.openRatecardDrawer(...args),
+    closePlanDetailPopover: (...args) => consumptionPlanDetailView.closePlanDetailPopover(...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),
+    createConsumptionHeader: (...args) => consumptionHeaderView.createHeader(...args),
     createConsumptionTrendSection: (...args) => consumptionTrendController.createConsumptionTrendSection(...args),
     loadPlanDetailForPanel: (...args) => consumptionPlanDetailController.loadPlanDetailForPanel(...args),
     closePlanDetailPopover: (...args) => consumptionPlanDetailView.closePlanDetailPopover(...args),
+    createRatecardButton: (...args) => ratecardController.createRatecardButton(...args),
+    closeRatecardDrawer: (...args) => ratecardView.closeRatecardDrawer(...args),
     createSvgElement: (...args) => consumptionChart.createSvgElement(...args),
-    formatOracleResponseDate: (...args) => opportunitiesFormatters.formatOracleResponseDate(...args),
+    createPlanDetails: (...args) => consumptionHeaderView.createDetails(...args),
     getNestedValue: (...args) => opportunitiesFormatters.getNestedValue(...args),
     loadConsumptionTrendForPanel: (...args) => consumptionTrendController.loadConsumptionTrendForPanel(...args),
     environment
@@ -479,6 +505,9 @@ function createContentApplication(overrides = {}) {
     consumptionPlansView,
     consumptionPlanDetailController,
     consumptionPlanDetailView,
+    ratecardModel,
+    ratecardView,
+    ratecardController,
     consumptionTrendController,
     consumptionChart,
     consumptionModel,