jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1023 from Safelite/feature/humphries/INSR-8091

Browse source 
INSR-8091: Policy Holder Details changes from demo
This commit is contained in:
AHumphriesSL 2026-01-26 09:23:07 -05:00 committed by GitHub
commit d384b42e10
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 46 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/digital-components/dropdown-question/dropdown-question.vue
View file

@ -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,

2
src/helpers/global-rule-definer.js
View file

@ -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)
);
}

28
src/iss-components/address-questions/address-questions.vue
View file

@ -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>

18
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -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>

1
src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue
View file

@ -49,6 +49,7 @@
inputId="extension"
:cmsWidgetName="widget.extensionQuestion"
disableAutoFill
maxLength="5"
:validationRules="rules.extension" />
</template>
</modal>

1
src/layouts/welcome-page/welcome-page.vue
View file

@ -39,6 +39,7 @@
inputId="extensionField"
cmsWidgetName="ExtensionQuestion"
:validationRules="rules.extension"
maxLength="5"
disableAutoFill
class="form-group" />
<textboxQuestion

8
src/store/index.js
View file

@ -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) {

44
src/styles/common-styles.scss
View file

@ -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%;
}
}

2
src/styles/ux-variables.scss
View file

@ -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,
);