diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index b0aa9bed2..1c795aab2 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -10,16 +10,20 @@ export function fetchCmsContentForPage(fmgPage) { response.data.Result.forEach((widget) => { - let widgetWithReplacements = findAndReplaceGlobalStateValues(widget.Model, widget.Type); + let widgetWithReplacements = findAndReplaceGlobalStateValues(widget.Model, widget.Name); - if (Object.values(widgetNames).includes(widgetWithReplacements.Type)) { - // If we already have this widget, push it on the collection - if (widgetWithReplacements.Type in pageDataFromCms) { - pageDataFromCms[widgetWithReplacements.Type].push(widgetWithReplacements.Model); - return; - } + // If we already have this widget, push it on the collection + if (widgetWithReplacements.Name in pageDataFromCms) { + pageDataFromCms[widgetWithReplacements.Name].push(widgetWithReplacements.Model); + return; + } - pageDataFromCms[widgetWithReplacements.Type] = [widgetWithReplacements.Model]; + pageDataFromCms[widgetWithReplacements.Name] = [widgetWithReplacements.Model]; + }); + + Object.keys(pageDataFromCms).forEach((key) => { + if (pageDataFromCms[key].length === 1){ + pageDataFromCms[key] = pageDataFromCms[key][0]; } }); @@ -66,10 +70,10 @@ function mapStringToState(str) { // Parent function for processWidgetItemForReplacement. This will loop through the parent // object and pass any objects that need additional processing to the processWidgetItemForReplacement function. -function findAndReplaceGlobalStateValues(widgetModel, widgetType) { +function findAndReplaceGlobalStateValues(widgetModel, widgetName) { const objWithReplacements = { - Type: widgetType, + Name: widgetName, Model: {} }; diff --git a/src/helpers/cms-helper.spec.js b/src/helpers/cms-helper.spec.js index 4aa25710b..efc0ee56c 100644 --- a/src/helpers/cms-helper.spec.js +++ b/src/helpers/cms-helper.spec.js @@ -15,19 +15,19 @@ describe("cms-content-helper.js", () => { const cmsMockData = { Result: [ { - Type: "FunnelSubHeaderWidget", + Name: "FunnelHeaderWidget", Model: { HeaderText: "Select a year to get started", }, }, { - Type: "FunnelSubHeaderWidget", + Name: "FunnelSubHeaderWidget", Model: { HeaderText: "Select a model", }, }, { - Type: "RadioQuestionWidget", + Name: "VehicleYearQuestion", Model: { QuestionText: "What year is your vehicle?", }, @@ -40,7 +40,7 @@ describe("cms-content-helper.js", () => { // Act fetchCmsContentForPage("testPage").then((response) => { // Assert - expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual( + expect(response.FunnelHeaderWidget.HeaderText).toEqual( "Select a year to get started" ); }); @@ -53,7 +53,7 @@ describe("cms-content-helper.js", () => { const cmsMockData = { Result: [ { - Type: "FunnelSubHeaderWidget", + Name: "FunnelSubHeaderWidget", Model: { HeaderText: "{globalState:order.vehicle.year}", }, @@ -65,7 +65,7 @@ describe("cms-content-helper.js", () => { fetchCmsContentForPage("testPage").then((response) => { // Assert - expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual( + expect(response.FunnelSubHeaderWidget.HeaderText).toEqual( "2019" ); }); @@ -78,13 +78,13 @@ describe("cms-content-helper.js", () => { const cmsMockData = { Result: [ { - Type: "FunnelSubHeaderWidget", + Name: "FunnelSubHeaderWidget", Model: { HeaderText: "{globalState:order.vehicle.year}", }, }, { - Type: "RadioQuestionWidget", + Name: "VehicleYearQuestion", Model: { ExampleText: "My widget value!", }, @@ -96,8 +96,8 @@ describe("cms-content-helper.js", () => { fetchCmsContentForPage("testPage").then((response) => { // Assert - expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019"); - expect(response.RadioQuestionWidget[0].ExampleText).toEqual("My widget value!"); + expect(response.FunnelSubHeaderWidget.HeaderText).toEqual("2019"); + expect(response.VehicleYearQuestion.ExampleText).toEqual("My widget value!"); }); }); @@ -109,13 +109,13 @@ describe("cms-content-helper.js", () => { const cmsMockData = { Result: [ { - Type: "FunnelSubHeaderWidget", + Name: "FunnelSubHeaderWidget", Model: { HeaderText: "{globalState:order.vehicle.year}", }, }, { - Type: "RadioQuestionWidget", + Name: "VehicleMakeQuestion", Model: { OtherObjectInside: { ExampleText: "{globalState:order.vehicle.make}", @@ -130,8 +130,8 @@ describe("cms-content-helper.js", () => { fetchCmsContentForPage("testPage").then((response) => { // Assert - expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019"); - expect(response.RadioQuestionWidget[0].OtherObjectInside.ExampleText).toEqual("Acura"); + expect(response.FunnelSubHeaderWidget.HeaderText).toEqual("2019"); + expect(response.VehicleMakeQuestion.OtherObjectInside.ExampleText).toEqual("Acura"); }); }); diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index f1625dd6e..83a7f1862 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -17,10 +17,10 @@ describe("vehicle-make.vue", () => { test("Make question component is initized with api data", async (done) => { //Arrange - const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" }; + const vehicleMakeQuestionCmsContent = { QuestionText: "What make is your vehicle?" }; const makeQuestionInitialData = ["honda", "ford", "dodge"]; const { wrapper, apiPromise } = setupMocks( { - radioQuestionCmsContent: radioQuestionCmsContent, + vehicleMakeQuestionCmsContent: vehicleMakeQuestionCmsContent, makeQuestionInitialData: makeQuestionInitialData, } ); @@ -29,7 +29,7 @@ describe("vehicle-make.vue", () => { //Assert apiPromise.finally(() => { - expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, makeQuestionInitialData); + expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleMakeQuestionCmsContent, makeQuestionInitialData); done(); }); }); @@ -122,7 +122,7 @@ describe("vehicle-make.vue", () => { }); function setupMocks({ - radioQuestionCmsContent = {}, + vehicleMakeQuestionCmsContent = {}, makeQuestionInitialData = {}, pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}, @@ -131,20 +131,18 @@ function setupMocks({ //Mock api responses const apiResponses = { cmsContent: { - FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText], - RadioQuestionWidget: [radioQuestionCmsContent], - VehicleBannerWidget: [ + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleMakeQuestion: vehicleMakeQuestionCmsContent, + VehicleBannerWidget: { GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", }, - ], - FunnelHeaderWidget: [ + FunnelHeaderWidget: { LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", }, - ], }, makeQuestionInitialData: makeQuestionInitialData, }; diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index e9fdb7686..e641c4c73 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -55,10 +55,10 @@ export default { settleAllPromises(promiseResultMap).then((resultMap) => { // Call the "next" function to complete the transition to this page. next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); - vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.makeQuestionInitialData); + vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); + vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); + vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); + vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.VehicleMakeQuestion, resultMap.makeQuestionInitialData); }); }); }, diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js index b3aab50b4..861303ac8 100644 --- a/src/layouts/vehicle-model/vehicle-model.spec.js +++ b/src/layouts/vehicle-model/vehicle-model.spec.js @@ -7,44 +7,35 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import { settleAllPromises } from "@/helpers/layout-helper.js"; import { nextTick } from "vue"; - // Mock our module for promises. jest.mock("@/helpers/layout-helper.js", () => ({ settleAllPromises: jest.fn(), })); - describe("vehicle-model.vue", () => { test("Model question component is initized with api data", async (done) => { - //Arange - const radioQuestionCmsContent = { QuestionText: "What model is your vehicle?" }; + const buttonQuestionContent = { QuestionText: "What model is your vehicle?" }; const modelQuestionInitialData = ["accord", "civic", "insight"]; const { wrapper, apiPromise } = setupMocks( { - radioQuestionCmsContent: radioQuestionCmsContent, + buttonQuestionContent: buttonQuestionContent, modelQuestionInitialData: modelQuestionInitialData, } ); - //Act vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); - //Assert apiPromise.finally(() => { - expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, modelQuestionInitialData); + expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(buttonQuestionContent, modelQuestionInitialData); done(); }); }); }); - describe("vehicle-model.vue", () => { test("Page header is initailized with api data", async (done) => { - //Arrange const pageHeaderWidgetHeaderText = "Select a model to get started"; const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText }); - //Act vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); - //Assert apiPromise.finally(() => { expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText); @@ -52,20 +43,16 @@ describe("vehicle-model.vue", () => { }); }); }); - describe("vehicle-model.vue", () => { test("Page logo image is initailized with api data", async (done) => { - //Arrange const SiteHeaderWidget = { LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", } const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget}); - //Act vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); - //Assert apiPromise.finally(() => { expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget); @@ -73,20 +60,16 @@ describe("vehicle-model.vue", () => { }); }); }); - describe("vehicle-model.vue", () => { test("Vehicle image is initailized with api data", async (done) => { - //Arrange const VehicleBannerWidget = { GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", } const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget}); - //Act vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); - //Assert apiPromise.finally(() => { expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget); @@ -94,10 +77,8 @@ describe("vehicle-model.vue", () => { }); }); }); - describe("vehicle-model.vue", () => { test("BackButtonAction triggers a router.navigate change", async (done) => { - //Arrange const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a model to get started", @@ -107,12 +88,10 @@ describe("vehicle-model.vue", () => { }, }, }); - //Act vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); wrapper.vm.backButtonAction(); await nextTick(); - //Assert apiPromise.finally(() => { expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); @@ -120,37 +99,32 @@ describe("vehicle-model.vue", () => { }); }); }); - function setupMocks({ - radioQuestionCmsContent = {}, + buttonQuestionContent = {}, modelQuestionInitialData = {}, pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}, }) { - //Mock api responses const apiResponses = { cmsContent: { - FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText], - RadioQuestionWidget: [radioQuestionCmsContent], - VehicleBannerWidget: [ + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleModelQuestion: buttonQuestionContent, + VehicleBannerWidget: { GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", }, - ], - FunnelHeaderWidget: [ + FunnelHeaderWidget: { LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", }, - ], }, modelQuestionInitialData: modelQuestionInitialData, }; const apiPromise = Promise.resolve(apiResponses); settleAllPromises.mockImplementation(() => apiPromise); - //Mock model question methods modelQuestion.methods = { loadInitialData: jest.fn(), @@ -175,6 +149,5 @@ function setupMocks({ vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent; const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" }); funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent; - return { wrapper, apiPromise }; } \ No newline at end of file diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue index e10d51fa7..c682e9e24 100644 --- a/src/layouts/vehicle-model/vehicle-model.vue +++ b/src/layouts/vehicle-model/vehicle-model.vue @@ -55,10 +55,10 @@ export default { settleAllPromises(promiseResultMap).then((resultMap) => { // Call the "next" function to complete the transition to this page. next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); - vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData); + vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); + vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); + vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); + vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.VehicleModelQuestion, resultMap.modelQuestionInitialData); }); }); }, diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js index 15264e53e..222daa50c 100644 --- a/src/layouts/vehicle-style/vehicle-style.spec.js +++ b/src/layouts/vehicle-style/vehicle-style.spec.js @@ -17,10 +17,10 @@ describe("vehicle-style.vue", () => { test("Style question component is initized with api data", async (done) => { //Arrange - const radioQuestionCmsContent = { QuestionText: "What style is your vehicle?" }; + const vehicleStyleQuestionCmsContent = { QuestionText: "What style is your vehicle?" }; const styleQuestionInitialData = ["2 Door", "4 Door"]; const { wrapper, apiPromise } = setupMocks( { - radioQuestionCmsContent: radioQuestionCmsContent, + vehicleStyleQuestionCmsContent: vehicleStyleQuestionCmsContent, styleQuestionInitialData: styleQuestionInitialData, } ); @@ -29,7 +29,7 @@ describe("vehicle-style.vue", () => { //Assert apiPromise.finally(() => { - expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, styleQuestionInitialData); + expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleStyleQuestionCmsContent, styleQuestionInitialData); done(); }); }); @@ -122,7 +122,7 @@ describe("vehicle-style.vue", () => { }); function setupMocks({ - radioQuestionCmsContent = {}, + vehicleStyleQuestionCmsContent = {}, styleQuestionInitialData = {}, pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}, @@ -131,20 +131,18 @@ function setupMocks({ //Mock api responses const apiResponses = { cmsContent: { - FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText], - RadioQuestionWidget: [radioQuestionCmsContent], - VehicleBannerWidget: [ + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleStyleQuestion: vehicleStyleQuestionCmsContent, + VehicleBannerWidget: { GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", }, - ], - FunnelHeaderWidget: [ + FunnelHeaderWidget: { LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", }, - ], }, styleQuestionInitialData: styleQuestionInitialData, }; diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue index e258254d4..9a1706b97 100644 --- a/src/layouts/vehicle-style/vehicle-style.vue +++ b/src/layouts/vehicle-style/vehicle-style.vue @@ -55,10 +55,10 @@ export default { settleAllPromises(promiseResultMap).then((resultMap) => { // Call the "next" function to complete the transition to this page. next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); - vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData); + vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); + vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); + vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); + vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.VehicleStyleQuestion, resultMap.styleQuestionInitialData); }); }); }, diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js index 26f4d61b2..df0668c31 100644 --- a/src/layouts/vehicle-year/vehicle-year.spec.js +++ b/src/layouts/vehicle-year/vehicle-year.spec.js @@ -17,10 +17,10 @@ describe("vehicle-year.vue", () => { test("Year question component is initized with api data", async (done) => { //Arrange - const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" }; + const vehicleYearQuestionCmsContent = { QuestionText: "What year is your vehicle?" }; const yearQuestionInitialData = ["2023", "2022", "2021"]; const { wrapper, apiPromise } = setupMocks( { - radioQuestionCmsContent: radioQuestionCmsContent, + vehicleYearQuestionCmsContent: vehicleYearQuestionCmsContent, yearQuestionInitialData: yearQuestionInitialData, } ); @@ -29,7 +29,7 @@ describe("vehicle-year.vue", () => { //Assert apiPromise.finally(() => { - expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, yearQuestionInitialData); + expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleYearQuestionCmsContent, yearQuestionInitialData); done(); }); }); @@ -78,7 +78,7 @@ describe("vehicle-year.vue", () => { }); function setupMocks({ - radioQuestionCmsContent = {}, + vehicleYearQuestionCmsContent = {}, yearQuestionInitialData = {}, pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}, @@ -87,20 +87,18 @@ function setupMocks({ //Mock api responses const apiResponses = { cmsContent: { - FunnelSubHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }], - RadioQuestionWidget: [radioQuestionCmsContent], - VehicleBannerWidget: [ + FunnelSubHeaderWidget: { HeaderText: pageHeaderWidgetHeaderText }, + VehicleYearQuestion: vehicleYearQuestionCmsContent, + VehicleBannerWidget: { GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", }, - ], - FunnelHeaderWidget: [ + FunnelHeaderWidget: { LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", }, - ], }, yearQuestionInitialData: yearQuestionInitialData, }; diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 8456c3275..c5c85675e 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -53,10 +53,10 @@ export default { settleAllPromises(promiseResultMap).then((resultMap) => { // Call the "next" function to complete the transition to this page. next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); - vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.yearQuestionInitialData); + vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); + vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); + vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); + vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.VehicleYearQuestion, resultMap.yearQuestionInitialData); }); }); },