UsefulPlugins.js
156 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import { |
| 5 | AlertDialog, |
| 6 | AlertDialogBody, |
| 7 | AlertDialogContent, |
| 8 | AlertDialogFooter, |
| 9 | AlertDialogHeader, |
| 10 | AlertDialogOverlay, |
| 11 | Button, |
| 12 | Grid, |
| 13 | Heading, |
| 14 | HStack, |
| 15 | Stack, |
| 16 | Text, |
| 17 | useDisclosure, |
| 18 | } from "@chakra-ui/react"; |
| 19 | import { sprintf, __ } from "@wordpress/i18n"; |
| 20 | import React, { useRef, useState, useEffect, useContext } from "react"; |
| 21 | |
| 22 | /** |
| 23 | * Internal Dependencies |
| 24 | */ |
| 25 | import { PLUGINS } from "../../../Constants/Products"; |
| 26 | import DashboardContext, { |
| 27 | DashboardProvider, |
| 28 | } from "../../../context/DashboardContext"; |
| 29 | import UsePluginInstallActivate from "../../../components/common/UsePluginInstallActivate"; |
| 30 | |
| 31 | const Plugin = ({ plugin, index }) => { |
| 32 | const { isOpen, onOpen, onClose } = useDisclosure(); |
| 33 | const cancelRef = useRef(); |
| 34 | const [isPluginStatusLoading, setIsPluginStatusLoading] = useState(false); |
| 35 | const [status, setStatus] = useState("inactive"); |
| 36 | const [{ pluginsStatus, themesStatus }, dispatch] = |
| 37 | useContext(DashboardContext); |
| 38 | |
| 39 | useEffect(() => { |
| 40 | const status = |
| 41 | plugin.type === "theme" |
| 42 | ? themesStatus[plugin.slug] |
| 43 | : pluginsStatus[plugin.slug]; |
| 44 | setStatus(status); |
| 45 | }, [pluginsStatus[plugin.slug], themesStatus[plugin.slug]]); |
| 46 | return ( |
| 47 | <HStack |
| 48 | key={plugin.slug} |
| 49 | gap="4px" |
| 50 | justify="space-between" |
| 51 | px="16px" |
| 52 | py="18px" |
| 53 | pl={index % 2 === 0 ? "0" : undefined} |
| 54 | > |
| 55 | <HStack> |
| 56 | <plugin.logo w="40px" h="40px" /> |
| 57 | <Stack gap="6px"> |
| 58 | <Heading as="h4" fontSize="14px" fontWeight="semibold"> |
| 59 | {plugin.label} |
| 60 | </Heading> |
| 61 | <Text as="span" color="gray.500"> |
| 62 | {plugin.shortDescription} |
| 63 | </Text> |
| 64 | </Stack> |
| 65 | </HStack> |
| 66 | <Button |
| 67 | variant="link" |
| 68 | colorScheme="primary" |
| 69 | color="var(--chakra-colors-primary-500) !important" |
| 70 | fontSize="14px" |
| 71 | fontWeight="normal" |
| 72 | textDecor="underline" |
| 73 | isLoading={isPluginStatusLoading} |
| 74 | isDisabled={"active" === status} |
| 75 | onClick={onOpen} |
| 76 | > |
| 77 | {status === "active" |
| 78 | ? __("Active", "everest-forms") |
| 79 | : status === "inactive" |
| 80 | ? __("Activate", "everest-forms") |
| 81 | : __("Install", "everest-forms")} |
| 82 | </Button> |
| 83 | <AlertDialog |
| 84 | isOpen={isOpen} |
| 85 | leastDestructiveRef={cancelRef} |
| 86 | onClose={onClose} |
| 87 | isCentered |
| 88 | > |
| 89 | <AlertDialogOverlay> |
| 90 | <AlertDialogContent> |
| 91 | <AlertDialogHeader fontSize="lg" fontWeight="semibold"> |
| 92 | {"inactive" === status |
| 93 | ? __("Activate Plugin", "everest-forms") |
| 94 | : __("Install Plugin", "everest-forms")} |
| 95 | </AlertDialogHeader> |
| 96 | <AlertDialogBody> |
| 97 | {"inactive" === status |
| 98 | ? sprintf( |
| 99 | __( |
| 100 | "Are you sure? You want to activate %s plugin.", |
| 101 | "everest-forms" |
| 102 | ), |
| 103 | plugin.label |
| 104 | ) |
| 105 | : sprintf( |
| 106 | __( |
| 107 | "Are you sure? You want to install and activate %s plugin.", |
| 108 | "everest-forms" |
| 109 | ), |
| 110 | plugin.label |
| 111 | )} |
| 112 | </AlertDialogBody> |
| 113 | <AlertDialogFooter> |
| 114 | <UsePluginInstallActivate |
| 115 | cancelRef={cancelRef} |
| 116 | onClose={onClose} |
| 117 | slug={plugin.slug} |
| 118 | isPluginStatusLoading={isPluginStatusLoading} |
| 119 | setIsPluginStatusLoading={ |
| 120 | setIsPluginStatusLoading |
| 121 | } |
| 122 | /> |
| 123 | </AlertDialogFooter> |
| 124 | </AlertDialogContent> |
| 125 | </AlertDialogOverlay> |
| 126 | </AlertDialog> |
| 127 | </HStack> |
| 128 | ); |
| 129 | }; |
| 130 | |
| 131 | const UsefulPlugins = () => { |
| 132 | return ( |
| 133 | <Grid |
| 134 | gridTemplateColumns="1fr 1fr" |
| 135 | sx={{ |
| 136 | "> div:nth-child(2n+1)": { |
| 137 | borderRight: "1px", |
| 138 | borderColor: "gray.100", |
| 139 | }, |
| 140 | "> div:first-child, > div:nth-child(2)": { |
| 141 | borderBottom: "1px", |
| 142 | borderColor: "gray.100", |
| 143 | }, |
| 144 | }} |
| 145 | > |
| 146 | <DashboardProvider> |
| 147 | {PLUGINS.map((plugin, i) => ( |
| 148 | <Plugin key={plugin.slug} plugin={plugin} index={i} /> |
| 149 | ))} |
| 150 | </DashboardProvider> |
| 151 | </Grid> |
| 152 | ); |
| 153 | }; |
| 154 | |
| 155 | export default UsefulPlugins; |
| 156 |