Skip to content

Commit 3064d08

Browse files
KSJaayKSJaay
committed
Adds email notifications and overhaul of notification system
1 parent 249229c commit 3064d08

30 files changed

Lines changed: 3870 additions & 34 deletions

File tree

‎app/components/modal/notification/index.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import useNotificationForm from '../../../hooks/useNotificationForm';
1212
import NotificationsTemplates from '../../../../shared/notifications';
1313
import type { NotificationProps } from '../../../types/notifications';
1414
import NotificationRenderer from '../../notifications/content/renderer';
15+
import { EmailComponent } from '../../notifications/content';
1516

1617
interface NotificationModalProps {
1718
values?: NotificationProps;
@@ -124,7 +125,14 @@ const NotificationModal = ({
124125
/>
125126

126127
<label className="input-label">Payload</label>
127-
<NotificationModalPayload message={message} />
128+
129+
{inputs.platform !== 'Email' && (
130+
<NotificationModalPayload message={message} />
131+
)}
132+
133+
{inputs.platform === 'Email' && (
134+
<EmailComponent type={inputs.messageType} />
135+
)}
128136
</Modal>
129137
);
130138
};

‎app/components/notifications/content/index.tsx‎

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,55 @@ import useNotificationForm from '../../../hooks/useNotificationForm';
1010
import NotificationsTemplates from '../../../../shared/notifications';
1111
import NotificationModalPayload from '../../modal/notification/payload';
1212
import NotificationModalType from '../../modal/notification/dropdown/type';
13-
import * as NotificationPlatformContent from '../../../constant/notificatons/layout';
13+
import * as NotificationPlatformContent from '../../../constant/notifications/layout';
1414
import NotificationRenderer from './renderer';
15+
import {
16+
NotificationBasicEmailTemplate,
17+
NotificationNerdyEmailTemplate,
18+
NotificationPrettyEmailTemplate,
19+
} from '../emails';
20+
21+
export const EmailComponent = ({ type }: { type: string }) => {
22+
if (type === 'basic') {
23+
return (
24+
<NotificationBasicEmailTemplate
25+
serviceName="Lunalytics"
26+
dashboardUrl="https://lunalytics.xyz"
27+
timestamp={new Date().toUTCString()}
28+
/>
29+
);
30+
}
31+
32+
if (type === 'pretty') {
33+
return (
34+
<NotificationPrettyEmailTemplate
35+
serviceName="Lunalytics"
36+
dashboardUrl="https://lunalytics.xyz"
37+
timestamp={new Date().toUTCString()}
38+
latency={54}
39+
status="504 Gateway Timeout"
40+
message="The service is currently unreachable."
41+
/>
42+
);
43+
}
44+
if (type === 'nerdy') {
45+
return (
46+
<NotificationNerdyEmailTemplate
47+
id="23c91eb7-e56d-4b6d-a7b8-51bf99f04b76"
48+
serviceName="Lunalytics"
49+
timestamp={new Date().toUTCString()}
50+
address="example.com"
51+
type="HTTP"
52+
statusCode={504}
53+
latency={1832}
54+
statusMessage="Gateway Timeout"
55+
dashboardUrl="https://lunalytics.xyz"
56+
/>
57+
);
58+
}
59+
60+
return null;
61+
};
1562

1663
const NotificationRender = ({ isEdit = false }: { isEdit: boolean }) => {
1764
const {
@@ -67,7 +114,13 @@ const NotificationRender = ({ isEdit = false }: { isEdit: boolean }) => {
67114
/>
68115

69116
<label className="input-label">{t('notification.input.payload')}</label>
70-
<NotificationModalPayload message={message} />
117+
{notification.platform !== 'Email' && (
118+
<NotificationModalPayload message={message} />
119+
)}
120+
121+
{notification.platform === 'Email' && (
122+
<EmailComponent type={inputs.messageType} />
123+
)}
71124

72125
<ActionBar position="bottom" variant="floating" show={showSaveActionBar}>
73126
<div className="status-action-bar-container">

‎app/components/notifications/content/renderer/components.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import { Trans } from 'react-i18next';
22
import { Dropdown, Input, PasswordInput, Textarea } from '@lunalytics/ui';
33

44
import SwitchWithText from '../../../ui/switch';
5+
import type { NotificationInputInputType } from '../../../../types/constant/notifications';
56

67
export const getNotificationComponent = (
7-
component,
8+
component: NotificationInputInputType,
89
value: string | number | boolean,
910
error: string | undefined,
1011
onChange: (
@@ -122,9 +123,9 @@ export const getNotificationComponent = (
122123
<label className="luna-input-title">Priority</label>
123124
<Dropdown
124125
fullWidth
125-
items={options.map((item) => {
126+
items={options?.map((item) => {
126127
return {
127-
id: item.id || item.text,
128+
id: item.id,
128129
text: item.id,
129130
type: 'item',
130131
onClick: () => onChange(item.id, key, isDataField),

‎app/components/notifications/content/renderer/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { getNotificationComponent } from './components';
2-
import * as NotificationPlatformContent from '../../../../constant/notificatons/layout';
2+
import * as NotificationPlatformContent from '../../../../constant/notifications/layout';
33
import type {
44
NotificationErrorProps,
55
NotificationProps,

‎app/components/notifications/emails/basic.tsx‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
const NotificationBasicEmailTemplate = ({
2+
serviceName,
3+
dashboardUrl,
4+
timestamp,
5+
}: {
6+
serviceName: string;
7+
dashboardUrl: string;
8+
timestamp: string;
9+
}) => {
10+
return (
11+
<div
12+
style={{
13+
fontFamily: "'Inter', 'Segoe UI', Helvetica, Arial, sans-serif",
14+
backgroundColor: '#171a1c',
15+
padding: '24px',
16+
margin: '0',
17+
color: '#f3f6fb',
18+
}}
19+
>
20+
<table
21+
width="100%"
22+
cellPadding="0"
23+
cellSpacing="0"
24+
style={{
25+
maxWidth: '600px',
26+
margin: '0 auto',
27+
backgroundColor: '#22272a',
28+
borderRadius: '10px',
29+
overflow: 'hidden',
30+
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
31+
}}
32+
>
33+
<thead>
34+
<tr>
35+
<th
36+
style={{
37+
backgroundColor: '#b80a47',
38+
padding: '20px 0',
39+
fontSize: '22px',
40+
fontWeight: '600',
41+
display: 'flex',
42+
alignItems: 'center',
43+
justifyContent: 'center',
44+
gap: '10px',
45+
color: '#f3f6fb',
46+
}}
47+
>
48+
<img
49+
src="https://raw.githubusercontent.com/KSJaay/Lunalytics/refs/heads/main/public/icon-192x192.png"
50+
width={'36px'}
51+
height={'36px'}
52+
/>
53+
Lunalytics - Outage Detected
54+
</th>
55+
</tr>
56+
</thead>
57+
58+
<tbody>
59+
<tr>
60+
<td
61+
style={{
62+
padding: '24px',
63+
backgroundColor: '#22272a',
64+
}}
65+
>
66+
<h2
67+
style={{
68+
margin: '0 0 12px 0',
69+
color: '#9fa9af',
70+
fontSize: '20px',
71+
}}
72+
>
73+
🚨 Service Currently Unreachable
74+
</h2>
75+
<p
76+
style={{
77+
margin: '0 0 12px 0',
78+
fontSize: '16px',
79+
lineHeight: '1.5',
80+
color: '#f3f6fb',
81+
}}
82+
>
83+
Our monitoring system has detected that{' '}
84+
<strong style={{ color: '#9fa9af' }}>{serviceName}</strong> is
85+
currently{' '}
86+
<strong style={{ color: '#f31260' }}>down/unreachable</strong>.
87+
</p>
88+
89+
<p
90+
style={{
91+
margin: '0 0 16px 0',
92+
fontSize: '14px',
93+
color: '#9fa9af',
94+
}}
95+
>
96+
Detected at: {timestamp}
97+
</p>
98+
99+
<div style={{ textAlign: 'center', margin: '28px 0' }}>
100+
<a
101+
href={dashboardUrl}
102+
target="_blank"
103+
rel="noopener noreferrer"
104+
style={{
105+
display: 'inline-block',
106+
backgroundColor: '#0072f5',
107+
padding: '12px 24px',
108+
borderRadius: '8px',
109+
fontSize: '15px',
110+
textDecoration: 'none',
111+
fontWeight: '600',
112+
color: '#f3f6fb',
113+
}}
114+
>
115+
View Dashboard
116+
</a>
117+
</div>
118+
119+
<p
120+
style={{
121+
fontSize: '14px',
122+
color: '#9fa9af',
123+
}}
124+
>
125+
You’ll be notified again when the service is back online.
126+
</p>
127+
</td>
128+
</tr>
129+
</tbody>
130+
131+
<tfoot>
132+
<tr>
133+
<td
134+
style={{
135+
backgroundColor: '#292e31',
136+
padding: '16px',
137+
textAlign: 'center',
138+
fontSize: '12px',
139+
color: '#9fa9af',
140+
}}
141+
>
142+
<a
143+
href="https://github.com/KSJaay/lunalytics"
144+
style={{
145+
color: '#13a452',
146+
}}
147+
target="_blank"
148+
rel="noopener noreferrer"
149+
>
150+
Lunalytics
151+
</a>{' '}
152+
- Made with ❤️ by KSJaay
153+
</td>
154+
</tr>
155+
</tfoot>
156+
</table>
157+
</div>
158+
);
159+
};
160+
161+
export default NotificationBasicEmailTemplate;

‎app/components/notifications/emails/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { default as NotificationBasicEmailTemplate } from './basic';
2+
export { default as NotificationPrettyEmailTemplate } from './pretty';
3+
export { default as NotificationNerdyEmailTemplate } from './nerdy';
4+
export { default as NotificationRecoveredEmailTemplate } from './recovered';

0 commit comments

Comments
 (0)