Merge pull request #3201 from Safelite/rlsmerge/2026.06.04-to-dev
Rlsmerge/2026.06.04 to dev
This commit is contained in:
CarlNation
GitHub
commit
c0b34f4b15
22 changed files with 923 additions and 27 deletions
|
|
@ -12,7 +12,6 @@ const environmentVariables = {
|
|||
['__VUE_APP_MY_ACCOUNT__']: "https://myaccountdev.safelite.com/",
|
||||
['__VUE_APP_SAFELITE_HOP__']: "https://sv2-safelitehop-dev.safelite.com/fmgCheckoutShared.aspx",
|
||||
['__VUE_APP_SESSION_TIMEOUT_MINUTES__']: 30,
|
||||
['__VUE_APP_SOLARWINDS_MONITORING_SCRIPT__']: "",
|
||||
['__VUE_APP_ADYEN_ENVIRONMENT__']: "test",
|
||||
['__VUE_APP_ADYEN_CLIENT_KEY__']: "test_WYGT4F5ZT5BRRL5MPWHK6QLYOIXZXROD",
|
||||
['__VUE_APP_SESSION_EXPIRATION_INTERVAL_CHECK_MILLISECONDS__']: 60000,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,5 @@
|
|||
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
<%= process.env.__VUE_APP_SOLARWINDS_MONITORING_SCRIPT__ %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,10 @@ const errorMessages = {
|
|||
DAMAGE_TYPES_REQUIRED: "How damage occurred is required",
|
||||
ZIP_CODE_REQUIRED: "Please enter your ZIP code",
|
||||
ZIP_CODE_FORMAT: "Zip must be 5 digits",
|
||||
DATE_OF_BIRTH_REQUIRED: "Please enter your date of birth",
|
||||
LOSS_TIME_REQUIRED: "Please enter your loss time",
|
||||
LOSS_LOCATION_REQUIRED: "Please select your loss location",
|
||||
SUBROGATION_REQUIRED: "Please make a selection",
|
||||
};
|
||||
|
||||
export { errorMessages };
|
||||
|
|
|
|||
|
|
@ -85,3 +85,8 @@ export const parentAccountNumbers = {
|
|||
export const NON_MANAGED_SHOW_CLAIM_NUMBER_PARENTS = [
|
||||
{ name: "KentuckyFarmBureau", value: "223499" },
|
||||
];
|
||||
|
||||
export const PARENT_ACCOUNT_NUMBERS = {
|
||||
STATE_FARM: "711310",
|
||||
USAA: "900040",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -147,6 +147,9 @@ const storeMutations = {
|
|||
|
||||
//Affiliate Cookies
|
||||
UPDATE_AFFILIATE_COOKIES: "updateAffiliateCookies",
|
||||
|
||||
// Submitted state (invalidates getters that read sessionStorage submittedState)
|
||||
INCREMENT_SUBMITTED_STATE_REVISION: "incrementSubmittedStateRevision",
|
||||
};
|
||||
|
||||
export { storeMutations };
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@
|
|||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:auto-apply="autoApply"
|
||||
:text-input="textInput"
|
||||
:text-input="resolvedTextInput"
|
||||
:hide-input-icon="textInputOnly"
|
||||
:prevent-min-max-navigation="preventMinMaxNavigation"
|
||||
:teleport="true"
|
||||
:aria-labels="{ input: questionText }"
|
||||
|
|
@ -107,6 +108,12 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// Force manual entry: text input enabled, calendar popup never opens
|
||||
// and the calendar icon is hidden.
|
||||
textInputOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
preventMinMaxNavigation: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
|
|
@ -155,7 +162,7 @@ export default {
|
|||
questionText() {
|
||||
if (!this.cmsWidgetName) return "";
|
||||
const text = this.getCmsContent
|
||||
? this.getCmsContent(this.cmsWidgetName, "BodyText")
|
||||
? this.getCmsContent(this.cmsWidgetName, "QuestionText")
|
||||
: "";
|
||||
return this.addOptionalText ? `${text} (optional)` : text;
|
||||
},
|
||||
|
|
@ -193,6 +200,15 @@ export default {
|
|||
clearable: this.clearable,
|
||||
};
|
||||
},
|
||||
// Forwarded to VueDatePicker's `text-input` prop. When `textInputOnly`
|
||||
// is set, force text input on AND tell the picker never to open its
|
||||
// menu (so focus/click on the input is a no-op visually).
|
||||
resolvedTextInput() {
|
||||
if (this.textInputOnly) {
|
||||
return { enabled: true, openMenu: false };
|
||||
}
|
||||
return this.textInput;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onDateChange(newValue) {
|
||||
|
|
|
|||
|
|
@ -907,7 +907,7 @@ export default {
|
|||
return cartItem;
|
||||
},
|
||||
isCashItacNoComp() {
|
||||
return !this.isInsurance || this.isITAC || this.isNoComp;
|
||||
return !this.isInsurance || this.isItac || this.isNoComp;
|
||||
},
|
||||
mobileFeeCartItemName() {
|
||||
return this.getCmsContent("MobileServiceTextWidget", "Text");
|
||||
|
|
@ -971,7 +971,7 @@ export default {
|
|||
const msrFeeLineItem = this.getMsrFeeLineItem;
|
||||
const shouldCreateMsrFeeCartItem =
|
||||
this.isMSRFeeApplicable &&
|
||||
(!this.isInsurance || !this.IsMSRFeeCoveredByInsurance) &&
|
||||
(this.isCashItacNoComp || !this.IsMSRFeeCoveredByInsurance) &&
|
||||
msrFeeLineItem &&
|
||||
this.msrFeeAmount > 0;
|
||||
|
||||
|
|
@ -1007,9 +1007,10 @@ export default {
|
|||
return this.getCmsContent("RecycleTextBlock", "Text");
|
||||
},
|
||||
msrToolTipBodyText() {
|
||||
let cmsContentText = this.isInsurance
|
||||
? this.getCmsContent("MSRModal", "BodyText")
|
||||
: this.getCmsContent("MSRModal", "BodyText2");
|
||||
let cmsContentText =
|
||||
this.isInsurance && !this.isItac && !this.isNoComp
|
||||
? this.getCmsContent("MSRModal", "BodyText")
|
||||
: this.getCmsContent("MSRModal", "BodyText2");
|
||||
if (this.isInsurance && cmsContentText) {
|
||||
cmsContentText = cmsContentText.replaceAll(
|
||||
"{custom:mobileFee}",
|
||||
|
|
|
|||
|
|
@ -5,8 +5,17 @@
|
|||
</div>
|
||||
<div class="container d-flex">
|
||||
<div class="site-logo">
|
||||
<a href="https://safelite.com">
|
||||
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
|
||||
<a
|
||||
:href="overrideImageSrc ? null : 'https://safelite.com'"
|
||||
:class="{ 'pe-none': !!overrideImageSrc }"
|
||||
:tabindex="overrideImageSrc ? -1 : null"
|
||||
:aria-disabled="!!overrideImageSrc"
|
||||
@click="overrideImageSrc && $event.preventDefault()">
|
||||
<img
|
||||
class="logo-image img-fluid"
|
||||
:class="{ 'logo-image--override': !!overrideImageSrc }"
|
||||
:src="imageSrc"
|
||||
alt="Safelite logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="button-container webchat">
|
||||
|
|
@ -69,6 +78,10 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
overrideImageSrc: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { webchatGlobalNonpersistedState, launchWebchat } = webchatHelper();
|
||||
|
|
@ -76,7 +89,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
imageSrc() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "LogoImage");
|
||||
return this.overrideImageSrc || this.getCmsContent(this.cmsWidgetName, "LogoImage");
|
||||
},
|
||||
shouldShowWebchatButton() {
|
||||
return this.webchatGlobalNonpersistedState.showWebchatButton;
|
||||
|
|
@ -199,6 +212,13 @@ export default {
|
|||
@include media-breakpoint-up(md) {
|
||||
width: 165px;
|
||||
}
|
||||
|
||||
&--override {
|
||||
width: 200px;
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.webchat {
|
||||
|
|
|
|||
|
|
@ -55,6 +55,15 @@ function setupMocks() {
|
|||
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
|
||||
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
|
||||
|
||||
const mockMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn((widgetName, fieldName) => {
|
||||
return mockCmsContent?.[widgetName]?.[fieldName] ?? "";
|
||||
}),
|
||||
setCmsContent: jest.fn(),
|
||||
},
|
||||
};
|
||||
|
||||
const mountOptions = getMountOptions({
|
||||
route: { name: "duplicate-check", query: {}, params: {} },
|
||||
router: {
|
||||
|
|
@ -62,6 +71,7 @@ function setupMocks() {
|
|||
navigateWithSaving: jest.fn(),
|
||||
navigateWithoutSaving: jest.fn(),
|
||||
},
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
||||
const wrapper = shallowMount(duplicateCheck, mountOptions);
|
||||
|
|
|
|||
|
|
@ -5,9 +5,40 @@
|
|||
<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.
|
||||
-->
|
||||
|
||||
<textBlock
|
||||
cmsWidgetName="DupCheckPageTitleWidget"
|
||||
typeStyle="h1"
|
||||
:customText="pageTitleText"
|
||||
class="mb-5 text-left text-md-left cc-page-title" />
|
||||
|
||||
<textBlock
|
||||
cmsWidgetName="DupCheckPageInstructionsWidget"
|
||||
typeStyle="body"
|
||||
:customText="pageInstructionsText"
|
||||
class="mb-5 text-left text-md-left cc-page-instructions" />
|
||||
|
||||
<buttonQuestion
|
||||
:questionText="existingClaimsQuestionText"
|
||||
:answers="existingClaimsAnswers"
|
||||
class="mb-4"
|
||||
groupName="existingClaimsQuestion"
|
||||
buttonTypeString="listButton"
|
||||
isRequired
|
||||
v-model="existingClaimsSelectedValue" />
|
||||
|
||||
<div class="or-divider mb-4" role="separator" aria-label="or">
|
||||
<span class="or-divider-text">or</span>
|
||||
</div>
|
||||
|
||||
<buttonQuestion
|
||||
:answers="startNewClaimAnswers"
|
||||
class="mb-4"
|
||||
groupName="existingClaimsQuestion"
|
||||
buttonTypeString="listButton"
|
||||
isRequired
|
||||
v-model="startNewClaimSelectedValue" />
|
||||
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="navbar"
|
||||
|
|
@ -24,6 +55,8 @@
|
|||
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 textBlock from "@/digital-components/text-block/text-block";
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import { Form } from "vee-validate";
|
||||
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -40,6 +73,8 @@ export default {
|
|||
funnelHeader,
|
||||
navbar,
|
||||
funnelSubHeader,
|
||||
textBlock,
|
||||
buttonQuestion,
|
||||
},
|
||||
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -56,6 +91,31 @@ export default {
|
|||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
pageTitleText() {
|
||||
return this.getCmsContent("DupCheckPageTitleWidget", "Text");
|
||||
},
|
||||
pageInstructionsText() {
|
||||
return this.getCmsContent("DupCheckPageInstructionsWidget", "Text");
|
||||
},
|
||||
existingClaimsQuestionText() {
|
||||
return this.getCmsContent("ExistingClaimsListWidget", "QuestionText");
|
||||
},
|
||||
existingClaimsAnswers() {
|
||||
return this.getCmsContent("ExistingClaimsListWidget", "Answers");
|
||||
},
|
||||
startNewClaimQuestionText() {
|
||||
return this.getCmsContent("StartNewClaimWidget", "QuestionText");
|
||||
},
|
||||
startNewClaimAnswers() {
|
||||
const answers = this.getCmsContent("StartNewClaimWidget", "Answers");
|
||||
if (!Array.isArray(answers)) return [];
|
||||
return answers.map((answer) => ({
|
||||
buttonLabel: answer.Text,
|
||||
value: answer.Name,
|
||||
}));
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
backButtonAction() {
|
||||
|
|
@ -76,3 +136,30 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.cc-page-title {
|
||||
font-size: 20px !important;
|
||||
line-height: 1.325;
|
||||
font-weight: 300;
|
||||
color: $black;
|
||||
}
|
||||
.or-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: $gray-600;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
border-bottom: 1px solid $gray-500;
|
||||
}
|
||||
|
||||
.or-divider-text {
|
||||
padding: 0 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@ export default {
|
|||
|
||||
await this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
|
||||
this.selectedAccount.parentAccountNumber.toString(),
|
||||
Number(this.selectedAccount.parentAccountNumber).toString(),
|
||||
false
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div class="more-policy-questions">
|
||||
<buttonQuestion
|
||||
:questionText="questionText"
|
||||
isMultiSelect
|
||||
:answers="answersToDisplay"
|
||||
:groupName="groupName"
|
||||
buttonTypeString="checkbox"
|
||||
isRequired
|
||||
v-model="selectedValues" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import store from "@/store";
|
||||
import { PARENT_ACCOUNT_NUMBERS } from "@/constants/insurance";
|
||||
|
||||
const STATE_FARM_ONLY_ANSWER_NAMES = new Set(["ThirdPartyVehicle", "Injuries"]);
|
||||
const HIDDEN_FOR_STATE_FARM_ANSWER_NAMES = new Set(["OtherResponsibleParty"]);
|
||||
// Maps an answer's Name to the CMS widget that supplies a State Farm-specific
|
||||
// label override. The widget's "Text" property replaces the answer's Text.
|
||||
const STATE_FARM_TEXT_OVERRIDES = {
|
||||
AdditionalDamage: "AdditionalDamageStateFarmWidget",
|
||||
Rental: "RentalStateFarmWidget",
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "morePolicyQuestions",
|
||||
props: {
|
||||
modelValue: Array,
|
||||
groupName: String,
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
computed: {
|
||||
questionText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
||||
},
|
||||
answersFromCms() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "Answers");
|
||||
},
|
||||
isStateFarm() {
|
||||
return (
|
||||
store.getters.order?.payment?.parentAccountNumber?.toString() ===
|
||||
PARENT_ACCOUNT_NUMBERS.STATE_FARM
|
||||
);
|
||||
},
|
||||
stateFarmTextOverrides() {
|
||||
return Object.fromEntries(
|
||||
Object.entries(STATE_FARM_TEXT_OVERRIDES).map(([name, widget]) => [
|
||||
name,
|
||||
this.getCmsContent(widget, "Text"),
|
||||
])
|
||||
);
|
||||
},
|
||||
answersToDisplay() {
|
||||
if (!Array.isArray(this.answersFromCms)) return [];
|
||||
return this.answersFromCms
|
||||
.filter((ans) => {
|
||||
if (STATE_FARM_ONLY_ANSWER_NAMES.has(ans?.Name)) {
|
||||
return this.isStateFarm;
|
||||
}
|
||||
if (HIDDEN_FOR_STATE_FARM_ANSWER_NAMES.has(ans?.Name)) {
|
||||
return !this.isStateFarm;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.map((ans) => {
|
||||
if (!this.isStateFarm) return ans;
|
||||
const overrideText = this.stateFarmTextOverrides[ans?.Name];
|
||||
if (overrideText) {
|
||||
return { ...ans, Text: overrideText };
|
||||
}
|
||||
return ans;
|
||||
});
|
||||
},
|
||||
selectedValues: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.more-policy-questions {
|
||||
.ui-checkbox {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -55,6 +55,15 @@ function setupMocks() {
|
|||
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
|
||||
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
|
||||
|
||||
const mockMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn((widgetName, fieldName) => {
|
||||
return mockCmsContent?.[widgetName]?.[fieldName] ?? "";
|
||||
}),
|
||||
setCmsContent: jest.fn(),
|
||||
},
|
||||
};
|
||||
|
||||
const mountOptions = getMountOptions({
|
||||
route: { name: "policy-info", query: {}, params: {} },
|
||||
router: {
|
||||
|
|
@ -62,6 +71,7 @@ function setupMocks() {
|
|||
navigateWithSaving: jest.fn(),
|
||||
navigateWithoutSaving: jest.fn(),
|
||||
},
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
||||
const wrapper = shallowMount(policyInfo, mountOptions);
|
||||
|
|
|
|||
|
|
@ -1,19 +1,206 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
<funnelHeader
|
||||
cmsWidgetName="FunnelHeaderWidget"
|
||||
ref="funnelHeader"
|
||||
:overrideImageSrc="clientLogoImageSrc" />
|
||||
<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.
|
||||
-->
|
||||
|
||||
<textBlock
|
||||
cmsWidgetName="PageTitleWidget"
|
||||
typeStyle="h1"
|
||||
:customText="pageTitleText"
|
||||
class="mb-5 text-left text-md-left cc-page-title" />
|
||||
|
||||
<textBlock
|
||||
cmsWidgetName="PageInstructionsWidget"
|
||||
typeStyle="body"
|
||||
:customText="pageInstructionsText"
|
||||
class="mb-5 text-left text-md-left" />
|
||||
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-1"
|
||||
:cmsWidgetName="policyNumberWidgetName"
|
||||
v-model="policyNumber"
|
||||
inputId="policyNumber"
|
||||
validationRules="policy-number-required" />
|
||||
<span
|
||||
v-if="displayPolicyHelperText"
|
||||
class="d-block mb-5 helper-text"
|
||||
v-html="policyHelperText"></span>
|
||||
|
||||
<datePickerPopup
|
||||
v-if="displayDateOfBirth"
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="DateOfBirthWidget"
|
||||
v-model="dateOfBirth"
|
||||
customInputId="dateOfBirth"
|
||||
placeholderText="MM/DD/YYYY"
|
||||
validationRules="date-of-birth-required"
|
||||
format="MM/dd/yyyy"
|
||||
modelType="MM/dd/yyyy"
|
||||
:enableTimePicker="false"
|
||||
:textInputOnly="true"
|
||||
:maxDate="today"
|
||||
:preventMinMaxNavigation="true" />
|
||||
|
||||
<textboxQuestion
|
||||
v-if="displayLastName"
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="LastNameWidget"
|
||||
v-model="lastName"
|
||||
inputId="lastName"
|
||||
validationRules="last-name-required" />
|
||||
|
||||
<textboxQuestion
|
||||
v-if="displayStreetAddress"
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="StreetAddressWidget"
|
||||
v-model="streetAddress"
|
||||
inputId="streetAddress"
|
||||
validationRules="street-address-required" />
|
||||
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="ZipWidget"
|
||||
v-model="policyZip"
|
||||
inputId="policyZip"
|
||||
maxLength="5"
|
||||
validationRules="zip-code-required|zip-code-format" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8">
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="PhoneWidget"
|
||||
v-model="phoneNumber"
|
||||
inputId="phoneNumber"
|
||||
mask="###-###-####"
|
||||
validationRules="phone-number-required" />
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="PhoneExtensionWidget"
|
||||
v-model="phoneExtension"
|
||||
inputId="phoneExtension" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
:textInput="true"
|
||||
:maxDate="today"
|
||||
:preventMinMaxNavigation="true" />
|
||||
|
||||
<dropdownQuestion
|
||||
v-if="displayLossTime"
|
||||
isRequired
|
||||
:questionText="timeOfLossQuestionText"
|
||||
class="mb-4"
|
||||
v-model="lossTime"
|
||||
cmsWidgetName="TimeOfLossWidget"
|
||||
customDropdownId="lossTime"
|
||||
:options="lossTimeOptions"
|
||||
:valueAsKey="true"
|
||||
validationRules="loss-time-required"
|
||||
:labelBold="true" />
|
||||
|
||||
<dropdownQuestion
|
||||
isRequired
|
||||
:questionText="damageTypesQuestionText"
|
||||
class="mb-4"
|
||||
v-model="damageCause"
|
||||
cmsWidgetName="DamageTypesWidget"
|
||||
customDropdownId="damageTypes"
|
||||
:options="damageTypesOptions"
|
||||
:valueAsKey="true"
|
||||
validationRules="damage-types-required"
|
||||
:labelBold="true" />
|
||||
|
||||
<buttonQuestion
|
||||
v-if="displaySubrogation"
|
||||
:questionText="subrogationQuestionText"
|
||||
:answers="subrogationAnswers"
|
||||
class="mb-4"
|
||||
groupName="SubrogationQuestion"
|
||||
buttonTypeString="listButton"
|
||||
isRequired
|
||||
validationRules="subrogation-required"
|
||||
v-model="subrogationSelectedValue" />
|
||||
|
||||
<dropdownQuestion
|
||||
v-if="displayLossState"
|
||||
class="mb-4"
|
||||
customDropdownId="policyState"
|
||||
cmsWidgetName="StateQuestionWidget"
|
||||
v-model="policyState"
|
||||
ref="policyState"
|
||||
:options="stateOptions"
|
||||
validationRules="state-required"
|
||||
autocomplete="address-level1"
|
||||
placeHolderText="Select State"
|
||||
:labelBold="true" />
|
||||
|
||||
<dropdownQuestion
|
||||
v-if="displayLossLocation"
|
||||
:questionText="lossLocationQuestionText"
|
||||
class="mb-4"
|
||||
v-model="lossLocation"
|
||||
cmsWidgetName="LossLocationQuestionWidget"
|
||||
customDropdownId="lossLocation"
|
||||
:options="lossLocationOptions"
|
||||
:valueAsKey="true"
|
||||
validationRules="loss-location-required"
|
||||
:labelBold="true" />
|
||||
|
||||
<textboxQuestion
|
||||
v-if="displayLossCity"
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="CityWidget"
|
||||
v-model="city"
|
||||
inputId="city"
|
||||
validationRules="city-required" />
|
||||
|
||||
<hr class="mt-4 mb-0" />
|
||||
|
||||
<morePolicyQuestions
|
||||
ref="morePolicyQuestions"
|
||||
cmsWidgetName="MorePolicyQuestionsWidget"
|
||||
v-model="morePolicyQuestions"
|
||||
groupName="MorePolicyQuestionsQuestion" />
|
||||
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="navbar"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
|
||||
<span
|
||||
v-if="displayDisclaimerText"
|
||||
class="d-block mb-5 disclaimer-text"
|
||||
v-html="disclaimerText"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,25 +211,203 @@
|
|||
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 textBlock from "@/digital-components/text-block/text-block";
|
||||
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 morePolicyQuestions from "@/layouts/policy-info/more-policy-questions/more-policy-questions";
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import { stateOptions } from "@/constants/state-options";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { regex } from "@/helpers/validation-rules";
|
||||
import { PARENT_ACCOUNT_NUMBERS } from "@/constants/insurance";
|
||||
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import store from "@/store";
|
||||
import { debugLog } from "@/helpers/debug-log-helper";
|
||||
|
||||
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
|
||||
defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
|
||||
defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
|
||||
defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
|
||||
defineRule("date-of-loss-required", required(errorMessages.DATE_OF_LOSS_REQUIRED));
|
||||
defineRule("damage-types-required", required(errorMessages.DAMAGE_TYPES_REQUIRED));
|
||||
defineRule("state-required", required(errorMessages.STATE_REQUIRED));
|
||||
defineRule("city-required", required(errorMessages.CITY_REQUIRED));
|
||||
defineRule("date-of-birth-required", required(errorMessages.DATE_OF_BIRTH_REQUIRED));
|
||||
defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
|
||||
defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
|
||||
defineRule("loss-time-required", required(errorMessages.LOSS_TIME_REQUIRED));
|
||||
defineRule("loss-location-required", required(errorMessages.LOSS_LOCATION_REQUIRED));
|
||||
defineRule("subrogation-required", required(errorMessages.SUBROGATION_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: "policy-info",
|
||||
mixins: [],
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
clientConfig: {},
|
||||
policyNumber: this.getPolicyNumberFromStore(),
|
||||
policyZip: this.getPolicyZipFromStore(),
|
||||
phoneNumber: this.getPhoneNumberFromStore(),
|
||||
phoneExtension: this.getPhoneExtensionFromStore(),
|
||||
dateOfLoss: this.getDateOfLossFromStore(),
|
||||
lastName: this.getLastNameFromStore(),
|
||||
streetAddress: this.getStreetAddressFromStore(),
|
||||
damageCause: this.getDamageCauseFromStore(),
|
||||
policyState: this.getPolicyStateFromStore(),
|
||||
city: this.getCityFromStore(),
|
||||
dateOfBirth: this.getDateOfBirthFromStore(),
|
||||
lossTime: this.getLossTimeFromStore(),
|
||||
morePolicyQuestions: this.getMorePolicyQuestionsFromStore(),
|
||||
subrogationSelectedValue: this.getSubrogationSelectedValueFromStore(),
|
||||
lossLocation: this.getLossLocationFromStore(),
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
funnelHeader,
|
||||
navbar,
|
||||
funnelSubHeader,
|
||||
textBlock,
|
||||
textboxQuestion,
|
||||
datePickerPopup,
|
||||
dropdownQuestion,
|
||||
morePolicyQuestions,
|
||||
buttonQuestion,
|
||||
},
|
||||
computed: {
|
||||
stateOptions() {
|
||||
return stateOptions;
|
||||
},
|
||||
today() {
|
||||
return new Date();
|
||||
},
|
||||
clientLogoImageSrc() {
|
||||
return this.clientConfig?.ClientLogoWidget?.Image || "";
|
||||
},
|
||||
pageTitleText() {
|
||||
return (
|
||||
this.clientConfig?.PageTitleOverrideWidget?.Text ||
|
||||
this.getCmsContent("PageTitleWidget", "Text")
|
||||
);
|
||||
},
|
||||
pageInstructionsText() {
|
||||
return (
|
||||
this.clientConfig?.PageInstructionsOverrideWidget?.Text ||
|
||||
this.getCmsContent("PageInstructionsWidget", "Text")
|
||||
);
|
||||
},
|
||||
isUSAA() {
|
||||
return (
|
||||
store.getters.order?.payment?.parentAccountNumber?.toString() ===
|
||||
PARENT_ACCOUNT_NUMBERS.USAA
|
||||
);
|
||||
},
|
||||
policyNumberWidgetName() {
|
||||
console.log("isUSAA", this.isUSAA);
|
||||
return this.isUSAA ? "PolicyNumberUSAAWidget" : "PolicyNumberWidget";
|
||||
},
|
||||
policyHelperText() {
|
||||
return this.clientConfig?.PolicyHelperTextOverrideWidget?.Text;
|
||||
},
|
||||
disclaimerText() {
|
||||
return this.clientConfig?.DisclaimerWidget?.Text;
|
||||
},
|
||||
displayDisclaimerText() {
|
||||
return this.disclaimerText !== null && this.disclaimerText !== "";
|
||||
},
|
||||
damageTypesQuestionText() {
|
||||
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;
|
||||
},
|
||||
lossTimeOptions() {
|
||||
const options = {};
|
||||
|
||||
const answers = this.getCmsContent("TimeOfLossWidget", "Answers");
|
||||
for (const answer of answers) {
|
||||
options[answer.Name] = answer.Text;
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
timeOfLossQuestionText() {
|
||||
return this.getCmsContent("TimeOfLossWidget", "QuestionText");
|
||||
},
|
||||
lossLocationOptions() {
|
||||
const options = {};
|
||||
|
||||
const answers = this.getCmsContent("LossLocationQuestionWidget", "Answers");
|
||||
for (const answer of answers) {
|
||||
options[answer.Name] = answer.Text;
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
parsedClientConfig() {
|
||||
const raw = this.clientConfig?.ConfigWidget?.Text;
|
||||
if (!raw) return {};
|
||||
try {
|
||||
return JSON.parse(raw);
|
||||
} catch (err) {
|
||||
console.warn("Failed to parse clientConfig.ConfigWidget.Text", err);
|
||||
return {};
|
||||
}
|
||||
},
|
||||
displayLossState() {
|
||||
return this.parsedClientConfig.displayLossState ?? false;
|
||||
},
|
||||
displayLossCity() {
|
||||
return this.parsedClientConfig.displayLossCity ?? false;
|
||||
},
|
||||
displayLossLocation() {
|
||||
return this.parsedClientConfig.displayLossLocation ?? false;
|
||||
},
|
||||
displaySubrogation() {
|
||||
return this.parsedClientConfig.displaySubrogation ?? false;
|
||||
},
|
||||
displayStreetAddress() {
|
||||
return this.parsedClientConfig.displayStreetAddress ?? false;
|
||||
},
|
||||
displayDateOfBirth() {
|
||||
return this.parsedClientConfig.displayDateOfBirth ?? false;
|
||||
},
|
||||
displayLastName() {
|
||||
return this.parsedClientConfig.displayLastName ?? false;
|
||||
},
|
||||
displayLossTime() {
|
||||
return this.parsedClientConfig.displayLossTime ?? false;
|
||||
},
|
||||
displayPolicyHelperText() {
|
||||
return this.policyHelperText !== null && this.policyHelperText !== "";
|
||||
},
|
||||
subrogationQuestionText() {
|
||||
return this.getCmsContent("SubrogationQuestionWidget", "QuestionText");
|
||||
},
|
||||
subrogationAnswers() {
|
||||
return this.getCmsContent("SubrogationQuestionWidget", "Answers");
|
||||
},
|
||||
lossLocationQuestionText() {
|
||||
return this.getCmsContent("LossLocationQuestionWidget", "QuestionText");
|
||||
},
|
||||
},
|
||||
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
|
||||
const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
|
||||
|
||||
const pageName = to.name;
|
||||
const cmsContentPromise = fetchCmsContentForPage(pageName);
|
||||
const promiseResultMap = [
|
||||
|
|
@ -50,14 +415,65 @@ export default {
|
|||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "clientConfig",
|
||||
promise: clientConfigPromise,
|
||||
},
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.clientConfig = resultMap.clientConfig;
|
||||
debugLog(`clientConfig::${clientConfigPageName}`, JSON.stringify(vm.clientConfig));
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPolicyNumberFromStore() {
|
||||
return store.getters.order.policy.policyNumber;
|
||||
},
|
||||
getPolicyZipFromStore() {
|
||||
return store.getters.order.policy.zipCode;
|
||||
},
|
||||
getPhoneNumberFromStore() {
|
||||
return store.getters.order.policy.phoneNumber;
|
||||
},
|
||||
getPhoneExtensionFromStore() {
|
||||
return store.getters.order.policy.phoneExtension;
|
||||
},
|
||||
getDateOfLossFromStore() {
|
||||
return store.getters.order.damage.dateOfLoss;
|
||||
},
|
||||
getDamageCauseFromStore() {
|
||||
return store.getters.order.damage.damageCause;
|
||||
},
|
||||
getPolicyStateFromStore() {
|
||||
return store.getters.order.policy.state;
|
||||
},
|
||||
getCityFromStore() {
|
||||
return store.getters.order.policy.city;
|
||||
},
|
||||
getDateOfBirthFromStore() {
|
||||
return store.getters.order.policy.dateOfBirth;
|
||||
},
|
||||
getLastNameFromStore() {
|
||||
return store.getters.order.policy.lastName;
|
||||
},
|
||||
getStreetAddressFromStore() {
|
||||
return store.getters.order.policy.streetAddress;
|
||||
},
|
||||
getLossTimeFromStore() {
|
||||
return store.getters.order.policy.lossTime;
|
||||
},
|
||||
getSubrogationSelectedValueFromStore() {
|
||||
return store.getters.order.policy.subrogation;
|
||||
},
|
||||
getMorePolicyQuestionsFromStore() {
|
||||
return store.getters.order.policy.morePolicyQuestions ?? [];
|
||||
},
|
||||
getLossLocationFromStore() {
|
||||
return store.getters.order.policy.lossLocation;
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.CLICKED_BACK,
|
||||
|
|
@ -65,6 +481,35 @@ export default {
|
|||
);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_INSURANCE_DETAILS,
|
||||
{
|
||||
policyNumber: this.policyNumber,
|
||||
zipCode: this.policyZip,
|
||||
phoneNumber: this.phoneNumber,
|
||||
phoneExtension: this.phoneExtension,
|
||||
state: this.policyState,
|
||||
city: this.city,
|
||||
morePolicyQuestions: this.morePolicyQuestions,
|
||||
lossLocation: this.lossLocation,
|
||||
lossTime: this.lossTime,
|
||||
lastName: this.lastName,
|
||||
dateOfBirth: this.dateOfBirth,
|
||||
subrogation: this.subrogationSelectedValue,
|
||||
streetAddress: this.streetAddress,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_DAMAGE_DETAILS,
|
||||
{
|
||||
dateOfLoss: this.dateOfLoss,
|
||||
damageCause: this.damageCause,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
this.$router.navigateWithSaving(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.pageName
|
||||
|
|
@ -76,3 +521,34 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cc-page-title {
|
||||
font-size: 20px !important;
|
||||
line-height: 1.325;
|
||||
font-weight: 300;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.cc-page-instructions {
|
||||
font-size: 16px !important;
|
||||
font-weight: 400;
|
||||
color: $gray-600;
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
font-size: 14px !important;
|
||||
font-weight: 400;
|
||||
color: $gray-600;
|
||||
line-height: 1.625;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.disclaimer-text {
|
||||
font-size: 12px !important;
|
||||
font-weight: 400;
|
||||
color: $gray-600;
|
||||
line-height: 1.625;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -125,7 +125,8 @@
|
|||
:zipCodeFromParent="zipCode"
|
||||
:isShopQuestionDisplayed="isShopQuestionDisplayed"
|
||||
@shop-selected="onShopSelected"
|
||||
@updated-serviceability="setServiceabilityDetails" />
|
||||
@updated-serviceability="setServiceabilityDetails"
|
||||
@updated-mobile-fee-part="setMobileFeePart" />
|
||||
</div>
|
||||
<div>
|
||||
<textBlock
|
||||
|
|
@ -736,6 +737,8 @@ export default {
|
|||
this.isMobileStaticRecalibrationApplicable &&
|
||||
this.mobileFeeHasPrice &&
|
||||
this.isInsurance &&
|
||||
!this.isITAC &&
|
||||
!this.isNoComp &&
|
||||
!this.mobileFeePart?.isInsurable
|
||||
);
|
||||
},
|
||||
|
|
@ -1316,6 +1319,15 @@ export default {
|
|||
moreShopTimeSlots.mobileTimeSlotsData.days
|
||||
);
|
||||
|
||||
if (!this.selectableDatesMobile.estimatedServiceMinutesMinimum) {
|
||||
this.selectableDatesMobile.estimatedServiceMinutesMinimum =
|
||||
moreShopTimeSlots.mobileTimeSlotsData.estimatedServiceMinutesMinimum;
|
||||
}
|
||||
if (!this.selectableDatesMobile.estimatedServiceMinutesMaximum) {
|
||||
this.selectableDatesMobile.estimatedServiceMinutesMaximum =
|
||||
moreShopTimeSlots.mobileTimeSlotsData.estimatedServiceMinutesMaximum;
|
||||
}
|
||||
|
||||
return moreShopTimeSlots;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
:zipCodeFromParent="zipCodeFromParent"
|
||||
@shop-selected="onShopSelected"
|
||||
@updated-serviceability="setServiceabilityDetails"
|
||||
@updated-mobile-fee-part="setMobileFeePart"
|
||||
cmsWidgetName="YourSafeliteShopWidget" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -76,6 +77,9 @@ export default {
|
|||
setServiceabilityDetails(serviceabilityDetails) {
|
||||
this.$emit("updated-serviceability", serviceabilityDetails);
|
||||
},
|
||||
setMobileFeePart(mobileFeePart) {
|
||||
this.$emit("updated-mobile-fee-part", mobileFeePart);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -107,6 +107,7 @@ import {
|
|||
getServiceabilityDetails,
|
||||
getClosestApplicableShops,
|
||||
getShopProviderData,
|
||||
getPricedMobileFeePart,
|
||||
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
|
||||
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
||||
|
|
@ -338,6 +339,14 @@ export default {
|
|||
);
|
||||
|
||||
this.$emit("updated-serviceability", serviceabilityDetails.data);
|
||||
|
||||
// retrieve mobile fee part
|
||||
const mobileFeePart = await getPricedMobileFeePart(
|
||||
this.zipCodeData.zipCode,
|
||||
this.pageName
|
||||
);
|
||||
|
||||
this.$emit("updated-mobile-fee-part", mobileFeePart);
|
||||
}
|
||||
|
||||
this.closeModal();
|
||||
|
|
|
|||
|
|
@ -404,6 +404,13 @@ export default {
|
|||
payload.orderNumber = "";
|
||||
}
|
||||
|
||||
// Referral Sequence Number
|
||||
if (order.referralSequenceNumber) {
|
||||
payload.referralSequenceNumber = order.referralSequenceNumber;
|
||||
} else {
|
||||
payload.referralSequenceNumber = "";
|
||||
}
|
||||
|
||||
// Pricing
|
||||
// Only fire for completed orders?
|
||||
|
||||
|
|
|
|||
|
|
@ -423,6 +423,7 @@ describe("analyticsMixin.js", () => {
|
|||
},
|
||||
workOrderNumber: "01820-111111",
|
||||
workOrderId: "222222222222",
|
||||
referralSequenceNumber: "1234567",
|
||||
};
|
||||
store.getters.isRecalibrationOnOrder = true;
|
||||
store.getters.isRecalibrationOnSubmittedState = false;
|
||||
|
|
@ -667,6 +668,14 @@ describe("analyticsMixin.js", () => {
|
|||
expect(glassString).toMatch(/(\w+\/\w+)?(,\w+\/\w+)*/);
|
||||
expect(promoString).toMatch(/(\w+)?(,\w+)*/);
|
||||
});
|
||||
|
||||
test("Pushes referralSequenceNumber when present on order", () => {
|
||||
window.dataLayer = [];
|
||||
|
||||
analyticsMixin.methods.pushOrderToDataLayer();
|
||||
|
||||
expect(window.dataLayer[0].referralSequenceNumber).toBe("1234567");
|
||||
});
|
||||
});
|
||||
|
||||
test("Obj is not null after action prepended", () => {
|
||||
|
|
|
|||
|
|
@ -175,11 +175,18 @@ const getDefaultState = () => {
|
|||
additionalAuthFlag: null,
|
||||
isNoComp: false,
|
||||
insuranceCompanyName: null,
|
||||
phoneNumber: null,
|
||||
phoneExtension: null,
|
||||
streetAddress: null,
|
||||
apartment: null,
|
||||
city: null,
|
||||
state: null,
|
||||
zipCode: null,
|
||||
dateOfBirth: null,
|
||||
lossTime: null,
|
||||
lossLocation: null,
|
||||
lastName: null,
|
||||
subrogation: null,
|
||||
},
|
||||
schedule: {
|
||||
date: null,
|
||||
|
|
@ -225,6 +232,7 @@ const getDefaultState = () => {
|
|||
expiryTime: null,
|
||||
idempotencyKey: null,
|
||||
},
|
||||
submittedStateRevision: 0,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -342,6 +350,12 @@ export const mutations = {
|
|||
state.order.payment.accountName = accountName;
|
||||
state.order.policy.insuranceCompanyName = accountName;
|
||||
},
|
||||
updatePhoneNumber(state, phoneNumber) {
|
||||
state.order.policy.phoneNumber = phoneNumber;
|
||||
},
|
||||
updatePhoneExtension(state, phoneExtension) {
|
||||
state.order.policy.phoneExtension = phoneExtension;
|
||||
},
|
||||
updateStreetAddress(state, streetAddress) {
|
||||
state.order.policy.streetAddress = streetAddress;
|
||||
},
|
||||
|
|
@ -551,6 +565,15 @@ export const mutations = {
|
|||
state.order.policy.state = insuranceDetails.state;
|
||||
state.order.policy.zipCode = insuranceDetails.zipCode;
|
||||
state.order.policy.claimNumber = insuranceDetails.claimNumber;
|
||||
state.order.policy.phoneNumber = insuranceDetails.phoneNumber;
|
||||
state.order.policy.phoneExtension = insuranceDetails.phoneExtension;
|
||||
state.order.policy.morePolicyQuestions = insuranceDetails.morePolicyQuestions;
|
||||
state.order.policy.dateOfBirth = insuranceDetails.dateOfBirth;
|
||||
state.order.policy.lossTime = insuranceDetails.lossTime;
|
||||
state.order.policy.lastName = insuranceDetails.lastName;
|
||||
state.order.policy.lossLocation = insuranceDetails.lossLocation;
|
||||
state.order.policy.subrogation = insuranceDetails.subrogation;
|
||||
state.order.policy.streetAddress = insuranceDetails.streetAddress;
|
||||
}
|
||||
},
|
||||
updateDamageDetails(state, damageDetails) {
|
||||
|
|
@ -745,6 +768,11 @@ export const mutations = {
|
|||
resetState(state) {
|
||||
Object.assign(state, getDefaultState());
|
||||
},
|
||||
// Bumps when submittedState sessionStorage is created, updated, or cleared so getters
|
||||
// that read sessionStorage (coverageIsVerified, etc.) invalidate their Vuex cache.
|
||||
incrementSubmittedStateRevision(state) {
|
||||
state.submittedStateRevision = (state.submittedStateRevision ?? 0) + 1;
|
||||
},
|
||||
resetSaveSessionPromise(state) {
|
||||
state.applicationUser.saveSessionPromise = null;
|
||||
},
|
||||
|
|
@ -1004,6 +1032,7 @@ export const getters = {
|
|||
return !!nonWindshieldItems?.length;
|
||||
},
|
||||
coverageIsVerified: (state) => {
|
||||
state.submittedStateRevision;
|
||||
let order;
|
||||
if (window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE) !== null) {
|
||||
order = JSON.parse(
|
||||
|
|
@ -1036,6 +1065,7 @@ export const getters = {
|
|||
return getHasRecalibrationPart(state);
|
||||
},
|
||||
isRecalibrationOnSubmittedState: (state) => {
|
||||
state.submittedStateRevision;
|
||||
if (window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE) !== null) {
|
||||
return getHasRecalibrationPart({
|
||||
order: JSON.parse(
|
||||
|
|
@ -1046,6 +1076,7 @@ export const getters = {
|
|||
return false;
|
||||
},
|
||||
shouldHideRecalibration: (state) => {
|
||||
state.submittedStateRevision;
|
||||
if (window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE) !== null) {
|
||||
state = JSON.parse(
|
||||
window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE)
|
||||
|
|
@ -3696,6 +3727,8 @@ export const actions = {
|
|||
|
||||
//restore affiliate cookies
|
||||
context.commit(storeMutations.UPDATE_AFFILIATE_COOKIES, affiliateCookies);
|
||||
|
||||
context.commit(storeMutations.INCREMENT_SUBMITTED_STATE_REVISION);
|
||||
},
|
||||
|
||||
addDonationToSubmittedState(context, donationAmount) {
|
||||
|
|
@ -3725,11 +3758,15 @@ export const actions = {
|
|||
sessionStorageKeyConstants.SUBMITTED_STATE,
|
||||
JSON.stringify(submittedState)
|
||||
);
|
||||
|
||||
context.commit(storeMutations.INCREMENT_SUBMITTED_STATE_REVISION);
|
||||
},
|
||||
|
||||
resetSubmittedState(context) {
|
||||
// clear from local storage
|
||||
window.sessionStorage.removeItem(sessionStorageKeyConstants.SUBMITTED_STATE);
|
||||
|
||||
context.commit(storeMutations.INCREMENT_SUBMITTED_STATE_REVISION);
|
||||
},
|
||||
resetExternalParameterState(context) {
|
||||
if (context.getters.isExternalParameter) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import globalMethods from "@/global-methods";
|
||||
import store from "@/store";
|
||||
import { mutations, state, actions, getters } from "@/store";
|
||||
import { storeMutations } from "@/constants/store-mutations";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { sessionStorageKeyConstants } from "@/constants/session-storage";
|
||||
import { experimentTriggers } from "@/constants/experiments";
|
||||
import { routeData } from "@/router/constants/routes";
|
||||
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
|
||||
|
|
@ -363,6 +365,14 @@ describe("Mutations", () => {
|
|||
expect(state.order.customer.phoneNumber).toEqual("555-555-5555");
|
||||
expect(state.order.customer.isSmsOptIn).toEqual(true);
|
||||
});
|
||||
|
||||
it("incrementSubmittedStateRevision, should increment submittedStateRevision", () => {
|
||||
const storeState = { submittedStateRevision: 0 };
|
||||
|
||||
mutations.incrementSubmittedStateRevision(storeState);
|
||||
|
||||
expect(storeState.submittedStateRevision).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Actions", () => {
|
||||
|
|
@ -3610,6 +3620,85 @@ describe("Actions", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("submittedStateRevision", () => {
|
||||
beforeEach(() => {
|
||||
mutations.resetState(store.state);
|
||||
window.sessionStorage.removeItem(sessionStorageKeyConstants.SUBMITTED_STATE);
|
||||
});
|
||||
|
||||
it("resetSubmittedState action commits INCREMENT_SUBMITTED_STATE_REVISION", async () => {
|
||||
const context = { commit: jest.fn() };
|
||||
|
||||
await actions.resetSubmittedState(context);
|
||||
|
||||
expect(context.commit).toHaveBeenCalledWith(
|
||||
storeMutations.INCREMENT_SUBMITTED_STATE_REVISION
|
||||
);
|
||||
});
|
||||
|
||||
it("createSubmittedState action commits INCREMENT_SUBMITTED_STATE_REVISION at end", async () => {
|
||||
const context = {
|
||||
commit: jest.fn(),
|
||||
state: {
|
||||
order: {
|
||||
payment: { insuranceCoverage: { isVerified: false } },
|
||||
policy: { currentDeductible: 0 },
|
||||
lineItems: {},
|
||||
},
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
affiliateCookies: [],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
await actions.createSubmittedState(context);
|
||||
|
||||
expect(context.commit).toHaveBeenCalledWith(
|
||||
storeMutations.INCREMENT_SUBMITTED_STATE_REVISION
|
||||
);
|
||||
});
|
||||
|
||||
it("addDonationToSubmittedState action commits INCREMENT_SUBMITTED_STATE_REVISION", async () => {
|
||||
window.sessionStorage.setItem(
|
||||
sessionStorageKeyConstants.SUBMITTED_STATE,
|
||||
JSON.stringify({
|
||||
order: {
|
||||
lineItems: { supportingItems: [] },
|
||||
},
|
||||
applicationUser: {},
|
||||
})
|
||||
);
|
||||
|
||||
const context = { commit: jest.fn() };
|
||||
|
||||
await actions.addDonationToSubmittedState(context, 5);
|
||||
|
||||
expect(context.commit).toHaveBeenCalledWith(
|
||||
storeMutations.INCREMENT_SUBMITTED_STATE_REVISION
|
||||
);
|
||||
});
|
||||
|
||||
it("coverageIsVerified re-evaluates after resetSubmittedState clears sessionStorage", () => {
|
||||
window.sessionStorage.setItem(
|
||||
sessionStorageKeyConstants.SUBMITTED_STATE,
|
||||
JSON.stringify({
|
||||
order: {
|
||||
payment: { insuranceCoverage: { isVerified: true } },
|
||||
policy: { currentDeductible: 500 },
|
||||
},
|
||||
applicationUser: {},
|
||||
})
|
||||
);
|
||||
|
||||
expect(store.getters.coverageIsVerified).toBe(true);
|
||||
|
||||
store.dispatch(storeActions.RESET_SUBMITTED_STATE);
|
||||
|
||||
expect(store.getters.coverageIsVerified).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Getters", () => {
|
||||
it("Vehicle getter, should return vehicle data", () => {
|
||||
// Arrange
|
||||
|
|
|
|||
|
|
@ -6,9 +6,10 @@
|
|||
<div
|
||||
:aria-label="buttonLabel"
|
||||
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
|
||||
<span class="m-0" :class="[textPosition, labelBold ? 'span-bold' : '']">
|
||||
{{ buttonLabel }}
|
||||
</span>
|
||||
<span
|
||||
class="m-0"
|
||||
:class="[textPosition, labelBold ? 'span-bold' : '']"
|
||||
v-html="buttonLabel"></span>
|
||||
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue