pathao-tracker-bd/PathaoTracker.js

A React component for tracking Pathao consignments

import React, { useState } from 'react';

const PathaoTracker = () => {
    const [consignmentID, setConsignmentID] = useState('');
    const [phoneNumber, setPhoneNumber] = useState('');
    const [trackingURL, setTrackingURL] = useState('');
    const [showResult, setShowResult] = useState(false);

    const handleSubmit = (e) => {
        e.preventDefault();

        // Construct the tracking URL based on input
        const url = `https://merchant.pathao.com/tracking?consignment_id=${consignmentID}&phone=${phoneNumber}`;

        // Update state to show the result
        setTrackingURL(url);
        setShowResult(true);
    };

    return (
        <div id="containerrr" style={styles.container}>
            <a href="#">
                <img src="https://pathao.com/bn/wp-content/uploads/sites/6/2019/02/Pathao_Logo-.svg" alt="Pathao Logo" style={styles.logo} />
            </a>
            <h1 id="h1_tag" style={styles.heading}>Track Your Pathao Consignment</h1>
            <form id="trackingForm" onSubmit={handleSubmit}>
                <label htmlFor="ID" style={styles.label}>Consignment ID:</label>
                <input
                    type="text"
                    id="ID"
                    name="ID"
                    placeholder="Enter Consignment ID"
                    value={consignmentID}
                    onChange={(e) => setConsignmentID(e.target.value)}
                    required
                    style={styles.input}
                />

                <label htmlFor="phone_number" style={styles.label}>Phone Number:</label>
                <input
                    type="text"
                    id="phone_number"
                    name="phone_number"
                    placeholder="Enter Phone Number"
                    value={phoneNumber}
                    onChange={(e) => setPhoneNumber(e.target.value)}
                    required
                    style={styles.input}
                />

                <input type="submit" value="Track" style={styles.submitButton} />
            </form>

            {/* Section to display the result */}
            {showResult && (
                <div id="result" style={styles.result}>
                    <p><strong>Tracking URL:</strong></p>
                    <a href={trackingURL} target="_blank" rel="noopener noreferrer" style={styles.trackingLink}>Click here to track your consignment</a>
                </div>
            )}
        </div>
    );
};

const styles = {
    container: {
        maxWidth: '600px',
        margin: '100px auto',
        backgroundColor: 'white',
        padding: '20px',
        boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
    },
    logo: {
        display: 'block',
        margin: 'auto',
    },
    heading: {
        textAlign: 'center',
        marginBottom: '20px',
    },
    label: {
        fontSize: '14px',
        display: 'block',
        marginBottom: '6px',
    },
    input: {
        width: '100%',
        padding: '10px',
        margin: '10px 0 20px 0',
        border: '1px solid #ddd',
        borderRadius: '4px',
    },
    submitButton: {
        width: '100%',
        padding: '10px',
        backgroundColor: '#387478',
        color: 'white',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer',
        fontSize: '16px',
    },
    result: {
        marginTop: '20px',
        padding: '15px',
        backgroundColor: '#f9f9f9',
        border: '1px solid #ddd',
    },
    trackingLink: {
        color: '#4CAF50',
        textDecoration: 'none',
    },
};

export default PathaoTracker;