diff --git a/public/css/site-2020Styling.css b/public/css/site-2020Styling.css index d42d3a81d..07d331589 100644 --- a/public/css/site-2020Styling.css +++ b/public/css/site-2020Styling.css @@ -87,6 +87,20 @@ display: none; } +.buy-backdrop { + background-color: rgba(0, 0, 0, 0.3) !important; +} +.buy-backdrop #afterpay__iframe-checkout-container { + width: 100%; +} +.buy-backdrop #afterpay__iframe-checkout-container .style_closeWrapper__lIHJe { + display: none; +} + +.buy-container-closer { + display: none; +} + @keyframes rotate { 0% { transform: rotate(0); diff --git a/public/scss/site-2020Styling.scss b/public/scss/site-2020Styling.scss index fd716f6ee..3cd0839bc 100644 --- a/public/scss/site-2020Styling.scss +++ b/public/scss/site-2020Styling.scss @@ -90,6 +90,24 @@ } } +// AfterPay Styles + +.buy-backdrop { + background-color: rgba(0,0,0,.3)!important; + #afterpay__iframe-checkout-container { + width: 100%; + .style_closeWrapper__lIHJe { + display: none; + } + } +} + +.buy-container-closer { + display: none; +} + +// Modal Spinner + @keyframes rotate { 0% { transform: rotate(0)} 100% { transform: rotate(360deg)} diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index e34e9a4c4..461c94a59 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -1,5 +1,5 @@ @@ -102,6 +107,7 @@ // Components import textLink from "@/ux-components/text-link/text-link"; import textBlock from "@/digital-components/text-block/text-block"; +import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal"; // Mixins import baseMixin from "@/mixins/base-mixin.js"; @@ -122,6 +128,8 @@ export default { damage: Object, servicePackageOptionsCmsName: String, availableVaps: Object, + allowItemRemoval: Boolean, + recyclingModalCmsWidgetName: String, }, data() { return { @@ -135,6 +143,9 @@ export default { }; }, methods: { + openModal(modalName) { + this.$refs[modalName].openModal(); + }, toggleClass: function (event) { this.isActive = !this.isActive; }, @@ -678,6 +689,7 @@ export default { components: { textBlock, textLink, + contentGroupModal, }, }; @@ -688,6 +700,12 @@ export default { border-bottom: 1px solid $gray-500; color: $black; } + .modal-body { + h5 { + text-align: center; + border-bottom: none; + } + } .border-bottom { color: $gray; } @@ -730,6 +748,9 @@ export default { justify-content: flex-end; } } + a { + font-size: 0.875rem; + } } .package-type, .service-type { @@ -761,6 +782,7 @@ export default { } a { order: 3; + margin-right: 100%; } } } @@ -789,4 +811,12 @@ export default { } } } +.payment-method-question { + .question-text { + margin: 1rem 0 0.5rem 0; + } + span { + line-height: 24px; + } +} diff --git a/src/helpers/promotions-helper.js b/src/helpers/promotions-helper.js index a5d94789b..1689d9550 100644 --- a/src/helpers/promotions-helper.js +++ b/src/helpers/promotions-helper.js @@ -1,6 +1,7 @@ import store from "@/store"; import { storeActions } from "@/constants/store-actions"; import { partTypeStrings } from "@/constants/part-type-strings"; +import { deepClone } from "@/helpers/object-helper"; import baseMixin from "@/mixins/base-mixin.js"; export const promoPartNumberStrings = { @@ -126,6 +127,31 @@ export function getPromosThatMatchLineItemsOnOrder(promos, lineItemsOnOrder) { return matchingPromos; } +// Returns the vaps that the provided requires to be on the order to satisfy +// Items that are already in will not be returned +export function getVapsThatNeedToBeAddedToSatisfyPromos( + promos, + availableLineItems, + lineItemsOnOrder +) { + const clonedVaps = deepClone(lineItemsOnOrder.vaps ?? []); + const promosWithAddableVaps = getPromosWithAddableVaps(promos); + if (promosWithAddableVaps.length) { + const matchingLineItems = getLineItemsThatMatchPromos( + promosWithAddableVaps, + availableLineItems + ); + // Check if matching items are already in the order + const idsOfVapsAlreadyInOrder = clonedVaps.map((lineItem) => lineItem.id); + const vapsToAddToCart = matchingLineItems.filter( + (lineItem) => !idsOfVapsAlreadyInOrder.includes(lineItem.id) + ); + return vapsToAddToCart; + } else { + return []; + } +} + export function shouldStripPromoQueryString(fmgPageQueryValue) { return pagesToStripPromoQueryStringFrom.includes(fmgPageQueryValue); } diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue index 177e0ff93..94a7054e7 100644 --- a/src/layouts/confirmation/confirmation.vue +++ b/src/layouts/confirmation/confirmation.vue @@ -14,6 +14,7 @@
@@ -205,6 +206,9 @@ export default { return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`; } }, + vehicleBannerImageUrl() { + return store.getters.submittedOrder?.vehicle.imageUrl; + }, }, methods: { arePagePrerequisitesValid() { @@ -238,7 +242,11 @@ export default { const schedule = store.getters.order.schedule; const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime); - return serviceLocationReqs && scheduleReqs; + // Customer + const customer = store.getters.order.customer; + const customerReqs = !!customer.emailAddress; + + return serviceLocationReqs && scheduleReqs && customerReqs; }, forwardButtonAction() { window.location.assign("//www.safelite.com/"); diff --git a/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue index 3eaf6a42e..9d138d95a 100644 --- a/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue +++ b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue @@ -97,7 +97,11 @@ export default { this.$refs[modalName].closeModal(); }, addRainDefenseToCart(modalName, part) { - this.currentCartItems.vaps.push(part); + // Clone vaps array, then replace this.currentCartItems.vaps with it at the end + // in order to successfully trigger parent's watcher + const clonedVaps = this.currentCartItems.vaps.slice(0); + clonedVaps.push(part); + this.currentCartItems.vaps = clonedVaps; this.closeModal(modalName); const message = this.getRainDefenseAddedMessage(); this.$emit("added-to-cart", { @@ -133,19 +137,23 @@ export default { this.selectedWipers = ["REAR"]; } } + // Clone vaps array, then replace this.currentCartItems.vaps with it at the end + // in order to successfully trigger parent's watcher + const clonedVaps = this.currentCartItems.vaps.slice(0); itemsForCart.forEach((type) => { if (type === wipersOfferedStrings.FRONT) { part.frontWiperLineItems.forEach((part) => { - this.currentCartItems.vaps.push(part); + clonedVaps.push(part); }); } if (type === wipersOfferedStrings.REAR) { part.rearWiperLineItems.forEach((part) => { - this.currentCartItems.vaps.push(part); + clonedVaps.push(part); }); } }); + this.currentCartItems.vaps = clonedVaps; this.closeModal(modalName); diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue index 1544cede7..b960f60f5 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-question.vue +++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue @@ -77,6 +77,7 @@ export default { .payment-method-question { .question-text span { text-align: left; + line-height: 24px; } } diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index a7313ddc7..b2539301d 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -1,7 +1,7 @@