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

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

311 lines 10.7 KB

Raw Download Zip

1	/**
2	* Email Automation Premium Page
3	*
4	* Premium upgrade page for Email Automation 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	Mail,
17	FileText,
18	Clock,
19	Users,
20	Sparkles,
21	CheckCircle,
22	ArrowRight,
23	Send,
24	Bell,
25	Megaphone,
26	BarChart,
27	Zap,
28	CreditCard,
29	Calendar,
30	} from "lucide-react";
31
32	// Premium Upgrade Component
33	const EmailAutomationPremium: React.FC = () => {
34	const features = [
35	{
36	icon: FileText,
37	title: __("Custom Email Templates"),
38	description: __(
39	"Edit and customize all system email templates with your branding.",
40	),
41	},
42	{
43	icon: Clock,
44	title: __("Automated Sequences"),
45	description: __(
46	"Create drip campaigns and automated email sequences for different triggers.",
47	),
48	},
49	{
50	icon: Send,
51	title: __("Smart Triggers"),
52	description: __(
53	"Set up automatic emails based on booking status, payments, and customer actions.",
54	),
55	},
56	{
57	icon: BarChart,
58	title: __("Email Analytics"),
59	description: __(
60	"Track email delivery rates, open rates, and engagement metrics.",
61	),
62	},
63	];
64
65	const stats = [
66	{
67	icon: BarChart,
68	value: "68%",
69	label: __("Higher Open Rates"),
70	},
71	{
72	icon: Users,
73	value: "3.5x",
74	label: __("Booking Conversion"),
75	},
76	{
77	icon: Zap,
78	value: "24/7",
79	label: __("Automation"),
80	},
81	];
82
83	const emailTypes = [
84	{
85	icon: Bell,
86	title: __("Booking Confirmations"),
87	description: __("Instant booking confirmation emails with all details."),
88	trigger: __("On booking creation"),
89	},
90	{
91	icon: CreditCard,
92	title: __("Payment Notifications"),
93	description: __("Payment received, failed, and refund notifications."),
94	trigger: __("On payment status change"),
95	},
96	{
97	icon: Calendar,
98	title: __("Trip Reminders"),
99	description: __("Pre-trip reminders and departure notifications."),
100	trigger: __("Before trip date"),
101	},
102	{
103	icon: Megaphone,
104	title: __("Marketing Emails"),
105	description: __("Promotional campaigns and newsletter broadcasts."),
106	trigger: __("Manual/automated"),
107	},
108	];
109
110	return (
111	<div className="space-y-8">
112	{/* Premium Notice */}
113	<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">
114	<div className="flex items-center justify-between">
115	<div className="flex items-center gap-3">
116	<Sparkles className="w-6 h-6 text-amber-600 dark:text-amber-400" />
117	<div>
118	<h3 className="text-lg font-semibold text-amber-900 dark:text-amber-100">
119	{__("Premium Feature")}
120	</h3>
121	<p className="text-amber-700 dark:text-amber-300 text-sm">
122	{__(
123	"Email Automation is a premium module. Upgrade to Yatra Pro to unlock advanced email marketing.",
124	)}
125	</p>
126	</div>
127	</div>
128	<Button
129	className="bg-amber-600 text-white hover:bg-amber-700 px-6 py-2 text-sm font-medium"
130	onClick={() =>
131	window.open(
132	"https://wpyatra.com/pricing?module=email-automation",
133	"_blank",
134	)
135	}
136	>
137	{__("Upgrade to Pro")}
138	<ArrowRight className="w-4 h-4 ml-2" />
139	</Button>
140	</div>
141	</div>
142
143	{/* Hero Section */}
144	<div className="text-center mb-12">
145	<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900 mb-6">
146	<Mail className="w-8 h-8 text-blue-600 dark:text-blue-400" />
147	</div>
148	<div className="flex items-center justify-center space-x-2 mb-4">
149	<h1 className="text-4xl font-bold text-gray-900 dark:text-white">
150	{__("Email Automation")}
151	</h1>
152	</div>
153	<p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
154	{__(
155	"Create powerful email campaigns, automate customer communication, and track engagement with Yatra Pro.",
156	)}
157	</p>
158	</div>
159
160	{/* Stats */}
161	<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
162	{stats.map((stat, index) => {
163	const Icon = stat.icon;
164	return (
165	<Card key={index} className="text-center">
166	<CardContent className="pt-6">
167	<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mx-auto mb-4">
168	<Icon className="w-6 h-6 text-blue-600 dark:text-blue-400" />
169	</div>
170	<div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
171	{stat.value}
172	</div>
173	<div className="text-sm text-gray-600 dark:text-gray-400">
174	{stat.label}
175	</div>
176	</CardContent>
177	</Card>
178	);
179	})}
180	</div>
181
182	{/* Features */}
183	<div className="mb-12">
184	<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">
185	{__("Powerful Email Features")}
186	</h2>
187	<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
188	{features.map((feature, index) => {
189	const Icon = feature.icon;
190	return (
191	<Card
192	key={index}
193	className="border border-gray-200 dark:border-gray-700"
194	>
195	<CardContent className="pt-6">
196	<div className="text-center">
197	<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mx-auto mb-4">
198	<Icon className="w-6 h-6 text-blue-600 dark:text-blue-400" />
199	</div>
200	<h4 className="font-semibold mb-2">{feature.title}</h4>
201	<p className="text-sm text-gray-600 dark:text-gray-400">
202	{feature.description}
203	</p>
204	</div>
205	</CardContent>
206	</Card>
207	);
208	})}
209	</div>
210	</div>
211
212	{/* Email Types */}
213	<div className="mb-12">
214	<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">
215	{__("Automated Email Types")}
216	</h2>
217	<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
218	{emailTypes.map((emailType, index) => {
219	const Icon = emailType.icon;
220	return (
221	<Card
222	key={index}
223	className="border border-gray-200 dark:border-gray-700"
224	>
225	<CardContent className="p-6">
226	<div className="flex items-start gap-4">
227	<div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center flex-shrink-0">
228	<Icon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
229	</div>
230	<div>
231	<h4 className="font-semibold text-gray-900 dark:text-white mb-2">
232	{emailType.title}
233	</h4>
234	<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
235	{emailType.description}
236	</p>
237	<div className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
238	{emailType.trigger}
239	</div>
240	</div>
241	</div>
242	</CardContent>
243	</Card>
244	);
245	})}
246	</div>
247	</div>
248
249	{/* CTA Section */}
250	<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">
251	<div className="flex flex-col md:flex-row items-center justify-between">
252	<div className="mb-6 md:mb-0 md:pr-8">
253	<div className="flex items-center gap-3 mb-4">
254	<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
255	<Sparkles className="w-6 h-6 text-blue-600 dark:text-blue-400" />
256	</div>
257	<h3 className="text-2xl font-bold text-gray-900 dark:text-white">
258	{__("Unlock Email Automation")}
259	</h3>
260	</div>
261	<p className="text-gray-600 dark:text-gray-400 mb-4">
262	{__(
263	"Transform your customer communication with intelligent email automation and drive more bookings with Yatra Pro.",
264	)}
265	</p>
266	<div className="space-y-2">
267	<div className="flex items-center gap-2">
268	<CheckCircle className="w-4 h-4 text-green-500" />
269	<span className="text-sm text-gray-600 dark:text-gray-400">
270	{__("Custom email templates")}
271	</span>
272	</div>
273	<div className="flex items-center gap-2">
274	<CheckCircle className="w-4 h-4 text-green-500" />
275	<span className="text-sm text-gray-600 dark:text-gray-400">
276	{__("Automated sequences")}
277	</span>
278	</div>
279	<div className="flex items-center gap-2">
280	<CheckCircle className="w-4 h-4 text-green-500" />
281	<span className="text-sm text-gray-600 dark:text-gray-400">
282	{__("Email analytics")}
283	</span>
284	</div>
285	</div>
286	</div>
287	<div className="flex flex-col items-center">
288	<Button
289	className="bg-blue-600 text-white hover:bg-blue-700 px-8 py-3 text-sm font-medium mb-3"
290	onClick={() =>
291	window.open(
292	"https://wpyatra.com/pricing?module=email-automation",
293	"_blank",
294	)
295	}
296	>
297	{__("Upgrade to Pro")}
298	<ArrowRight className="w-4 h-4 ml-2" />
299	</Button>
300	<p className="text-xs text-gray-500 dark:text-gray-400">
301	{__("14-day money-back guarantee")}
302	</p>
303	</div>
304	</div>
305	</div>
306	</div>
307	);
308	};
309
310	export default EmailAutomationPremium;
311