INSR-7752: Formatting on contact-details

This commit is contained in:
Alex Humphries 2026-02-03 16:58:55 -05:00
parent 02281b3230
commit d7f6ba1fc9
8 changed files with 108 additions and 89 deletions

View file

@ -79,7 +79,7 @@
</fieldset> </fieldset>
</div> </div>
<div <div
v-if="!suppressError" v-if="!suppressError && errorMessage"
class="row form-test-error mt-1"> class="row form-test-error mt-1">
<error-message :name="formatString(groupName)"></error-message> <error-message :name="formatString(groupName)"></error-message>
</div> </div>

View file

@ -18,7 +18,7 @@
:id="inputId" :id="inputId"
:ref="inputId" :ref="inputId"
v-model.trim="value" v-model.trim="value"
class="form-control" class="textarea-input"
:name="inputId" :name="inputId"
:rows="[inputRows ?? 10]" :rows="[inputRows ?? 10]"
:placeholder="placeholderText" :placeholder="placeholderText"
@ -32,8 +32,15 @@
@drop="trimOnPaste"> @drop="trimOnPaste">
</textarea> </textarea>
</div> </div>
<p class="character-count margin-top-8"> <p
{{ maxLength - characterCount }}/{{ maxLength }} characters remaining v-if="characterCount == 0"
class="character-count">
{{ maxLength }} characters allowed
</p>
<p
v-else
class="character-count">
{{ maxLength - characterCount }} characters left
</p> </p>
<div <div
v-show="errorMessage" v-show="errorMessage"
@ -103,7 +110,7 @@ export default {
computed: { computed: {
/** /**
* @summary Returns the number of characters in the textarea field. * @summary Returns the number of characters in the textarea field.
* @returns {number} * @returns {number} the number of characters.
*/ */
characterCount() { characterCount() {
return this?.modelValue?.length ?? 0; return this?.modelValue?.length ?? 0;
@ -155,19 +162,18 @@ export default {
font-weight: 500; font-weight: 500;
} }
.form-control { .textarea-input {
max-height: 30rem; padding: .625rem;
border: $border-input; resize: none;
border-radius: $border-radius; margin-bottom: .625rem;
padding: 12px 16px; width: 100%;
letter-spacing: inherit; letter-spacing: inherit;
box-shadow: $box-shadow-input; font-family: inherit;
font-size: inherit;
line-height: 1.375rem;
&::placeholder { &::placeholder {
color: $gray-500; color: $gray-500;
} }
&:focus {
border: $border-input-focus;
}
&:disabled, &:disabled,
&.disabled { &.disabled {
background-color: $gray-100; background-color: $gray-100;
@ -181,12 +187,8 @@ export default {
} }
.character-count { .character-count {
color: $gray-600; color: #4d4e53;
font-size: 12px; font-size: 1rem;
margin-bottom: 0px; line-height: 1.375rem;
}
.margin-top-8 {
margin-top: 8px;
} }
</style> </style>

View file

@ -15,6 +15,7 @@
<siteSubHeader <siteSubHeader
id="sub-header" id="sub-header"
ref="siteSubHeader" ref="siteSubHeader"
class="subheader"
:cmsWidgetName="widget.siteSubHeader" /> :cmsWidgetName="widget.siteSubHeader" />
<!-- TO DO: Use MSR appointment information for MSR --> <!-- TO DO: Use MSR appointment information for MSR -->
<alert <alert
@ -28,11 +29,13 @@
v-model="isSameAsPolicyAddress" v-model="isSameAsPolicyAddress"
checkboxName="sameAsPolicyAddress" checkboxName="sameAsPolicyAddress"
buttonID="sameAsPolicyAddress" buttonID="sameAsPolicyAddress"
class="form-group same-address-checkbox"
:checkboxLabel="sameAsPolicyAddressQuestionText" /> :checkboxLabel="sameAsPolicyAddressQuestionText" />
<textboxQuestion <textboxQuestion
ref="addressQuestion" ref="addressQuestion"
v-model="address" v-model="address"
inputId="address" inputId="address"
class="form-group"
:cmsWidgetName="widget.streetAddressQuestion" :cmsWidgetName="widget.streetAddressQuestion"
isRequired isRequired
:validationRules="'street-address-required'" /> :validationRules="'street-address-required'" />
@ -40,11 +43,13 @@
ref="address2Question" ref="address2Question"
v-model="address2" v-model="address2"
inputId="address2" inputId="address2"
class="form-group"
:cmsWidgetName="widget.apartmentQuestion" /> :cmsWidgetName="widget.apartmentQuestion" />
<textboxQuestion <textboxQuestion
ref="cityQuestion" ref="cityQuestion"
v-model="city" v-model="city"
inputId="city" inputId="city"
class="form-group"
:cmsWidgetName="widget.cityQuestion" :cmsWidgetName="widget.cityQuestion"
isRequired isRequired
:validationRules="'city-required'" /> :validationRules="'city-required'" />
@ -52,6 +57,7 @@
ref="stateQuestion" ref="stateQuestion"
v-model="state" v-model="state"
inputId="state" inputId="state"
class="form-group"
:cmsWidgetName="widget.stateQuestion" :cmsWidgetName="widget.stateQuestion"
:options="states" :options="states"
isDisabled /> isDisabled />
@ -59,6 +65,7 @@
ref="zipCodeQuestion" ref="zipCodeQuestion"
v-model="zipCode" v-model="zipCode"
inputId="zipCode" inputId="zipCode"
class="form-group"
:cmsWidgetName="widget.zipCodeQuestion" :cmsWidgetName="widget.zipCodeQuestion"
isDisabled /> isDisabled />
<alert <alert
@ -72,19 +79,21 @@
ref="vehicleProtectedQuestion" ref="vehicleProtectedQuestion"
v-model="isVehicleProtected" v-model="isVehicleProtected"
inputId="vehicleProtected" inputId="vehicleProtected"
class="form-group"
isRequired isRequired
groupName="vehicleProtectedQuestion" groupName="vehicleProtectedQuestion"
:questionText="vehicleProtectedQuestionText" :questionText="vehicleProtectedQuestionText"
:answers="vehicleProtectedQuestionAnswers" :answers="vehicleProtectedQuestionAnswers"
:validationRules="'option-required'"
:buttonTypeString="'listButtonHorizontal'" /> :buttonTypeString="'listButtonHorizontal'" />
<textBlock <textBlock
ref="clearanceText" ref="clearanceText"
class="clearance-text"
:cmsWidgetName="widget.clearanceText" /> :cmsWidgetName="widget.clearanceText" />
<textareaQuestion <textareaQuestion
ref="notesQuestion" ref="notesQuestion"
v-model="notesForTechnician" v-model="notesForTechnician"
inputId="technicianNotes" inputId="technicianNotes"
class="form-group"
:isDisabled="false" :isDisabled="false"
:isRequired="false" :isRequired="false"
:cmsWidgetName="widget.notesQuestion" :cmsWidgetName="widget.notesQuestion"
@ -112,6 +121,7 @@ import textareaQuestion from '@/digital-components/textarea-question/textarea-qu
import alert from '@/ux-components/alert/alert.vue'; import alert from '@/ux-components/alert/alert.vue';
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue'; import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import textBlock from '@/digital-components/text-block/text-block.vue'; import textBlock from '@/digital-components/text-block/text-block.vue';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
// Supporting files // Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
@ -121,7 +131,6 @@ import { useMainStore } from '@/store/index.js';
import MaskaFormattedMasks from '@/constants/maska-masks'; import MaskaFormattedMasks from '@/constants/maska-masks';
import errorMessages from '@/constants/error-messages'; import errorMessages from '@/constants/error-messages';
import { required } from '@/helpers/validation-rules'; import { required } from '@/helpers/validation-rules';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import widgetFields from '@/constants/cms-widget-fields'; import widgetFields from '@/constants/cms-widget-fields';
import states from '@/constants/states'; import states from '@/constants/states';
@ -239,7 +248,7 @@ export default {
address: this.address, address: this.address,
address2: this.address2, address2: this.address2,
city: this.city, city: this.city,
isVehicleProtected: this.isVehicleProtected isVehicleProtected: this.isVehicleProtected || 'false'
}); });
if (this.requestTextUpdates) { if (this.requestTextUpdates) {
@ -302,4 +311,26 @@ export default {
} }
} }
} }
.subheader {
margin: 1.25rem 0;
}
.form-group {
margin-bottom: 1.25rem;
}
.same-address-checkbox {
:deep(.form-check-input) {
&:checked + label p,
& + label p {
font-size: 1rem;
font-weight: $font-weight-normal;
color: $darker-gray;
}
}
}
.clearance-text {
font-size: .875rem;
line-height: 1.25rem;
margin-top: 0rem;
margin-bottom: .3125rem;
}
</style> </style>

View file

@ -414,7 +414,6 @@ export default {
)); ));
this.navigateWithScenario(navigationScenarios.PRICING_LOOKUP_ERROR); this.navigateWithScenario(navigationScenarios.PRICING_LOOKUP_ERROR);
}); });
console.log('ITAC Pricing Results:', pricingResults);
this.setBaseServiceLineItems(pricingResults); this.setBaseServiceLineItems(pricingResults);
} }
}, },

View file

@ -176,7 +176,6 @@ export default {
&& vehicle.model && vehicle.model
&& vehicle.style && vehicle.style
); );
console.log('vehicleReqs:', vehicleReqs);
// Damage // Damage
const { isRepair, numberOfChips, glassToReplace } = const { isRepair, numberOfChips, glassToReplace } =
@ -185,7 +184,6 @@ export default {
(isRepair && numberOfChips) (isRepair && numberOfChips)
|| (!isRepair && glassToReplace?.length) || (!isRepair && glassToReplace?.length)
); );
console.log('damageReqs:', damageReqs);
// Service Package // Service Package
const { lineItems } = useMainStore().order; const { lineItems } = useMainStore().order;
@ -193,18 +191,15 @@ export default {
(isRepair || lineItems.glassParts) (isRepair || lineItems.glassParts)
&& lineItems.supportingItems && lineItems.supportingItems
); );
console.log('packageReqs:', packageReqs);
// Service Location // Service Location
const { serviceLocation } = useMainStore().order; const { serviceLocation } = useMainStore().order;
console.log('serviceLocation:', serviceLocation);
const mobileReqs = !!( const mobileReqs = !!(
serviceLocation.address serviceLocation.address
&& serviceLocation.city && serviceLocation.city
&& serviceLocation.state && serviceLocation.state
&& serviceLocation.zipCode && serviceLocation.zipCode
); );
console.log('mobileReqs:', mobileReqs);
const providerLocation = serviceLocation.provider.address; const providerLocation = serviceLocation.provider.address;
const dropOffInshopReqs = !!( const dropOffInshopReqs = !!(
@ -213,13 +208,11 @@ export default {
&& providerLocation.state && providerLocation.state
&& providerLocation.zipCode && providerLocation.zipCode
); );
console.log('dropOffInshopReqs:', dropOffInshopReqs);
const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
|| serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; || serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
const serviceLocationReqs = const serviceLocationReqs =
(isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs); (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
console.log('serviceLocationReqs:', serviceLocationReqs);
// Schedule // Schedule
const { date, startTime, endTime, jobMaxMinutes, jobMinMinutes } = const { date, startTime, endTime, jobMaxMinutes, jobMinMinutes } =
@ -231,23 +224,19 @@ export default {
&& jobMaxMinutes && jobMaxMinutes
&& jobMinMinutes && jobMinMinutes
); );
console.log('scheduleReqs:', scheduleReqs);
// Customer // Customer
const { firstName, lastName, emailAddress } = useMainStore().order.customer; const { firstName, lastName, emailAddress } = useMainStore().order.customer;
const customerReqs = !!(firstName && lastName && emailAddress); const customerReqs = !!(firstName && lastName && emailAddress);
console.log('customerReqs:', customerReqs);
// Contact Info // Contact Info
const { contactInfo } = useMainStore(); const { contactInfo } = useMainStore();
console.log('contactInfo:', contactInfo);
const contactInfoReqs = !!( const contactInfoReqs = !!(
contactInfo.firstName contactInfo.firstName
&& contactInfo.lastName && contactInfo.lastName
&& contactInfo.servicePhone && contactInfo.servicePhone
&& contactInfo.emailAddress && contactInfo.emailAddress
); );
console.log('contactInfoReqs:', contactInfoReqs);
return ( return (
vehicleReqs vehicleReqs

View file

@ -112,12 +112,6 @@ export default {
const { feeItems } = store.order.lineItems; const { feeItems } = store.order.lineItems;
console.log('Service Packages - Fetched Line Items:', {
rainDefense: resultMap?.rainDefense,
wipers: resultMap?.wipers,
feeItems
});
const availableLineItems = []; const availableLineItems = [];
if (resultMap?.rainDefense) { if (resultMap?.rainDefense) {

View file

@ -1825,18 +1825,20 @@ export const useMainStore = defineStore({
this.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType ?? this.order.serviceLocation.appointmentType; this.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType ?? this.order.serviceLocation.appointmentType;
this.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected ?? this.order.serviceLocation.isVehicleProtected; this.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected ?? this.order.serviceLocation.isVehicleProtected;
this.order.serviceLocation.provider = { if (serviceLocationInfo.provider) {
providerNumber: serviceLocationInfo.provider?.providerNumber, this.order.serviceLocation.provider = {
address: { providerNumber: serviceLocationInfo.provider?.providerNumber,
streetAddress: serviceLocationInfo.provider?.address?.streetAddress, address: {
city: serviceLocationInfo.provider?.address?.city, streetAddress: serviceLocationInfo.provider?.address?.streetAddress,
state: serviceLocationInfo.provider?.address?.state, city: serviceLocationInfo.provider?.address?.city,
zipCode: serviceLocationInfo.provider?.address?.zipCode, state: serviceLocationInfo.provider?.address?.state,
zipCodeCtu: serviceLocationInfo.provider?.address?.zipCodeCtu zipCode: serviceLocationInfo.provider?.address?.zipCode,
}, zipCodeCtu: serviceLocationInfo.provider?.address?.zipCodeCtu
companyName: serviceLocationInfo.provider?.companyName, },
phoneNumber: serviceLocationInfo.provider?.phoneNumber companyName: serviceLocationInfo.provider?.companyName,
}; phoneNumber: serviceLocationInfo.provider?.phoneNumber
};
}
this.order.serviceLocation.searchFilter = serviceLocationInfo.searchFilter; this.order.serviceLocation.searchFilter = serviceLocationInfo.searchFilter;
}, },

View file

@ -26,41 +26,43 @@
<span class="m-0 alert-header-text"> <span class="m-0 alert-header-text">
{{ alertHeadline }} {{ alertHeadline }}
</span> </span>
<button <div class="alert-icon-container">
v-if="isCollapsible" <button
class="btn-collapse" v-if="isCollapsible"
type="button" class="btn-collapse"
@click="toggleCollapse"> type="button"
<svg @click="toggleCollapse">
xmlns="http://www.w3.org/2000/svg" <svg
width="15" xmlns="http://www.w3.org/2000/svg"
height="9" width="15"
viewBox="0 0 15 9" height="9"
class="btn-collapse-icon" viewBox="0 0 15 9"
:class="{ 'rotated': !collapsed }"> class="btn-collapse-icon"
<path :class="{ 'rotated': !collapsed }">
fill-rule="nonzero" <path
d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0 fill-rule="nonzero"
1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806 d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0
0 0 0 7.5 0" /> 1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806
</svg> 0 0 0 7.5 0" />
</button> </svg>
<button </button>
v-if="isDismissible" <button
type="button" v-if="isDismissible"
class="btn-close p-2" type="button"
data-bs-dismiss="alert" class="btn-close p-2"
aria-label="Close"> data-bs-dismiss="alert"
<svg aria-label="Close">
xmlns="http://www.w3.org/2000/svg" <svg
viewBox="0 0 23.7 23.7" xmlns="http://www.w3.org/2000/svg"
xml:space="preserve"> viewBox="0 0 23.7 23.7"
<path xml:space="preserve">
d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 <path
1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581
.46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" /> 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21
</svg> .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
</button> </svg>
</button>
</div>
</div> </div>
<div <div
v-show="alertCopy" v-show="alertCopy"