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 @@
diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue index cf3af433e..8053daec4 100644 --- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue +++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue @@ -7,7 +7,7 @@ @click="toggleModal" aria-label="Hamburger Menu (modal window)"> Close - Step {{ currentStepNumber }} of 4 + Step {{ currentStepNumber }} of 4
@@ -39,10 +39,26 @@
-
Step 1 of 4
Vehicle
-
Step 2 of 4
Quote
-
Step 3 of 4
Schedule
-
Step 4 of 4
Review
+
+ Step 1 of 4 +
+ Vehicle +
+
+ Step 2 of 4 +
+ Quote +
+
+ Step 3 of 4 +
+ Schedule +
+
+ Step 4 of 4 +
+ Review +
@@ -53,6 +69,7 @@ @@ -129,7 +125,7 @@ export default { width: auto; height: auto; border-radius: 1.5rem; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); background-color: $white; position: relative; display: flex; @@ -198,7 +194,7 @@ export default { &.show .modal-dialog { transform: translateX(0); } - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.5); height: calc(100% - 68px); top: 68px; border-top: 1px solid $gray-300; @@ -242,7 +238,7 @@ export default { border: 1px solid $gray; left: 1px; } - .dot1 { + .dot1 { top: 1px; } .dot2 { @@ -256,7 +252,7 @@ export default { } } .step-number { - font-size: .75rem; + font-size: 0.75rem; } .step-name { font-size: 1.25rem; diff --git a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue index c5f01fad7..0f6a0bdc7 100644 --- a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue +++ b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue @@ -63,7 +63,7 @@ export default { }, barClass() { return this.vertical ? "progress-bar-outer-vertical" : "progress-bar-outer"; - } + }, }, }; diff --git a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue index 88d38d3a8..2c117256b 100644 --- a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue +++ b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue @@ -11,7 +11,9 @@ @click-event="clickEvent" /> -
+

{{ 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 @@

-
-
- -
-
@@ -50,7 +38,6 @@