DigitalConsumer.ISS/src/layouts/payment-method/review-dropdown/review-dropdown.vue

<template>
    <div :class="[isExpanded ? 'pb-3' : 'pb-4']">
        <div
            class="row review-toggle flex align-items-center pt-4"
            :class="[isExpanded ? 'expanded' : '']"
            @click="toggleIsExpanded">
            <a
                aria-label="expand appointment details"
                href="javascript:void(0)"
                class="col d-flex justify-content-between py-0">
                <span class="label">Appointment details</span>
            </a>
        </div>
        <div class="review-table px-4">
            <vehicleReview
                cmsWidgetName="VehicleReviewWidget"
                :vehicle="vehicleInfo" />
            <hr class="my-0" />
            <damageReview
                cmsWidgetName="DamageReviewWidget"
                damageLocationsWidgetName="DamageLocationsWidget"
                :damage="damageInfo" />
            <hr class="my-0" />
            <servicePackageReview
                ref="servicePackageReview"
                servicePackageOptionsCmsName="ServicePackageTitle"
                defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
                vapsItemsCmsName="VapsItemDescriptions"
                :damage="damageInfo"
                :lineItems="lineItems" />
            <hr class="my-0" />
            <serviceLocationReview
                cmsWidgetName="ServiceLocationTitleWidget"
                :serviceLocation="serviceLocationInfo" />
            <hr class="my-0" />
            <scheduleReview
                cmsWidgetName="ScheduleWidget"
                :appointmentType="appointmentType" />
            <hr class="my-0" />
            <customerReview
                cmsWidgetName="CustomerReviewWidget"
                :customer="customerInfo" />
        </div>
    </div>
</template>

<script>
// import textBlock from '@/digital-components/text-block/text-block.vue';
import customerReview from '@/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.vue';
import damageReview from '@/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue';
import scheduleReview from '@/layouts/payment-method/review-dropdown/review-sections/schedule-review/schedule-review.vue';
import
serviceLocationReview from '@/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue';
import
servicePackageReview
    from '@/layouts/payment-method/review-dropdown/review-sections/service-package-review/service-package-review.vue';
import vehicleReview from '@/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review.vue';

import { useMainStore } from '@/store';
import settleAllPromises from '@/helpers/layout-helper';

export default {
    name: 'review-dropdown',
    components: {
        customerReview,
        damageReview,
        scheduleReview,
        serviceLocationReview,
        servicePackageReview,
        vehicleReview
    },
    props: {},
    data() {
        return {
            isExpanded: false
        };
    },
    computed: {
        vehicleInfo() {
            return useMainStore().vehicle;
        },
        damageInfo() {
            return useMainStore().damage;
        },
        lineItems() {
            return useMainStore().lineItems;
        },
        serviceLocationInfo() {
            return useMainStore().order.serviceLocation;
        },
        appointmentType() {
            return useMainStore().order.serviceLocation.appointmentType;
        },
        customerInfo() {
            return useMainStore().order.customer;
        }
    },
    methods: {
        async loadInitialData() {
            const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();

            const promiseResultMap = [
                {
                    resultKey: 'servicePackageData',
                    promise: servicePackageInitialDataPromise
                }
            ];

            return settleAllPromises(promiseResultMap);
        },
        initializeComponent(apiResponses) {
            this.$refs.servicePackageReview.initializeComponent(apiResponses.servicePackageData);
        },
        toggleIsExpanded() {
            this.isExpanded = !this.isExpanded;
        }
    }
};
</script>

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

.dark-header {
    color: $black;
    line-height: 1.6;
}

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

.review-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: 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 + .review-table {
        max-height: 800px;
        transition: all 150ms ease-in;
        overflow: hidden;
        visibility: visible;
    }
    a {
        text-decoration: none;
    }
    .label {
        color: $black;
        font-weight: 500;
        line-height: 1.625;
    }
}
</style>