paymentCalculation.js

<template>
    <app-card class="pa-5 mb-5">
        <app-row>
            <app-col cols="12">
                <h4 class="payment-calculations">{{ $t('message.paymentCalculation') }}</h4>
            </app-col>
            <app-col cols="12">
                <v-data-table
                    :loading="loading"
                    disable-pagination
                    disable-sort
                    :single-expand="singleExpand"
                    hide-default-footer
                    :headers="headers"
                    :items="paymentPrices"
                    item-key="name"
                    sort-by="name"
                    show-expand
                    :expanded.sync="expanded"
                    class="elevation-1"
                >
                    <template v-slot:item.paymentPrice="{item}">
                        <span class="font-weight-medium">{{ priceFormat(item.paymentPrice) }}</span>
                    </template>
                    <template v-slot:item.payLater="{item}">
                        <span class="font-weight-medium">{{ priceFormat(item.payLater) }}</span>
                    </template>
                    <template v-slot:item.payOnProperty="{item}">
                        <span class="font-weight-medium">{{ priceFormat(item.payOnProperty) }}</span>
                    </template>

                    <!-- Expanded row -->
                    <template v-slot:item="{ item, expand, isExpanded }">
                        <tr>
                            <td class="expand">
                                <app-icon class="expand-icon" @click="expand(!isExpanded)">
                                    {{ isExpanded ? 'expand_less' : 'expand_more' }}
                                </app-icon>
                            </td>
                            <td>{{ item.name }}</td>
                            <td>{{ item.category }}</td>
                            <td class="text-right pr-0">{{ priceFormat(item.paymentPrice) }}</td>
                            <td class="text-right pr-0">{{ priceFormat(item.payLater) }}</td>
                            <td class="text-right">{{ priceFormat(item.payOnProperty) }}</td>
                        </tr>
                    </template>

                    <!-- Expanded item -->
                    <template v-slot:expanded-item="{ headers, item }">
                        <tr class="item-expanded">
                            <td colspan="6">
                                <table>
                                    <tr v-for="detail in item.details">
                                        <td colspan="4" width="45%">{{detail.name}}</td>
                                        <td class="text-right">{{priceFormat(0)}}</td>
                                        <td class="text-right pl-5">{{priceFormat(0)}}</td>
                                        <td class="text-right">{{priceFormat(detail.value)}}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </template>

                    <!-- Footer -->
                    <template v-slot:footer>
                        <div class="pa-3 footer-column font-weight-medium">
                            <app-row no-gutters>
                                <app-col cols="2" offset="4" class="text-right pr-5">{{ $t('message.payment_page.payment_options.totals') }}</app-col>
                                <app-col cols="2" class="text-right pr-5">{{ priceFormat(totalPayment.paymentPrice) }}</app-col>
                                <app-col cols="2" class="text-right pr-2">{{ priceFormat(totalPayment.payLater) }}</app-col>
                                <app-col cols="2" class="text-right">{{ priceFormat(totalPayment.payOnProperty) }}</app-col>
                            </app-row>
                        </div>
                    </template>
                </v-data-table>
            </app-col>

        </app-row>
    </app-card>
</template>

<script>
  import TotalPrice from '@/models/TotalPrice';
  import Checkout from '@/models/user/Checkout';
  import Booking from '@/models/user/Booking';
  import RatePlanPrice from '@/models/RatePlanPrice';

  export default {
    name: 'PaymentCalculation',
    watch: {
      totalPrice: {
        handler(current) {
          console.log(current)
          this.calculateTable()
        },
        immediate: true
      }
    },
    data() {
      return {
        expanded: [],
        singleExpand: false,
        headers: [
          { text: '', value: 'data-table-expand' },
          {
            text: '',
            align: 'start',
            value: 'name',
          },
          {text: '', value: 'category', align: 'right'},
          {text: this.$t('message.payment_page.calculation.min_to_paid'), value: 'paymentPrice', align: 'right'},
          {text: this.$t('message.payment_page.calculation.pay_later'), value: 'payLater', align: 'right'},
          {text: this.$t('message.payment_page.calculation.payment_price'), value: 'payOnProperty', align: 'right'},
        ],
        totalPrices: [],
        paymentPrices: [{name: '', category: '', details: []}],
        loading: true,
      };
    },
    computed: {
      totalPrice() {
        return TotalPrice.query().with('configuration').all()
      },
      totalPayment() {
        const booking = Booking.query().first()

        return {payOnProperty: booking.totalPrice, payLater: booking.totalPrice - booking.paymentPrice, paymentPrice: booking.paymentPrice};
      },
    },

    methods: {

      calculateExtra(curr, acc) {
        const extraKeyArray = Object.keys(curr)

        extraKeyArray.forEach((key) => {
          acc[key] = acc.hasOwnProperty(key) ? (curr[key] + acc[key]) : curr[key]
        })

        return acc
      },

      calculateTable() {
        {
          this.loading = true;
          const totalPrices = this.totalPrice;
          console.log('totalPrice', totalPrices);

          const checkoutItems = Checkout.query()
          .where((record) => record.bookingId === 1)
          .with(['extras','guests', 'configuration'])
          .all();

          let roomArray = {};
          checkoutItems.forEach((checkout, index) => {
            if(checkout.roomSelectedId) {
              const rp = RatePlanPrice.query()
              .whereId(checkout.ratePlanSelectedId)
              .with('ratePlan')
              .first();

                console.log('totalPrices',totalPrices)

              roomArray[checkout.configurationId] = ({
                configId:  checkout.configurationId,
                configuration: checkout.configuration,
                paxAges: checkout.paxArray,
                identifier: index+1,
                "fees": [],
                "extraDetails":checkout.extras,
                "extras": checkout.extras.reduce((acc, res) => ({...acc, [res.extraID]:1}), {}) || {},
                totalPrices: totalPrices.filter((res) => res.configurationId === checkout.configurationId && res.configuration).reduce((acc, curr) => ({netPrice: acc.netPrice+curr.netPrice, totalPrice: acc.totalPrice+curr.totalPrice, taxAmount: acc.taxAmount + curr.taxAmount, extraBreakdown:this.calculateExtra(acc.extraBreakdown, curr.extraBreakdown), paymentPrice: 0}), {netPrice:0, totalPrice:0, taxAmount:0, extraBreakdown:{}, paymentPrice: 0}),
                roomID: checkout.roomSelectedId,
                ratePlanID: (rp && rp.ratePlanID),
                ratePlan: (rp && rp.ratePlan),
                boardCode: checkout.mealPlanSelectedId,
              })
            }
          });


        console.log('payment prices',roomArray, totalPrices)
          this.paymentPrices = []

          Object.keys(roomArray).forEach((i) => {



            let index = parseInt(i)
            console.log('index', index)
            if(!index)
              return;

            this.paymentPrices[index] = {
              category: '',
              name: `${this.$t('message.payment_page.payment_options.accommodation', {number: parseInt(i) })}`,
              paymentPrice: roomArray[i].totalPrices.netPrice,
              payOnProperty: roomArray[i].totalPrices.totalPrice,
              payLater: roomArray[i].totalPrices.totalPrice - roomArray[i].configuration.paymentPrice,
              taxAmount: roomArray[i].totalPrices.taxAmount,
              details: [],
            };
            this.paymentPrices[index].details.push({name: roomArray[i].ratePlan.friendlyName, value: roomArray[i].totalPrices.netPrice});

            const extras =roomArray[i].extraDetails
            if(extras && extras.length>0) {

              extras.forEach((extra) => {
                this.paymentPrices[index].details.push({name: extra.description.name, value:roomArray[i].totalPrices.extraBreakdown[extra.extraID]})
              })
            }

            //this.paymentPrices[i].details.push({name: totalPrices[i].ratePlan.ratePlan.name, value: totalPrices[i].paymentPrice});
            this.paymentPrices[index].details.push({name: this.$t('message.payment_page.payment_options.taxes'), value: roomArray[i].totalPrices.taxAmount});
            this.paymentPrices[index].details.push({name: this.$t('message.payment_page.payment_options.fees'), value: parseFloat(roomArray[i].totalPrices.feeBreakdown) || 0});

          })

          this.paymentPrices = this.paymentPrices.filter((el) => el != null)
          this.loading = false;
        }


      },
      priceFormat(price) {
        return this.$priceFormat(price);
      }
    }
  };
</script>

<style lang="sass">
        tbody tr:last-child td
            border-bottom: thin solid rgba(0,0,0,.12)

        .v-data-table__expanded
            box-shadow: none !important

            td
                padding: 0 !important

        .item-expanded
            td
                padding: 0 !important

            table
                background: var(--grey-lighten-5) !important
                padding: 0 15px 0 30px !important

                tr:last-child td
                    border: 0 !important

                tr td
                    font-size: 11px

        .footer-column
            font-size: 14px

        .payment-calculations
            color: var(--primary)
            font-size: 1.125rem
            font-weight: bold
            line-height: 1.75rem

        .expand-icon, .expanded-item
            transition: all .5s ease !important

        thead.v-data-table-header
            th:nth-child(4),
            th:nth-child(5)
                padding: 0 0 0 25px !important
</style>