From 213090b863a93ea6f526d2aa5f425e0e0b969165 Mon Sep 17 00:00:00 2001 From: FrankRua Date: Wed, 23 Feb 2022 15:55:30 -0500 Subject: [PATCH] alert added --- .../button-question/button-question.vue | 253 +++++++++--------- .../part-question/part-question.vue | 4 +- src/layouts/vehicle-parts/vehicle-parts.vue | 173 ++++++------ src/store/index.js | 11 +- src/styles/common-styles.scss | 4 +- src/ux-components/radio/radio.vue | 2 +- 6 files changed, 238 insertions(+), 209 deletions(-) diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 3ea8fd52e..946c6e4dd 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -1,158 +1,153 @@ diff --git a/src/layouts/vehicle-parts/part-question/part-question.vue b/src/layouts/vehicle-parts/part-question/part-question.vue index 121d358e8..574139727 100644 --- a/src/layouts/vehicle-parts/part-question/part-question.vue +++ b/src/layouts/vehicle-parts/part-question/part-question.vue @@ -8,7 +8,7 @@
- + {{ selectedTint }} + {{ glassParts }} +
+
+
+ +
+
+

-
@@ -20,6 +27,7 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header"; import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; +import alert from "@/ux-components/alert/alert"; // Supporting Files import { @@ -29,6 +37,7 @@ import { settleAllPromises } from "@/helpers/layout-helper"; + export default { name: "vehicle-parts", async beforeRouteEnter(to, from, next) { @@ -38,8 +47,8 @@ export default { // Settle promises and get results const promiseResultMap = [{ resultKey: "cmsContent", - promise: cmsContentPromise - }]; + promise: cmsContentPromise, + }, ]; const resultMap = await settleAllPromises(promiseResultMap); @@ -61,16 +70,27 @@ export default { // Part Question dynamic component Object.keys(vm.$refs) .filter((r) => r.includes(vm.refPrefix) && vm.$refs[r][0] !== undefined) - .forEach((c) => vm.$refs[c][0].initializeComponent({ - ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget, - FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget - })); + .forEach((c) => + vm.$refs[c][0].initializeComponent({ + ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget, + FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget, + }) + ); + + // Set alertData for the page alert. These use props so we don't call + // initializeComponent here. + vm.alertWidgetData = { + copy: resultMap.cmsContent.AlertWidget.BodyText, + headline: resultMap.cmsContent.AlertWidget.HeadlineText + }; + }); }, data() { return { glassParts: {}, refPrefix: "partQuestion", + alertWidgetData: Object, }; }, components: { @@ -79,82 +99,85 @@ export default { vehicleBanner, funnelSubHeader, funnelFooter, + alert, }, computed: { Parts() { return [{ - glassLocation: "Rear", - glassName: "Stationary", - colorAnswers: [{ - ColorAnswerText: "Green Tint", - FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 1 hole", - PartNumber: "test-backglass-green-tint-1-hole", - }, ], - }, - { - ColorAnswerText: "Green Tint", - FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 2 hole", - PartNumber: "test-backglass-green-tint-2-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 3 hole", - PartNumber: "test-backglass-gray-tint-privacy-3-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 4 hole", - PartNumber: "test-backglass-blue-tint-4-hole", - }, ], - }, - ], - }, - { - glassLocation: "Windshield", - glassName: "Single", - colorAnswers: [{ - ColorAnswerText: "Blue Tint", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield - heated glass, solar, 1 hole", - PartNumber: "test-windshield-blue-tint-1-hole", - }, ], - }, - { - ColorAnswerText: "Blue Tint", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield -heated glass, solar, 2 hole", - PartNumber: "test-blue-tint-windshield-2-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield -heated glass, solar, 3 hole", - PartNumber: "test-gray-tint-privacy-windshield-3-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield -heated glass, solar, 4 hole", - PartNumber: "test-brown-tint-windshield-4-hole", - }, ], - }, - ], - }, - ] - } + glassLocation: "Rear", + glassName: "Stationary", + colorAnswers: [{ + ColorAnswerText: "Green Tint", + FeatureAnswers: [{ + FeatureAnswerText: "Backglass - heated glass, solar, 1 hole", + PartNumber: "test-backglass-green-tint-1-hole", + }, ], + }, + { + ColorAnswerText: "Green Tint", + FeatureAnswers: [{ + FeatureAnswerText: "Backglass - heated glass, solar, 2 hole", + PartNumber: "test-backglass-green-tint-2-hole", + }, ], + }, + { + ColorAnswerText: "Gray Tint Privacy", + FeatureAnswers: [{ + FeatureAnswerText: "Backglass - heated glass, solar, 3 hole", + PartNumber: "test-backglass-gray-tint-privacy-3-hole", + }, ], + }, + { + ColorAnswerText: "Gray Tint Privacy", + FeatureAnswers: [{ + FeatureAnswerText: "Backglass - heated glass, solar, 4 hole", + PartNumber: "test-backglass-blue-tint-4-hole", + }, ], + }, + ], + }, + { + glassLocation: "Windshield", + glassName: "Single", + colorAnswers: [{ + ColorAnswerText: "Blue Tint", + FeatureAnswers: [{ + FeatureAnswerText: "Windshield - heated glass, solar, 1 hole", + PartNumber: "test-windshield-blue-tint-1-hole", + }, ], + }, + { + ColorAnswerText: "Blue Tint", + FeatureAnswers: [{ + FeatureAnswerText: "Windshield -heated glass, solar, 2 hole", + PartNumber: "test-blue-tint-windshield-2-hole", + }, ], + }, + { + ColorAnswerText: "Gray Tint Privacy", + FeatureAnswers: [{ + FeatureAnswerText: "Windshield -heated glass, solar, 3 hole", + PartNumber: "test-gray-tint-privacy-windshield-3-hole", + }, ], + }, + { + ColorAnswerText: "Gray Tint Privacy", + FeatureAnswers: [{ + FeatureAnswerText: "Windshield -heated glass, solar, 4 hole", + PartNumber: "test-brown-tint-windshield-4-hole", + }, ], + }, + ], + }, + ]; + }, }, methods: { arePagePrerequisitesValid() { + // return store.getters.damage.isRepair !== null; + return true; - }, + } }, }; diff --git a/src/store/index.js b/src/store/index.js index 7e114cce4..7feea102d 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -25,6 +25,11 @@ export const state = { numberOfChips: null, glassToReplace: null, }, + lineItems:{ + glassParts: null, + childParts: null, + otherParts: null + } }, applicationUser: { eventBus: [], @@ -102,7 +107,9 @@ export const mutations = { }, resetPartsAndDependencies(state) { - + state.glassParts = null; + state.childParts = null; + state.otherParts = null; } } @@ -118,6 +125,8 @@ export const getters = { return matchedEvent !== undefined ? matchedEvent.eventValue : undefined; }, eventBus: (state) => state.applicationUser.eventBus, + damage: (state) => state.order.damage, + lineItems: (state) => state.order.lineItems } // Export Actions diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss index ae409dd36..47ea0815d 100644 --- a/src/styles/common-styles.scss +++ b/src/styles/common-styles.scss @@ -3,7 +3,6 @@ body { font-size: 16px; background-color: #fff; - .container-fluid { max-width: 576px; //Remove once desktop app is complete &.container-shadow { @@ -14,6 +13,9 @@ body { display: flex; flex-direction: column; } + .prevent-squish{ + overflow-x: unset; + } } .pointer { cursor: pointer; diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue index d7620df94..46c3b7c76 100644 --- a/src/ux-components/radio/radio.vue +++ b/src/ux-components/radio/radio.vue @@ -63,7 +63,7 @@ export default { }; this.$emit("isCheckedChanged", emitEvent); - this.$emit("update:modelValue", emitEvent); + //this.$emit("update:modelValue", emitEvent); } }, },