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/constants/cart-item-types.js b/src/constants/cart-item-types.js
index 7db2ac312..546a3b6e7 100644
--- a/src/constants/cart-item-types.js
+++ b/src/constants/cart-item-types.js
@@ -5,6 +5,7 @@ const cartItemTypes = {
GLASS_PARTS: "GLASS PARTS",
RAIN_DEFENSE: "RAIN DEFENSE",
RECYCLE_FEE: "RECYCLE FEE",
+ REPLACE_FEE: "REPLACE FEE",
MOBILE_FEE: "MOBILE FEE",
PROMOS: "PROMOS",
EARLY_BIRD: "EARLY BIRD",
diff --git a/src/constants/part-type-strings.js b/src/constants/part-type-strings.js
index fd1f4e781..aa56d1ed2 100644
--- a/src/constants/part-type-strings.js
+++ b/src/constants/part-type-strings.js
@@ -3,6 +3,7 @@ const partTypeStrings = {
REAR_WIPER: "REAR WIPER",
RAIN_DEFENSE: "RAIN DEFENSE",
RECALIBRATION: "RECALIBRATION",
+ REPLACE_FEE: "REPLACE FEE",
RECYCLE_FEE: "RECYCLE FEE",
MOBILE_FEE: "MOBILE FEE",
REPAIR_FEE: "REPAIR FEE",
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index 1861ac2c1..daa65d2cf 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -86,8 +86,7 @@ const storeActions = {
SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING:
"saveSupportingItemsSuppressingStateResetting",
SAVE_VAPS: "saveVaps",
- SAVE_PROMOS: "savePromos",
- SAVE_INACTIVE_PROMOS: "saveInactivePromos",
+ SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS: "saveActiveAndOrInactivePromos",
SAVE_CUSTOMER_DETAILS: "saveCustomerDetails",
SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
SAVE_CCTOKEN: "saveCCToken",
diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index 4f1d4e395..7a0d19c03 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -54,6 +54,7 @@ const storeMutations = {
UPDATE_PIA_TYPE: "updatePiaType",
WORK_ORDER_NUMBER: "updateWorkOrderNumber",
Customer_Portal_Login_Token: "updateCustomerPortalLoginToken",
+ LOCK_TOKEN: "updateLockToken",
// EVENT BUS MUTATIONS
ADD_EVENT_TO_BUS: "addEventToBus",
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 22d40eb73..d79ae15df 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -3,25 +3,22 @@
+ :class="[isExpanded ? 'expanded' : '']"
+ @click="toggleIsExpanded()">
{{ amountDueText }}{{ currencyFormatter.format(amountDue) }}
-
+
{{
currencyFormatter.format(packagePrice)
}}
-
+
{{ cartItem.name }}
- {{ cartItem.name }}
+ :key="i"
+ class="non-packaged-cart-item"
+ :class="[
+ i % 2 == 0 ? 'even' : 'odd',
+ cartItem.isRemovable ? 'removable-cart-item' : '',
+ ]">
+ {{ cartItem.name }}
- {{ currencyFormatter.format(cartItem.subTotal) }}
-
-
-
-
- {{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}
+ {{ currencyFormatter.format(cartItem.subTotal) }}
-
- {{ mobileFeeCartItem.name }}{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}
-
-
-
- {{ premiumAppointmentDiscountCartItem.name }}
-
- {{
- currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal)
- }}
-
-
@@ -127,14 +100,13 @@ export default {
modelValue: Object,
damage: Object,
servicePackageOptionsCmsName: String,
- availableLineItems: Object,
+ availableVaps: Object,
allowItemRemoval: Boolean,
recyclingModalCmsWidgetName: String,
},
data() {
return {
- isActive: false,
- packageWithVAPS: false,
+ isExpanded: false,
currencyFormatter: new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
@@ -146,8 +118,8 @@ export default {
openModal(modalName) {
this.$refs[modalName].openModal();
},
- toggleClass: function (event) {
- this.isActive = !this.isActive;
+ toggleIsExpanded() {
+ this.isExpanded = !this.isExpanded;
},
getVapsPrice(packageName) {
const vapsItems = this.getVapsCartItemsForSelectedPackage(packageName);
@@ -200,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 = [];
@@ -244,12 +226,17 @@ export default {
cartItemType: promoLineItem?.partType,
isDisplayed: true,
subTotal:
+
(promoLineItem?.kitPrice ?? 0) +
(promoLineItem?.laborAmount ?? 0) +
(promoLineItem?.sellingPrice ?? 0),
salesTax: promoLineItem?.salesTax,
+
};
+ promoLineItem.cartItemType = cartItem.cartItemType;
+ cartItem.lineItems.push(promoLineItem);
+
cartItems.push(cartItem);
});
@@ -335,14 +322,6 @@ export default {
const nonpackageCartItems = [];
this.cartItems.forEach((cartItem) => {
- if (
- cartItem == this.recycleFeeCartItem ||
- cartItem == this.mobileFeeCartItem ||
- cartItem == this.premiumAppointmentDiscountCartItem
- ) {
- return;
- }
-
if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) {
if (cartItem.isDisplayed) {
nonpackageCartItems.push(cartItem);
@@ -440,6 +419,7 @@ export default {
category: cartItemCategories.VAPS,
cartItemType: cartItemTypes.RAIN_DEFENSE,
isDisplayed: true,
+ isRemovable: true,
subTotal: 0,
salesTax: 0,
lineItems: [],
@@ -468,6 +448,7 @@ export default {
category: cartItemCategories.GLASS_PARTS,
cartItemType: cartItemTypes.GLASS_PARTS,
isDisplayed: false,
+ isRemovable: false,
subTotal:
(lineItem.kitPrice ?? 0) +
(lineItem.laborAmount ?? 0) +
@@ -501,15 +482,16 @@ export default {
let cartItem = null;
const recycleFeeLineItem = this.supportingItems.find(
- (supportingItem) => supportingItem.partNumber == partTypeStrings.RECYCLE_FEE
+ (supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE
);
if (recycleFeeLineItem) {
cartItem = {
name: this.recycleFeeCartItemName,
category: cartItemCategories.SUPPORTING_ITEMS,
- cartItemType: cartItemTypes.RECYCLE_FEE,
+ cartItemType: cartItemTypes.REPLACE_FEE,
isDisplayed: true,
+ isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
@@ -544,6 +526,7 @@ export default {
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.MOBILE_FEE,
isDisplayed: true,
+ isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
@@ -578,6 +561,7 @@ export default {
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.SUPPORTING_ITEMS,
isDisplayed: false,
+ isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
@@ -713,9 +697,6 @@ export default {
display: flex;
justify-content: space-between;
padding: 0.5rem 1.5rem;
- &:nth-child(odd) {
- background-color: #f5f5f5;
- }
&:nth-last-child(-n + 3) {
background-color: #e3f2ea;
}
@@ -724,7 +705,11 @@ export default {
color: #ffffff;
}
}
- .vaps {
+ .service-type {
+ background-color: #f5f5f5;
+ align-items: center;
+ }
+ .packaged-cart-item {
background-color: #f5f5f5;
padding-left: 2.5rem;
align-items: center;
@@ -742,6 +727,28 @@ export default {
font-size: 0.875rem;
}
}
+ .non-packaged-cart-item {
+ &.odd {
+ background: var(--neutrals-gray-100, #f4f4f4);
+ }
+ }
+ .non-packaged-cart-item {
+ &.even {
+ background-color: var(--neutrals-white, #fff);
+ }
+ }
+ // Custom order/wrap for removable nonpackaged Cart Items
+ .removable-cart-item {
+ flex-wrap: wrap;
+ span {
+ display: flex;
+ justify-content: space-between;
+ }
+ a {
+ order: 3;
+ margin-right: 100%;
+ }
+ }
.package-type,
.service-type {
//background-color: #f5f5f5;
@@ -763,18 +770,6 @@ export default {
padding: 0;
}
}
- // Custom order/wrap for nonpackaged Cart Items
- .premium-appt-cart-item {
- flex-wrap: wrap;
- span {
- display: flex;
- justify-content: space-between;
- }
- a {
- order: 3;
- margin-right: 100%;
- }
- }
}
.vin-toggle {
&:after {
@@ -791,10 +786,10 @@ export default {
margin: 1rem 0 1rem 1rem;
cursor: pointer;
}
- &.active:after {
+ &.expanded:after {
transform: rotate(180deg);
}
- &.active + .price-table {
+ &.expanded + .price-table {
max-height: 650px;
transition: all 350ms ease-in;
overflow: hidden;
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index d9c598bb4..26a9652d4 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -5,18 +5,18 @@
-
-
-
-
+
+
+
+
+