Merge pull request #1167 from Safelite/CSR-1357-customer-details

Csr 1357 customer details

jest.config.js

@@ -26,7 +26,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 77,
+      statements: 75,
       // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90
     },
   },

src/constants/error-messages.js

@@ -27,6 +27,8 @@ const errorMessages = {
     VEHICLE_REQUIRED: "Please select a vehicle",
     MOBILE_LOCATION_REQUIRED: "Please enter your service address",
     DATE_REQUIRED: "Please select a date",
+    PHONE_REQUIRED: "Please enter your phone number",
+    PHONE_FORMAT: "Phone number must be 10 digits",
 };
 
 export { errorMessages };

src/digital-components/checkbox-question/checkbox-question.spec.js

@@ -1,14 +1,25 @@
 import { shallowMount } from "@vue/test-utils";
-import checkbox from "./checkbox";
+import checkboxQuestion from "./checkbox-question";
 import { nextTick } from "vue";
 
-describe("checkbox.vue", () => {
+// Mock CMS content
+const questionText = "Question Text";
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn().mockImplementation(() => {
+            return questionText;
+        }),
+    },
+};
+
+describe("checkbox-question.vue", () => {
     it("Should return checkbox name", async () => {
         // Act
-        const wrapper = shallowMount(checkbox, {
+        const wrapper = shallowMount(checkboxQuestion, {
             propsData: {
                 checkboxName: "Checkbox",
             },
+            mixins: [mockMixin],
         });
 
         // Assert
@@ -20,10 +31,11 @@ describe("checkbox.vue", () => {
 
     it("Should return checkbox id", async () => {
         // Act
-        const wrapper = shallowMount(checkbox, {
+        const wrapper = shallowMount(checkboxQuestion, {
             propsData: {
                 buttonID: "Checkbox ID",
             },
+            mixins: [mockMixin],
         });
 
         // Assert
@@ -35,10 +47,11 @@ describe("checkbox.vue", () => {
 
     it("Should return tabindex value", async () => {
         // Act
-        const wrapper = shallowMount(checkbox, {
+        const wrapper = shallowMount(checkboxQuestion, {
             propsData: {
                 tabIndex: "1",
             },
+            mixins: [mockMixin],
         });
 
         // Assert
@@ -50,24 +63,11 @@ describe("checkbox.vue", () => {
 
     it("Should return label text", async () => {
         // Act
-        const wrapper = shallowMount(checkbox, {
+        const wrapper = shallowMount(checkboxQuestion, {
-            propsData: {
-                checkboxLabel: "label text",
-            },
-        });
-
-        // Assert
-        const paragraph = wrapper.find("p");
-
-        expect(paragraph.text()).toEqual("label text");
-    });
-
-    it("Should return label text", async () => {
-        // Act
-        const wrapper = shallowMount(checkbox, {
             propsData: {
                 screenReaderOnlyText: "screenreader text",
             },
+            mixins: [mockMixin],
         });
 
         // Assert

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

@@ -2,6 +2,7 @@
     <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
     <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
         <input
+            v-model="value"
             class="form-check-input"
             type="checkbox"
             aria-checked="false"
@@ -10,7 +11,7 @@
             :tabindex="tabIndex"
             :aria-required="isRequired" />
         <label class="d-flex align-items-start" :for="buttonID">
-            <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+            <p v-html="checkboxLabelCopy" class="m-0"></p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
         </label>
     </div>
@@ -18,15 +19,32 @@
 
 <script>
 export default {
-    name: "checkbox",
+    name: "checkboxQuestion",
+    computed: {
+        checkboxLabelCopy() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        value: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
     props: {
+        cmsWidgetName: String,
         checkboxName: String,
         buttonID: String,
         tabIndex: Number,
-        checkboxLabel: String,
         screenReaderOnlyText: String,
         isRequired: Boolean,
         hasError: Boolean,
+        modelValue: {
+            type: Boolean,
+            default: false,
+        },
     },
 };
 </script>

src/digital-components/phonenumber-question/phonenumber-question.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

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

@@ -0,0 +1,152 @@
+<template>
+    <div class="phonenumber-question d-flex flex-column">
+        <textboxQuestion
+            type="tel"
+            :max-length="12"
+            v-model="selectedValue"
+            :isRequired="isRequired"
+            :validationRules="validationRuleForTextBoxQuestion"
+            @input="filterNumber"
+            cmsWidgetName="phoneNumberQuestionWidget" />
+    </div>
+</template>
+
+<script>
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+//Supporting files
+import { errorMessages } from "@/constants/error-messages";
+import { required, regex } from "@/helpers/validation-rules";
+import { Form, defineRule } from "vee-validate";
+import { useField, validate } from "vee-validate";
+//Validation
+defineRule(
+    "phone-number-format",
+    regex(/^(?=(?:.*\d){10})(?=(?:.*-){2})[\d-]{12}$/, errorMessages.PHONE_FORMAT)
+);
+export default {
+    name: "phoneNumberQuestion",
+    props: {
+        cmsWidgetName: String,
+        isRequired: Boolean,
+        validationRules: String,
+        hasError: Boolean,
+        centerErrorMessage: Boolean,
+        modelValue: String,
+    },
+    setup(props) {
+        const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
+
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+        let initialValue;
+
+        switch (typeof modelValue) {
+            case "number":
+                initialValue = modelValue;
+                break;
+            default:
+                initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
+                break;
+        }
+
+        const fieldOptions = {
+            type: "text",
+            value: modelValue,
+            initialValue: initialValue,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
+            inputId,
+            props.validationRules,
+            fieldOptions
+        );
+
+        return {
+            inputId,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+        };
+    },
+    data() {
+        return {
+            phoneNumber: "",
+        };
+    },
+    computed: {
+        phoneNumberQuestionWidget() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                const formattedNumber = this.formatPhoneNumber(newValue);
+                this.$emit("update:modelValue", formattedNumber);
+            },
+        },
+        validationRuleForTextBoxQuestion() {
+            if (!this.validationRules || this.validationRules.length === 0) {
+                return "phone-number-format";
+            } else {
+                return this.validationRules + "|phone-number-format";
+            }
+        },
+    },
+    methods: {
+        formatPhoneNumber(value) {
+            // Remove all non-digit characters from the phone number
+            let formattedNumber = value.replace(/\D/g, "");
+
+            // Insert hyphens after the first three and the next three digits
+            if (formattedNumber.length > 3) {
+                formattedNumber = formattedNumber.slice(0, 3) + "-" + formattedNumber.slice(3);
+            }
+            if (formattedNumber.length > 7) {
+                formattedNumber = formattedNumber.slice(0, 7) + "-" + formattedNumber.slice(7);
+            }
+
+            // Update the phone number with the formatted version
+            return formattedNumber;
+        },
+        filterNumber() {
+            this.selectedValue = this.selectedValue.replace(/1/g, "");
+        },
+    },
+    watch: {
+        async value(newValue) {
+            const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
+            if (result.valid) {
+                this.handleChange(newValue); // trigger full validation on this field only
+            }
+        },
+    },
+    components: {
+        textboxQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.phonenumber-question {
+    label {
+        color: $black;
+    }
+    input {
+        border-radius: 0.5rem;
+        border: 1px solid $gray-500;
+        height: 48px;
+        &:focus {
+            box-shadow: 0 0 0 2.5px $blue;
+            outline: none;
+        }
+        &:hover {
+            box-shadow: 0 0 0 4px $blue-300;
+        }
+    }
+}
+</style>

src/digital-components/textarea-question/textarea-question.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

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

@@ -0,0 +1,126 @@
+<template>
+    <div class="textarea-question">
+        <div class="label-wrapper mb-1" :aria-label="TextAreaContentWidget">
+            <!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>-->
+            <label for="textarea-comments" class="fw-bold" v-html="TextAreaContentWidget"></label>
+            <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
+        </div>
+        <textarea
+            v-model="value"
+            @keyup="updateCount"
+            id="textarea-comments"
+            class="p-4"
+            :maxlength="maxLength"
+            role="textbox"
+            aria-multiline="true"
+            :aria-required="isRequired">
+        </textarea>
+        <p
+            tabindex="0"
+            class="caption mt-2 mb-0"
+            id="charactersremaining"
+            :class="[urgentCountdown ? 'urgent-countdown' : '']">
+            {{ remainingCount }}/{{ maxLength }} characters remaining
+        </p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "textareaQuestion",
+    props: {
+        cmsWidgetName: String,
+        isRequired: Boolean,
+        maxLength: {
+            type: Number,
+            default: 250,
+        },
+        modelValue: String,
+    },
+    setup(props) {
+        const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
+
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+        let initialValue;
+
+        switch (typeof modelValue) {
+            case "number":
+                initialValue = modelValue;
+                break;
+            default:
+                initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
+                break;
+        }
+
+        const fieldOptions = {
+            type: "text",
+            value: modelValue,
+            initialValue: initialValue,
+        };
+    },
+    computed: {
+        TextAreaContentWidget() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        value: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        remainingCount() {
+            return this.maxLength - this.value.length;
+        },
+        urgentCountdown() {
+            return this.remainingCount <= this.maxLength * 0.1 ? true : false;
+        },
+    },
+    methods: {
+        updateCount() {
+            if (this.value.length > this.maxLength) {
+                this.value = this.value.slice(0, this.maxLength);
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.textarea-question {
+    display: flex;
+    flex-direction: column;
+    label {
+        color: $black;
+    }
+    .label-wrapper {
+        display: flex;
+        align-items: center;
+        label {
+            span {
+                color: $gray-500;
+            }
+        }
+    }
+    textarea {
+        border-radius: 0.5rem;
+        border: 1px solid $gray-500;
+        height: 88px;
+        &:focus {
+            box-shadow: 0 0 0 2.5px $blue;
+            outline: none;
+        }
+        &:hover {
+            box-shadow: 0 0 0 4px $blue-300;
+        }
+    }
+    p {
+        color: $gray-500;
+        &.urgent-countdown {
+            color: $red;
+        }
+    }
+}
+</style>

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

@@ -44,7 +44,8 @@
                 @change="handleChange"
                 @blur="handleChange"
                 :maxlength="maxLength ? maxLength : '999'"
-                @focus="$emit('focus', $event.target.value)" />
+                @focus="$emit('focus', $event.target.value)"
+                @keydown="keyDownHandler" />
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
             <template v-if="includeImageQuestion">
                 <template v-if="!isDisabled">
@@ -118,6 +119,7 @@ export default {
         maxFileSize: Number,
         hideInput: Boolean,
         centerErrorMessage: Boolean,
+        keyDownHandler: Function,
     },
     setup(props) {
         const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;

src/layouts/customer-details/customer-details.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

src/layouts/customer-details/customer-details.vue

@@ -0,0 +1,132 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <div class="page-container-grouped-styles">
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
+            <textboxQuestion
+                class="mb-4"
+                cmsWidgetName="FirstNameWidget"
+                v-model="firstName"
+                ref="firstName"
+                inputId="08497a2efd9a4a73a70360ab47b4838d"
+                validationRules="first-name-required" />
+            <textboxQuestion
+                class="mb-4"
+                cmsWidgetName="LastNameWidget"
+                v-model="lastName"
+                ref="lastName"
+                inputId="0030e56a57e74a4ab92de7fb8e97fec5"
+                validationRules="last-name-required" />
+            <textboxQuestion
+                class="mb-4"
+                cmsWidgetName="emailQuestionWidget"
+                v-model="emailAddress"
+                inputId="email"
+                validationRules="email-address-required|email-address-format" />
+            <phoneNumberQuestion
+                class="mb-4"
+                cmsWidgetName="phoneNumberQuestionWidget"
+                v-model="phoneNumber"
+                isRequired
+                validationRules="phone-number-required" />
+            <checkboxQuestion
+                class="mb-5"
+                cmsWidgetName="TextMeQuestionWidget"
+                v-model="textMeUpdates" />
+            <textareaQuestion
+                class="mb-4"
+                v-model="techNotes"
+                cmsWidgetName="TextAreaContentWidget"
+                maxLength="250" />
+            <textBlock cmsWidgetName="DisclaimerCopyWidget" typeStyle="caption" />
+            <funnel-footer
+                cmsWidgetName="FunnelFooterWidget"
+                ref="funnelFooter"
+                :isForwardActionDisabled="!meta.valid"
+                @back-clicked="backButtonAction"
+                @ForwardClicked="forwardButtonAction" />
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import textareaQuestion from "@/digital-components/textarea-question/textarea-question";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import phoneNumberQuestion from "@/digital-components/phonenumber-question/phonenumber-question";
+import textBlock from "@/digital-components/text-block/text-block";
+import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
+//Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
+import { errorMessages } from "@/constants/error-messages";
+import { routerParams } from "@/router/router-constants/router-params";
+import { required, regex } from "@/helpers/validation-rules";
+import { Form, defineRule } from "vee-validate";
+import { useField, validate } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
+defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
+defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule(
+    "email-address-format",
+    regex(
+        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
+        errorMessages.EMAIL_ADDRESS_FORMAT
+    )
+);
+
+export default {
+    name: "customer-details",
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {
+            techNotes: "",
+            firstName: "",
+            lastName: "",
+            emailAddress: "",
+            phoneNumber: "",
+            textMeUpdates: null,
+        };
+    },
+    computed: {
+        textAreaLabelCopy() {
+            return this.getCmsContent("TextAreaContentWidget", "QuestionText");
+        },
+    },
+    components: {
+        funnelHeader,
+        funnelSubHeader,
+        textareaQuestion,
+        textboxQuestion,
+        funnelFooter,
+        Form,
+        textBlock,
+        phoneNumberQuestion,
+        checkboxQuestion,
+    },
+};
+</script>

src/styles/common-error-styles.scss

@@ -102,7 +102,8 @@ html {
             }
         }
         &.textbox-question,
-        &.dropdown-question {
+        &.dropdown-question,
+        &.phonenumber-question {
             p {
                 color: $red;
             }