| 1 |
/** |
| 2 |
* Itinerary Section Component |
| 3 |
* Simple launch button to open the full itinerary builder |
| 4 |
*/ |
| 5 |
|
| 6 |
import React, { useMemo } from "react"; |
| 7 |
import { Calendar, ExternalLink, AlertCircle } from "lucide-react"; |
| 8 |
import { __ } from "../../../lib/i18n"; |
| 9 |
import { SectionHeader } from "../shared"; |
| 10 |
import { Button } from "../../ui/button"; |
| 11 |
import { Card, CardContent } from "../../ui/card"; |
| 12 |
|
| 13 |
interface ItinerarySectionProps { |
| 14 |
formData: any; |
| 15 |
isEditMode: boolean; |
| 16 |
tripId: number | null; |
| 17 |
} |
| 18 |
|
| 19 |
export const ItinerarySection: React.FC<ItinerarySectionProps> = ({ |
| 20 |
formData, |
| 21 |
isEditMode, |
| 22 |
tripId, |
| 23 |
}) => { |
| 24 |
const itineraryLink = useMemo(() => { |
| 25 |
if (!isEditMode || !tripId) return null; |
| 26 |
return `${window.yatraAdmin?.siteUrl || ""}/wp-admin/admin.php?page=yatra&subpage=itinerary&tab=itinerary&trip_id=${tripId}`; |
| 27 |
}, [isEditMode, tripId]); |
| 28 |
|
| 29 |
return ( |
| 30 |
<> |
| 31 |
<div className="space-y-6"> |
| 32 |
<SectionHeader |
| 33 |
icon={Calendar} |
| 34 |
title="Itinerary Builder" |
| 35 |
description="Create detailed day-by-day itineraries with our professional itinerary builder" |
| 36 |
/> |
| 37 |
|
| 38 |
{/* Launch Itinerary Builder Card */} |
| 39 |
{itineraryLink ? ( |
| 40 |
<Card className="border-2 border-dashed border-blue-300 dark:border-blue-700 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30"> |
| 41 |
<CardContent className="p-8"> |
| 42 |
<div className="text-center space-y-4"> |
| 43 |
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/50 mb-2"> |
| 44 |
<Calendar className="h-8 w-8 text-blue-600 dark:text-blue-400" /> |
| 45 |
</div> |
| 46 |
|
| 47 |
<div> |
| 48 |
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2"> |
| 49 |
{__("Professional Itinerary Builder", "yatra")} |
| 50 |
</h3> |
| 51 |
<p className="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"> |
| 52 |
{__( |
| 53 |
"Create detailed day-by-day itineraries with activities, meals, accommodation, transportation, and more. Build professional trip schedules that help travelers understand the complete experience.", |
| 54 |
"yatra", |
| 55 |
)} |
| 56 |
</p> |
| 57 |
</div> |
| 58 |
|
| 59 |
{/* Current Itinerary Stats */} |
| 60 |
{formData.itinerary_days && |
| 61 |
formData.itinerary_days.length > 0 && ( |
| 62 |
<div className="grid grid-cols-2 gap-4 max-w-md mx-auto"> |
| 63 |
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm"> |
| 64 |
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400"> |
| 65 |
{formData.itinerary_days.length} |
| 66 |
</div> |
| 67 |
<div className="text-xs text-gray-600 dark:text-gray-400"> |
| 68 |
{formData.itinerary_days.length === 1 |
| 69 |
? __("Day", "yatra") |
| 70 |
: __("Days", "yatra")} |
| 71 |
</div> |
| 72 |
</div> |
| 73 |
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm"> |
| 74 |
<div className="text-2xl font-bold text-green-600 dark:text-green-400"> |
| 75 |
{formData.itinerary_days.reduce( |
| 76 |
(sum: number, day: any) => |
| 77 |
sum + (day.entries?.length || 0), |
| 78 |
0, |
| 79 |
)} |
| 80 |
</div> |
| 81 |
<div className="text-xs text-gray-600 dark:text-gray-400"> |
| 82 |
{__("Activities", "yatra")} |
| 83 |
</div> |
| 84 |
</div> |
| 85 |
</div> |
| 86 |
)} |
| 87 |
|
| 88 |
<div> |
| 89 |
<Button |
| 90 |
type="button" |
| 91 |
onClick={() => |
| 92 |
window.open( |
| 93 |
itineraryLink, |
| 94 |
"_blank", |
| 95 |
"noopener,noreferrer", |
| 96 |
) |
| 97 |
} |
| 98 |
className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-8 py-6 text-base shadow-lg hover:shadow-xl transition-all" |
| 99 |
size="lg" |
| 100 |
> |
| 101 |
<ExternalLink className="h-5 w-5 mr-2" /> |
| 102 |
{__("Launch Itinerary Builder", "yatra")} |
| 103 |
</Button> |
| 104 |
</div> |
| 105 |
</div> |
| 106 |
</CardContent> |
| 107 |
</Card> |
| 108 |
) : ( |
| 109 |
<Card className="border-2 border-dashed border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/30"> |
| 110 |
<CardContent className="p-6 text-center"> |
| 111 |
<AlertCircle className="h-12 w-12 text-amber-600 dark:text-amber-400 mx-auto mb-3" /> |
| 112 |
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2"> |
| 113 |
{__("Save Trip First", "yatra")} |
| 114 |
</h3> |
| 115 |
<p className="text-gray-600 dark:text-gray-400"> |
| 116 |
{__( |
| 117 |
"Please save this trip first to access the itinerary builder. The builder will automatically load this trip for you.", |
| 118 |
"yatra", |
| 119 |
)} |
| 120 |
</p> |
| 121 |
</CardContent> |
| 122 |
</Card> |
| 123 |
)} |
| 124 |
</div> |
| 125 |
</> |
| 126 |
); |
| 127 |
}; |
| 128 |
|
