Building a Commit Phase Component in React

This challenge focuses on implementing the logic for a "commit phase" within a React application. The commit phase is a crucial part of many multi-step processes, such as form submissions, wizards, or checkout flows, where users review their selections before finalizing them. You will build a reusable React component that displays a summary of data and allows the user to confirm or cancel the action.

Problem Description

You need to create a React component, let's call it CommitPhase, that displays a summary of provided data and handles user confirmation or cancellation. This component will be used in a scenario where a user has completed several preceding steps and is now presented with a final review before committing to an action.

Key Requirements:

1. Data Display: The component must accept a prop containing the data to be summarized. This data can be an object or an array, and the component should intelligently display it in a readable format.
2. Confirmation Button: A "Confirm" or "Commit" button must be present. Clicking this button should trigger a callback function passed as a prop, indicating the user's intent to proceed.
3. Cancellation Button: A "Cancel" or "Back" button must be present. Clicking this button should trigger a different callback function, indicating the user's intent to go back or abort the process.
4. Conditional Rendering (Optional but Recommended): Consider how to handle cases where no data is provided.
5. Styling: Basic styling should be applied to make the component presentable. You can assume a simple layout.

Expected Behavior:

• When the component mounts, it should display a summary of the data passed to it.
• When the "Confirm" button is clicked, the onConfirm prop function should be called.
• When the "Cancel" button is clicked, the onCancel prop function should be called.
• The component should be generic enough to handle different types of data structures.

Edge Cases:

• What happens if the data prop is empty or null?
• What happens if the onConfirm or onCancel functions are not provided? (While not strictly required to implement error handling for missing props in this challenge, it's good to think about.)

Examples

Example 1: Simple Object Data

// Parent Component State
const formData = {
  name: "John Doe",
  email: "john.doe@example.com",
  plan: "Premium",
  price: 19.99
};

const handleConfirm = () => {
  console.log("Action confirmed!");
  // Logic to actually save/submit the data
};

const handleCancel = () => {
  console.log("Action cancelled.");
  // Logic to navigate back or reset state
};

// Usage in parent component:
// <CommitPhase data={formData} onConfirm={handleConfirm} onCancel={handleCancel} />

Output (Visual Representation):

Commit Phase

Summary:
  Name: John Doe
  Email: john.doe@example.com
  Plan: Premium
  Price: $19.99

[ Confirm ] [ Cancel ]

Explanation: The CommitPhase component displays the key-value pairs from the formData object. The "Confirm" button triggers handleConfirm, and the "Cancel" button triggers handleCancel.

Example 2: Array Data

// Parent Component State
const selectedItems = [
  { id: 1, name: "Laptop", quantity: 1, price: 1200 },
  { id: 2, name: "Mouse", quantity: 2, price: 25 }
];

const handleConfirm = () => {
  console.log("Items confirmed!");
};

const handleCancel = () => {
  console.log("Items cancelled.");
};

// Usage in parent component:
// <CommitPhase data={selectedItems} onConfirm={handleConfirm} onCancel={handleCancel} />

Output (Visual Representation):

Commit Phase

Summary:
  Item 1:
    Name: Laptop
    Quantity: 1
    Price: $1200.00
  Item 2:
    Name: Mouse
    Quantity: 2
    Price: $25.00

[ Confirm ] [ Cancel ]

Explanation: The component iterates through the selectedItems array and displays each item's details.

Example 3: Empty Data

// Parent Component State
const emptyData: Record<string, never> = {};

// Usage in parent component:
// <CommitPhase data={emptyData} onConfirm={handleConfirm} onCancel={handleCancel} />

Output (Visual Representation):

Commit Phase

Summary:
  No data to display.

[ Confirm ] [ Cancel ]

Explanation: When data is an empty object, a "No data to display" message is shown.

Constraints

• The component should be implemented using React and TypeScript.
• The data prop can be a plain JavaScript object or an array of objects.
• The onConfirm and onCancel props must be functions.
• Basic styling should be applied for readability, but complex UI design is not the focus.
• Performance is not a primary concern for this specific challenge, but efficient rendering practices are encouraged.

Notes

• You will need to define the props interface for your CommitPhase component.
• Consider how you will iterate through and display different data structures. A recursive approach or checks for object/array types might be useful.
• For displaying numbers, consider formatting them as currency where appropriate (e.g., using toFixed(2) for prices).
• Think about how the parent component would manage its state and pass down the data and callback functions. This challenge is focused on the CommitPhase component itself.