Initial commit

frontend/src/components/OrderSummary.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+const OrderSummary = ({ orderData, loading }) => {
+    const formatCurrency = (amount, currency = 'USD') => {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: currency,
+        }).format(parseFloat(amount));
+    };
+
+    if (loading) {
+        return (
+            <div className="order-summary">
+                <div className="loading-spinner">
+                    <div className="spinner-border" role="status">
+                        <span className="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="order-summary">
+            <h5 className="mb-3">
+                <i className="fas fa-receipt me-2"></i>
+                Order Summary
+            </h5>
+
+            <div className="order-item">
+                <span>Order #</span>
+                <span className="fw-bold">{orderData.wc_order_id}</span>
+            </div>
+
+            <div className="order-item">
+                <span>Description</span>
+                <span>{orderData.description}</span>
+            </div>
+
+            {orderData.customer_email && (
+                <div className="order-item">
+                    <span>Customer Email</span>
+                    <span>{orderData.customer_email}</span>
+                </div>
+            )}
+
+            <div className="order-item">
+                <span>Currency</span>
+                <span>{orderData.currency}</span>
+            </div>
+
+            <div className="order-item order-total">
+                <span>Total Amount</span>
+                <span className="text-primary">
+          {formatCurrency(orderData.total, orderData.currency)}
+        </span>
+            </div>
+
+            <div className="mt-3 p-2 bg-info bg-opacity-10 rounded">
+                <small className="text-info">
+                    <i className="fas fa-info-circle me-1"></i>
+                    You will be redirected to PayPal to complete this payment securely
+                </small>
+            </div>
+        </div>
+    );
+};
+
+export default OrderSummary;