webtrigon-accounts/src/components/invoice-card/invoice.tsx

import React, { useState } from 'react';
import styles from './invoice.module.scss';
import { ReactComponent as ChevronBack } from 'ionicons/dist/svg/chevron-back.svg';
import { format } from 'date-fns';
import { IonButton, IonDatetime, IonInput } from '@ionic/react';

type OwnProps = {
    invoice: {
        id: string,
        date: string,
        status: string,
        dateOfPayment?: string,
        referenceNumber?: string,
    },
    client: {
        name: string,
        logo: string,
        project: {
            name: string,
            contract: {
                name: string,
                amount: string,
            },
        }
    }
}

export const InvoiceCard: React.FC<OwnProps> = (props) => {
    const [showDetails, setShowDetails] = useState<boolean>(false);
    const [formInputs, setFormInputs] = useState<{
        dateOfPayment: string,
        referenceNumber: string,
    }>({
        dateOfPayment: props.invoice.dateOfPayment ? props.invoice.dateOfPayment.toString() : '',
        referenceNumber: props.invoice.referenceNumber ? props.invoice.referenceNumber : '',
    });

    let statusClass = '';

    switch (props.invoice.status) {
        case 'due': statusClass = styles.due; break;
        case 'over due': statusClass = styles.overDue; break;
        case 'paid': statusClass = styles.paid; break;
        case 'cancelled': statusClass = styles.cancelled; break;
        default: break;
    }

    return <div>
        <section className={styles.card} onClick={() => setShowDetails(true)}>
            <figure>
                <img src={props.client.logo} alt="logo" />
            </figure>
            <div className={styles.contentHolder}>
                <h6> Invoice ID: {props.invoice.id} </h6>
                <h2> {props.client.project.contract.amount} </h2>
                <p> {props.client.project.contract.name} </p>
            </div>
            <div className={styles.status}>
                <span className={statusClass}> {props.invoice.status} </span>
            </div>
        </section>

        { showDetails && <div className={styles.backdrop}>
            <section className={styles.cardDetails}>
                <header>
                    <IonButton onClick={() => setShowDetails(false)} fill={'clear'} size={'small'}> <ChevronBack /> </IonButton>
                    <h4> Pending Invoice </h4>
                </header>
                <ul>
                    <li>
                        <label> Invoice ID </label>
                        <p> {props.invoice.id} </p>
                    </li>

                    <li>
                        <label> Invoice Date </label>
                        <p> {format(new Date(props.invoice.date), 'dd MMMM yyyy')} </p>
                    </li>

                    <li>
                        <label> Client </label>
                        <p> {props.client.name} </p>
                    </li>

                    <li>
                        <label> Project </label>
                        <p> {props.client.project.name} </p>
                    </li>

                    <li>
                        <label> Contract </label>
                        <p> {props.client.project.contract.name} </p>
                    </li>

                    <li>
                        <label> Invoice Amount </label>
                        <p> {props.client.project.contract.amount} </p>
                    </li>
                </ul>

                <section className={styles.form}>
                    <div className={styles.inputHolder}>
                        <label> Payment Date </label>
                        <IonDatetime value={formInputs.dateOfPayment} mode={'ios'} placeholder={'DD/MM/YYYY'} displayFormat={'DD/MM/YYYY'}
                        onIonChange={(e) => setFormInputs({
                            dateOfPayment: e.detail.value? e.detail.value.toString() : '',
                            referenceNumber: formInputs.referenceNumber,
                        })}></IonDatetime>
                    </div>

                    <div className={styles.inputHolder}>
                        <label> Reference No. </label>
                        <IonInput placeholder={'Enter here'} value={formInputs.referenceNumber}
                        onIonChange={(e) => setFormInputs({
                            dateOfPayment: formInputs.dateOfPayment,
                            referenceNumber: e.detail.value? e.detail.value.toString() : '',
                        })}></IonInput>
                    </div>

                    {(props.invoice.status !== 'cancelled' && props.invoice.status !== 'paid' || formInputs.dateOfPayment !== props.invoice.dateOfPayment || formInputs.dateOfPayment !== props.invoice.date) && <div className={styles.buttonsHolder}>
                        <IonButton fill={'outline'} className={styles.cancel} shape={'round'}> Cancel Invoice </IonButton>
                        <IonButton fill={'solid'} className={styles.approve + ' ' + (formInputs.dateOfPayment && formInputs.referenceNumber ? '' : styles.disabled)} shape={'round'}
                        onClick={() => setShowDetails(false)}> Paid </IonButton>
                    </div>}
                </section>
            </section>
        </div> }

    </div>
}