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 @@ Safelite logo
- - - - +