# disco/1.3.51/backend/views/components/CompatiblePluginList/App.jsx

Discount Rules for WooCommerce – Disco | Dynamic Pricing, Conditions, Bulk, Bundle, BOGO, version 1.3.51. 32 lines.

- Page: https://pluginprobe.com/plugins/disco/1.3.51/code/backend/views/components/CompatiblePluginList/App.jsx
- Raw: https://pluginprobe.com/plugins/disco/1.3.51/raw/backend/views/components/CompatiblePluginList/App.jsx
- Modified: 2026-03-11T06:21:28+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/disco/1.3.51/code/backend/views/components/CompatiblePluginList/App.jsx#L10-L20`.

```jsx
import { useMemo } from 'react';
import HeroSection from './components/HeroSection';
import PluginGrid from './components/PluginGrid';
import getPlugins from './data/plugins';

export default function CompatiblePluginListApp() {
	const plugins = useMemo(() => {
		const raw = window.DISCO_COMPATIBLE_PLUGINS?.active_plugins ?? [];
		const activePlugins = Array.isArray( raw ) ? raw : Object.values( raw );

		const withStatus = getPlugins().map((plugin) => ({
			...plugin,
			status: activePlugins.includes(plugin.pluginFile)
				? 'detected'
				: 'not-installed',
		}));

		// Detected plugins first
		return [
			...withStatus.filter((p) => p.status === 'detected'),
			...withStatus.filter((p) => p.status !== 'detected'),
		];
	}, []);

	return (
		<div className="disco-min-h-screen disco-bg-white disco-font-sans disco-my-4 disco-mr-4 disco-rounded-2xl">
			<HeroSection />
			<PluginGrid plugins={plugins} />
		</div>
	);
}

```