CASH-699 add input fields for insurance-details page
CASH-699 add input fields for insurance-details page
This commit is contained in:
CarlNation
parent
ed29c63925
commit
e4bceb5fe7
11 changed files with 729 additions and 10 deletions
129
package-lock.json
generated
129
package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@adyen/adyen-web": "^6.27.0",
|
"@adyen/adyen-web": "^6.27.0",
|
||||||
"@iframe-resizer/child": "^5.3.3",
|
"@iframe-resizer/child": "^5.3.3",
|
||||||
|
"@vuepic/vue-datepicker": "^12.1.0",
|
||||||
"axios": "^0.30.2",
|
"axios": "^0.30.2",
|
||||||
"bootstrap": "^5.3.3",
|
"bootstrap": "^5.3.3",
|
||||||
"core-js": "^3.38.1",
|
"core-js": "^3.38.1",
|
||||||
|
|
@ -1910,6 +1911,11 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@discoveryjs/json-ext": {
|
||||||
"version": "0.5.7",
|
"version": "0.5.7",
|
||||||
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
|
"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": "^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": {
|
"node_modules/@hapi/hoek": {
|
||||||
"version": "9.3.0",
|
"version": "9.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
|
||||||
|
|
@ -3572,6 +3635,11 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@types/ws": {
|
||||||
"version": "8.18.1",
|
"version": "8.18.1",
|
||||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
|
||||||
|
|
@ -4536,6 +4604,58 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@webassemblyjs/ast": {
|
||||||
"version": "1.14.1",
|
"version": "1.14.1",
|
||||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
|
||||||
|
|
@ -6693,6 +6813,15 @@
|
||||||
"node": ">=10"
|
"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": {
|
"node_modules/debounce": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@adyen/adyen-web": "^6.27.0",
|
"@adyen/adyen-web": "^6.27.0",
|
||||||
"@iframe-resizer/child": "^5.3.3",
|
"@iframe-resizer/child": "^5.3.3",
|
||||||
|
"@vuepic/vue-datepicker": "^12.1.0",
|
||||||
"axios": "^0.30.2",
|
"axios": "^0.30.2",
|
||||||
"bootstrap": "^5.3.3",
|
"bootstrap": "^5.3.3",
|
||||||
"core-js": "^3.38.1",
|
"core-js": "^3.38.1",
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,12 @@ const errorMessages = {
|
||||||
STYLE_REQUIRED: "Please select your vehicle style",
|
STYLE_REQUIRED: "Please select your vehicle style",
|
||||||
PROMO_REQUIRED: "Please enter a promo code",
|
PROMO_REQUIRED: "Please enter a promo code",
|
||||||
INSURANCE_COMPANY_REQUIRED: "Please select an insurance company",
|
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 };
|
export { errorMessages };
|
||||||
|
|
|
||||||
|
|
@ -109,6 +109,8 @@ const storeActions = {
|
||||||
SAVE_VAPS: "saveVaps",
|
SAVE_VAPS: "saveVaps",
|
||||||
SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS: "saveActiveAndOrInactivePromos",
|
SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS: "saveActiveAndOrInactivePromos",
|
||||||
SAVE_CUSTOMER_DETAILS: "saveCustomerDetails",
|
SAVE_CUSTOMER_DETAILS: "saveCustomerDetails",
|
||||||
|
SAVE_INSURANCE_DETAILS: "saveInsuranceDetails",
|
||||||
|
SAVE_DAMAGE_DETAILS: "saveDamageDetails",
|
||||||
SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
|
SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
|
||||||
SAVE_CCTOKEN: "saveCCToken",
|
SAVE_CCTOKEN: "saveCCToken",
|
||||||
SAVE_PAYPAL_TOKEN: "savePaypalToken",
|
SAVE_PAYPAL_TOKEN: "savePaypalToken",
|
||||||
|
|
|
||||||
|
|
@ -51,6 +51,10 @@ const storeMutations = {
|
||||||
UPDATE_CUSTOMER_DETAILS: "updateCustomerDetails",
|
UPDATE_CUSTOMER_DETAILS: "updateCustomerDetails",
|
||||||
UPDATE_CUSTOMER_WAITLIST_REQUESTED: "updateCustomerWaitListRequested",
|
UPDATE_CUSTOMER_WAITLIST_REQUESTED: "updateCustomerWaitListRequested",
|
||||||
|
|
||||||
|
// INSURANCE / DAMAGE MUTATIONS
|
||||||
|
UPDATE_INSURANCE_DETAILS: "updateInsuranceDetails",
|
||||||
|
UPDATE_DAMAGE_DETAILS: "updateDamageDetails",
|
||||||
|
|
||||||
// ORDER MUTATIONS
|
// ORDER MUTATIONS
|
||||||
UPDATE_REFERRAL_NUMBER: "updateReferralNumber",
|
UPDATE_REFERRAL_NUMBER: "updateReferralNumber",
|
||||||
UPDATE_REFERRAL_SEQUENCE_NUMBER: "updateReferralSequenceNumber",
|
UPDATE_REFERRAL_SEQUENCE_NUMBER: "updateReferralSequenceNumber",
|
||||||
|
|
|
||||||
274
src/digital-components/date-picker-popup/date-picker-popup.vue
Normal file
274
src/digital-components/date-picker-popup/date-picker-popup.vue
Normal file
|
|
@ -0,0 +1,274 @@
|
||||||
|
<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 navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||||
import { Form } from "vee-validate";
|
import { Form } from "vee-validate";
|
||||||
|
import store from "@/store";
|
||||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||||
|
|
||||||
|
|
@ -33,7 +33,10 @@ export default {
|
||||||
name: "coverage-statement",
|
name: "coverage-statement",
|
||||||
mixins: [],
|
mixins: [],
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
isClaimAndCoverage: this.isClaimAndCoverageFromStore(),
|
||||||
|
isRecalibrationOnOrder: this.isRecalibrationOnOrderFromStore(),
|
||||||
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Form,
|
Form,
|
||||||
|
|
@ -58,7 +61,29 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
isClaimAndCoverageFromStore() {
|
||||||
|
return store.getters.order?.payment?.isClaimAndCoverage;
|
||||||
|
},
|
||||||
|
isRecalibrationOnOrderFromStore() {
|
||||||
|
return store.getters.isRecalibrationOnOrder;
|
||||||
|
},
|
||||||
backButtonAction() {
|
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.$router.navigateWithoutSaving(
|
||||||
this.navigationScenarios.CLICKED_BACK,
|
this.navigationScenarios.CLICKED_BACK,
|
||||||
this.pageName
|
this.pageName
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,105 @@
|
||||||
<template>
|
<template>
|
||||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||||
|
<loadingModal ref="loadingModal" />
|
||||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
||||||
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
|
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" alignLeft />
|
||||||
<!--
|
<textboxQuestion
|
||||||
... Page code goes here.
|
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
|
<navbar
|
||||||
cmsWidgetName="FunnelFooterWidget"
|
cmsWidgetName="FunnelFooterWidget"
|
||||||
ref="navbar"
|
ref="navbar"
|
||||||
|
|
@ -24,22 +116,55 @@
|
||||||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
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 { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||||
import { settleAllPromises } from "@/helpers/layout-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 {
|
export default {
|
||||||
name: "insurance-details",
|
name: "insurance-details",
|
||||||
mixins: [],
|
mixins: [],
|
||||||
data() {
|
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: {
|
components: {
|
||||||
Form,
|
Form,
|
||||||
funnelHeader,
|
funnelHeader,
|
||||||
navbar,
|
navbar,
|
||||||
funnelSubHeader,
|
funnelSubHeader,
|
||||||
|
textboxQuestion,
|
||||||
|
datePickerPopup,
|
||||||
|
dropdownQuestion,
|
||||||
|
textBlock,
|
||||||
},
|
},
|
||||||
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
|
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
|
||||||
async beforeRouteEnter(to, from, next) {
|
async beforeRouteEnter(to, from, next) {
|
||||||
|
|
@ -57,7 +182,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: {
|
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() {
|
backButtonAction() {
|
||||||
this.$router.navigateWithoutSaving(
|
this.$router.navigateWithoutSaving(
|
||||||
this.navigationScenarios.CLICKED_BACK,
|
this.navigationScenarios.CLICKED_BACK,
|
||||||
|
|
@ -65,7 +235,32 @@ export default {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
async forwardButtonAction() {
|
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() {
|
arePagePrerequisitesValid() {
|
||||||
return true;
|
return true;
|
||||||
|
|
@ -73,3 +268,27 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</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_MOLDING_QUESTIONS: "CLICKED_FORWARD_WITH_MOLDING_QUESTIONS",
|
||||||
CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS: "CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS",
|
CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS: "CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS",
|
||||||
CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS: "CLICKED_FORWARD_WITH_NO_MORE_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_PART_QUESTIONS: "CLICKED_BACK_WITH_PART_QUESTIONS",
|
||||||
CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE: "CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE",
|
CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE: "CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE",
|
||||||
CLICKED_BACK_WITH_MOLDING_QUESTIONS: "CLICKED_BACK_WITH_MOLDING_QUESTIONS",
|
CLICKED_BACK_WITH_MOLDING_QUESTIONS: "CLICKED_BACK_WITH_MOLDING_QUESTIONS",
|
||||||
|
|
|
||||||
|
|
@ -538,8 +538,16 @@ const routingTable = function () {
|
||||||
maps: [
|
maps: [
|
||||||
{
|
{
|
||||||
scenario: navigationScenarios.CLICKED_BACK,
|
scenario: navigationScenarios.CLICKED_BACK,
|
||||||
|
destinationPageData: routeData.POLICY_INFO_SUBMITTED,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
scenario: navigationScenarios.CLICKED_BACK_RECALIBRATION_INFO,
|
||||||
destinationPageData: routeData.RECALIBRATION_INFO,
|
destinationPageData: routeData.RECALIBRATION_INFO,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
scenario: navigationScenarios.CLICKED_BACK_NON_CLAIM_AND_COVERAGE,
|
||||||
|
destinationPageData: routeData.INSURANCE_DETAILS,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||||
destinationPageData: routeData.SCHEDULE,
|
destinationPageData: routeData.SCHEDULE,
|
||||||
|
|
|
||||||
|
|
@ -174,6 +174,11 @@ const getDefaultState = () => {
|
||||||
additionalAuthFlag: null,
|
additionalAuthFlag: null,
|
||||||
isNoComp: false,
|
isNoComp: false,
|
||||||
insuranceCompanyName: null,
|
insuranceCompanyName: null,
|
||||||
|
streetAddress: null,
|
||||||
|
apartment: null,
|
||||||
|
city: null,
|
||||||
|
state: null,
|
||||||
|
zipCode: null,
|
||||||
},
|
},
|
||||||
schedule: {
|
schedule: {
|
||||||
date: null,
|
date: null,
|
||||||
|
|
@ -335,6 +340,21 @@ export const mutations = {
|
||||||
state.order.payment.accountName = accountName;
|
state.order.payment.accountName = accountName;
|
||||||
state.order.policy.insuranceCompanyName = 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) {
|
updateIsClaimAndCoverage(state, isClaimAndCoverage) {
|
||||||
state.order.payment.isClaimAndCoverage = isClaimAndCoverage;
|
state.order.payment.isClaimAndCoverage = isClaimAndCoverage;
|
||||||
},
|
},
|
||||||
|
|
@ -495,6 +515,22 @@ export const mutations = {
|
||||||
state.order.customer.isSmsOptIn = customerDetails.isSmsOptIn;
|
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
|
// applicationUser MUTATIONS
|
||||||
updateSaveSessionPromise(state, saveSessionPromise) {
|
updateSaveSessionPromise(state, saveSessionPromise) {
|
||||||
|
|
@ -879,6 +915,11 @@ export const mutations = {
|
||||||
state.order.policy.policyNumber = sessionInformation.order.policy?.policyNumber;
|
state.order.policy.policyNumber = sessionInformation.order.policy?.policyNumber;
|
||||||
state.order.policy.insuranceCompanyName =
|
state.order.policy.insuranceCompanyName =
|
||||||
sessionInformation.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 =
|
state.order.policy.isNoComp =
|
||||||
coverageTypeValue(sessionInformation?.order.insuranceCoverage.coverageType) ===
|
coverageTypeValue(sessionInformation?.order.insuranceCoverage.coverageType) ===
|
||||||
coverageType.NOCOMP
|
coverageType.NOCOMP
|
||||||
|
|
@ -3466,6 +3507,14 @@ export const actions = {
|
||||||
context.commit(storeMutations.UPDATE_CUSTOMER_DETAILS, customerDetails);
|
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) {
|
saveServiceZipCodeInfo(context, serviceZipCodeInfo) {
|
||||||
if (
|
if (
|
||||||
context.state.order.serviceLocation &&
|
context.state.order.serviceLocation &&
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue