FreeVsPro.js
485 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import { |
| 5 | Button, |
| 6 | Image, |
| 7 | Link, |
| 8 | Stack, |
| 9 | Table, |
| 10 | TableContainer, |
| 11 | Tbody, |
| 12 | Td, |
| 13 | Text, |
| 14 | Th, |
| 15 | Thead, |
| 16 | Tr, |
| 17 | } from '@chakra-ui/react'; |
| 18 | import { __ } from "@wordpress/i18n"; |
| 19 | import { useEffect, useState } from 'react'; |
| 20 | |
| 21 | /** |
| 22 | * Internal Dependencies |
| 23 | */ |
| 24 | import { Lock } from "../../components/Icon/Icon"; |
| 25 | import { getAllModules } from "../Modules/components/modules-api"; |
| 26 | import check from './images/check.webp'; |
| 27 | import close from './images/close.webp'; |
| 28 | |
| 29 | const FreeVsPro = () => { |
| 30 | const [contentsLoaded, setContentsLoaded] = useState(false); |
| 31 | /* global _EVF_DASHBOARD_ */ |
| 32 | const { upgradeURL } = |
| 33 | typeof _EVF_DASHBOARD_ !== "undefined" && _EVF_DASHBOARD_; |
| 34 | const [tableContents, setTableContents] = useState([ |
| 35 | { |
| 36 | type: "features", |
| 37 | title: __("Features", "everest-forms"), |
| 38 | contents: [ |
| 39 | { |
| 40 | title: __("Unlimited Forms", "everest-forms"), |
| 41 | free: true, |
| 42 | pro: true, |
| 43 | }, |
| 44 | { |
| 45 | title: __("Unlimited Form Entries", "everest-forms"), |
| 46 | free: true, |
| 47 | pro: true, |
| 48 | }, |
| 49 | { |
| 50 | title: __("Email Notifications ", "everest-forms"), |
| 51 | free: true, |
| 52 | pro: true, |
| 53 | }, |
| 54 | { |
| 55 | title: __("Google Analytics ", "everest-forms"), |
| 56 | free: true, |
| 57 | pro: true, |
| 58 | }, |
| 59 | { |
| 60 | title: __("Multiple File Uploads", "everest-forms"), |
| 61 | free: false, |
| 62 | pro: true, |
| 63 | }, |
| 64 | { |
| 65 | title: __("User Redirection ", "everest-forms"), |
| 66 | free: true, |
| 67 | pro: true, |
| 68 | }, |
| 69 | { |
| 70 | title: __("Import/Export Forms ", "everest-forms"), |
| 71 | free: true, |
| 72 | pro: true, |
| 73 | }, |
| 74 | { |
| 75 | title: __("Export Entries in CSV ", "everest-forms"), |
| 76 | free: true, |
| 77 | pro: true, |
| 78 | }, |
| 79 | { |
| 80 | title: __("E-signature ", "everest-forms"), |
| 81 | free: false, |
| 82 | pro: true, |
| 83 | }, |
| 84 | { |
| 85 | title: __("Webhook Support ", "everest-forms"), |
| 86 | free: false, |
| 87 | pro: true, |
| 88 | }, |
| 89 | { |
| 90 | title: __("Honeypot Security ", "everest-forms"), |
| 91 | free: true, |
| 92 | pro: true, |
| 93 | }, |
| 94 | { |
| 95 | title: __("Google reCAPTCHA ", "everest-forms"), |
| 96 | free: true, |
| 97 | pro: true, |
| 98 | }, |
| 99 | { |
| 100 | title: __("HCaptcha", "everest-forms"), |
| 101 | free: true, |
| 102 | pro: true, |
| 103 | }, |
| 104 | { |
| 105 | title: __("Whitelist/Blacklist Domains ", "everest-forms"), |
| 106 | free: false, |
| 107 | pro: true, |
| 108 | }, |
| 109 | { |
| 110 | title: __("Google Drive", "everest-forms"), |
| 111 | free: false, |
| 112 | pro: true, |
| 113 | }, |
| 114 | { |
| 115 | title: __("Dropbox", "everest-forms"), |
| 116 | free: false, |
| 117 | pro: true, |
| 118 | }, |
| 119 | { |
| 120 | title: __("Smart Tags Support", "everest-forms"), |
| 121 | free: true, |
| 122 | pro: true, |
| 123 | }, |
| 124 | { |
| 125 | title: __("GDPR Compliance", "everest-forms"), |
| 126 | free: false, |
| 127 | pro: true, |
| 128 | }, |
| 129 | { |
| 130 | title: __("Test Emails", "everest-forms"), |
| 131 | free: true, |
| 132 | pro: true, |
| 133 | }, |
| 134 | { |
| 135 | title: __("AJAX Form Submission", "everest-forms"), |
| 136 | free: true, |
| 137 | pro: true, |
| 138 | }, |
| 139 | { |
| 140 | title: __("Auto-populate Forms ", "everest-forms"), |
| 141 | free: false, |
| 142 | pro: true, |
| 143 | }, |
| 144 | ], |
| 145 | }, |
| 146 | { |
| 147 | type: "addons", |
| 148 | title: __("Addons", "everest-forms"), |
| 149 | contents: [ |
| 150 | { |
| 151 | title: __("Style Customizer ", "everest-forms"), |
| 152 | free: false, |
| 153 | pro: true, |
| 154 | }, |
| 155 | { |
| 156 | title: __("Muilti-step Forms ", "everest-forms"), |
| 157 | free: false, |
| 158 | pro: true, |
| 159 | }, |
| 160 | { |
| 161 | title: __("MailChimp ", "everest-forms"), |
| 162 | free: false, |
| 163 | pro: true, |
| 164 | }, |
| 165 | { |
| 166 | title: __("ConvertKit ", "everest-forms"), |
| 167 | free: false, |
| 168 | pro: true, |
| 169 | }, |
| 170 | { |
| 171 | title: __("PDF Form Submission ", "everest-forms"), |
| 172 | free: false, |
| 173 | pro: true, |
| 174 | }, |
| 175 | { |
| 176 | title: __("Custom CAPTCHA", "everest-forms"), |
| 177 | free: false, |
| 178 | pro: true, |
| 179 | }, |
| 180 | { |
| 181 | title: __("Geolocation ", "everest-forms"), |
| 182 | free: false, |
| 183 | pro: true, |
| 184 | }, |
| 185 | { |
| 186 | title: __("MailerLite", "everest-forms"), |
| 187 | free: false, |
| 188 | pro: true, |
| 189 | }, |
| 190 | { |
| 191 | title: __("ActiveCampaign ", "everest-forms"), |
| 192 | free: false, |
| 193 | pro: true, |
| 194 | }, |
| 195 | { |
| 196 | title: __("Campaign Monitor", "everest-forms"), |
| 197 | free: false, |
| 198 | pro: true, |
| 199 | }, |
| 200 | { |
| 201 | title: __("Google Sheets ", "everest-forms"), |
| 202 | free: false, |
| 203 | pro: true, |
| 204 | }, |
| 205 | { |
| 206 | title: __("Surveys, Polls, and Quiz ", "everest-forms"), |
| 207 | free: false, |
| 208 | pro: true, |
| 209 | }, |
| 210 | { |
| 211 | title: __("User Registration ", "everest-forms"), |
| 212 | free: false, |
| 213 | pro: true, |
| 214 | }, |
| 215 | { |
| 216 | title: __("Post Submission", "everest-forms"), |
| 217 | free: false, |
| 218 | pro: true, |
| 219 | }, |
| 220 | { |
| 221 | title: __("Email Templates", "everest-forms"), |
| 222 | free: false, |
| 223 | pro: true, |
| 224 | }, |
| 225 | { |
| 226 | title: __("PayPal Standard", "everest-forms"), |
| 227 | free: false, |
| 228 | pro: true, |
| 229 | }, |
| 230 | { |
| 231 | title: __("Stripe", "everest-forms"), |
| 232 | free: false, |
| 233 | pro: true, |
| 234 | }, |
| 235 | { |
| 236 | title: __("Authorize.Net", "everest-forms"), |
| 237 | free: false, |
| 238 | pro: true, |
| 239 | }, |
| 240 | { |
| 241 | title: __("Zapier", "everest-forms"), |
| 242 | free: false, |
| 243 | pro: true, |
| 244 | }, |
| 245 | { |
| 246 | title: __("Save and Continue", "everest-forms"), |
| 247 | free: false, |
| 248 | pro: true, |
| 249 | }, |
| 250 | { |
| 251 | title: __("Repeater Fields", "everest-forms"), |
| 252 | free: false, |
| 253 | pro: true, |
| 254 | }, |
| 255 | { |
| 256 | title: __("Calculations", "everest-forms"), |
| 257 | free: false, |
| 258 | pro: true, |
| 259 | }, |
| 260 | { |
| 261 | title: __("Razorpay", "everest-forms"), |
| 262 | free: false, |
| 263 | pro: true, |
| 264 | }, |
| 265 | { |
| 266 | title: __("SMS Notifications", "everest-forms"), |
| 267 | free: false, |
| 268 | pro: true, |
| 269 | }, |
| 270 | { |
| 271 | title: __("Coupons", "everest-forms"), |
| 272 | free: false, |
| 273 | pro: true, |
| 274 | }, |
| 275 | { |
| 276 | title: __("Frontend Listing", "everest-forms"), |
| 277 | free: false, |
| 278 | pro: true, |
| 279 | }, |
| 280 | { |
| 281 | title: __("Drip", "everest-forms"), |
| 282 | free: false, |
| 283 | pro: true, |
| 284 | }, |
| 285 | { |
| 286 | title: __("HubSpot", "everest-forms"), |
| 287 | free: false, |
| 288 | pro: true, |
| 289 | }, |
| 290 | { |
| 291 | title: __("Pipedrive", "everest-forms"), |
| 292 | free: false, |
| 293 | pro: true, |
| 294 | }, |
| 295 | { |
| 296 | title: __("Zoho CRM", "everest-forms"), |
| 297 | free: false, |
| 298 | pro: true, |
| 299 | }, |
| 300 | { |
| 301 | title: __("Salesforce", "everest-forms"), |
| 302 | free: false, |
| 303 | pro: true, |
| 304 | }, |
| 305 | { |
| 306 | title: __("Constant Contact", "everest-forms"), |
| 307 | free: false, |
| 308 | pro: true, |
| 309 | }, |
| 310 | { |
| 311 | title: __("Cloud Storage", "everest-forms"), |
| 312 | free: false, |
| 313 | pro: true, |
| 314 | }, |
| 315 | { |
| 316 | title: __("GetResponse", "everest-forms"), |
| 317 | free: false, |
| 318 | pro: true, |
| 319 | }, |
| 320 | { |
| 321 | title: __("Sendinblue", "everest-forms"), |
| 322 | free: false, |
| 323 | pro: true, |
| 324 | }, |
| 325 | { |
| 326 | title: __("Conversational Forms", "everest-forms"), |
| 327 | free: false, |
| 328 | pro: true, |
| 329 | }, |
| 330 | { |
| 331 | title: __("AI Contact Form - Free", "everest-forms"), |
| 332 | free: true, |
| 333 | pro: true, |
| 334 | }, |
| 335 | ], |
| 336 | }, |
| 337 | ]); |
| 338 | |
| 339 | useEffect(() => { |
| 340 | if (!contentsLoaded) { |
| 341 | const tableContentsRef = [...tableContents]; |
| 342 | |
| 343 | getAllModules() |
| 344 | .then((data) => { |
| 345 | if (data.success) { |
| 346 | tableContentsRef.map((tableContent, key) => { |
| 347 | if (tableContent.type === "features") { |
| 348 | data.modules_lists.map((module) => { |
| 349 | if (module.type == "feature") { |
| 350 | tableContent.contents = [ |
| 351 | ...tableContent.contents, |
| 352 | { |
| 353 | title: module.title, |
| 354 | free: false, |
| 355 | pro: true, |
| 356 | }, |
| 357 | ]; |
| 358 | } |
| 359 | }); |
| 360 | tableContentsRef[key] = tableContent; |
| 361 | } |
| 362 | if (tableContent.type === "addons") { |
| 363 | data.modules_lists.map((module) => { |
| 364 | if (module.type == "addon") { |
| 365 | tableContent.contents = [ |
| 366 | ...tableContent.contents, |
| 367 | { |
| 368 | title: module.title, |
| 369 | free: false, |
| 370 | pro: true, |
| 371 | }, |
| 372 | ]; |
| 373 | } |
| 374 | }); |
| 375 | tableContentsRef[key] = tableContent; |
| 376 | } |
| 377 | }); |
| 378 | setTableContents(tableContentsRef); |
| 379 | } |
| 380 | }) |
| 381 | .catch((e) => { |
| 382 | toast({ |
| 383 | title: e.message, |
| 384 | status: "error", |
| 385 | duration: 3000, |
| 386 | }); |
| 387 | }); |
| 388 | setContentsLoaded(true); |
| 389 | } |
| 390 | }, [contentsLoaded, tableContents]); |
| 391 | |
| 392 | return ( |
| 393 | <Stack direction="column" gap="10px"> |
| 394 | <TableContainer my="8" mx="6"> |
| 395 | {tableContents.map((tableContent) => ( |
| 396 | <Table variant="simple" fontSize="14px" key={tableContent.type}> |
| 397 | <Thead bgColor="#7545bb"> |
| 398 | <Tr border="1px solid #F4F4F4" alignItems="center"> |
| 399 | <Th w="50%" color="white"> |
| 400 | {tableContent.title} |
| 401 | </Th> |
| 402 | <Th w="25%" color="white"> |
| 403 | {__('Free', 'everest-forms')} |
| 404 | </Th> |
| 405 | <Th w="25%" color="white"> |
| 406 | {__('Pro', 'everest-forms')} |
| 407 | </Th> |
| 408 | </Tr> |
| 409 | </Thead> |
| 410 | <Tbody> |
| 411 | {tableContent.contents.map((rowContent) => ( |
| 412 | <Tr |
| 413 | border="1px solid #F4F4F4" |
| 414 | alignItems="center" |
| 415 | key={rowContent.title} |
| 416 | > |
| 417 | <Td>{rowContent.title}</Td> |
| 418 | <Td> |
| 419 | {rowContent.free ? ( |
| 420 | <Image w="16px" h="16px" src={check} /> |
| 421 | ) : ( |
| 422 | <Image w="16px" h="16px" src={close} /> |
| 423 | )} |
| 424 | </Td> |
| 425 | <Td> |
| 426 | {rowContent.pro ? ( |
| 427 | <Image w="16px" h="16px" src={check} /> |
| 428 | ) : ( |
| 429 | <Image w="16px" h="16px" src={close} /> |
| 430 | )} |
| 431 | </Td> |
| 432 | </Tr> |
| 433 | ))} |
| 434 | </Tbody> |
| 435 | </Table> |
| 436 | ))} |
| 437 | </TableContainer> |
| 438 | <Stack |
| 439 | gap="16px" |
| 440 | direction="column" |
| 441 | alignItems="center" |
| 442 | bgColor="#F1F5FE" |
| 443 | padding="32px 0px" |
| 444 | borderRadius="4px" |
| 445 | my="8" |
| 446 | mx="6" |
| 447 | > |
| 448 | <Lock h={'70px'} w={'80px'} /> |
| 449 | <Text fontSize="18px" lineHeight="24px" fontWeight="700"> |
| 450 | {__('Upgrade Now', 'everest-forms')} |
| 451 | </Text> |
| 452 | <Text |
| 453 | fontSize="14px" |
| 454 | lineHeight="24px" |
| 455 | fontWeight="400" |
| 456 | padding="10px 50px" |
| 457 | color="#6B6B6B" |
| 458 | > |
| 459 | {__( |
| 460 | 'Access all premium addons, features and upcoming updates right away by upgrading to the Pro version.', |
| 461 | 'everest-forms', |
| 462 | )} |
| 463 | </Text> |
| 464 | <Button |
| 465 | as={Link} |
| 466 | colorScheme="primary" |
| 467 | href={ |
| 468 | upgradeURL + |
| 469 | 'utm_medium=evf-dashboard&utm_source=evf-free&utm_campaign=dash-free-vs-pro-footer&utm_content=Get%20Everest%20Form%20Pro%20Now' |
| 470 | } |
| 471 | color="white !important" |
| 472 | textDecor="none !important" |
| 473 | isExternal |
| 474 | padding="10px 16px" |
| 475 | borderRadius="3px" |
| 476 | > |
| 477 | {__('Get Everest Form Pro Now', 'everest-forms')} |
| 478 | </Button> |
| 479 | </Stack> |
| 480 | </Stack> |
| 481 | ); |
| 482 | }; |
| 483 | |
| 484 | export default FreeVsPro; |
| 485 |