diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js index f8cf03fa9..5a4b5d758 100644 --- a/src/constants/progress-bar-mapper.js +++ b/src/constants/progress-bar-mapper.js @@ -1,27 +1,100 @@ -const pagePercentageMapper = { - vehicle: 7, - "vehicle-damage": 7.14, - estimate: 10.71, - "service-zip": 14.28, - "vin-lookup": 14.28, - "license-plate-lookup": 14.28, - "address-lookup": 14.28, - "address-vehicles": 17.85, - "part-questions": 21.42, - "molding-questions": 21.42, - "vehicle-parts": 21.42, - "capability-questions": 21.42, - quote: 39, - "insurance-company": 52, - "service-location": 60, - schedule: 70.5, - "mobile-details": 76, - "customer-details": 84, - "payment-method": 92, - payment: 96, - confirmation: 100, +export const pageProgressMapper = { + //Combine progress bar slide percent and button steps + vehicle: { + percent: 7, + step: 1, + }, + "vehicle-damage": { + percent: 10, + step: 1, + }, + estimate: { + percent: 14, + step: 1, + }, + "service-zip": { + percent: 18, + step: 1, + }, + "vin-lookup": { + percent: 18, + step: 1, + }, + "license-plate-lookup": { + percent: 18, + step: 1, + }, + "address-lookup": { + percent: 18, + step: 1, + }, + "address-vehicles": { + percent: 25, + step: 1, + }, + "part-questions": { + percent: 30, + step: 1, + }, + "molding-questions": { + percent: 30, + step: 1, + }, + "vehicle-parts": { + percent: 30, + step: 1, + }, + "capability-questions": { + percent: 30, + step: 1, + }, + quote: { + percent: 39, //Must be 39 + step: 2, + }, + "insurance-company": { + percent: 52, + step: 2, + }, + "service-location": { + percent: 60, + step: 2, + }, + schedule: { + percent: 70.5, //Must be 70.5 + step: 3, + }, + "mobile-details": { + percent: 76, + step: 3, + }, + "customer-details": { + percent: 84, + step: 3, + }, + "payment-method": { + percent: 92, //Must be 92 + step: 3, + }, + payment: { + percent: 96, + step: 4, + }, + confirmation: { + percent: 100, + step: 4, + }, }; export const getProgressBarPercentage = (page) => { - return pagePercentageMapper[page] || 0; + return pageProgressMapper[page]?.percent || 0; +}; + +export const getProgressBarStep = (page) => { + return pageProgressMapper[page]?.step || 1; +}; + +export const getTotalSteps = () => { + // Find the highest step value + return Math.max(...Object.values(pageProgressMapper).map((v) => v.step)); }; diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue index a2ee0b3c1..bb55e61ec 100644 --- a/src/digital-components/dropdown-question/dropdown-question.vue +++ b/src/digital-components/dropdown-question/dropdown-question.vue @@ -152,6 +152,7 @@ export default { border: 1px solid $gray-500; border-radius: 0.5rem; min-height: 3rem; + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); @include media-breakpoint-up(md) { min-height: 3.5rem; } diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index 3544a19d8..1374e2fd2 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -335,6 +335,7 @@ export default { border-radius: 0.5rem; min-height: 3rem; padding: 0.75rem 1rem; + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); @include media-breakpoint-up(md) { padding: 1rem; min-height: 3.5rem; diff --git a/src/fmg-components/funnel-footer/funnel-footer.vue b/src/fmg-components/funnel-footer/funnel-footer.vue index 9f205597b..a195c446b 100644 --- a/src/fmg-components/funnel-footer/funnel-footer.vue +++ b/src/fmg-components/funnel-footer/funnel-footer.vue @@ -76,12 +76,16 @@ export default { :deep(a) { text-decoration: none; &.new-window-link { + font-family: Urbanist, Arial, Helvetica, sans-serif; margin: 0 0.75rem; color: $gray-600; + font-weight: 400; } &.navigation-link { + font-family: Urbanist, Arial, Helvetica, sans-serif; margin: 0 0.75rem; color: $gray-600; + font-weight: 400; } } diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue index a608a1040..bad77ede5 100644 --- a/src/fmg-components/funnel-header/funnel-header.vue +++ b/src/fmg-components/funnel-header/funnel-header.vue @@ -5,7 +5,9 @@
{{ subText }}
diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index d5d25dc25..fca4b91f3 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -8,18 +8,6 @@