From c9610e2aa2f2996c46123b442dbac2c031e2c8e6 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Wed, 1 Nov 2023 13:09:46 -0400 Subject: [PATCH 01/10] CSR-1391 switch payment functionality --- .../payment-switch-button.vue | 74 ++++++++++++++++++ .../payment/payment-switch/payment-switch.vue | 78 +++++++++++++++++++ src/layouts/payment/payment.vue | 40 ++-------- 3 files changed, 159 insertions(+), 33 deletions(-) create mode 100644 src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue create mode 100644 src/layouts/payment/payment-switch/payment-switch.vue diff --git a/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue b/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue new file mode 100644 index 000000000..ced2c4df3 --- /dev/null +++ b/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/src/layouts/payment/payment-switch/payment-switch.vue b/src/layouts/payment/payment-switch/payment-switch.vue new file mode 100644 index 000000000..dabb46b63 --- /dev/null +++ b/src/layouts/payment/payment-switch/payment-switch.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue index fc43af443..a8780cbc5 100644 --- a/src/layouts/payment/payment.vue +++ b/src/layouts/payment/payment.vue @@ -21,39 +21,10 @@ scrolling="no"> -
{{ switchPaymentText }}
-
- -
-
or
-
- -
-
or
-
- -
+ From 11ec8df5daceb63ceea6d5da9a325968f21c7248 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Wed, 1 Nov 2023 14:17:20 -0400 Subject: [PATCH 02/10] Stage order info to submittedOrder on page load --- src/constants/store-actions.js | 3 +++ src/layouts/confirmation/confirmation.vue | 32 +++++++++++++---------- src/store/index.js | 22 ++++++++++++++++ 3 files changed, 43 insertions(+), 14 deletions(-) diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index 847b14477..2cfd08a8e 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -91,6 +91,9 @@ const storeActions = { SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes", SAVE_CCTOKEN: "saveCCToken", SAVE_PAYPAL_TOKEN: "savePaypalToken", + + CREATE_SUBMITTED_ORDER: "createSubmittedOrder", + RESET_SUBMITTED_ORDER: "resetSubmittedOrder", }; export { storeActions }; diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue index 505f41bf0..3cd38eafb 100644 --- a/src/layouts/confirmation/confirmation.vue +++ b/src/layouts/confirmation/confirmation.vue @@ -57,6 +57,8 @@ import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner"; import navbar from "@/fmg-components/nav-bar/nav-bar"; import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar"; //Supporting files +import baseMixin from "@/mixins/base-mixin.js"; +import { storeActions } from "@/constants/store-actions"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { AppointmentTypeStrings } from "@/constants/schedule-constants"; import { settleAllPromises } from "@/helpers/layout-helper"; @@ -70,6 +72,8 @@ import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-h export default { name: "confirmation", async beforeRouteEnter(to, from, next) { + await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER); + // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); @@ -95,7 +99,7 @@ export default { return this.getCmsContent("ScheduleConfirmationWidget", "Image"); }, CustomerPortalLoginToken() { - return store.getters.order.customerPortalLoginToken; + return store.getters.submittedOrder.customerPortalLoginToken; }, ConfirmationEmailText() { return this.getCmsContent("ConfirmationEmailWidget", "BodyText") @@ -105,16 +109,16 @@ export default { ?.replaceAll(">", ">"); }, ScheduleDate() { - return store.getters.order.schedule.date; + return store.getters.submittedOrder.schedule.date; }, AppointmentType() { - return store.getters.order.serviceLocation.appointmentType; + return store.getters.submittedOrder.serviceLocation.appointmentType; }, ScheduleStartTime() { - return store.getters.order.schedule.startTime; + return store.getters.submittedOrder.schedule.startTime; }, ScheduleEndTime() { - return store.getters.order.schedule.endTime; + return store.getters.submittedOrder.schedule.endTime; }, InShopWordingText() { return this.getCmsContent("InShopWordingWidget", "BodyText"); @@ -126,31 +130,31 @@ export default { return this.getCmsContent("DropOffWordingWidget", "BodyText"); }, ServiceLocationAddress() { - return store.getters.order.serviceLocation.address; + return store.getters.submittedOrder.serviceLocation.address; }, ServiceLocationAddress2() { - return store.getters.order.serviceLocation.address2; + return store.getters.submittedOrder.serviceLocation.address2; }, ServiceLocationCity() { - return store.getters.order.serviceLocation.city; + return store.getters.submittedOrder.serviceLocation.city; }, ServiceLocationState() { - return store.getters.order.serviceLocation.state; + return store.getters.submittedOrder.serviceLocation.state; }, ServiceLocationZipCode() { - return store.getters.order.serviceLocation.zipCode; + return store.getters.submittedOrder.serviceLocation.zipCode; }, ProviderAddress() { - return store.getters.order.serviceLocation.provider.address.streetAddress; + return store.getters.submittedOrder.serviceLocation.provider.address.streetAddress; }, ProviderCity() { - return store.getters.order.serviceLocation.provider.address.city; + return store.getters.submittedOrder.serviceLocation.provider.address.city; }, ProviderState() { - return store.getters.order.serviceLocation.provider.address.state; + return store.getters.submittedOrder.serviceLocation.provider.address.state; }, ProviderZipCode() { - return store.getters.order.serviceLocation.provider.address.zipCode; + return store.getters.submittedOrder.serviceLocation.provider.address.zipCode; }, AppointmentWordingText() { if (this.AppointmentType == AppointmentTypeStrings.MOBILE) { diff --git a/src/store/index.js b/src/store/index.js index 3b606b2f7..b48e0ab73 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -691,6 +691,8 @@ export const getters = { .filter((x) => !!x.isActive) .map((x) => x.settings) .reduce((r, c) => Object.assign(r, c), {}) ?? {}, + submittedOrder: (state) => JSON.parse(window.localStorage.getItem("submittedOrder")), + hasSubmittedOrder: (state) => window.localStorage.getItem("submittedOrder") !== null, }; function getNonFalseValuesOfPropertyInArrayOfObjects(array, propertyName) { @@ -2441,6 +2443,26 @@ export const actions = { return false; }, + + createSubmittedOrder(context) { + if (context.getters.hasSubmittedOrder) { + return; + } + + // create a submitted order object from vuex. + const submittedOrder = context.state.order; + + // set to local storage + window.localStorage.setItem("submittedOrder", JSON.stringify(submittedOrder)); + + // clear vuex + context.commit(storeMutations.RESET_STATE); + }, + + resetSubmittedOrder(context) { + // clear from local storage + window.localStorage.removeItem("submittedOrder"); + }, }; export default createStore({ From 560ad28597695da86f0f52661f78acd9b9455634 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Wed, 1 Nov 2023 14:19:24 -0400 Subject: [PATCH 03/10] Shortcut prerequisites if a submitted order is already present. --- src/layouts/confirmation/confirmation.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue index 3cd38eafb..4df26b02a 100644 --- a/src/layouts/confirmation/confirmation.vue +++ b/src/layouts/confirmation/confirmation.vue @@ -208,6 +208,10 @@ export default { }, methods: { arePagePrerequisitesValid() { + if(store.getters.hasSubmittedOrder) { + return true; + } + // Service Location const serviceLocation = store.getters.order.serviceLocation; const mobileReqs = !!( From e63f8bdcc440bc3670a51f632a3b2e95f44fabf8 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Wed, 1 Nov 2023 15:31:33 -0400 Subject: [PATCH 04/10] Formatting --- src/layouts/confirmation/confirmation.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue index 4df26b02a..51c109677 100644 --- a/src/layouts/confirmation/confirmation.vue +++ b/src/layouts/confirmation/confirmation.vue @@ -208,7 +208,7 @@ export default { }, methods: { arePagePrerequisitesValid() { - if(store.getters.hasSubmittedOrder) { + if (store.getters.hasSubmittedOrder) { return true; } From 36ab8e04ebf879d05455e675b6f7cdfca566936a Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Wed, 1 Nov 2023 15:32:00 -0400 Subject: [PATCH 05/10] Redirect to confirmation if submitted order is present --- src/router/index.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/router/index.js b/src/router/index.js index 0a1bef3a3..cec3ff193 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -55,8 +55,17 @@ const routes = [ await GoToFunnelStartOn404(next); } + // Intercept all navigation if a submitted order exists in storage + if (store.getters.hasSubmittedOrder) { + if (to.query.fmgPage !== "vehicle") { + to.query.fmgPage = "confirmation"; + } + } // On entering the funnel "fresh", read cookie information, decide what to do next. payment pages used to return from safelitehop so exclude here - if (from.redirectedFrom === undefined && !to.query.fmgPage.startsWith("payment")) { + else if ( + from.redirectedFrom === undefined && + !to.query.fmgPage.startsWith("payment") + ) { // clear the saveSessionPromise - if it exists in the vuex store but a new instance was created // the saveSessionPromise will no longer point to a valid promise baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE); From d07b57f7182d28af4e763e3cb7423b55c5d3257e Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Wed, 1 Nov 2023 15:39:48 -0400 Subject: [PATCH 06/10] Clear submitted orders on vehicle FBA --- src/layouts/vehicle/vehicle.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue index 1754a3a91..200ade920 100644 --- a/src/layouts/vehicle/vehicle.vue +++ b/src/layouts/vehicle/vehicle.vue @@ -334,6 +334,7 @@ export default { }, async forwardButtonAction() { + await this.dispatchStoreAction(storeActions.RESET_SUBMITTED_ORDER); this.dispatchStoreAction( storeActions.SAVE_VEHICLE, { From e04ce3018bcd19697168ebd32afbcab51a178b8a Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Thu, 2 Nov 2023 10:05:08 -0400 Subject: [PATCH 07/10] Change to sessionStorage --- src/store/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/store/index.js b/src/store/index.js index b48e0ab73..77ccb2ebe 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -691,8 +691,8 @@ export const getters = { .filter((x) => !!x.isActive) .map((x) => x.settings) .reduce((r, c) => Object.assign(r, c), {}) ?? {}, - submittedOrder: (state) => JSON.parse(window.localStorage.getItem("submittedOrder")), - hasSubmittedOrder: (state) => window.localStorage.getItem("submittedOrder") !== null, + submittedOrder: (state) => JSON.parse(window.sessionStorage.getItem("submittedOrder")), + hasSubmittedOrder: (state) => window.sessionStorage.getItem("submittedOrder") !== null, }; function getNonFalseValuesOfPropertyInArrayOfObjects(array, propertyName) { @@ -2453,7 +2453,7 @@ export const actions = { const submittedOrder = context.state.order; // set to local storage - window.localStorage.setItem("submittedOrder", JSON.stringify(submittedOrder)); + window.sessionStorage.setItem("submittedOrder", JSON.stringify(submittedOrder)); // clear vuex context.commit(storeMutations.RESET_STATE); @@ -2461,7 +2461,7 @@ export const actions = { resetSubmittedOrder(context) { // clear from local storage - window.localStorage.removeItem("submittedOrder"); + window.sessionStorage.removeItem("submittedOrder"); }, }; From 5d48014a83d7c32e8119b9755d57770874e37ff8 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Thu, 2 Nov 2023 11:41:49 -0400 Subject: [PATCH 08/10] Update unit tests --- src/layouts/confirmation/confirmation.spec.js | 71 +++++++++++++++---- 1 file changed, 59 insertions(+), 12 deletions(-) diff --git a/src/layouts/confirmation/confirmation.spec.js b/src/layouts/confirmation/confirmation.spec.js index 4bef5f8a3..d5e8bcc85 100644 --- a/src/layouts/confirmation/confirmation.spec.js +++ b/src/layouts/confirmation/confirmation.spec.js @@ -19,6 +19,53 @@ beforeEach(() => { jest.restoreAllMocks(); jest.clearAllMocks(); store.getters = { + submittedOrder: { + schedule: { + date: "2023-01-01", + startTime: "09:00", + endTime: "10:00", + routeCode: "000", + }, + lineItems: { + glassParts: [ + { + partNumber: "ABC123", + }, + ], + supportingItems: [], + }, + serviceLocation: { + address: "test", + address2: "123", + city: "test", + state: "AZ", + appointmentType: "Inshop", + zipCode: "12345", + zipCodeCtu: "01234", + provider: { + providerNumber: "123", + address: { + streetAddress: "test1", + city: "test", + state: "AZ", + zipCode: "12345", + zipCodeCtu: "01234", + }, + }, + }, + damage: { + isRepair: false, + }, + referralNumber: "1234567", + vehicle: { + year: "2004", + make: "Ford", + model: "F Series F250", + }, + customer: { + emailAddress: "test@test.com", + }, + }, order: { schedule: { date: "2023-01-01", @@ -127,9 +174,9 @@ describe("computed properties...", () => { }); test("ScheduleTimeFormatted should return mobile time in expected format.", () => { //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE; - store.getters.order.schedule.startTime = "09:00"; - store.getters.order.schedule.endTime = "11:00"; + store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE; + store.getters.submittedOrder.schedule.startTime = "09:00"; + store.getters.submittedOrder.schedule.endTime = "11:00"; const { wrapper } = setupMocks({}); // Act @@ -140,9 +187,9 @@ describe("computed properties...", () => { }); test("ScheduleTimeFormatted should return DROP_OFF time in expected format.", () => { //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; - store.getters.order.schedule.startTime = "09:00"; - store.getters.order.schedule.endTime = "11:00"; + store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; + store.getters.submittedOrder.schedule.startTime = "09:00"; + store.getters.submittedOrder.schedule.endTime = "11:00"; const { wrapper } = setupMocks({}); // Act @@ -153,9 +200,9 @@ describe("computed properties...", () => { }); test("ScheduleTimeFormatted should return Inshop time in expected format.", () => { //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP; - store.getters.order.schedule.startTime = "09:00"; - store.getters.order.schedule.endTime = "11:00"; + store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP; + store.getters.submittedOrder.schedule.startTime = "09:00"; + store.getters.submittedOrder.schedule.endTime = "11:00"; const { wrapper } = setupMocks({}); // Act @@ -166,7 +213,7 @@ describe("computed properties...", () => { }); test("AppointmentWordingText should return mobile text in expected format.", () => { //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE; + store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE; const { wrapper } = setupMocks({}); // Act @@ -177,7 +224,7 @@ describe("computed properties...", () => { }); test("AppointmentWordingText should return DROP_OFF text in expected format.", () => { //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; + store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; const { wrapper } = setupMocks({}); @@ -189,7 +236,7 @@ describe("computed properties...", () => { }); test("AppointmentWordingText should return IN_SHOP text in expected format.", () => { //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP; + store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP; const { wrapper } = setupMocks({}); From 676cda96f77245c35e24dd7e96ea238baf0bfd36 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Thu, 2 Nov 2023 12:00:55 -0400 Subject: [PATCH 09/10] Formatting --- src/layouts/confirmation/confirmation.spec.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/layouts/confirmation/confirmation.spec.js b/src/layouts/confirmation/confirmation.spec.js index d5e8bcc85..e0e970abd 100644 --- a/src/layouts/confirmation/confirmation.spec.js +++ b/src/layouts/confirmation/confirmation.spec.js @@ -174,7 +174,8 @@ describe("computed properties...", () => { }); test("ScheduleTimeFormatted should return mobile time in expected format.", () => { //Arrange - store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE; + store.getters.submittedOrder.serviceLocation.appointmentType = + AppointmentTypeStrings.MOBILE; store.getters.submittedOrder.schedule.startTime = "09:00"; store.getters.submittedOrder.schedule.endTime = "11:00"; const { wrapper } = setupMocks({}); @@ -187,7 +188,8 @@ describe("computed properties...", () => { }); test("ScheduleTimeFormatted should return DROP_OFF time in expected format.", () => { //Arrange - store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; + store.getters.submittedOrder.serviceLocation.appointmentType = + AppointmentTypeStrings.DROP_OFF; store.getters.submittedOrder.schedule.startTime = "09:00"; store.getters.submittedOrder.schedule.endTime = "11:00"; const { wrapper } = setupMocks({}); @@ -200,7 +202,8 @@ describe("computed properties...", () => { }); test("ScheduleTimeFormatted should return Inshop time in expected format.", () => { //Arrange - store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP; + store.getters.submittedOrder.serviceLocation.appointmentType = + AppointmentTypeStrings.IN_SHOP; store.getters.submittedOrder.schedule.startTime = "09:00"; store.getters.submittedOrder.schedule.endTime = "11:00"; const { wrapper } = setupMocks({}); @@ -213,7 +216,8 @@ describe("computed properties...", () => { }); test("AppointmentWordingText should return mobile text in expected format.", () => { //Arrange - store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE; + store.getters.submittedOrder.serviceLocation.appointmentType = + AppointmentTypeStrings.MOBILE; const { wrapper } = setupMocks({}); // Act @@ -224,7 +228,8 @@ describe("computed properties...", () => { }); test("AppointmentWordingText should return DROP_OFF text in expected format.", () => { //Arrange - store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; + store.getters.submittedOrder.serviceLocation.appointmentType = + AppointmentTypeStrings.DROP_OFF; const { wrapper } = setupMocks({}); @@ -236,7 +241,8 @@ describe("computed properties...", () => { }); test("AppointmentWordingText should return IN_SHOP text in expected format.", () => { //Arrange - store.getters.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP; + store.getters.submittedOrder.serviceLocation.appointmentType = + AppointmentTypeStrings.IN_SHOP; const { wrapper } = setupMocks({}); From 4d9c1a88de3299b751365bf34a8105a222257679 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Thu, 2 Nov 2023 14:19:57 -0400 Subject: [PATCH 10/10] CSR-1391 better looking payment buttons --- .../payment-switch-button.vue | 99 +++++++++---------- .../payment/payment-switch/payment-switch.vue | 61 ++++++++---- 2 files changed, 90 insertions(+), 70 deletions(-) diff --git a/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue b/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue index ced2c4df3..7199e27e7 100644 --- a/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue +++ b/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue @@ -1,74 +1,73 @@ - + diff --git a/src/layouts/payment/payment-switch/payment-switch.vue b/src/layouts/payment/payment-switch/payment-switch.vue index dabb46b63..5b72ffc39 100644 --- a/src/layouts/payment/payment-switch/payment-switch.vue +++ b/src/layouts/payment/payment-switch/payment-switch.vue @@ -2,24 +2,29 @@
{{ switchPaymentHeaderText }}
+ v-if="paymentType !== paymentTypes.cc" + :buttonText="paymentMethodsInfo[paymentTypes.cc]?.buttonText" + :buttonImage="paymentMethodsInfo[paymentTypes.cc]?.answerImageUrl" + :buttonImageId="paymentMethodsInfo[paymentTypes.cc]?.imageId" + @click-event="switchPaymentClick(paymentTypes.cc)" />
-
or
+
or
+ v-if="paymentType !== paymentTypes.pp" + :buttonText="paymentMethodsInfo[paymentTypes.pp]?.buttonText" + :buttonImage="paymentMethodsInfo[paymentTypes.pp]?.answerImageUrl" + :buttonImageId="paymentMethodsInfo[paymentTypes.pp]?.imageId" + @click-event="switchPaymentClick(paymentTypes.pp)" />
-
or
+
or
+ v-if="paymentType !== paymentTypes.ap" + :buttonText="paymentMethodsInfo[paymentTypes.ap]?.buttonText" + :buttonImage="paymentMethodsInfo[paymentTypes.ap]?.answerImageUrl" + :buttonImageId="paymentMethodsInfo[paymentTypes.ap]?.imageId" + @click-event="switchPaymentClick(paymentTypes.ap)" />
@@ -29,7 +34,13 @@ import paymentSwitchButton from "./payment-switch-button/payment-switch-button"; export default { name: "paymentSwitch", data() { - return {}; + return { + paymentTypes: { + cc: "cc", + pp: "pp", + ap: "ap", + }, + }; }, props: { cmsWidgetName: String, @@ -39,14 +50,24 @@ export default { switchPaymentHeaderText() { return this.getCmsContent(this.cmsWidgetName, "QuestionText"); }, - ccButtonText() { - return this.getCmsContent(this.cmsWidgetName, "QuestionText"); + paymentMethodAnswerData() { + const rawData = this.getCmsContent(this.cmsWidgetName, "Answers"); + + if (!rawData) { + return []; + } else { + return rawData; + } }, - ppButtonText() { - return this.getCmsContent(this.cmsWidgetName, "QuestionText"); - }, - apButtonText() { - return this.getCmsContent(this.cmsWidgetName, "QuestionText"); + paymentMethodsInfo() { + return this.paymentMethodAnswerData.reduce((accumulator, paymentMethod) => { + accumulator[paymentMethod.Name] = { + buttonText: paymentMethod.Text, + answerImageUrl: paymentMethod.AnswerImageUrl, + imageId: paymentMethod.ImageId, + }; + return accumulator; + }, {}); }, }, methods: {