shipping-portal/resources/assets/vue/components/paymentsBilling/elements/SingleParentAdminPaymentsBillingComponent.vue

<template>
    <div class="row m-b-15 m-l-5 m-r-10 parentContainer">
        <div class="col bg-white rounded" v-if="item.storages && item.storages.length > 0">
            <div class="row" v-for="invoice in item.invoices" v-if="invoice.type === 1">
                <div class="col" v-if="getMergedInvoices(invoice).length > 1">
                    <single-admin-payments-billing-with-storage-component :data="item" :invoices="getMergedInvoices(invoice)" :storage="getStorageInfo(invoice)"  :invoice_status="invoice_status" :section="section" ></single-admin-payments-billing-with-storage-component>
                </div>
            </div>
        </div>
        <div class="col bg-white rounded" v-else>
            <div class="row">
                <div class="col">
                    <single-admin-payments-billing-without-storage-component :data="item" :invoice_status="invoice_status" :section="section" ></single-admin-payments-billing-without-storage-component>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            invoice_status: {
                type: String,
                required: true
            },
            section:{
                type: String,
                required: true
            }
        },
        computed: {
            orderStorageMap() {
                // Create a map to link parent invoice IDs to storageInvoiceIds
                const storageMap = {};
                if(this.item.storages){
                    for (const storage of this.item.storages) {
                        storageMap[storage.parentInvoiceId] = storage.storageInvoiceId;
                    }
                }
                return storageMap;
            }
        },
        methods: {
            getStorageInfo(invoice) {
                const storageObject = this.findStorageInfoObject(invoice.id);
                return storageObject;
            },
            findStorageInfoObject(shippingInvoiceId) {
                if(this.item.storages){
                    return this.item.storages.find(storage => storage.parentInvoiceId === shippingInvoiceId);
                }
                return null;
            },
            getMergedInvoices(invoice){
                const storageInvoice = this.getStorageInvoice(invoice);
                const mergedArray = [
                    ...(invoice ? [invoice] : []),
                    ...(storageInvoice ? [storageInvoice] : []),
                ];
                return mergedArray;
            },
            getStorageInvoice(invoice) {
                // Retrieve the storageInvoiceId for the current shipping invoice from storage info (order.storages)
                const storageInvoiceId = this.orderStorageMap[invoice.id];

                // Find and return the storage invoice (type 16) from order.invoices
                const storageInvoice = this.item.invoices.find((invoice) => {
                    return invoice.type === 16 && invoice.id === storageInvoiceId;
                });

                return storageInvoice;
            },
        },
        mixins: [componentHandler]
    }
</script>