From 3c3d8f59f11d22689b62816d91cfdaf5422af44d Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 20 May 2025 15:44:36 -0400
Subject: [PATCH 1/3] CASH-704 animated progress bar and updated  stupid unit
 tests.

---
 .../funnel-header/funnel-header.vue           |   2 +-
 .../progress-bar/progres-bar.spec.js          | 121 ++++++++----------
 .../progress-bar/progress-bar.vue             |  65 ++++++++--
 .../customer-details/customer-details.spec.js |  39 +-----
 .../customer-details/customer-details.vue     |   2 +-
 5 files changed, 115 insertions(+), 114 deletions(-)

diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index bb4ea77f8..ecd806ef4 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -19,7 +19,7 @@
             </div>
         </div>
         <div class="d-flex w-100">
-            <progressBar />
+            <progress-bar :page="$route.name" />
         </div>
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
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 9970b266c..3daca46bd 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
@@ -1,78 +1,65 @@
-import { shallowMount } from "@vue/test-utils";
-import progressBar from "./progress-bar";
-import store from "@/store";
+import { mount } from '@vue/test-utils'
+import ProgressBar from './progress-bar.vue'
 
-describe("progressBar", () => {
-    test("progress should be 0", () => {
-        // Arrange
-        mockMixin.computed = {
-            pageName: () => undefined,
-        };
+jest.mock('@/constants/progress-bar-mapper', () => ({
+    getProgressBarPercentage: jest.fn()
+}))
 
-        // Act
-        const wrapper = shallowMount(progressBar, {
-            mixins: [mockMixin],
-        });
+import { getProgressBarPercentage } from '@/constants/progress-bar-mapper'
 
-        // Assert
-        expect(wrapper.vm.progress).toBe(0);
-        wrapper.unmount();
-    });
-});
+describe('progress-bar.vue', () => {
+    beforeEach(() => {
+        jest.useFakeTimers()
+        getProgressBarPercentage.mockReset()
+    })
 
-describe("progressBar", () => {
-    test("progress should be 4%", () => {
-        // Arrange
-        mockMixin.computed = {
-            pageName: () => "vehicle",
-        };
+    afterEach(() => {
+        jest.clearAllTimers()
+        jest.useRealTimers()
+    })
 
-        // Act
-        const wrapper = shallowMount(progressBar, {
-            mixins: [mockMixin],
-        });
+    it('renders with correct initial progress', async () => {
+        getProgressBarPercentage.mockReturnValueOnce(30)
+        const wrapper = mount(ProgressBar, {
+            props: { page: 'page1' }
+        })
+        // Immediately after mount, width should be lastProgress (0)
+        expect(wrapper.find('.progress-bar-inner').attributes('style')).toContain('width: 0%')
+        // Advance timer to trigger animation
+        jest.runAllTimers()
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('.progress-bar-inner').attributes('style')).toContain('width: 30%')
+    })
 
-        // Assert
-        expect(wrapper.vm.progress).toBe(4);
-        wrapper.unmount();
-    });
-});
+    it('animates to new progress when page prop changes', async () => {
+        getProgressBarPercentage.mockReturnValueOnce(30)
+        const wrapper = mount(ProgressBar, {
+            props: { page: 'page1' }
+        })
+        jest.runAllTimers()
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('.progress-bar-inner').attributes('style')).toContain('width: 30%')
 
-describe("progressBar", () => {
-    test("progress should be 48%", () => {
-        // Arrange
-        mockMixin.computed = {
-            pageName: () => "quote",
-        };
+        getProgressBarPercentage.mockReturnValueOnce(60)
+        await wrapper.setProps({ page: 'page2' })
+        // Before timer, still old value
+        expect(wrapper.find('.progress-bar-inner').attributes('style')).toContain('width: 30%')
+        jest.runAllTimers()
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('.progress-bar-inner').attributes('style')).toContain('width: 60%')
+    })
 
-        // Act
-        const wrapper = shallowMount(progressBar, {
-            mixins: [mockMixin],
-        });
-
-        // Assert
-        expect(wrapper.vm.progress).toBe(48);
-        wrapper.unmount();
-    });
-});
-
-describe("progressBar", () => {
-    test("progress should be 100%", () => {
-        // Arrange
-        mockMixin.computed = {
-            pageName: () => "confirmation",
-        };
-
-        // Act
-        const wrapper = shallowMount(progressBar, {
-            mixins: [mockMixin],
-        });
-
-        // Assert
-        expect(wrapper.vm.progress).toBe(100);
-        wrapper.unmount();
-    });
-});
+    it('clears timeout on unmount', async () => {
+        getProgressBarPercentage.mockReturnValueOnce(50)
+        const wrapper = mount(ProgressBar, {
+            props: { page: 'page1' }
+        })
+        const clearTimeoutSpy = jest.spyOn(window, 'clearTimeout')
+        wrapper.unmount()
+        expect(clearTimeoutSpy).toHaveBeenCalled()
+        clearTimeoutSpy.mockRestore()
+    })
+})
 
 const mockMixin = {
     methods: {
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 ebce6e0de..f8b654e7f 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 + '%'" />
+    <div class="progress-bar-outer">
+        <div class="progress-bar-inner" :style="progressStyle"></div>
     </div>
 </template>
 
@@ -8,20 +8,69 @@
 import store from "@/store";
 import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
 
+// Module-level variable to persist progress across component lifecycles
+let lastProgress = 0;
+
 export default {
-    name: "progressBar",
-    data() {},
+    name: "progress-bar",
+    props: {
+        page: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            displayedProgress: lastProgress,
+            timeoutId: null,
+        };
+    },
+    watch: {
+        page: {
+            immediate: true,
+            handler(newPage) {
+                const target = getProgressBarPercentage(newPage);
+                if (this.timeoutId) clearTimeout(this.timeoutId);
+
+                // Animate from current value to new value
+                this.timeoutId = setTimeout(() => {
+                    this.displayedProgress = target;
+                    lastProgress = target; // Update the module-level variable
+                }, 150);
+            },
+        },
+    },
+    beforeUnmount() {
+        if (this.timeoutId) clearTimeout(this.timeoutId);
+    },
     computed: {
-        progress() {
-            return getProgressBarPercentage(this.pageName);
+        progressStyle() {
+            return {
+                width: this.displayedProgress + "%",
+            };
         },
     },
 };
 </script>
 <style lang="scss">
-#progress-bar-container {
-    padding-top: 0.75rem;
+.progress-bar-outer {
+    background: $blue-100;
+    height: 10px;
+    position: relative;
+    border-radius: 10px;
     width: 100%;
+    margin-top: 1rem;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+    .progress-bar-inner {
+        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
+        will-change: width;
+        height: 10px;
+        background-color: $blue;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: 10px;
+    }
 
     progress {
         height: 10px;
diff --git a/src/layouts/customer-details/customer-details.spec.js b/src/layouts/customer-details/customer-details.spec.js
index f5dcc5c67..c2cae147d 100644
--- a/src/layouts/customer-details/customer-details.spec.js
+++ b/src/layouts/customer-details/customer-details.spec.js
@@ -1,13 +1,5 @@
 import { shallowMount, mount } from "@vue/test-utils";
 import CustomerDetails from "./customer-details.vue";
-import TechNotes from "./tech-notes/tech-notes.vue";
-import TextboxQuestion from "@/digital-components/textbox-question/textbox-question.vue";
-import PhoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question.vue";
-import CheckboxQuestion from "@/digital-components/checkbox-question/checkbox-question.vue";
-import TextBlock from "@/digital-components/text-block/text-block.vue";
-import FunnelHeader from "@/fmg-components/funnel-header/funnel-header.vue";
-import FunnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header.vue";
-import Navbar from "@/fmg-components/nav-bar/nav-bar.vue";
 
 const mockMixin = {
     methods: {
@@ -27,18 +19,8 @@ describe("CustomerDetails.vue", () => {
     let wrapper;
 
     beforeEach(() => {
-        wrapper = mount(CustomerDetails, {
+        wrapper = shallowMount(CustomerDetails, {
             global: {
-                components: {
-                    TechNotes,
-                    TextboxQuestion,
-                    PhoneNumberQuestion,
-                    CheckboxQuestion,
-                    TextBlock,
-                    FunnelHeader,
-                    FunnelSubHeader,
-                    Navbar,
-                },
                 mixins: [mockMixin],
                 mocks: {
                     storeActions: mockStoreActions,
@@ -60,21 +42,4 @@ describe("CustomerDetails.vue", () => {
     it("Should render the CustomerDetails component", () => {
         expect(wrapper.exists()).toBe(true);
     });
-
-    it("Should render all child components", () => {
-        expect(wrapper.findComponent(TechNotes).exists()).toBe(true);
-        expect(wrapper.findComponent(TextboxQuestion).exists()).toBe(true);
-        expect(wrapper.findComponent(PhoneNumberQuestion).exists()).toBe(true);
-        expect(wrapper.findComponent(CheckboxQuestion).exists()).toBe(true);
-        expect(wrapper.findComponent(TextBlock).exists()).toBe(true);
-        expect(wrapper.findComponent(FunnelHeader).exists()).toBe(true);
-        expect(wrapper.findComponent(FunnelSubHeader).exists()).toBe(true);
-        expect(wrapper.findComponent(Navbar).exists()).toBe(true);
-    });
-
-    it("Should pass the correct props to TechNotes", () => {
-        const techNotes = wrapper.findComponent(TechNotes);
-        expect(techNotes.props("modelValue")).toBe("Initial Tech Notes");
-        expect(techNotes.props("textAreaLabelCopy")).toBe("Mocked CMS Content");
-    });
-});
+});
\ No newline at end of file
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 8cb17673b..8afcd8428 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -103,7 +103,7 @@ export default {
     name: "customer-details",
     async beforeRouteEnter(to, from, next) {
         // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.name);
+        const cmsContentPromise = fetchCmsContentForPage(to.namezzz);
 
         // Settle promises and get results
         const promiseResultMap = [

From 7dc04377fe676dba89e5f1d6f69bcfae0cbd3be6 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 20 May 2025 15:49:33 -0400
Subject: [PATCH 2/3] Rename unit test, format code.

---
 .../progress-bar/progres-bar.spec.js          | 68 -------------------
 .../progress-bar/progress-bar.spec.js         | 68 +++++++++++++++++++
 .../customer-details/customer-details.spec.js |  2 +-
 3 files changed, 69 insertions(+), 69 deletions(-)
 delete 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.spec.js

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
deleted file mode 100644
index 3daca46bd..000000000
--- a/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { mount } from '@vue/test-utils'
-import ProgressBar from './progress-bar.vue'
-
-jest.mock('@/constants/progress-bar-mapper', () => ({
-    getProgressBarPercentage: jest.fn()
-}))
-
-import { getProgressBarPercentage } from '@/constants/progress-bar-mapper'
-
-describe('progress-bar.vue', () => {
-    beforeEach(() => {
-        jest.useFakeTimers()
-        getProgressBarPercentage.mockReset()
-    })
-
-    afterEach(() => {
-        jest.clearAllTimers()
-        jest.useRealTimers()
-    })
-
-    it('renders with correct initial progress', async () => {
-        getProgressBarPercentage.mockReturnValueOnce(30)
-        const wrapper = mount(ProgressBar, {
-            props: { page: 'page1' }
-        })
-        // Immediately after mount, width should be lastProgress (0)
-        expect(wrapper.find('.progress-bar-inner').attributes('style')).toContain('width: 0%')
-        // Advance timer to trigger animation
-        jest.runAllTimers()
-        await wrapper.vm.$nextTick()
-        expect(wrapper.find('.progress-bar-inner').attributes('style')).toContain('width: 30%')
-    })
-
-    it('animates to new progress when page prop changes', async () => {
-        getProgressBarPercentage.mockReturnValueOnce(30)
-        const wrapper = mount(ProgressBar, {
-            props: { page: 'page1' }
-        })
-        jest.runAllTimers()
-        await wrapper.vm.$nextTick()
-        expect(wrapper.find('.progress-bar-inner').attributes('style')).toContain('width: 30%')
-
-        getProgressBarPercentage.mockReturnValueOnce(60)
-        await wrapper.setProps({ page: 'page2' })
-        // Before timer, still old value
-        expect(wrapper.find('.progress-bar-inner').attributes('style')).toContain('width: 30%')
-        jest.runAllTimers()
-        await wrapper.vm.$nextTick()
-        expect(wrapper.find('.progress-bar-inner').attributes('style')).toContain('width: 60%')
-    })
-
-    it('clears timeout on unmount', async () => {
-        getProgressBarPercentage.mockReturnValueOnce(50)
-        const wrapper = mount(ProgressBar, {
-            props: { page: 'page1' }
-        })
-        const clearTimeoutSpy = jest.spyOn(window, 'clearTimeout')
-        wrapper.unmount()
-        expect(clearTimeoutSpy).toHaveBeenCalled()
-        clearTimeoutSpy.mockRestore()
-    })
-})
-
-const mockMixin = {
-    methods: {
-        getProgress: jest.fn(),
-    },
-};
diff --git a/src/fmg-components/funnel-header/progress-bar/progress-bar.spec.js b/src/fmg-components/funnel-header/progress-bar/progress-bar.spec.js
new file mode 100644
index 000000000..22c24ed4a
--- /dev/null
+++ b/src/fmg-components/funnel-header/progress-bar/progress-bar.spec.js
@@ -0,0 +1,68 @@
+import { mount } from "@vue/test-utils";
+import ProgressBar from "./progress-bar.vue";
+
+jest.mock("@/constants/progress-bar-mapper", () => ({
+    getProgressBarPercentage: jest.fn(),
+}));
+
+import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
+
+describe("progress-bar.vue", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+        getProgressBarPercentage.mockReset();
+    });
+
+    afterEach(() => {
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+
+    it("renders with correct initial progress", async () => {
+        getProgressBarPercentage.mockReturnValueOnce(30);
+        const wrapper = mount(ProgressBar, {
+            props: { page: "page1" },
+        });
+        // Immediately after mount, width should be lastProgress (0)
+        expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 0%");
+        // Advance timer to trigger animation
+        jest.runAllTimers();
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
+    });
+
+    it("animates to new progress when page prop changes", async () => {
+        getProgressBarPercentage.mockReturnValueOnce(30);
+        const wrapper = mount(ProgressBar, {
+            props: { page: "page1" },
+        });
+        jest.runAllTimers();
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
+
+        getProgressBarPercentage.mockReturnValueOnce(60);
+        await wrapper.setProps({ page: "page2" });
+        // Before timer, still old value
+        expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
+        jest.runAllTimers();
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 60%");
+    });
+
+    it("clears timeout on unmount", async () => {
+        getProgressBarPercentage.mockReturnValueOnce(50);
+        const wrapper = mount(ProgressBar, {
+            props: { page: "page1" },
+        });
+        const clearTimeoutSpy = jest.spyOn(window, "clearTimeout");
+        wrapper.unmount();
+        expect(clearTimeoutSpy).toHaveBeenCalled();
+        clearTimeoutSpy.mockRestore();
+    });
+});
+
+const mockMixin = {
+    methods: {
+        getProgress: jest.fn(),
+    },
+};
diff --git a/src/layouts/customer-details/customer-details.spec.js b/src/layouts/customer-details/customer-details.spec.js
index c2cae147d..33a379091 100644
--- a/src/layouts/customer-details/customer-details.spec.js
+++ b/src/layouts/customer-details/customer-details.spec.js
@@ -42,4 +42,4 @@ describe("CustomerDetails.vue", () => {
     it("Should render the CustomerDetails component", () => {
         expect(wrapper.exists()).toBe(true);
     });
-});
\ No newline at end of file
+});

From be18096b2b5acde5c1c6685ef65870bbcc7f21dd Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 20 May 2025 15:57:43 -0400
Subject: [PATCH 3/3] Remove unneeded code.

---
 src/layouts/customer-details/customer-details.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 8afcd8428..8cb17673b 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -103,7 +103,7 @@ export default {
     name: "customer-details",
     async beforeRouteEnter(to, from, next) {
         // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.namezzz);
+        const cmsContentPromise = fetchCmsContentForPage(to.name);
 
         // Settle promises and get results
         const promiseResultMap = [