Partial

src/iss-components/cart-dropdown/cart-dropdown.vue

@@ -0,0 +1,144 @@
+<template>
+    <div>
+        <div>
+            <div
+                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">{{ amountDueText }}</span>
+                    <span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span>
+                </a>
+            </div>
+            <div class="cart-table px-4">
+                <p>Cart Table Placeholder</p>
+            </div>
+        </div>
+    </div>
+    <!-- Amount Due Closed Accordion view -->
+    <!-- Open Accordion (arrow pointing up) -->
+    <!-- Deductible / Base Services Line -->
+    <!-- VAPS; Note that the definition of x package is not constant -->
+    <!-- Mobile Service Fee -->
+    <!-- Recycling Fee -->
+    <!-- Subtotal -->
+    <!-- Sales Tax -->
+    <!-- Final Amount Due line -->
+</template>
+
+<script>
+import { useMainStore } from '@/store';
+
+export default {
+    name: 'cart-dropdown',
+    components: {},
+    props: {
+        showAsPaid: Boolean,
+        amountDueText: String
+    },
+    data() {
+        debugger;
+        return {
+            isExpanded: false,
+            currencyFormatter: new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD'
+            }),
+            widget: {
+                amountDue: 'AmountDueTextWidget'
+            }
+        };
+    },
+    computed: {
+        isVerified() {
+            const x = useMainStore().payment;
+            return useMainStore().payment?.insuranceCoverage?.isVerified ?? false;
+        },
+        amountDue() {
+            debugger;
+            if (!this.isVerified) {
+                return 'Verifying coverage';
+            }
+            if (this.showAsPaid) {
+                return 0;
+            }
+            return 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 {
+    margin-bottom: 1rem;
+    .amount-due {
+        color: $green;
+    }
+
+    &.expanded {
+        margin-bottom: 0;
+    }
+
+    &:after {
+        content: "";
+        transition: all 0.5s ease;
+        background-image: url($svg-payment-method-review-toggle);
+        background-repeat: no-repeat;
+        background-position: right center;
+        width: 16px;
+        height: 9px;
+        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: 800px;
+        transition: all 150ms ease-in;
+        overflow: hidden;
+        visibility: visible;
+    }
+    a {
+        text-decoration: none;
+    }
+    .label {
+        font-weight: 500;
+        line-height: 1.625;
+    }
+}
+</style>