old-crm-integration/client/src/scenes/PracticeSummaryReport/components/MemberSummary.js

import React from 'react';
import { Loader, Grid } from 'semantic-ui-react';

import {
    UNSCHEDULED_INCIDENT_BEFORE_RESERVATION,
    UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION,
    UNSCHEDULED_INCIDENT_AFTER_RESERVATION, UNSCHEDULED_INCIDENT_STANDALONE, UNLOCKED_INCIDENT_STANDALONE,
    BOOKING_MOVED_TO_ANOTHER_DAY, BOOKING_SHORTENED,
} from '../../../constants/enums';

const MemberSummary = props => {
    const { loading } = props;
    const incidents = props.incidents ? props.incidents : [];

    let totalUnscheduledFees = 0;
    let totalUnlockedFees = 0;
    let totalBookingChangeFees = 0;

    incidents.forEach((incident) => {
        switch (incident.incidentType) {
            case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION:
            case UNSCHEDULED_INCIDENT_AFTER_RESERVATION:
            case UNSCHEDULED_INCIDENT_STANDALONE:
                totalUnscheduledFees += parseFloat(incident.totalChargeFee);
                break;
            case UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION:
            case UNLOCKED_INCIDENT_STANDALONE:
                totalUnlockedFees += parseFloat(incident.incidentPrice);
                break;
            case BOOKING_MOVED_TO_ANOTHER_DAY:
            case BOOKING_SHORTENED:
                totalBookingChangeFees += parseFloat(incident.totalChargeFee);
                break;
            default:
                break;
        }
    });

    const grandTotal = totalUnlockedFees + totalUnscheduledFees + totalBookingChangeFees;

    const formattedUnscheduledFees = `$ ${totalUnscheduledFees.toFixed(2)}`;
    const formattedUnlockedFees = `$ ${totalUnlockedFees.toFixed(2)}`;
    const formattedBookingChangeFees = `$ ${totalBookingChangeFees.toFixed(2)}`;
    const formattedGrandTotalFee = `$ ${grandTotal.toFixed(2)}`;

    return (
        <div>
            <h4>Member Summary for selected period</h4>
            <Loader active={loading} />
            {
                !loading &&
                    <Grid stackable>
                        <Grid.Row>
                            <Grid.Column width={4}>
                                <p>Unscheduled incidents total :</p>
                            </Grid.Column>
                            <Grid.Column width={9}>
                                <p>{formattedUnscheduledFees}</p>
                            </Grid.Column>
                        </Grid.Row>
                        <Grid.Row>
                            <Grid.Column width={4}>
                                <p>Unlocked incidents total :</p>
                            </Grid.Column>
                            <Grid.Column width={9}>
                                <p>{formattedUnlockedFees}</p>
                            </Grid.Column>
                        </Grid.Row>
                        <Grid.Row>
                            <Grid.Column width={4}>
                                <p>Booking change charges total :</p>
                            </Grid.Column>
                            <Grid.Column width={9}>
                                <p>{formattedBookingChangeFees}</p>
                            </Grid.Column>
                        </Grid.Row>
                        <Grid.Row>
                            <Grid.Column width={4}>
                                <p><b>Grand Total :</b></p>
                            </Grid.Column>
                            <Grid.Column width={9}>
                                <p><b>{formattedGrandTotalFee}</b></p>
                            </Grid.Column>
                        </Grid.Row>
                    </Grid>
            }
        </div>
    );
};

export default MemberSummary;