Review

package.json

@@ -26,6 +26,7 @@
 		"ethereum-blockies-base64": "^1.0.2",
 		"eventemitter3": "^4.0.7",
 		"fuzzysort": "^2.0.1",
+		"ical-js-parser": "^0.7.0",
 		"mobx": "^6.5.0",
 		"mobx-react": "^7.4.0",
 		"react": "^17.0.2",

src/components/CollapsedText/CollapsedText.tsx

@@ -0,0 +1,28 @@
+import { Button } from "antd";
+import { useState } from "react";
+
+const CollapsedText = ({ text, collapseCount }: { text: string, collapseCount: number }) => {
+    const [isCollapsed, setIsCollapsed] = useState(true);
+
+    if (text.length <= collapseCount) {
+        return <p>{text}</p>;
+    }
+
+    const actionText = isCollapsed ? 'Show More' : 'Show Less';
+    const displayText = isCollapsed ? `${text.slice(0, collapseCount)}...` : text;
+
+    const handleAction = () => {
+        setIsCollapsed(!isCollapsed);
+    }
+
+    return (
+        <p>
+            {displayText}
+            <Button type="link" style={{ padding: '0 3px' }} onClick={handleAction}>
+                {actionText}
+            </Button>
+        </p>
+    );
+};
+
+export default CollapsedText;

src/components/smallButton/smallButton.tsx

@@ -16,4 +16,5 @@ export enum smallButtonIcons {
 	restore = 'fa-rotate-left',
 	forward = 'fa-arrow-right',
 	arrowLeft = 'fa-arrow-left',
+	calendar = 'fa-calendar',
 }

src/pages/ComposePage/ComposePage.tsx

@@ -10,6 +10,7 @@ import { Button } from 'antd';
 import ComposeMailFooter from './components/Mailbox/ComposeMailFooter';
 import ComposeMailBody from './components/Mailbox/ComposeMailBody';
 import { MailComposeMeta } from './components/MailComposeMeta';
+import MailboxCalendarEventEditor from './components/Mailbox/MailboxCalendarEventEditor/MailboxCalendarEventEditor';
 
 const ComposePage = observer(() => {
 	const navigate = useNav();
@@ -36,6 +37,7 @@ const ComposePage = observer(() => {
 						</div>
 					</div>
 					<MailComposeMeta />
+					<MailboxCalendarEventEditor />
 				</div>
 				<div className="mail-body" style={{ position: 'relative' }}>
 					<ComposeMailBody />

src/pages/ComposePage/components/MailMeta.scss

@@ -0,0 +1,3 @@
+.mail-meta {
+    padding-bottom: 15px;
+}

src/pages/ComposePage/components/Mailbox/ComposeMailFooter.tsx

@@ -11,6 +11,8 @@ import { blockchainsMap } from '../../../../constants';
 import classNames from 'classnames';
 import { Dropdown, Menu } from 'antd';
 import mailList from '../../../../stores/MailList';
+import { createEventFileString } from '../../../../utils/eventFileString';
+import { isValidCalendarEventDates } from '../../../../utils/calendarEventDate';
 
 const evmNetworks = (Object.keys(EVM_NAMES) as unknown as EVMNetwork[]).map((network: EVMNetwork) => ({
 	name: EVM_NAMES[network],
@@ -103,10 +105,33 @@ const ComposeMailFooter = observer(() => {
 				await domain.handleSwitchRequest(acc.wallet.factory.wallet, curr, acc.account);
 			}
 
+			const payload = mailbox.textEditorData;
+
+			if (mailbox.event.active && mailbox.event.start && mailbox.event.end) {
+				const eventBlockText = createEventFileString({
+					organizer: mailbox.from?.account.address || '',
+					attendees: mailbox.to.map(toAddress => toAddress.address).filter(i => i) as string[],
+					start: mailbox.event.start,
+					end: mailbox.event.end,
+					summary: mailbox.event.summary || '',
+					location: mailbox.event.location || '',
+					description: mailbox.event.description || '',
+				});
+
+				if (payload.blocks && Array.isArray(payload.blocks)) {
+					payload.blocks.push({
+						type: "calendarEvent",
+						data: {
+							text: eventBlockText
+						}
+					});
+				}
+			}
+
 			const msgId = await mailer.sendMail(
 				acc,
 				mailbox.subject,
-				JSON.stringify(mailbox.textEditorData),
+				JSON.stringify(payload),
 				recipients,
 				mailbox.network,
 			);
@@ -120,6 +145,8 @@ const ComposeMailFooter = observer(() => {
 		}
 	};
 
+	const validCalendarEvent = !mailbox.event.active || isValidCalendarEventDates(mailbox.event.start, mailbox.event.end);
+
 	return (
 		<div className="mail-footer compose-mail-footer">
 			<div
@@ -129,7 +156,8 @@ const ComposeMailFooter = observer(() => {
 						mailer.sending ||
 						!mailbox.to.some(r => r.isAchievable) ||
 						!mailbox.textEditorData?.blocks?.length ||
-						!mailbox.to.length,
+						!mailbox.to.length ||
+						!validCalendarEvent,
 					withDropdown: mailbox.from?.wallet.factory.blockchainGroup === 'evm',
 				})}
 			>

src/pages/ComposePage/components/Mailbox/MailboxCalendarEventEditor/MailboxCalendarEventEditor.scss

@@ -0,0 +1,43 @@
+button span {
+    margin-left: 3px;
+}
+
+.add-event-btn-wrapper {
+    z-index: 5;
+    position: absolute;
+    transform: translateY(-50%);
+    margin-left: 15px;
+
+    .ant-btn-primary {
+        background-color: rgba(26, 179, 148, 1);
+        border-color: rgba(26, 179, 148, 1);
+        border-radius: 5px;
+
+        &:hover,
+        &:focus {
+            background-color: rgb(22, 147, 122);
+            border-color: rgb(22, 147, 122);
+        }
+    }
+}
+
+.add-event-section {
+    transition-property: height, min-height;
+    transition-duration: 0.2s;
+    transition-timing-function: linear;
+    overflow: hidden;
+    border: 1px solid #e0e0e0;
+
+    &.inactive {
+        border-bottom: none;
+    }
+
+    .add-event-section-content {
+        width: 100%;
+        padding: 35px 15px;
+
+        .mail-params {
+            padding: 0px !important;
+        }
+    }
+}

src/pages/ComposePage/components/Mailbox/MailboxCalendarEventEditor/MailboxCalendarEventEditor.tsx

@@ -0,0 +1,93 @@
+import mailbox from '../../../../../stores/Mailbox';
+import './MailboxCalendarEventEditor.scss';
+import { smallButtonIcons } from '../../../../../components/smallButton/smallButton';
+import { observer } from 'mobx-react';
+import { useRef } from 'react';
+import { Button, DatePicker, Input } from 'antd';
+import { RangePickerProps } from 'antd/lib/date-picker';
+
+const MailboxCalendarEventEditor = observer(() => {
+    const eventSectionRef = useRef<HTMLDivElement>(null);
+    const calculatedHeight = useRef(0);
+
+    const onOk = (value: RangePickerProps['value']) => {
+        if (value) {
+            const [start, end] = value;
+            if (start && end) {
+                mailbox.event.start = start.toDate();
+                mailbox.event.end = end.toDate();
+            }
+        }
+    }
+
+    const height = mailbox.event.active ? `${calculatedHeight.current}px` : '0px';
+    return (
+        <>
+            <div className='add-event-btn-wrapper'>
+                <Button
+                    type='primary'
+                    className='add-event-btn'
+                    onClick={() => {
+                        calculatedHeight.current = eventSectionRef.current?.clientHeight || 0;
+                        mailbox.event.active = !mailbox.event.active
+                    }}
+                    title={mailbox.event.active ? 'Remove Calendar Event' : 'Add Calendar Event'}
+                    icon={<i className={`fa ${mailbox.event.active ? smallButtonIcons.cross : smallButtonIcons.calendar}`} />}
+                >
+                    {mailbox.event.active ? 'Remove Event' : 'Add Event'}
+                </Button>
+            </div>
+            <div style={{ height: height, minHeight: height }} className={`mail-meta compose-meta add-event-section ${!mailbox.event.active && 'inactive'}`}>
+                <div className='add-event-section-content' ref={eventSectionRef}>
+                    <div className="mail-params">
+                        <div className="mmp-row">
+                            <label className="mmp-row-title">Summary:</label>
+                            <div className="mmp-row-value">
+                                <Input
+                                    type="text"
+                                    style={{ width: '100%' }}
+                                    value={mailbox.event.summary}
+                                    onChange={e => (mailbox.event.summary = e.target.value)}
+                                />
+                            </div>
+                        </div>
+                        <div className="mmp-row">
+                            <label className="mmp-row-title">When:</label>
+                            <div className="mmp-row-value">
+                                <DatePicker.RangePicker
+                                    showTime={{ format: 'HH:mm' }}
+                                    format="YYYY-MM-DD HH:mm"
+                                    minuteStep={5}
+                                    onOk={onOk}
+                                />
+                            </div>
+                        </div>
+                        <div className="mmp-row">
+                            <label className="mmp-row-title">Location:</label>
+                            <div className="mmp-row-value">
+                                <Input
+                                    type="text"
+                                    style={{ width: '100%' }}
+                                    value={mailbox.event.location}
+                                    onChange={e => (mailbox.event.location = e.target.value)}
+                                />
+                            </div>
+                        </div>
+                        <div className="mmp-row">
+                            <label className="mmp-row-title">Description:</label>
+                            <div className="mmp-row-value">
+                                <Input.TextArea
+                                    rows={4}
+                                    value={mailbox.event.description}
+                                    onChange={e => (mailbox.event.description = e.target.value)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+});
+
+export default MailboxCalendarEventEditor;

src/pages/ComposePage/components/Mailbox/MailboxEditor/MailboxEditor.tsx

@@ -30,7 +30,6 @@ const MailboxEditor = () => {
 		<div
 			style={{
 				padding: '25px 15px 0',
-				borderTop: '1px solid #e0e0e0',
 				flexGrow: 1,
 			}}
 		>