diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css index da2f3ef22..d46039051 100644 --- a/public/css/hop-styling.css +++ b/public/css/hop-styling.css @@ -53,6 +53,7 @@ body select { background-color: #fff; font-family: Urbanist, Arial, Helvetica, sans-serif; font-weight: 400; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); } body input:focus, body input:focus-visible, body select:focus, diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss index d3afaf985..9f6711f1c 100644 --- a/public/scss/hop-styling.scss +++ b/public/scss/hop-styling.scss @@ -63,6 +63,7 @@ body { background-color: #fff; font-family: Urbanist, Arial, Helvetica, sans-serif; font-weight: 400; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); &:focus, &:focus-visible { box-shadow: 0 0 0 2.5px #1574a1; diff --git a/src/constants/damage-locations-selected.js b/src/constants/damage-locations-selected.js index 7ede615cb..848491223 100644 --- a/src/constants/damage-locations-selected.js +++ b/src/constants/damage-locations-selected.js @@ -16,6 +16,8 @@ const damageLocationsSelected = { PASSENGERSIDE: "PassengerSide", STATIONARY: "Stationary", SLIDER: "Slider", + DOOR: "Door", + GLASS: "Glass", }; export { damageLocationsSelected }; diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 84ea8542b..9167c03b3 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -268,6 +268,9 @@ export default { button { margin: 0; border-radius: 50rem; + &.btn-secondary { + font-weight: 600; + } } } } diff --git a/src/experiment-components/service-package-radio-for-afterpay.vue b/src/experiment-components/service-package-radio-for-afterpay.vue index 7a3a42278..2e746e4f2 100644 --- a/src/experiment-components/service-package-radio-for-afterpay.vue +++ b/src/experiment-components/service-package-radio-for-afterpay.vue @@ -214,6 +214,47 @@ export default { &.is-insurance { padding-bottom: 3rem; + + @include media-breakpoint-down(md) { + padding-bottom: 0.75rem; + .pricing-info { + top: 0.75rem; + right: 0.75rem; + bottom: auto; + left: auto; + width: auto; + margin: 0; + text-align: end; + max-width: 60%; + } + + @media (max-width: 320px) { + min-height: 80px; + max-height: 120px; + + .pricing-info { + top: 2.1rem; + right: auto; + left: 2.3rem; + bottom: auto; + position: absolute; + width: calc(100% - 2.5rem); + text-align: left; + max-width: none; + } + } + + &.has-subheader { + @media (max-width: 320px) { + min-height: 100px; + max-height: 160px; + + .pricing-info { + top: 3.9rem; + } + } + } + } } &.has-subheader { diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue index 6f42172ab..b2183fa95 100644 --- a/src/fmg-components/funnel-header/funnel-header.vue +++ b/src/fmg-components/funnel-header/funnel-header.vue @@ -109,6 +109,15 @@ export default { } this.globalAlertMessages.push(alertToPush); }, + removeGlobalAlert(alertId) { + const alertIndex = this.globalAlertMessages.findIndex((alert) => alert.id === alertId); + if (alertIndex !== -1) { + this.globalAlertMessages.splice(alertIndex, 1); + } + }, + getGlobalAlerts() { + return this.globalAlertMessages; + }, webchatClicked(event) { event.preventDefault(); this.launchWebchat(); diff --git a/src/helpers/damage-helper.js b/src/helpers/damage-helper.js index 13defa5df..1763ffbea 100644 --- a/src/helpers/damage-helper.js +++ b/src/helpers/damage-helper.js @@ -82,3 +82,56 @@ export async function isGlassAvailableForCarId(carId, pageNameToLog) { return true; } + +export function getSideDoorGlassString(glassLocation, glassName) { + let glassNameString; + switch (glassName) { + case glassLocations.BACK: + glassNameString = glassLocations.REAR + " " + glassLocations.DOOR; // "Back Door" + break; + case glassLocations.FRONT: + glassNameString = glassName + " " + glassLocations.DOOR; // "Front Door" + break; + case glassLocations.VENT: + case glassLocations.QUARTER: + glassNameString = glassName; + break; + } + return glassLocation + " " + glassName + " " + glassLocations.GLASS; +} + +export function getDamageInfoWordingText(damageInfo) { + const glassTextArray = []; + + damageInfo.glassToReplace.forEach((item) => { + let string = ""; + if (item.glassLocation === glassLocations.WINDSHIELD) { + string = item.glassLocation; + } + if (item.glassLocation === glassLocations.REAR) { + string = glassLocations.BACK + " " + glassLocations.GLASS; + } + if (item.glassLocation === glassLocations.DRIVER) { + string = getSideDoorGlassString(item.glassLocation, item.glassName); + // ONLY INCLUDE "DOOR" IF IT'S REAR or FRONT (vent or quarter should NOT) + } + if (item.glassLocation === glassLocations.PASSENGER) { + string = getSideDoorGlassString(item.glassLocation, item.glassName); + } + glassTextArray.push(string); + }); + + if (glassTextArray.length === 1) { + return glassTextArray[0]; + } + let damageInfoWordingText = glassTextArray.join(", "); // string + let lastCommaIndex = damageInfoWordingText.lastIndexOf(", "); + if (lastCommaIndex > -1) { + return ( + damageInfoWordingText.slice(0, lastCommaIndex) + + " and " + + damageInfoWordingText.slice(lastCommaIndex + 2, damageInfoWordingText.length) + ); + } + return ""; +} diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue index 75ca29ddf..68dbe3426 100644 --- a/src/layouts/estimate/estimate.vue +++ b/src/layouts/estimate/estimate.vue @@ -286,5 +286,6 @@ export default { .select-option { font-family: UrbanistSemibold, Arial, Helvetica, sans-serif; font-weight: 600; + color: $black; } diff --git a/src/layouts/mobile-details/mobile-details.vue b/src/layouts/mobile-details/mobile-details.vue index bd41dd86c..1c1a48249 100644 --- a/src/layouts/mobile-details/mobile-details.vue +++ b/src/layouts/mobile-details/mobile-details.vue @@ -240,4 +240,7 @@ export default { color: $gray-600; font-family: UrbanistRegular; } +:deep(.caption) { + font-size: 0.875rem; +} diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 00a06fd70..eb75cf207 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -223,7 +223,8 @@ export default { "payment-method" ); - const reviewDropdownPromise = reviewDropdown.methods.loadInitialData(); + // const reviewDropdownPromise = reviewDropdown.methods.loadInitialData(); + // (removed temporarily for Heritage parity effort) const promiseResultMap = [ { @@ -238,10 +239,11 @@ export default { resultKey: "rainDefense", promise: rainDefensePromise, }, - { - resultKey: "reviewDropdownData", - promise: reviewDropdownPromise, - }, + // { + // resultKey: "reviewDropdownData", + // promise: reviewDropdownPromise, + // }, + // (removed temporarily for Heritage parity effort) ]; const resultMap = await settleAllPromises(promiseResultMap); @@ -346,7 +348,8 @@ export default { ); vm.updateFooterButtonText(vm.customCtaCopy); - vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData); + // vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData); + // (removed temporarily for Heritage parity effort) if (revalidatePromoResponse) { const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse( @@ -847,6 +850,18 @@ export default { (newPromo) => !oldPromoCodes.includes(newPromo.promoCode) ); + // Remove any existing promo error alerts for this promo code + const existingAlerts = this.$refs.funnelHeader.getGlobalAlerts(); + if (existingAlerts.length > 0) { + const errorPromoAlertToRemove = existingAlerts.find( + (alert) => + alert.messageHeadline === "Promo code error" && + alert.messageCopy.includes(newlyActivatedPromoCodes[0].promoCode) + ); + errorPromoAlertToRemove && + this.$refs.funnelHeader.removeGlobalAlert(errorPromoAlertToRemove.id); + } + const alert = createPromoSuccessAlert(newlyActivatedPromoCodes[0].promoCode); this.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade); } else if ( @@ -892,6 +907,9 @@ export default { text-transform: lowercase; } } + :deep(.review-table p) { + margin: 0.25rem 0 0 0; + } } .checkbox-group { align-items: start; diff --git a/src/layouts/payment-method/review-dropdown/review-dropdown.vue b/src/layouts/payment-method/review-dropdown/review-dropdown.vue index 9b568d48f..9c7c446f4 100644 --- a/src/layouts/payment-method/review-dropdown/review-dropdown.vue +++ b/src/layouts/payment-method/review-dropdown/review-dropdown.vue @@ -15,30 +15,27 @@
- + cmsWidgetName="AppointmentWidget" + :apptWordingText="apptWordingText" />
- - -
- - - -
- - + :damage="damageInfo" + :vehicle="vehicleInfo" />
+
+ + +