yatra / resources / js / pages / premium-pages / DynamicPricing.tsx

DynamicPricing.tsx in Yatra – Travel Booking & Tour Operator Software 3.0.13, at resources/js/pages/premium-pages/DynamicPricing.tsx

388 lines 14.0 KB

Raw Download Zip

1	/**
2	* Dynamic Pricing Premium Page
3	*
4	* Premium upgrade page for Dynamic Pricing module.
5	* Shows when Yatra Pro is not active or module is not enabled.
6	*
7	* @package Yatra
8	* @since 3.0.0
9	*/
10
11	import React from "react";
12	import { Card, CardContent } from "../../components/ui/card";
13	import { Button } from "../../components/ui/button";
14	import { __ } from "../../lib/i18n";
15	import {
16	Target,
17	DollarSign,
18	Calendar,
19	Users,
20	Sparkles,
21	CheckCircle,
22	ArrowRight,
23	Zap,
24	TrendingUp,
25	BarChart,
26	Clock,
27	Activity,
28	} from "lucide-react";
29
30	// Premium Upgrade Component
31	const DynamicPricingPremium: React.FC = () => {
32	const features = [
33	{
34	icon: Target,
35	title: __("Smart Pricing Rules"),
36	description: __(
37	"Create intelligent pricing rules based on demand, season, and booking patterns.",
38	),
39	},
40	{
41	icon: Calendar,
42	title: __("Time-based Pricing"),
43	description: __(
44	"Set different prices for early bookings, last-minute deals, and peak seasons.",
45	),
46	},
47	{
48	icon: Users,
49	title: __("Group Pricing"),
50	description: __(
51	"Offer tiered pricing based on group size and booking volume.",
52	),
53	},
54	{
55	icon: BarChart,
56	title: __("Revenue Analytics"),
57	description: __(
58	"Track pricing performance and optimize your revenue strategy.",
59	),
60	},
61	];
62
63	const stats = [
64	{
65	icon: TrendingUp,
66	value: "42%",
67	label: __("Revenue Increase"),
68	},
69	{
70	icon: Users,
71	value: "3.2x",
72	label: __("Booking Conversion"),
73	},
74	{
75	icon: Target,
76	value: "Unlimited",
77	label: __("Pricing Rules"),
78	},
79	{
80	icon: DollarSign,
81	value: "Auto",
82	label: __("Price Optimization"),
83	},
84	];
85
86	const popularRules = [
87	{
88	icon: Clock,
89	title: __("Early Bird Discounts"),
90	description: __("Reward early bookings with attractive discounts."),
91	discount: __("Save up to 20%"),
92	},
93	{
94	icon: Zap,
95	title: __("Last-minute Deals"),
96	description: __("Fill remaining spots with dynamic last-minute pricing."),
97	discount: __("Save up to 30%"),
98	},
99	{
100	icon: Calendar,
101	title: __("Seasonal Pricing"),
102	description: __(
103	"Adjust prices automatically based on peak and off-peak seasons.",
104	),
105	discount: __("Varies by season"),
106	},
107	{
108	icon: Users,
109	title: __("Group Discounts"),
110	description: __("Offer better rates for larger group bookings."),
111	discount: __("Save 10-25%"),
112	},
113	];
114
115	return (
116	<div className="space-y-8">
117	{/* Premium Notice */}
118	<div className="bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-6">
119	<div className="flex items-center justify-between">
120	<div className="flex items-center gap-3">
121	<Sparkles className="w-6 h-6 text-amber-600 dark:text-amber-400" />
122	<div>
123	<h3 className="text-lg font-semibold text-amber-900 dark:text-amber-100">
124	{__("Premium Feature")}
125	</h3>
126	<p className="text-amber-700 dark:text-amber-300 text-sm">
127	{__(
128	"Dynamic Pricing is a premium module. Upgrade to Yatra Pro to unlock intelligent pricing automation.",
129	)}
130	</p>
131	</div>
132	</div>
133	<Button
134	className="bg-amber-600 text-white hover:bg-amber-700 px-6 py-2 text-sm font-medium"
135	onClick={() =>
136	window.open(
137	"https://wpyatra.com/pricing?module=dynamic-pricing",
138	"_blank",
139	)
140	}
141	>
142	{__("Upgrade to Pro")}
143	<ArrowRight className="w-4 h-4 ml-2" />
144	</Button>
145	</div>
146	</div>
147
148	{/* Hero Section */}
149	<div className="text-center mb-12">
150	<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900 mb-6">
151	<Target className="w-8 h-8 text-blue-600 dark:text-blue-400" />
152	</div>
153	<div className="flex items-center justify-center space-x-2 mb-4">
154	<h1 className="text-4xl font-bold text-gray-900 dark:text-white">
155	{__("Dynamic Pricing")}
156	</h1>
157	<div className="inline-flex items-center px-2 py-1 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white text-xs font-semibold shadow-md">
158	<Sparkles className="w-3 h-3 mr-1" />
159	{__("PRO")}
160	</div>
161	</div>
162	<p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
163	{__(
164	"Maximize your revenue with intelligent pricing that automatically adjusts based on demand, season, and booking patterns.",
165	)}
166	</p>
167	</div>
168
169	{/* Stats Preview */}
170	<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
171	{stats.map((stat, index) => {
172	const Icon = stat.icon;
173	return (
174	<Card
175	key={index}
176	className="border border-gray-200 dark:border-gray-700"
177	>
178	<CardContent className="pt-6">
179	<div className="flex items-center gap-3 mb-2">
180	<div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
181	<Icon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
182	</div>
183	<div>
184	<div className="text-2xl font-bold text-gray-900 dark:text-white">
185	{stat.value}
186	</div>
187	<div className="text-sm text-gray-600 dark:text-gray-400">
188	{stat.label}
189	</div>
190	</div>
191	</div>
192	</CardContent>
193	</Card>
194	);
195	})}
196	</div>
197
198	{/* Features Grid */}
199	<div className="mb-12">
200	<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
201	{__("Powerful Features")}
202	</h2>
203	<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
204	{features.map((feature, index) => {
205	const Icon = feature.icon;
206	return (
207	<Card
208	key={index}
209	className="border border-gray-200 dark:border-gray-700"
210	>
211	<CardContent className="pt-6">
212	<div className="flex items-start gap-4">
213	<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center flex-shrink-0">
214	<Icon className="w-6 h-6 text-blue-600 dark:text-blue-400" />
215	</div>
216	<div>
217	<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
218	{feature.title}
219	</h3>
220	<p className="text-gray-600 dark:text-gray-400 text-sm">
221	{feature.description}
222	</p>
223	</div>
224	</div>
225	</CardContent>
226	</Card>
227	);
228	})}
229	</div>
230	</div>
231
232	{/* Popular Rules */}
233	<div className="mb-12">
234	<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
235	{__("Popular Pricing Rules")}
236	</h2>
237	<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
238	{popularRules.map((rule, index) => {
239	const Icon = rule.icon;
240	return (
241	<Card
242	key={index}
243	className="border border-gray-200 dark:border-gray-700"
244	>
245	<CardContent className="pt-6">
246	<div className="text-center">
247	<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mx-auto mb-4">
248	<Icon className="w-6 h-6 text-blue-600 dark:text-blue-400" />
249	</div>
250	<h4 className="font-semibold mb-2">{rule.title}</h4>
251	<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
252	{rule.description}
253	</p>
254	<div className="text-blue-600 dark:text-blue-400 font-semibold text-sm">
255	{rule.discount}
256	</div>
257	</div>
258	</CardContent>
259	</Card>
260	);
261	})}
262	</div>
263	</div>
264
265	{/* How It Works */}
266	<Card className="mb-12 border border-gray-200 dark:border-gray-700">
267	<CardContent className="pt-6">
268	<div className="mb-6">
269	<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
270	{__("How It Works")}
271	</h2>
272	<p className="text-gray-600 dark:text-gray-400">
273	{__("Intelligent pricing in 4 simple steps")}
274	</p>
275	</div>
276	<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
277	<div className="text-center">
278	<div className="w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mx-auto mb-4">
279	<Target className="w-8 h-8 text-blue-600 dark:text-blue-400" />
280	</div>
281	<h4 className="font-semibold mb-2">{__("1. Set Rules")}</h4>
282	<p className="text-sm text-gray-600 dark:text-gray-400">
283	{__(
284	"Define pricing rules based on demand, season, and booking patterns",
285	)}
286	</p>
287	</div>
288
289	<div className="text-center">
290	<div className="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mx-auto mb-4">
291	<Activity className="w-8 h-8 text-green-600 dark:text-green-400" />
292	</div>
293	<h4 className="font-semibold mb-2">{__("2. Monitor Demand")}</h4>
294	<p className="text-sm text-gray-600 dark:text-gray-400">
295	{__("System tracks booking patterns and demand in real-time")}
296	</p>
297	</div>
298
299	<div className="text-center">
300	<div className="w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mx-auto mb-4">
301	<Zap className="w-8 h-8 text-purple-600 dark:text-purple-400" />
302	</div>
303	<h4 className="font-semibold mb-2">{__("3. Auto-Adjust")}</h4>
304	<p className="text-sm text-gray-600 dark:text-gray-400">
305	{__(
306	"Prices automatically adjust based on your predefined rules",
307	)}
308	</p>
309	</div>
310
311	<div className="text-center">
312	<div className="w-16 h-16 rounded-full bg-orange-100 dark:bg-orange-900 flex items-center justify-center mx-auto mb-4">
313	<TrendingUp className="w-8 h-8 text-orange-600 dark:text-orange-400" />
314	</div>
315	<h4 className="font-semibold mb-2">
316	{__("4. Maximize Revenue")}
317	</h4>
318	<p className="text-sm text-gray-600 dark:text-gray-400">
319	{__("Optimize pricing for maximum revenue and occupancy")}
320	</p>
321	</div>
322	</div>
323	</CardContent>
324	</Card>
325
326	{/* CTA Section */}
327	<div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-8">
328	<div className="flex flex-col md:flex-row items-center justify-between">
329	<div className="mb-6 md:mb-0 md:pr-8">
330	<div className="flex items-center gap-3 mb-4">
331	<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
332	<Sparkles className="w-6 h-6 text-blue-600 dark:text-blue-400" />
333	</div>
334	<h3 className="text-2xl font-bold text-gray-900 dark:text-white">
335	{__("Unlock Dynamic Pricing")}
336	</h3>
337	</div>
338	<p className="text-gray-600 dark:text-gray-400 mb-4">
339	{__(
340	"Get intelligent price adjustments and maximize your revenue with Yatra Pro.",
341	)}
342	</p>
343	<div className="space-y-2">
344	<div className="flex items-center gap-2">
345	<CheckCircle className="w-4 h-4 text-green-500" />
346	<span className="text-sm text-gray-600 dark:text-gray-400">
347	{__("Early bird discounts")}
348	</span>
349	</div>
350	<div className="flex items-center gap-2">
351	<CheckCircle className="w-4 h-4 text-green-500" />
352	<span className="text-sm text-gray-600 dark:text-gray-400">
353	{__("Last-minute deals")}
354	</span>
355	</div>
356	<div className="flex items-center gap-2">
357	<CheckCircle className="w-4 h-4 text-green-500" />
358	<span className="text-sm text-gray-600 dark:text-gray-400">
359	{__("Demand-based pricing")}
360	</span>
361	</div>
362	</div>
363	</div>
364	<div className="flex flex-col items-center">
365	<Button
366	className="bg-blue-600 text-white hover:bg-blue-700 px-8 py-3 text-sm font-medium mb-3"
367	onClick={() =>
368	window.open(
369	"https://wpyatra.com/pricing?module=dynamic-pricing",
370	"_blank",
371	)
372	}
373	>
374	{__("Upgrade to Pro")}
375	<ArrowRight className="w-4 h-4 ml-2" />
376	</Button>
377	<p className="text-xs text-gray-500 dark:text-gray-400">
378	{__("14-day money-back guarantee")}
379	</p>
380	</div>
381	</div>
382	</div>
383	</div>
384	);
385	};
386
387	export default DynamicPricingPremium;
388