Function ReviewStep

examples/with-react/src/components/ReviewStep.tsx:28–122

()

 * via the FSM's editPersonalDetails and editPayment inputs.
 */
export function ReviewStep() {
    const { context, handle, canHandle } = useCheckout();

    const personal = context.personalDetails;
    const payment = context.paymentDetails;

    return (
        <div className="step-card">
            <h2 className="step-card__title">Review Your Order</h2>

            {/* Personal Details section */}
            <div className="review-section">
                <div className="review-section__header">
                    <span className="review-section__title">Personal Details</span>
                    <button
                        type="button"
                        className="review-section__edit"
                        onClick={() => handle("editPersonalDetails")}
                        disabled={!canHandle("editPersonalDetails")}
                    >
                        Edit
                    </button>
                </div>

                {personal ? (
                    <>
                        <div className="review-data-row">
                            <span className="review-data-label">Name</span>
                            <span className="review-data-value">{personal.name}</span>
                        </div>
                        <div className="review-data-row">
                            <span className="review-data-label">Email</span>
                            <span className="review-data-value">{personal.email}</span>
                        </div>
                        <div className="review-data-row">
                            <span className="review-data-label">Address</span>
                            <span className="review-data-value">{personal.address}</span>
                        </div>
                        <div className="review-data-row">
                            <span className="review-data-label">City / ZIP</span>
                            <span className="review-data-value">
                                {personal.city}, {personal.zip}
                            </span>
                        </div>
                    </>
                ) : (
                    <p style={{ color: "#8b949e", fontSize: "0.875rem" }}>No data</p>
                )}
            </div>

            {/* Payment section */}
            <div className="review-section">
                <div className="review-section__header">
                    <span className="review-section__title">Payment</span>
                    <button
                        type="button"
                        className="review-section__edit"
                        onClick={() => handle("editPayment")}