Merge branch 'develop' into feature/INSR-8093
This commit is contained in:
commit
06dff215ab
10 changed files with 47 additions and 61 deletions
|
|
@ -34,7 +34,7 @@ const errorMessages = Object.freeze({
|
|||
VIN_FORMAT:
|
||||
// eslint-disable-next-line max-len
|
||||
'Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q',
|
||||
OPTION_REQUIRED: 'Please choose an option',
|
||||
OPTION_REQUIRED: 'Please select an option',
|
||||
VEHICLE_REQUIRED: 'Please select a vehicle',
|
||||
POLICY_NUMBER_REQUIRED: 'Policy number is required.',
|
||||
POLICY_NUMBER_FORMAT: 'Please enter an alpha-numeric string',
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ export default {
|
|||
background-size: 0.625rem 1rem;
|
||||
color: $gray-600;
|
||||
border-radius: $border-radius;
|
||||
min-height: 3rem;
|
||||
min-height: 2.8125rem;
|
||||
letter-spacing: inherit;
|
||||
box-shadow: $box-shadow-input;
|
||||
&:focus,
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ function defineGlobalPhoneNumberRules() {
|
|||
function defineGlobalExtensionRules() {
|
||||
defineRule(
|
||||
globalRules.EXTENSION_FORMAT,
|
||||
regex(/^[0-9]{5}$/, errorMessages.EXTENSION_FORMAT)
|
||||
regex(/^[0-9]{1,5}$/, errorMessages.EXTENSION_FORMAT)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,7 @@
|
|||
hasIcon
|
||||
disableAutoFill
|
||||
validationRules="street-address-required"
|
||||
@keydown.enter.prevent
|
||||
class="mb-4" />
|
||||
@keydown.enter.prevent />
|
||||
</div>
|
||||
</div>
|
||||
<transition
|
||||
|
|
@ -29,24 +28,22 @@
|
|||
v-model="addressModel.streetAddress2"
|
||||
cmsWidgetName="StreetAddress2QuestionWidget"
|
||||
aria-haspopup=""
|
||||
inputId="streetAddress2Field"
|
||||
class="mb-4" />
|
||||
inputId="streetAddress2Field" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
aria-live="polite">
|
||||
<div class="col">
|
||||
<div class="col-lg-6">
|
||||
<textboxQuestion
|
||||
ref="city"
|
||||
v-model="addressModel.city"
|
||||
cmsWidgetName="CityQuestionWidget"
|
||||
inputId="cbf28188fdf2436688fd735915f7ee56"
|
||||
disableAutoFill
|
||||
validationRules="city-required"
|
||||
class="mb-4" />
|
||||
validationRules="city-required" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-lg-6">
|
||||
<dropdownQuestion
|
||||
ref="state"
|
||||
v-model="addressModel.state"
|
||||
|
|
@ -55,8 +52,7 @@
|
|||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="stateOptions"
|
||||
disableAutoFill
|
||||
validationRules="state-required"
|
||||
class="mb-4" />
|
||||
validationRules="state-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -70,8 +66,7 @@
|
|||
inputId="01a9a1c2de0b4c9da8e023c9ae3be498"
|
||||
mask="#####"
|
||||
disableAutoFill
|
||||
validationRules="zip-code-required|zip-code-format"
|
||||
class="mb-4" />
|
||||
validationRules="zip-code-required|zip-code-format" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -362,3 +357,12 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.textbox-question {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.dropdown-question {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
id="sub-header"
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
class="mt-4" />
|
||||
<div class="row mb-4">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
ref="policyHolderFirstName"
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
:validationRules="rules.lastName" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-8">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<textboxQuestion
|
||||
ref="phoneNumber"
|
||||
v-model="customerQuestions.phoneNumber"
|
||||
|
|
@ -48,13 +48,14 @@
|
|||
:mask="phoneMask"
|
||||
disableAutoFill />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-lg-4">
|
||||
<textboxQuestion
|
||||
ref="extension"
|
||||
v-model="customerQuestions.extension"
|
||||
inputId="extensionField"
|
||||
cmsWidgetName="ExtensionQuestion"
|
||||
:validationRules="rules.extension"
|
||||
maxLength="5"
|
||||
disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -65,8 +66,7 @@
|
|||
cmsWidgetName="EmailAddressQuestion"
|
||||
:validationRules="rules.email"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
class="mb-4" />
|
||||
disableAutoFill />
|
||||
<addressQuestions
|
||||
id="address-questions-wrapper"
|
||||
ref="addressQuestions"
|
||||
|
|
@ -228,4 +228,10 @@ export default {
|
|||
#address-questions-wrapper .form-test-error {
|
||||
line-height: 24px;
|
||||
}
|
||||
.textbox-question {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.dropdown-question {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
inputId="extension"
|
||||
:cmsWidgetName="widget.extensionQuestion"
|
||||
disableAutoFill
|
||||
maxLength="5"
|
||||
:validationRules="rules.extension" />
|
||||
</template>
|
||||
</modal>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
inputId="extensionField"
|
||||
cmsWidgetName="ExtensionQuestion"
|
||||
:validationRules="rules.extension"
|
||||
maxLength="5"
|
||||
disableAutoFill
|
||||
class="form-group" />
|
||||
<textboxQuestion
|
||||
|
|
|
|||
|
|
@ -2293,7 +2293,8 @@ export const useMainStore = defineStore({
|
|||
this.order.serviceLocation.zipCode = welcomePageModel?.policyZipCode;
|
||||
this.updatePhoneNumbers({
|
||||
home: welcomePageModel?.phoneNumber,
|
||||
service: welcomePageModel?.phoneNumber
|
||||
service: welcomePageModel?.phoneNumber,
|
||||
extension: welcomePageModel?.extension
|
||||
});
|
||||
},
|
||||
updatePolicyHolderDetails(customerQuestions) {
|
||||
|
|
@ -2305,6 +2306,11 @@ export const useMainStore = defineStore({
|
|||
this.order.customer.firstName = customerQuestions.firstName;
|
||||
this.order.customer.lastName = customerQuestions.lastName;
|
||||
this.order.customer.emailAddress = customerQuestions.email;
|
||||
this.updatePhoneNumbers({
|
||||
home: customerQuestions.phoneNumber,
|
||||
service: customerQuestions.phoneNumber,
|
||||
extension: customerQuestions.extension
|
||||
});
|
||||
this.order.serviceLocation.zipCode = customerQuestions.addressQuestions.zipCode;
|
||||
},
|
||||
updateIsSafeliteProvider(isSafelite) {
|
||||
|
|
|
|||
|
|
@ -22,44 +22,6 @@ body {
|
|||
flex-direction: column;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
// Set max-width on columns to prevent overly-wide
|
||||
// components on extra wide screens.
|
||||
.col-md-6 {
|
||||
max-width: 472px;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
max-width: 708px;
|
||||
}
|
||||
|
||||
.col {
|
||||
max-width: 236px;
|
||||
|
||||
&.one-list-card-width {
|
||||
max-width: 472px;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
max-width: 66.6666666%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-question {
|
||||
.col {
|
||||
max-width: 472px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-xl-4 {
|
||||
max-width: 472px;
|
||||
|
||||
.col {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
//END set max-width on columns
|
||||
}
|
||||
|
||||
.pointer {
|
||||
|
|
@ -156,6 +118,10 @@ body {
|
|||
width: 46.25rem; // 740px
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: 60rem; // 960px
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
width: 63.75rem; // 1020px
|
||||
}
|
||||
|
|
@ -166,7 +132,7 @@ body {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: 58.33333333%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -194,7 +194,9 @@ $spacers: (
|
|||
//Bootstrap Grid Breakpoints - Use these breakpoints only
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1440px,
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue