CSR-1438

make email optional

src/constants/experiments.js

@@ -8,6 +8,7 @@ const experimentSettings = {
     DISPLAY_AVAILABILITY_INDICATORS: "DisplayAvailabilityIndicators",
     PIA_EXPERIENCE: "PIA Experience",
     SUBMIT_ORDER_ENABLE_PIA: "SubmitOrder_Enable_PIA",
+    IS_EMAIL_OPTIONAL: "isEmailOptional",
 };
 
 const experimentTriggers = {

src/digital-components/textbox-question/textbox-question.vue

@@ -121,6 +121,10 @@ export default {
         hideInput: Boolean,
         centerErrorMessage: Boolean,
         keyDownHandler: Function,
+        isEmailOptional: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup(props) {
         const uuid = uuidv4();
@@ -193,7 +197,9 @@ export default {
     },
     computed: {
         questionText() {
-            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+            return this.isEmailOptional
+                ? this.getCmsContent(this.cmsWidgetName, "QuestionText") + " (optional)"
+                : this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },
         value: {
             get: function () {

src/layouts/address-lookup/address-lookup.spec.js

@@ -10,6 +10,7 @@ import { storeMutations } from "@/constants/store-mutations";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import store from "@/store";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { experimentSettings } from "@/constants/experiments";
 
 jest.mock("@/helpers/damage-helper", () => ({
     isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
@@ -641,6 +642,17 @@ describe("address-lookup.vue", () => {
     });
 });
 
+const mockMixin = {
+    methods: {
+        getSettingValue: jest.fn((settingName) => {
+            if (settingName === experimentSettings.IS_EMAIL_OPTIONAL) {
+                return "true";
+            }
+            return "false";
+        }),
+    },
+};
+
 function setupMocks({
     isZipValid = true,
     isZipServiceable = true,
@@ -709,6 +721,7 @@ function setupMocks({
                     },
                 },
             },
+            mixins: [mockMixin],
         })
     );
 

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

@@ -20,7 +20,11 @@
 
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
 
-                    <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
+                    <customerQuestions
+                        ref="customerQuestions"
+                        v-model="customerQuestions"
+                        :validationRules="EmailValidationRules"
+                        :isEmailOptional="IsEmailOptional" />
 
                     <alert
                         ref="alertVinNotFound"

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

@@ -27,7 +27,9 @@
                 v-model="customerModel.emailAddress"
                 ref="emailAddress"
                 customInputId="emailAddress"
-                validationRules="email-address-required|email-address-format" />
+                :isRequired="!isEmailOptional"
+                :validationRules="validationRules"
+                :isEmailOptional="isEmailOptional" />
         </div>
     </div>
     <div class="row mb-0">
@@ -79,6 +81,7 @@ export default {
             }),
         },
         validationRules: String,
+        isEmailOptional: Boolean,
     },
     computed: {
         customerModel: {

src/layouts/estimate/estimate.spec.js

@@ -11,6 +11,7 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import baseMixin from "../../mixins/base-mixin";
 import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
+import { experimentSettings } from "@/constants/experiments";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -273,12 +274,24 @@ function setupMocks({
         Answers: cmsAnswers,
         FunnelFooterWidget: FunnelFooterWidget,
     };
-
+    const mockMixin = {
+        methods: {
+            getSettingValue: jest.fn((settingName) => {
+                if (settingName === experimentSettings.IS_EMAIL_OPTIONAL) {
+                    return "true";
+                }
+                return "false";
+            }),
+        },
+    };
     const apiPromise = Promise.resolve({ cmsContent });
     settleAllPromises.mockImplementation(() => apiPromise);
     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
-    const mountOptions = getMountOptions({ ...mountOptionsMockData, mixins: [baseMixin] });
+    const mountOptions = getMountOptions({
+        ...mountOptionsMockData,
+        mixins: [baseMixin, mockMixin],
+    });
     mountOptions["attachTo"] = document.body;
 
     const wrapper = shallowMount(estimate, mountOptions);

src/layouts/estimate/estimate.vue

@@ -52,9 +52,10 @@
                             cmsWidgetName="EmailAddressQuestionWidget"
                             v-model="emailAddress"
                             inputId="emailAddress"
-                            isRequired
+                            :isRequired="!IsEmailOptional"
                             disableAutoFill
-                            validationRules="email-address-required|email-address-format" />
+                            :validationRules="EmailValidationRules"
+                            :isEmailOptional="IsEmailOptional" />
                         <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
 
                         <alert

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -11,6 +11,7 @@ import { nextTick } from "vue";
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
+import { experimentSettings } from "@/constants/experiments";
 
 jest.mock("@/assets/img/loader.gif", () => "loader.gif");
 jest.mock("@/assets/img/windshield.png", () => "windshield.png");
@@ -692,11 +693,20 @@ function setupMocks({
     };
 
     const apiPromise = Promise.resolve(apiResponses);
-
+    const mockMixin = {
+        methods: {
+            getSettingValue: jest.fn((settingName) => {
+                if (settingName === experimentSettings.IS_EMAIL_OPTIONAL) {
+                    return "true";
+                }
+                return "false";
+            }),
+        },
+    };
     settleAllPromises.mockImplementation(() => apiPromise);
     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
-    const mountOptions = getMountOptions(mountOptionsMockData);
+    const mountOptions = getMountOptions({ ...mountOptionsMockData, mixins: [mockMixin] });
     mountOptions["attachTo"] = document.body; // append wrapper to document.body to test DOM methods
 
     const wrapper = shallowMount(licensePlateLookup, mountOptions);

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -34,7 +34,9 @@
                         cmsWidgetName="EmailAddressQuestionWidget"
                         v-model="email"
                         customInputId="email"
-                        validationRules="email-address-required|email-address-format" />
+                        :isRequired="!IsEmailOptional"
+                        :validationRules="EmailValidationRules"
+                        :isEmailOptional="IsEmailOptional" />
 
                     <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
 

src/layouts/vin-lookup/vin-lookup.spec.js

@@ -3,6 +3,7 @@ import vinLookup from "./vin-lookup.vue";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { experimentSettings } from "@/constants/experiments";
 
 import store from "@/store";
 
@@ -378,5 +379,11 @@ function mockOutStubFunctions(wrapper) {
 const mockMixin = {
     methods: {
         getCmsContent: jest.fn(() => "placeholder CMS content"),
+        getSettingValue: jest.fn((settingName) => {
+            if (settingName === experimentSettings.IS_EMAIL_OPTIONAL) {
+                return "true";
+            }
+            return "false";
+        }),
     },
 };

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

@@ -53,8 +53,9 @@
                         cmsWidgetName="EmailAddressQuestionWidget"
                         v-model="emailAddress"
                         customInputId="emailAddress"
-                        isRequired
+                        :isRequired="!IsEmailOptional"
-                        validationRules="email-address-required|email-address-format" />
+                        :validationRules="EmailValidationRules"
+                        :isEmailOptional="IsEmailOptional" />
 
                     <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
 

src/mixins/vin-pages-mixin.js

@@ -2,8 +2,20 @@ import { storeActions } from "@/constants/store-actions.js";
 import store from "@/store";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
+import { experimentSettings } from "@/constants/experiments";
 
 export default {
+    computed: {
+        IsEmailOptional() {
+            const emailOptional = this.getSettingValue(experimentSettings.IS_EMAIL_OPTIONAL);
+            return emailOptional === "true";
+        },
+        EmailValidationRules() {
+            return this.IsEmailOptional
+                ? "email-address-format"
+                : "email-address-required|email-address-format";
+        },
+    },
     methods: {
         async navigateForwardWithSingleCarMatch() {
             const pageName = this.$options?.name;