DigitalConsumer.FixMyGlass/src/fmg-components/cart/cart.vue

<template>
    <div class="cart">
        <div class="container-fluid px-0">
            <div
                class="row vin-toggle flex align-items-center"
                :class="[isActive ? 'active' : '']"
                @click="toggleClass()">
                <div class="col d-flex justify-content-between">
                    <span class="label">Amount Due</span
                    ><span class="label amount-due">$321.00</span>
                </div>
            </div>
            <div class="price-table">
                <div class="service-type">
                    <textBlock :cmsWidgetName="packageNameWidget" />
                    <span>$300</span>
                </div>
                <div class="small vaps">
                    <span>Wiper blades</span><span><a href="#">Remove</a></span>
                </div>
                <div class="small vaps">
                    <span>Rain defense</span><span><a href="#">Remove</a></span>
                </div>
                <div v-if="hasRecycleLineItem"><span>{{recycleLabel}}</span><span>{{recycleFee}}</span></div>
                <div class="service-type"><span>Mobile service</span><span>$10</span></div>
                <div class="align-items-center">
                    <span>Rain Defense</span><a href="#">Remove</a><span>$10</span>
                </div>
                <div class="sub-total"><span>Subtotal</span><span>$320</span></div>
                <div class="sales-tax"><span>Sales tax</span><span>$1</span></div>
                <div class="amount-due"><span>Amount due</span><span>$321</span></div>
            </div>
        </div>
    </div>
</template>

<script>
import cart from "@/fmg-components/cart/cart";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import {
    getHighestFullySatisfiedTier,
    containsLineItemWithPartType,
} from "@/helpers/service-package-helper";
import reviewBlock from "@/layouts/review/review-block/review-block";
import textBlock from "@/digital-components/text-block/text-block";

export default {
    name: "modal",
    props: {
        headerCmsWidgetName: String,
        servicePackageOptionsCmsName: String,
        damage: Object,
        lineItems: Object,
    },
    data() {
        return {
            isActive: false,
            availableVaps: [],
        };
    },
    methods: {
        toggleClass: function (event) {
            this.isActive = !this.isActive;
        },
        initializeComponent(apiResponses) {
            const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
            this.availableVaps = vapsFromApi;
        },
    },
    computed: {
        packageNameWidget() {
            const servicePackageNames = this.getCmsContent(
                this.servicePackageOptionsCmsName,
                "Answers"
            );

            if (!servicePackageNames) {
                return "";
            }

            const currentPackage = servicePackageNames.find(
                (entry) => entry.Name === this.packageLevel
            );

            return currentPackage.SubWidgetName;
        },
        packageLevel() {
            return getHighestFullySatisfiedTier(
                this.glassToReplace,
                this.availableLineItems,
                this.isRepair,
                this.vaps
            );
        },
        glassToReplace() {
            return this.damage.glassToReplace;
        },
        isRepair() {
            return this.damage.isRepair;
        },
        vaps() {
            return this.lineItems?.vaps;
        },
        availableLineItems() {
            return [
                ...(this.lineItems?.glassParts ?? []),
                ...(this.lineItems?.supportingItems ?? []),
                ...this.availableVaps,
            ];
        },
        recycleLabel() {
            return "Recycling";
        },
        recycleFee() {
            return "$35.00";
        },
        hasRecycleLineItem() {
            if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
                return true;
            } else {
                return false;
            }
        }
    },
    components: {
        textBlock,
    },
};
</script>

<style lang="scss">
.cart {
    h5 {
        border-bottom: 1px solid $gray-500;
        color: $black;
    }
    .border-bottom {
        color: $gray;
    }
    .label {
        font-weight: 500;
    }
    .amount-due {
        color: $green;
    }
    .price-table {
        max-height: 0;
        transition: all 350ms ease-in;
        overflow: hidden;
        div {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 1.5rem;
            &:nth-last-child(-n + 3) {
                background-color: #e3f2ea;
            }
            &:last-child {
                background-color: #0c7e47;
                color: #ffffff;
            }
        }
        .vaps {
            padding-left: 2.5rem;
        }
        .package-type,
        .service-type,
        .vaps {
            background-color: #f5f5f5;
            align-items: center;
        }
        .sub-total,
        .sales-tax,
        .amount-due {
            font-weight: 500;
        }
        .sub-total {
            border-top: 1px solid #0c7e47;
        }
        .service-type {
            .text-block {
                background: transparent;
                margin-top: 0;
                padding: 0;
            }
        }
    }
    .vin-toggle {
        &:after {
            content: "";
            transition: all 0.5s ease;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right center;
            width: 16px;
            height: 9px;
            display: inline-flex;
            position: relative;
            right: 0.75rem;
            margin: 1rem 0 1rem 1rem;
            cursor: pointer;
        }
        &.active:after {
            transform: rotate(180deg);
        }
        &.active + .price-table {
            max-height: 400px;
            transition: all 350ms ease-in;
            overflow: hidden;
        }
    }
}
</style>