Merge pull request #1167 from Safelite/CSR-1357-customer-details
Csr 1357 customer details
This commit is contained in:
Mark Harris
GitHub
commit
19d4cb1507
12 changed files with 462 additions and 26 deletions
|
|
@ -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
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
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, {
|
||||
const wrapper = shallowMount(checkboxQuestion, {
|
||||
propsData: {
|
||||
screenReaderOnlyText: "screenreader text",
|
||||
},
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
||||
// Assert
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1 @@
|
|||
test.todo("some test to be written in the future");
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1 @@
|
|||
test.todo("some test to be written in the future");
|
||||
126
src/digital-components/textarea-question/textarea-question.vue
Normal file
126
src/digital-components/textarea-question/textarea-question.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
1
src/layouts/customer-details/customer-details.spec.js
Normal file
1
src/layouts/customer-details/customer-details.spec.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
test.todo("some test to be written in the future");
|
||||
132
src/layouts/customer-details/customer-details.vue
Normal file
132
src/layouts/customer-details/customer-details.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -102,7 +102,8 @@ html {
|
|||
}
|
||||
}
|
||||
&.textbox-question,
|
||||
&.dropdown-question {
|
||||
&.dropdown-question,
|
||||
&.phonenumber-question {
|
||||
p {
|
||||
color: $red;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue