OR

<div id="order-tracking-app"></div>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;

function OrderTrackingApp() {
    const [trackingNumber, setTrackingNumber] = useState('');
    const [orderNumber, setOrderNumber] = useState('');
    const [trackingDetails, setTrackingDetails] = useState(null);
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);

    const fetchData = async (url) => {
        setLoading(true);
        setError('');
        setTrackingDetails(null);

        const shopUrl = Shopify.shop;
        const fullUrl = `https://${shopUrl}/apps/proxy${url}`;
        
        try {
            const response = await fetch(fullUrl, {
                headers: {
                    'ngrok-skip-browser-warning': '69420',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();
            if (data.error) {
                setError(data.error);
            } else {
                setTrackingDetails(data);
            }
        } catch (err) {
            console.error('Fetch error:', err);
            setError('Error fetching information. Please try again.');
        } finally {
            setLoading(false);
        }
    };

    const handleSubmit = async (e, type) => {
        e.preventDefault();
        const value = type === 'tracking' ? trackingNumber : orderNumber;
        if (!value.trim()) {
            setError(`Please enter a valid ${type === 'tracking' ? 'tracking' : 'order'} number.`);
            return;
        }
        const encodedValue = encodeURIComponent(value);
        await fetchData(`/${type === 'tracking' ? 'checkstatus' : 'orderTracking'}/${encodedValue}`);
    };

    return (
        <div className="max-w-2xl mx-auto p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl shadow-lg">
            <h1 className="text-4xl font-extrabold text-center text-indigo-800 mb-8">Order Tracking</h1>
            <div className="space-y-6">
                <form onSubmit={(e) => handleSubmit(e, 'tracking')} className="flex flex-col sm:flex-row gap-4">
                    <input 
                        type="text" 
                        value={trackingNumber} 
                        onChange={(e) => setTrackingNumber(e.target.value)}
                        placeholder="Enter Tracking Number"
                        className="flex-1 p-3 border border-indigo-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    />
                    <button type="submit" className="w-full sm:w-auto bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition duration-300 ease-in-out transform hover:-translate-y-1">
                        Track by Tracking
                    </button>
                </form>
                <form onSubmit={(e) => handleSubmit(e, 'order')} className="flex flex-col sm:flex-row gap-4">
                    <input 
                        type="text" 
                        value={orderNumber} 
                        onChange={(e) => setOrderNumber(e.target.value)}
                        placeholder="Enter Order Number"
                        className="flex-1 p-3 border border-indigo-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    />
                    <button type="submit" className="w-full sm:w-auto bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition duration-300 ease-in-out transform hover:-translate-y-1">
                        Track by Order
                    </button>
                </form>
            </div>
            {loading && <p className="text-center text-indigo-600 mt-6 animate-pulse">Loading...</p>}
            {error && <p className="text-center text-red-600 mt-6 bg-red-100 p-3 rounded-lg">{error}</p>}
            {trackingDetails && (
                <div className="mt-8 bg-white p-6 rounded-xl shadow-md border border-indigo-100">
                    <h2 className="text-2xl font-bold mb-4 pb-2 border-b-2 border-indigo-200 text-indigo-800">Tracking Details</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <p><span className="font-semibold text-indigo-700">Status:</span> <span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded">{trackingDetails.stage}</span></p>
                        <p><span className="font-semibold text-indigo-700">Description:</span> {trackingDetails.description}</p>
                        <p><span className="font-semibold text-indigo-700">Last Updated:</span> {new Date(trackingDetails.time_utc).toLocaleString()}</p>
                        {trackingDetails.tracking_id ? (
                            <p><span className="font-semibold text-indigo-700">Tracking ID:</span> {trackingDetails.tracking_id}</p>
                        ) : (
                            <p><span className="font-semibold text-indigo-700">Order Number:</span> {trackingDetails.order_number}</p>
                        )}
                        <p><span className="font-semibold text-indigo-700">Carrier:</span> {trackingDetails.carrier || 'N/A'}</p>
                        {trackingDetails.tracking_url && (
                            <p className="col-span-full">
                                <span className="font-semibold text-indigo-700">Tracking URL:</span> 
                                <a href={trackingDetails.tracking_url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline ml-1 inline-flex items-center">
                                    View Detailed Tracking
                                    <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                    </svg>
                                </a>
                            </p>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
}

ReactDOM.render(<OrderTrackingApp />, document.getElementById('order-tracking-app'));
</script>