Emails
1 month ago
EngagementChart
1 month ago
MediaHub
1 month ago
Onboarding
1 month ago
Popup
1 month ago
Skeletons
1 week ago
WhatsNew
1 month ago
charts
1 month ago
test
1 month ago
AdminMenuSync.js
1 month ago
ChartEmptyState.js
1 month ago
ChooseDate.js
1 month ago
ColorPicker.js
1 month ago
ExtendPlugins.js
1 month ago
Filters.js
1 month ago
Link.js
1 month ago
Navbar.js
1 week ago
NoFound.js
1 month ago
PageHeader.js
1 month ago
PluginRecommendations.js
1 month ago
PostScheduleField.js
1 month ago
PrestoPlayerIcon.js
1 month ago
ProGateOverlay.js
1 month ago
QuickAccess.js
1 month ago
RankedTable.js
1 month ago
StatCard.js
1 month ago
TopMedia.js
1 month ago
TopPerformingMedia.js
1 month ago
TopUsers.js
1 month ago
TruncatedTitle.js
1 month ago
UpgradeNotice.js
1 month ago
UpgradeToPro.js
1 month ago
VideoModal.js
1 month ago
WelcomeBanner.js
1 month ago
ExtendPlugins.js
227 lines
| 1 | import React, { useState, useMemo } from "react"; |
| 2 | const { __ } = wp.i18n; |
| 3 | import { Button, Loader, toast } from "@bsf/force-ui"; |
| 4 | import PluginRecommendations from "./PluginRecommendations"; |
| 5 | import Presto_Admin_Icons from "../utils/icons"; |
| 6 | import { |
| 7 | activatePlugin, |
| 8 | installPlugins, |
| 9 | generateSuggestions, |
| 10 | } from "../utils/pluginUtils"; |
| 11 | |
| 12 | const ExtendPlugins = ({ layout = "inline" }) => { |
| 13 | // Plugin status data from WordPress |
| 14 | const prestoPlayerData = window.prestoPlayer || {}; |
| 15 | |
| 16 | // Primary plugin suggestions (always shown first) |
| 17 | const primaryPluginsData = [ |
| 18 | { |
| 19 | id: "1", |
| 20 | badgeText: __("Free", "presto-player"), |
| 21 | svg: Presto_Admin_Icons.sureforms, |
| 22 | title: __("SureForms", "presto-player"), |
| 23 | description: __("Launch powerful forms in minutes!", "presto-player"), |
| 24 | slug: "sureforms", |
| 25 | name: __("SureForms", "presto-player"), |
| 26 | status: prestoPlayerData?.sureforms_status, |
| 27 | init: "sureforms/sureforms.php", |
| 28 | }, |
| 29 | { |
| 30 | id: "2", |
| 31 | badgeText: __("Free", "presto-player"), |
| 32 | svg: Presto_Admin_Icons.surecart, |
| 33 | title: __("SureCart", "presto-player"), |
| 34 | description: __("The new way to sell on WordPress.", "presto-player"), |
| 35 | slug: "surecart", |
| 36 | name: __("SureCart", "presto-player"), |
| 37 | status: prestoPlayerData?.surecart_status, |
| 38 | init: "surecart/surecart.php", |
| 39 | }, |
| 40 | { |
| 41 | id: "3", |
| 42 | badgeText: __("Free", "presto-player"), |
| 43 | svg: Presto_Admin_Icons.ottokit, |
| 44 | title: __("OttoKit", "presto-player"), |
| 45 | description: __("Automate your WordPress setup.", "presto-player"), |
| 46 | slug: "suretriggers", |
| 47 | name: __("OttoKit", "presto-player"), |
| 48 | status: prestoPlayerData?.suretriggers_status, |
| 49 | init: "suretriggers/suretriggers.php", |
| 50 | }, |
| 51 | { |
| 52 | id: "4", |
| 53 | badgeText: __("Free", "presto-player"), |
| 54 | svg: Presto_Admin_Icons.suremembers, |
| 55 | title: __("SureMembers", "presto-player"), |
| 56 | description: __( |
| 57 | "Membership tiers and content protection.", |
| 58 | "presto-player" |
| 59 | ), |
| 60 | slug: "suremembers", |
| 61 | name: __("SureMembers", "presto-player"), |
| 62 | status: prestoPlayerData?.suremembers_status, |
| 63 | init: "suremembers/suremembers.php", |
| 64 | }, |
| 65 | ]; |
| 66 | |
| 67 | // Secondary plugin suggestions (shown when primary ones are activated) |
| 68 | const secondaryPluginsData = [ |
| 69 | { |
| 70 | id: "5", |
| 71 | badgeText: __("Free", "presto-player"), |
| 72 | svg: Presto_Admin_Icons.suremails, |
| 73 | title: "SureMails", |
| 74 | description: |
| 75 | __("Powerful email marketing for", "presto-player") + "WordPress.", |
| 76 | slug: "suremails", |
| 77 | name: __("SureMails", "presto-player"), |
| 78 | status: prestoPlayerData?.suremails_status || "not-installed", |
| 79 | init: "suremails/suremails.php", |
| 80 | }, |
| 81 | ]; |
| 82 | |
| 83 | // Track plugin statuses in state |
| 84 | const [pluginStatuses, setPluginStatuses] = useState(() => { |
| 85 | const statuses = {}; |
| 86 | [...primaryPluginsData, ...secondaryPluginsData].forEach((plugin) => { |
| 87 | statuses[plugin.slug] = plugin.status; |
| 88 | }); |
| 89 | return statuses; |
| 90 | }); |
| 91 | |
| 92 | const integrations = useMemo( |
| 93 | () => generateSuggestions(pluginStatuses, primaryPluginsData, secondaryPluginsData), |
| 94 | [pluginStatuses] |
| 95 | ); |
| 96 | |
| 97 | const updatePluginStatus = (pluginSlug, newStatus) => { |
| 98 | setPluginStatuses((prevStatuses) => ({ |
| 99 | ...prevStatuses, |
| 100 | [pluginSlug]: newStatus, |
| 101 | })); |
| 102 | }; |
| 103 | |
| 104 | const [processingIntegration, setProcessingIntegration] = useState(null); |
| 105 | |
| 106 | const renderActionButton = (plugin) => { |
| 107 | const isProcessing = processingIntegration === plugin.slug; |
| 108 | |
| 109 | const isPluginActive = plugin?.status === "active"; |
| 110 | const isPluginInActive = plugin?.status === "inactive"; |
| 111 | const isPluginNotInstalled = plugin?.status === "not-installed"; |
| 112 | |
| 113 | if ("suremembers" === plugin.slug && isPluginNotInstalled) { |
| 114 | return ( |
| 115 | <Button |
| 116 | variant="secondary" |
| 117 | size="xs" |
| 118 | onClick={() => |
| 119 | window.open( |
| 120 | "https://suremembers.com/?utm_source=plugin&utm_medium=dashboard&utm_campaign=plugin", |
| 121 | "_blank" |
| 122 | ) |
| 123 | } |
| 124 | > |
| 125 | {__("Learn More", "presto-player")} |
| 126 | </Button> |
| 127 | ); |
| 128 | } |
| 129 | |
| 130 | if (isPluginNotInstalled) { |
| 131 | return ( |
| 132 | <Button |
| 133 | variant="outline" |
| 134 | className="no-underline border-border-subtle text-text-primary hover:no-underline" |
| 135 | size="xs" |
| 136 | onClick={async () => { |
| 137 | if ( |
| 138 | processingIntegration && |
| 139 | processingIntegration !== plugin.slug |
| 140 | ) { |
| 141 | toast.info( |
| 142 | __( |
| 143 | "Another plugin operation is in progress. Please wait.", |
| 144 | "presto-player" |
| 145 | ) |
| 146 | ); |
| 147 | return; |
| 148 | } |
| 149 | setProcessingIntegration(plugin?.slug); |
| 150 | try { |
| 151 | await installPlugins([plugin]); |
| 152 | updatePluginStatus(plugin?.slug, "active"); |
| 153 | } finally { |
| 154 | setProcessingIntegration(null); |
| 155 | } |
| 156 | }} |
| 157 | icon={isProcessing && <Loader variant="primary" />} |
| 158 | iconPosition="left" |
| 159 | disabled={isProcessing} |
| 160 | > |
| 161 | {__("Install & Activate", "presto-player")} |
| 162 | </Button> |
| 163 | ); |
| 164 | } |
| 165 | |
| 166 | if (isPluginInActive) { |
| 167 | return ( |
| 168 | <Button |
| 169 | variant="outline" |
| 170 | className="no-underline bg-button-tertiary text-text-primary hover:no-underline border-border-subtle" |
| 171 | size="xs" |
| 172 | onClick={async () => { |
| 173 | if ( |
| 174 | processingIntegration && |
| 175 | processingIntegration !== plugin.slug |
| 176 | ) { |
| 177 | toast.info( |
| 178 | __( |
| 179 | "Another plugin operation is in progress. Please wait.", |
| 180 | "presto-player" |
| 181 | ) |
| 182 | ); |
| 183 | return; |
| 184 | } |
| 185 | setProcessingIntegration(plugin?.slug); |
| 186 | try { |
| 187 | await activatePlugin(plugin); |
| 188 | updatePluginStatus(plugin?.slug, "active"); |
| 189 | } finally { |
| 190 | setProcessingIntegration(null); |
| 191 | } |
| 192 | }} |
| 193 | disabled={isProcessing} |
| 194 | icon={isProcessing && <Loader variant="primary" />} |
| 195 | iconPosition="left" |
| 196 | > |
| 197 | {__("Activate", "presto-player")} |
| 198 | </Button> |
| 199 | ); |
| 200 | } |
| 201 | |
| 202 | if (isPluginActive) { |
| 203 | return ( |
| 204 | <Button |
| 205 | variant="outline" |
| 206 | className="shadow-sm bg-badge-background-green text-text-primary border-border-subtle hover:no-underline" |
| 207 | size="xs" |
| 208 | > |
| 209 | {__("Activated", "presto-player")} |
| 210 | </Button> |
| 211 | ); |
| 212 | } |
| 213 | |
| 214 | return null; |
| 215 | }; |
| 216 | |
| 217 | return ( |
| 218 | <PluginRecommendations |
| 219 | integrations={integrations} |
| 220 | renderActionButton={renderActionButton} |
| 221 | layout={layout} |
| 222 | /> |
| 223 | ); |
| 224 | }; |
| 225 | |
| 226 | export default ExtendPlugins; |
| 227 |