CreateFormCTA.tsx
2 weeks ago
CreateWithAI.tsx
2 weeks ago
Main.tsx
2 weeks ago
PluginStatus.tsx
2 weeks ago
Sidebar.tsx
2 weeks ago
TemplateList.tsx
2 weeks ago
TemplatesSkeleton.tsx
4 months ago
CreateFormCTA.tsx
224 lines
| 1 | import { Box, HStack, Icon, SimpleGrid, Spinner, Text } from '@chakra-ui/react'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import React from 'react'; |
| 4 | import { FiArrowRight } from 'react-icons/fi'; |
| 5 | import { LuPencilLine, LuSparkles } from 'react-icons/lu'; |
| 6 | import { templatesScriptData } from '../utils/global'; |
| 7 | |
| 8 | interface CreateFormCTAProps { |
| 9 | onCreateWithAI?: () => void; |
| 10 | onCreateBlank?: () => void; |
| 11 | isCreatingBlank?: boolean; |
| 12 | } |
| 13 | |
| 14 | // "Create with AI" is disabled (shown greyed-out, not clickable) on local / |
| 15 | // development sites where the AI gateway is unavailable. |
| 16 | const AI_ENABLED = !!templatesScriptData?.aiEnabled; |
| 17 | |
| 18 | const CreateFormCTA: React.FC<CreateFormCTAProps> = ({ |
| 19 | onCreateWithAI, |
| 20 | onCreateBlank, |
| 21 | isCreatingBlank = false, |
| 22 | }) => { |
| 23 | return ( |
| 24 | <SimpleGrid columns={{ base: 1, md: 2 }} spacing="32px"> |
| 25 | {/* AI Card */} |
| 26 | <Box |
| 27 | position="relative" |
| 28 | overflow="hidden" |
| 29 | bg="white" |
| 30 | borderRadius="16px" |
| 31 | border="1px solid #e2e8f0" |
| 32 | p="32px" |
| 33 | display="flex" |
| 34 | flexDirection="column" |
| 35 | cursor={AI_ENABLED ? 'pointer' : 'not-allowed'} |
| 36 | opacity={AI_ENABLED ? 1 : 0.6} |
| 37 | onClick={() => AI_ENABLED && onCreateWithAI && onCreateWithAI()} |
| 38 | transition="border-color 0.2s, box-shadow 0.2s" |
| 39 | _hover={AI_ENABLED ? { |
| 40 | borderColor: 'rgba(117,69,187,0.4)', |
| 41 | boxShadow: '0 10px 30px -15px rgba(117,69,187,0.25)', |
| 42 | } : {}} |
| 43 | > |
| 44 | {/* Gradient overlay decorations */} |
| 45 | <Box |
| 46 | position="absolute" |
| 47 | inset="0" |
| 48 | bgGradient="linear(to-br, rgba(117,69,187,0.08), rgba(117,69,187,0.03), transparent)" |
| 49 | pointerEvents="none" |
| 50 | /> |
| 51 | <Box |
| 52 | position="absolute" |
| 53 | top="-96px" |
| 54 | right="-96px" |
| 55 | w="288px" |
| 56 | h="288px" |
| 57 | bg="rgba(117,69,187,0.09)" |
| 58 | borderRadius="full" |
| 59 | filter="blur(48px)" |
| 60 | pointerEvents="none" |
| 61 | /> |
| 62 | <Box |
| 63 | position="absolute" |
| 64 | bottom="-64px" |
| 65 | left="-64px" |
| 66 | w="224px" |
| 67 | h="224px" |
| 68 | bg="rgba(117,69,187,0.06)" |
| 69 | borderRadius="full" |
| 70 | filter="blur(48px)" |
| 71 | pointerEvents="none" |
| 72 | /> |
| 73 | |
| 74 | {/* Icon + NEW badge row */} |
| 75 | <HStack justify="space-between" align="center" mb="16px" position="relative"> |
| 76 | <Box |
| 77 | w="48px" |
| 78 | h="48px" |
| 79 | borderRadius="12px" |
| 80 | bgGradient="linear(135deg, #7545BB 0%, #9660db 100%)" |
| 81 | display="flex" |
| 82 | alignItems="center" |
| 83 | justifyContent="center" |
| 84 | boxShadow="0 6px 20px -6px rgba(117,69,187,0.45)" |
| 85 | > |
| 86 | <Icon as={LuSparkles} boxSize="5" color="white" /> |
| 87 | </Box> |
| 88 | <Box |
| 89 | as="span" |
| 90 | display="inline-flex" |
| 91 | alignItems="center" |
| 92 | bg="#28af60" |
| 93 | color="white" |
| 94 | fontSize="10px" |
| 95 | fontWeight="700" |
| 96 | textTransform="uppercase" |
| 97 | letterSpacing="0.08em" |
| 98 | py="4px" |
| 99 | px="10px" |
| 100 | borderRadius="6px" |
| 101 | > |
| 102 | {__('New', 'everest-forms')} |
| 103 | </Box> |
| 104 | </HStack> |
| 105 | |
| 106 | {/* Title */} |
| 107 | <Text |
| 108 | as="h3" |
| 109 | fontSize="18px" |
| 110 | fontWeight="600" |
| 111 | color="#0e0e0e" |
| 112 | lineHeight="1.4" |
| 113 | mb="6px" |
| 114 | position="relative" |
| 115 | > |
| 116 | {__('Create Form Using AI', 'everest-forms')} |
| 117 | </Text> |
| 118 | |
| 119 | {/* Description */} |
| 120 | <Text |
| 121 | fontSize="14px" |
| 122 | color="#6b6b6b" |
| 123 | lineHeight="1.6" |
| 124 | mb="24px" |
| 125 | position="relative" |
| 126 | flex="1" |
| 127 | > |
| 128 | {__('Describe your form in plain words and let AI build the fields for you in seconds.', 'everest-forms')} |
| 129 | </Text> |
| 130 | |
| 131 | {/* CTA link */} |
| 132 | <HStack |
| 133 | spacing="6px" |
| 134 | color={AI_ENABLED ? '#7545BB' : '#9ca3af'} |
| 135 | fontSize="14px" |
| 136 | fontWeight="500" |
| 137 | position="relative" |
| 138 | mt="auto" |
| 139 | > |
| 140 | {AI_ENABLED ? ( |
| 141 | <> |
| 142 | <Text margin="0">{__('Get Started', 'everest-forms')}</Text> |
| 143 | <Icon as={FiArrowRight} boxSize="4" /> |
| 144 | </> |
| 145 | ) : ( |
| 146 | <Text margin="0">{__('AI service is currently unavailable for local and staging site.', 'everest-forms')}</Text> |
| 147 | )} |
| 148 | </HStack> |
| 149 | </Box> |
| 150 | |
| 151 | {/* Scratch Card */} |
| 152 | <Box |
| 153 | bg="white" |
| 154 | borderRadius="16px" |
| 155 | border="1px solid #e2e8f0" |
| 156 | p="32px" |
| 157 | display="flex" |
| 158 | flexDirection="column" |
| 159 | cursor={isCreatingBlank ? 'default' : 'pointer'} |
| 160 | onClick={isCreatingBlank ? undefined : onCreateBlank} |
| 161 | transition="border-color 0.2s, box-shadow 0.2s" |
| 162 | _hover={{ |
| 163 | borderColor: isCreatingBlank ? '#e2e8f0' : 'rgba(117,69,187,0.4)', |
| 164 | boxShadow: isCreatingBlank ? 'none' : '0 10px 30px -15px rgba(117,69,187,0.18)', |
| 165 | }} |
| 166 | opacity={isCreatingBlank ? 0.6 : 1} |
| 167 | > |
| 168 | {/* Icon */} |
| 169 | <Box |
| 170 | w="48px" |
| 171 | h="48px" |
| 172 | borderRadius="12px" |
| 173 | bg="rgba(117,69,187,0.1)" |
| 174 | display="flex" |
| 175 | alignItems="center" |
| 176 | justifyContent="center" |
| 177 | mb="20px" |
| 178 | > |
| 179 | {isCreatingBlank |
| 180 | ? <Spinner size="sm" color="#7545BB" thickness="2px" speed="0.65s" /> |
| 181 | : <Icon as={LuPencilLine} boxSize="5" color="#7545BB" /> |
| 182 | } |
| 183 | </Box> |
| 184 | |
| 185 | {/* Title */} |
| 186 | <Text |
| 187 | as="h3" |
| 188 | fontSize="18px" |
| 189 | fontWeight="600" |
| 190 | color="#0e0e0e" |
| 191 | lineHeight="1.4" |
| 192 | mb="6px" |
| 193 | > |
| 194 | {__('Create from Scratch', 'everest-forms')} |
| 195 | </Text> |
| 196 | |
| 197 | {/* Description */} |
| 198 | <Text |
| 199 | fontSize="14px" |
| 200 | color="#6b6b6b" |
| 201 | lineHeight="1.6" |
| 202 | mb="24px" |
| 203 | flex="1" |
| 204 | > |
| 205 | {__('Start with a blank canvas and design your form field by field with full control.', 'everest-forms')} |
| 206 | </Text> |
| 207 | |
| 208 | {/* CTA link */} |
| 209 | <HStack |
| 210 | spacing="6px" |
| 211 | color={isCreatingBlank ? '#aaa' : '#7545BB'} |
| 212 | fontSize="14px" |
| 213 | fontWeight="500" |
| 214 | > |
| 215 | <Text margin="0">{__('Continue', 'everest-forms')}</Text> |
| 216 | <Icon as={FiArrowRight} boxSize="4" opacity={isCreatingBlank ? 0 : 1} /> |
| 217 | </HStack> |
| 218 | </Box> |
| 219 | </SimpleGrid> |
| 220 | ); |
| 221 | }; |
| 222 | |
| 223 | export default CreateFormCTA; |
| 224 |