DigitalConsumer.ISS/src/iss-components/cart-dropdown/cart-dropdown.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="cart-label color-black">{{ amountDueLabel }}</span>
                <span class="cart-label amount-due">{{ getDisplayed(amountDue) }}</span>
            </a>
        </div>
        <div
            id="cart-table"
            class="cart-table">
            <div
                id="cart-deductible-or-base-price"
                class="mt-4 cart-line-item color-gray-100 px-5 py-1">
                <div
                    v-if="showDeductibleLineItem"
                    id="cart-deductible"
                    class="d-flex justify-content-between align-items-center">
                    <span
                        id="deductible-label"
                        class="cart-label">{{ deductibleLabel }}</span>
                    <span id="deductible-value">{{ getDisplayed(deductible) }}</span>
                </div>
                <div
                    v-else
                    id="cart-base-price"
                    class="d-flex justify-content-between align-items-center">
                    <span
                        id="base-price-label"
                        class="cart-label">{{ basePriceLabel }}</span>
                    <span id="base-price-value">{{ getDisplayed(baseServicePrice) }}</span>
                </div>
            </div>
            <!-- This next block of code will go inside the cart -->
            <!-- *********************************************** -->
            <br />
            <textLink
                linkType="text"
                text="Recycling"
                href="javascript:void(0)"
                @clickEvent="openModal(recyclingModalCmsWidgetName)" />
            <!-- *********************************************** -->
            <!-- This block of code above, will go inside the cart -->
            <contentGroupModal
                ref="RecycleModal"
                cmsWidgetName="RecycleModal">
                <textBlock cmsWidgetName="RecycleTextBlock" />
            </contentGroupModal>
        </div>
    </div>
</template>

<script>
import { useMainStore } from '@/store';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import textLink from '@/ux-components/text-link/text-link.vue';
import getPriceOfLineItems from '@/helpers/price-calculator.js';
import { formatAmountInDollars } from '@/helpers/text-helper.js';

const VERIFYING_COVERAGE = 'Verifying coverage';

export default {
    name: 'cart-dropdown',
    components: { contentGroupModal,
        textBlock,
        textLink },
    props: {
        showAsPaid: Boolean,
        amountDueLabel: String
    },
    data() {
        const { currentDeductible } = useMainStore().order;
        const { supportingItems, glassParts, otherParts } = useMainStore().lineItems;
        const baseServiceLineItems = [
            ...(supportingItems ?? []),
            ...(glassParts ?? []),
            ...(otherParts ?? [])
        ];
        return {
            deductible: currentDeductible,
            baseServiceLineItems,
            isExpanded: false
        };
    },
    computed: {
        baseServicePrice() {
            return getPriceOfLineItems(this.baseServiceLineItems);
        },
        showDeductibleLineItem() {
            return !useMainStore().isNoComp && !useMainStore().policy.isITAC;
        },
        isUnverified() {
            return this.showDeductibleLineItem
                && (this.deductible == null || !useMainStore().isVerifiedCoverageStatus);
        },
        subTotal() {
            // TODO partial calculation for now
            return this.showDeductibleLineItem ? this.deductible : this.baseServicePrice;
        },
        salesTax() {
            return 0; // TODO
        },
        amountDue() {
            return this.showAsPaid
                ? 0
                : this.subTotal + this.salesTax;
        }
    },
    methods: {
        openModal(modalName) {
            this.$refs[modalName].openModal();
        },
        toggleIsExpanded() {
            this.isExpanded = !this.isExpanded;
        },
        getDisplayed(amount) {
            return this.isUnverified && this.showDeductibleLineItem
                ? VERIFYING_COVERAGE
                : formatAmountInDollars(amount);
        }
    }
};

</script>

<style lang="scss" scoped>
@import "@/styles/ux-variables-svg-strings.scss";

.color-black {
    color: $black;
}
.color-gray-100 {
    background-color: $gray-100;
}

.cart-line-item {
    color: $darker-gray;
}

.cart-table {
    max-height: 0;
    transition: all 350ms ease-in;
    overflow: hidden;
    visibility: hidden;
}

:deep(.modal-content a.external-text) {
    text-underline-offset: 0.25rem;
    line-height: 2;
    padding: 0 0 0.25rem 0;
    font-weight: 500;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
}

:deep(#RecycleModal h5) {
    text-align: center;
}

.cart-toggle {
    &: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;
    }
    .cart-label {
        font-weight: $font-weight-bold;
        line-height: 1.625;
    }
    .amount-due {
        color: $green;
    }

}
</style>