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

<template>
    <div>
        <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 v-html="apptWordingText"></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
                class="service-location"
                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";

import customerReview from "@/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review";
import damageReview from "@/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review";
import scheduleReview from "@/layouts/payment-method/review-dropdown/review-sections/schedule-review/schedule-review";
import serviceLocationReview from "@/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review";
import servicePackageReview from "@/layouts/payment-method/review-dropdown/review-sections/service-package-review/service-package-review";
import vehicleReview from "@/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review";

import { settleAllPromises } from "@/helpers/layout-helper";

export default {
    name: "review-dropdown",
    props: {
        apptWordingText: String,
        serviceLocationFullAddress: String,
    },
    data() {
        return {
            isExpanded: false,
        };
    },
    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;
        },
    },
    computed: {
        vehicleInfo() {
            return this.$store.getters.vehicle;
        },
        damageInfo() {
            return this.$store.getters.damage;
        },
        lineItems() {
            return this.$store.getters.lineItems;
        },
        serviceLocationInfo() {
            return this.$store.getters.order.serviceLocation;
        },
        appointmentType() {
            return this.$store.getters.order.serviceLocation.appointmentType;
        },
        customerInfo() {
            return this.$store.getters.order.customer;
        },
    },
    components: {
        customerReview,
        damageReview,
        scheduleReview,
        serviceLocationReview,
        servicePackageReview,
        vehicleReview,
    },
};
</script>

<style lang="scss" scoped>
.dark-header {
    color: $black;
    line-height: 1.6;
}

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

    :deep(.service-location) {
        .review-block-content {
            text-transform: capitalize;
        }
    }
}

.review-toggle {
    &.expanded {
        margin-bottom: 0;
    }

    &: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: 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>