yatra / resources / js / components / ProFeature.tsx

ProFeature.tsx in Yatra – Travel Booking & Tour Operator Software 3.0.15, at resources/js/components/ProFeature.tsx

154 lines 5.1 KB

Raw Download Zip

1	import React, { useMemo } from "react";
2	import { Button } from "./ui/button";
3	import { __ } from "@wordpress/i18n";
4
5	// Pro Feature Component Props
6	interface ProFeatureProps {
7	title?: string;
8	description: string;
9	moduleName: string;
10	pricingUrl: string;
11	isProActive: boolean;
12	isModuleEnabled: boolean;
13	children: React.ReactNode;
14	}
15
16	// Reusable PRO Badge Component Props
17	interface ProBadgeProps {
18	isProActive: boolean;
19	}
20
21	// Reusable PRO Badge Component
22	export const ProBadge: React.FC<ProBadgeProps> = ({ isProActive }) => {
23	// Only show PRO badge when Pro is not active
24	if (!isProActive) {
25	return (
26	<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gradient-to-r from-purple-500 to-blue-500 text-white">
27	PRO
28	</span>
29	);
30	}
31	return null;
32	};
33
34	// Reusable Pro Feature Component
35	export const ProFeature: React.FC<ProFeatureProps> = ({
36	title,
37	description,
38	moduleName,
39	pricingUrl,
40	isProActive,
41	isModuleEnabled,
42	children,
43	}) => {
44	// Get the correct modules page URL
45	const modulesPageUrl = useMemo(() => {
46	const baseUrl = window.yatraAdmin?.siteUrl
47	? `${window.yatraAdmin.siteUrl}/wp-admin/admin.php?page=yatra`
48	: "/wp-admin/admin.php?page=yatra";
49	return `${baseUrl}&subpage=modules`;
50	}, []);
51
52	// Show full settings if Pro is active AND module is enabled
53	if (isProActive && isModuleEnabled) {
54	return <>{children}</>;
55	}
56
57	// Show "Enable Module" if Pro is active BUT module is not enabled
58	if (isProActive && !isModuleEnabled) {
59	return (
60	<div className="p-4 bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
61	<div className="flex items-start gap-3">
62	<div className="flex-shrink-0">
63	<svg
64	className="w-6 h-6 text-amber-500"
65	fill="none"
66	stroke="currentColor"
67	viewBox="0 0 24 24"
68	>
69	<path
70	strokeLinecap="round"
71	strokeLinejoin="round"
72	strokeWidth={2}
73	d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
74	/>
75	</svg>
76	</div>
77	<div className="flex-1">
78	<h4 className="text-sm font-semibold text-amber-900 dark:text-amber-100">
79	{__("Please activate", "yatra")} {moduleName}
80	</h4>
81	<p className="text-sm text-amber-700 dark:text-amber-300 mt-1">
82	{__("You have Yatra Pro installed. Enable the", "yatra")}{" "}
83	{moduleName} {__("module to access", "yatra")}{" "}
84	{description.toLowerCase()} {__("features.", "yatra")}
85	</p>
86	<Button
87	type="button"
88	onClick={() => window.open(modulesPageUrl, "_blank")}
89	className="mt-3 bg-amber-600 hover:bg-amber-700 text-white"
90	>
91	{__("Activate Module", "yatra")}
92	</Button>
93	</div>
94	</div>
95	</div>
96	);
97	}
98
99	// Show "Upgrade to Pro" if Pro is not active
100	return (
101	<div className="p-4 bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-900/20 dark:to-blue-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
102	<div className="flex items-start gap-3">
103	<div className="flex-shrink-0">
104	<svg
105	className="w-6 h-6 text-purple-500"
106	fill="none"
107	stroke="currentColor"
108	viewBox="0 0 24 24"
109	>
110	<path
111	strokeLinecap="round"
112	strokeLinejoin="round"
113	strokeWidth={2}
114	d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
115	/>
116	</svg>
117	</div>
118	<div className="flex-1">
119	<h4 className="text-sm font-semibold text-purple-900 dark:text-purple-100">
120	{__("Upgrade to Pro for", "yatra")} {moduleName}
121	</h4>
122	<p className="text-sm text-purple-700 dark:text-purple-300 mt-1">
123	{__(
124	`Get Yatra Pro to access ${description} and unlock all premium features.`,
125	"yatra",
126	)}
127	</p>
128	<a
129	href={pricingUrl}
130	target="_blank"
131	rel="noopener noreferrer"
132	className="inline-flex items-center gap-2 mt-3 px-4 py-2 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg text-sm font-medium hover:from-purple-700 hover:to-blue-700 transition-all"
133	>
134	{__("Upgrade to Pro", "yatra")}
135	<svg
136	className="w-4 h-4"
137	fill="none"
138	stroke="currentColor"
139	viewBox="0 0 24 24"
140	>
141	<path
142	strokeLinecap="round"
143	strokeLinejoin="round"
144	strokeWidth={2}
145	d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
146	/>
147	</svg>
148	</a>
149	</div>
150	</div>
151	</div>
152	);
153	};
154