Skip to content
My Docs

Invoice Page

Documentation for Invoice Component

Overview

The Invoice component in our payment dashboard application displays detailed information about a specific invoice. This component is essential for users to view their invoice details, including the items, amounts, and due dates. Additionally, it offers functionality to print the invoice and make payments.

Key Features

  • Invoice Details: Presents information such as invoice number, date, due date, and total amount.
  • Print Functionality: Users can print the invoice directly from the page.
  • Payment Navigation: Redirects users to the payment page for pending invoices.

Usage

This component is used on the invoice page, accessible through the user’s dashboard or invoice list. It fetches invoice data based on the provided invoice ID.

API Integration

  • findPayment: Fetches invoice details from the backend using the paymentId and user token for authentication.
  • formatDateString: Formats the date strings for better readability.

Error Handling

  • Handles errors during data fetching and displays a user-friendly message.

Loading State

  • Displays a loading spinner while fetching invoice data.

Dependencies

  • MDBTable, MDBTableHead, MDBTableBody from mdbreact for table layout.
  • LargeLoadingSpinner and ErrorComponent for loading and error states.

Styling

  • Uses Invoice.css for custom styling.

Example Usage

<Invoice />

API Function - findPayment

This function requests invoice details from the backend.

  • URL: ${process.env.REACT_APP_API_URL}/payments/users/${user._id}/${paymentId}
  • Method: GET
  • Headers: Authorization: Bearer ${user.token}
  • Parameters:
    • paymentId: ID of the invoice to fetch.
    • user: User context containing the authentication token.

Helper Function - formatDateString

Formats a date string to a more readable format.

  • Parameters:
    • dateString: The date string to format.

Component Structure

  • Print Button: Triggers window.print() for printing the invoice.
  • Pay Now Button: Redirects to the payment page for pending invoices.
  • Invoice Details: Displays all relevant invoice information.

Error and Loading Handling

  • Displays a loading spinner while fetching data.
  • Shows an error message if fetching fails.