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" v-show="!isExpanded"></div>

        <div class="review-table px-4">
            <appointmentReview
                class="service-location"
                cmsWidgetName="AppointmentWidget"
                :apptWordingText="apptWordingText" />

            <hr class="my-0" />

            <parityDamageReview
                cmsWidgetName="DamageReviewWidget"
                damageLocationsWidgetName="DamageLocationsWidget"
                :damage="damageInfo"
                :vehicle="vehicleInfo" />

            <hr class="my-0" />

            <customerReview cmsWidgetName="CustomerReviewWidget" :customer="customerInfo" />

            <hr class="my-0" />

            <optInReview cmsWidgetName="OptInReviewWidget" :customer="customerInfo" />

            <!-- the following was the order prior to Heritage parity
            <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 optInReview from "@/layouts/payment-method/review-dropdown/review-sections/opt-in-review/opt-in-review";
import damageReview from "@/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review";
import parityDamageReview from "@/layouts/payment-method/review-dropdown/review-sections/parity-damage-review/parity-damage-review";
import scheduleReview from "@/layouts/payment-method/review-dropdown/review-sections/schedule-review/schedule-review";
import appointmentReview from "@/layouts/payment-method/review-dropdown/review-sections/appointment-review/appointment-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,
        damageInfoHeader: String,
    },
    data() {
        return {
            isExpanded: false,
        };
    },
    methods: {
        // the following was used prior to Heritage parity
        // 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,
        optInReview,
        appointmentReview,
        parityDamageReview,
    },
};
</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;

    & > :first-child {
        margin-top: -0.75rem;
    }

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

:deep(.review-table .text-block span) {
    font-family: UrbanistSemibold;
}

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

    &:after {
        content: "";
        transition: all 0.5s ease;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right center;
        width: 24px;
        height: 24px;
        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 {
        font-family: UrbanistSemibold;
        color: $black;
        line-height: 1.625;
    }
}
</style>