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 {