Fixing merge conflicts
This commit is contained in:
brydon1
commit
e1b36a1526
7 changed files with 652 additions and 645 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -26,3 +26,5 @@ pnpm-debug.log*
|
||||||
coverage/*
|
coverage/*
|
||||||
junit.xml
|
junit.xml
|
||||||
/.vs
|
/.vs
|
||||||
|
|
||||||
|
.prettierrc
|
||||||
|
|
|
||||||
|
|
@ -1,340 +1,333 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
|
||||||
class="textbox-question"
|
<label
|
||||||
:class="(errors && errors.length) || hasError ? 'has-error' : ''"
|
v-if="displayQuestionText"
|
||||||
>
|
:for="inputId"
|
||||||
<label
|
:aria-label="questionText"
|
||||||
v-if="displayQuestionText"
|
class="form-label"
|
||||||
:for="inputId"
|
:class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
|
||||||
:aria-label="questionText"
|
v-html="labelText"></label>
|
||||||
class="form-label"
|
<div
|
||||||
:class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
|
class="input-wrapper"
|
||||||
v-html="labelText"
|
:class="[
|
||||||
></label>
|
includeSearchIcon ? 'has-search-icon' : '',
|
||||||
<div
|
includeSelectIcon ? 'has-select-icon' : '',
|
||||||
class="input-wrapper"
|
]">
|
||||||
:class="[
|
<input
|
||||||
includeSearchIcon ? 'has-search-icon' : '',
|
class="form-control"
|
||||||
includeSelectIcon ? 'has-select-icon' : '',
|
v-model.trim.lazy="value"
|
||||||
]"
|
v-maska="mask"
|
||||||
>
|
:type="type"
|
||||||
<input
|
:ref="inputId"
|
||||||
class="form-control"
|
:id="inputId"
|
||||||
v-model.trim.lazy="value"
|
:name="inputId"
|
||||||
v-maska="mask"
|
:placeholder="placeholderText"
|
||||||
:type="type"
|
:aria-disabled="isDisabled"
|
||||||
:ref="inputId"
|
:disabled="isDisabled"
|
||||||
:id="inputId"
|
:aria-required="isRequired"
|
||||||
:name="inputId"
|
:aria-label="questionText"
|
||||||
:placeholder="placeholderText"
|
:min="min"
|
||||||
:aria-disabled="isDisabled"
|
:max="max"
|
||||||
:disabled="isDisabled"
|
required
|
||||||
:aria-required="isRequired"
|
:class="[
|
||||||
:aria-label="questionText"
|
hasIcon ? 'has-icon' : '',
|
||||||
:min="min"
|
iconRight ? 'icon-right' : '',
|
||||||
:max="max"
|
cornerStyle === 'rounded' ? 'rounded-pill' : '',
|
||||||
required
|
]"
|
||||||
:class="[
|
:validationRules="validationRules"
|
||||||
hasIcon ? 'has-icon' : '',
|
@change="validationRules ? handleChange : () => {}"
|
||||||
iconRight ? 'icon-right' : '',
|
@blur="validationRules ? handleChange : () => {}"
|
||||||
cornerStyle === 'rounded' ? 'rounded-pill' : '',
|
:maxlength="maxLength ? maxLength : '999'"
|
||||||
]"
|
@focus="$emit('focus', $event.target.value)"
|
||||||
:validationRules="validationRules"
|
:data-bs-toggle="includeSelectIcon ? 'modal' : ''"
|
||||||
@change="validationRules ? handleChange : () => {}"
|
:data-bs-target="'#' + this.cmsWidgetName"
|
||||||
@blur="validationRules ? handleChange : () => {}"
|
@paste="trimOnPaste"
|
||||||
:maxlength="maxLength ? maxLength : '999'"
|
@drop="trimOnPaste" />
|
||||||
@focus="$emit('focus', $event.target.value)"
|
<button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
|
||||||
:data-bs-toggle="includeSelectIcon ? 'modal' : ''"
|
<button
|
||||||
:data-bs-target="'#' + this.cmsWidgetName"
|
v-if="includeSelectIcon"
|
||||||
@paste="trimOnPaste"
|
type="submit"
|
||||||
@drop="trimOnPaste"
|
data-bs-toggle="modal"
|
||||||
/>
|
:data-bs-target="'#' + this.cmsWidgetName"
|
||||||
<button
|
aria-label="Select button" />
|
||||||
v-if="includeSearchIcon"
|
</div>
|
||||||
type="submit"
|
<div v-show="errorMessage" class="row my-1 form-test-error">
|
||||||
aria-label="Search button"
|
<span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
|
||||||
/>
|
</div>
|
||||||
<button
|
|
||||||
v-if="includeSelectIcon"
|
|
||||||
type="submit"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
:data-bs-target="'#' + this.cmsWidgetName"
|
|
||||||
aria-label="Select button"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-show="errorMessage" class="row my-1 form-test-error">
|
|
||||||
<span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { useField, validate } from "vee-validate";
|
import { useField, validate } from "vee-validate";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "textbox-question",
|
name: "textbox-question",
|
||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "text",
|
default: "text",
|
||||||
|
},
|
||||||
|
placeholderText: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
displayQuestionText: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
modelValue: String,
|
||||||
|
inputId: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
isDisabled: Boolean,
|
||||||
|
isRequired: Boolean,
|
||||||
|
hasIcon: Boolean, // If input has an icon
|
||||||
|
iconRight: Boolean, // Place icon on right side of text input, otherwise default is left if hasIcon prop is used
|
||||||
|
hasError: Boolean,
|
||||||
|
mask: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
validationRules: String,
|
||||||
|
cmsWidgetName: String,
|
||||||
|
maxLength: String,
|
||||||
|
questionAlignment: String, // Left or center. Left is default.
|
||||||
|
cornerStyle: String, // Rounded or square. Square is default.
|
||||||
|
includeSearchIcon: Boolean,
|
||||||
|
includeSelectIcon: Boolean,
|
||||||
|
min: String,
|
||||||
|
max: String,
|
||||||
|
disableAutoFill: Boolean,
|
||||||
},
|
},
|
||||||
placeholderText: {
|
setup(props) {
|
||||||
type: String,
|
const propsClone = Object.assign({}, props);
|
||||||
default: "",
|
const modelValue = propsClone.modelValue;
|
||||||
},
|
let initialValue;
|
||||||
displayQuestionText: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
modelValue: String,
|
|
||||||
inputId: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
isDisabled: Boolean,
|
|
||||||
isRequired: Boolean,
|
|
||||||
hasIcon: Boolean, // If input has an icon
|
|
||||||
iconRight: Boolean, // Place icon on right side of text input, otherwise default is left if hasIcon prop is used
|
|
||||||
hasError: Boolean,
|
|
||||||
mask: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
validationRules: String,
|
|
||||||
cmsWidgetName: String,
|
|
||||||
maxLength: String,
|
|
||||||
questionAlignment: String, // Left or center. Left is default.
|
|
||||||
cornerStyle: String, // Rounded or square. Square is default.
|
|
||||||
includeSearchIcon: Boolean,
|
|
||||||
includeSelectIcon: Boolean,
|
|
||||||
min: String,
|
|
||||||
max: String,
|
|
||||||
disableAutoFill: Boolean,
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const propsClone = Object.assign({}, props);
|
|
||||||
const modelValue = propsClone.modelValue;
|
|
||||||
let initialValue;
|
|
||||||
|
|
||||||
switch (typeof modelValue) {
|
switch (typeof modelValue) {
|
||||||
case "number":
|
case "number":
|
||||||
initialValue = modelValue;
|
initialValue = modelValue;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
|
initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
|
||||||
break;
|
break;
|
||||||
}
|
|
||||||
|
|
||||||
const fieldOptions = {
|
|
||||||
type: "text",
|
|
||||||
value: modelValue,
|
|
||||||
initialValue: initialValue,
|
|
||||||
};
|
|
||||||
|
|
||||||
const { errorMessage, handleBlur, handleChange, meta, validate, errors } =
|
|
||||||
useField(props.inputId, props.validationRules, fieldOptions);
|
|
||||||
|
|
||||||
return {
|
|
||||||
errorMessage,
|
|
||||||
handleBlur,
|
|
||||||
handleChange,
|
|
||||||
validate,
|
|
||||||
meta,
|
|
||||||
errors,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
trimOnPaste(evt) {
|
|
||||||
evt.stopPropagation();
|
|
||||||
preventDefault();
|
|
||||||
|
|
||||||
var data = null;
|
|
||||||
if (evt.type === "paste") {
|
|
||||||
data = evt.clipboardData || window.clipboardData;
|
|
||||||
} else if (evt.type === "drop") {
|
|
||||||
data = evt.dataTransfer;
|
|
||||||
}
|
|
||||||
const value = data.getData("Text")?.trim();
|
|
||||||
|
|
||||||
this.$emit("update:modelValue", value);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
questionText() {
|
|
||||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
get: function () {
|
|
||||||
return this.modelValue;
|
|
||||||
},
|
|
||||||
set: function (newValue) {
|
|
||||||
this.$emit("update:modelValue", newValue);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
labelText: {
|
|
||||||
get: function () {
|
|
||||||
const noBreakChar = "⁠";
|
|
||||||
var questionText = "";
|
|
||||||
if (this.disableAutoFill) {
|
|
||||||
var words = this.questionText.toString().split(/[ ]+/);
|
|
||||||
words.forEach(function (word) {
|
|
||||||
const position = 1;
|
|
||||||
word = [
|
|
||||||
word.toString().slice(0, position),
|
|
||||||
noBreakChar,
|
|
||||||
word.toString().slice(position),
|
|
||||||
].join("");
|
|
||||||
questionText += `${word} `;
|
|
||||||
});
|
|
||||||
|
|
||||||
questionText = questionText.trimEnd();
|
|
||||||
} else {
|
|
||||||
questionText = this.questionText.toString();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return questionText;
|
const fieldOptions = {
|
||||||
},
|
type: "text",
|
||||||
|
value: modelValue,
|
||||||
|
initialValue: initialValue,
|
||||||
|
};
|
||||||
|
|
||||||
|
const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
|
||||||
|
props.inputId,
|
||||||
|
props.validationRules,
|
||||||
|
fieldOptions
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
errorMessage,
|
||||||
|
handleBlur,
|
||||||
|
handleChange,
|
||||||
|
validate,
|
||||||
|
meta,
|
||||||
|
errors,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
},
|
methods: {
|
||||||
mounted() {
|
trimOnPaste(evt) {
|
||||||
this.$emit("textboxQuestionEvent.inputIdAssigned", this.inputId);
|
evt.stopPropagation();
|
||||||
},
|
|
||||||
watch: {
|
var data = null;
|
||||||
async value(newValue) {
|
if (evt.type === "paste") {
|
||||||
const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
|
data = evt.clipboardData || window.clipboardData;
|
||||||
if (result.valid) {
|
} else {
|
||||||
this.handleChange(newValue); // trigger full validation on this field only
|
evt.preventDefault();
|
||||||
}
|
data = evt.dataTransfer;
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = data.getData("Text")?.trim();
|
||||||
|
|
||||||
|
this.$emit("update:modelValue", value);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
questionText() {
|
||||||
|
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
get: function () {
|
||||||
|
return this.modelValue;
|
||||||
|
},
|
||||||
|
set: function (newValue) {
|
||||||
|
this.$emit("update:modelValue", newValue);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelText: {
|
||||||
|
get: function () {
|
||||||
|
const noBreakChar = "⁠";
|
||||||
|
var questionText = "";
|
||||||
|
if (this.disableAutoFill) {
|
||||||
|
var words = this.questionText.toString().split(/[ ]+/);
|
||||||
|
words.forEach(function (word) {
|
||||||
|
const position = 1;
|
||||||
|
word = [
|
||||||
|
word.toString().slice(0, position),
|
||||||
|
noBreakChar,
|
||||||
|
word.toString().slice(position),
|
||||||
|
].join("");
|
||||||
|
questionText += `${word} `;
|
||||||
|
});
|
||||||
|
|
||||||
|
questionText = questionText.trimEnd();
|
||||||
|
} else {
|
||||||
|
questionText = this.questionText.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
return questionText;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$emit("textboxQuestionEvent.inputIdAssigned", this.inputId);
|
||||||
|
},
|
||||||
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
input[type="date"]::-webkit-inner-spin-button {
|
input[type="date"]::-webkit-inner-spin-button {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="date"]::-webkit-calendar-picker-indicator {
|
input[type="date"]::-webkit-calendar-picker-indicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
right: 1px;
|
right: 1px;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.1762 1.52764H13.7656V1.50352C13.7656 1.10476 13.6076 0.722334 13.3263 0.44037C13.0451 0.158406 12.6636 0 12.2659 0C11.8681 0 11.4866 0.158406 11.2054 0.44037C10.9241 0.722334 10.7661 1.10476 10.7661 1.50352V1.52764H5.42476V1.50352C5.42476 1.10476 5.26675 0.722334 4.9855 0.44037C4.70424 0.158406 4.32277 0 3.92501 0C3.52725 0 3.14579 0.158406 2.86453 0.44037C2.58327 0.722334 2.42526 1.10476 2.42526 1.50352V1.52764H1.82376C1.34046 1.52891 0.877316 1.72195 0.53557 2.06455C0.193824 2.40716 0.00127018 2.87146 0 3.35598V14.1717C0.0016909 14.656 0.194379 15.1201 0.536035 15.4626C0.87769 15.8051 1.34059 15.9983 1.82376 16H14.1746C14.6581 15.9987 15.1214 15.8057 15.4634 15.4632C15.8054 15.1206 15.9983 14.6563 16 14.1717V3.35598C15.9987 2.87146 15.8062 2.40716 15.4644 2.06455C15.1227 1.72195 14.6595 1.52891 14.1762 1.52764ZM11.8889 1.50352C11.8889 1.4033 11.9286 1.30718 11.9993 1.23631C12.07 1.16544 12.1659 1.12563 12.2659 1.12563C12.3658 1.12563 12.4617 1.16544 12.5324 1.23631C12.6031 1.30718 12.6428 1.4033 12.6428 1.50352V2.99899C12.6428 3.09922 12.6031 3.19534 12.5324 3.2662C12.4617 3.33707 12.3658 3.37688 12.2659 3.37688C12.1659 3.37688 12.07 3.33707 11.9993 3.2662C11.9286 3.19534 11.8889 3.09922 11.8889 2.99899V1.50352ZM3.54807 1.50352C3.54807 1.4033 3.58778 1.30718 3.65847 1.23631C3.72916 1.16544 3.82504 1.12563 3.92501 1.12563C4.02498 1.12563 4.12086 1.16544 4.19155 1.23631C4.26224 1.30718 4.30195 1.4033 4.30195 1.50352V2.99899C4.30195 3.09922 4.26224 3.19534 4.19155 3.2662C4.12086 3.33707 4.02498 3.37688 3.92501 3.37688C3.82504 3.37688 3.72916 3.33707 3.65847 3.2662C3.58778 3.19534 3.54807 3.09922 3.54807 2.99899V1.50352ZM14.8772 14.1717C14.8747 14.3573 14.8001 14.5345 14.6691 14.6658C14.5382 14.797 14.3614 14.8719 14.1762 14.8744H1.82536C1.63995 14.8723 1.4627 14.7976 1.33144 14.6663C1.20018 14.5351 1.12531 14.3575 1.12281 14.1717V6.59296H14.8772V14.1717Z' fill='%23167CAC'/%3E%3Cpath d='M2.33063 11.282H3.93464V12.6006C3.93464 12.7499 3.99379 12.8931 4.09907 12.9986C4.20435 13.1041 4.34715 13.1634 4.49604 13.1634C4.64494 13.1634 4.78773 13.1041 4.89301 12.9986C4.9983 12.8931 5.05745 12.7499 5.05745 12.6006V11.282H7.46346V12.6006C7.46346 12.7499 7.52261 12.8931 7.62789 12.9986C7.73318 13.1041 7.87597 13.1634 8.02486 13.1634C8.17376 13.1634 8.31655 13.1041 8.42184 12.9986C8.52712 12.8931 8.58627 12.7499 8.58627 12.6006V11.282H10.9923V12.6006C10.9923 12.7499 11.0514 12.8931 11.1567 12.9986C11.262 13.1041 11.4048 13.1634 11.5537 13.1634C11.7026 13.1634 11.8454 13.1041 11.9507 12.9986C12.0559 12.8931 12.1151 12.7499 12.1151 12.6006V11.282H13.7191C13.868 11.282 14.0108 11.2227 14.1161 11.1172C14.2214 11.0116 14.2805 10.8685 14.2805 10.7192C14.2805 10.57 14.2214 10.4268 14.1161 10.3213C14.0108 10.2157 13.868 10.1564 13.7191 10.1564H12.1151V8.84425C12.1151 8.69498 12.0559 8.55183 11.9507 8.44628C11.8454 8.34073 11.7026 8.28143 11.5537 8.28143C11.4048 8.28143 11.262 8.34073 11.1567 8.44628C11.0514 8.55183 10.9923 8.69498 10.9923 8.84425V10.1628H8.58627V8.84425C8.58627 8.69498 8.52712 8.55183 8.42184 8.44628C8.31655 8.34073 8.17376 8.28143 8.02486 8.28143C7.87597 8.28143 7.73318 8.34073 7.62789 8.44628C7.52261 8.55183 7.46346 8.69498 7.46346 8.84425V10.1628H5.05745V8.84425C5.05745 8.69498 4.9983 8.55183 4.89301 8.44628C4.78773 8.34073 4.64494 8.28143 4.49604 8.28143C4.34715 8.28143 4.20435 8.34073 4.09907 8.44628C3.99379 8.55183 3.93464 8.69498 3.93464 8.84425V10.1628H2.33063C2.18174 10.1628 2.03894 10.2221 1.93366 10.3277C1.82837 10.4332 1.76923 10.5764 1.76923 10.7257C1.76923 10.8749 1.82837 11.0181 1.93366 11.1236C2.03894 11.2292 2.18174 11.2885 2.33063 11.2885V11.282Z' fill='%23167CAC'/%3E%3C/svg%3E");
|
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.1762 1.52764H13.7656V1.50352C13.7656 1.10476 13.6076 0.722334 13.3263 0.44037C13.0451 0.158406 12.6636 0 12.2659 0C11.8681 0 11.4866 0.158406 11.2054 0.44037C10.9241 0.722334 10.7661 1.10476 10.7661 1.50352V1.52764H5.42476V1.50352C5.42476 1.10476 5.26675 0.722334 4.9855 0.44037C4.70424 0.158406 4.32277 0 3.92501 0C3.52725 0 3.14579 0.158406 2.86453 0.44037C2.58327 0.722334 2.42526 1.10476 2.42526 1.50352V1.52764H1.82376C1.34046 1.52891 0.877316 1.72195 0.53557 2.06455C0.193824 2.40716 0.00127018 2.87146 0 3.35598V14.1717C0.0016909 14.656 0.194379 15.1201 0.536035 15.4626C0.87769 15.8051 1.34059 15.9983 1.82376 16H14.1746C14.6581 15.9987 15.1214 15.8057 15.4634 15.4632C15.8054 15.1206 15.9983 14.6563 16 14.1717V3.35598C15.9987 2.87146 15.8062 2.40716 15.4644 2.06455C15.1227 1.72195 14.6595 1.52891 14.1762 1.52764ZM11.8889 1.50352C11.8889 1.4033 11.9286 1.30718 11.9993 1.23631C12.07 1.16544 12.1659 1.12563 12.2659 1.12563C12.3658 1.12563 12.4617 1.16544 12.5324 1.23631C12.6031 1.30718 12.6428 1.4033 12.6428 1.50352V2.99899C12.6428 3.09922 12.6031 3.19534 12.5324 3.2662C12.4617 3.33707 12.3658 3.37688 12.2659 3.37688C12.1659 3.37688 12.07 3.33707 11.9993 3.2662C11.9286 3.19534 11.8889 3.09922 11.8889 2.99899V1.50352ZM3.54807 1.50352C3.54807 1.4033 3.58778 1.30718 3.65847 1.23631C3.72916 1.16544 3.82504 1.12563 3.92501 1.12563C4.02498 1.12563 4.12086 1.16544 4.19155 1.23631C4.26224 1.30718 4.30195 1.4033 4.30195 1.50352V2.99899C4.30195 3.09922 4.26224 3.19534 4.19155 3.2662C4.12086 3.33707 4.02498 3.37688 3.92501 3.37688C3.82504 3.37688 3.72916 3.33707 3.65847 3.2662C3.58778 3.19534 3.54807 3.09922 3.54807 2.99899V1.50352ZM14.8772 14.1717C14.8747 14.3573 14.8001 14.5345 14.6691 14.6658C14.5382 14.797 14.3614 14.8719 14.1762 14.8744H1.82536C1.63995 14.8723 1.4627 14.7976 1.33144 14.6663C1.20018 14.5351 1.12531 14.3575 1.12281 14.1717V6.59296H14.8772V14.1717Z' fill='%23167CAC'/%3E%3Cpath d='M2.33063 11.282H3.93464V12.6006C3.93464 12.7499 3.99379 12.8931 4.09907 12.9986C4.20435 13.1041 4.34715 13.1634 4.49604 13.1634C4.64494 13.1634 4.78773 13.1041 4.89301 12.9986C4.9983 12.8931 5.05745 12.7499 5.05745 12.6006V11.282H7.46346V12.6006C7.46346 12.7499 7.52261 12.8931 7.62789 12.9986C7.73318 13.1041 7.87597 13.1634 8.02486 13.1634C8.17376 13.1634 8.31655 13.1041 8.42184 12.9986C8.52712 12.8931 8.58627 12.7499 8.58627 12.6006V11.282H10.9923V12.6006C10.9923 12.7499 11.0514 12.8931 11.1567 12.9986C11.262 13.1041 11.4048 13.1634 11.5537 13.1634C11.7026 13.1634 11.8454 13.1041 11.9507 12.9986C12.0559 12.8931 12.1151 12.7499 12.1151 12.6006V11.282H13.7191C13.868 11.282 14.0108 11.2227 14.1161 11.1172C14.2214 11.0116 14.2805 10.8685 14.2805 10.7192C14.2805 10.57 14.2214 10.4268 14.1161 10.3213C14.0108 10.2157 13.868 10.1564 13.7191 10.1564H12.1151V8.84425C12.1151 8.69498 12.0559 8.55183 11.9507 8.44628C11.8454 8.34073 11.7026 8.28143 11.5537 8.28143C11.4048 8.28143 11.262 8.34073 11.1567 8.44628C11.0514 8.55183 10.9923 8.69498 10.9923 8.84425V10.1628H8.58627V8.84425C8.58627 8.69498 8.52712 8.55183 8.42184 8.44628C8.31655 8.34073 8.17376 8.28143 8.02486 8.28143C7.87597 8.28143 7.73318 8.34073 7.62789 8.44628C7.52261 8.55183 7.46346 8.69498 7.46346 8.84425V10.1628H5.05745V8.84425C5.05745 8.69498 4.9983 8.55183 4.89301 8.44628C4.78773 8.34073 4.64494 8.28143 4.49604 8.28143C4.34715 8.28143 4.20435 8.34073 4.09907 8.44628C3.99379 8.55183 3.93464 8.69498 3.93464 8.84425V10.1628H2.33063C2.18174 10.1628 2.03894 10.2221 1.93366 10.3277C1.82837 10.4332 1.76923 10.5764 1.76923 10.7257C1.76923 10.8749 1.82837 11.0181 1.93366 11.1236C2.03894 11.2292 2.18174 11.2885 2.33063 11.2885V11.282Z' fill='%23167CAC'/%3E%3C/svg%3E");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
width: 16px; // check this
|
width: 16px; // check this
|
||||||
height: 16px;
|
height: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
border-radius: 0 7px 7px 0;
|
border-radius: 0 7px 7px 0;
|
||||||
background-color: #e4f1f7;
|
background-color: #e4f1f7;
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
padding: 15px 0;
|
padding: 15px 0;
|
||||||
min-width: 48px;
|
min-width: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.textbox-question {
|
.textbox-question {
|
||||||
label {
|
label {
|
||||||
color: $black;
|
color: $black;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #4d5151;
|
color: #4d5151;
|
||||||
}
|
}
|
||||||
.form-test-error span {
|
.form-test-error span {
|
||||||
color: #d4281c;
|
color: #d4281c;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-wrapper {
|
.input-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
&.has-search-icon {
|
&.has-search-icon {
|
||||||
input[type="text"] {
|
input[type="text"] {
|
||||||
border-radius: 50rem;
|
border-radius: 50rem;
|
||||||
}
|
}
|
||||||
button[type="submit"] {
|
button[type="submit"] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
right: 0;
|
right: 0;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
border-radius: 0 50rem 50rem 0;
|
border-radius: 0 50rem 50rem 0;
|
||||||
background-color: $blue-100;
|
background-color: $blue-100;
|
||||||
width: 2.75rem;
|
width: 2.75rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
border: 1px solid $gray-500;
|
||||||
|
border-left: none;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.has-select-icon {
|
||||||
|
button[type="submit"] {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
right: 1rem;
|
||||||
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-color: transparent;
|
||||||
|
width: 1rem;
|
||||||
|
height: 100%;
|
||||||
|
border: 0px;
|
||||||
|
border-left: none;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
&.has-icon {
|
||||||
|
background-image: url(~@/assets/img/icons/location-pin.svg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 0.75rem 50%;
|
||||||
|
background-size: 1rem auto;
|
||||||
|
padding: 0 0.75rem 0 2.5rem;
|
||||||
|
&.icon-right {
|
||||||
|
background-position: calc(100% - 0.75rem) 50%;
|
||||||
|
padding: 0 2.5rem 0 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-label {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
.form-control {
|
||||||
border: 1px solid $gray-500;
|
border: 1px solid $gray-500;
|
||||||
border-left: none;
|
border-radius: 0.5rem;
|
||||||
display: flex;
|
min-height: 3rem;
|
||||||
}
|
max-height: 48px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
&::placeholder {
|
||||||
|
color: $gray-500;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 2.5px $blue;
|
||||||
|
}
|
||||||
|
&:disabled,
|
||||||
|
&.disabled {
|
||||||
|
background-color: $gray-100;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 0 4px transparent;
|
||||||
|
border: 1px solid $gray-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid $gray-500;
|
||||||
|
box-shadow: 0 0 0 4px $blue-300;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.has-select-icon {
|
p {
|
||||||
button[type="submit"] {
|
display: none;
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
right: 1rem;
|
|
||||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-color: transparent;
|
|
||||||
width: 1rem;
|
|
||||||
height: 100%;
|
|
||||||
border: 0px;
|
|
||||||
border-left: none;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
input {
|
|
||||||
&.has-icon {
|
|
||||||
background-image: url(~@/assets/img/icons/location-pin.svg);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: 0.75rem 50%;
|
|
||||||
background-size: 1rem auto;
|
|
||||||
padding: 0 0.75rem 0 2.5rem;
|
|
||||||
&.icon-right {
|
|
||||||
background-position: calc(100% - 0.75rem) 50%;
|
|
||||||
padding: 0 2.5rem 0 0.75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.form-label {
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
.form-control {
|
|
||||||
border: 1px solid $gray-500;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
min-height: 3rem;
|
|
||||||
max-height: 48px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
&::placeholder {
|
|
||||||
color: $gray-500;
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 2.5px $blue;
|
|
||||||
}
|
|
||||||
&:disabled,
|
|
||||||
&.disabled {
|
|
||||||
background-color: $gray-100;
|
|
||||||
&:hover {
|
|
||||||
box-shadow: 0 0 0 4px transparent;
|
|
||||||
border: 1px solid $gray-500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
border: 1px solid $gray-500;
|
|
||||||
box-shadow: 0 0 0 4px $blue-300;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
|
<Form
|
||||||
|
ref="theForm"
|
||||||
|
v-slot="{ meta }"
|
||||||
|
@submit="onSubmit"
|
||||||
|
@invalid-submit="onInvalidSubmit">
|
||||||
<div class="page-container-grouped-styles">
|
<div class="page-container-grouped-styles">
|
||||||
<div class="fade-on-route-transition position-relative">
|
<div class="fade-on-route-transition position-relative">
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||||
|
|
@ -9,152 +13,155 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="select-car-form rounded pb-1">
|
<div class="select-car-form rounded pb-1">
|
||||||
<textBlock
|
<textBlock
|
||||||
|
id="coverage-statement-text-block"
|
||||||
cmsWidgetName="verifyingCoverageStatement"
|
cmsWidgetName="verifyingCoverageStatement"
|
||||||
typeStyle="h5"
|
typeStyle="h5"
|
||||||
justifyText="center"
|
justifyText="center"
|
||||||
class="mt-4 mb-4"
|
class="mt-4 mb-4" />
|
||||||
id="coverage-statement-text-block" />
|
|
||||||
<div>
|
<div>
|
||||||
<p v-html="continueWithSchedulingBodyText" class="mt-0 small" ></p>
|
<p
|
||||||
|
class="mt-0 small"
|
||||||
|
v-html="continueWithSchedulingBodyText"></p>
|
||||||
</div>
|
</div>
|
||||||
<textBlock
|
<textBlock
|
||||||
|
id="coverage-statement-text-block"
|
||||||
cmsWidgetName="whatHappensNextCopy"
|
cmsWidgetName="whatHappensNextCopy"
|
||||||
class="mt-4 mb-2 fw-bold"
|
class="mt-4 mb-2 fw-bold" />
|
||||||
id="coverage-statement-text-block" />
|
|
||||||
<div>
|
<div>
|
||||||
<p class="small" v-html="bodyText" ref="coverageStatementBodyText"></p>
|
<p
|
||||||
|
ref="coverageStatementBodyText"
|
||||||
|
class="small"
|
||||||
|
v-html="bodyText"></p>
|
||||||
</div>
|
</div>
|
||||||
<steeringText cmsWidgetName="MASteeringText" ></steeringText>
|
<steeringText cmsWidgetName="MASteeringText"></steeringText>
|
||||||
</div>
|
</div>
|
||||||
<siteFooter
|
<siteFooter
|
||||||
|
ref="siteFooter"
|
||||||
class="mt-5"
|
class="mt-5"
|
||||||
cmsWidgetName="SiteFooterWidget"
|
cmsWidgetName="SiteFooterWidget"
|
||||||
:isForwardActionDisabled="!meta.valid"
|
:isForwardActionDisabled="!meta.valid"
|
||||||
@backClicked="navigateBack"
|
@backClicked="navigateBack"
|
||||||
@forwardClicked="forwardButtonAction"
|
@forwardClicked="forwardButtonAction" />
|
||||||
ref="siteFooter" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
<recalModal
|
||||||
|
ref="RecalModal"
|
||||||
|
cmsWidgetName="RecalModal" />
|
||||||
</Form>
|
</Form>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
// Import Component
|
// Import Component
|
||||||
import baseFormMixin from '@/mixins/base-form-mixin';
|
|
||||||
import { Form } from 'vee-validate';
|
import { Form } from 'vee-validate';
|
||||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
import siteFooter from '@/iss-components/site-footer/site-footer';
|
||||||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
import siteHeader from '@/iss-components/site-header/site-header';
|
||||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
import textBlock from '@/digital-components/text-block/text-block';
|
||||||
import textBlock from "@/digital-components/text-block/text-block";
|
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal';
|
||||||
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
|
import steeringText from '@/iss-components/steering-text/steering-text';
|
||||||
import steeringText from "@/iss-components/steering-text/steering-text.vue";
|
|
||||||
// Import Supporting Files
|
// Import Supporting Files
|
||||||
import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper';
|
import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper.js';
|
||||||
import { settleAllPromises } from '@/helpers/layout-helper';
|
import { settleAllPromises } from '@/helpers/layout-helper.js';
|
||||||
import { getDamageString } from '@/helpers/damage-helper.js';
|
import { getDamageString } from '@/helpers/damage-helper.js';
|
||||||
import { useMainStore } from "@/store";
|
import { useMainStore } from '@/store/index.js';
|
||||||
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
|
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
|
||||||
|
import baseFormMixin from '@/mixins/base-form-mixin.js';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'coverage-statement',
|
name: 'coverage-statement',
|
||||||
mixins: [baseFormMixin, vehicleQuestionsMixin],
|
components: {
|
||||||
components: {
|
siteFooter,
|
||||||
siteFooter,
|
siteHeader,
|
||||||
siteHeader,
|
// eslint-disable-next-line vue/no-reserved-component-names
|
||||||
siteSubHeader,
|
Form,
|
||||||
Form,
|
textBlock,
|
||||||
textBlock,
|
recalModal,
|
||||||
recalModal,
|
steeringText
|
||||||
steeringText
|
},
|
||||||
},
|
mixins: [baseFormMixin, vehicleQuestionsMixin],
|
||||||
mounted() {
|
async beforeRouteEnter(to, from, next) {
|
||||||
setupModalLinks(this);
|
// Call APIs
|
||||||
},
|
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||||
computed: {
|
|
||||||
bodyText() {
|
|
||||||
if (useMainStore().damage.isRepair) {
|
|
||||||
return this.unverifiedNonADASRepairBodyText;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
let parts = useMainStore().lineItems.glassParts;
|
|
||||||
|
|
||||||
// if ADAS, display ADASNextSteps
|
// Settle promises and get results
|
||||||
if (parts != null && parts.filter(part => part.requiresRecalibration).length > 0) {
|
const promiseResultMap = [
|
||||||
return this.unverifiedADASNextStepsBodyText;
|
{
|
||||||
}
|
resultKey: 'cmsContent',
|
||||||
// if non-ADAS, display NonADASNextSteps
|
promise: cmsContentPromise
|
||||||
else {
|
}
|
||||||
return this.unverifiedNonADASNextStepsBodyText;
|
];
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
continueWithSchedulingBodyText() {
|
|
||||||
return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
|
|
||||||
},
|
|
||||||
unverifiedADASNextStepsBodyText() {
|
|
||||||
return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
|
|
||||||
},
|
|
||||||
unverifiedNonADASNextStepsBodyText() {
|
|
||||||
return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
|
|
||||||
},
|
|
||||||
unverifiedNonADASRepairBodyText() {
|
|
||||||
return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
|
|
||||||
},
|
|
||||||
damageText() {
|
|
||||||
var damageString = getDamageString();
|
|
||||||
return damageString == "match" ? "" : damageString;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
async beforeRouteEnter(to, from, next) {
|
|
||||||
// Call APIs
|
|
||||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
|
||||||
|
|
||||||
// Settle promises and get results
|
if (useMainStore().isClaimRegistrationRequired && !useMainStore().policy.noCoverage) {
|
||||||
const promiseResultMap = [
|
const registerClaimResponse = await useMainStore().registerClaim();
|
||||||
{
|
promiseResultMap.push({
|
||||||
resultKey: 'cmsContent',
|
resultKey: 'registerClaim',
|
||||||
promise: cmsContentPromise,
|
promise: registerClaimResponse
|
||||||
},
|
});
|
||||||
];
|
}
|
||||||
|
|
||||||
if (useMainStore().isClaimRegistrationRequired){
|
const resultMap = await settleAllPromises(promiseResultMap);
|
||||||
const registerClaimResponse = await useMainStore().registerClaim();
|
|
||||||
promiseResultMap.push({
|
next((vm) => {
|
||||||
resultKey: 'registerClaim',
|
vm.setCmsContent(resultMap.cmsContent);
|
||||||
promise: registerClaimResponse,
|
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
|
computed: {
|
||||||
|
bodyText() {
|
||||||
|
if (useMainStore().damage.isRepair) {
|
||||||
|
return this.unverifiedNonADASRepairBodyText;
|
||||||
|
}
|
||||||
|
|
||||||
const resultMap = await settleAllPromises(promiseResultMap);
|
const parts = useMainStore().lineItems.glassParts;
|
||||||
|
|
||||||
next((vm) => {
|
// if ADAS, display ADASNextSteps
|
||||||
vm.setCmsContent(resultMap.cmsContent);
|
if (parts != null && parts.filter((part) =>
|
||||||
});
|
part.requiresRecalibration).length > 0) {
|
||||||
},
|
return this.unverifiedADASNextStepsBodyText;
|
||||||
methods: {
|
}
|
||||||
arePagePrerequisitesValid() {
|
// if non-ADAS, display NonADASNextSteps
|
||||||
if (useMainStore().vehicle.vin) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
async forwardButtonAction() {
|
return this.unverifiedNonADASNextStepsBodyText;
|
||||||
return this.navigateForward();
|
},
|
||||||
},
|
continueWithSchedulingBodyText() {
|
||||||
|
return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
|
||||||
|
},
|
||||||
|
unverifiedADASNextStepsBodyText() {
|
||||||
|
return this.getCmsContent('UnverifiedADASNextStepsWidget', 'BodyText').replaceAll('{custom:damage}', this.damageText);
|
||||||
|
},
|
||||||
|
unverifiedNonADASNextStepsBodyText() {
|
||||||
|
return this.getCmsContent('UnverifiedNonADASNextStepsWidget', 'BodyText').replaceAll('{custom:damage}', this.damageText);
|
||||||
|
},
|
||||||
|
unverifiedNonADASRepairBodyText() {
|
||||||
|
return this.getCmsContent('UnverifiedNonADASRepairWidget', 'BodyText');
|
||||||
|
},
|
||||||
|
damageText() {
|
||||||
|
const damageString = getDamageString();
|
||||||
|
return damageString === 'match' ? '' : damageString;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
setupModalLinks(this);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
arePagePrerequisitesValid() {
|
||||||
|
if (useMainStore().vehicle.vin) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
navigateForward() {
|
async forwardButtonAction() {
|
||||||
this.$router.navigate(
|
return this.navigateForward();
|
||||||
this.navigationScenarios.CLICKED_FORWARD,
|
},
|
||||||
this.$route
|
|
||||||
);
|
navigateForward() {
|
||||||
},
|
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD,
|
||||||
},
|
this.$route);
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@ describe('policy-vehicles.vue', () => {
|
||||||
const expectedInput = {
|
const expectedInput = {
|
||||||
year: year,
|
year: year,
|
||||||
vin: vin,
|
vin: vin,
|
||||||
noCompensation: true,
|
noCoverage: true,
|
||||||
deductible: 0,
|
deductible: 0,
|
||||||
repairWaived: false
|
repairWaived: false
|
||||||
}
|
}
|
||||||
|
|
@ -89,7 +89,7 @@ describe('policy-vehicles.vue', () => {
|
||||||
//Arrange
|
//Arrange
|
||||||
const { wrapper } = setupMocks({});
|
const { wrapper } = setupMocks({});
|
||||||
|
|
||||||
const vin = getRandomString(17,17);
|
const vin = getRandomString(17, 17);
|
||||||
await wrapper.setData({
|
await wrapper.setData({
|
||||||
selectedVehicleVin: vin,
|
selectedVehicleVin: vin,
|
||||||
bailout: false
|
bailout: false
|
||||||
|
|
@ -130,24 +130,24 @@ describe('policy-vehicles.vue', () => {
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
})
|
});
|
||||||
|
|
||||||
describe('noCompensationForSelectedVehicle computed property', () => {
|
describe('noCoverageForSelectedVehicle computed property', () => {
|
||||||
it('No vehicle match => returns true', async () => {
|
it('No vehicle match => returns true', async () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const selectedVin = getRandomString(17,17);
|
const selectedVin = getRandomString(17, 17);
|
||||||
const otherVin = getRandomString(17,17);
|
const otherVin = getRandomString(17, 17);
|
||||||
const testValues = {
|
const testValues = {
|
||||||
selectedVehicleVin: selectedVin,
|
selectedVehicleVin: selectedVin,
|
||||||
policyVehicles: [
|
policyVehicles: [
|
||||||
{
|
{
|
||||||
vin: otherVin,
|
vin: otherVin
|
||||||
},
|
}
|
||||||
],
|
]
|
||||||
}
|
};
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
const result = policyVehicles.computed.noCompensationForSelectedVehicle.call(testValues);
|
const result = policyVehicles.computed.noCoverageForSelectedVehicle.call(testValues);
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
expect(result).toBeTruthy();
|
expect(result).toBeTruthy();
|
||||||
|
|
@ -155,19 +155,19 @@ describe('policy-vehicles.vue', () => {
|
||||||
|
|
||||||
it('Coverages list empty => true', () => {
|
it('Coverages list empty => true', () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const vin = getRandomString(17,17);
|
const vin = getRandomString(17, 17);
|
||||||
const testValues = {
|
const testValues = {
|
||||||
selectedVehicleVin: vin,
|
selectedVehicleVin: vin,
|
||||||
policyVehicles: [
|
policyVehicles: [
|
||||||
{
|
{
|
||||||
vin: vin,
|
vin,
|
||||||
coverages: []
|
coverages: []
|
||||||
},
|
}
|
||||||
],
|
]
|
||||||
}
|
};
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
const result = policyVehicles.computed.noCompensationForSelectedVehicle.call(testValues);
|
const result = policyVehicles.computed.noCoverageForSelectedVehicle.call(testValues);
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
expect(result).toBeTruthy();
|
expect(result).toBeTruthy();
|
||||||
|
|
@ -175,28 +175,28 @@ describe('policy-vehicles.vue', () => {
|
||||||
|
|
||||||
it('Coverages list non-empty => false', () => {
|
it('Coverages list non-empty => false', () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const vin = getRandomString(17,17);
|
const vin = getRandomString(17, 17);
|
||||||
const testValues = {
|
const testValues = {
|
||||||
selectedVehicleVin: vin,
|
selectedVehicleVin: vin,
|
||||||
policyVehicles: [
|
policyVehicles: [
|
||||||
{
|
{
|
||||||
vin: vin,
|
vin,
|
||||||
coverages: [
|
coverages: [
|
||||||
{
|
{
|
||||||
deductible: 0
|
deductible: 0
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
],
|
]
|
||||||
}
|
};
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
const result = policyVehicles.computed.noCompensationForSelectedVehicle.call(testValues);
|
const result = policyVehicles.computed.noCoverageForSelectedVehicle.call(testValues);
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
expect(result).toBeFalsy();
|
expect(result).toBeFalsy();
|
||||||
});
|
});
|
||||||
})
|
});
|
||||||
|
|
||||||
describe('deductibleForSelectedVehicle computed property', () => {
|
describe('deductibleForSelectedVehicle computed property', () => {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -104,7 +104,7 @@ export default {
|
||||||
}) ?? [];
|
}) ?? [];
|
||||||
return mappedData;
|
return mappedData;
|
||||||
},
|
},
|
||||||
noCompensationForSelectedVehicle() {
|
noCoverageForSelectedVehicle() {
|
||||||
const vehicle = this.policyVehicles.find((policyVehicle) =>
|
const vehicle = this.policyVehicles.find((policyVehicle) =>
|
||||||
policyVehicle.vin === this.selectedVehicleVin);
|
policyVehicle.vin === this.selectedVehicleVin);
|
||||||
return (vehicle?.coverages?.length ?? 0) === 0;
|
return (vehicle?.coverages?.length ?? 0) === 0;
|
||||||
|
|
@ -174,7 +174,7 @@ export default {
|
||||||
|
|
||||||
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
|
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
|
||||||
vin: this.selectedVehicleVin,
|
vin: this.selectedVehicleVin,
|
||||||
noCompensation: this.noCompensationForSelectedVehicle,
|
noCoverage: this.noCoverageForSelectedVehicle,
|
||||||
deductible: this.deductibleForSelectedVehicle,
|
deductible: this.deductibleForSelectedVehicle,
|
||||||
repairWaived: this.repairWaivedForSelectedVehicle
|
repairWaived: this.repairWaivedForSelectedVehicle
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@ const getDefaultState = () =>
|
||||||
damageState: null,
|
damageState: null,
|
||||||
damageCity: null,
|
damageCity: null,
|
||||||
isDamageGlassOnly: null,
|
isDamageGlassOnly: null,
|
||||||
noCompensation: null,
|
noCoverage: null,
|
||||||
deductible: {
|
deductible: {
|
||||||
repair: null, // numerical value; how much customer owes on deductible in repair case
|
repair: null, // numerical value; how much customer owes on deductible in repair case
|
||||||
replace: null // numerical value; how much customer owes on deductible in replace case,
|
replace: null // numerical value; how much customer owes on deductible in replace case,
|
||||||
|
|
@ -394,61 +394,68 @@ export const useMainStore = defineStore({
|
||||||
registerClaim() {
|
registerClaim() {
|
||||||
// TODO: replace place holder correlationId with the real thing
|
// TODO: replace place holder correlationId with the real thing
|
||||||
const placeHolderCorrelationId = '00000000-0000-0000-0000-000000000000';
|
const placeHolderCorrelationId = '00000000-0000-0000-0000-000000000000';
|
||||||
|
const nonNumberCharRegex = /[^0-9]/g;
|
||||||
globalMethods.callHttpClient({
|
globalMethods.callHttpClient({
|
||||||
method: endpoints.RegisterClaim.method,
|
method: endpoints.RegisterClaim.method,
|
||||||
endpoint: endpoints.RegisterClaim.url,
|
endpoint: endpoints.RegisterClaim.url,
|
||||||
payload:
|
payload:
|
||||||
{
|
{
|
||||||
correlationId: placeHolderCorrelationId,
|
correlationId: placeHolderCorrelationId,
|
||||||
accountNumber: this.issConfig.accountNumber?.toString() ?? '',
|
accountNumber: this.issConfig.accountNumber?.toString() ?? '',
|
||||||
insured: {
|
insured: {
|
||||||
firstName: this.order.customer.firstName,
|
firstName: this.order.customer.firstName,
|
||||||
lastName: this.order.customer.lastName,
|
lastName: this.order.customer.lastName,
|
||||||
address: {
|
address: {
|
||||||
addressLine1: this.order.customer.address.streetAddress,
|
addressLine1: this.order.customer.address.streetAddress,
|
||||||
addressLine2: this.order.customer.address.streetAddress2,
|
addressLine2: this.order.customer.address.streetAddress2,
|
||||||
city: this.order.customer.address.city,
|
city: this.order.customer.address.city,
|
||||||
state: this.order.customer.address.state,
|
state: this.order.customer.address.state,
|
||||||
zipCode: this.order.customer.address.zipCode,
|
zipCode: this.order.customer.address.zipCode,
|
||||||
country: 'US' // TODO set from store
|
country: 'US' // TODO set from store
|
||||||
},
|
},
|
||||||
homePhone: {
|
homePhone: {
|
||||||
number: this.order.customer.phoneNumber
|
number: this.order.customer.phoneNumber?.replaceAll(nonNumberCharRegex, '') ?? ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
caller: {
|
driver: {
|
||||||
homePhone: {}
|
firstName: this.order.customer.firstName,
|
||||||
},
|
lastName: this.order.customer.lastName
|
||||||
policyInfo: {
|
},
|
||||||
policyNumber: this.order.policy.policyNumber,
|
caller: {
|
||||||
safelitePolicy: {
|
homePhone: {}
|
||||||
policies: []
|
},
|
||||||
}
|
policyInfo: {
|
||||||
},
|
policyNumber: this.order.policy.policyNumber,
|
||||||
lossInfo: {
|
safelitePolicy: {
|
||||||
dateOfLoss: this.order.policy.dateOfLoss,
|
policies: []
|
||||||
location: {
|
}
|
||||||
city: this.order.policy.damageCity,
|
},
|
||||||
state: this.order.policy.damageState,
|
lossInfo: {
|
||||||
country: 'US' // TODO set from store
|
dateOfLoss: this.order.policy.dateOfLoss,
|
||||||
},
|
location: {
|
||||||
vehicle: {
|
city: this.order.policy.damageCity,
|
||||||
year: this.order.vehicle.year?.toString() ?? '',
|
state: this.order.policy.damageState,
|
||||||
make: this.order.vehicle.make,
|
country: 'US' // TODO set from store
|
||||||
model: this.order.vehicle.model,
|
},
|
||||||
vin: this.order.vehicle.vin
|
vehicle: {
|
||||||
}
|
year: this.order.vehicle.year?.toString() ?? '',
|
||||||
},
|
make: this.order.vehicle.make,
|
||||||
damageDescription: this.order.policy.damageCause
|
model: this.order.vehicle.model,
|
||||||
}
|
vin: this.order.vehicle.vin
|
||||||
|
},
|
||||||
|
damageDescription: this.order.policy.damageCause
|
||||||
|
}
|
||||||
|
}
|
||||||
}).then((response) => {
|
}).then((response) => {
|
||||||
const registerClaimFailed = response.data.isError;
|
const registerClaimFailed = response.data.isError;
|
||||||
this.order.payment.insuranceCoverage.isVerified = !registerClaimFailed;
|
this.order.payment.insuranceCoverage.isVerified = !registerClaimFailed;
|
||||||
this.order.payment.insuranceCoverage.coverageStatus = registerClaimFailed
|
if (registerClaimFailed) {
|
||||||
? coverageStatuses.PENDING
|
this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
|
||||||
: this.policy.noCompensation
|
} else if (this.policy.noCoverage) {
|
||||||
? coverageStatuses.NO_COMP
|
this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.NO_COMP;
|
||||||
: coverageStatuses.VERIFIED;
|
} else {
|
||||||
|
this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED;
|
||||||
|
}
|
||||||
}, (error) => {
|
}, (error) => {
|
||||||
this.order.payment.insuranceCoverage.isVerified = false;
|
this.order.payment.insuranceCoverage.isVerified = false;
|
||||||
this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
|
this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
|
||||||
|
|
@ -892,7 +899,7 @@ export const useMainStore = defineStore({
|
||||||
this.order.vehicle.imageColor = vehicle.imageVifColor;
|
this.order.vehicle.imageColor = vehicle.imageVifColor;
|
||||||
|
|
||||||
// These could be undefined
|
// These could be undefined
|
||||||
this.order.policy.noCompensation = vehicle.noCoverage;
|
this.order.policy.noCoverage = vehicle.noCoverage;
|
||||||
this.order.policy.deductible.replace = vehicle.deductible;
|
this.order.policy.deductible.replace = vehicle.deductible;
|
||||||
this.order.policy.deductible.repair = vehicle?.repairWaived ?? false ? 0 : vehicle.deductible;
|
this.order.policy.deductible.repair = vehicle?.repairWaived ?? false ? 0 : vehicle.deductible;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,30 @@
|
||||||
import { useMainStore } from '@/store';
|
import { useMainStore } from '@/store/index.js';
|
||||||
import { createApp } from 'vue';
|
import { setActivePinia, createPinia } from 'pinia';
|
||||||
import { setActivePinia, createPinia } from "pinia";
|
import { getRandomString,
|
||||||
import globalMethods from "@/global-methods";
|
getRandomGuid,
|
||||||
import App from '@/App';
|
getRandomInt,
|
||||||
import { getRandomString, getRandomGuid, getRandomInt, getRandomBoolean } from '@/helpers/data-generation';
|
getRandomBoolean } from '@/helpers/data-generation.js';
|
||||||
import { coverageStatuses } from "@/constants/coverage-statuses.js";
|
import { coverageStatuses } from '@/constants/coverage-statuses.js';
|
||||||
|
import globalMethods from '@/global-methods.js';
|
||||||
|
|
||||||
describe("Store", () => {
|
describe('Store', () => {
|
||||||
let store;
|
let store;
|
||||||
|
|
||||||
const vueApp = createApp(App);
|
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
const pinia = createPinia();
|
const pinia = createPinia();
|
||||||
setActivePinia(pinia);
|
setActivePinia(pinia);
|
||||||
vueApp.use(pinia);
|
|
||||||
store = useMainStore();
|
store = useMainStore();
|
||||||
store.applicationUser.eventBus = [];
|
store.applicationUser.eventBus = [];
|
||||||
jest.resetAllMocks();
|
jest.resetAllMocks();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("Should Store Vehicle Year", () => {
|
it('Should Store Vehicle Year', () => {
|
||||||
let testYear = "2001";
|
const testYear = '2001';
|
||||||
store.updateVehicleYear(testYear);
|
store.updateVehicleYear(testYear);
|
||||||
expect(store.order.vehicle.year).toEqual(testYear);
|
expect(store.order.vehicle.year).toEqual(testYear);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("Should add events to the bus", () => {
|
it('Should add events to the bus', () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const category = getRandomString(1, 25);
|
const category = getRandomString(1, 25);
|
||||||
const subCategory = getRandomString(5, 20);
|
const subCategory = getRandomString(5, 20);
|
||||||
|
|
@ -34,15 +32,15 @@ describe("Store", () => {
|
||||||
const copy = getRandomString(5, 25);
|
const copy = getRandomString(5, 25);
|
||||||
const headline = getRandomString(5, 25);
|
const headline = getRandomString(5, 25);
|
||||||
const type = getRandomString(5, 15);
|
const type = getRandomString(5, 15);
|
||||||
let event = {
|
const event = {
|
||||||
category: category,
|
category,
|
||||||
subCategory: subCategory,
|
subCategory,
|
||||||
eventValue: {
|
eventValue: {
|
||||||
isDismissible: isDismissible,
|
isDismissible,
|
||||||
messageCopy: copy,
|
messageCopy: copy,
|
||||||
messageHeadline: headline,
|
messageHeadline: headline,
|
||||||
type: type,
|
type
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
|
|
@ -52,7 +50,7 @@ describe("Store", () => {
|
||||||
expect(store.applicationUser.eventBus[0]).toEqual(event);
|
expect(store.applicationUser.eventBus[0]).toEqual(event);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("Should remove events from the bus", () => {
|
it('Should remove events from the bus', () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const category = getRandomString(1, 25);
|
const category = getRandomString(1, 25);
|
||||||
const subCategory = getRandomString(5, 20);
|
const subCategory = getRandomString(5, 20);
|
||||||
|
|
@ -60,15 +58,15 @@ describe("Store", () => {
|
||||||
const copy = getRandomString(5, 25);
|
const copy = getRandomString(5, 25);
|
||||||
const headline = getRandomString(5, 25);
|
const headline = getRandomString(5, 25);
|
||||||
const type = getRandomString(5, 15);
|
const type = getRandomString(5, 15);
|
||||||
let event = {
|
const event = {
|
||||||
category: category,
|
category,
|
||||||
subCategory: subCategory,
|
subCategory,
|
||||||
eventValue: {
|
eventValue: {
|
||||||
isDismissible: isDismissible,
|
isDismissible,
|
||||||
messageCopy: copy,
|
messageCopy: copy,
|
||||||
messageHeadline: headline,
|
messageHeadline: headline,
|
||||||
type: type,
|
type
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
store.addEventToBus(event);
|
store.addEventToBus(event);
|
||||||
|
|
@ -82,7 +80,7 @@ describe("Store", () => {
|
||||||
expect(store.applicationUser.eventBus.length).toBe(0);
|
expect(store.applicationUser.eventBus.length).toBe(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("Should return correct event using the getter function eventBusItem", () => {
|
it('Should return correct event using the getter function eventBusItem', () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const category = getRandomString(1, 25);
|
const category = getRandomString(1, 25);
|
||||||
const subCategory = getRandomString(5, 20);
|
const subCategory = getRandomString(5, 20);
|
||||||
|
|
@ -90,60 +88,60 @@ describe("Store", () => {
|
||||||
const copy = getRandomString(5, 25);
|
const copy = getRandomString(5, 25);
|
||||||
const headline = getRandomString(5, 25);
|
const headline = getRandomString(5, 25);
|
||||||
const type = getRandomString(5, 15);
|
const type = getRandomString(5, 15);
|
||||||
let event = {
|
const event = {
|
||||||
category: category,
|
category,
|
||||||
subCategory: subCategory,
|
subCategory,
|
||||||
eventValue: {
|
eventValue: {
|
||||||
isDismissible: isDismissible,
|
isDismissible,
|
||||||
messageCopy: copy,
|
messageCopy: copy,
|
||||||
messageHeadline: headline,
|
messageHeadline: headline,
|
||||||
type: type,
|
type
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
store.addEventToBus(event);
|
store.addEventToBus(event);
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
const actual = store.eventBusItem(event.category, event.subCategory)
|
const actual = store.eventBusItem(event.category, event.subCategory);
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
expect(actual).toEqual(event.eventValue);
|
expect(actual).toEqual(event.eventValue);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("UpdateVehicle should merge vehicle with response object", () => {
|
it('UpdateVehicle should merge vehicle with response object', () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const carId = getRandomString(10,14);
|
const carId = getRandomString(10, 14);
|
||||||
const category = getRandomString(3,7);
|
const category = getRandomString(3, 7);
|
||||||
const year = getRandomInt(1960, 2023);
|
const year = getRandomInt(1960, 2023);
|
||||||
const make = getRandomString(4,10);
|
const make = getRandomString(4, 10);
|
||||||
const model = getRandomString(4,10);
|
const model = getRandomString(4, 10);
|
||||||
const style = getRandomString(4,15);
|
const style = getRandomString(4, 15);
|
||||||
const imageUrl = getRandomString(50,100);
|
const imageUrl = getRandomString(50, 100);
|
||||||
const imageVifNumber = getRandomInt(10000,99999).toString();
|
const imageVifNumber = getRandomInt(10000, 99999).toString();
|
||||||
const imageColor = getRandomString(4,10);
|
const imageColor = getRandomString(4, 10);
|
||||||
const providedVehicle = {
|
const providedVehicle = {
|
||||||
carId: carId,
|
carId,
|
||||||
category: category,
|
category,
|
||||||
year: year,
|
year,
|
||||||
make: make,
|
make,
|
||||||
model: model,
|
model,
|
||||||
style: style,
|
style,
|
||||||
imageUrl: imageUrl,
|
imageUrl,
|
||||||
imageVifNumber: imageVifNumber,
|
imageVifNumber,
|
||||||
imageVifColor: imageColor
|
imageVifColor: imageColor
|
||||||
};
|
};
|
||||||
|
|
||||||
const expectedVehicle = {
|
const expectedVehicle = {
|
||||||
carId: carId,
|
carId,
|
||||||
category: category,
|
category,
|
||||||
year: year,
|
year,
|
||||||
make: make,
|
make,
|
||||||
model: model,
|
model,
|
||||||
style: style,
|
style,
|
||||||
imageUrl: imageUrl,
|
imageUrl,
|
||||||
imageVifNumber: imageVifNumber,
|
imageVifNumber,
|
||||||
imageColor: imageColor
|
imageColor
|
||||||
}
|
};
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
store.updateVehicle(providedVehicle);
|
store.updateVehicle(providedVehicle);
|
||||||
|
|
@ -152,18 +150,18 @@ describe("Store", () => {
|
||||||
expect(store.order.vehicle).toMatchObject(expectedVehicle);
|
expect(store.order.vehicle).toMatchObject(expectedVehicle);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("UpdateVehicle should set policy values appropriately with repair waived", () => {
|
it('UpdateVehicle should set policy values appropriately with repair waived', () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const noCompensation = getRandomBoolean();
|
const noCoverage = getRandomBoolean();
|
||||||
const deductible = getRandomInt(1,500);
|
const deductible = getRandomInt(1, 500);
|
||||||
const vehicle = {
|
const vehicle = {
|
||||||
noCoverage: noCompensation,
|
noCoverage,
|
||||||
deductible: deductible,
|
deductible,
|
||||||
repairWaived: true
|
repairWaived: true
|
||||||
};
|
};
|
||||||
|
|
||||||
const expectedPolicy = {
|
const expectedPolicy = {
|
||||||
noCompensation: noCompensation,
|
noCoverage,
|
||||||
deductible: {
|
deductible: {
|
||||||
replace: deductible,
|
replace: deductible,
|
||||||
repair: 0
|
repair: 0
|
||||||
|
|
@ -177,18 +175,18 @@ describe("Store", () => {
|
||||||
expect(store.order.policy).toMatchObject(expectedPolicy);
|
expect(store.order.policy).toMatchObject(expectedPolicy);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("UpdateVehicle should set policy values appropriately with repair not waived", () => {
|
it('UpdateVehicle should set policy values appropriately with repair not waived', () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const noCompensation = getRandomBoolean();
|
const noCoverage = getRandomBoolean();
|
||||||
const deductible = getRandomInt(1,500);
|
const deductible = getRandomInt(1, 500);
|
||||||
const vehicle = {
|
const vehicle = {
|
||||||
noCoverage: noCompensation,
|
noCoverage,
|
||||||
deductible: deductible,
|
deductible,
|
||||||
repairWaived: false
|
repairWaived: false
|
||||||
};
|
};
|
||||||
|
|
||||||
const expectedPolicy = {
|
const expectedPolicy = {
|
||||||
noCompensation: noCompensation,
|
noCoverage,
|
||||||
deductible: {
|
deductible: {
|
||||||
replace: deductible,
|
replace: deductible,
|
||||||
repair: deductible
|
repair: deductible
|
||||||
|
|
@ -203,27 +201,27 @@ describe("Store", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO update test to work also checking store values
|
// TODO update test to work also checking store values
|
||||||
it("setVehicle should call globalMethods.callHttpClient", () => {
|
it('setVehicle should call globalMethods.callHttpClient', () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const carId = getRandomString(10,14);
|
const carId = getRandomString(10, 14);
|
||||||
const category = getRandomString(3,7);
|
const category = getRandomString(3, 7);
|
||||||
const year = getRandomInt(1960, 2023);
|
const year = getRandomInt(1960, 2023);
|
||||||
const make = getRandomString(4,10);
|
const make = getRandomString(4, 10);
|
||||||
const model = getRandomString(4,10);
|
const model = getRandomString(4, 10);
|
||||||
const style = getRandomString(4,15);
|
const style = getRandomString(4, 15);
|
||||||
const imageUrl = getRandomString(50,100);
|
const imageUrl = getRandomString(50, 100);
|
||||||
const imageVifNumber = getRandomInt(10000,99999).toString();
|
const imageVifNumber = getRandomInt(10000, 99999).toString();
|
||||||
const imageColor = getRandomString(4,10);
|
const imageColor = getRandomString(4, 10);
|
||||||
const response = {
|
const response = {
|
||||||
data: {
|
data: {
|
||||||
carId: carId,
|
carId,
|
||||||
category: category,
|
category,
|
||||||
year: year,
|
year,
|
||||||
make: make,
|
make,
|
||||||
model: model,
|
model,
|
||||||
style: style,
|
style,
|
||||||
imageUrl: imageUrl,
|
imageUrl,
|
||||||
imageVifNumber: imageVifNumber,
|
imageVifNumber,
|
||||||
imageVifColor: imageColor
|
imageVifColor: imageColor
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -238,16 +236,16 @@ describe("Store", () => {
|
||||||
expect(returned).resolves.toMatchObject(response);
|
expect(returned).resolves.toMatchObject(response);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("saveVehicleDamage with windshield repair should update damage with number of chips not null", () => {
|
it('saveVehicleDamage with windshield repair should update damage with number of chips not null', () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const glassName = getRandomString(4,10);
|
const glassName = getRandomString(4, 10);
|
||||||
const glassLocation = getRandomString(5,15);
|
const glassLocation = getRandomString(5, 15);
|
||||||
const isWindshieldRepair = true;
|
const isWindshieldRepair = true;
|
||||||
const selectedGlassToReplace = [{
|
const selectedGlassToReplace = [{
|
||||||
glassName: glassName,
|
glassName,
|
||||||
glassLocation: glassLocation
|
glassLocation
|
||||||
}];
|
}];
|
||||||
const chipCount = getRandomInt(0,3);
|
const chipCount = getRandomInt(0, 3);
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
store.saveVehicleDamage(isWindshieldRepair, selectedGlassToReplace, chipCount);
|
store.saveVehicleDamage(isWindshieldRepair, selectedGlassToReplace, chipCount);
|
||||||
|
|
@ -258,16 +256,16 @@ describe("Store", () => {
|
||||||
expect(store.order.damage.numberOfChips).toEqual(chipCount);
|
expect(store.order.damage.numberOfChips).toEqual(chipCount);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("saveVehicleDamage without windshield repair should update damage with number of chips null", () => {
|
it('saveVehicleDamage without windshield repair should update damage with number of chips null', () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const glassName = getRandomString(4,10);
|
const glassName = getRandomString(4, 10);
|
||||||
const glassLocation = getRandomString(5,15);
|
const glassLocation = getRandomString(5, 15);
|
||||||
const isWindshieldRepair = false;
|
const isWindshieldRepair = false;
|
||||||
const selectedGlassToReplace = [{
|
const selectedGlassToReplace = [{
|
||||||
glassName: glassName,
|
glassName,
|
||||||
glassLocation: glassLocation
|
glassLocation
|
||||||
}];
|
}];
|
||||||
const chipCount = getRandomInt(0,3);
|
const chipCount = getRandomInt(0, 3);
|
||||||
|
|
||||||
const expectedChipCount = null;
|
const expectedChipCount = null;
|
||||||
|
|
||||||
|
|
@ -280,83 +278,83 @@ describe("Store", () => {
|
||||||
expect(store.order.damage.numberOfChips).toEqual(expectedChipCount);
|
expect(store.order.damage.numberOfChips).toEqual(expectedChipCount);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should return registration data if available", () => {
|
it('should return registration data if available', () => {
|
||||||
//Arrange
|
// Arrange
|
||||||
const streetAddress = getRandomString(5,15);
|
const streetAddress = getRandomString(5, 15);
|
||||||
const city = getRandomString(5,15);
|
const city = getRandomString(5, 15);
|
||||||
const state = getRandomString(5,10);
|
const state = getRandomString(5, 10);
|
||||||
const zipCode = getRandomInt(10000,99999).toString();
|
const zipCode = getRandomInt(10000, 99999).toString();
|
||||||
const firstName = getRandomString(5,20);
|
const firstName = getRandomString(5, 20);
|
||||||
const lastName = getRandomString(5,20);
|
const lastName = getRandomString(5, 20);
|
||||||
const expected = {
|
const expected = {
|
||||||
addressQuestions: {
|
addressQuestions: {
|
||||||
streetAddress: streetAddress,
|
streetAddress,
|
||||||
city: city,
|
city,
|
||||||
state: state,
|
state,
|
||||||
zipCode: zipCode,
|
zipCode
|
||||||
},
|
},
|
||||||
firstName: firstName,
|
firstName,
|
||||||
lastName: lastName,
|
lastName
|
||||||
}
|
};
|
||||||
|
|
||||||
store.order.vehicle.registration = {
|
store.order.vehicle.registration = {
|
||||||
licensePlate: null,
|
licensePlate: null,
|
||||||
address: streetAddress,
|
address: streetAddress,
|
||||||
city: city,
|
city,
|
||||||
state: state,
|
state,
|
||||||
zipCode: zipCode,
|
zipCode,
|
||||||
firstName: firstName,
|
firstName,
|
||||||
lastName: lastName,
|
lastName
|
||||||
};
|
};
|
||||||
|
|
||||||
//Act
|
// Act
|
||||||
const actual = store.customerData;
|
const actual = store.customerData;
|
||||||
|
|
||||||
//Assert
|
// Assert
|
||||||
expect(actual).toEqual(expected);
|
expect(actual).toEqual(expected);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should return customer data if registration data unavailable", () => {
|
it('should return customer data if registration data unavailable', () => {
|
||||||
//Arrange
|
// Arrange
|
||||||
const address = getRandomString(1,25);
|
const address = getRandomString(1, 25);
|
||||||
const city = getRandomString(5,20);
|
const city = getRandomString(5, 20);
|
||||||
const state = getRandomString(4,20);
|
const state = getRandomString(4, 20);
|
||||||
const zipCode = getRandomInt(10000, 99999).toString();
|
const zipCode = getRandomInt(10000, 99999).toString();
|
||||||
const firstName = getRandomString(5,25);
|
const firstName = getRandomString(5, 25);
|
||||||
const lastName = getRandomString(5,25);
|
const lastName = getRandomString(5, 25);
|
||||||
const expected = {
|
const expected = {
|
||||||
addressQuestions: {
|
addressQuestions: {
|
||||||
streetAddress: address,
|
streetAddress: address,
|
||||||
city: city,
|
city,
|
||||||
state: state,
|
state,
|
||||||
zipCode: zipCode,
|
zipCode
|
||||||
},
|
},
|
||||||
firstName: firstName,
|
firstName,
|
||||||
lastName: lastName,
|
lastName
|
||||||
}
|
};
|
||||||
|
|
||||||
store.order.vehicle.registration.address = null;
|
store.order.vehicle.registration.address = null;
|
||||||
|
|
||||||
store.order.customer = {
|
store.order.customer = {
|
||||||
address: {
|
address: {
|
||||||
streetAddress: address,
|
streetAddress: address,
|
||||||
city: city,
|
city,
|
||||||
state: state,
|
state,
|
||||||
zipCode: zipCode
|
zipCode
|
||||||
},
|
},
|
||||||
firstName: firstName,
|
firstName,
|
||||||
lastName: lastName
|
lastName
|
||||||
};
|
};
|
||||||
|
|
||||||
//Act
|
// Act
|
||||||
const actual = store.customerData;
|
const actual = store.customerData;
|
||||||
|
|
||||||
//Assert
|
// Assert
|
||||||
expect(actual).toMatchObject(expected);
|
expect(actual).toMatchObject(expected);
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("registerClaim method", () => {
|
describe('registerClaim method', () => {
|
||||||
it("successful response with no coverage => isVerified true and coverage status no comp", async () => {
|
it('successful response with no coverage => isVerified true and coverage status no comp', async () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const response = {
|
const response = {
|
||||||
data: {
|
data: {
|
||||||
|
|
@ -369,7 +367,7 @@ describe("Store", () => {
|
||||||
deductible: 0
|
deductible: 0
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
store.policy.noCompensation = true;
|
store.policy.noCoverage = true;
|
||||||
|
|
||||||
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response));
|
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response));
|
||||||
|
|
||||||
|
|
@ -382,7 +380,7 @@ describe("Store", () => {
|
||||||
expect(store.payment.insuranceCoverage.coverageStatus).toBe(coverageStatuses.NO_COMP);
|
expect(store.payment.insuranceCoverage.coverageStatus).toBe(coverageStatuses.NO_COMP);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("successful response with coverage => isVerified true and coverage status verified", async () => {
|
it('successful response with coverage => isVerified true and coverage status verified', async () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const response = {
|
const response = {
|
||||||
data: {
|
data: {
|
||||||
|
|
@ -395,7 +393,7 @@ describe("Store", () => {
|
||||||
deductible: 0
|
deductible: 0
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
store.policy.noCompensation = false;
|
store.policy.noCoverage = false;
|
||||||
|
|
||||||
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response));
|
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response));
|
||||||
|
|
||||||
|
|
@ -406,9 +404,9 @@ describe("Store", () => {
|
||||||
expect(globalMethods.callHttpClient).toHaveBeenCalled();
|
expect(globalMethods.callHttpClient).toHaveBeenCalled();
|
||||||
expect(store.payment.insuranceCoverage.isVerified).toBe(true);
|
expect(store.payment.insuranceCoverage.isVerified).toBe(true);
|
||||||
expect(store.payment.insuranceCoverage.coverageStatus).toBe(coverageStatuses.VERIFIED);
|
expect(store.payment.insuranceCoverage.coverageStatus).toBe(coverageStatuses.VERIFIED);
|
||||||
})
|
});
|
||||||
|
|
||||||
it("Call to client returns exception, resulting in object with error property being returned", async () => {
|
it('Call to client returns exception, resulting in object with error property being returned', async () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.reject());
|
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.reject());
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue