popsite-ui 1.0.0

package/src/components/modules/FlightBookingModule.jsx

@@ -0,0 +1,399 @@
+import React, { useState, useEffect } from 'react';
+import { flightBookingMockData } from '../../data/systems/flightBooking';
+import { useToast } from '../system/Toast';
+
+export function FlightBookingModule() {
+  const [currentView, setCurrentView] = useState('search'); // search, results, passenger, pass
+  
+  const [searchParams, setSearchParams] = useState({
+    from: flightBookingMockData.airports[0],
+    to: flightBookingMockData.airports[1],
+    date: new Date().toISOString().split('T')[0],
+    passengers: 1
+  });
+  
+  const [selectedFlight, setSelectedFlight] = useState(null);
+  const [selectedClass, setSelectedClass] = useState('economy'); // economy, business
+  const [baggageCount, setBaggageCount] = useState(0);
+  const [passengerDetails, setPassengerDetails] = useState({ firstName: '', lastName: '', passport: '' });
+  const [bookedFlight, setBookedFlight] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { showToast, ToastContainer } = useToast();
+
+  // Simulated persisted state
+  useEffect(() => {
+    const saved = localStorage.getItem('popsite_flight');
+    if (saved) {
+      try { setBookedFlight(JSON.parse(saved)); } catch (e) {}
+    }
+  }, []);
+
+  useEffect(() => {
+    if (bookedFlight) {
+      localStorage.setItem('popsite_flight', JSON.stringify(bookedFlight));
+    }
+  }, [bookedFlight]);
+
+  const withDelay = (callback, delay = 1500) => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      callback();
+    }, delay);
+  };
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    if (searchParams.from === searchParams.to) {
+      showToast('Destination cannot be the same as origin', 'error');
+      return;
+    }
+    withDelay(() => {
+      setCurrentView('results');
+      showToast('Flights loaded successfully', 'success');
+    });
+  };
+
+  const handleSelectFlight = (flight) => {
+    setSelectedFlight(flight);
+    setCurrentView('passenger');
+  };
+
+  const calculateTotal = () => {
+    if (!selectedFlight) return 0;
+    const basePrice = selectedClass === 'business' ? selectedFlight.businessPrice : selectedFlight.price;
+    const baggageTotal = baggageCount * flightBookingMockData.addOns.checkedBag;
+    return (basePrice * searchParams.passengers) + baggageTotal;
+  };
+
+  const handleBook = (e) => {
+    e.preventDefault();
+    if (!passengerDetails.firstName || !passengerDetails.lastName || !passengerDetails.passport) {
+      showToast('Please fill out all passenger details', 'error');
+      return;
+    }
+
+    withDelay(() => {
+      const ticket = {
+        bookingRef: `PNR${Math.random().toString(36).substring(2, 8).toUpperCase()}`,
+        flight: selectedFlight,
+        seatClass: selectedClass,
+        baggage: baggageCount,
+        passenger: passengerDetails,
+        date: searchParams.date,
+        total: calculateTotal()
+      };
+      setBookedFlight(ticket);
+      setCurrentView('pass');
+      showToast('Booking confirmed!', 'success');
+    }, 2000);
+  };
+
+  const renderSearch = () => (
+    <div className="pk-container animate-fade-in" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '80vh' }}>
+       <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
+          <h1 className="pk-heading-xl" style={{ marginBottom: '1rem' }}>{flightBookingMockData.airlineName}</h1>
+          <p className="pk-text-body" style={{ fontSize: '1.25rem' }}>Where will your next adventure take you?</p>
+       </div>
+
+       <div className="pk-card pk-glass" style={{ width: '100%', maxWidth: '900px', padding: '3rem' }}>
+          <form onSubmit={handleSearch} className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem', alignItems: 'end' }}>
+             <div className="pk-input-group" style={{ margin: 0 }}>
+                <label className="pk-label">From</label>
+                <select 
+                  className="pk-input" 
+                  value={searchParams.from}
+                  onChange={e => setSearchParams({...searchParams, from: e.target.value})}
+                >
+                  {flightBookingMockData.airports.map(apt => <option key={apt} value={apt}>{apt}</option>)}
+                </select>
+             </div>
+             
+             <div className="pk-input-group" style={{ margin: 0 }}>
+                <label className="pk-label">To</label>
+                <select 
+                  className="pk-input" 
+                  value={searchParams.to}
+                  onChange={e => setSearchParams({...searchParams, to: e.target.value})}
+                >
+                  {flightBookingMockData.airports.map(apt => <option key={apt} value={apt}>{apt}</option>)}
+                </select>
+             </div>
+
+             <div className="pk-input-group" style={{ margin: 0 }}>
+                <label className="pk-label">Departure Date</label>
+                <input 
+                  type="date" 
+                  className="pk-input" 
+                  value={searchParams.date}
+                  onChange={e => setSearchParams({...searchParams, date: e.target.value})}
+                />
+             </div>
+
+             <div className="pk-input-group" style={{ margin: 0 }}>
+                <label className="pk-label">Passengers</label>
+                <input 
+                  type="number" 
+                  min="1" max="9"
+                  className="pk-input" 
+                  value={searchParams.passengers}
+                  onChange={e => setSearchParams({...searchParams, passengers: parseInt(e.target.value) || 1})}
+                />
+             </div>
+
+             <button type="submit" className="pk-btn pk-btn-primary" style={{ padding: '1.25rem', height: '100%' }}>
+                Search Flights
+             </button>
+          </form>
+       </div>
+
+       {bookedFlight && (
+         <button className="pk-btn pk-btn-outline" style={{ marginTop: '2rem' }} onClick={() => setCurrentView('pass')}>
+           View Upcoming Trip ({bookedFlight.bookingRef})
+         </button>
+       )}
+    </div>
+  );
+
+  const renderResults = () => {
+    // For demo: Fuzzy filter flights where 'from' and 'to' partially match
+    const flights = flightBookingMockData.flights.filter(f => 
+      f.from.includes(searchParams.from.split(' ')[0]) || 
+      f.to.includes(searchParams.to.split(' ')[0]) || 
+      true // Just return all so demo looks populated
+    );
+
+    return (
+      <div className="pk-container animate-fade-in">
+         <div className="pk-flex pk-justify-between pk-items-center" style={{ marginBottom: '2rem' }}>
+            <div>
+               <h2 className="pk-heading-lg">Select Departure Flight</h2>
+               <p className="pk-text-body">{searchParams.from} → {searchParams.to} | {searchParams.date} | {searchParams.passengers} Passenger(s)</p>
+            </div>
+            <button className="pk-btn pk-btn-outline" onClick={() => setCurrentView('search')}>Edit Search</button>
+         </div>
+
+         <div className="pk-flex pk-flex-col pk-gap-6">
+            {flights.map(flight => (
+               <div key={flight.id} className="pk-card pk-card-interactive" style={{ padding: '2rem', display: 'flex', flexWrap: 'wrap', gap: '2rem', alignItems: 'center' }}>
+                  <div style={{ flex: '1 1 300px' }}>
+                     <div className="pk-flex pk-justify-between pk-items-center" style={{ marginBottom: '1rem' }}>
+                        <span className="pk-badge">{flight.flightNumber}</span>
+                        <span className="pk-text-sm" style={{ color: 'var(--pk-primary)', fontWeight: 600 }}>{flight.duration}</span>
+                     </div>
+                     
+                     {/* Timeline Visualizer */}
+                     <div className="pk-flex pk-justify-between pk-items-center">
+                        <div className="pk-text-center">
+                           <h3 className="pk-heading-md">{flight.departureTime}</h3>
+                           <p className="pk-text-muted">{flight.from.split(' ')[0]}</p>
+                        </div>
+                        <div style={{ flex: 1, margin: '0 1rem', display: 'flex', alignItems: 'center', justifyItems: 'center' }}>
+                           <div style={{ height: '2px', background: 'var(--pk-border)', flex: 1 }}></div>
+                           <span style={{ margin: '0 1rem', fontSize: '1.5rem', opacity: 0.5 }}>✈️</span>
+                           <div style={{ height: '2px', background: 'var(--pk-border)', flex: 1 }}></div>
+                        </div>
+                        <div className="pk-text-center">
+                           <h3 className="pk-heading-md">{flight.arrivalTime}</h3>
+                           <p className="pk-text-muted">{flight.to.split(' ')[0]}</p>
+                        </div>
+                     </div>
+                  </div>
+
+                  <div style={{ width: '1px', background: 'var(--pk-border)', height: '100px', alignSelf: 'stretch' }} className="pk-hidden-mobile"></div>
+
+                  <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', gap: '1rem', minWidth: '150px' }}>
+                     <div className="pk-text-center">
+                        <span className="pk-text-sm pk-text-muted">Economy from</span>
+                        <h3 className="pk-heading-lg" style={{ color: 'var(--pk-secondary)' }}>${flight.price}</h3>
+                     </div>
+                     <button className="pk-btn pk-btn-outline" onClick={() => { setSelectedClass('economy'); handleSelectFlight(flight); }}>
+                        Select Economy
+                     </button>
+                  </div>
+                  
+                  <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', gap: '1rem', minWidth: '150px' }}>
+                     <div className="pk-text-center">
+                        <span className="pk-text-sm pk-text-muted">Business from</span>
+                        <h3 className="pk-heading-lg" style={{ color: 'var(--pk-primary)' }}>${flight.businessPrice}</h3>
+                     </div>
+                     <button className="pk-btn pk-btn-primary" onClick={() => { setSelectedClass('business'); handleSelectFlight(flight); }}>
+                        Select Business
+                     </button>
+                  </div>
+               </div>
+            ))}
+         </div>
+      </div>
+    );
+  };
+
+  const renderPassenger = () => (
+    <div className="pk-container animate-fade-in">
+       <button className="pk-btn pk-btn-outline" style={{ marginBottom: '2rem' }} onClick={() => setCurrentView('results')}>← Back to Flights</button>
+       
+       <div className="pk-grid" style={{ gridTemplateColumns: 'minmax(300px, 2fr) minmax(300px, 1fr)' }}>
+          <div className="pk-flex pk-flex-col pk-gap-6">
+             <div className="pk-card" style={{ padding: '2rem' }}>
+                <h2 className="pk-heading-md" style={{ marginBottom: '1.5rem', borderBottom: '1px solid var(--pk-border)', paddingBottom: '0.5rem' }}>Primary Passenger</h2>
+                <form onSubmit={handleBook} id="booking-form">
+                   <div className="pk-grid" style={{ gridTemplateColumns: '1fr 1fr' }}>
+                      <div className="pk-input-group">
+                         <label className="pk-label">First Name</label>
+                         <input type="text" className="pk-input" value={passengerDetails.firstName} onChange={e => setPassengerDetails({...passengerDetails, firstName: e.target.value})} required />
+                      </div>
+                      <div className="pk-input-group">
+                         <label className="pk-label">Last Name</label>
+                         <input type="text" className="pk-input" value={passengerDetails.lastName} onChange={e => setPassengerDetails({...passengerDetails, lastName: e.target.value})} required />
+                      </div>
+                   </div>
+                   <div className="pk-input-group">
+                      <label className="pk-label">Passport Number</label>
+                      <input type="text" className="pk-input" value={passengerDetails.passport} onChange={e => setPassengerDetails({...passengerDetails, passport: e.target.value})} required />
+                   </div>
+                </form>
+             </div>
+
+             <div className="pk-card" style={{ padding: '2rem' }}>
+                <h2 className="pk-heading-md" style={{ marginBottom: '1.5rem', borderBottom: '1px solid var(--pk-border)', paddingBottom: '0.5rem' }}>Customize Your Trip</h2>
+                
+                <div className="pk-flex pk-items-center pk-justify-between" style={{ padding: '1rem', background: 'var(--pk-bg-main)', borderRadius: 'var(--pk-radius-md)', marginBottom: '1rem' }}>
+                   <div>
+                      <h4 className="pk-label">Checked Baggage</h4>
+                      <p className="pk-text-sm">Up to 23kg per bag (${flightBookingMockData.addOns.checkedBag} each)</p>
+                   </div>
+                   <div className="pk-flex pk-items-center pk-gap-4">
+                      <button type="button" className="pk-btn pk-btn-outline" style={{ padding: '0.5rem', borderRadius: '50%', width: 40, height: 40 }} onClick={() => setBaggageCount(Math.max(0, baggageCount - 1))}>-</button>
+                      <span className="pk-heading-md">{baggageCount}</span>
+                      <button type="button" className="pk-btn pk-btn-outline" style={{ padding: '0.5rem', borderRadius: '50%', width: 40, height: 40 }} onClick={() => setBaggageCount(baggageCount + 1)}>+</button>
+                   </div>
+                </div>
+             </div>
+          </div>
+
+          <div>
+             <div className="pk-card" style={{ position: 'sticky', top: '100px' }}>
+                <div className="pk-card-header bg-gradient" style={{ background: 'linear-gradient(135deg, var(--pk-bg-main), var(--pk-primary-light))', padding: '2rem' }}>
+                   <span className="pk-badge" style={{ marginBottom: '1rem', display: 'inline-block' }}>{selectedClass.toUpperCase()}</span>
+                   <h3 className="pk-heading-md">{selectedFlight.from.split(' ')[0]} ✈ {selectedFlight.to.split(' ')[0]}</h3>
+                   <p className="pk-text-sm">{searchParams.date}</p>
+                </div>
+                <div className="pk-card-body pk-flex pk-flex-col pk-gap-4">
+                   <div className="pk-flex pk-justify-between">
+                      <span className="pk-text-body">1x Ticket</span>
+                      <span style={{ fontWeight: 600 }}>${selectedClass === 'business' ? selectedFlight.businessPrice : selectedFlight.price}</span>
+                   </div>
+                   {baggageCount > 0 && (
+                     <div className="pk-flex pk-justify-between">
+                        <span className="pk-text-body">{baggageCount}x Checked Bag</span>
+                        <span style={{ fontWeight: 600 }}>${baggageCount * flightBookingMockData.addOns.checkedBag}</span>
+                     </div>
+                   )}
+                   <hr style={{ border: 0, borderTop: '1px solid var(--pk-border)' }} />
+                   <div className="pk-flex pk-justify-between pk-items-center">
+                      <span className="pk-heading-md">Total</span>
+                      <span className="pk-heading-lg" style={{ color: 'var(--pk-primary)' }}>${calculateTotal()}</span>
+                   </div>
+                   
+                   <button type="submit" form="booking-form" className="pk-btn pk-btn-primary pk-w-full" style={{ marginTop: '1rem', padding: '1.25rem' }}>
+                      Confirm & Pay
+                   </button>
+                </div>
+             </div>
+          </div>
+       </div>
+    </div>
+  );
+
+  const renderPass = () => {
+    if (!bookedFlight) return null;
+
+    return (
+       <div className="pk-container animate-fade-in pk-flex pk-justify-center pk-items-center" style={{ minHeight: '80vh' }}>
+          <div className="pk-card" style={{ width: '100%', maxWidth: '400px', overflow: 'hidden', boxShadow: 'var(--pk-shadow-xl)' }}>
+             <div style={{ background: 'var(--pk-primary)', color: 'white', padding: '2rem', textAlign: 'center', position: 'relative' }}>
+                <h2 className="pk-heading-md" style={{ opacity: 0.9 }}>{flightBookingMockData.airlineName}</h2>
+                <h1 className="pk-heading-xl" style={{ margin: '1rem 0' }}>BOARDING</h1>
+                <p style={{ letterSpacing: '2px', opacity: 0.8 }}>PASS</p>
+                
+                {/* Visual cutout effect */}
+                <div style={{ position: 'absolute', bottom: '-10px', left: '-10px', width: '20px', height: '20px', background: 'var(--pk-bg-main)', borderRadius: '50%' }}></div>
+                <div style={{ position: 'absolute', bottom: '-10px', right: '-10px', width: '20px', height: '20px', background: 'var(--pk-bg-main)', borderRadius: '50%' }}></div>
+             </div>
+
+             <div className="pk-card-body" style={{ padding: '2rem', position: 'relative' }}>
+                <div className="pk-flex pk-justify-between pk-items-center" style={{ marginBottom: '2rem', borderBottom: '1px solid var(--pk-border)', paddingBottom: '1rem' }}>
+                   <div className="pk-text-center">
+                      <h2 className="pk-heading-xl" style={{ color: 'var(--pk-text-main)' }}>{bookedFlight.flight.from.split(' ')[0]}</h2>
+                      <p className="pk-text-sm pk-text-muted">{bookedFlight.flight.departureTime}</p>
+                   </div>
+                   <span style={{ fontSize: '2rem', color: 'var(--pk-primary)' }}>✈️</span>
+                   <div className="pk-text-center">
+                      <h2 className="pk-heading-xl" style={{ color: 'var(--pk-text-main)' }}>{bookedFlight.flight.to.split(' ')[0]}</h2>
+                      <p className="pk-text-sm pk-text-muted">{bookedFlight.flight.arrivalTime}</p>
+                   </div>
+                </div>
+
+                <div className="pk-grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '1.5rem', marginBottom: '2rem' }}>
+                   <div>
+                      <p className="pk-label pk-text-muted">Passenger</p>
+                      <p className="pk-heading-sm" style={{ fontWeight: 600 }}>{bookedFlight.passenger.firstName} {bookedFlight.passenger.lastName}</p>
+                   </div>
+                   <div>
+                      <p className="pk-label pk-text-muted">Flight</p>
+                      <p className="pk-heading-sm" style={{ fontWeight: 600 }}>{bookedFlight.flight.flightNumber}</p>
+                   </div>
+                   <div>
+                      <p className="pk-label pk-text-muted">Date</p>
+                      <p className="pk-heading-sm" style={{ fontWeight: 600 }}>{bookedFlight.date}</p>
+                   </div>
+                   <div>
+                      <p className="pk-label pk-text-muted">Class</p>
+                      <p className="pk-heading-sm" style={{ fontWeight: 600, textTransform: 'capitalize' }}>{bookedFlight.seatClass}</p>
+                   </div>
+                   <div>
+                      <p className="pk-label pk-text-muted">Seat</p>
+                      <p className="pk-heading-sm" style={{ fontWeight: 800, color: 'var(--pk-primary)', fontSize: '1.5rem' }}>12A</p>
+                   </div>
+                   <div>
+                      <p className="pk-label pk-text-muted">Gate</p>
+                      <p className="pk-heading-sm" style={{ fontWeight: 800, fontSize: '1.5rem' }}>G4</p>
+                   </div>
+                </div>
+
+                <div style={{ textAlign: 'center', marginTop: '2rem' }}>
+                   {/* Mock QR Code */}
+                   <div style={{ display: 'inline-block', padding: '10px', border: '2px solid var(--pk-border)', borderRadius: '12px' }}>
+                      <div style={{ width: '120px', height: '120px', background: 'repeating-linear-gradient(45deg, #000, #000 10px, transparent 10px, transparent 20px), repeating-linear-gradient(135deg, #000, #000 10px, transparent 10px, transparent 20px)' }}></div>
+                   </div>
+                   <p className="pk-text-sm" style={{ marginTop: '0.5rem', letterSpacing: '4px', fontFamily: 'monospace' }}>{bookedFlight.bookingRef}</p>
+                </div>
+             </div>
+
+             <div className="pk-card-footer pk-flex pk-justify-center" style={{ gap: '1rem', background: 'var(--pk-primary-light)' }}>
+                <button className="pk-btn pk-btn-outline" style={{ background: 'white' }} onClick={() => setCurrentView('search')}>New Booking</button>
+             </div>
+          </div>
+       </div>
+    );
+  };
+
+  return (
+    <div style={{ position: 'relative', minHeight: '100vh', backgroundColor: 'var(--pk-bg-main)' }}>
+      {isLoading && (
+        <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(255,255,255,0.7)', zIndex: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}>
+          <div className="pk-skeleton" style={{ width: '80px', height: '80px', borderRadius: '50%', marginBottom: '1rem' }}></div>
+          <h3 className="pk-heading-md">Searching Global Skies...</h3>
+        </div>
+      )}
+
+      {currentView === 'search' && renderSearch()}
+      {currentView === 'results' && renderResults()}
+      {currentView === 'passenger' && renderPassenger()}
+      {currentView === 'pass' && renderPass()}
+      
+      <ToastContainer />
+    </div>
+  );
+}