From 44b878e87cadbd24a8c9ab4046d14dd84991870d Mon Sep 17 00:00:00 2001
From: Chris Redelinghuys <chris.redelinghuys@safelite.com>
Date: Mon, 21 Apr 2025 12:53:11 -0400
Subject: [PATCH 1/3] CASH-187: Progress bar

---
 src/constants/progress-bar-mapper.js          | 26 ++++++
 .../funnel-header/funnel-header.vue           |  3 +
 .../progress-bar/progres-bar.spec.js          | 84 +++++++++++++++++++
 .../progress-bar/progress-bar.vue             | 60 +++++++++++++
 src/layouts/quote/quote.vue                   |  2 +-
 5 files changed, 174 insertions(+), 1 deletion(-)
 create mode 100644 src/constants/progress-bar-mapper.js
 create mode 100644 src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
 create mode 100644 src/fmg-components/funnel-header/progress-bar/progress-bar.vue

diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
new file mode 100644
index 000000000..e219f1a10
--- /dev/null
+++ b/src/constants/progress-bar-mapper.js
@@ -0,0 +1,26 @@
+const pagePercentageMapper = {
+    'vehicle': 4,
+    'vehicle-damage': 16,
+    'estimate': 28,
+    'service-zip': 32,
+    'vin-lookup': 32,
+    'license-plate-lookup': 32,
+    'address-lookup': 32,
+    'address-vehicles': 36,
+    'part-questions': 40,
+    'molding-questions': 40,
+    'vehicle-parts': 40,
+    'capability-questions': 40,
+    'quote': 48,
+    'insurance-company': 52,
+    'service-location': 60,
+    'schedule': 72,
+    'customer-details': 84,
+    'payment-method': 92,
+    'payment': 96,
+    'confirmation': 100,
+}
+
+export const getProgressBarPercentage = (page) => {
+    return pagePercentageMapper[page] || 0;
+}
\ No newline at end of file
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index c6cbb8727..092224551 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -6,6 +6,7 @@
         <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
         <menuModal />
         <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
+        <progressBar />
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
         <transition name="fade" mode="out-in">
@@ -26,6 +27,7 @@ import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
 import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
+import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
 
 // Constants
 const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
@@ -62,6 +64,7 @@ export default {
     components: {
         alert,
         menuModal,
+        progressBar,
     },
     mounted() {
         // Check if alert event is on the bus
diff --git a/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js b/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
new file mode 100644
index 000000000..3d6179f55
--- /dev/null
+++ b/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
@@ -0,0 +1,84 @@
+import { shallowMount } from "@vue/test-utils";
+import progressBar from "./progress-bar";
+import store from "@/store";
+
+describe("progressBar", () => {
+    test("progress should be 0", () => {
+        // Arrange
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert        
+        expect(wrapper.vm.progress).toBe(0);
+        wrapper.unmount();
+    });
+});
+
+describe("progressBar", () => {
+    test("progress should be 4%", () => {
+        // Arrange
+        store.getters = {
+            applicationUser: {
+                lastPageVisited: "vehicle",
+            },
+        };
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.progress).toBe(4);
+        wrapper.unmount();
+    });
+});
+
+describe("progressBar", () => {
+    test("progress should be 48%", () => {
+        // Arrange
+        store.getters = {
+            applicationUser: {
+                lastPageVisited: "quote",
+            },
+        };
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.progress).toBe(48);
+        wrapper.unmount();
+    });
+});
+
+describe("progressBar", () => {
+    test("progress should be 100%", () => {
+        // Arrange
+        store.getters = {
+            applicationUser: {
+                lastPageVisited: "confirmation",
+            },
+        };
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.progress).toBe(100);
+        wrapper.unmount();
+    });
+});
+
+const mockMixin = {
+    methods: {
+        getProgress: jest.fn(),
+    },
+};
\ No newline at end of file
diff --git a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
new file mode 100644
index 000000000..1d696d029
--- /dev/null
+++ b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
@@ -0,0 +1,60 @@
+<template>
+    <div id="progress-bar-container">
+        <progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%' " />
+    </div>
+</template>
+
+<script>
+import store from "@/store";
+import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
+
+export default {
+    name: "progressBar",
+    data() {
+        return {
+            progress: this.getProgress(),
+        };
+    },
+    methods: {
+        getProgress() {
+            var pageName = store.getters.applicationUser.lastPageVisited;
+            return getProgressBarPercentage(pageName);
+        },
+    },
+};
+</script>
+<style lang="scss">
+    #progress-bar-container {
+        padding: .75rem 0;
+        width: 100%;
+
+        progress {
+            height: 10px;
+            width:100%;
+
+            /* Firefox */
+            appearance: none;
+            background-color: $blue-100;
+            border: 0;
+            border-radius: $border-radius-pill;
+            box-shadow: $box-shadow-inset;
+
+            &::-moz-progress-bar {
+                background-color: $blue;
+                border-radius: $border-radius-pill;                
+            }
+
+            /* Webkit */
+            -webkit-appearance: none;
+            &::-webkit-progress-bar {
+                background-color: $blue-100;
+                border-radius: $border-radius-pill;
+                box-shadow: $box-shadow-inset;
+            }
+            &::-webkit-progress-value {
+                background-color: $blue;
+                border-radius: $border-radius-pill; 
+            }            
+        }
+    }
+</style>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 6ef3d4749..4a20b4dbc 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -891,7 +891,7 @@ export default {
 
     &.funnel-header-wrapper,
     &.save-progress-popup {
-        display: block;
+        display: flex;
     }
 }
 

From 8faec8912430d34e5ed4f4d2fa37fc57b66acf8d Mon Sep 17 00:00:00 2001
From: Chris Redelinghuys <chris.redelinghuys@safelite.com>
Date: Mon, 21 Apr 2025 13:02:07 -0400
Subject: [PATCH 2/3] CASH-187: Prettier

---
 src/constants/progress-bar-mapper.js          | 44 ++++++++--------
 .../progress-bar/progres-bar.spec.js          |  4 +-
 .../progress-bar/progress-bar.vue             | 52 +++++++++----------
 3 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
index e219f1a10..c739bf3d7 100644
--- a/src/constants/progress-bar-mapper.js
+++ b/src/constants/progress-bar-mapper.js
@@ -1,26 +1,26 @@
 const pagePercentageMapper = {
-    'vehicle': 4,
-    'vehicle-damage': 16,
-    'estimate': 28,
-    'service-zip': 32,
-    'vin-lookup': 32,
-    'license-plate-lookup': 32,
-    'address-lookup': 32,
-    'address-vehicles': 36,
-    'part-questions': 40,
-    'molding-questions': 40,
-    'vehicle-parts': 40,
-    'capability-questions': 40,
-    'quote': 48,
-    'insurance-company': 52,
-    'service-location': 60,
-    'schedule': 72,
-    'customer-details': 84,
-    'payment-method': 92,
-    'payment': 96,
-    'confirmation': 100,
-}
+    "vehicle": 4,
+    "vehicle-damage": 16,
+    "estimate": 28,
+    "service-zip": 32,
+    "vin-lookup": 32,
+    "license-plate-lookup": 32,
+    "address-lookup": 32,
+    "address-vehicles": 36,
+    "part-questions": 40,
+    "molding-questions": 40,
+    "vehicle-parts": 40,
+    "capability-questions": 40,
+    "quote": 48,
+    "insurance-company": 52,
+    "service-location": 60,
+    "schedule": 72,
+    "customer-details": 84,
+    "payment-method": 92,
+    "payment": 96,
+    "confirmation": 100,
+};
 
 export const getProgressBarPercentage = (page) => {
     return pagePercentageMapper[page] || 0;
-}
\ No newline at end of file
+};
diff --git a/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js b/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
index 3d6179f55..92e6e15a5 100644
--- a/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
+++ b/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
@@ -11,7 +11,7 @@ describe("progressBar", () => {
             mixins: [mockMixin],
         });
 
-        // Assert        
+        // Assert
         expect(wrapper.vm.progress).toBe(0);
         wrapper.unmount();
     });
@@ -81,4 +81,4 @@ const mockMixin = {
     methods: {
         getProgress: jest.fn(),
     },
-};
\ No newline at end of file
+};
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 1d696d029..c8d880dab 100644
--- a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
+++ b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="progress-bar-container">
-        <progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%' " />
+        <progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%'" />
     </div>
 </template>
 
@@ -24,37 +24,37 @@ export default {
 };
 </script>
 <style lang="scss">
-    #progress-bar-container {
-        padding: .75rem 0;
+#progress-bar-container {
+    padding: 0.75rem 0;
+    width: 100%;
+
+    progress {
+        height: 10px;
         width: 100%;
 
-        progress {
-            height: 10px;
-            width:100%;
+        /* Firefox */
+        appearance: none;
+        background-color: $blue-100;
+        border: 0;
+        border-radius: $border-radius-pill;
+        box-shadow: $box-shadow-inset;
 
-            /* Firefox */
-            appearance: none;
+        &::-moz-progress-bar {
+            background-color: $blue;
+            border-radius: $border-radius-pill;
+        }
+
+        /* Webkit */
+        -webkit-appearance: none;
+        &::-webkit-progress-bar {
             background-color: $blue-100;
-            border: 0;
             border-radius: $border-radius-pill;
             box-shadow: $box-shadow-inset;
-
-            &::-moz-progress-bar {
-                background-color: $blue;
-                border-radius: $border-radius-pill;                
-            }
-
-            /* Webkit */
-            -webkit-appearance: none;
-            &::-webkit-progress-bar {
-                background-color: $blue-100;
-                border-radius: $border-radius-pill;
-                box-shadow: $box-shadow-inset;
-            }
-            &::-webkit-progress-value {
-                background-color: $blue;
-                border-radius: $border-radius-pill; 
-            }            
+        }
+        &::-webkit-progress-value {
+            background-color: $blue;
+            border-radius: $border-radius-pill;
         }
     }
+}
 </style>

From baf7e721ec289144fd6335373a2d3b3940ac0c63 Mon Sep 17 00:00:00 2001
From: Chris Redelinghuys <chris.redelinghuys@safelite.com>
Date: Mon, 21 Apr 2025 13:27:19 -0400
Subject: [PATCH 3/3] CASH-187: More Prettier

---
 src/constants/progress-bar-mapper.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
index c739bf3d7..98ae07992 100644
--- a/src/constants/progress-bar-mapper.js
+++ b/src/constants/progress-bar-mapper.js
@@ -1,7 +1,7 @@
 const pagePercentageMapper = {
-    "vehicle": 4,
+    vehicle: 4,
     "vehicle-damage": 16,
-    "estimate": 28,
+    estimate: 28,
     "service-zip": 32,
     "vin-lookup": 32,
     "license-plate-lookup": 32,
@@ -11,14 +11,14 @@ const pagePercentageMapper = {
     "molding-questions": 40,
     "vehicle-parts": 40,
     "capability-questions": 40,
-    "quote": 48,
+    quote: 48,
     "insurance-company": 52,
     "service-location": 60,
-    "schedule": 72,
+    schedule: 72,
     "customer-details": 84,
     "payment-method": 92,
-    "payment": 96,
-    "confirmation": 100,
+    payment: 96,
+    confirmation: 100,
 };
 
 export const getProgressBarPercentage = (page) => {