Merge pull request #206 from Safelite/feature/Digital/SSR-305

Feature/digital/ssr 305

src/layouts/welcome-page/welcome-page.spec.js

@@ -8,26 +8,28 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import baseMixin from "@/mixins/base-mixin.js";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { applicationConfig } from "@/constants/application-config";
-
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
-    settleAllPromises: jest.fn(),
+    settleAllPromises: jest.fn(),    
 }));
   
 // Mock fetchCmsContentForPage
 jest.mock("@/helpers/cms-content-helper", () => ({
-    fetchCmsContentForPage: jest.fn(),
+    fetchCmsContentForPage: jest.fn()    
 }));
 
 
 describe("welcome-page.vue", () => {
     test("Should render welcomePage sub-components (policyNumber, policyZipCode, dateOfLoss, damageCause etc.)", async () => {
-        // Arrange
+        // Arrange   
-        const { wrapper } = setupMocks({});
+            
+         const { wrapper } = setupMocks({});       
+       
+        
         // Act
         const policyNumber = wrapper.findComponent({ ref: "policyNumber" });
         const dateOfLoss = wrapper.findComponent({ ref: "dateOfLoss" });
-        const damageCause = wrapper.findComponent({ ref: "damageCause" });
+        const damageCause = wrapper.findComponent({ ref: "damageCause" });        
         const damageCity = wrapper.findComponent({ ref: "damageCity" });
         const state = wrapper.findComponent({ ref: "state" });
         const glassOnlyDamage = wrapper.findComponent({ ref: "glassOnlyDamage" });
@@ -39,8 +41,8 @@ describe("welcome-page.vue", () => {
         expect(policyNumber.exists()).toBe(true);
         expect(dateOfLoss.exists()).toBe(true);
         expect(damageCause.exists()).toBe(true);
-        expect(damageCity.exists()).toBe(true);
+        expect(damageCity.exists()).toBe(false);
-        expect(state.exists()).toBe(true);
+        expect(state.exists()).toBe(false);
         expect(glassOnlyDamage.exists()).toBe(true);
         expect(phoneNumber.exists()).toBe(true);
         expect(email.exists()).toBe(true);
@@ -68,12 +70,14 @@ function setupMocks({
         
       },
     };
-  
+    
     mountOptionsMockData = {
         ...mountOptionsMockData,
         router: {
             navigate: jest.fn(),
         },
+       
+       
     };
 
     const apiPromise = Promise.resolve(apiResponses);
@@ -86,7 +90,7 @@ function setupMocks({
     const wrapper = shallowMount(welcomePage, mountOptions);
 
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
-    
+    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
     return { wrapper, apiPromise };
 }
 

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

@@ -30,7 +30,7 @@
                         disableAutoFill
                         :max="new Date().toJSON().slice(0,10)"
                         :min="'1972-12-01'"
-                        validationRules="loss-date-required"
+                        validationRules="loss-date-required"                        
                 />
                 </div>
             </div>
@@ -54,34 +54,7 @@
                     />
                 </div>
             </div>
-            <div class="row mt-4 px-3">
+             
-                <div class="col">
-                    <textboxQuestion
-                        inputId="damageCityField"
-                        cmsWidgetName="DamageCityQuestion"
-                        v-model="welcomePageModel.damageCity"
-                        isRequired
-                        ref="damageCity"
-                        disableAutoFill
-                        validationRules="loss-city-required" />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <dropdownQuestion
-                        cmsWidgetName="DamageStateQuestion"
-                        v-model="welcomePageModel.damageState"
-                        ref="state"
-                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-                        :options="stateOptions"
-                        validationRules="loss-state-required"
-                        isRequired
-                        disableAutoFill
-                        placeHolderText="Select an option"
-                        id="welcomeDropdown"
-                    />
-                </div>
-            </div>
             <div class="row mt-4">
                     <buttonQuestion
                         class="px-0"
@@ -121,6 +94,36 @@
                         disableAutoFill />
                 </div>
             </div>
+            <div class="row mt-4 px-3">
+                <div class="col">
+                    <textboxQuestion
+                        inputId="damageCityField"
+                        cmsWidgetName="DamageCityQuestion"
+                        v-model="welcomePageModel.damageCity"
+                        isRequired
+                        ref="damageCity"
+                        disableAutoFill
+                        v-if="this.displayDamageCityQuestion"
+                        validationRules="loss-city-required" />
+                </div>
+            </div>
+            <div class="row mt-4 px-3">
+                <div class="col">
+                    <dropdownQuestion
+                        cmsWidgetName="DamageStateQuestion"
+                        v-model="welcomePageModel.damageState"
+                        ref="state"
+                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                        :options="stateOptions"
+                        validationRules="loss-state-required"
+                        isRequired
+                        disableAutoFill
+                        v-if="this.displayDamageStateQuestion"
+                        placeHolderText="Select an option"
+                        id="welcomeDropdown"
+                    />
+                </div>
+            </div>
             <div class="row mt-4 position-sticky top-100" id="welcomeFooter">
                 <div class="col">
                     <site-footer
@@ -184,8 +187,8 @@
         mixins: [BaseFormMixin],
         data() {
             return {
-                welcomePageModel: this.getWelcomePageModelFromStore()
+                welcomePageModel: this.getWelcomePageModelFromStore()                
-            };
+            };            
         },
         setup() {
             const mainStore = useMainStore();
@@ -210,9 +213,9 @@
 
             //use resultMap to populate layout content.
             let resultMap = await settleAllPromises(promiseResultMap);
-
+           
             next((vm) => {
-                vm.setCmsContent(resultMap.cmsContent);
+                vm.setCmsContent(resultMap.cmsContent);                
             });
         },
         methods:
@@ -320,6 +323,12 @@
                     };
                 },
             },
+            displayDamageCityQuestion(){
+                return !!this.getCmsContent("DamageCityQuestion","QuestionText");
+            },
+            displayDamageStateQuestion(){                
+                return !!this.getCmsContent("DamageStateQuestion","QuestionText");
+            },
         },
         components: {
             siteHeader,