diff --git a/src/digital-components/base-input-button/base-input-button.vue b/src/digital-components/base-input-button/base-input-button.vue index 8768bb8c..0c92db50 100644 --- a/src/digital-components/base-input-button/base-input-button.vue +++ b/src/digital-components/base-input-button/base-input-button.vue @@ -121,9 +121,7 @@ export default { return this.isMultiSelect ? "checkbox" : "radio"; }, buttonId() { - return `${this.groupName?.replace(" ", "-")}-${this.value - ?.toString() - ?.replace(" ", "-")}`; + return `${this.groupName}-${this.value}`.replaceAll(" ", "-"); }, isValueSelectedOnClick() { return this.isMultiSelect || this.selectingInitiatesLoad; diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 5679e96c..55033df7 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -31,7 +31,7 @@
+ :key="answer.value ?? answer">
- @@ -81,7 +73,7 @@ import serviceZipModalQuestion from '@/layouts/service-location/service-zip-moda defineRule("selection-required", required(errorMessages.OPTION_REQUIRED)); export default { name: "service-location", - mixins: [baseFormMixin, baseMixin], + mixins: [baseFormMixin], async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index 5e3493a3..380645bb 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -12,6 +12,7 @@ -
+
+ justification="left" + issContainingPage="service-packages" + />
- - -

- +

+ :isForwardActionDisabled="!meta.valid" + @back-clicked="backButtonAction" + @ForwardClicked="forwardButtonAction" />
@@ -33,155 +30,155 @@ - - + + + \ No newline at end of file + diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue index ee7d74df..f2ebe6d0 100644 --- a/src/layouts/vehicle-lookup/vehicle-lookup.vue +++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue @@ -11,7 +11,7 @@ - + diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index e8f662ef..88802069 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -12,7 +12,7 @@ :isWide="true" altText="" isRequired - :groupName="`${glassLocation}-${glassName}`" + :groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}`)" :validationRules="tintValidationRules">
@@ -27,7 +27,7 @@ :loaderEnabled="false" isRequired isSmallQuestionText - :groupName="`${glassLocation}-${glassName}-${selectedTint}`" + :groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}-${selectedTint}`)" :validationRules="partValidationRules" />
@@ -210,6 +210,10 @@ export default { } }); }, + + replaceAllSpaceWithDash(str) { + return String(str).replaceAll(" ", "-"); + }, }, watch: { selectedTint() { diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 7bd3241c..e88c5c6d 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -38,6 +38,7 @@ :alreadyPopulatedPartsData="alreadyPopulatedPartsData" /> + { + type: inputType + }); - + + .form-check-input { + border: 1px solid $gray-500; + border-radius: 50%; + margin-right: 0.5rem; + + &:checked { + background-color: $white; + background-size: 71%; + background-position: center; + border: 1px solid $blue; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e"); + + label { + p { + font-weight: 500; + font-size: .875rem; + color: $black; + } + } + } + &:focus { + box-shadow: 0 0 0 2.5px $blue; + } + + &, & + label { + margin-top: 0; + position: absolute; + top: 50%; + transform: translateY(-50%); + } + } + + &:hover { + .form-check-input { + box-shadow: 0 0 0 4px $blue-300; + } + } + p { + font-weight: 400; + font-size: .875rem; + color: $gray-600; + } +} +