Merge pull request #2435 from Safelite/feature/CASH-187

Feature/cash 187

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;
+};

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

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(),
+    },
+};

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: 0.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>

src/layouts/quote/quote.vue

@@ -891,7 +891,7 @@ export default {
 
     &.funnel-header-wrapper,
     &.save-progress-popup {
-        display: block;
+        display: flex;
     }
 }