131 lines
3.1 KiB
Vue
131 lines
3.1 KiB
Vue
<template>
|
|
<div :class="[isExpanded ? 'pb-3' : 'pb-4']">
|
|
<div
|
|
id="cart-dropdown-head"
|
|
class="row cart-toggle flex align-items-center pt-4"
|
|
:class="[isExpanded ? 'expanded' : '']"
|
|
@click="toggleIsExpanded">
|
|
<a
|
|
aria-label="expand cart details"
|
|
href="javascript:void(0)"
|
|
class="col d-flex justify-content-between py-0">
|
|
<span class="label color-black">{{ amountDueLabel }}</span>
|
|
<span class="label amount-due">{{ amountDueDisplayed }}</span>
|
|
</a>
|
|
</div>
|
|
<div
|
|
id="cart-table"
|
|
class="cart-table px-4">
|
|
<span>Cart Table Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useMainStore } from '@/store';
|
|
|
|
const VERIFYING_COVERAGE = 'Verifying coverage';
|
|
|
|
export default {
|
|
name: 'cart-dropdown',
|
|
components: {},
|
|
props: {
|
|
showAsPaid: Boolean,
|
|
amountDueLabel: String
|
|
},
|
|
data() {
|
|
return {
|
|
isExpanded: false,
|
|
currencyFormatter: new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: 'USD'
|
|
}),
|
|
widget: {
|
|
amountDue: 'AmountDueTextWidget'
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
isVerified() {
|
|
return useMainStore().payment?.insuranceCoverage?.isVerified ?? false;
|
|
},
|
|
amountDueDisplayed() {
|
|
return this.isVerified
|
|
? this.getFormattedAmount(this.amountDue)
|
|
: VERIFYING_COVERAGE;
|
|
},
|
|
amountDue() {
|
|
return this.showAsPaid
|
|
? 0
|
|
: this.subTotal + this.salesTax;
|
|
},
|
|
subTotal() {
|
|
return 0;
|
|
},
|
|
salesTax() {
|
|
return 0;
|
|
}
|
|
},
|
|
methods: {
|
|
toggleIsExpanded() {
|
|
this.isExpanded = !this.isExpanded;
|
|
},
|
|
getFormattedAmount(amount) {
|
|
return this.currencyFormatter.format(amount);
|
|
}
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/styles/ux-variables-svg-strings.scss";
|
|
|
|
.color-black {
|
|
color: $black;
|
|
}
|
|
|
|
.cart-table {
|
|
max-height: 0;
|
|
transition: all 350ms ease-in;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.cart-toggle {
|
|
.amount-due {
|
|
color: $green;
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
transition: all 0.5s ease;
|
|
background-image: url($svg-payment-method-review-toggle);
|
|
background-repeat: no-repeat;
|
|
background-position: right center;
|
|
width: 1rem;
|
|
height: 0.5625rem;
|
|
display: inline-flex;
|
|
position: relative;
|
|
right: 0.75rem;
|
|
margin: 0.5rem 0 0.5rem 1rem;
|
|
cursor: pointer;
|
|
}
|
|
&.expanded:after {
|
|
transform: rotate(180deg);
|
|
}
|
|
&.expanded + .cart-table {
|
|
max-height: 50rem;
|
|
transition: all 150ms ease-in;
|
|
overflow: hidden;
|
|
visibility: visible;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
.label {
|
|
font-weight: $font-weight-bold;
|
|
line-height: 1.625;
|
|
}
|
|
}
|
|
</style>
|