old-crm-integration/client/src/components/MemberIncidentsTables/index.js

import React from 'react';
import {Accordion, Label} from 'semantic-ui-react';
import SingleIncidentsTable from './components/SingleIncidentsTable';
import {
    UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION, UNLOCKED_INCIDENT_STANDALONE, UNSCHEDULED_INCIDENT_AFTER_RESERVATION,
    UNSCHEDULED_INCIDENT_BEFORE_RESERVATION, UNSCHEDULED_INCIDENT_STANDALONE, BOOKING_MOVED_TO_ANOTHER_DAY, BOOKING_SHORTENED, BOOKING_CANCELED_LATE,
    incidentTableTypes
} from '../../constants/enums';

export default function MemberIncidentsTables (props) {
    const { pendingIncidents, incidents, hideMemberName, dateRange, memberId } = props;

    const incidentsRelatedToReservations = [];
    const standaloneIncidents = [];
    const bookingChangeIncidents = [];

    if (Array.isArray(incidents)){
        incidents.forEach((incident) => {
            if (incident && incident.incidentType){
                switch (incident.incidentType) {
                    case UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION:
                    case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION:
                    case UNSCHEDULED_INCIDENT_AFTER_RESERVATION:
                        incidentsRelatedToReservations.push(incident);
                        break;
                    case UNLOCKED_INCIDENT_STANDALONE:
                    case UNSCHEDULED_INCIDENT_STANDALONE:
                        standaloneIncidents.push(incident);
                        break;
                    case BOOKING_MOVED_TO_ANOTHER_DAY:
                    case BOOKING_SHORTENED:
                    case BOOKING_CANCELED_LATE:
                        bookingChangeIncidents.push(incident);
                        break;
                    default:
                        break;
                }
            }
        });
    }

    const incidentsRelatedToReservationsTable = (
        <SingleIncidentsTable
            loading={pendingIncidents}
            incidents={incidentsRelatedToReservations}
            openMemberSummaryOnMemberClick
            hideMemberName={hideMemberName}
            tableType={incidentTableTypes.INCIDENTS_RELATED_TO_RESERVATIONS}
            dateRange={dateRange}
            memberId={memberId}
        />
    );

    const standaloneIncidentsTable = (
        <SingleIncidentsTable
            loading={pendingIncidents}
            incidents={standaloneIncidents}
            openMemberSummaryOnMemberClick
            hideMemberName={hideMemberName}
            tableType={incidentTableTypes.STANDALONE_INCIDENTS}
            dateRange={dateRange}
            memberId={memberId}
        />
    );

    const bookingChangeIncidentsTable = (
        <SingleIncidentsTable
            loading={pendingIncidents}
            incidents={bookingChangeIncidents}
            openMemberSummaryOnMemberClick
            hideMemberName={hideMemberName}
            tableType={incidentTableTypes.BOOKING_CHANGE_INCIDENTS}
            dateRange={dateRange}
            memberId={memberId}
        />
    );

    const accordionPanels = [
        {
            key: 'related-door-lock-incidents',
            title : { content: <Label color='blue' content={'Door Lock Charges - Related to reservations'} /> },
            content: { content : incidentsRelatedToReservationsTable },
        },
        {
            key: 'standalone-door-lock-incidents',
            title : { content: <Label color='blue' content={'Door Lock Charges - Standalone'} /> },
            content: { content: standaloneIncidentsTable },
        },
        {
            key: 'reservation-modification-incidents',
            title: {content: <Label color='blue' content={'Booking change charges'}/>},
            content: { content: bookingChangeIncidentsTable },
        }
    ];

    return (
        <Accordion
            panels={accordionPanels}
            exclusive={false}
            defaultActiveIndex={[0]}
            fluid
        />
    );
}