Tech review changes

This commit is contained in:
Leah Schumann 2023-11-08 07:20:01 -05:00
parent 794150b33d
commit f345973d77

View file

@ -3,15 +3,15 @@
<div class="px-0"> <div class="px-0">
<div <div
class="row vin-toggle flex align-items-center" class="row vin-toggle flex align-items-center"
:class="[isActive ? 'active' : '']" :class="[isExpanded ? 'expanded' : '']"
@click="toggleClass()"> @click="toggleIsExpanded()">
<div class="col d-flex justify-content-between"> <div class="col d-flex justify-content-between">
<span class="label">{{ amountDueText }}</span <span class="label">{{ amountDueText }}</span
><span class="label amount-due">{{ currencyFormatter.format(amountDue) }}</span> ><span class="label amount-due">{{ currencyFormatter.format(amountDue) }}</span>
</div> </div>
</div> </div>
<div class="price-table"> <div class="price-table">
<div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }"> <div class="service-type">
<textBlock :cmsWidgetName="servicePackageTitleWidget" /><span>{{ <textBlock :cmsWidgetName="servicePackageTitleWidget" /><span>{{
currencyFormatter.format(packagePrice) currencyFormatter.format(packagePrice)
}}</span> }}</span>
@ -106,8 +106,7 @@ export default {
}, },
data() { data() {
return { return {
isActive: false, isExpanded: false,
packageWithVAPS: false,
currencyFormatter: new Intl.NumberFormat("en-US", { currencyFormatter: new Intl.NumberFormat("en-US", {
style: "currency", style: "currency",
currency: "USD", currency: "USD",
@ -119,8 +118,8 @@ export default {
openModal(modalName) { openModal(modalName) {
this.$refs[modalName].openModal(); this.$refs[modalName].openModal();
}, },
toggleClass: function (event) { toggleIsExpanded() {
this.isActive = !this.isActive; this.isExpanded = !this.isExpanded;
}, },
getVapsPrice(packageName) { getVapsPrice(packageName) {
const vapsItems = this.getVapsCartItemsForSelectedPackage(packageName); const vapsItems = this.getVapsCartItemsForSelectedPackage(packageName);
@ -308,14 +307,6 @@ export default {
const nonpackageCartItems = []; const nonpackageCartItems = [];
this.cartItems.forEach((cartItem) => { this.cartItems.forEach((cartItem) => {
// if (
// cartItem == this.recycleFeeCartItem ||
// cartItem == this.mobileFeeCartItem ||
// cartItem == this.premiumAppointmentDiscountCartItem
// ) {
// return;
// }
if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) { if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) {
if (cartItem.isDisplayed) { if (cartItem.isDisplayed) {
nonpackageCartItems.push(cartItem); nonpackageCartItems.push(cartItem);
@ -476,7 +467,7 @@ export default {
let cartItem = null; let cartItem = null;
const recycleFeeLineItem = this.supportingItems.find( const recycleFeeLineItem = this.supportingItems.find(
(supportingItem) => supportingItem.partNumber == partTypeStrings.RECYCLE_FEE (supportingItem) => supportingItem.partType == partTypeStrings.RECYCLE_FEE
); );
if (recycleFeeLineItem) { if (recycleFeeLineItem) {
@ -784,10 +775,10 @@ export default {
margin: 1rem 0 1rem 1rem; margin: 1rem 0 1rem 1rem;
cursor: pointer; cursor: pointer;
} }
&.active:after { &.expanded:after {
transform: rotate(180deg); transform: rotate(180deg);
} }
&.active + .price-table { &.expanded + .price-table {
max-height: 650px; max-height: 650px;
transition: all 350ms ease-in; transition: all 350ms ease-in;
overflow: hidden; overflow: hidden;