Merge remote-tracking branch 'origin/develop' into feature/skiener/CSR-1452

package-lock.json

@@ -14,6 +14,7 @@
         "canvas-confetti": "^1.4.0",
         "core-js": "^3.6.5",
         "http-status-codes": "^2.1.4",
+        "iframe-resizer": "^4.3.7",
         "jest-junit": "^13.0.0",
         "maska": "^1.5.0",
         "vee-validate": "^4.5.7",
@@ -11813,6 +11814,18 @@
       "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
       "dev": true
     },
+    "node_modules/iframe-resizer": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.3.7.tgz",
+      "integrity": "sha512-a3EGVScU9NtUpj6lWvGhVw3EfOw5AopRs5xGsQU385kWdgQt++OsD6PCnTV+8YkgBu/g28rLIh0EztFg9UQr1Q==",
+      "engines": {
+        "node": ">=0.8.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/davidjbradshaw/iframe-resizer/blob/master/FUNDING.md"
+      }
+    },
     "node_modules/ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -33845,6 +33858,11 @@
       "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
       "dev": true
     },
+    "iframe-resizer": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.3.7.tgz",
+      "integrity": "sha512-a3EGVScU9NtUpj6lWvGhVw3EfOw5AopRs5xGsQU385kWdgQt++OsD6PCnTV+8YkgBu/g28rLIh0EztFg9UQr1Q=="
+    },
     "ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",

package.json

@@ -17,6 +17,7 @@
     "canvas-confetti": "^1.4.0",
     "core-js": "^3.6.5",
     "http-status-codes": "^2.1.4",
+    "iframe-resizer": "^4.3.7",
     "jest-junit": "^13.0.0",
     "maska": "^1.5.0",
     "vee-validate": "^4.5.7",

public/css/hop-styling.css

@@ -75,14 +75,11 @@ body .creditCardSpecific div {
   padding: 8px 0;
 }
 body .creditCardSpecific div .headerlinecontainer {
-  padding: 0;
+  display: none;
 }
 body .creditCardSpecific div label {
   font-weight: 500;
 }
-body .creditCardSpecific div:first-child {
-  display: none;
-}
 body .creditCardSpecific #infoRow2 {
   margin-bottom: 0;
 }

public/scss/hop-styling.scss

@@ -88,14 +88,11 @@ body {
         div {
             padding: 8px 0;
             .headerlinecontainer {
-                padding: 0;
+                display: none;
             }
             label {
                 font-weight: 500;
             }
-            &:first-child {
-                display: none;
-            }
         }
         #infoRow2 {
             margin-bottom: 0;

src/App.vue

@@ -5,15 +5,33 @@
             <component :is="Component" @focusin="handleAnyComponentFocus" />
         </transition>
     </router-view>
+    <loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
 </template>
 
 <script>
 import { handleAnyComponentFocus } from "@/helpers/button-question-focus-helper";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
 export default {
     name: "app",
+    setup() {
+        const { globalNonpersistedState } = showFmgLoadingModal();
+        return { globalNonpersistedState };
+    },
     methods: {
         handleAnyComponentFocus: handleAnyComponentFocus,
     },
+    computed: {
+        shouldShowLoader() {
+            return this.globalNonpersistedState.showLoadingModal;
+        },
+        shouldShowTextCarousel() {
+            return this.globalNonpersistedState.showTextCarousel;
+        },
+    },
+    components: {
+        loadingModal,
+    },
 };
 </script>
 

src/constants/store-actions.js

@@ -91,6 +91,9 @@ const storeActions = {
     SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
     SAVE_CCTOKEN: "saveCCToken",
     SAVE_PAYPAL_TOKEN: "savePaypalToken",
+
+    CREATE_SUBMITTED_ORDER: "createSubmittedOrder",
+    RESET_SUBMITTED_ORDER: "resetSubmittedOrder",
 };
 
 export { storeActions };

src/fmg-components/cart/cart.spec.js

@@ -0,0 +1,369 @@
+// Components
+import cart from "@/fmg-components/cart/cart.vue";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+describe("cart.vue", () => {
+    describe("cartItem computeds", () => {
+        test("if there are one or more front wipers on the order, a front wiper cart item should be added to the cart", () => {
+            // Arrange
+            const lineItems = {
+                glassParts: [],
+                supportingItems: [],
+                vaps: [
+                    {
+                        cartItemType: "FRONT WIPERS",
+                        description: 'WIPER BLADE STANDARD 18"',
+                        kitPrice: 0,
+                        laborAmount: 0,
+                        partNumber: "WB18",
+                        partType: "FRONT WIPER",
+                        salesTax: 2.44,
+                        sellingPrice: 32.49,
+                    },
+                    {
+                        cartItemType: "FRONT WIPERS",
+                        description: 'WIPER BLADE STANDARD 26"',
+                        kitPrice: 0,
+                        laborAmount: 0,
+                        partNumber: "WB26",
+                        partType: "FRONT WIPER",
+                        salesTax: 2.44,
+                        sellingPrice: 32.49,
+                    },
+                ],
+                promos: [],
+            };
+
+            const availableLineItems = [];
+
+            // Act
+            const { wrapper } = setupMocks({
+                props: {
+                    modelValue: lineItems,
+                    availableLineItems: availableLineItems,
+                },
+            });
+
+            // Assert
+            expect(wrapper.vm.frontWipersCartItem).not.toBeNull();
+            expect(wrapper.vm.frontWipersCartItem.subTotal).toEqual(64.98);
+            expect(wrapper.vm.frontWipersCartItem.salesTax).toEqual(4.88);
+
+            const found =
+                wrapper.vm.cartItems.findIndex(
+                    (cartItem) => cartItem == wrapper.vm.frontWipersCartItem
+                ) >= 0;
+            expect(found).toBe(true);
+        });
+
+        test("if there are one or more rear wipers on the order, a rear wiper cart item should be added to the cart", () => {
+            // Arrange
+            const lineItems = {
+                glassParts: [],
+                supportingItems: [],
+                vaps: [
+                    {
+                        cartItemType: "REAR WIPERS",
+                        description: 'REAR WIPER BLADE STANDARD 18"',
+                        kitPrice: 0,
+                        laborAmount: 0,
+                        partNumber: "EWB18",
+                        partType: "REAR WIPER",
+                        salesTax: 2.44,
+                        sellingPrice: 32.49,
+                    },
+                    {
+                        cartItemType: "REAR WIPERS",
+                        description: 'REAR WIPER BLADE STANDARD 26"',
+                        kitPrice: 0,
+                        laborAmount: 0,
+                        partNumber: "RWB26",
+                        partType: "REAR WIPER",
+                        salesTax: 2.44,
+                        sellingPrice: 32.49,
+                    },
+                ],
+                promos: [],
+            };
+
+            const availableLineItems = [];
+
+            // Act
+            const { wrapper } = setupMocks({
+                props: {
+                    modelValue: lineItems,
+                    availableLineItems: availableLineItems,
+                },
+            });
+
+            // Assert
+            expect(wrapper.vm.rearWipersCartItem).not.toBeNull();
+            expect(wrapper.vm.rearWipersCartItem.subTotal).toEqual(64.98);
+            expect(wrapper.vm.rearWipersCartItem.salesTax).toEqual(4.88);
+
+            const found =
+                wrapper.vm.cartItems.findIndex(
+                    (cartItem) => cartItem == wrapper.vm.rearWipersCartItem
+                ) >= 0;
+            expect(found).toBe(true);
+        });
+
+        test("if there is Rain Defense on the order, a rain defense cart item should be added to the cart", () => {
+            // Arrange
+            const lineItems = {
+                glassParts: [],
+                supportingItems: [],
+                vaps: [
+                    {
+                        cartItemType: "RAIN DEFENSE",
+                        description: null,
+                        kitPrice: 0,
+                        laborAmount: 0,
+                        listPrice: "44.99",
+                        partNumber: "RAIN DEFENSE",
+                        partType: "RAIN DEFENSE",
+                        salesTax: 3.37,
+                        sellingPrice: 44.99,
+                    },
+                ],
+                promos: [],
+            };
+
+            const availableLineItems = [];
+
+            // Act
+            const { wrapper } = setupMocks({
+                props: {
+                    modelValue: lineItems,
+                    availableLineItems: availableLineItems,
+                },
+            });
+
+            // Assert
+            expect(wrapper.vm.rainDefenseCartItem).not.toBeNull();
+            expect(wrapper.vm.rainDefenseCartItem.subTotal).toEqual(44.99);
+            expect(wrapper.vm.rainDefenseCartItem.salesTax).toEqual(3.37);
+
+            const found =
+                wrapper.vm.cartItems.findIndex(
+                    (cartItem) => cartItem == wrapper.vm.rainDefenseCartItem
+                ) >= 0;
+            expect(found).toBe(true);
+        });
+
+        // test("if there are glass parts on the order, a glass part cart item should be added to the cart but should not be displayed", () => {
+        //     // Arrange
+        //     const windshieldWithChildParts = {
+        //         canSafeliteRecalibrate: true,
+        //         childParts: [
+        //             {
+        //                 kitPrice: 0,
+        //                 laborAmount: 23.55,
+        //                 partNumber: "GGG FW4896",
+        //                 salesTax: 1.77,
+        //                 sellingPrice: 0,
+        //             },
+        //         ],
+        //         color: "Green Tint",
+        //         description:
+        //             "solar, soundproofing, lane keep assist, lane departure warning system, w/adaptive cruise control",
+        //         id: "db22fd44-10dd-456f-979b-ff88cf68cca6",
+        //         kitPrice: 0,
+        //         laborAmount: 60,
+        //         partNumber: "FW04896GTYN",
+        //         partType: "WINDSHIELD",
+        //         recalibrationType: "STATIC",
+        //         requiresCapabilityQuestions: false,
+        //         requiresRecalibration: true,
+        //         salesTax: 63.86,
+        //         sellingPrice: 791.46,
+        //     };
+
+        //     const lineItems = {
+        //         glassParts: [windshieldWithChildParts],
+        //         supportingItems: [],
+        //         vaps: [],
+        //         promos: [],
+        //     };
+
+        //     const availableLineItems = [];
+
+        //     // Act
+        //     const { wrapper } = setupMocks({
+        //         props: {
+        //             modelValue: lineItems,
+        //             availableLineItems: availableLineItems,
+        //         },
+        //     });
+
+        //     // Assert
+        //     expect(wrapper.vm.glassPartCartItems[0]).not.toBeNull();
+        //     expect(wrapper.vm.glassPartCartItems[0].subTotal).toEqual(875.01);
+        //     expect(wrapper.vm.glassPartCartItems[0].salesTax).toEqual(65.63);
+        //     expect(wrapper.vm.glassPartCartItems[0].isDisplayed).toEqual(false);
+
+        //     const found =
+        //         wrapper.vm.cartItems.findIndex(
+        //             (cartItem) => cartItem == wrapper.vm.glassPartsCartItem
+        //         ) >= 0;
+
+        //     expect(found).toBe(true);
+        // });
+
+        // Recycle Fee Cart Item
+        test("if there is recycling fee on the order, a recycle fee cart item should be added to the cart", () => {
+            // Arrange
+            const lineItems = {
+                glassParts: [],
+                supportingItems: [
+                    {
+                        description: null,
+                        id: "9ff98501-03a4-432b-884e-e4e28f884a2f",
+                        kitPrice: 0,
+                        laborAmount: 34.98,
+                        partNumber: "RECYCLE FEE",
+                        partType: "REPLACE FEE",
+                        salesTax: 2.62,
+                        sellingPrice: 0,
+                    },
+                ],
+                vaps: [],
+                promos: [],
+            };
+
+            const availableLineItems = [];
+
+            // Act
+            const { wrapper } = setupMocks({
+                props: {
+                    modelValue: lineItems,
+                    availableLineItems: availableLineItems,
+                },
+            });
+
+            // Assert
+            expect(wrapper.vm.recycleFeeCartItem).not.toBeNull();
+            expect(wrapper.vm.recycleFeeCartItem.subTotal).toEqual(34.98);
+            expect(wrapper.vm.recycleFeeCartItem.salesTax).toEqual(2.62);
+
+            const found =
+                wrapper.vm.cartItems.findIndex(
+                    (cartItem) => cartItem == wrapper.vm.recycleFeeCartItem
+                ) >= 0;
+            expect(found).toBe(true);
+        });
+
+        // Mobile Fee Cart Item
+        test("if there is mobile fee on the order, a mobile fee cart item should be added to the cart", () => {
+            // Arrange
+            const lineItems = {
+                glassParts: [],
+                supportingItems: [
+                    {
+                        description: null,
+                        id: "9ff98501-03a4-432b-884e-e4e28f884a2f",
+                        kitPrice: 0,
+                        laborAmount: 34.98,
+                        partNumber: "MOBILE FEE",
+                        partType: "REPLACE FEE",
+                        salesTax: 2.62,
+                        sellingPrice: 0,
+                    },
+                ],
+                vaps: [],
+                promos: [],
+            };
+
+            const availableLineItems = [];
+
+            // Act
+            const { wrapper } = setupMocks({
+                props: {
+                    modelValue: lineItems,
+                    availableLineItems: availableLineItems,
+                },
+            });
+
+            // Assert
+            expect(wrapper.vm.mobileFeeCartItem).not.toBeNull();
+            expect(wrapper.vm.mobileFeeCartItem.subTotal).toEqual(34.98);
+            expect(wrapper.vm.mobileFeeCartItem.salesTax).toEqual(2.62);
+
+            const found =
+                wrapper.vm.cartItems.findIndex(
+                    (cartItem) => cartItem == wrapper.vm.mobileFeeCartItem
+                ) >= 0;
+            expect(found).toBe(true);
+        });
+
+        // Other Supporting Items Cart Item
+        test("if there are other supporting items on the order, an other supporting items cart item should be added to the cart but should not be displayed", () => {
+            // Arrange
+            const recalibrationLineItem = {
+                cartItemType: "SUPPORTING ITEMS",
+                description: null,
+                id: "8ab6ef9b-8620-430a-8a92-29f7d4bb8b00",
+                kitPrice: 0,
+                laborAmount: 450,
+                partNumber: "RECAL STATIC",
+                partType: "RECALIBRATION",
+                salesTax: 33.75,
+                sellingPrice: 0,
+            };
+
+            const lineItems = {
+                glassParts: [],
+                supportingItems: [recalibrationLineItem],
+                vaps: [],
+                promos: [],
+            };
+
+            const availableLineItems = [];
+
+            // Act
+            const { wrapper } = setupMocks({
+                props: {
+                    modelValue: lineItems,
+                    availableLineItems: availableLineItems,
+                },
+            });
+
+            // Assert
+            expect(wrapper.vm.otherSupportingItemsCartItem).not.toBeNull();
+            expect(wrapper.vm.otherSupportingItemsCartItem.subTotal).toEqual(450);
+            expect(wrapper.vm.otherSupportingItemsCartItem.salesTax).toEqual(33.75);
+            expect(wrapper.vm.otherSupportingItemsCartItem.isDisplayed).toEqual(false);
+
+            const found =
+                wrapper.vm.cartItems.findIndex(
+                    (cartItem) => cartItem == wrapper.vm.otherSupportingItemsCartItem
+                ) >= 0;
+            expect(found).toBe(true);
+        });
+    });
+});
+
+function setupMocks({ options, props }) {
+    const mountOptions = getMountOptions({
+        ...options,
+    });
+
+    const mockBaseMixin = {
+        methods: {
+            getTierOnePackagePrice: jest.fn(),
+            filterOutFees: jest.fn(),
+            getCmsContent: jest.fn(),
+        },
+    };
+
+    if (props) mountOptions.propsData = props;
+
+    mountOptions.global.mixins = [mockBaseMixin];
+
+    const wrapper = shallowMount(cart, mountOptions);
+
+    return { wrapper };
+}

src/fmg-components/cart/cart.vue

@@ -73,13 +73,18 @@
 </template>
 
 <script>
-import baseMixin from "@/mixins/base-mixin.js";
+// Components
-import { getHighestFullySatisfiedTier, getPackageContents } from "@/helpers/service-package-helper";
-
 import textLink from "@/ux-components/text-link/text-link";
 import textBlock from "@/digital-components/text-block/text-block";
-import { LineItemUtilities } from "@/store";
+
+// Mixins
+import baseMixin from "@/mixins/base-mixin.js";
+
+// Helpers
 import { deepClone } from "@/helpers/object-helper";
+import { getHighestFullySatisfiedTier, getPackageContents } from "@/helpers/service-package-helper";
+
+// Constants
 import { partTypeStrings } from "@/constants/part-type-strings";
 import { cartItemCategories } from "@/constants/cart-item-categories";
 import { cartItemTypes } from "@/constants/cart-item-types";
@@ -101,7 +106,6 @@ export default {
                 currency: "USD",
             }),
             lineItems: deepClone(this.modelValue),
-            lineItemUtilities: new LineItemUtilities(),
         };
     },
     methods: {
@@ -114,7 +118,7 @@ export default {
             let subTotal = 0;
 
             vapsItems.forEach((item) => {
-                subTotal += item.subTotal; //    baseMixin.methods.getTotalLineItemPrice(item);
+                subTotal += item.subTotal;
             });
 
             return subTotal;
@@ -175,8 +179,10 @@ export default {
                     cartItems.push(this.rainDefenseCartItem);
                 }
 
-                if (this.glassPartsCartItem) {
+                if (this.glassPartCartItems) {
-                    cartItems.push(this.glassPartsCartItem);
+                    this.glassPartCartItems.forEach((glassPartCartItem) => {
+                        cartItems.push(glassPartCartItem);
+                    });
                 }
 
                 if (this.otherSupportingItemsCartItem) {
@@ -264,6 +270,10 @@ export default {
 
             return this.damage.glassToReplace;
         },
+        glassParts() {
+            const glassParts = this.lineItems?.glassParts;
+            return glassParts?.length > 0 ? glassParts : [];
+        },
         vaps() {
             const vaps = this.lineItems?.vaps;
             return vaps?.length > 0 ? vaps : [];
@@ -403,12 +413,12 @@ export default {
 
             return cartItem;
         },
-        glassPartsCartItem() {
+        glassPartCartItems() {
-            let cartItem = null;
+            const glassPartCartItems = [];
 
-            if (this.lineItems?.glassParts?.length > 0) {
+            if (this.glassParts.length > 0) {
-                this.lineItems?.glassParts?.forEach((lineItem) => {
+                this.glassParts.forEach((lineItem) => {
-                    cartItem = {
+                    let glassPartCartItem = {
                         name: null,
                         category: cartItemCategories.GLASS_PARTS,
                         cartItemType: cartItemTypes.GLASS_PARTS,
@@ -417,24 +427,27 @@ export default {
                             (lineItem.kitPrice ?? 0) +
                             (lineItem.laborAmount ?? 0) +
                             (lineItem.sellingPrice ?? 0),
+
                         salesTax: lineItem.salesTax ?? 0,
                         lineItems: [],
                     };
 
                     if (lineItem.childParts?.length > 0) {
                         lineItem.childParts.forEach((childPartLineItem) => {
-                            cartItem.subTotal +=
+                            glassPartCartItem.subTotal +=
                                 (childPartLineItem.kitPrice ?? 0) +
                                 (childPartLineItem.laborAmount ?? 0) +
                                 (childPartLineItem.sellingPrice ?? 0);
 
-                            cartItem.salesTax += childPartLineItem.salesTax;
+                            glassPartCartItem.salesTax += childPartLineItem.salesTax;
                         });
                     }
+
+                    glassPartCartItems.push(glassPartCartItem);
                 });
             }
 
-            return cartItem;
+            return glassPartCartItems;
         },
         recycleFeeCartItemName() {
             return this.getCmsContent("RecycleFeeTextWidget", "Text");

src/fmg-components/loading-modal/loading-modal.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isModalVisible">
+    <div v-if="showModalContent">
         <div v-if="notFullScreen" class="dimmer-overlay"></div>
         <div class="modal-loader" :class="layoutClass">
             <div class="row g-2 h-100 d-flex align-items-center">
@@ -11,7 +11,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="row">
+                    <div v-if="showTextCarouselContent" class="row">
                         <div class="col">
                             <div class="text-container slide">
                                 <p>
@@ -59,6 +59,7 @@ export default {
     data() {
         return {
             isModalVisible: false,
+            isModalTextCarouselVisible: false,
         };
     },
     props: {
@@ -66,15 +67,30 @@ export default {
             type: Boolean,
             default: false,
         },
+        showLoader: {
+            type: Boolean,
+            default: false,
+        },
+        showTextCarousel: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         layoutClass() {
             return this.notFullScreen ? "card-layout" : "full-screen container-fluid";
         },
+        showModalContent() {
+            return this.isModalVisible || this.showLoader;
+        },
+        showTextCarouselContent() {
+            return this.isModalTextCarouselVisible || this.showTextCarousel;
+        },
     },
     methods: {
-        showModal() {
+        showModal(showTextCarousel = true) {
             //Display modal
+            this.isModalTextCarouselVisible = showTextCarousel;
             this.isModalVisible = true;
             //Force page reload on back button
             window.addEventListener(

src/helpers/loading-modal-helper.js

@@ -0,0 +1,18 @@
+import { reactive } from "vue";
+
+// state encapsulated and managed by the composable
+const globalNonpersistedState = reactive({
+    showLoadingModal: true,
+    showTextCarousel: false,
+});
+
+export const showFmgLoadingModal = (newValue, showTextCarousel = false) => {
+    if (newValue !== undefined) {
+        globalNonpersistedState.showLoadingModal = newValue;
+    }
+    if (showTextCarousel !== undefined) {
+        globalNonpersistedState.showTextCarousel = showTextCarousel;
+    }
+
+    return { globalNonpersistedState };
+};

src/layouts/confirmation/confirmation.spec.js

@@ -19,6 +19,53 @@ beforeEach(() => {
     jest.restoreAllMocks();
     jest.clearAllMocks();
     store.getters = {
+        submittedOrder: {
+            schedule: {
+                date: "2023-01-01",
+                startTime: "09:00",
+                endTime: "10:00",
+                routeCode: "000",
+            },
+            lineItems: {
+                glassParts: [
+                    {
+                        partNumber: "ABC123",
+                    },
+                ],
+                supportingItems: [],
+            },
+            serviceLocation: {
+                address: "test",
+                address2: "123",
+                city: "test",
+                state: "AZ",
+                appointmentType: "Inshop",
+                zipCode: "12345",
+                zipCodeCtu: "01234",
+                provider: {
+                    providerNumber: "123",
+                    address: {
+                        streetAddress: "test1",
+                        city: "test",
+                        state: "AZ",
+                        zipCode: "12345",
+                        zipCodeCtu: "01234",
+                    },
+                },
+            },
+            damage: {
+                isRepair: false,
+            },
+            referralNumber: "1234567",
+            vehicle: {
+                year: "2004",
+                make: "Ford",
+                model: "F Series F250",
+            },
+            customer: {
+                emailAddress: "test@test.com",
+            },
+        },
         order: {
             schedule: {
                 date: "2023-01-01",
@@ -127,9 +174,10 @@ describe("computed properties...", () => {
     });
     test("ScheduleTimeFormatted should return mobile time in expected format.", () => {
         //Arrange
-        store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
+        store.getters.submittedOrder.serviceLocation.appointmentType =
-        store.getters.order.schedule.startTime = "09:00";
+            AppointmentTypeStrings.MOBILE;
-        store.getters.order.schedule.endTime = "11:00";
+        store.getters.submittedOrder.schedule.startTime = "09:00";
+        store.getters.submittedOrder.schedule.endTime = "11:00";
         const { wrapper } = setupMocks({});
 
         // Act
@@ -140,9 +188,10 @@ describe("computed properties...", () => {
     });
     test("ScheduleTimeFormatted should return DROP_OFF time in expected format.", () => {
         //Arrange
-        store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
+        store.getters.submittedOrder.serviceLocation.appointmentType =
-        store.getters.order.schedule.startTime = "09:00";
+            AppointmentTypeStrings.DROP_OFF;
-        store.getters.order.schedule.endTime = "11:00";
+        store.getters.submittedOrder.schedule.startTime = "09:00";
+        store.getters.submittedOrder.schedule.endTime = "11:00";
         const { wrapper } = setupMocks({});
 
         // Act
@@ -153,9 +202,10 @@ describe("computed properties...", () => {
     });
     test("ScheduleTimeFormatted should return Inshop time in expected format.", () => {
         //Arrange
-        store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
+        store.getters.submittedOrder.serviceLocation.appointmentType =
-        store.getters.order.schedule.startTime = "09:00";
+            AppointmentTypeStrings.IN_SHOP;
-        store.getters.order.schedule.endTime = "11:00";
+        store.getters.submittedOrder.schedule.startTime = "09:00";
+        store.getters.submittedOrder.schedule.endTime = "11:00";
         const { wrapper } = setupMocks({});
 
         // Act
@@ -166,7 +216,8 @@ describe("computed properties...", () => {
     });
     test("AppointmentWordingText should return mobile text in expected format.", () => {
         //Arrange
-        store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
+        store.getters.submittedOrder.serviceLocation.appointmentType =
+            AppointmentTypeStrings.MOBILE;
 
         const { wrapper } = setupMocks({});
         // Act
@@ -177,7 +228,8 @@ describe("computed properties...", () => {
     });
     test("AppointmentWordingText should return DROP_OFF text in expected format.", () => {
         //Arrange
-        store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
+        store.getters.submittedOrder.serviceLocation.appointmentType =
+            AppointmentTypeStrings.DROP_OFF;
 
         const { wrapper } = setupMocks({});
 
@@ -189,7 +241,8 @@ describe("computed properties...", () => {
     });
     test("AppointmentWordingText should return IN_SHOP text in expected format.", () => {
         //Arrange
-        store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
+        store.getters.submittedOrder.serviceLocation.appointmentType =
+            AppointmentTypeStrings.IN_SHOP;
 
         const { wrapper } = setupMocks({});
 

src/layouts/confirmation/confirmation.vue

@@ -57,6 +57,8 @@ import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar";
 //Supporting files
+import baseMixin from "@/mixins/base-mixin.js";
+import { storeActions } from "@/constants/store-actions";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -70,6 +72,8 @@ import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-h
 export default {
     name: "confirmation",
     async beforeRouteEnter(to, from, next) {
+        await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER);
+
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
@@ -95,7 +99,7 @@ export default {
             return this.getCmsContent("ScheduleConfirmationWidget", "Image");
         },
         CustomerPortalLoginToken() {
-            return store.getters.order.customerPortalLoginToken;
+            return store.getters.submittedOrder.customerPortalLoginToken;
         },
         ConfirmationEmailText() {
             return this.getCmsContent("ConfirmationEmailWidget", "BodyText")
@@ -105,16 +109,16 @@ export default {
                 ?.replaceAll(">", ">");
         },
         ScheduleDate() {
-            return store.getters.order.schedule.date;
+            return store.getters.submittedOrder.schedule.date;
         },
         AppointmentType() {
-            return store.getters.order.serviceLocation.appointmentType;
+            return store.getters.submittedOrder.serviceLocation.appointmentType;
         },
         ScheduleStartTime() {
-            return store.getters.order.schedule.startTime;
+            return store.getters.submittedOrder.schedule.startTime;
         },
         ScheduleEndTime() {
-            return store.getters.order.schedule.endTime;
+            return store.getters.submittedOrder.schedule.endTime;
         },
         InShopWordingText() {
             return this.getCmsContent("InShopWordingWidget", "BodyText");
@@ -126,31 +130,31 @@ export default {
             return this.getCmsContent("DropOffWordingWidget", "BodyText");
         },
         ServiceLocationAddress() {
-            return store.getters.order.serviceLocation.address;
+            return store.getters.submittedOrder.serviceLocation.address;
         },
         ServiceLocationAddress2() {
-            return store.getters.order.serviceLocation.address2;
+            return store.getters.submittedOrder.serviceLocation.address2;
         },
         ServiceLocationCity() {
-            return store.getters.order.serviceLocation.city;
+            return store.getters.submittedOrder.serviceLocation.city;
         },
         ServiceLocationState() {
-            return store.getters.order.serviceLocation.state;
+            return store.getters.submittedOrder.serviceLocation.state;
         },
         ServiceLocationZipCode() {
-            return store.getters.order.serviceLocation.zipCode;
+            return store.getters.submittedOrder.serviceLocation.zipCode;
         },
         ProviderAddress() {
-            return store.getters.order.serviceLocation.provider.address.streetAddress;
+            return store.getters.submittedOrder.serviceLocation.provider.address.streetAddress;
         },
         ProviderCity() {
-            return store.getters.order.serviceLocation.provider.address.city;
+            return store.getters.submittedOrder.serviceLocation.provider.address.city;
         },
         ProviderState() {
-            return store.getters.order.serviceLocation.provider.address.state;
+            return store.getters.submittedOrder.serviceLocation.provider.address.state;
         },
         ProviderZipCode() {
-            return store.getters.order.serviceLocation.provider.address.zipCode;
+            return store.getters.submittedOrder.serviceLocation.provider.address.zipCode;
         },
         AppointmentWordingText() {
             if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
@@ -204,6 +208,10 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
+            if (store.getters.hasSubmittedOrder) {
+                return true;
+            }
+
             // Service Location
             const serviceLocation = store.getters.order.serviceLocation;
             const mobileReqs = !!(

src/layouts/payment-method/payment-method.vue

@@ -174,6 +174,8 @@ export default {
             false
         );
 
+        // Match all available line items to the line items as they are in the store
+        // and rebuild the original structure.
         const lineItems = mapTaxedAvailableLineItemsToStoreFormat(
             availableLineItems,
             lineItemsFromStore

src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue

@@ -0,0 +1,73 @@
+<template>
+    <button
+        type="button"
+        class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
+        @click="handleClick">
+        <!-- <span class="m-0">{{ buttonLabelText }}</span> -->
+        <span v-for="token in tokens" :key="token">
+            <span v-if="isInlineImageToken(token)">
+                <img
+                    v-if="hasImage"
+                    class="ms-2"
+                    :src="buttonImage"
+                    :alt="getInlineAltText(token)" />
+                <span v-else> {{ getInlineAltText(token) }}</span>
+            </span>
+            <span v-else>
+                {{ token }}
+            </span>
+        </span>
+    </button>
+</template>
+
+<script>
+import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
+
+const INLINE_IMAGE_TOKEN = "custom:inlineImage";
+
+export default {
+    name: "payment-switch-button",
+    props: {
+        buttonText: String,
+        buttonImage: String,
+        buttonImageId: String,
+    },
+    methods: {
+        handleClick(clickValue) {
+            this.pushEventToGA(
+                this.$route.query[this.queryStrings.FMG_PAGE],
+                this.GaActions.CLICKED,
+                this.buttonText,
+                true
+            );
+            this.$emit("click-event", clickValue);
+        },
+        isInlineImageToken(token) {
+            return token.includes(INLINE_IMAGE_TOKEN);
+        },
+        getInlineAltText(token) {
+            let innerTokens = token.split(",");
+
+            return innerTokens[1] ?? "";
+        },
+    },
+    computed: {
+        tokens() {
+            return splitCopyOnCMSPlaceHolder(this.buttonText ?? "");
+        },
+        hasImage() {
+            return !!this.buttonImage;
+        },
+        buttonLabelText() {
+            return this.tokens[0];
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.btn {
+    border: 1px solid $gray-600;
+    border-radius: 8px;
+}
+</style>

src/layouts/payment/payment-switch/payment-switch.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="switch-payment-header pb-3">{{ switchPaymentHeaderText }}</div>
+    <div class="switch-payment-button">
+        <paymentSwitchButton
+            v-if="paymentType !== paymentTypes.cc"
+            :buttonText="paymentMethodsInfo[paymentTypes.cc]?.buttonText"
+            :buttonImage="paymentMethodsInfo[paymentTypes.cc]?.answerImageUrl"
+            :buttonImageId="paymentMethodsInfo[paymentTypes.cc]?.imageId"
+            @click-event="switchPaymentClick(paymentTypes.cc)" />
+    </div>
+    <div class="switch-button-separator py-3" v-if="paymentType !== paymentTypes.cc">or</div>
+    <div class="switch-payment-button">
+        <paymentSwitchButton
+            v-if="paymentType !== paymentTypes.pp"
+            :buttonText="paymentMethodsInfo[paymentTypes.pp]?.buttonText"
+            :buttonImage="paymentMethodsInfo[paymentTypes.pp]?.answerImageUrl"
+            :buttonImageId="paymentMethodsInfo[paymentTypes.pp]?.imageId"
+            @click-event="switchPaymentClick(paymentTypes.pp)" />
+    </div>
+    <div class="switch-button-separator py-3" v-if="paymentType === paymentTypes.cc">or</div>
+    <div class="switch-payment-button">
+        <paymentSwitchButton
+            v-if="paymentType !== paymentTypes.ap"
+            :buttonText="paymentMethodsInfo[paymentTypes.ap]?.buttonText"
+            :buttonImage="paymentMethodsInfo[paymentTypes.ap]?.answerImageUrl"
+            :buttonImageId="paymentMethodsInfo[paymentTypes.ap]?.imageId"
+            @click-event="switchPaymentClick(paymentTypes.ap)" />
+    </div>
+</template>
+
+<script>
+import paymentSwitchButton from "./payment-switch-button/payment-switch-button";
+
+export default {
+    name: "paymentSwitch",
+    data() {
+        return {
+            paymentTypes: {
+                cc: "cc",
+                pp: "pp",
+                ap: "ap",
+            },
+        };
+    },
+    props: {
+        cmsWidgetName: String,
+        paymentType: String,
+    },
+    computed: {
+        switchPaymentHeaderText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        paymentMethodAnswerData() {
+            const rawData = this.getCmsContent(this.cmsWidgetName, "Answers");
+
+            if (!rawData) {
+                return [];
+            } else {
+                return rawData;
+            }
+        },
+        paymentMethodsInfo() {
+            return this.paymentMethodAnswerData.reduce((accumulator, paymentMethod) => {
+                accumulator[paymentMethod.Name] = {
+                    buttonText: paymentMethod.Text,
+                    answerImageUrl: paymentMethod.AnswerImageUrl,
+                    imageId: paymentMethod.ImageId,
+                };
+                return accumulator;
+            }, {});
+        },
+    },
+    methods: {
+        switchPaymentClick(paymentType) {
+            this.$emit("switch-payment-event", paymentType);
+        },
+    },
+    components: {
+        paymentSwitchButton,
+    },
+};
+</script>
+
+<style lang="scss">
+.switch-payment-header {
+    font-weight: 500;
+    color: $black;
+}
+
+.switch-button-separator {
+    text-align: center;
+    color: $black;
+}
+
+.switch-payment-button button {
+    width: 100%;
+    color: $black;
+}
+</style>

src/layouts/payment/payment.vue

@@ -12,6 +12,7 @@
                 <div class="col-md-6 col-xl-4 p-0">
                     <div id="card-container">
                         <iframe
+                            v-resize
                             ref="paymentFrame"
                             class="hop-iframe payment-iframe"
                             name="card-frame"
@@ -20,39 +21,10 @@
                             scrolling="no">
                         </iframe>
                     </div>
-                    <div>{{ switchPaymentText }}</div>
+                    <paymentSwitch
-                    <div>
+                        cmsWidgetName="PaymentMethodWidget"
-                        <button
+                        :paymentType="paymentType"
-                            v-if="paymentType !== 'cc'"
+                        @switch-payment-event="switchPIAMethod" />
-                            ref="switchToCCButton"
-                            type="button"
-                            @mousedown="switchPIAMethod('cc')"
-                            aria-label="Switch to Credit Card">
-                            Switch to Credit Card
-                        </button>
-                    </div>
-                    <div v-if="paymentType !== 'cc'">or</div>
-                    <div>
-                        <button
-                            v-if="paymentType !== 'pp'"
-                            ref="switchToPPButton"
-                            type="button"
-                            @mousedown="switchPIAMethod('pp')"
-                            aria-label="Switch to PayPal">
-                            Switch to PayPal
-                        </button>
-                    </div>
-                    <div v-if="paymentType === 'cc'">or</div>
-                    <div>
-                        <button
-                            v-if="paymentType !== 'ap'"
-                            ref="switchToAPButton"
-                            type="button"
-                            @mousedown="switchPIAMethod('ap')"
-                            aria-label="Switch to Afterpay">
-                            Switch to Afterpay
-                        </button>
-                    </div>
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         isForwardActionDisabled="true"
@@ -192,6 +164,8 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
+import paymentSwitch from "./payment-switch/payment-switch.vue";
+
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import { externalUrls } from "@/router/router-constants/externalUrl-values";
@@ -202,7 +176,7 @@ import { paymentMethods } from "@/constants/payment-method-constants";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import baseMixin from "@/mixins/base-mixin.js";
 
-// Validation
+import iframeResize from "../../../node_modules/iframe-resizer/js/iframeResizer.js";
 
 export default {
     name: "payment",
@@ -235,6 +209,18 @@ export default {
             paypalPayment: this.isPaypal(),
         };
     },
+    directives: {
+        resize: {
+            mounted: function (el) {
+                el.addEventListener("load", () => {
+                    iframeResize({ checkOrigin: false }, el);
+                });
+            },
+            unmounted: function (el) {
+                el.iFrameResizer.removeListeners();
+            },
+        },
+    },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@@ -480,6 +466,7 @@ export default {
         funnelHeader,
         navbar,
         loadingModal,
+        paymentSwitch,
     },
 };
 </script>
@@ -487,7 +474,7 @@ export default {
 <style lang="scss">
 .hop-iframe {
     position: relative;
-    min-height: 1320px;
+    min-height: 1120px;
     width: 100%;
     border: 0 none;
 }

src/layouts/vehicle/vehicle.vue

@@ -334,6 +334,7 @@ export default {
         },
 
         async forwardButtonAction() {
+            await this.dispatchStoreAction(storeActions.RESET_SUBMITTED_ORDER);
             this.dispatchStoreAction(
                 storeActions.SAVE_VEHICLE,
                 {

src/mixins/base-mixin.js

@@ -89,7 +89,7 @@ export default {
                 );
             });
 
-            let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
+            let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice, false);
             return totalPrice;
         },
         filterOutFees(lineItems) {
@@ -101,22 +101,30 @@ export default {
             });
             return filteredLineItems;
         },
-        getTotalPriceOfAllLineItemsAndChildParts(lineItems) {
+        getTotalPriceOfAllLineItemsAndChildParts(lineItems, includeTax) {
             let totalPrice = 0;
             lineItems.forEach((lineItem) => {
-                totalPrice += this.getTotalLineItemPrice(lineItem);
+                totalPrice += this.getTotalLineItemPrice(lineItem, includeTax);
                 if (lineItem.childParts) {
                     totalPrice += this.getTotalPriceOfAllLineItemsAndChildParts(
-                        lineItem.childParts
+                        lineItem.childParts,
+                        includeTax
                     );
                 }
             });
             return totalPrice;
         },
-        getTotalLineItemPrice(lineItem) {
+        getTotalLineItemPrice(lineItem, includeTax) {
-            return (
+            if (includeTax) {
-                lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice + lineItem.salesTax
+                return (
-            );
+                    lineItem.kitPrice +
+                    lineItem.laborAmount +
+                    lineItem.sellingPrice +
+                    lineItem.salesTax
+                );
+            } else {
+                return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
+            }
         },
         getDisplayAmountDue(lineItems) {
             return this.getAmountDue(lineItems).toLocaleString("en-US", {
@@ -127,15 +135,19 @@ export default {
         getAmountDue(lineItems) {
             var amountDue = 0;
             if (lineItems.glassParts) {
-                amountDue = this.getTotalPriceOfAllLineItemsAndChildParts(lineItems.glassParts);
+                amountDue = this.getTotalPriceOfAllLineItemsAndChildParts(
+                    lineItems.glassParts,
+                    true
+                );
             }
             if (lineItems.supportingItems) {
                 amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
-                    lineItems.supportingItems
+                    lineItems.supportingItems,
+                    true
                 );
             }
             if (lineItems.vaps) {
-                amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(lineItems.vaps);
+                amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(lineItems.vaps, true);
             }
             return amountDue;
         },

src/router/index.js

@@ -8,6 +8,7 @@ import { globalEvents, globalEventTypes } from "@/constants/events";
 import { queryStrings } from "@/constants/query-strings";
 import { getQuerystringParameter } from "@/helpers/querystring-helper";
 import { getDeviceIdValue } from "@/helpers/heritage-integration/cookie-helper";
+import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
 
 // Heritage integration
 import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper";
@@ -54,8 +55,17 @@ const routes = [
                     await GoToFunnelStartOn404(next);
                 }
 
+                // Intercept all navigation if a submitted order exists in storage
+                if (store.getters.hasSubmittedOrder) {
+                    if (to.query.fmgPage !== "vehicle") {
+                        to.query.fmgPage = "confirmation";
+                    }
+                }
                 // On entering the funnel "fresh", read cookie information, decide what to do next. payment pages used to return from safelitehop so exclude here
-                if (from.redirectedFrom === undefined && !to.query.fmgPage.startsWith("payment")) {
+                else if (
+                    from.redirectedFrom === undefined &&
+                    !to.query.fmgPage.startsWith("payment")
+                ) {
                     // clear the saveSessionPromise - if it exists in the vuex store but a new instance was created
                     //   the saveSessionPromise will no longer point to a valid promise
                     baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
@@ -154,6 +164,11 @@ router.beforeEach(async (to, from, next) => {
     // use current page url query string name when to.name is "root" (due to unresolved navigation in beforeEach)
     router.lastNavigationPage = to.name == "root" ? analyticsMixin.methods.getPageName() : to.name;
 
+    const fromQueryPage = from.query?.fmgPage;
+    if (fromQueryPage === undefined) {
+        showFmgLoadingModal(true);
+    }
+
     next();
 });
 
@@ -171,6 +186,8 @@ router.afterEach(async (to, from) => {
         }
     }
 
+    showFmgLoadingModal(false);
+
     // Push page view to GA
     analyticsMixin.methods.pushPageViewToGA();
 

src/store/index.js

@@ -691,6 +691,8 @@ export const getters = {
             .filter((x) => !!x.isActive)
             .map((x) => x.settings)
             .reduce((r, c) => Object.assign(r, c), {}) ?? {},
+    submittedOrder: (state) => JSON.parse(window.sessionStorage.getItem("submittedOrder")),
+    hasSubmittedOrder: (state) => window.sessionStorage.getItem("submittedOrder") !== null,
 };
 
 function getNonFalseValuesOfPropertyInArrayOfObjects(array, propertyName) {
@@ -2441,6 +2443,26 @@ export const actions = {
 
         return false;
     },
+
+    createSubmittedOrder(context) {
+        if (context.getters.hasSubmittedOrder) {
+            return;
+        }
+
+        // create a submitted order object from vuex.
+        const submittedOrder = context.state.order;
+
+        // set to local storage
+        window.sessionStorage.setItem("submittedOrder", JSON.stringify(submittedOrder));
+
+        // clear vuex
+        context.commit(storeMutations.RESET_STATE);
+    },
+
+    resetSubmittedOrder(context) {
+        // clear from local storage
+        window.sessionStorage.removeItem("submittedOrder");
+    },
 };
 
 export default createStore({
@@ -2576,15 +2598,6 @@ function addTaxesToPricedLineItems(pricedLineItems, taxingLineItems = []) {
     return pricedLineItems;
 }
 
-export class LineItemUtilities {
-    constructor() {
-        this.getArrayOfAllLineItems = getArrayOfAllLineItems;
-        this.getFlattenedArrayOfLineItemsWithChildParts =
-            getFlattenedArrayOfLineItemsWithChildParts;
-        this.addGuidToLineItemsIfNotAlreadyThere = addGuidToLineItemsIfNotAlreadyThere;
-    }
-}
-
 export function mapTaxedAvailableLineItemsToStoreFormat(availableLineItems, storeLineItems) {
     // clone the lineItems array because what we're passing in is referencing the store directly
     const lineItems = deepClone(storeLineItems);