Merge branch 'develop' into feature/digital/SSR-254

src/constants/endpoints.js

@@ -95,7 +95,7 @@ const endpoints = {
     url: "https://maps.googleapis.com/maps/api/js?key={apiKey}&libraries=places"
   },
   ValidateClientTag: {
-    url: "/clientauth/api/v1/clientauth/validateClientTag",
+    url: "/clientauth/api/v1/clientauth/validate-client-tag",
     method: "GET",
   },
   IsVinbyAddressPermissible:{

src/iss-components/site-footer/site-footer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
+    <div class="row" >
     </div>
     <div class="footerImage" id="imgCity" v-if="footerImageURL" >
         <img id="siteFooterImage" :src="footerImageURL" />
@@ -160,8 +160,7 @@ export default {
 {
     text-align: center;
     position: sticky;
-    bottom: 65px;
+ }
-}
 
 @media only screen and (max-width: 340px) {
     .footerImage

src/iss-components/site-header/menu-modal/menu-modal.vue

@@ -24,21 +24,21 @@
       <div class="modal-dialog modal-fullscreen">
         <div class="modal-content">
           <div class="modal-header visually-hidden">
-            <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>  
+            <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
           </div>
           <div class="modal-body d-flex flex-column">
             <textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" target="_blank" />
-            <textLink 
+            <textLink
-              linkType="navigation" 
+              linkType="navigation"
-              text="Your privacy choices" 
+              text="Your privacy choices"
-              href="//www.safelite.com/privacy-center" 
+              href="//www.safelite.com/privacy-center"
-              target="_blank"              
+              target="_blank"
             >
               <template v-slot:after-text>
                 <img
                   class="ccpa-icon"
                   src="~@/assets/img/icons/ccpa-icon.svg"
-                  alt="Your privacy choices" 
+                  alt="Your privacy choices"
                   data-id="ccpa-icon"
                 />
               </template>
@@ -52,7 +52,7 @@
       </div>
     </div>
   </template>
-  
+
   <script>
   import textLink from "@/ux-components/text-link/text-link";
   export default {
@@ -81,7 +81,7 @@
     }
   }
   </script>
-  
+
   <style lang="scss" scoped>
   .menu-modal-container {
     position: absolute;
@@ -102,7 +102,7 @@
         align-items: center;
         padding: 0;//Required to prevent 'squish' on iPhone
         z-index: 1050;
-        .bar1,  
+        .bar1,
         .bar2,
         .bar3 {
           width: 14px;
@@ -163,6 +163,7 @@
                     box-shadow: none;
                     background-color: $white;
                     position: relative;
+                    right: -.5rem;
                     display: flex;
                     flex-direction: column;
                     justify-content: center;

src/layouts/address-lookup/address-lookup.vue

@@ -13,7 +13,7 @@
                 ref="vehicleBanner"
                 :displayGenericVehicleImage="false" />
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
-            <div class="fade-on-route-transition sub-container make-tall overflow-auto px-5">
+            <div class="fade-on-route-transition sub-container overflow-scroll px-5">
                 <alert
                     ref="alertVinNotFound"
                     v-if="displayVinNotFoundAlert"
@@ -310,3 +310,11 @@ export default {
     },
 };
 </script>
+<style lang="scss">
+
+.overflow-scroll {    
+    height: calc(100% - 353px);   
+    overflow-X: hidden !important;
+   
+}
+</style>

src/layouts/entry-page/entry-page.vue

@@ -34,7 +34,14 @@
             },
             async validateClientTagOnEntry() {
 
-                const clientTag = this.$route.query.ClientTag;
+                // Dump the query string parameters into an array. Remove casing on the key for easy compare.
+                let queryStringParams = [];
+                for ( let param in this.$route.query)
+                {
+                    queryStringParams[param.toLowerCase()] = this.$route.query[param];
+                }
+
+                const clientTag = queryStringParams["clienttag"];
                 const clientTagPresent = !!clientTag;
                 let authorized = false;
 
@@ -44,10 +51,15 @@
                     
                     if ( resp?.data.active && resp?.data.accountName.length > 0 )
                     {
-                        this.mainStore.issConfig.clientName = resp.data.accountName;
+                        this.populateISSConfigValues(resp.data);
-                        this.mainStore.issConfig.accountNumber = resp.data.accountNumber;
+
-                        this.mainStore.issConfig.styleSheet = resp.data.styleSheet;
                         authorized = true;
+
+                        if ( resp.data.parameters?.length > 0 )
+                        {
+                            const finalParams = this.combineClientParameters(resp.data.parameters, queryStringParams);
+                            this.populateStoreItemsFromParams(finalParams);
+                        }
                     }
                 }
 
@@ -59,6 +71,96 @@
                     window.location = "/?issPage=" + issPageValues.WELCOME_PAGE;
                 }
             },
+            populateISSConfigValues(data)
+            {
+                this.mainStore.issConfig.clientName = data.accountName;
+                this.mainStore.issConfig.accountNumber = data.accountNumber;
+                this.mainStore.issConfig.styleSheet = data.styleSheet;
+
+                try
+                {
+                    const clientFlags = JSON.parse(data.clientFlags);
+
+                    if ( clientFlags.TPAEnabled )
+                    {
+                        this.mainStore.issConfig.enableTPAFlow = true;
+                    }
+
+                    if ( clientFlags.clientDisplayName != null )
+                    {
+                        this.mainStore.issConfig.clientDisplayName = clientFlags.clientDisplayName;
+                    }
+                }
+                catch ( e )
+                {
+                    console.error("Error parsing client flags: " + e);
+                }
+            },
+            combineClientParameters(configParams, queryStringParams)
+            {
+                let finalParams = [];
+
+                try
+                {
+                    const clientParams = JSON.parse(configParams);
+
+                    for ( let cparam in clientParams)
+                    {
+                        let cname = clientParams[cparam].toLowerCase();
+
+                        for ( let qsparam in queryStringParams)
+                        {
+                            let qsname = qsparam.toLowerCase();
+
+                            if ( cname === qsname )
+                            {
+                                finalParams[cname] = queryStringParams[cname];
+                            }
+                        }
+                    }
+                }
+                catch ( e )
+                {
+                    console.error("Error combining client parameters: " + e);
+                }
+
+                return finalParams;
+            },
+            populateStoreItemsFromParams(params) {
+
+                // Populate store items from parameters.
+                for ( let param in params)
+                {
+                    let name = param.toLowerCase();
+                    let value = params[param];
+
+                    switch (name)
+                    {
+                        case "policynumber":
+                            this.mainStore.order.policy.policyNumber = value;
+                            break;
+
+                        case "lossdate":
+                            // NOTE: May need some date parsing logic in here depending on client.
+                            this.mainStore.order.policy.dateOfLoss = value;
+                            break;
+
+                        case "returnurl":
+                            this.mainStore.iisConfig.returnURL = value;
+                            break;
+
+                        case "returnurl2":
+                            this.mainStore.iisConfig.returnURL2 = value;
+                            break;
+
+                        // Not stored
+                        case "timestamp":
+                        case "token":
+                        case "signature":
+                            break;
+                    }
+                }
+            },
         },
         computed:{ 
         },

src/layouts/policy-holder-details/policy-holder-details.vue

@@ -1,11 +1,11 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
-        <div class="page-container-grouped-styles overflow-auto">
+        <div class="page-container-grouped-styles  ">
             <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-            <div class="fade-on-route-transition px-5">
+            <div class="fade-on-route-transition px-5 overflow-scroll">
                 <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
                 <addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
-                <div class="row mt-4">
+                <div class="row mt-4 ">
                     <div class="col">
                         <textboxQuestion
                             inputId="firstNameField"
@@ -17,7 +17,7 @@
                             validationRules="first-name-required" />
                     </div>        
                 </div>
-                <div class="row mt-4">
+                <div class="row mt-4 mb-2">
                     <div class="col">
                         <textboxQuestion
                             inputId="lastNameField"
@@ -137,6 +137,10 @@ export default {
 }
 </script>
 <style lang="scss">
+.overflow-scroll {    
+    height: calc(100% - 152px);   
+    overflow-X: hidden !important;   
+}
 .alert.alert-warning
 {
     margin-top: 20px;

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -1,13 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles overflow-auto vehicle-damage">
+        <div class="page-container-grouped-styles vehicle-damage">
             <siteHeader cmsWidgetName="SiteHeaderWidget" />
             <vehicleBanner
                 class="mb-3"
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall">
+            <div class="fade-on-route-transition sub-container overflow-scroll">
                 <alert
                     ref="vehicleChangeAlert"
                     v-if="shouldDisplayVehicleChangeAlert"
@@ -472,3 +472,10 @@ export default {
     },
 };
 </script>
+<style lang="scss">
+
+.overflow-scroll {    
+    height: calc(100% - 353px);   
+    overflow-X: hidden !important;   
+}
+</style>

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

@@ -3,7 +3,7 @@
     @submit="onSubmit"
     @invalid-submit="onInvalidSubmit"
   >
-    <div class="page-container-grouped-styles overflow-auto vehicle-lookup">
+    <div class="page-container-grouped-styles vehicle-lookup">
       <SiteHeader
         cms-widget-name="SiteHeaderWidget"
       />
@@ -15,7 +15,7 @@
       <SiteSubHeader
         cms-widget-name="SiteSubHeaderWidget"
       />
-      <div class="fade-on-route-transition sub-container make-tall container gx-0">
+      <div class="fade-on-route-transition sub-container  overflow-scroll container gx-0">
         <VinLookupMethods
           v-model="selectedVinLookupMethod"
           cms-widget-name="VINLookupMethod"
@@ -115,3 +115,10 @@ export default {
   },
 };
 </script>
+<style lang="scss">
+
+.overflow-scroll {    
+    height: calc(100% - 353px);   
+    overflow-X: hidden !important;   
+}
+</style>

src/layouts/welcome-page/welcome-page.vue

@@ -3,7 +3,7 @@
 
     <div class="page-container-grouped-styles welcome">
         <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-        <div class="fade-on-route-transition h-100 overflow-auto container">
+        <div class="fade-on-route-transition  overflow-scroll container">
 
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
             <div class="row mt-4 px-3">
@@ -333,6 +333,11 @@
 </script>
 
 <style lang="scss">
+
+.overflow-scroll {    
+    height: calc(100% - 152px);   
+    overflow-X: hidden !important;   
+}
 .my-2
 {
     margin-bottom: 0rem !important;

src/router/index.js

@@ -23,15 +23,19 @@ const routes = [
         async beforeEnter(to, from, next) {
             try {
                 to.query.issPage = !to.query.issPage ? issPageValues.WELCOME_PAGE : to.query.issPage;
-                
+
-                if (analyticsMixin.methods.noSession()) {
+                // Do not run these for the main entry page - as it is not part of the user flow.
-                    await analyticsMixin.methods.initSession();
+                if ( to.query.issPage != issPageValues.ENTRY_PAGE )
-                } else {
+                {
-                    updateSessionIdCookie();
+                    if (analyticsMixin.methods.noSession()) {
+                        await analyticsMixin.methods.initSession();
+                    } else {
+                        updateSessionIdCookie();
+                    }
+
+                    await runExperiments(to.query.issPage);
                 }
-
+                   
-                await runExperiments(to.query.issPage);
-
                 // Process ISS cookie.
                 updateOrCreateISSCookie();
 
@@ -78,11 +82,14 @@ router.afterEach((to, from) => {
     // Update lastPageVisited in the store
     store.updateLastPageVisited(to.name);
 
-    // Push page view to GA
+    if ( to.query.issPage != issPageValues.ENTRY_PAGE )
-    analyticsMixin.methods.pushPageViewToGA();
+    {
+        // Push page view to GA
+        analyticsMixin.methods.pushPageViewToGA();
 
-    // Push experiments to Data Layer
+        // Push experiments to Data Layer
-    analyticsMixin.methods.pushExperimentsToDataLayer();
+        analyticsMixin.methods.pushExperimentsToDataLayer();
+    }
 });
 
 // Get route information by page name.

src/store/index.js

@@ -99,8 +99,12 @@ const getDefaultState = () => {
     },
     issConfig: {
       clientName: "Generic Insurance", // this is the default and will be overriden by the client's name
+      clientDisplayName: "Generic Insurance",
       styleSheet: "",
       accountNumber: 0,
+      enableTPAFlow: false,
+      returnURL: null,
+      returnURL2: null,
     }
   };
 };
@@ -601,9 +605,13 @@ export const useMainStore = defineStore({
 
       resetISSConfigState()
       {
-        this.issConfig.clientName = "";
+        this.issConfig.clientName = "Generic Insurance";
+        this.issConfig.clientDisplayName = "Generic Insurance";
         this.issConfig.accountNumber = 0;
         this.issConfig.styleSheet = "";
+        this.issConfig.enableTPAFlow = false;
+        this.issConfig.returnURL = null;
+        this.issConfig.returnURL2 = null;
       },
 
       updateVehicleYear(year) {

vue.config.js

@@ -1,7 +1,7 @@
 process.env.VUE_APP_CONSUMER_CF_DISTRO ="https://digitalapi.dev.safelite.io";
 process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
 process.env.VUE_APP_GOOGLE_PLACES_API_KEY = 
-  "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo";
+  "AIzaSyCuLhQcDdZTTb4JzpUFms1OCch2dk5lHF0";
 
 
 // GA & GTM