Constants
3 months ago
Router
3 months ago
Theme
4 months ago
components
3 months ago
context
1 year ago
images
3 months ago
reducers
1 year ago
screens
2 weeks ago
skeleton
4 months ago
utils
5 months ago
App.js
4 months ago
header-standalone.js
3 months ago
index.js
3 months ago
header-standalone.js
130 lines
| 1 | import { |
| 2 | Box, |
| 3 | ChakraProvider, |
| 4 | Container, |
| 5 | HStack, |
| 6 | Skeleton, |
| 7 | SkeletonCircle, |
| 8 | Stack, |
| 9 | useToast, |
| 10 | } from '@chakra-ui/react'; |
| 11 | import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'; |
| 12 | import apiFetch from '@wordpress/api-fetch'; |
| 13 | import { __ } from '@wordpress/i18n'; |
| 14 | import React from 'react'; |
| 15 | import ReactDOM from 'react-dom/client'; |
| 16 | import { BrowserRouter } from 'react-router-dom'; |
| 17 | import { Header } from './components'; |
| 18 | import Theme from './Theme/Theme'; |
| 19 | |
| 20 | const queryClient = new QueryClient(); |
| 21 | |
| 22 | function HeaderWithQuery() { |
| 23 | const toast = useToast(); |
| 24 | |
| 25 | /* global _EVF_DASHBOARD_ */ |
| 26 | const { |
| 27 | evfRestApiNonce, |
| 28 | restURL, |
| 29 | allStepsCompleted, |
| 30 | } = |
| 31 | typeof _EVF_DASHBOARD_ !== 'undefined' && _EVF_DASHBOARD_; |
| 32 | |
| 33 | const siteAssistantQuery = useQuery({ |
| 34 | queryKey: ['siteAssistant'], |
| 35 | queryFn: async () => { |
| 36 | const response = await apiFetch({ |
| 37 | path: `${restURL}everest-forms/v1/site-assistant`, |
| 38 | method: 'GET', |
| 39 | headers: { |
| 40 | 'X-WP-Nonce': evfRestApiNonce, |
| 41 | }, |
| 42 | }); |
| 43 | return response; |
| 44 | }, |
| 45 | cacheTime: Infinity, |
| 46 | staleTime: Infinity, |
| 47 | retry: 1, |
| 48 | onError: (error) => { |
| 49 | console.error('Error fetching site assistant data:', error); |
| 50 | toast({ |
| 51 | title: __('Error', 'everest-forms'), |
| 52 | description: __('Failed to load setup status.', 'everest-forms'), |
| 53 | status: 'error', |
| 54 | duration: 3000, |
| 55 | isClosable: true, |
| 56 | }); |
| 57 | }, |
| 58 | }); |
| 59 | |
| 60 | const isAllStepsCompleted = siteAssistantQuery?.isLoading |
| 61 | ? Boolean(allStepsCompleted === '1') |
| 62 | : siteAssistantQuery?.data?.data?.all_steps_completed; |
| 63 | |
| 64 | // Show skeleton loading that matches the actual header UI |
| 65 | if (siteAssistantQuery.isLoading) { |
| 66 | return ( |
| 67 | <Box |
| 68 | // bg="white" |
| 69 | borderBottom="1px solid #E9E9E9" |
| 70 | width="100%" |
| 71 | position="relative" |
| 72 | zIndex="10" |
| 73 | > |
| 74 | <Container maxW="full"> |
| 75 | <Stack direction="row" minH="70px" justify="space-between"> |
| 76 | {/* Left Side - Logo and Navigation Skeleton */} |
| 77 | <Stack direction="row" align="center" gap="7"> |
| 78 | {/* Logo Skeleton */} |
| 79 | <SkeletonCircle size="10" /> |
| 80 | |
| 81 | {/* Navigation Links Skeleton */} |
| 82 | <HStack spacing="1" h="full"> |
| 83 | <Skeleton height="20px" width="100px" /> |
| 84 | <Skeleton height="20px" width="80px" /> |
| 85 | <Skeleton height="20px" width="90px" /> |
| 86 | <Skeleton height="20px" width="95px" /> |
| 87 | </HStack> |
| 88 | </Stack> |
| 89 | |
| 90 | {/* Right Side - Actions Skeleton */} |
| 91 | <Stack direction="row" align="center" spacing="12px"> |
| 92 | <HStack spacing="1" > |
| 93 | <Skeleton height="20px" width="60px" /> |
| 94 | <Skeleton height="20px" width="90px" /> |
| 95 | </HStack> |
| 96 | <Skeleton height="20px" width="100px" /> |
| 97 | <Skeleton height="24px" width="50px" borderRadius="xl" /> |
| 98 | <SkeletonCircle size="10" /> |
| 99 | </Stack> |
| 100 | </Stack> |
| 101 | </Container> |
| 102 | </Box> |
| 103 | ); |
| 104 | } |
| 105 | |
| 106 | return <Header hideSiteAssistant={isAllStepsCompleted} />; |
| 107 | } |
| 108 | |
| 109 | (function () { |
| 110 | const headerContainer = document.getElementById('evf-react-header-root'); |
| 111 | |
| 112 | if (!headerContainer) return; |
| 113 | |
| 114 | const headerRoot = ReactDOM.createRoot(headerContainer); |
| 115 | |
| 116 | if (headerRoot) { |
| 117 | headerRoot.render( |
| 118 | <React.StrictMode> |
| 119 | <QueryClientProvider client={queryClient}> |
| 120 | <ChakraProvider theme={Theme}> |
| 121 | <BrowserRouter> |
| 122 | <HeaderWithQuery /> |
| 123 | </BrowserRouter> |
| 124 | </ChakraProvider> |
| 125 | </QueryClientProvider> |
| 126 | </React.StrictMode>, |
| 127 | ); |
| 128 | } |
| 129 | })(); |
| 130 |