From 794150b33de825dc2b648965b7a20388b4bf6b4a Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Tue, 7 Nov 2023 11:22:51 -0500 Subject: [PATCH 1/6] Revamp of non-packaged cart-items to display all of them in the loop instead of making separate cart item markup for fees etc --- src/fmg-components/cart/cart.vue | 116 ++++++++---------- src/layouts/payment-method/payment-method.vue | 1 - 2 files changed, 54 insertions(+), 63 deletions(-) diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index a6290e46c..d05c8816e 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -18,10 +18,7 @@ -
+
{{ 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) - }} -
-
@@ -336,13 +308,13 @@ export default { const nonpackageCartItems = []; this.cartItems.forEach((cartItem) => { - if ( - cartItem == this.recycleFeeCartItem || - cartItem == this.mobileFeeCartItem || - cartItem == this.premiumAppointmentDiscountCartItem - ) { - return; - } + // if ( + // cartItem == this.recycleFeeCartItem || + // cartItem == this.mobileFeeCartItem || + // cartItem == this.premiumAppointmentDiscountCartItem + // ) { + // return; + // } if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) { if (cartItem.isDisplayed) { @@ -441,6 +413,7 @@ export default { category: cartItemCategories.VAPS, cartItemType: cartItemTypes.RAIN_DEFENSE, isDisplayed: true, + isRemovable: true, subTotal: 0, salesTax: 0, lineItems: [], @@ -469,6 +442,7 @@ export default { category: cartItemCategories.GLASS_PARTS, cartItemType: cartItemTypes.GLASS_PARTS, isDisplayed: false, + isRemovable: false, subTotal: (lineItem.kitPrice ?? 0) + (lineItem.laborAmount ?? 0) + @@ -511,6 +485,7 @@ export default { category: cartItemCategories.SUPPORTING_ITEMS, cartItemType: cartItemTypes.RECYCLE_FEE, isDisplayed: true, + isRemovable: false, subTotal: 0, salesTax: 0, lineItems: [], @@ -545,6 +520,7 @@ export default { category: cartItemCategories.SUPPORTING_ITEMS, cartItemType: cartItemTypes.MOBILE_FEE, isDisplayed: true, + isRemovable: false, subTotal: 0, salesTax: 0, lineItems: [], @@ -579,6 +555,7 @@ export default { category: cartItemCategories.SUPPORTING_ITEMS, cartItemType: cartItemTypes.SUPPORTING_ITEMS, isDisplayed: false, + isRemovable: false, subTotal: 0, salesTax: 0, lineItems: [], @@ -714,9 +691,9 @@ export default { display: flex; justify-content: space-between; padding: 0.5rem 1.5rem; - &:nth-child(odd) { - background-color: #f5f5f5; - } + // &:nth-child(odd) { + // background-color: #f5f5f5; + // } &:nth-last-child(-n + 3) { background-color: #e3f2ea; } @@ -725,7 +702,12 @@ export default { color: #ffffff; } } - .vaps { + .service-type { + background-color: #f5f5f5; + //padding-left: 2.5rem; + align-items: center; + } + .packaged-cart-item { background-color: #f5f5f5; padding-left: 2.5rem; align-items: center; @@ -743,6 +725,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; @@ -764,18 +768,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 { diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 8a5f3a21d..d0d83c498 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -27,7 +27,6 @@ :allowItemRemoval="true" v-model="lineItems" servicePackageOptionsCmsName="ServicePackageTitle" - @cart-remove="cartRemove" recyclingModalCmsWidgetName="RecycleModal" />
From f345973d7793043e5cbc21e0b8b32d33209b33ef Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 8 Nov 2023 07:20:01 -0500 Subject: [PATCH 2/6] Tech review changes --- src/fmg-components/cart/cart.vue | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index d05c8816e..a8ddb99a5 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -3,15 +3,15 @@
+ :class="[isExpanded ? 'expanded' : '']" + @click="toggleIsExpanded()">
{{ amountDueText }}{{ currencyFormatter.format(amountDue) }}
-
+
{{ currencyFormatter.format(packagePrice) }} @@ -106,8 +106,7 @@ export default { }, data() { return { - isActive: false, - packageWithVAPS: false, + isExpanded: false, currencyFormatter: new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", @@ -119,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); @@ -308,14 +307,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); @@ -476,7 +467,7 @@ export default { let cartItem = null; const recycleFeeLineItem = this.supportingItems.find( - (supportingItem) => supportingItem.partNumber == partTypeStrings.RECYCLE_FEE + (supportingItem) => supportingItem.partType == partTypeStrings.RECYCLE_FEE ); if (recycleFeeLineItem) { @@ -784,10 +775,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; From 57bffe1334440ce359bbc4348abc56dd34aa4730 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 9 Nov 2023 06:35:34 -0500 Subject: [PATCH 3/6] Tech review changes --- src/constants/part-type-strings.js | 1 + src/fmg-components/cart/cart.vue | 9 ++++++--- 2 files changed, 7 insertions(+), 3 deletions(-) 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/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index 92e3f8adf..f0cca4990 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -222,6 +222,9 @@ export default { salesTax: promoLineItem.salesTax, }; + promoLineItem.cartItemType = cartItem.cartItemType; + cartItem.lineItems.push(lineItem); + cartItems.push(cartItem); }); @@ -467,14 +470,14 @@ export default { let cartItem = null; const recycleFeeLineItem = this.supportingItems.find( - (supportingItem) => supportingItem.partType == partTypeStrings.RECYCLE_FEE + (supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE ); - + console.log(recycleFeeLineItem); if (recycleFeeLineItem) { cartItem = { name: this.recycleFeeCartItemName, category: cartItemCategories.SUPPORTING_ITEMS, - cartItemType: cartItemTypes.RECYCLE_FEE, + cartItemType: cartItemTypes.REPLACE_FEE, isDisplayed: true, isRemovable: false, subTotal: 0, From f0e0c4a3e8ff3ac84533f35a882f39c8fe1ced57 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 9 Nov 2023 07:37:01 -0500 Subject: [PATCH 4/6] Fixed package price calculation that was including early bird fee, prettified --- src/constants/cart-item-types.js | 1 + src/fmg-components/cart/cart.vue | 4 ++-- src/mixins/base-mixin.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) 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/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index ca44600c3..4cef60f56 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -233,7 +233,7 @@ export default { }; promoLineItem.cartItemType = cartItem.cartItemType; - cartItem.lineItems.push(lineItem); + cartItem.lineItems.push(promoLineItem); cartItems.push(cartItem); }); @@ -482,7 +482,7 @@ export default { const recycleFeeLineItem = this.supportingItems.find( (supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE ); - console.log(recycleFeeLineItem); + if (recycleFeeLineItem) { cartItem = { name: this.recycleFeeCartItemName, diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index 8c85cf815..38b0daefb 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -95,7 +95,7 @@ export default { filterOutFees(lineItems) { const filteredLineItems = lineItems.filter((item) => { return ( - !item.partType.includes("FEE") || + (!item.partType.includes("FEE") && !item.partType.includes("EARLY BIRD")) || (item.partType === "REPAIR FEE" && item.partNumber != "SUPPLIES-REPAIR") ); }); From 70ae9d02b6e40932824e30224991f0d1947cae1a Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 9 Nov 2023 08:40:30 -0500 Subject: [PATCH 5/6] Removed commented CSS --- src/fmg-components/cart/cart.vue | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index 4cef60f56..9f4acbf70 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -695,9 +695,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; } From 1568303e8a6379a07abef9e8d8d65529b3bb1e80 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 9 Nov 2023 08:43:54 -0500 Subject: [PATCH 6/6] Removed another css comment missed --- src/fmg-components/cart/cart.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index 9f4acbf70..6d709edeb 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -705,7 +705,6 @@ export default { } .service-type { background-color: #f5f5f5; - //padding-left: 2.5rem; align-items: center; } .packaged-cart-item {