/
index.tsx
108 lines (100 loc) · 3.22 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import classNames from 'classnames';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { dispatch, select, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { TopBarWithBeamer } from '../../../../common/top-bar/top-bar';
import { Notices } from '../../../listing/components/notices';
import { Header } from './components/header';
import { Overview } from './components/overview';
import { Tabs } from './components/tabs';
import { createStore, Section, storeName } from './store';
import {
createStore as editorStoreCreate,
storeName as editorStoreName,
} from '../../../editor/store';
import { registerApiErrorHandler } from '../../../listing/api-error-handler';
import { initializeApi } from './api';
import { PremiumModal } from '../../../../common/premium-modal';
import { AutomationStatus } from '../../../listing/automation';
import { MailPoet } from '../../../../mailpoet';
import { initializeIntegrations } from '../../../editor/integrations';
function Analytics(): JSX.Element {
const premiumModal = useSelect((s) => s(storeName).getPremiumModal());
const { closePremiumModal } = dispatch(storeName);
return (
<div className="mailpoet-automation-analytics">
<Header />
<Overview />
<Tabs />
{premiumModal && (
<PremiumModal
onRequestClose={closePremiumModal}
tracking={{
utm_campaign: premiumModal.utmCampaign ?? 'automation_analytics',
}}
>
{premiumModal.content}
</PremiumModal>
)}
</div>
);
}
function TopBarWithBreadcrumb(): JSX.Element {
const { automation } = useSelect((s) => ({
automation: s(editorStoreName).getAutomationData(),
}));
let status = __('Draft', 'mailpoet');
let statusClass = '';
if (automation.status === AutomationStatus.ACTIVE) {
status = __('Active', 'mailpoet');
statusClass = 'mailpoet-analytics-badge-success';
}
if (automation.status === AutomationStatus.DEACTIVATING) {
status = __('Deactivating', 'mailpoet');
statusClass = 'mailpoet-analytics-badge-warning';
}
return (
<TopBarWithBeamer>
<p className="mailpoet-automation-analytics-title">
<a href={MailPoet.urls.automationListing}>
{__('Automations', 'mailpoet')}
</a>{' '}
› <strong>{automation.name}</strong>
<div className={classNames('mailpoet-analytics-badge', statusClass)}>
<span className="mailpoet-analytics-badge-text">{status}</span>
</div>
</p>
</TopBarWithBeamer>
);
}
function App(): JSX.Element {
return (
<BrowserRouter>
<TopBarWithBreadcrumb />
<Notices />
<Analytics />
</BrowserRouter>
);
}
function boot() {
initializeApi();
select(storeName)
.getSections()
.forEach((section: Section) => {
void dispatch(storeName).updateSection(section);
});
}
window.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('mailpoet_automation_analytics');
if (!container) {
return;
}
createStore();
editorStoreCreate();
initializeIntegrations();
registerApiErrorHandler();
boot();
const root = createRoot(container);
root.render(<App />);
});