+
@@ -118,7 +128,6 @@
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
-import { required } from '@/helpers/validation-rules';
import errorMessages from '@/constants/error-messages';
import { useMainStore } from '@/store';
import {
@@ -237,6 +246,7 @@ export default {
mobileZipCode: '',
mobileZipError: '',
showMobileOption: false,
+ militaryBaseWarningExpanded: false,
RECAL_MODAL_REF_NAME,
SITE_FOOTER_REF_NAME,
errorMessages
@@ -277,9 +287,6 @@ export default {
|| this.selectedAppointmentType === 'Dropoff'
);
},
- isAppointmentTypeDisplayed() {
- return this.zipCode && !this.displayNoShopsAlert && this.showMobileOption;
- },
isMobile() {
return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
},
@@ -328,6 +335,15 @@ export default {
mobileZipPlaceholder() {
return this.getCmsContent('MobileZipPlaceHolderWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
},
+ militaryBaseWarningLinkText() {
+ return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.HEADLINE_TEXT);
+ },
+ militaryBaseWarningText() {
+ return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
+ },
+ appointmentQuestionText() {
+ return this.getCmsContent('AppointmentTypeQuestionWidget', widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
+ }
},
methods: {
arePagePrerequisitesValid() {
@@ -424,6 +440,9 @@ export default {
if (serviceabilityDetails) {
this.setServiceabilityDetails(serviceabilityDetails);
this.showMobileOption = this.isServiceableMobile;
+ if (!this.showMobileOption) {
+ this.selectedAppointmentType = AppointmentTypeStrings.IN_SHOP;
+ }
}
if (mobileFeePart) {
@@ -564,10 +583,30 @@ $page-side-padding: 1.5rem;
.form-test-error {
font-weight: $font-weight-bold;
}
+ .appointment-type-question-text {
+ color: $black;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ font-size: 1rem;
+ line-height: 1.625rem;
+ }
.mobile-service-zip-question {
:deep(.form-test-error span) {
font-weight: $font-weight-bold;
}
}
+ .expandable-link-container {
+ margin-bottom: 1rem;
+ }
+ .expandable-link {
+ font-style: italic;
+ font-weight: $font-weight-bold;
+ text-decoration: none;
+ color: $heritage-blue-primary;
+ line-height: 1.375rem;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
}
diff --git a/src/layouts/service-location/shop-address/shop-address.vue b/src/layouts/service-location/shop-address/shop-address.vue
index 88fb545d..cf7239f6 100644
--- a/src/layouts/service-location/shop-address/shop-address.vue
+++ b/src/layouts/service-location/shop-address/shop-address.vue
@@ -3,7 +3,6 @@
name="fade"
mode="out-in">
@@ -122,7 +121,6 @@ export default {
serviceZipcode: String,
cmsWidgetName: String,
validationRules: String,
- isDisplayed: Boolean,
modalWidgetName: String,
selectedAppointmentType: String,
},
@@ -229,11 +227,6 @@ export default {
},
async searchRadiusInMiles() {
await this.updateShops();
- },
- nearbyShops(newShops) {
- if (!newShops.find(shop => shop.providerNumber === this.internalProviderNumber)) {
- this.internalProviderNumber = '';
- }
}
},
methods: {
@@ -250,6 +243,10 @@ export default {
this.errorMessage = errorMessages.ZIP_CODE_NOT_SERVICED_FOR_VEHICLE;
}
else {
+ if (!result.find(shop => shop.providerNumber === this.internalProviderNumber)) {
+ this.internalProviderNumber = '';
+ await this.$nextTick();
+ }
this.nearbyShops = result;
this.searchRadiusInMiles = this.searchRadiusArray[currentSearchIndex].Name;
}
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index b571d788..e8ef6a64 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -210,6 +210,9 @@ $alert-bg-scale: -90%;
$alert-border-scale: -100%;
$alert-color-scale: 40%;
+$alert-yellow-bg: #fef6e8;
+$alert-yellow-color: #e86421;
+
//Modal animation
// This affects all [Bootstrap] modals
$modal-fade-transform: translate(0, 100%);
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index ef633fdc..faaa01b5 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -1,64 +1,84 @@
-
- {{ alertHeadline }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -74,6 +94,7 @@ import {
import applicationConfig from '@/constants/application-config';
import textBlock from '@/digital-components/text-block/text-block.vue';
import textLink from '@/ux-components/text-link/text-link.vue';
+import { Collapse } from 'bootstrap';
export default {
// eslint-disable-next-line vue/multi-word-component-names
@@ -84,13 +105,14 @@ export default {
},
props: {
isDismissible: Boolean,
+ isCollapsible: Boolean,
/*
- alertClass class names:
- alert-success (green)
- alert-danger (red)
- alert-warning (yellow)
- alert-info (blue)
- */
+ alertClass class names:
+ alert-success (green)
+ alert-danger (red)
+ alert-warning (yellow)
+ alert-info (blue)
+ */
alertClass: String,
cmsWidgetName: {
type: String,
@@ -106,7 +128,14 @@ export default {
shouldScrollToOnMount: {
type: Boolean,
default: true
- }
+ },
+ startCollapsed: Boolean
+ },
+ data() {
+ return {
+ collapsed: this.startCollapsed || false,
+ collapseElement: null,
+ };
},
computed: {
pageQueryString() {
@@ -124,10 +153,17 @@ export default {
},
splitAlertCopyForParagraphTag() {
return splitCMSCopyOnParagraphTag(this.alertCopy);
- }
+ },
+ collapseId() {
+ return this.isCollapsible
+ ? `${this.cmsWidgetName}-collapse`
+ : null;
+ },
},
mounted() {
this.ensureAlertIsInViewPort();
+ this.collapseElement = Collapse.getOrCreateInstance(document.getElementById(this.collapseId));
+
},
methods: {
doesCopyContainRouterLink,
@@ -152,37 +188,81 @@ export default {
<= (window.innerHeight - footerHeight
|| document.documentElement.clientHeight - footerHeight)
);
- }
+ },
+ toggleCollapse() {
+ this.collapsed = !this.collapsed;
+ if (this.collapsed) {
+ this.collapseElement.hide();
+ } else {
+ this.collapseElement.show();
+ }
+ },
}
};