CarlNation
GitHub
commit
a2009935e8
11 changed files with 730 additions and 10 deletions
129
package-lock.json
generated
129
package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
|||
"dependencies": {
|
||||
"@adyen/adyen-web": "^6.27.0",
|
||||
"@iframe-resizer/child": "^5.3.3",
|
||||
"@vuepic/vue-datepicker": "^12.1.0",
|
||||
"axios": "^0.30.2",
|
||||
"bootstrap": "^5.3.3",
|
||||
"core-js": "^3.38.1",
|
||||
|
|
@ -1910,6 +1911,11 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@date-fns/tz": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
|
||||
"integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="
|
||||
},
|
||||
"node_modules/@discoveryjs/json-ext": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
|
||||
|
|
@ -2045,6 +2051,63 @@
|
|||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
|
||||
"integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.7.6",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
|
||||
"integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.7.5",
|
||||
"@floating-ui/utils": "^0.2.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.11",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
|
||||
"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="
|
||||
},
|
||||
"node_modules/@floating-ui/vue": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.11.tgz",
|
||||
"integrity": "sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.7.6",
|
||||
"@floating-ui/utils": "^0.2.11",
|
||||
"vue-demi": ">=0.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/vue/node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@hapi/hoek": {
|
||||
"version": "9.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
|
||||
|
|
@ -3572,6 +3635,11 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/web-bluetooth": {
|
||||
"version": "0.0.21",
|
||||
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
|
||||
"integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.18.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
|
||||
|
|
@ -4536,6 +4604,58 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vuepic/vue-datepicker": {
|
||||
"version": "12.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-12.1.0.tgz",
|
||||
"integrity": "sha512-QuWcO+CqIGYFoRNCagp9xUY9sMK/OHUlVIDxBYjw7HjCTWXfuE/r3l3loB00faEtb0Teo3DeBn26hT3tYA5pgg==",
|
||||
"dependencies": {
|
||||
"@date-fns/tz": "^1.4.1",
|
||||
"@floating-ui/vue": "^1.1.9",
|
||||
"@vueuse/core": "^14.1.0",
|
||||
"date-fns": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.12.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": ">=3.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/core": {
|
||||
"version": "14.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.1.tgz",
|
||||
"integrity": "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==",
|
||||
"dependencies": {
|
||||
"@types/web-bluetooth": "^0.0.21",
|
||||
"@vueuse/metadata": "14.2.1",
|
||||
"@vueuse/shared": "14.2.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/metadata": {
|
||||
"version": "14.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.1.tgz",
|
||||
"integrity": "sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/shared": {
|
||||
"version": "14.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.1.tgz",
|
||||
"integrity": "sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@webassemblyjs/ast": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
|
||||
|
|
@ -6693,6 +6813,15 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
|
||||
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"node_modules/debounce": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"dependencies": {
|
||||
"@adyen/adyen-web": "^6.27.0",
|
||||
"@iframe-resizer/child": "^5.3.3",
|
||||
"@vuepic/vue-datepicker": "^12.1.0",
|
||||
"axios": "^0.30.2",
|
||||
"bootstrap": "^5.3.3",
|
||||
"core-js": "^3.38.1",
|
||||
|
|
|
|||
|
|
@ -38,6 +38,12 @@ const errorMessages = {
|
|||
STYLE_REQUIRED: "Please select your vehicle style",
|
||||
PROMO_REQUIRED: "Please enter a promo code",
|
||||
INSURANCE_COMPANY_REQUIRED: "Please select an insurance company",
|
||||
INSURANCE_COMPANY_NAME_REQUIRED: "Please enter your insurance company name",
|
||||
POLICY_NUMBER_REQUIRED: "Please enter your policy number",
|
||||
DATE_OF_LOSS_REQUIRED: "Please enter your date of damage",
|
||||
DAMAGE_TYPES_REQUIRED: "How damage occurred is required",
|
||||
ZIP_CODE_REQUIRED: "Please enter your ZIP code",
|
||||
ZIP_CODE_FORMAT: "Zip must be 5 digits",
|
||||
};
|
||||
|
||||
export { errorMessages };
|
||||
|
|
|
|||
|
|
@ -109,6 +109,8 @@ const storeActions = {
|
|||
SAVE_VAPS: "saveVaps",
|
||||
SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS: "saveActiveAndOrInactivePromos",
|
||||
SAVE_CUSTOMER_DETAILS: "saveCustomerDetails",
|
||||
SAVE_INSURANCE_DETAILS: "saveInsuranceDetails",
|
||||
SAVE_DAMAGE_DETAILS: "saveDamageDetails",
|
||||
SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
|
||||
SAVE_CCTOKEN: "saveCCToken",
|
||||
SAVE_PAYPAL_TOKEN: "savePaypalToken",
|
||||
|
|
|
|||
|
|
@ -51,6 +51,10 @@ const storeMutations = {
|
|||
UPDATE_CUSTOMER_DETAILS: "updateCustomerDetails",
|
||||
UPDATE_CUSTOMER_WAITLIST_REQUESTED: "updateCustomerWaitListRequested",
|
||||
|
||||
// INSURANCE / DAMAGE MUTATIONS
|
||||
UPDATE_INSURANCE_DETAILS: "updateInsuranceDetails",
|
||||
UPDATE_DAMAGE_DETAILS: "updateDamageDetails",
|
||||
|
||||
// ORDER MUTATIONS
|
||||
UPDATE_REFERRAL_NUMBER: "updateReferralNumber",
|
||||
UPDATE_REFERRAL_SEQUENCE_NUMBER: "updateReferralSequenceNumber",
|
||||
|
|
|
|||
272
src/digital-components/date-picker-popup/date-picker-popup.vue
Normal file
272
src/digital-components/date-picker-popup/date-picker-popup.vue
Normal file
|
|
@ -0,0 +1,272 @@
|
|||
<template>
|
||||
<div
|
||||
class="date-picker-popup"
|
||||
:class="[(errors && errors.length) || hasError ? 'has-error' : '']">
|
||||
<label
|
||||
v-if="displayQuestionText"
|
||||
:for="inputId"
|
||||
:aria-label="questionText"
|
||||
class="form-label"
|
||||
:class="[
|
||||
questionAlignment === 'center' ? 'text-center w-100 mb-5' : '',
|
||||
labelBold ? 'label-bold' : '',
|
||||
]"
|
||||
v-html="questionText"></label>
|
||||
<div class="input-wrapper">
|
||||
<VueDatePicker
|
||||
v-model="value"
|
||||
:menu-id="`${inputId}-menu`"
|
||||
:input-class-name="inputClassName"
|
||||
:placeholder="placeholderText"
|
||||
:formats="formatsConfig"
|
||||
:model-type="modelType"
|
||||
:time-config="timeConfig"
|
||||
:input-attrs="inputAttrs"
|
||||
:disabled="isDisabled"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:auto-apply="autoApply"
|
||||
:text-input="textInput"
|
||||
:teleport="true"
|
||||
:aria-labels="{ input: questionText }"
|
||||
@update:model-value="onDateChange"
|
||||
@blur="onPickerClosed"
|
||||
@closed="onPickerClosed" />
|
||||
</div>
|
||||
<div v-show="errorMessage" class="row form-test-error">
|
||||
<span
|
||||
class="d-inline-flex small mt-1"
|
||||
aria-atomic="true"
|
||||
aria-live="polite"
|
||||
:class="[centerErrorMessage ? 'center-error-message' : '']">
|
||||
{{ errorMessage }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useField } from "vee-validate";
|
||||
import { VueDatePicker } from "@vuepic/vue-datepicker";
|
||||
import "@vuepic/vue-datepicker/dist/main.css";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
export default {
|
||||
name: "date-picker-popup",
|
||||
components: {
|
||||
VueDatePicker,
|
||||
},
|
||||
props: {
|
||||
customInputId: String,
|
||||
modelValue: [String, Date, Object],
|
||||
cmsWidgetName: String,
|
||||
validationRules: String,
|
||||
isRequired: Boolean,
|
||||
isDisabled: Boolean,
|
||||
hasError: Boolean,
|
||||
displayQuestionText: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
placeholderText: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// Display format shown in the input
|
||||
format: {
|
||||
type: String,
|
||||
default: "MM/dd/yyyy",
|
||||
},
|
||||
// Format used for the v-model value emitted to parent
|
||||
modelType: {
|
||||
type: String,
|
||||
default: "MM/dd/yyyy",
|
||||
},
|
||||
enableTimePicker: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
minDate: {
|
||||
type: [String, Date],
|
||||
default: null,
|
||||
},
|
||||
maxDate: {
|
||||
type: [String, Date],
|
||||
default: null,
|
||||
},
|
||||
autoApply: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
textInput: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
questionAlignment: String,
|
||||
labelBold: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
centerErrorMessage: Boolean,
|
||||
addOptionalText: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue", "change", "blur"],
|
||||
setup(props) {
|
||||
const uuid = uuidv4();
|
||||
const inputId = !props.customInputId ? `date-picker-${uuid}` : props.customInputId;
|
||||
|
||||
const initialValue = props.modelValue ?? "";
|
||||
|
||||
const fieldOptions = {
|
||||
type: "text",
|
||||
value: initialValue,
|
||||
initialValue: initialValue,
|
||||
};
|
||||
|
||||
const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
|
||||
inputId,
|
||||
props.validationRules,
|
||||
fieldOptions
|
||||
);
|
||||
|
||||
return {
|
||||
inputId,
|
||||
errorMessage,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
validate,
|
||||
meta,
|
||||
errors,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
questionText() {
|
||||
if (!this.cmsWidgetName) return "";
|
||||
const text = this.getCmsContent
|
||||
? this.getCmsContent(this.cmsWidgetName, "BodyText")
|
||||
: "";
|
||||
return this.addOptionalText ? `${text} (optional)` : text;
|
||||
},
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
inputClassName() {
|
||||
return [
|
||||
"form-control",
|
||||
(this.errors && this.errors.length) || this.hasError ? "is-invalid" : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
},
|
||||
formatsConfig() {
|
||||
return {
|
||||
input: this.format,
|
||||
preview: this.format,
|
||||
};
|
||||
},
|
||||
timeConfig() {
|
||||
return {
|
||||
enableTimePicker: this.enableTimePicker,
|
||||
};
|
||||
},
|
||||
inputAttrs() {
|
||||
return {
|
||||
id: this.inputId,
|
||||
name: this.inputId,
|
||||
clearable: this.clearable,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onDateChange(newValue) {
|
||||
this.handleChange(newValue);
|
||||
this.$emit("change", newValue);
|
||||
},
|
||||
onPickerClosed() {
|
||||
this.handleBlur();
|
||||
// handleChange updates the field value AND triggers reactive validation,
|
||||
// populating errors/errorMessage. Pass the current modelValue (may be empty).
|
||||
this.handleChange(this.modelValue ?? "");
|
||||
this.$emit("blur");
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelValue(newValue) {
|
||||
this.handleChange(newValue);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.date-picker-popup {
|
||||
label {
|
||||
font-family: UrbanistSemibold;
|
||||
color: $black;
|
||||
}
|
||||
.label-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
.form-label {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.center-error-message {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
// Match the look-and-feel of textbox-question's input
|
||||
.dp__input {
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 0.5rem;
|
||||
min-height: 3rem;
|
||||
padding: 0.75rem 1rem 0.75rem 2.5rem;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
font-family: inherit;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 1rem 1rem 1rem 2.5rem;
|
||||
min-height: 3.5rem;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-color: $gray-500;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $gray-500;
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.dp__disabled {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-error .dp__input {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.dp__today {
|
||||
background-color: #ffc966 !important;
|
||||
color: $black;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -25,7 +25,7 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
|||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
import { Form } from "vee-validate";
|
||||
|
||||
import store from "@/store";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
||||
|
|
@ -33,7 +33,10 @@ export default {
|
|||
name: "coverage-statement",
|
||||
mixins: [],
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
isClaimAndCoverage: this.isClaimAndCoverageFromStore(),
|
||||
isRecalibrationOnOrder: this.isRecalibrationOnOrderFromStore(),
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
|
|
@ -58,7 +61,29 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
isClaimAndCoverageFromStore() {
|
||||
return store.getters.order?.payment?.isClaimAndCoverage;
|
||||
},
|
||||
isRecalibrationOnOrderFromStore() {
|
||||
return store.getters.isRecalibrationOnOrder;
|
||||
},
|
||||
backButtonAction() {
|
||||
if (!this.isClaimAndCoverage) {
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.CLICKED_BACK_NON_CLAIM_AND_COVERAGE,
|
||||
this.pageName
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isRecalibrationOnOrder) {
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.CLICKED_BACK_RECALIBRATION_INFO,
|
||||
this.pageName
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.CLICKED_BACK,
|
||||
this.pageName
|
||||
|
|
|
|||
|
|
@ -1,13 +1,105 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
||||
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<!--
|
||||
... Page code goes here.
|
||||
-->
|
||||
<funnelSubHeader
|
||||
cmsWidgetName="FunnelSubHeaderWidget"
|
||||
class="mt-4 mb-5"
|
||||
alignLeft />
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
isDisabled
|
||||
class="mb-4 locked-input"
|
||||
cmsWidgetName="InsuranceCompanyNameWidget"
|
||||
v-model="insuranceCompanyName"
|
||||
ref="insuranceCompanyName"
|
||||
customInputId="insuranceCompanyName"
|
||||
validationRules="insurance-company-name-required" />
|
||||
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="PolicyNumberWidget"
|
||||
v-model="policyNumber"
|
||||
inputId="policyNumber"
|
||||
placeholderText="Type your policy number"
|
||||
validationRules="policy-number-required" />
|
||||
|
||||
<datePickerPopup
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="DateOfLossWidget"
|
||||
v-model="dateOfLoss"
|
||||
customInputId="dateOfLoss"
|
||||
placeholderText="MM/DD/YYYY"
|
||||
validationRules="date-of-loss-required"
|
||||
format="MM/dd/yyyy"
|
||||
modelType="MM/dd/yyyy"
|
||||
:enableTimePicker="false"
|
||||
:clearable="false" />
|
||||
|
||||
<dropdownQuestion
|
||||
isRequired
|
||||
:questionText="damageTypesQuestionText"
|
||||
class="mb-4"
|
||||
v-model="damageCause"
|
||||
cmsWidgetName="DamageTypesWidget"
|
||||
customDropdownId="damageTypes"
|
||||
:options="damageTypesOptions"
|
||||
:valueAsKey="true"
|
||||
validationRules="damage-types-required"
|
||||
:labelBold="true" />
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<textBlock cmsWidgetName="AddressSectionWidget" class="dark" typeStyle="h5" />
|
||||
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="StreetAddressWidget"
|
||||
v-model="streetAddress"
|
||||
inputId="streetAddress"
|
||||
validationRules="street-address-required" />
|
||||
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="ApartmentWidget"
|
||||
v-model="apartment"
|
||||
inputId="apartment" />
|
||||
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="CityWidget"
|
||||
v-model="city"
|
||||
inputId="city"
|
||||
validationRules="city-required" />
|
||||
|
||||
<dropdownQuestion
|
||||
class="mb-4"
|
||||
customDropdownId="policyState"
|
||||
cmsWidgetName="StateQuestionWidget"
|
||||
v-model="policyState"
|
||||
ref="policyState"
|
||||
:options="stateOptions"
|
||||
validationRules="state-required"
|
||||
autocomplete="address-level1"
|
||||
:labelBold="true" />
|
||||
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="ZipQuestionWidget"
|
||||
v-model="policyZip"
|
||||
inputId="policyZip"
|
||||
maxLength="5"
|
||||
validationRules="zip-code-required|zip-code-format" />
|
||||
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="navbar"
|
||||
|
|
@ -24,22 +116,58 @@
|
|||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
import { Form } from "vee-validate";
|
||||
|
||||
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
|
||||
import datePickerPopup from "@/digital-components/date-picker-popup/date-picker-popup";
|
||||
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import store from "@/store";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { stateOptions } from "@/constants/state-options";
|
||||
import { regex } from "@/helpers/validation-rules";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule(
|
||||
"insurance-company-name-required",
|
||||
required(errorMessages.INSURANCE_COMPANY_NAME_REQUIRED)
|
||||
);
|
||||
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
|
||||
defineRule("date-of-loss-required", required(errorMessages.DATE_OF_LOSS_REQUIRED));
|
||||
defineRule("damage-types-required", required(errorMessages.DAMAGE_TYPES_REQUIRED));
|
||||
defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
|
||||
defineRule("city-required", required(errorMessages.CITY_REQUIRED));
|
||||
defineRule("state-required", required(errorMessages.STATE_REQUIRED));
|
||||
defineRule("zip-code-required", required(errorMessages.ZIP_CODE_REQUIRED));
|
||||
defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_CODE_FORMAT));
|
||||
|
||||
export default {
|
||||
name: "insurance-details",
|
||||
mixins: [],
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
insuranceCompanyName: this.getInsuranceCompanyNameFromStore(),
|
||||
policyNumber: this.getPolicyNumberFromStore(),
|
||||
dateOfLoss: this.getDateOfLossFromStore(),
|
||||
damageCause: this.getDamageCauseFromStore(),
|
||||
streetAddress: this.getStreetAddressFromStore(),
|
||||
apartment: this.getApartmentFromStore(),
|
||||
city: this.getCityFromStore(),
|
||||
policyState: this.getPolicyStateFromStore(),
|
||||
policyZip: this.getPolicyZipFromStore(),
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
funnelHeader,
|
||||
navbar,
|
||||
funnelSubHeader,
|
||||
textboxQuestion,
|
||||
datePickerPopup,
|
||||
dropdownQuestion,
|
||||
textBlock,
|
||||
},
|
||||
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -57,7 +185,52 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
computed: {
|
||||
stateOptions() {
|
||||
return stateOptions;
|
||||
},
|
||||
damageCauseQuestionText() {
|
||||
return this.getCmsContent("DamageTypesWidget", "QuestionText");
|
||||
},
|
||||
damageTypesOptions() {
|
||||
const options = {};
|
||||
|
||||
const answers = this.getCmsContent("DamageTypesWidget", "Answers");
|
||||
for (const answer of answers) {
|
||||
options[answer.Name] = answer.Text;
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getInsuranceCompanyNameFromStore() {
|
||||
return store.getters.order.policy.insuranceCompanyName;
|
||||
},
|
||||
getPolicyNumberFromStore() {
|
||||
return store.getters.order.policy.policyNumber;
|
||||
},
|
||||
getDateOfLossFromStore() {
|
||||
return store.getters.order.damage.dateOfLoss ?? "";
|
||||
},
|
||||
getDamageCauseFromStore() {
|
||||
return store.getters.order.damage.damageCause ?? "";
|
||||
},
|
||||
getStreetAddressFromStore() {
|
||||
return store.getters.order.policy.streetAddress ?? "";
|
||||
},
|
||||
getApartmentFromStore() {
|
||||
return store.getters.order.policy.apartment ?? "";
|
||||
},
|
||||
getCityFromStore() {
|
||||
return store.getters.order.policy.city ?? "";
|
||||
},
|
||||
getPolicyStateFromStore() {
|
||||
return store.getters.order.policy.state ?? "";
|
||||
},
|
||||
getPolicyZipFromStore() {
|
||||
return store.getters.order.policy.zipCode ?? "";
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.CLICKED_BACK,
|
||||
|
|
@ -65,7 +238,32 @@ export default {
|
|||
);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
// Stub, for navigating forward via nav-bar
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_INSURANCE_DETAILS,
|
||||
{
|
||||
policyNumber: this.policyNumber,
|
||||
streetAddress: this.streetAddress,
|
||||
apartment: this.apartment,
|
||||
city: this.city,
|
||||
state: this.policyState,
|
||||
zipCode: this.policyZip,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_DAMAGE_DETAILS,
|
||||
{
|
||||
dateOfLoss: this.dateOfLoss,
|
||||
damageCause: this.damageCause,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
this.$router.navigateWithSaving(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.pageName
|
||||
);
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
return true;
|
||||
|
|
@ -73,3 +271,27 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.locked-input {
|
||||
:deep(.input-wrapper) {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1rem;
|
||||
transform: translateY(-50%);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M8 1a3.5 3.5 0 0 0-3.5 3.5V7H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-.5V4.5A3.5 3.5 0 0 0 8 1zm-2 6V4.5a2 2 0 1 1 4 0V7H6z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
.form-control {
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ const navigationScenarios = {
|
|||
CLICKED_FORWARD_WITH_MOLDING_QUESTIONS: "CLICKED_FORWARD_WITH_MOLDING_QUESTIONS",
|
||||
CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS: "CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS",
|
||||
CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS: "CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS",
|
||||
CLICKED_BACK_NON_CLAIM_AND_COVERAGE: "CLICKED_BACK_NON_CLAIM_AND_COVERAGE",
|
||||
CLICKED_BACK_RECALIBRATION_INFO: "CLICKED_BACK_RECALIBRATION_INFO",
|
||||
CLICKED_BACK_WITH_PART_QUESTIONS: "CLICKED_BACK_WITH_PART_QUESTIONS",
|
||||
CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE: "CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE",
|
||||
CLICKED_BACK_WITH_MOLDING_QUESTIONS: "CLICKED_BACK_WITH_MOLDING_QUESTIONS",
|
||||
|
|
|
|||
|
|
@ -538,8 +538,16 @@ const routingTable = function () {
|
|||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationPageData: routeData.POLICY_INFO_SUBMITTED,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK_RECALIBRATION_INFO,
|
||||
destinationPageData: routeData.RECALIBRATION_INFO,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK_NON_CLAIM_AND_COVERAGE,
|
||||
destinationPageData: routeData.INSURANCE_DETAILS,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationPageData: routeData.SCHEDULE,
|
||||
|
|
|
|||
|
|
@ -174,6 +174,11 @@ const getDefaultState = () => {
|
|||
additionalAuthFlag: null,
|
||||
isNoComp: false,
|
||||
insuranceCompanyName: null,
|
||||
streetAddress: null,
|
||||
apartment: null,
|
||||
city: null,
|
||||
state: null,
|
||||
zipCode: null,
|
||||
},
|
||||
schedule: {
|
||||
date: null,
|
||||
|
|
@ -335,6 +340,21 @@ export const mutations = {
|
|||
state.order.payment.accountName = accountName;
|
||||
state.order.policy.insuranceCompanyName = accountName;
|
||||
},
|
||||
updateStreetAddress(state, streetAddress) {
|
||||
state.order.policy.streetAddress = streetAddress;
|
||||
},
|
||||
updateApartment(state, apartment) {
|
||||
state.order.policy.apartment = apartment;
|
||||
},
|
||||
updateCity(state, city) {
|
||||
state.order.policy.city = city;
|
||||
},
|
||||
updateState(state, stateValue) {
|
||||
state.order.policy.state = stateValue;
|
||||
},
|
||||
updateZipCode(state, zipCode) {
|
||||
state.order.policy.zipCode = zipCode;
|
||||
},
|
||||
updateIsClaimAndCoverage(state, isClaimAndCoverage) {
|
||||
state.order.payment.isClaimAndCoverage = isClaimAndCoverage;
|
||||
},
|
||||
|
|
@ -495,6 +515,22 @@ export const mutations = {
|
|||
state.order.customer.isSmsOptIn = customerDetails.isSmsOptIn;
|
||||
}
|
||||
},
|
||||
updateInsuranceDetails(state, insuranceDetails) {
|
||||
if (insuranceDetails) {
|
||||
state.order.policy.policyNumber = insuranceDetails.policyNumber;
|
||||
state.order.policy.streetAddress = insuranceDetails.streetAddress;
|
||||
state.order.policy.apartment = insuranceDetails.apartment;
|
||||
state.order.policy.city = insuranceDetails.city;
|
||||
state.order.policy.state = insuranceDetails.state;
|
||||
state.order.policy.zipCode = insuranceDetails.zipCode;
|
||||
}
|
||||
},
|
||||
updateDamageDetails(state, damageDetails) {
|
||||
if (damageDetails) {
|
||||
state.order.damage.dateOfLoss = damageDetails.dateOfLoss;
|
||||
state.order.damage.damageCause = damageDetails.damageCause;
|
||||
}
|
||||
},
|
||||
|
||||
// applicationUser MUTATIONS
|
||||
updateSaveSessionPromise(state, saveSessionPromise) {
|
||||
|
|
@ -879,6 +915,11 @@ export const mutations = {
|
|||
state.order.policy.policyNumber = sessionInformation.order.policy?.policyNumber;
|
||||
state.order.policy.insuranceCompanyName =
|
||||
sessionInformation.order.policy?.insuranceCompanyName;
|
||||
//state.order.policy.streetAddress = sessionInformation.order.policy?.streetAddress;
|
||||
//state.order.policy.apartment = sessionInformation.order.policy?.apartment;
|
||||
//state.order.policy.city = sessionInformation.order.policy?.city;
|
||||
//state.order.policy.state = sessionInformation.order.policy?.state;
|
||||
//state.order.policy.zipCode = sessionInformation.order.policy?.zipCode;
|
||||
state.order.policy.isNoComp =
|
||||
coverageTypeValue(sessionInformation?.order.insuranceCoverage.coverageType) ===
|
||||
coverageType.NOCOMP
|
||||
|
|
@ -3466,6 +3507,14 @@ export const actions = {
|
|||
context.commit(storeMutations.UPDATE_CUSTOMER_DETAILS, customerDetails);
|
||||
},
|
||||
|
||||
saveInsuranceDetails(context, insuranceDetails) {
|
||||
context.commit(storeMutations.UPDATE_INSURANCE_DETAILS, insuranceDetails);
|
||||
},
|
||||
|
||||
saveDamageDetails(context, damageDetails) {
|
||||
context.commit(storeMutations.UPDATE_DAMAGE_DETAILS, damageDetails);
|
||||
},
|
||||
|
||||
saveServiceZipCodeInfo(context, serviceZipCodeInfo) {
|
||||
if (
|
||||
context.state.order.serviceLocation &&
|
||||
|
|
|
|||
Loading…
Reference in a new issue