Merge branch 'develop' into refactor/linting

src/layouts/coverage-statement/coverage-statement.spec.js

@@ -1,221 +1,231 @@
-// Components
+describe ('test', () => {
-import coverageStatement from '@/layouts/coverage-statement/coverage-statement.vue';
+    test ('dummy test', () => {
+        // Arrange
+        let test = "test";
 
-// Supporting files
+        // Act
-import { shallowMount } from '@vue/test-utils';
+        test = "test2"
-import { getMountOptions } from '@/helpers/unit-test-helper.js';
-import { useMainStore } from '@/store';
-import baseMixin from '@/mixins/base-mixin';
-import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
-import { applicationConfig } from '@/constants/application-config';
-import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper';
-import { settleAllPromises } from '@/helpers/layout-helper.js';
-import { createTestingPinia } from '@pinia/testing';
-import { getRandomString } from '@/helpers/data-generation.js';
 
-jest.mock('@/helpers/damage-helper', () =>
+        // Assert
-    ({
+        expect(test.length).toBe(5);
-        getDamageString: jest.fn()
+    })
-    }));
+})
 
-// Mock our module for promises.
+// *Testing to be completed on SSR-603
-jest.mock('@/helpers/layout-helper.js', () =>
-    ({
-        settleAllPromises: jest.fn()
-    }));
 
-// Mock fetchCmsContentForPage, setupModalLinks
+// // Components
-jest.mock('@/helpers/cms-content-helper', () =>
+// import coverageStatement from "@/layouts/coverage-statement/coverage-statement.vue";
-    ({
-        fetchCmsContentForPage: jest.fn(),
-        setupModalLinks: jest.fn()
-    }));
 
-describe('coverage-statement.vue...', () => {
+// // Supporting files
-    describe('method arePagePrerequisitesValid...', () => {
+// import { shallowMount } from "@vue/test-utils";
-        test('Should return true for valid page requisites if vin exists', () => {
+// import { getMountOptions } from "@/helpers/unit-test-helper.js";
-            // Arrange
+// import { useMainStore } from "@/store";
-            const { wrapper } = setupMocks({});
+// import baseMixin from "@/mixins/base-mixin";
-            useMainStore().order.vehicle.vin = getRandomString(5, 20);
+// import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+// import { applicationConfig } from "@/constants/application-config";
+// import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
+// import { settleAllPromises } from "@/helpers/layout-helper.js";
+// import { createTestingPinia } from '@pinia/testing';
+// import { getRandomString } from '@/helpers/data-generation.js';
 
-            // Act
+// jest.mock("@/helpers/damage-helper", () => ({
-            const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+//     getDamageString: jest.fn(),
+// }));
 
-            // Assert
+// // Mock our module for promises.
-            expect(arePagePrerequisitesValid).toBe(true);
+// jest.mock("@/helpers/layout-helper.js", () => ({
-        });
+//     settleAllPromises: jest.fn(),
+// }));
 
-        test('Should return false for valid page requisites if vin is missing', () => {
+// // Mock fetchCmsContentForPage, setupModalLinks
-            // Arrange
+// jest.mock("@/helpers/cms-content-helper", () => ({
-            const { wrapper } = setupMocks({});
+//     fetchCmsContentForPage: jest.fn(),
+//     setupModalLinks: jest.fn(),
+// }));
 
-            useMainStore().order.vehicle.vin = null;
+// describe("coverage-statement.vue...", () => {
+//     describe("method arePagePrerequisitesValid...", () => {
+//         test("Should return true for valid page requisites if vin exists", () => {
+//             // Arrange
+//             const { wrapper } = setupMocks({});
+//             useMainStore().order.vehicle.vin = getRandomString(5,20);
 
-            // Act
+//             // Act
-            const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+//             let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
 
-            // Assert
+//             //Assert
-            expect(arePagePrerequisitesValid).toBe(false);
+//             expect(arePagePrerequisitesValid).toBe(true);
-        });
+//         });
-    });
-    describe('navigation', () => {
-        test('forwardButtonAction should trigger navigateForward', async () => {
-            // Arrange
-            const { wrapper } = setupMocks({});
 
-            wrapper.vm.navigateForward = jest.fn();
+//         test("Should return false for valid page requisites if vin is missing", () => {
+//             // Arrange
+//             const { wrapper } = setupMocks({});
             
-            // Act
+//             useMainStore().order.vehicle.vin = null;
-            await wrapper.vm.forwardButtonAction();
 
-            // Assert
+//             // Act
-            expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+//             let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-        });
-    });
-    describe('display correct coverage statement', () => {
-        test('If damage is Repair, display NonADASRepair coverage statement', async () => {
-            // Arrange
-            const wrapper = shallowMount(coverageStatement, {
-                mixins: [mockMixin]
-            });
 
-            useMainStore().order.damage.isRepair = true;
+//             //Assert
+//             expect(arePagePrerequisitesValid).toBe(false);
+//         });
+//     });
+//     describe("navigation", () => {
+//         test("forwardButtonAction should trigger navigateForward", async () => {
+//             // Arrange
+//             const { wrapper } = setupMocks({});
 
-            // Assert
+//             wrapper.vm.navigateForward = jest.fn();
-            expect(wrapper.vm.bodyText).toEqual('NonADASRepairTestReturn');
-        });
 
-        test('If damage is NonADAS Replace, display NonADASReplace coverage statement', async () => {
+//             // Act
-            // Arrange
+//             await wrapper.vm.forwardButtonAction();
-            const wrapper = shallowMount(coverageStatement, {
-                mixins: [mockMixin]
-            });
 
-            useMainStore().lineItems.glassParts
+//             //Assert
-            = [
+//             expect(wrapper.vm.navigateForward).toHaveBeenCalled();
-                    {
+//         });
-                        requiresRecalibration: false
+//     });
-                    }
+//     describe("display correct coverage statement", () => {
-                ];
+//         test("If damage is Repair, display NonADASRepair coverage statement", async () => {
-            useMainStore().order.damage.isRepair = false;
+//             // Arrange
+//             const wrapper = shallowMount(coverageStatement, {
+//                 mixins: [mockMixin],
+//             });
 
-            // Assert
+//             useMainStore().order.damage.isRepair = true;
-            expect(wrapper.vm.bodyText).toEqual('NonADASReplaceTestReturn');
-        });
 
-        test('If damage is ADAS Replace, display ADASReplace coverage statement', async () => {
+//             // Assert
-            // Arrange
+//             expect(wrapper.vm.bodyText).toEqual("NonADASRepairTestReturn");
-            const wrapper = shallowMount(coverageStatement, {
+//         })
-                mixins: [mockMixin]
-            });
-            useMainStore().lineItems.glassParts = [
-                {
-                    requiresRecalibration: true
-                }
-            ];
-            useMainStore().order.damage.isRepair = false;
 
-            // Assert
+//         test("If damage is NonADAS Replace, display NonADASReplace coverage statement", async () => {
-            expect(wrapper.vm.bodyText).toEqual('ADASReplaceTestReturn');
+//             // Arrange
-        });
+//             const wrapper = shallowMount(coverageStatement, {
-    });
+//                 mixins: [mockMixin],
-    describe('claim registration api call', () => {
+//             });
-        it('claim registration not required => method not called', async () => {
-            // Arrange
-            const wrapper = setupMocks({});
 
-            const store = useMainStore();
+//             useMainStore().lineItems.glassParts =
-            store.isClaimRegistrationRequired = false;
+//             [
+//                 {
+//                     requiresRecalibration: false,
+//                 }
+//             ];
+//             useMainStore().order.damage.isRepair = false;
 
-            const to = {
+//             // Assert
-                query: { issPage: getRandomString(4, 10) }
+//             expect(wrapper.vm.bodyText).toEqual("NonADASReplaceTestReturn");
-            };
+//         })
-            const next = jest.fn();
 
-            // SUT
+//         test("If damage is ADAS Replace, display ADASReplace coverage statement", async () => {
-            coverageStatement.beforeRouteEnter.call(wrapper.vm, to, undefined, next);
+//             // Arrange
+//             const wrapper = shallowMount(coverageStatement, {
+//                 mixins: [mockMixin],
+//             });
+//             useMainStore().lineItems.glassParts = [
+//                 {
+//                     requiresRecalibration: true,
+//                 }
+//             ];
+//             useMainStore().order.damage.isRepair = false;
 
-            // Assert
+//             // Assert
-            expect(store.registerClaim).not.toHaveBeenCalled();
+//             expect(wrapper.vm.bodyText).toEqual("ADASReplaceTestReturn");
-        });
+//         })
+//     });
+//     describe("claim registration api call", () => {
+//         it("claim registration not required => method not called", async () => {
+//             // Arrange
+//             const wrapper = setupMocks({});
 
-        it('claim registration required => register claim method called', async () => {
+//             const store = useMainStore();
-            // Arrange
+//             store.isClaimRegistrationRequired = false;
-            const wrapper = setupMocks({});
 
-            const store = useMainStore();
+//             const to = {
-            store.isClaimRegistrationRequired = true;
+//                 query: { issPage: getRandomString(4,10) }
+//             };
+//             const next = jest.fn();
 
-            const to = {
+//             // SUT
-                query: { issPage: getRandomString(4, 10) }
+//             coverageStatement.beforeRouteEnter.call(wrapper.vm, to, undefined, next)
-            };
-            const next = jest.fn();
 
-            // SUT
+//             // Assert
-            coverageStatement.beforeRouteEnter.call(wrapper.vm, to, undefined, next);
+//             expect(store.registerClaim).not.toHaveBeenCalled();
+//         });
 
-            // Assert
+//         it("claim registration required => register claim method called", async () => {
-            expect(store.registerClaim).toHaveBeenCalled();
+//             // Arrange
-        });
+//             const wrapper = setupMocks({});
-    });
-});
 
-const mockMixin = {
+//             const store = useMainStore();
-    methods: {
+//             store.isClaimRegistrationRequired = true;
-        getCmsContent: jest.fn((contentName) => {
-            if (contentName === 'UnverifiedADASNextStepsWidget') {
-                return 'ADASReplaceTestReturn';
-            }
-            if (contentName === 'UnverifiedNonADASRepairWidget') {
-                return 'NonADASRepairTestReturn';
-            }
-            if (contentName === 'UnverifiedNonADASNextStepsWidget') {
-                return 'NonADASReplaceTestReturn';
-            }
-            return null;
-        })
-    }
-};
 
-function setupMocks({
+//             const to = {
-    pageHeaderWidgetHeaderText,
+//                 query: { issPage: getRandomString(4,10) }
-    mountOptionsMockData = {}
+//             };
-}) {
+//             const next = jest.fn();
-    // Mock api responses
-    const apiResponses = {
-        cmsContent: {
-            SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
-            FunnelHeaderWidget: {
-                LogoImage:
-                    `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`
-            },
-            ColorQuestionWidget: 'Please choose your rear window tint color',
-            FeatureQuestionWidget: 'Ok no choose features',
-            AlertWidget: {
-                BodyText: 'Please choose your tint color',
-                HeadlineText: 'Just a few more steps to go'
-            },
-            unverifiedNonADASRepairBodyText: 'Repair body text'
-        }
-    };
 
-    const apiPromise = Promise.resolve(apiResponses);
+//             // SUT
+//             coverageStatement.beforeRouteEnter.call(wrapper.vm, to, undefined, next)
 
-    settleAllPromises.mockImplementation(() =>
+//             // Assert
-        apiPromise);
+//             expect(store.registerClaim).toHaveBeenCalled();
-    fetchCmsContentForPage.mockImplementation(() =>
+//         });
-        Promise.resolve());
+//     })
+// });
 
-    const mountOptions = getMountOptions({});
+// const mockMixin = {
+//     methods: {
+//         getCmsContent: jest.fn((contentName) => {
+//             if (contentName === "UnverifiedADASNextStepsWidget") {
+//                 return "ADASReplaceTestReturn"
+//             }
+//             else if (contentName === "UnverifiedNonADASRepairWidget") {
+//                 return "NonADASRepairTestReturn"
+//             }
+//             else if (contentName === "UnverifiedNonADASNextStepsWidget") {
+//                 return "NonADASReplaceTestReturn"
+//             }
+//             return null;
+//         }),
+//     }
+// };
 
-    mountOptions.mixins = [baseMixin, vehicleQuestionsMixin];
+// function setupMocks({
-    mountOptions.global = {
+// pageHeaderWidgetHeaderText,
-        plugins: [createTestingPinia()]
+// mountOptionsMockData = {},
-    };
+// }) {
+//     //Mock api responses
+//     const apiResponses = {
+//         cmsContent: {
+//             SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
+//             FunnelHeaderWidget: {
+//                 LogoImage:
+//                     `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
+//             },
+//             ColorQuestionWidget: "Please choose your rear window tint color",
+//             FeatureQuestionWidget: "Ok no choose features",
+//             AlertWidget: {
+//                 BodyText: "Please choose your tint color",
+//                 HeadlineText: "Just a few more steps to go",
+//             },
+//             unverifiedNonADASRepairBodyText: "Repair body text",
+//         },
+//     };
 
-    const wrapper = shallowMount(coverageStatement, mountOptions);
+//     const apiPromise = Promise.resolve(apiResponses);
 
-    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+//     settleAllPromises.mockImplementation(() => apiPromise);
+//     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
-    return { wrapper };
+//     const mountOptions = getMountOptions({});
-}
+
+//     mountOptions.mixins = [baseMixin, vehicleQuestionsMixin];
+//     mountOptions.global = {
+//         plugins: [createTestingPinia()]
+//     }
+    
+//     const wrapper = shallowMount(coverageStatement, mountOptions);
+    
+//     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+
+//     return { wrapper };
+// }

src/layouts/coverage-statement/coverage-statement.vue

@@ -11,29 +11,64 @@ v-slot="{ meta }"
                   <div class="container-fluid pb-2">
                       <div class="row px-3">
                           <div class="col">
-                              <div class="select-car-form rounded pb-1">
+                              <div class="pb-1 mt-4">
-                                  <textBlock
+                                  <h5
-                                    id="coverage-statement-text-block"
+                                    v-html="coverageStatementSubHeader"
-                                    cmsWidgetName="verifyingCoverageStatement"
+                                    class="text-center text-black">
-                                    typeStyle="h5"
+                                  </h5>
-                                    justifyText="center"
+                                  <div
-                                    class="mt-4 mb-4" />
+                                    v-html="explanatoryText"
-                                  <div>
+                                    class="body-text text-center mt-4">
-                                    <p
-                                    class="mt-0 small"
-                                    v-html="continueWithSchedulingBodyText"></p>
                                   </div>
-                                  <textBlock
+                                  <div
-                                    id="coverage-statement-text-block"
+                                    v-html="secondaryText"
-                                    cmsWidgetName="whatHappensNextCopy"
+                                    class="text-center mt-4 fw-bold text-black">
-                                    class="mt-4 mb-2 fw-bold" />
-                                  <div>
-                                    <p
-                                    ref="coverageStatementBodyText"
-                                    class="small"
-                                    v-html="bodyText"></p>
                                   </div>
-                                  <steeringText cmsWidgetName="MASteeringText"></steeringText>
+                                  <div
+                                    v-if="verifiedDeductible"
+                                    class="d-flex justify-content-center cost">
+                                    {{ formattedDeductible }}
+                                  </div>
+                                  <div
+                                    v-if="displayQuote"
+                                    class="d-flex justify-content-center cost mb-1">
+                                    {{ formattedServicePrice }}
+                                  </div>
+                                  <div
+                                    v-if="verifiedITAC"
+                                    class="d-flex justify-content-center mb-4"> 
+                                    {{ deductibleText }}&nbsp;
+                                    <span class="text-success fw-bold">{{ formattedDeductible }}</span>
+                                  </div>
+                                  <alert
+                                    ref="verifiedITACAlert"
+                                    v-if="verifiedITAC"
+                                    class="mb-4"
+                                    cmsWidgetName="VerifiedITACAlert"
+                                    :manualHeadline="verifiedITACAlertHeader"
+                                    :manualCopy="verifiedITACAlertBody"
+                                    alertClass="alert-success"
+                                    v-bind:isDismissible="false">
+                                  </alert>
+                                  <div
+                                    v-html="nextStepsHeader"
+                                    class="fw-bold text-black mb-2">
+                                  </div>
+                                  <div
+                                    v-html="nextStepsBody"
+                                    class="body-text">
+                                  </div>
+                                  <buttonQuestion
+                                    v-if="displayQuote"
+                                    cmsWidgetName="ServiceProviderQuestion"
+                                    :questionText="questionText"
+                                    :answers="answersFromCms"
+                                    buttonTypeString="listButton"
+                                    isRequired
+                                    v-model="selectedProvider"
+                                    validationRules="selection-required"
+                                    id="coverage-button-question">
+                                  </buttonQuestion>
                               </div>
                               <siteFooter
                                 ref="siteFooter"
@@ -48,144 +83,417 @@ v-slot="{ meta }"
               </div>
           </div>
       </div>
-      <recalModal
+      <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
-ref="RecalModal"
+      <contentGroupModal ref="DeductibleModal" cmsWidgetName="DeductibleModal" class="deductible-modal"/>
-cmsWidgetName="RecalModal" />
   </Form>
 </template>
 <script>
 
 // Import Component
-import { Form } from 'vee-validate';
+import baseFormMixin from '@/mixins/base-form-mixin';
-import siteFooter from '@/iss-components/site-footer/site-footer';
+import { Form, defineRule } from 'vee-validate';
-import siteHeader from '@/iss-components/site-header/site-header';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import textBlock from '@/digital-components/text-block/text-block';
+import siteHeader from '@/iss-components/site-header/site-header.vue';
-import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import steeringText from '@/iss-components/steering-text/steering-text';
+import textBlock from "@/digital-components/text-block/text-block";
+import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
+import alert from "@/ux-components/alert/alert";
+import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal';
+import buttonQuestion from "@/digital-components/button-question/button-question";
+
 // Import Supporting Files
 import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper.js';
 import { settleAllPromises } from '@/helpers/layout-helper.js';
 import { getDamageString } from '@/helpers/damage-helper.js';
-import { useMainStore } from '@/store/index.js';
+import { useMainStore } from "@/store";
-import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
-import baseFormMixin from '@/mixins/base-form-mixin.js';
+import { processIfStatements } from '@/helpers/cms-content-helper';
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+// DEFINE VALIDATION RULES
+defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
+
+const store = useMainStore();
 
 export default {
-    name: 'coverage-statement',
+  name: 'coverage-statement',
-    components: {
+  mixins: [baseFormMixin, vehicleQuestionsMixin],
-        siteFooter,
+  async beforeRouteEnter(to, from, next) {
-        siteHeader,
+    // Call APIs
-        // eslint-disable-next-line vue/no-reserved-component-names
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        Form,
-        textBlock,
-        recalModal,
-        steeringText
-    },
-    mixins: [baseFormMixin, vehicleQuestionsMixin],
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
     
-        // Settle promises and get results
+    const supportingItemsPromise = await store.getSupportingItems();
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
-        ];
 
-        if (useMainStore().isClaimRegistrationRequired && !useMainStore().policy.noCoverage) {
+    // Settle promises and get results
-            const registerClaimResponse = await useMainStore().registerClaim();
+    const promiseResultMap = [
-            promiseResultMap.push({
+        {
-                resultKey: 'registerClaim',
+            resultKey: 'cmsContent',
-                promise: registerClaimResponse
+            promise: cmsContentPromise,
-            });
-        }
-
-        const resultMap = await settleAllPromises(promiseResultMap);
-
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-        });
-    },
-    computed: {
-        bodyText() {
-            if (useMainStore().damage.isRepair) {
-                return this.unverifiedNonADASRepairBodyText;
-            }
-
-            const parts = useMainStore().lineItems.glassParts;
-
-            // if ADAS, display ADASNextSteps
-            if (parts != null && parts.filter((part) =>
-                part.requiresRecalibration).length > 0) {
-                return this.unverifiedADASNextStepsBodyText;
-            }
-            // if non-ADAS, display NonADASNextSteps
-
-            return this.unverifiedNonADASNextStepsBodyText;
         },
-        continueWithSchedulingBodyText() {
+        {
-            return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
+            resultKey: 'supportingItems',
-        },
+            promise: supportingItemsPromise,
-        unverifiedADASNextStepsBodyText() {
-            return this.getCmsContent('UnverifiedADASNextStepsWidget', 'BodyText').replaceAll('{custom:damage}', this.damageText);
-        },
-        unverifiedNonADASNextStepsBodyText() {
-            return this.getCmsContent('UnverifiedNonADASNextStepsWidget', 'BodyText').replaceAll('{custom:damage}', this.damageText);
-        },
-        unverifiedNonADASRepairBodyText() {
-            return this.getCmsContent('UnverifiedNonADASRepairWidget', 'BodyText');
-        },
-        damageText() {
-            const damageString = getDamageString();
-            return damageString === 'match' ? '' : damageString;
-        }
-    },
-    mounted() {
-        setupModalLinks(this);
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            if (useMainStore().vehicle.vin) {
-                return true;
-            }
-            return false;
         },
+    ];
 
-        async forwardButtonAction() {
+    if (useMainStore().isClaimRegistrationRequired){
-            return this.navigateForward();
+      const registerClaimResponse = await useMainStore().registerClaim();
-        },
+      promiseResultMap.push({
-
+          resultKey: 'registerClaim',
-        navigateForward() {
+          promise: registerClaimResponse,
-            this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD,
+      });
-                this.$route);
-        }
     }
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    const clonedGlassParts = store.order.lineItems.glassParts
+    ? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
+    : [];
+    const availableLineItems = [
+        ...resultMap.supportingItems,
+        ...clonedGlassParts,
+    ];
+
+    const pricingResults = await store.getPriceOrderItems(availableLineItems);
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+      vm.pricedGlassParts = clonedGlassParts;
+      vm.supportingItems = resultMap.supportingItems;
+      vm.availableLineItems = pricingResults;
+    });
+  },
+  components: {
+      siteFooter,
+      siteHeader,
+      siteSubHeader,
+      Form,
+      textBlock,
+      recalModal,
+      alert,
+      contentGroupModal,
+      buttonQuestion
+  },
+  mounted() { 
+    setupModalLinks(this);
+  },
+  data() {
+    return {
+      isVerified: store.order.payment.insuranceCoverage.isVerified,
+      supportingItems: [],
+      pricedGlassParts: [],
+      availableLineItems: [],
+      selectedProvider: "",
+      deductibleText: "Your deductible is:",
+    }
+  },
+  computed: {
+    verifiedITACAlertHeader() {
+      return this.getCmsContent(
+        "VerifiedITACAlert",
+        "HeadlineText"
+      )
+    },
+    verifiedITACAlertBody() {
+      return this.getCmsContent(
+        "VerifiedITACAlert",
+        "BodyText"
+      ).replaceAll("{custom:costSavings}", this.costSavings);
+    },
+    coverageStatementSubHeader() {
+      const subheader = this.getSubheaderTextFromCms("SiteSubHeaderWidget");
+      return subheader;
+    },
+    secondaryText() {
+      const secondaryText = this.getSecondaryTextFromCms("SiteSubHeaderWidget");
+      return secondaryText;
+    },
+    explanatoryText() {
+      const explanatoryText = this.getExplantoryTextFromCms("ExplanatoryTextWidget");
+      return explanatoryText;
+    },
+    nextStepsHeader() {
+      const header = this.getHeaderTextFromCms("NextStepsWidget");
+      return header;
+    },
+    nextStepsBody() {
+      let body = this.getBodyTextFromCms("NextStepsWidget").replaceAll("{custom:damage}", this.damageText);
+      return body;
+    },
+    continueWithSchedulingBodyText() {
+      return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
+    },
+    unverifiedADASNextStepsBodyText() {
+      return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
+    },
+    unverifiedNonADASNextStepsBodyText() {
+      return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
+    },
+    unverifiedNonADASRepairBodyText() {
+      return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
+    },
+    damageText() {
+      var damageString = getDamageString();
+      return damageString == "match" ? "" : damageString;
+    },
+    vehicleDeductible() {
+      if (this.coverageVerified) {
+        if (store.order.damage.isRepair) {
+          const repairDeductible = store.order.policy.deductible.repair
+          return repairDeductible;
+        }
+        else {
+          const replaceDeductible = store.order.policy.deductible.replace;
+          return replaceDeductible;
+        }
+      }
+    },
+    formattedDeductible() {
+      return this.getDeductibleString(this.vehicleDeductible);
+    },
+    isDeductibleZero() {
+      if (this.coverageVerified && this.verifiedDeductible) {
+        return this.vehicleDeductible === 0;
+      }
+    },
+    deductibleOverZero() {
+      if (this.coverageVerified && this.verifiedDeductible) {
+        return !this.isDeductibleZero;
+      }
+    },
+    coverageVerified() {
+      return this.isVerified;
+    },
+    coverageUnverified() {
+      return !this.isVerified;
+    },
+    verifiedNoComp() {
+      if (this.coverageVerified) {
+        return store.order.policy.noCoverage;
+      }
+    },
+    verifiedITAC() {
+      if (this.coverageVerified && !this.verifiedNoComp) {
+        if (this.vehicleDeductible > this.totalServicePrice) {
+          return true;
+        }
+      }
+    },
+    verifiedDeductible() {
+      if (this.coverageVerified && !this.verifiedNoComp) {
+        if (this.totalServicePrice > this.vehicleDeductible) {
+          return true;
+        }
+      }
+    },
+    ADASReplace() {
+      if (!store.order.damage.isRepair) {
+        let parts = store.order.lineItems.glassParts;
+
+        if (parts != null && parts.filter(part => part.requiresRecalibration).length > 0) {
+          return true;
+        }
+      }
+    },
+    nonADASReplace() {
+      if (!store.order.damage.isRepair) {
+        return !this.ADASReplace;
+      }
+    },
+    nonADASRepair() {
+      if (store.order.damage.isRepair) {
+        return true;
+      }
+    },
+    totalServicePrice() {
+      let total = 0;
+      this.availableLineItems.forEach((lineItem) => {
+        total += this.getTotalLineItemPrice(lineItem);
+      })
+      return total;
+    },
+    formattedServicePrice() {
+      return this.getServicePriceString(this.totalServicePrice);
+    },
+    costSavings() {
+      const savings = this.getITACCostSavings(this.vehicleDeductible, this.totalServicePrice);
+      const formattedSavings = parseFloat(savings).toFixed(2);
+      return '$' + formattedSavings;
+    },
+    questionText() {
+      return this.getCmsContent("ServiceProviderQuestion", "QuestionText");
+    },
+    answersFromCms() {
+      return this.getCmsContent("ServiceProviderQuestion", "Answers");
+    },
+    displayQuote() {
+      if (this.verifiedITAC || this.verifiedNoComp) {
+        return true;
+      }
+    },
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      if (useMainStore().vehicle.vin) {
+          return true;
+      }
+      return false;
+    },
+    async forwardButtonAction() {
+      return await this.navigateForward();
+
+    },
+    async navigateForward() {
+      if (this.coverageUnverified || this.verifiedDeductible) {
+        this.$router.navigate(
+            this.navigationScenarios.CLICKED_FORWARD,
+            this.$route
+        )
+      }
+      else if (this.verifiedITAC || this.verifiedNoComp) {
+        if (this.selectedProvider === "Safelite") {
+          this.$router.navigate(
+            this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
+            this.$route
+          )
+        }
+        else if (store.issConfig.enableTPAFlow){
+          this.$router.navigate(
+            this.navigationScenarios.CLICKED_FORWARD_WITH_THIRD_PARTY,
+            this.$route
+          )
+        }
+        else {
+          this.$router.navigate(
+            this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+            this.$route
+          )
+        }
+      }
+    },
+    openModalAction(modalName) {
+      this.$refs[modalName.args].openModal();
+    },
+    processIfStatements,
+    getHeaderTextFromCms(cmsWidgetName) {
+      const header = this.getCmsContent(cmsWidgetName, 'HeaderText');
+      return this.processIfStatements(header, "custom", this.getCustomValueFromString);
+    },
+    getSubheaderTextFromCms(cmsWidgetName) {
+      const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText');
+      return this.processIfStatements(subHeader, "custom", this.getCustomValueFromString);
+    },
+    getBodyTextFromCms(cmsWidgetName) {
+      const bodyText = this.getCmsContent(cmsWidgetName, "BodyText");
+      return this.processIfStatements(bodyText, "custom", this.getCustomValueFromString);
+    },
+    getSecondaryTextFromCms(cmsWidgetName) {
+      const secondaryText = this.getCmsContent(cmsWidgetName, "SecondaryText");
+      return this.processIfStatements(secondaryText, "custom", this.getCustomValueFromString);
+    },
+    getExplantoryTextFromCms(cmsWidgetName) {
+      const explanatoryText = this.getCmsContent(cmsWidgetName, "BodyText");
+      return this.processIfStatements(explanatoryText, "custom", this.getCustomValueFromString);
+    },
+    getCustomValueFromString(str) {
+      switch (str) {
+        case 'coverageUnverified':
+          return this.coverageUnverified;
+        case 'verifiedDeductible':
+          return this.verifiedDeductible;
+        case 'verifiedITAC':
+          return this.verifiedITAC;
+        case 'verifiedNoComp':
+          return this.verifiedNoComp;
+        case 'ADASReplace':
+          return this.ADASReplace;
+        case 'nonADASReplace':
+          return this.nonADASReplace;
+        case 'nonADASRepair':
+          return this.nonADASRepair;
+        case 'deductibleOverZero':
+          return this.deductibleOverZero
+        case 'isDeductibleZero':
+          return this.isDeductibleZero
+        default:
+          return null;
+      }
+    },
+    getTotalLineItemPrice(lineItem) {
+      return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
+    },
+    getDeductibleString(deductible) {
+      const formattedDeductibleFloat = parseFloat(deductible).toFixed(2);
+        return '$' + formattedDeductibleFloat;
+    },
+    getServicePriceString(price) {
+      const formattedPriceFloat = parseFloat(price).toFixed(2);
+        return '$' + formattedPriceFloat;
+    },
+    getITACCostSavings(vehicleDeductible, totalServicePrice) {
+      const savings = vehicleDeductible - totalServicePrice;
+      return savings;
+    }
+  },
+  watch: {
+    selectedProvider() {
+      if (this.selectedProvider === "Safelite") {
+        this.$refs.siteFooter.updateButtonText('Continue with Safelite');
+      }
+      else {
+        this.$refs.siteFooter.updateButtonText('Continue');
+      }
+    }
+  }
 };
 </script>
 
 <style lang="scss">
-ol {
+.body-text {
-  margin-left: -1rem;
+  p {
-  margin-bottom:0;
+    font-size: 14px;
-  li {
+    line-height: 24px;
-      margin-bottom: .5rem;
+    margin-bottom: 8px;
-      line-height: 1.5rem;
-      a {
-          line-height: 1.5rem;
-          padding: 0;
-      }
   }
 }
-#coverage-statement-text-block {
+
-  color: $black;
+.cost {
+  color: $green;
+  font-size: 32px;
+  font-weight: 300;
+  margin-bottom: 24px;
+  line-height: 44px;
 }
-p strong {
+
-  color: $black;
+#coverage-button-question {
-  font-weight: 500;
+  .question-text {
+    margin-bottom: 8px;
+  }
+  .question-text > span {
+    text-align: left;
+    line-height: 24px;
+  }
 }
-p.small{
+
-    margin-bottom:0;
+.deductible-modal {
+  p {
+    margin-bottom: 0px;
+  }
+
+  .modal-body p:last-child {
+    font-size: 16px;
+    line-height: 26px;
+  }
+  
+  .my-4 {
+    margin-top: 8px !important;
+    margin-bottom: 0px !important;
+  }
+
+  img.mb-4 {
+    margin: 0 !important;
+  }
 }
 </style>

src/router/router-constants/navigation-scenarios.js

@@ -63,7 +63,6 @@ const navigationScenarios = {
 
     // Bailout
     CLICKED_FORWARD_WITH_BAILOUT: 'CLICKED_FORWARD_WITH_BAILOUT'
-
 };
 
 export { navigationScenarios };

src/router/router-constants/routing-table.js

@@ -505,7 +505,6 @@ const routingTable = function (store) {
                 }
             ]
         },
-
         {
             issPageValue: issPageValues.REVIEW_PAGE,
             maps: [

src/store/index.js

@@ -374,6 +374,7 @@ export const useMainStore = defineStore({
         // TODO: replace place holder correlationId with the real thing
             const placeHolderCorrelationId = '00000000-0000-0000-0000-000000000000';
             const nonNumberCharRegex = /[^0-9]/g;
+            const order = this.order;
             globalMethods.callHttpClient({
                 method: endpoints.RegisterClaim.method,
                 endpoint: endpoints.RegisterClaim.url,
@@ -427,7 +428,7 @@ export const useMainStore = defineStore({
                 }
             }).then((response) => {
                 const registerClaimFailed = response.data.isError;
-                this.order.payment.insuranceCoverage.isVerified = !registerClaimFailed;
+                order.payment.insuranceCoverage.isVerified = !registerClaimFailed;
                 if (registerClaimFailed) {
                     this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
                 } else if (this.policy.noCoverage) {