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

INSR-7752: Formatting on contact-details

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

42
src/digital-components/textarea-question/textarea-question.vue
View file

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

37
src/layouts/contact-details/contact-details.vue
View file

@ -15,6 +15,7 @@
<siteSubHeader
id="sub-header"
ref="siteSubHeader"
class="subheader"
:cmsWidgetName="widget.siteSubHeader" />
<!-- TO DO: Use MSR appointment information for MSR -->
<alert
@ -28,11 +29,13 @@
v-model="isSameAsPolicyAddress"
checkboxName="sameAsPolicyAddress"
buttonID="sameAsPolicyAddress"
class="form-group same-address-checkbox"
:checkboxLabel="sameAsPolicyAddressQuestionText" />
<textboxQuestion
ref="addressQuestion"
v-model="address"
inputId="address"
class="form-group"
:cmsWidgetName="widget.streetAddressQuestion"
isRequired
:validationRules="'street-address-required'" />
@ -40,11 +43,13 @@
ref="address2Question"
v-model="address2"
inputId="address2"
class="form-group"
:cmsWidgetName="widget.apartmentQuestion" />
<textboxQuestion
ref="cityQuestion"
v-model="city"
inputId="city"
class="form-group"
:cmsWidgetName="widget.cityQuestion"
isRequired
:validationRules="'city-required'" />
@ -52,6 +57,7 @@
ref="stateQuestion"
v-model="state"
inputId="state"
class="form-group"
:cmsWidgetName="widget.stateQuestion"
:options="states"
isDisabled />
@ -59,6 +65,7 @@
ref="zipCodeQuestion"
v-model="zipCode"
inputId="zipCode"
class="form-group"
:cmsWidgetName="widget.zipCodeQuestion"
isDisabled />
<alert
@ -72,19 +79,21 @@
ref="vehicleProtectedQuestion"
v-model="isVehicleProtected"
inputId="vehicleProtected"
class="form-group"
isRequired
groupName="vehicleProtectedQuestion"
:questionText="vehicleProtectedQuestionText"
:answers="vehicleProtectedQuestionAnswers"
:validationRules="'option-required'"
:buttonTypeString="'listButtonHorizontal'" />
<textBlock
ref="clearanceText"
class="clearance-text"
:cmsWidgetName="widget.clearanceText" />
<textareaQuestion
ref="notesQuestion"
v-model="notesForTechnician"
inputId="technicianNotes"
class="form-group"
:isDisabled="false"
:isRequired="false"
: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 dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
// Supporting files
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 errorMessages from '@/constants/error-messages';
import { required } from '@/helpers/validation-rules';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import widgetFields from '@/constants/cms-widget-fields';
import states from '@/constants/states';
@ -239,7 +248,7 @@ export default {
address: this.address,
address2: this.address2,
city: this.city,
isVehicleProtected: this.isVehicleProtected
isVehicleProtected: this.isVehicleProtected || 'false'
});
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>

1
src/layouts/coverage-statement/coverage-statement.vue
View file

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

11
src/layouts/payment-method/payment-method.vue
View file

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

6
src/layouts/service-packages/service-packages.vue
View file

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

26
src/store/index.js
View file

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

72
src/ux-components/alert/alert.vue
View file

@ -26,41 +26,43 @@
<span class="m-0 alert-header-text">
{{ alertHeadline }}
</span>
<button
v-if="isCollapsible"
class="btn-collapse"
type="button"
@click="toggleCollapse">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="9"
viewBox="0 0 15 9"
class="btn-collapse-icon"
:class="{ 'rotated': !collapsed }">
<path
fill-rule="nonzero"
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
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
0 0 0 7.5 0" />
</svg>
</button>
<button
v-if="isDismissible"
type="button"
class="btn-close p-2"
data-bs-dismiss="alert"
aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 23.7 23.7"
xml:space="preserve">
<path
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
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
.46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
</svg>
</button>
<div class="alert-icon-container">
<button
v-if="isCollapsible"
class="btn-collapse"
type="button"
@click="toggleCollapse">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="9"
viewBox="0 0 15 9"
class="btn-collapse-icon"
:class="{ 'rotated': !collapsed }">
<path
fill-rule="nonzero"
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
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
0 0 0 7.5 0" />
</svg>
</button>
<button
v-if="isDismissible"
type="button"
class="btn-close p-2"
data-bs-dismiss="alert"
aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 23.7 23.7"
xml:space="preserve">
<path
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
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
.46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
</svg>
</button>
</div>
</div>
<div
v-show="alertCopy"