← All changes | resources/js/pages/Modules.tsx +39 -2 3.0.6 → 3.0.16 View file →

		@@ -4,8 +4,9 @@
4	4	Search,
5	5	Filter,
6	6	ArrowUpDown,
7	7	ExternalLink,
	8	+ ArrowUpRight,
8	9	} from "lucide-react";
9	10	import { __ } from "../lib/i18n";
10	11	import { PageHeader } from "../components/common/PageHeader";
11	12	import {
		@@ -28,8 +29,25 @@
28	29	} from "../hooks/useModules";
29	30	import { usePermissions } from "../hooks/usePermissions";
30	31	import { PremiumUpgradeDialog } from "../components/modules/PremiumUpgradeDialog";
31	32
	33	+/**
	34	+ * Build the "Learn more" link to a module's dedicated feature page on
	35	+ * wpyatra.com (e.g. https://wpyatra.com/features/dynamic-pricing/), tagged with
	36	+ * UTM params. The feature-page slug matches the docs slug, so we derive it from
	37	+ * the module's docs_url last segment (defined once per module on the backend).
	38	+ * Returns null when there's no docs_url to derive a slug from.
	39	+ */
	40	+const featureUrlFromDocs = (docsUrl?: string): string | null => {
	41	+ if (!docsUrl) return null;
	42	+ const slug = docsUrl.replace(/\/+$/, "").split("/").pop();
	43	+ if (!slug) return null;
	44	+ const params =
	45	+ "utm_source=plugin&utm_medium=modules&utm_campaign=learn-more&utm_content=" +
	46	+ encodeURIComponent(slug);
	47	+ return `https://wpyatra.com/features/${slug}/?${params}`;
	48	+};
	49	+
32	50	const Modules: React.FC = () => {
33	51	const { can } = usePermissions();
34	52	const canManageModules = can("yatra_edit_trips");
35	53	const { data: modules = [], isLoading, error } = useModulesQuery();
		@@ -576,9 +594,12 @@
576	594	</div>
577	595	</div>
578	596	</CardHeader>
579	597	<CardContent className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
580		- <div className="flex items-center gap-2">
	598	+ <div
	599	+ className="flex items-center gap-2"
	600	+ onClick={(e) => e.stopPropagation()}
	601	+ >
581	602	{module.video_url && (
582	603	<a
583	604	href={module.video_url}
584	605	target="_blank"
		@@ -600,9 +621,12 @@
600	621	{__("Video", "yatra")}
601	622	</a>
602	623	)}
603	624	</div>
604		- <div className="flex items-center gap-2">
	625	+ <div
	626	+ className="flex items-center gap-2"
	627	+ onClick={(e) => e.stopPropagation()}
	628	+ >
605	629	{module.slug === "dynamic_form_field" && module.enabled && (
606	630	<a
607	631	href={`${window.location.origin}/wp-admin/admin.php?page=yatra&subpage=settings`}
608	632	className="flex items-center gap-1 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 text-xs font-medium"
		@@ -620,8 +644,21 @@
620	644	<circle cx="12" cy="12" r="3"></circle>
621	645	<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
622	646	</svg>
623	647	{__("Settings", "yatra")}
	648	+ </a>
	649	+ )}
	650	+ {featureUrlFromDocs(module.docs_url) && (
	651	+ <a
	652	+ href={featureUrlFromDocs(module.docs_url) as string}
	653	+ target="_blank"
	654	+ rel="noopener noreferrer"
	655	+ onClick={(e) => e.stopPropagation()}
	656	+ className="flex items-center gap-1 text-blue-600 hover:text-blue-500 dark:text-blue-400 text-xs font-medium"
	657	+ title={__("Learn more about this feature", "yatra")}
	658	+ >
	659	+ <ArrowUpRight className="w-3 h-3" />
	660	+ {__("Learn more", "yatra")}
624	661	</a>
625	662	)}
626	663	{module.docs_url && (
627	664	<a