How to Create a Purchase Receipt with React - Day 16

From:

DailyUI

---

Today, we're designing a receipt interface, an essential feature in modern copywriting. I’ve created a clean, minimal receipt component that prioritizes core functionality while maintaining a modern aesthetic.

The interface should include:

• purchase item

• date purchased

• amount of item

• vendor name

• tracking number

• reciept number

• business location

The solution 💡

Here is the react component based on the requirements

import React from 'react';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Button } from '@/components/ui/button';
import { Printer } from 'lucide-react';

const Receipt = ({ purchase }) => {
  const handlePrint = () => {
    window.print();
  };

  return (
    <div className="w-full max-w-md mx-auto bg-white rounded-lg shadow-lg flex flex-col">
      {/* Header */}
      <div className="p-4 border-b text-center">
        <h2 className="text-xl font-bold">{purchase.vendorName}</h2>
        <p className="text-sm text-gray-500">{purchase.businessLocation}</p>
      </div>

      {/* Receipt Details */}
      <ScrollArea className="flex-1 p-4">
        <div className="space-y-4">
          <div className="flex justify-between">
            <span className="font-semibold">Date:</span>
            <span>{new Date(purchase.datePurchased).toLocaleDateString()}</span>
          </div>
          <div className="flex justify-between">
            <span className="font-semibold">Receipt Number:</span>
            <span>{purchase.receiptNumber}</span>
          </div>
          <div className="flex justify-between">
            <span className="font-semibold">Tracking Number:</span>
            <span>{purchase.trackingNumber}</span>
          </div>
          <div className="border-t pt-2">
            <h3 className="font-semibold mb-2">Item Purchased:</h3>
            <div className="flex justify-between">
              <span>{purchase.item}</span>
              <span>${purchase.amount.toFixed(2)}</span>
            </div>
          </div>
          <div className="border-t pt-2 font-bold flex justify-between">
            <span>Total:</span>
            <span>${purchase.amount.toFixed(2)}</span>
          </div>
        </div>
      </ScrollArea>

      {/* Print Button */}
      <div className="p-4 border-t">
        <Button onClick={handlePrint} className="w-full">
          <Printer className="h-4 w-4 mr-2" />
          Print Receipt
        </Button>
      </div>
    </div>
  );
};

export default Receipt;

To use this component, you would pass a purchase object as a prop:

What is a prop?

• Props (short for properties) are a mechanism in React for passing data from parent components to child components. They are read-only and allow for unidirectional data flow, meaning data is passed down from parent to child components. Props can include various types of data, such as strings, numbers, objects, and even functions or entire components

Example of a prop:

// Parent Component
function ParentComponent() {
  const userInfo = {
    name: "Sarah",
    age: 28
  };

  return <ChildComponent userData={userInfo} />;
}

// Child Component
function ChildComponent(props) {
  return <div>{props.userData.name}</div>;
}

import Receipt from './Receipt';

const purchase = {
  item: "Wireless Headphones",
  datePurchased: new Date(),
  amount: 129.99,
  vendorName: "TechGadgets Inc.",
  trackingNumber: "TG1234567890",
  receiptNumber: "R0048248343",
  businessLocation: "123 Tech Street, Silicon Valley, CA 94000"
};

function App() {
  return (
    <div className="min-h-screen p-8 bg-gray-100">
      <Receipt purchase={purchase} />
    </div>
  );
}

The component uses Tailwind CSS for styling and incorporates shadcn/ui components like ScrollArea and Button for a polished look. The Lucide React library is used for the printer icon.

• Clean and minimal design

• Clear presentation of all required information

• Print functionality for easy record-keeping

• Responsive layout that adapts to different screen sizes

• Scrollable area for longer receipts

To further enhance this component, you could consider:

• Adding a QR code for digital verification or easy access to online order details

• Implementing a collapsible section for additional purchase details or terms and conditions

• Adding an option to email the receipt directly from the interface

• Incorporating a company logo for better brand representation

Conclusion

Creating a receipt interface in React using component-based architecture aligns perfectly with modern UI/UX principles and long-term development goals. This approach enhances consistency and reusability, allowing for a cohesive user experience across an application. The modular nature of components facilitates rapid iterations and updates based on user feedback, supporting continuous UX improvements. React's component structure also promotes responsive design, ensuring smooth interactions across various devices. For long-term goals, component-based architecture in React offers scalability and maintainability. As applications grow, this approach allows for easy integration of new features or modifications without disrupting the entire system. It also fosters collaboration between designers and developers, leading to more user-centered designs and improved productivity. Additionally, the focus on reusable components can significantly reduce development time and resources in the long run.

In conclusion, mastering component-based design in React for elements like receipt interfaces is not just about current functionality, but about setting a foundation for future growth and adaptability. This approach ensures that as user needs and technologies evolve, your UI/UX can seamlessly evolve with them, maintaining excellence in user experience while supporting efficient development practices.