93 lines
2.4 KiB
TypeScript
93 lines
2.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
import { TopBarWithBeamer } from 'common/top_bar/top_bar';
|
|
import { Popover, SlotFillProvider } from '@wordpress/components';
|
|
import { useSelect } from '@wordpress/data';
|
|
import { initializeApi } from './api';
|
|
import { registerTranslations } from './i18n';
|
|
import { createStore, storeName } from './listing/store';
|
|
import { AutomationListing, AutomationListingHeader } from './listing';
|
|
import { registerApiErrorHandler } from './listing/api-error-handler';
|
|
import { Notices } from './listing/components/notices';
|
|
import { BuildYourOwnSection, HeroSection, TemplatesSection } from './sections';
|
|
import { MailPoet } from '../mailpoet';
|
|
|
|
const trackOpenEvent = () => {
|
|
MailPoet.trackEvent('Automations > Listing viewed');
|
|
};
|
|
|
|
function Content(): JSX.Element {
|
|
const [isBooting, setIsBooting] = useState(true);
|
|
const count = useSelect((select) => select(storeName).getAutomationCount());
|
|
|
|
useEffect(() => {
|
|
if (!isBooting || count === 0) {
|
|
return;
|
|
}
|
|
trackOpenEvent();
|
|
setIsBooting(false);
|
|
}, [isBooting, count]);
|
|
const content =
|
|
count > 0 ? (
|
|
<>
|
|
<AutomationListingHeader />
|
|
<AutomationListing />
|
|
</>
|
|
) : (
|
|
<HeroSection />
|
|
);
|
|
|
|
// Hide notices on onboarding screen
|
|
useEffect(() => {
|
|
const onboardingClass = 'mailpoet-automation-is-onboarding';
|
|
const element = document.querySelector('body');
|
|
if (count === 0 && !element.classList.contains(onboardingClass)) {
|
|
element.classList.add(onboardingClass);
|
|
}
|
|
if (count > 0 && element.classList.contains(onboardingClass)) {
|
|
element.classList.remove(onboardingClass);
|
|
}
|
|
}, [count]);
|
|
return (
|
|
<>
|
|
{content}
|
|
<TemplatesSection />
|
|
<BuildYourOwnSection />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function Automations(): JSX.Element {
|
|
return (
|
|
<>
|
|
<TopBarWithBeamer />
|
|
<Notices />
|
|
<Content />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function App(): JSX.Element {
|
|
return (
|
|
<SlotFillProvider>
|
|
<BrowserRouter>
|
|
<Automations />
|
|
<Popover.Slot />
|
|
</BrowserRouter>
|
|
</SlotFillProvider>
|
|
);
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
createStore();
|
|
|
|
const root = document.getElementById('mailpoet_automation');
|
|
if (root) {
|
|
registerTranslations();
|
|
registerApiErrorHandler();
|
|
initializeApi();
|
|
ReactDOM.render(<App />, root);
|
|
}
|
|
});
|