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.spec.js b/src/fmg-components/cart/cart.spec.js index ae84083e6..bd0a2b096 100644 --- a/src/fmg-components/cart/cart.spec.js +++ b/src/fmg-components/cart/cart.spec.js @@ -37,13 +37,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); @@ -89,13 +89,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); @@ -132,13 +132,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); @@ -189,13 +189,13 @@ describe("cart.vue", () => { // promos: [], // }; - // const availableLineItems = []; + // const availableVaps = []; // // Act // const { wrapper } = setupMocks({ // props: { // modelValue: lineItems, - // availableLineItems: availableLineItems, + // availableVaps: availableVaps, // }, // }); @@ -234,13 +234,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); @@ -277,13 +277,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); @@ -321,13 +321,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index f0cca4990..ca44600c3 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -100,7 +100,7 @@ export default { modelValue: Object, damage: Object, servicePackageOptionsCmsName: String, - availableLineItems: Object, + availableVaps: Object, allowItemRemoval: Boolean, recyclingModalCmsWidgetName: String, }, @@ -172,6 +172,16 @@ export default { }, }, computed: { + availableLineItems() { + if (!this.lineItems || this.lineItems.length < 1) { + return []; + } + return [ + ...this.lineItems.glassParts, + ...this.lineItems.supportingItems, + ...this.availableVaps, + ]; + }, cartItems: { get: function () { let cartItems = []; diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue index 1cd2fa4fb..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() { 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 b4fa7a3b0..c822fa318 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 @@ -76,13 +76,12 @@ export default { name: "add-vaps-modal-buttons", props: { vapsTilesCmsName: String, - availableLineItems: Object, + availableVaps: Object, modelValue: Object, }, data() { return { addVapsButton: addVapsButton, - wipersOffered: null, isModalOpened: false, selectedWipers: this.getSelectedWipers(), }; @@ -206,7 +205,7 @@ export default { return modelValue; }, rainDefenseModal() { - const lineItem = this.availableLineItems.find((item) => { + const lineItem = this.availableVaps.find((item) => { return item.partType === partTypeStrings.RAIN_DEFENSE; }); if (lineItem) @@ -217,10 +216,10 @@ export default { }, wipersModal() { // create a single wiper item for modal - const frontWiperLineItems = this.availableLineItems.filter((item) => { + const frontWiperLineItems = this.availableVaps.filter((item) => { return item.partType.includes(partTypeStrings.FRONT_WIPER); }); - const rearWiperLineItems = this.availableLineItems.filter((item) => { + const rearWiperLineItems = this.availableVaps.filter((item) => { return item.partType.includes(partTypeStrings.REAR_WIPER); }); let wipersModal; @@ -249,20 +248,38 @@ export default { answersCmsData() { return this.getCmsContent(this.vapsTilesCmsName, "Answers"); }, + rainDefenseInCart() { + return this.currentCartItems.vaps?.some((vap) => { + return vap?.partType === partTypeStrings.RAIN_DEFENSE; + }); + }, + frontWipersInCart() { + return this.currentCartItems.vaps?.some((vap) => { + return vap?.partType?.includes(partTypeStrings.FRONT_WIPER); + }); + }, + rearWipersInCart() { + return this.currentCartItems.vaps?.some((vap) => { + return vap?.partType?.includes(partTypeStrings.REAR_WIPER); + }); + }, + wipersOffered() { + let result; + if (!this.frontWipersInCart) { + if (!this.rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) { + result = wipersOfferedStrings.BOTH; + } else { + result = wipersOfferedStrings.FRONT; + } + } else if (!this.rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) { + result = wipersOfferedStrings.REAR; + } + return result; + }, buttonsToDisplay() { const buttons = []; if (!this.answersCmsData) return buttons; - const rainDefenseInCart = this.currentCartItems.vaps?.some((vap) => { - return vap?.partType === partTypeStrings.RAIN_DEFENSE; - }); - const frontWipersInCart = this.currentCartItems.vaps?.some((vap) => { - return vap?.partType?.includes(partTypeStrings.FRONT_WIPER); - }); - const rearWipersInCart = this.currentCartItems.vaps?.some((vap) => { - return vap?.partType?.includes(partTypeStrings.REAR_WIPER); - }); - const getAnswer = (name, answers) => { const answerIndex = answers.findIndex((answer) => { return answer.Name === name; @@ -270,7 +287,7 @@ export default { return answers[answerIndex]; }; - if (!rainDefenseInCart) { + if (!this.rainDefenseInCart) { // NO RAIN DEFENSE IN CART; SHOW RAIN DEFENSE BUTTON const modalData = getAnswer("RainDefenseModal", this.answersCmsData); modalData.SubText = "+$" + this.rainDefenseModal?.listPrice; @@ -278,27 +295,26 @@ export default { } const modalData = getAnswer("WipersModal", this.answersCmsData); - if (!frontWipersInCart) { - if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) { - // NO REAR WIPERS or FRONT WIPERS IN CART; SHOW COMBO BUTTON - const prices = [ - this.wipersModal?.totalFrontPrice, - this.wipersModal?.totalRearPrice, - ]; - prices.sort((a, b) => a - b); - modalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1]; - this.updateWipersOffered(wipersOfferedStrings.BOTH); - buttons.push(modalData); - } else { - // NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON - modalData.SubText = "+$" + this.wipersModal?.totalFrontPrice; - this.updateWipersOffered(wipersOfferedStrings.FRONT); - buttons.push(modalData); - } - } else if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) { + if (this.wipersOffered === wipersOfferedStrings.BOTH) { + // NO REAR WIPERS or FRONT WIPERS IN CART; SHOW COMBO BUTTON + const prices = [ + this.wipersModal?.totalFrontPrice, + this.wipersModal?.totalRearPrice, + ]; + prices.sort((a, b) => a - b); + modalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1]; + buttons.push(modalData); + } + + if (this.wipersOffered === wipersOfferedStrings.FRONT) { + // NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON + modalData.SubText = "+$" + this.wipersModal?.totalFrontPrice; + buttons.push(modalData); + } + + if (this.wipersOffered === wipersOfferedStrings.REAR) { // NO REAR WIPERS IN CART; SHOW ONLY REAR WIPERS BUTTON modalData.SubText = "+$" + this.wipersModal?.totalRearPrice; - this.updateWipersOffered(wipersOfferedStrings.REAR); buttons.push(modalData); } diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 241bc6394..c8ef38b3e 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -23,7 +23,7 @@ @@ -92,13 +92,14 @@ import { } from "@/helpers/promotions-helper"; import { queryStrings } from "@/constants/query-strings"; import { getQuerystringParameter } from "@/helpers/querystring-helper"; +import { deepClone } from "@/helpers/object-helper"; import { Form } from "vee-validate"; import { defineRule } from "vee-validate"; import { required } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; import { AppointmentTypeStrings } from "@/constants/schedule-constants"; -import { mapTaxedAvailableLineItemsToStoreFormat } from "../../store"; +import { mapTaxedLineItemsToStoreFormat } from "../../store"; defineRule("option-required", required(errorMessages.OPTION_REQUIRED)); @@ -120,12 +121,6 @@ export default { "payment-method" ); - const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging( - storeActions.GET_SUPPORTING_ITEMS, - null, - "payment-method" - ); - const promiseResultMap = [ { resultKey: "cmsContent", @@ -139,29 +134,25 @@ export default { resultKey: "rainDefense", promise: rainDefensePromise, }, - { - resultKey: "supportingItems", - promise: supportingItemsPromise, - }, ]; const resultMap = await settleAllPromises(promiseResultMap); + const lineItemsFromStore = deepClone(store.getters.order.lineItems); + const glassParts = lineItemsFromStore.glassParts ?? []; + const supportingItems = lineItemsFromStore.supportingItems ?? []; - const glassParts = store.getters.order.lineItems.glassParts ?? []; - - let availableLineItems = [ + const lineItemsToTax = [ resultMap.rainDefense, - ...resultMap.supportingItems, + ...supportingItems, ...resultMap.wipers, ...glassParts, ]; + const availableVaps = [resultMap.rainDefense, ...resultMap.wipers]; - const lineItemsFromStore = store.getters.order.lineItems; - - await baseMixin.methods.dispatchStoreActionWithLogging( + const pricedLineItemsToTax = await baseMixin.methods.dispatchStoreActionWithLogging( storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA, { - availableLineItems: availableLineItems, + availableLineItems: lineItemsToTax, }, "payment-method", false @@ -173,16 +164,16 @@ export default { const { validatePromoResponse, revalidatePromoResponse } = await revalidatePromosAndValidateNewPromo( promoCodeFromQueryString, - availableLineItems, + pricedLineItemsToTax, "payment-method" ); const newValidatedPromos = validatePromoResponse?.orderPromos ?? []; - availableLineItems.push(...newValidatedPromos); + pricedLineItemsToTax.push(...newValidatedPromos); // End of promo logic - const taxedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging( + const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging( storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA, { billToAccountNumber: "87291", @@ -191,24 +182,23 @@ export default { serviceLocationCity: store.getters.order.serviceLocation.city, serviceLocationState: store.getters.order.serviceLocation.state, serviceLocationZipCode: store.getters.order.serviceLocation.zipCode, - pricedAvailableLineItems: availableLineItems, + pricedLineItems: pricedLineItemsToTax, }, "payment-method", false ); - // Match all available line items to the line items as they are in the store + // Match all line items to the line items as they are in the store // and rebuild the original structure. - const lineItems = mapTaxedAvailableLineItemsToStoreFormat( - availableLineItems, - lineItemsFromStore - ); + const lineItems = mapTaxedLineItemsToStoreFormat(taxedLineItems, lineItemsFromStore); + const taxedVaps = mapTaxedLineItemsToStoreFormat(taxedLineItems, availableVaps); + // Add items that were not in the store yet but added via query string promo validation lineItems.promos = lineItems.promos ?? []; lineItems.promos.push(...newValidatedPromos); const vapsToAddToCart = getVapsThatNeedToBeAddedToSatisfyPromos( newValidatedPromos, - availableLineItems, + taxedVaps, lineItems ); lineItems.vaps.push(...vapsToAddToCart); @@ -216,16 +206,15 @@ export default { // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); - vm.availableLineItems = taxedAvailableLineItems; + vm.availableVaps = taxedVaps; vm.lineItems = lineItems; - vm.updateFooterButtonText(vm.customCtaCopy); }); }, data() { return { lineItems: [], - availableLineItems: [], + availableVaps: [], paymentMethodInternalModel: this.getPaymentMethodFromStore(), inactivePromos: this.getInactivePromosFromStore(), }; @@ -408,10 +397,11 @@ export default { } }, isPiaDisabled() { - const piaExperience = - this.getSettingValue(experimentSettings.PIA_EXPERIENCE) === "PIA Optional"; + const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE); - return !piaExperience; + const isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required"; + + return !isEnabled; }, paymentMethod() { if (this.isPiaDisabled) { diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue index a6340b5db..fa8d91676 100644 --- a/src/layouts/payment/payment.vue +++ b/src/layouts/payment/payment.vue @@ -21,6 +21,19 @@ scrolling="no">
+ +
+ + + +
+ { vm.setCmsContent(resultMap.cmsContent); vm.fetchSignatureInfo(resultMap.signature); + + vm.availableLineItems = taxedAvailableLineItems; + vm.lineItems = lineItems; }); }, computed: { @@ -276,6 +383,9 @@ export default { switchPaymentText() { return this.getCmsContent("PaymentMethodWidget", "QuestionText"); }, + damageInfo() { + return this.$store.getters.damage; + }, }, methods: { arePagePrerequisitesValid() { @@ -466,6 +576,7 @@ export default { funnelHeader, navbar, loadingModal, + cart, paymentSwitch, }, }; @@ -474,7 +585,7 @@ export default {