-
-
-
+ class="subheader" />
-
-
+
+ {{ scheduleRecalText }}
+ {{ appointmentQuestionText }}
+
+
+
-
-
+
+
+
+
+
+ {{ mobileZipError }}
+
+
+
@@ -118,44 +138,31 @@
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 {
getPricedMobileFeePart,
getServiceabilityDetails,
- getZipCodeData
+ getZipCodeData,
+ getMobileZipCodeData
} from '@/helpers/service-location-helper';
+import { toTitleCase } from '@/helpers/text-helper.js';
+import { getAvailabilityRating } from '@/helpers/service-location-helper';
// Import Component
import alert from '@/ux-components/alert/alert.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
import appointmentTypeQuestion from '@/layouts/service-location/appointment-type-question/appointment-type-question.vue';
import baseFormMixin from '@/mixins/base-form-mixin';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
-import mobileLocationModalQuestions from '@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue';
import { Form, defineRule } from 'vee-validate';
-import shopQuestion from '@/layouts/service-location/shop-question/shop-question.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import serviceZipModalQuestion from '@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue';
+import shopAddress from '@/layouts/service-location/shop-address/shop-address.vue';
+import serviceZipQuestion from '@/layouts/service-location/service-zip-question/service-zip-question.vue';
+import widgetFields from '@/constants/cms-widget-fields';
-// DEFINE VALIDATION RULES
-defineRule('mobile-location-required', (value) => {
- if (
- value.addressQuestions.streetAddress === ''
- || value.addressQuestions.city === ''
- || value.addressQuestions.state === ''
- || value.addressQuestions.zipCode === ''
- || value.isVehicleProtected == null
- ) {
- return errorMessages.MOBILE_LOCATION_REQUIRED;
- }
- return true;
-});
-defineRule('selection-required', required(errorMessages.OPTION_REQUIRED));
-
-const SHOP_QUESTION_REF_NAME = 'shopQuestion';
const RECAL_MODAL_REF_NAME = 'RecalModal';
const SITE_FOOTER_REF_NAME = 'siteFooter';
@@ -163,16 +170,16 @@ export default {
name: 'service-location',
components: {
alert,
+ textBlock,
appointmentTypeQuestion,
contentGroupModal,
- mobileLocationModalQuestions,
siteFooter,
siteHeader,
siteSubHeader,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
- serviceZipModalQuestion,
- shopQuestion
+ shopAddress,
+ serviceZipQuestion
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
@@ -182,8 +189,8 @@ export default {
const zipCodeData = getZipCodeData(serviceZipCode);
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
- const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode);
const getGlassFeesPromise = useMainStore().getGlassFees();
+ const providersPromise = useMainStore().getProviders(serviceZipCode);
// Settle promises and get results
const promiseResultMap = [
@@ -203,13 +210,13 @@ export default {
resultKey: 'serviceabilityDetails',
promise: serviceabilityDetailsPromise
},
- {
- resultKey: 'shopQuestionInitialData',
- promise: shopQuestionInitialDataPromise
- },
{
resultKey: 'zipCodeData',
promise: zipCodeData
+ },
+ {
+ resultKey: 'providers',
+ promise: providersPromise
}
];
@@ -221,10 +228,9 @@ export default {
resultMap.zipCodeData,
resultMap.serviceabilityDetails,
resultMap.mobileFeePart,
- resultMap.shopQuestionInitialData?.mobileProviderNumber,
- resultMap.glassFees
+ resultMap.glassFees,
+ resultMap.providers
);
- vm.$refs[SHOP_QUESTION_REF_NAME].initializeComponent(resultMap.shopQuestionInitialData);
});
},
setup() {
@@ -238,7 +244,6 @@ export default {
city: this.getServiceCityFromStore(),
state: this.getServiceStateFromStore(),
zipCode: this.getServiceZipCodeFromStore(),
- isVehicleProtected: this.getIsVehicleProtectedFromStore(),
isGlassServiceableInshop: null,
isRecalibrationServiceableInshop: null,
isGlassServiceableMobile: null,
@@ -249,9 +254,13 @@ export default {
mobileProviderNumber: null,
zipContainsMilitaryBase: false,
zipCodeCtu: null,
- SHOP_QUESTION_REF_NAME,
+ mobileZipCode: '',
+ mobileZipError: '',
+ militaryBaseWarningExpanded: false,
+ availabilityRating: null,
RECAL_MODAL_REF_NAME,
- SITE_FOOTER_REF_NAME
+ SITE_FOOTER_REF_NAME,
+ errorMessages
};
},
computed: {
@@ -264,61 +273,6 @@ export default {
answersFromCms() {
return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers');
},
- serviceZipCodeQuestion: {
- get() {
- return {
- state: this.state,
- zipCode: this.zipCode
- };
- },
- set(newValue) {
- if (newValue.zipCode !== this.zipCode) {
- this.resetMobileLocation();
- this.selectedAppointmentType = null;
- this.selectedProvider = null;
- }
-
- this.state = newValue.state;
- this.zipCode = newValue.zipCode;
-
- // eslint-disable-next-line vue/valid-next-tick
- this.$nextTick();
- }
- },
- mobileLocationQuestions: {
- get() {
- return {
- addressQuestions: {
- streetAddress: this.streetAddress,
- streetAddress2: this.streetAddress2,
- city: this.city,
- state: this.state,
- zipCode: this.zipCode
- },
- isVehicleProtected: this.isVehicleProtected
- };
- },
- set(newValue) {
- this.streetAddress = newValue.addressQuestions.streetAddress;
- this.streetAddress2 = newValue.addressQuestions.streetAddress2;
- this.city = newValue.addressQuestions.city;
- this.state = newValue.addressQuestions.state;
- this.zipCode = newValue.addressQuestions.zipCode;
- this.isVehicleProtected = newValue.isVehicleProtected;
-
- if (newValue.zipCode !== this.zipCode) {
- if (
- !(
- this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
- || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
- )
- ) {
- this.selectedAppointmentType = null;
- }
- this.selectedProvider = null;
- }
- }
- },
isServiceableMobile() {
if (this.isRecalibrationServiceableMobile !== null) {
return (
@@ -338,22 +292,14 @@ export default {
return this.isGlassServiceableInshop;
},
- isShopQuestionDisplayed() {
+ isInshop() {
return (
this.selectedAppointmentType === 'Inshop'
|| this.selectedAppointmentType === 'Dropoff'
);
},
- isAppointmentTypeDisplayed() {
- return this.zipCode && !this.displayNoShopsAlert;
- },
- isMobileLocationDisplayed() {
- return (
- this.selectedAppointmentType
- === AppointmentTypeStrings.MOBILE
- || this.selectedAppointmentType
- === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
- );
+ isMobile() {
+ return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
},
requiresInshopRecalibration() {
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
@@ -375,15 +321,17 @@ export default {
displayRecalibrationWarning() {
return this.requiresInshopRecalibration;
},
+ displayLowAvailabilityInshop() {
+ return this.availabilityRating === 'low' && this.isInshop;
+ },
displayServiceableInshopOnly() {
- return (
- !this.displayRecalibrationWarning
- && this.isServiceableInshop
- && !this.isServiceableMobile
- );
+ return !this.isServiceableMobile && this.isServiceableInshop && !this.displayRecalibrationWarning;
},
displayServiceableMobileOnly() {
- return this.isServiceableMobile && !this.isServiceableInshop;
+ return this.isServiceableMobile && this.recalibrationRequired && !this.isServiceableInshop;
+ },
+ displayMobileFeeDisclaimer() {
+ return this.mainStore.isNoComp || this.mainStore.isITAC;
},
navigateBackScenario() {
const { isNoComp, isITAC } = useMainStore();
@@ -393,6 +341,38 @@ export default {
},
isBigTruck() {
return this.mainStore.order.vehicle.isBigTruck;
+ },
+ 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('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
+ },
+ scheduleRecalText() {
+ if(this.requiresInshopRecalibration) {
+ return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
+ } else {
+ return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+ }
+ },
+ inShopOnlyCopy() {
+ let content = this.getCmsContent('AlertInshopOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
+ content = content.replace('{custom:city}', toTitleCase(this.city));
+ return content;
+ },
+ mobileOnlyCopy() {
+ let content = this.getCmsContent('AlertMobileOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
+ content = content.replace('{custom:city}', toTitleCase(this.city));
+ return content;
+ },
+ recalibrationRequired() {
+ return this.mainStore.hasRecalibrationPart;
}
},
methods: {
@@ -401,13 +381,10 @@ export default {
useMainStore().order.serviceLocation.zipCode !== null
);
},
- async reloadShopData(zipCode) {
- await this.$refs[SHOP_QUESTION_REF_NAME].reloadShopData(zipCode);
- },
async forwardButtonAction() {
let provider = this.selectedProvider;
this.mainStore.updateMobileFee(null);
- if (this.isMobileLocationDisplayed) {
+ if (this.isMobile) {
if (this.mainStore.isNoComp || this.mainStore.isITAC) {
this.mainStore.updateMobileFee(this.mobileFeePart);
}
@@ -432,7 +409,6 @@ export default {
zipCode: this.zipCode,
zipCodeCtu: this.zipCodeCtu,
appointmentType: this.selectedAppointmentType,
- isVehicleProtected: this.isVehicleProtected,
provider
});
@@ -466,9 +442,6 @@ export default {
|| useMainStore().order.customer.address.zipCode
);
},
- getIsVehicleProtectedFromStore() {
- return useMainStore().order.serviceLocation.isVehicleProtected;
- },
getSelectedAppointmentType() {
return useMainStore().order.serviceLocation.appointmentType;
},
@@ -482,12 +455,13 @@ export default {
zipCodeData,
serviceabilityDetails,
mobileFeePart,
- mobileProviderNumber,
- glassFees
+ glassFees,
+ providers
) {
if (zipCodeData) {
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
this.zipCodeCtu = zipCodeData.zipCodeCtu;
+ this.city = zipCodeData.city;
}
if (serviceabilityDetails) {
@@ -498,8 +472,24 @@ export default {
this.mobileFeePart = mobileFeePart;
}
- if (mobileProviderNumber) {
- this.setMobileProviderNumber(mobileProviderNumber);
+ if (providers) {
+ this.setMobileProviderNumber(providers.mobileProviderNumber);
+ let foundMatch = false;
+ if(this.selectedProvider && this.selectedProvider.providerNumber) {
+ const matchedProvider = providers.shopProviders.find(
+ (provider) => provider.providerNumber === this.selectedProvider.providerNumber
+ );
+ if (matchedProvider) {
+ foundMatch = true;
+ this.selectedProvider = matchedProvider;
+ }
+ }
+ if(providers.shopProviders.length > 0 && !foundMatch) {
+ this.selectedProvider = providers.shopProviders[0];
+ }
+ else if(providers.shopProviders.length === 0) {
+ this.selectedProvider = null;
+ }
}
if (glassFees) {
@@ -521,13 +511,6 @@ export default {
setMobileProviderNumber(providerNumber) {
this.mobileProviderNumber = providerNumber;
},
- resetMobileLocation() {
- this.streetAddress = '';
- this.streetAddress2 = '';
- this.city = '';
-
- this.isVehicleProtected = null;
- },
setServiceabilityDetails(serviceabilityDetails) {
this.isGlassServiceableInshop =
serviceabilityDetails.isGlassServiceableInshop;
@@ -537,14 +520,94 @@ export default {
serviceabilityDetails.isGlassServiceableMobile;
this.isRecalibrationServiceableMobile =
serviceabilityDetails.isRecalibrationServiceableMobile;
+ if (!this.isServiceableMobile) {
+ this.selectedAppointmentType = AppointmentTypeStrings.IN_SHOP;
+ }
+ },
+ async updateMobileZip() {
+ this.mobileZipError = '';
+
+ const zipCodeData = await getMobileZipCodeData(this.mobileZipCode);
+
+ if (!zipCodeData.isValid) {
+ this.mobileZipError = errorMessages.INVALID_ZIP;
+ } else if (!zipCodeData.isServiceable) {
+ this.mobileZipError = errorMessages.NO_SERVICE_IN_AREA(toTitleCase(zipCodeData.city));
+ } else {
+ this.city = zipCodeData.city;
+ this.zipCode = this.mobileZipCode;
+ this.setCtuForMobile(zipCodeData.zipCodeCtu);
+ this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
+
+ const serviceabilityDetailsPromise = getServiceabilityDetails(this.mobileZipCode);
+ serviceabilityDetailsPromise.then((result) => {
+ const details = result.data;
+ if (details) {
+ this.setServiceabilityDetails(details);
+ }
+ });
+
+ const providersPromise = useMainStore().getProviders(this.mobileZipCode);
+ providersPromise.then((result) => {
+ const providers = result.data;
+ if (providers) {
+ this.setMobileProviderNumber(providers.mobileProviderNumber);
+ if(providers.shopProviders.length > 0) {
+ this.selectedProvider = providers.shopProviders[0];
+ }
+ else {
+ this.selectedProvider = null;
+ }
+ }
+ });
+ }
+ },
+ async handleInShopZipUpdated(newZip) {
+ this.zipCode = newZip;
+ const zipCodeData = await getZipCodeData(this.zipCode);
+ this.city = zipCodeData.city;
+ this.setCtuForMobile(zipCodeData.zipCodeCtu);
+ this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
+
+ const serviceabilityDetailsPromise = getServiceabilityDetails(this.zipCode);
+ serviceabilityDetailsPromise.then((result) => {
+ const details = result.data;
+ if (details) {
+ this.setServiceabilityDetails(details);
+ }
+ });
+ }
+ },
+ watch: {
+ mobileZipCode(newZip) {
+ if(newZip !== '') {
+ this.updateMobileZip();
+ }
+ },
+ selectedAppointmentType() {
+ this.mobileZipCode = '';
+ if(this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && this.selectedProvider) {
+ const startDate = new Date();
+ const endDate = new Date();
+ endDate.setDate(startDate.getDate() + 6);
+ const formattedStartDate = startDate.toISOString().split('T')[0];
+ const formattedEndDate = endDate.toISOString().split('T')[0];
+ getAvailabilityRating(
+ formattedStartDate,
+ formattedEndDate,
+ AppointmentTypeStrings.IN_SHOP,
+ this.selectedProvider ? this.selectedProvider.providerNumber : null
+ ).then((rating) => {
+ this.availabilityRating = rating;
+ });
+ }
}
}
};
-
diff --git a/src/layouts/service-location/shop-address/shop-address.vue b/src/layouts/service-location/shop-address/shop-address.vue
new file mode 100644
index 00000000..02f1c9d5
--- /dev/null
+++ b/src/layouts/service-location/shop-address/shop-address.vue
@@ -0,0 +1,411 @@
+
+
+
+
+
+
+ {{ displayedShopName }}
+ {{ modelValue.distanceInMiles?.toFixed(2) }} mi
+
+
{{ getProviderAddress(modelValue) }}
+
+ {{ getProviderCityZipState(modelValue) }}
+
+
+
+ {{ `No shops found within 100 miles of ${internalZipcode}` }}
+
+
+
+
+
+
+
+
+ {{ serviceZipPrompt }}
+
+
+
+ {{ errorMessage }}
+
+
+
+
+
+
+
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
deleted file mode 100644
index fdbbdd79..00000000
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/store/index.js b/src/store/index.js
index 5fb37e57..05927b17 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1012,14 +1012,13 @@ export const useMainStore = defineStore({
});
},
- getProviders(serviceZipCode) {
+ getProviders(serviceZipCode, shopRadiusInMiles = 100) {
const { carId, isBigTruck } = this.order.vehicle;
const damageType = this.damage.isRepair ? 'Repair' : 'Replace';
const { parentAccountNumber } = this.order;
const partsWithRecal = getTopLevelGlassPartsWithRecal(this.order.lineItems.glassParts);
const windshieldPartWithRecal = partsWithRecal?.length > 0 ? partsWithRecal[0] : null;
const safeliteOnly = true;
- const shopRadiusInMiles = 100;
let url = `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${shopRadiusInMiles}/${parentAccountNumber}/${safeliteOnly}/${carId}`;
if (windshieldPartWithRecal) {
diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss
index cdaf2ebf..a745b5d8 100644
--- a/src/styles/common-typography-styles.scss
+++ b/src/styles/common-typography-styles.scss
@@ -115,21 +115,3 @@ caption,
font-weight: 800;
font-style: normal;
}
-
-@font-face {
- font-family: "Urbanist";
- src:
- url("@/assets/fonts/Urbanist-MediumItalic.woff2") format("woff2"),
- url("@/assets/fonts/Urbanist-MediumItalic.woff") format("woff");
- font-weight: 500;
- font-style: italic;
-}
-
-@font-face {
- font-family: "Urbanist";
- src:
- url("@/assets/fonts/Urbanist-BoldItalic.woff2") format("woff2"),
- url("@/assets/fonts/Urbanist-BoldItalic.woff") format("woff");
- font-weight: 700;
- font-style: italic;
-}
\ No newline at end of file
diff --git a/src/styles/common-validation-styles.scss b/src/styles/common-validation-styles.scss
index 02a7b48b..c6cdb6f3 100644
--- a/src/styles/common-validation-styles.scss
+++ b/src/styles/common-validation-styles.scss
@@ -14,17 +14,17 @@ html {
border-radius: 60px;
.button-content {
- border: none;
- }
-
- &:hover {
- @include box-shadow-hover($red-200);
- z-index: 5;
+ border: 1px solid $red;
}
input[type="radio"]:focus+.list-button-content {
box-shadow: 0 0 0 2.5px $red;
}
+ &:not(.selected):not(.no-hover):hover {
+ position: relative;
+ @include box-shadow-hover($red-200);
+ z-index: 5;
+ }
}
&.list-card {
diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss
index 1179dd6b..6884babd 100644
--- a/src/styles/shared-input-button-styles.scss
+++ b/src/styles/shared-input-button-styles.scss
@@ -1,7 +1,9 @@
.base-input-button {
- &:not(.has-error):hover {
+ &:not(.disabled) {
cursor: pointer;
+ }
+ &:not(.has-error):hover {
&.list-button,
&.list-button-horizontal,
&.list-card {
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 7d999430..6cafe857 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -70,8 +70,13 @@ $orange: #fd7e14;
$teal: #20c997;
$cyan: #0dcaf0;
+//Heritage
+$heritage-blue-primary: #0070D1;
+$heritage-blue-secondary: #167cac;
+
// Darker gray
$darker-gray: #525656;
+$lighter-gray: #9aa1a3;
// scss-docs-start colors-map
$colors: (
@@ -153,6 +158,7 @@ $font-weight-bolder: bolder;
$border-radius: 0.25rem;
$border-radius-sm: 0.2rem;
$border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of course.
+$border-radius-xl: 1.375rem;
$border-radius-pill: 50rem;
$border-radius-list-button: 1.375rem; // Used for list buttons
@@ -205,6 +211,11 @@ $alert-bg-scale: -90%;
$alert-border-scale: -100%;
$alert-color-scale: 40%;
+$alert-yellow-bg: #fef6e8;
+$alert-yellow-color: #e86421;
+$alert-red-bg: #fbe9e8;
+$alert-red-color: $red;
+
//Modal animation
// This affects all [Bootstrap] modals
$modal-fade-transform: translate(0, 100%);
@@ -216,9 +227,5 @@ $enable-important-utilities: false;
// Letter Spacing
$letter-spacing-primary: 0.03em;
// Borders
-$border-input: 1px solid rgba(179, 180, 181);
-$border-input-focus: 2.5px solid $blue;
-
-//Heritage
-$heritage-blue-primary: #0070D1;
-$heritage-blue-secondary: #167cac;
\ No newline at end of file
+$border-input: 1px solid $gray-350;
+$border-input-focus: 2.5px solid $heritage-blue-primary;
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index ef633fdc..00b3e91f 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -1,64 +1,85 @@
-
- {{ alertHeadline }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -74,6 +95,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 +106,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 +129,14 @@ export default {
shouldScrollToOnMount: {
type: Boolean,
default: true
- }
+ },
+ startCollapsed: Boolean
+ },
+ data() {
+ return {
+ collapsed: this.startCollapsed || false,
+ collapseElement: null,
+ };
},
computed: {
pageQueryString() {
@@ -124,10 +154,18 @@ export default {
},
splitAlertCopyForParagraphTag() {
return splitCMSCopyOnParagraphTag(this.alertCopy);
- }
+ },
+ collapseId() {
+ return this.isCollapsible
+ ? `${this.cmsWidgetName}-collapse`
+ : null;
+ },
},
mounted() {
this.ensureAlertIsInViewPort();
+ if (this.isCollapsible) {
+ this.collapseElement = Collapse.getOrCreateInstance(document.getElementById(this.collapseId));
+ }
},
methods: {
doesCopyContainRouterLink,
@@ -152,37 +190,82 @@ export default {
<= (window.innerHeight - footerHeight
|| document.documentElement.clientHeight - footerHeight)
);
- }
+ },
+ toggleCollapse() {
+ this.collapsed = !this.collapsed;
+ if (this.collapsed) {
+ this.collapseElement.hide();
+ } else {
+ this.collapseElement.show();
+ }
+ },
}
};
diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js
index e0c8a993..c6825826 100644
--- a/src/ux-components/button-main/button-main.spec.js
+++ b/src/ux-components/button-main/button-main.spec.js
@@ -1,7 +1,7 @@
import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import buttonMain from '@/ux-components/button-main/button-main.vue';
-import buttonVariants from '@/constants/button-variants';
+import { buttonVariants } from '@/constants/component-variants';
import buttonSizes from '@/constants/button-sizes';
/** @ignore */
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index cf5f03e7..39307070 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -9,7 +9,7 @@