merged

src/digital-components/base-input-button/base-input-button.vue

@@ -46,7 +46,8 @@ export default {
         const fieldOptions = {
             type: inputType,
             validateOnValueUpdate: false,
-            validateOnMount: false
+            validateOnMount: false,
+            validateOnBlur: false
         };
 
         const { handleChange, meta, errors }

src/helpers/cms-content-helper.js

@@ -162,7 +162,7 @@ function mapStringToModal(str) {
     const params = linkToReplace.substring((dynamicStrings.MODAL_LINK).length + 2, linkToReplace.length - 1);
     const splitParams = params.split(',');
 
-    const bodyText = `<a modalTarget="${splitParams[0]}" class="modal-text" aria-label="Modal window">${splitParams[1]}</a>`;
+    const bodyText = '<button modalTarget="' + splitParams[0] + '" class="modal-text" aria-label="Modal window"><span>' + splitParams[1] + '</span></button>';
 
     let returnVal = str.replace(linkToReplace, bodyText);
 

src/iss-components/loading-modal/loading-modal.spec.js

@@ -26,4 +26,16 @@ describe('loadingModal', () => {
         expect(wrapper.vm.isModalVisible).toEqual(true);
         wrapper.unmount();
     });
+    test('hideModal sets modal invisible', async () => {
+        // Arrange
+        const { wrapper } = setupMocks();
+        wrapper.vm.isModalVisible = true;
+
+        // Act
+        wrapper.vm.hideModal();
+
+        // Assert
+        expect(wrapper.vm.isModalVisible).toEqual(false);
+        wrapper.unmount();
+    });
 });

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

@@ -16,32 +16,10 @@
                 <div class="row">
                     <div class="col">
                         <div class="text-container slide">
-                            <p>
+                            <p
-                                Finding shops near you
+                                v-for="text in textSlides"
-                                <span class="dot-1">.</span>
+                                :key="text">
-                                <span class="dot-2">.</span>
+                                {{ text }}
-                                <span class="dot-3">.</span>
-                            </p>
-                            <p>
-                                Looking for dates
-                                <span class="dot-1">.</span>
-                                <span class="dot-2">.</span>
-                                <span class="dot-3">.</span>
-                            </p>
-                            <p>
-                                Searching for times
-                                <span class="dot-1">.</span>
-                                <span class="dot-2">.</span>
-                                <span class="dot-3">.</span>
-                            </p>
-                            <p>
-                                Nearly there
-                                <span class="dot-1">.</span>
-                                <span class="dot-2">.</span>
-                                <span class="dot-3">.</span>
-                            </p>
-                            <p>
-                                Finishing up
                                 <span class="dot-1">.</span>
                                 <span class="dot-2">.</span>
                                 <span class="dot-3">.</span>
@@ -56,7 +34,10 @@
 
 <script>
 export default {
-    name: 'modal',
+    name: 'loading-modal',
+    props: {
+        textSlides: Array
+    },
     data() {
         return {
             isModalVisible: false
@@ -75,7 +56,11 @@ export default {
                         }, 10);
                     }
                 },
-                false);
+                false
+            );
+        },
+        hideModal() {
+            this.isModalVisible = false;
         }
     }
 };

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -1,7 +1,9 @@
 <template>
     <div :class="`page-container-grouped-styles questions-page`">
         <div class="fade-on-route-transition position-relative">
-            <loadingModal ref="loadingModal" />
+            <loadingModal
+                ref="loadingModal"
+                :textSlides="loadingText" />
             <siteHeader cmsWidgetName="SiteHeaderWidget" />
             <div class="select-car">
                 <div class="container-fluid pb-2">
@@ -77,6 +79,7 @@ export default {
         questionsData: Array,
         validationRules: String,
         modelValue: Object,
+        loadingText: Array,
         index: Number
     },
     emits: ['update:modelValue', 'forwardButtonAction', 'back-click'],

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

@@ -6,7 +6,10 @@
     @invalidSubmit="onInvalidSubmit">
       <div class="page-container-grouped-styles">
           <div class="fade-on-route-transition position-relative">
-              <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader"/>
+              <loadingModal
+                ref="loadingModal"
+                :textSlides="loadingText" />
+              <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
               <div class="select-car">
                   <div class="container-fluid pb-2">
                       <div class="row px-3">
@@ -105,6 +108,7 @@ import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal';
 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 loadingModal from '@/iss-components/loading-modal/loading-modal';
 
 // Import Supporting Files
 import { fetchCmsContentForPage, setupModalLinks, processIfStatements } from '@/helpers/cms-content-helper.js';
@@ -127,14 +131,14 @@ export default {
         alert,
         contentGroupModal,
         buttonQuestion,
-        navigationScenarios
+        loadingModal
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
     // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
     
-    const supportingItemsPromise = await useMainStore().getSupportingItems();
+        const supportingItemsPromise = await useMainStore().getSupportingItems();
 
         // Settle promises and get results
         const promiseResultMap = [
@@ -148,33 +152,21 @@ export default {
             }
         ];
 
-        if (useMainStore().policy.policyLookupSuccessful
-        && useMainStore().isClaimRegistrationRequired
-        && !useMainStore().policy.noCoverage) {
-            const registerClaimResponse = await useMainStore().registerClaim();
-            promiseResultMap.push({
-                resultKey: 'registerClaim',
-                promise: registerClaimResponse
-            });
-        }
-
         const resultMap = await settleAllPromises(promiseResultMap);
 
-    const clonedGlassParts = useMainStore().order.lineItems.glassParts
+        const clonedGlassParts = useMainStore().order.lineItems.glassParts
-    ? JSON.parse(JSON.stringify(useMainStore().order.lineItems.glassParts))
+            ? JSON.parse(JSON.stringify(useMainStore().order.lineItems.glassParts))
-    : [];
+            : [];
-    const availableLineItems = [
+        const availableLineItems = [
-        ...resultMap.supportingItems,
+            ...resultMap.supportingItems,
-        ...clonedGlassParts,
+            ...clonedGlassParts,
-    ];
+        ];
 
-    const pricingResults = await useMainStore().getPriceOrderItems(availableLineItems);
+        const pricingResults = await useMainStore().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;
         });
     },
@@ -184,12 +176,18 @@ export default {
     },
     data() {
         return {
-            isVerified: useMainStore().order.payment.insuranceCoverage.isVerified,
+            // isVerified: useMainStore().order.payment.insuranceCoverage.isVerified,
-            supportingItems: [],
+            // supportingItems: [],
-            pricedGlassParts: [],
+            // pricedGlassParts: [],
             availableLineItems: [],
             selectedProvider: '',
             deductibleText: 'Your deductible is:',
+            // TODO update when design team gives appropriate text
+            loadingText: [
+                'Connecting to your insurance company',
+                'Nearly there',
+                'Finishing up'
+            ],
             rules: {
                 selectionRequired: globalRules.OPTION_REQUIRED
             }
@@ -241,65 +239,50 @@ export default {
             return damageString === 'match' ? '' : damageString;
         },
         vehicleDeductible() {
-            if (this.coverageVerified) {
+            if (this.mainStore.order.damage.isRepair) {
-                if (this.mainStore.order.damage.isRepair) {
+                const repairDeductible = this.mainStore.order.policy.deductible.repair;
-                    const repairDeductible = this.mainStore.order.policy.deductible.repair;
+                return repairDeductible;
-                    return repairDeductible;
-                }
-
-                const replaceDeductible = this.mainStore.order.policy.deductible.replace;
-                return replaceDeductible;
             }
-            return null;
+
+            const replaceDeductible = this.mainStore.order.policy.deductible.replace;
+            return replaceDeductible;
         },
         formattedDeductible() {
             return this.getDeductibleString(this.vehicleDeductible);
         },
         isDeductibleZero() {
-            if (this.coverageVerified && this.verifiedDeductible) {
+            return this.vehicleDeductible === 0;
-                return this.vehicleDeductible === 0;
-            }
-            return null;
         },
-        deductibleOverZero() {
+        policyLookupSuccessful() {
-            if (this.coverageVerified && this.verifiedDeductible) {
+            return useMainStore().order.policy.policyLookupSuccessful;
-                return !this.isDeductibleZero;
-            }
-            return null;
         },
-        coverageVerified() {
+        registerClaimSuccessful() {
-            return this.isVerified;
+            return useMainStore().payment.insuranceCoverage.isVerified;
-        },
-        coverageUnverified() {
-            return !this.isVerified && !this.verifiedNoComp;
         },
         verifiedNoComp() {
-            return this.mainStore.order.policy.noCoverage;
+            return this.policyLookupSuccessful ? store.order.policy.noCoverage : false;
         },
         verifiedITAC() {
-            return this.coverageVerified
+            return this.policyLookupSuccessful
                 && !this.verifiedNoComp
                 && this.vehicleDeductible > this.totalServicePrice;
         },
+        coveredAndServicePriceAboveOrEqualDeductible() {
+            return !this.verifiedNoComp && this.totalServicePrice >= this.vehicleDeductible;
+        },
         verifiedDeductible() {
-            return this.coverageVerified
+            return this.isClaimRegistrationRequired
-                && !this.verifiedNoComp
+                ? this.registerClaimSuccessful && this.coveredAndServicePriceAboveOrEqualDeductible
-                && this.totalServicePrice > this.vehicleDeductible;
+                : this.policyLookupSuccessful && this.coveredAndServicePriceAboveOrEqualDeductible;
         },
-        ADASReplace() {
+        unverified() {
-            if (!this.mainStore.order.damage.isRepair) {
+            return !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp;
-                const parts = this.mainStore.order.lineItems.glassParts;
-
-                if (parts != null && parts.filter((part) => part.requiresRecalibration).length > 0) {
-                    return true;
-                }
-            }
-            return false;
         },
-        nonADASReplace() {
+        isADAS() {
-            return !this.ADASReplace;
+            const parts = store.order.lineItems.glassParts;
+            return parts != null && parts.find((part) => part.requiresRecalibration);
         },
-        nonADASRepair() {
+        isRepair() {
             return this.mainStore.order.damage.isRepair;
         },
         totalServicePrice() {
@@ -337,7 +320,22 @@ export default {
         }
     },
     mounted() {
+        this.$refs.loadingModal.showModal();
         setupModalLinks(this);
+        const vm = this;
+        if (this.policyLookupSuccessful
+            && useMainStore().isClaimRegistrationRequired
+            && this.coveredAndServicePriceAboveOrEqualDeductible) {
+            useMainStore().registerClaim().then((r) => {
+                vm.$refs.loadingModal.hideModal();
+                return r;
+            }, (r) => {
+                vm.$refs.loadingModal.hideModal();
+                return r;
+            });
+        } else {
+            vm.$refs.loadingModal.hideModal();
+        }
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -350,18 +348,18 @@ export default {
             return this.navigateForward();
         },
         async navigateForward() {
-            if (this.coverageUnverified || this.verifiedDeductible) {
+            if (this.unverified || this.verifiedDeductible) {
                 this.$router.navigate(navigationScenarios.CLICKED_FORWARD,
                     this.$route);
             } else if (this.verifiedITAC || this.verifiedNoComp) {
                 if (this.selectedProvider === 'Safelite') {
                     this.$router.navigate(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
                         this.$route);
-                } else if (this.selectedProvider === 'Other' && this.mainStore.issConfig.enableTPAFlow) {
+                } else if (store.issConfig.enableTPAFlow) {
-                    this.$router.navigate(navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED,
+                    this.$router.navigate(navigationScenarios.CLICKED_FORWARD_WITH_THIRD_PARTY,
                         this.$route);
                 } else {
-                    this.$router.navigate(navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED,
+                    this.$router.navigate(navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
                         this.$route);
                 }
             }
@@ -397,7 +395,7 @@ export default {
         getCustomValueFromString(str) {
             switch (str) {
             case 'coverageUnverified':
-                return this.coverageUnverified;
+                return this.unverified;
             case 'verifiedDeductible':
                 return this.verifiedDeductible;
             case 'verifiedITAC':
@@ -405,15 +403,15 @@ export default {
             case 'verifiedNoComp':
                 return this.verifiedNoComp;
             case 'ADASReplace':
-                return this.ADASReplace;
+                return !this.isRepair && this.isADAS;
             case 'nonADASReplace':
-                return this.nonADASReplace;
+                return !this.isRepair && !this.isADAS;
             case 'nonADASRepair':
-                return this.nonADASRepair;
+                return this.isRepair;
             case 'deductibleOverZero':
-                return this.deductibleOverZero;
+                return this.verifiedDeductible && !this.isDeductibleZero; // TODO what if deductible is negative?
             case 'isDeductibleZero':
-                return this.isDeductibleZero;
+                return this.verifiedDeductible && this.isDeductibleZero;
             default:
                 return null;
             }

src/layouts/provider-preference/provider-preference.vue

@@ -218,12 +218,6 @@ export default {
     color: $black;
 }
 
-.modal-link a{
-    color: $blue-700;
-    font-size: 14px;
-    line-height: 24px;
-    font-weight: 500;
-}
 .question-text {
     margin-top: 0;
     margin-bottom: .5rem;

src/layouts/service-packages/service-packages.vue

@@ -32,7 +32,9 @@
                 </div>
             </div>
         </div>
-        <loadingModal ref="loadingModal" />
+        <loadingModal
+            ref="loadingModal"
+            :textSlides="loadingText" />
         <contentGroupModal
             ref="RainDefenseModal"
             cmsWidgetName="RainDefenseModal" />
@@ -133,6 +135,13 @@ export default {
             availableLineItems: [],
             supportingItems: [],
             pricedGlassParts: [],
+            loadingText: [
+                'Finding shops near you',
+                'Looking for dates',
+                'Searching for times',
+                'Nearly there',
+                'Finishing up'
+            ],
             rules: {
                 optionRequired: globalRules.OPTION_REQUIRED
             }

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -89,7 +89,6 @@ export default {
         forwardButtonAction() {
             switch (this.selectedVinLookupMethod) {
             case vinLookupMethodSelections.MANUALVIN:
-                useMainStore().updateVehicleVin(null);
                 this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
                 break;
             case vinLookupMethodSelections.LICENSEPLATE:

src/layouts/vin-lookup/vin-lookup.vue

@@ -159,7 +159,7 @@ export default {
                     //  because the form itself actually passes its client-side validation.
                     //  SSR-189 Scenario #4.
                     this.$refs.siteFooter.enableForwardAction();
-                    this.bailout = true
+                    this.bailout = true;
                 }
 
                 if (this.bailout) {
@@ -190,8 +190,8 @@ export default {
 
             let isSelectedGlassAvailableForVehicle = true;
             if (this.isCarIdDifferentFromTheStore) {
-                isSelectedGlassAvailableForVehicle =
+                isSelectedGlassAvailableForVehicle
-                await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
+                 = await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
             }
 
             // navigate back to vehicle-damage

src/store/index.js

@@ -363,7 +363,7 @@ export const useMainStore = defineStore({
                         correlationId: placeHolderCorrelationId
                     }
                 }).then((r) => {
-                    const responsePolicy = response.policies?.[0];
+                    const responsePolicy = r.data.policies?.[0];
                     policy.policyLookupSuccessful = !!responsePolicy;
                     return r;
                 });
@@ -381,71 +381,75 @@ 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;
+            const { order } = this;
-            globalMethods.callHttpClient({
+            return new Promise((resolve, reject) => {
-                method: endpoints.RegisterClaim.method,
+                globalMethods.callHttpClient({
-                endpoint: endpoints.RegisterClaim.url,
+                    method: endpoints.RegisterClaim.method,
-                payload:
+                    endpoint: endpoints.RegisterClaim.url,
-                {
+                    payload:
-                    correlationId: placeHolderCorrelationId,
+                    {
-                    accountNumber: this.issConfig.accountNumber?.toString() ?? '',
+                        correlationId: placeHolderCorrelationId,
-                    insured: {
+                        accountNumber: this.issConfig.accountNumber?.toString() ?? '',
-                        firstName: this.order.customer.firstName,
+                        insured: {
-                        lastName: this.order.customer.lastName,
+                            firstName: this.order.customer.firstName,
-                        address: {
+                            lastName: this.order.customer.lastName,
-                            addressLine1: this.order.customer.address.streetAddress,
+                            address: {
-                            addressLine2: this.order.customer.address.streetAddress2,
+                                addressLine1: this.order.customer.address.streetAddress,
-                            city: this.order.customer.address.city,
+                                addressLine2: this.order.customer.address.streetAddress2,
-                            state: this.order.customer.address.state,
+                                city: this.order.customer.address.city,
-                            zipCode: this.order.customer.address.zipCode,
+                                state: this.order.customer.address.state,
-                            country: 'US' // TODO set from store
+                                zipCode: this.order.customer.address.zipCode,
+                                country: 'US' // TODO set from store
+                            },
+                            homePhone: {
+                                number: this.order.customer.phoneNumber?.replaceAll(nonNumberCharRegex, '') ?? ''
+                            }
                         },
-                        homePhone: {
+                        driver: {
-                            number: this.order.customer.phoneNumber?.replaceAll(nonNumberCharRegex, '') ?? ''
+                            firstName: this.order.customer.firstName,
+                            lastName: this.order.customer.lastName
+                        },
+                        caller: {
+                            homePhone: {}
+                        },
+                        policyInfo: {
+                            policyNumber: this.order.policy.policyNumber,
+                            safelitePolicy: {
+                                policies: []
+                            }
+                        },
+                        lossInfo: {
+                            dateOfLoss: this.order.policy.dateOfLoss,
+                            location: {
+                                city: this.order.policy.damageCity,
+                                state: this.order.policy.damageState,
+                                country: 'US' // TODO set from store
+                            },
+                            vehicle: {
+                                year: this.order.vehicle.year?.toString() ?? '',
+                                make: this.order.vehicle.make,
+                                model: this.order.vehicle.model,
+                                vin: this.order.vehicle.vin
+                            },
+                            damageDescription: this.order.policy.damageCause
                         }
-                    },
-                    driver: {
-                        firstName: this.order.customer.firstName,
-                        lastName: this.order.customer.lastName
-                    },
-                    caller: {
-                        homePhone: {}
-                    },
-                    policyInfo: {
-                        policyNumber: this.order.policy.policyNumber,
-                        safelitePolicy: {
-                            policies: []
-                        }
-                    },
-                    lossInfo: {
-                        dateOfLoss: this.order.policy.dateOfLoss,
-                        location: {
-                            city: this.order.policy.damageCity,
-                            state: this.order.policy.damageState,
-                            country: 'US' // TODO set from store
-                        },
-                        vehicle: {
-                            year: this.order.vehicle.year?.toString() ?? '',
-                            make: this.order.vehicle.make,
-                            model: this.order.vehicle.model,
-                            vin: this.order.vehicle.vin
-                        },
-                        damageDescription: this.order.policy.damageCause
                     }
-                }
+                }).then((response) => {
-            }).then((response) => {
+                    const registerClaimFailed = response.data.isError;
-                const registerClaimFailed = response.data.isError;
+                    order.payment.insuranceCoverage.isVerified = !registerClaimFailed;
-                order.payment.insuranceCoverage.isVerified = !registerClaimFailed;
+                    if (registerClaimFailed) {
-                if (registerClaimFailed) {
+                        this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
+                    } else if (this.policy.noCoverage) {
+                        this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.NO_COMP;
+                    } else {
+                        this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED;
+                    }
+                    return resolve(response);
+                }, (error) => {
+                    this.order.payment.insuranceCoverage.isVerified = false;
                     this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
-                } else if (this.policy.noCoverage) {
+                    return reject(error.response);
-                    this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.NO_COMP;
+                });
-                } else {
-                    this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED;
-                }
-            }, (error) => {
-                this.order.payment.insuranceCoverage.isVerified = false;
-                this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
             });
         },
         async lookupVinByPlate(licensePlate, licenseState) {

src/styles/client-customizations.scss

@@ -22,6 +22,10 @@ $limu-button-color: #A9E3E9;
         color: $limu-link !important;
     }
 
+    .modal-text {
+        color: $limu-link !important;
+    }
+
     .btn {
         &.btn-override[aria-disabled="false"]{
             &.btn-primary {

src/styles/common-styles.scss

@@ -65,9 +65,18 @@ body {
     }
 
     .modal-text {
-        display: inline;
+        display: contents !important;
         color: $blue;
         cursor: pointer;
-        text-decoration: underline;
+        border: none;
+        background-color: inherit;
+        padding: 0;
+        text-underline-offset: 5px;
+        font-size: 14px;
+        line-height: 24px;
+        font-weight: 500;
+        span {
+            text-decoration: underline;
+        }
       }
 }