From 72eeaa348b450df60c2bcaa666f9171b62ad0bbe Mon Sep 17 00:00:00 2001 From: Lina Date: Thu, 6 Nov 2025 14:24:15 +0100 Subject: [PATCH 1/3] Inbox mail view and create modal --- components/kern-icons/icons.ts | 3 +- inbox-mail/CreateNewMailModal.tsx | 173 ++++++++++++++++++++++++++++++ inbox-mail/InboxMail.tsx | 36 +++++++ inbox-mail/InboxMailView.tsx | 30 ++++++ inbox-mail/service-mail.tsx | 9 ++ 5 files changed, 250 insertions(+), 1 deletion(-) create mode 100644 inbox-mail/CreateNewMailModal.tsx create mode 100644 inbox-mail/InboxMail.tsx create mode 100644 inbox-mail/InboxMailView.tsx create mode 100644 inbox-mail/service-mail.tsx diff --git a/components/kern-icons/icons.ts b/components/kern-icons/icons.ts index 372f6c7..ec489fd 100644 --- a/components/kern-icons/icons.ts +++ b/components/kern-icons/icons.ts @@ -1,5 +1,5 @@ import { memo } from 'react'; -import { IconActivity, IconAdjustments, IconAdjustmentsAlt, IconAdjustmentsOff, IconAlertCircle, IconAlertTriangle, IconAlertTriangleFilled, IconAngle, IconApi, IconArchive, IconArrowAutofitDown, IconArrowCurveRight, IconArrowDown, IconArrowLeft, IconArrowNarrowLeft, IconArrowNarrowRight, IconArrowRight, IconArrowsRandom, IconArrowsSort, IconArrowUp, IconArrowUpRight, IconAssembly, IconBallpen, IconBallpenOff, IconBell, IconBolt, IconBottle, IconBox, IconBoxOff, IconBrandGithub, IconBrandOpenai, IconBrandPython, IconBulb, IconBulldozer, IconCamera, IconCategoryPlus, IconCell, IconChartBubble, IconChartCircles, IconChartDots3, IconChartLine, IconChartPie, IconCheck, IconChecks, IconChevronCompactLeft, IconChevronCompactRight, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircle, IconCircleCheck, IconCircleCheckFilled, IconCircleMinus, IconCirclePlus, IconClick, IconClipboard, IconClipboardCheck, IconClipboardOff, IconClock, IconCode, IconCodePlus, IconColorPicker, IconColumns, IconColumns1, IconColumns2, IconColumns3, IconCopy, IconCrown, IconCrownOff, IconDatabase, IconDatabasePlus, IconDeviceFloppy, IconDots, IconDotsVertical, IconDownload, IconEdit, IconEngine, IconExclamationCircle, IconExclamationMark, IconExternalLink, IconEye, IconEyeCancel, IconEyeCheck, IconEyeOff, IconFile, IconFileDownload, IconFileImport, IconFileInfo, IconFilePencil, IconFiles, IconFileText, IconFileUpload, IconFilter, IconFilterOff, IconFishHook, IconFolderBolt, IconGitCommit, IconGripVertical, IconHandClick, IconHeading, IconHelp, IconHexagons, IconHierarchy, IconHierarchy3, IconHistory, IconHome, IconHourglass, IconHourglassEmpty, IconInfoCircle, IconInfoCircleFilled, IconInfoSquare, IconLayoutList, IconLayoutNavbarCollapse, IconLayoutSidebar, IconLetterGSmall, IconLink, IconList, IconLoader, IconLoader2, IconLockAccess, IconMap, IconMaximize, IconMessageCircle, IconMinus, IconMessageCircleSearch, IconMessages, IconMinimize, IconMoustache, IconNews, IconNotes, IconPencil, IconPlayCardStar, IconPlayerPlay, IconPlayerPlayFilled, IconPlus, IconPoint, IconPointerOff, IconPointerSearch, IconPointFilled, IconQuestionMark, IconRecycle, IconRefresh, IconRefreshAlert, IconResize, IconRobot, IconRotate, IconScissors, IconScreenshot, IconSearch, IconSend, IconSettings, IconShare, IconShieldCheckFilled, IconShieldFilled, IconSquare, IconSquareCheck, IconStar, IconTag, IconTemplate, IconTerminal, IconThumbDown, IconThumbDownFilled, IconThumbUp, IconThumbUpFilled, IconTrash, IconTrashXFilled, IconTriangleInverted, IconTriangleSquareCircle, IconUpload, IconUser, IconUsersGroup, IconUserX, IconVariable, IconVariablePlus, IconVersions, IconWand, IconWaveSine, IconWebhook, IconWreckingBall, IconX, IconZoomCode, IconDragDrop2, IconCircleDotted, IconWorld } from '@tabler/icons-react'; +import { IconActivity, IconAdjustments, IconAdjustmentsAlt, IconAdjustmentsOff, IconAlertCircle, IconAlertTriangle, IconAlertTriangleFilled, IconAngle, IconApi, IconArchive, IconArrowAutofitDown, IconArrowCurveRight, IconArrowDown, IconArrowLeft, IconArrowNarrowLeft, IconArrowNarrowRight, IconArrowRight, IconArrowsRandom, IconArrowsSort, IconArrowUp, IconArrowUpRight, IconAssembly, IconBallpen, IconBallpenOff, IconBell, IconBolt, IconBottle, IconBox, IconBoxOff, IconBrandGithub, IconBrandOpenai, IconBrandPython, IconBulb, IconBulldozer, IconCamera, IconCategoryPlus, IconCell, IconChartBubble, IconChartCircles, IconChartDots3, IconChartLine, IconChartPie, IconCheck, IconChecks, IconChevronCompactLeft, IconChevronCompactRight, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircle, IconCircleCheck, IconCircleCheckFilled, IconCircleMinus, IconCirclePlus, IconClick, IconClipboard, IconClipboardCheck, IconClipboardOff, IconClock, IconCode, IconCodePlus, IconColorPicker, IconColumns, IconColumns1, IconColumns2, IconColumns3, IconCopy, IconCrown, IconCrownOff, IconDatabase, IconDatabasePlus, IconDeviceFloppy, IconDots, IconDotsVertical, IconDownload, IconEdit, IconEngine, IconExclamationCircle, IconExclamationMark, IconExternalLink, IconEye, IconEyeCancel, IconEyeCheck, IconEyeOff, IconFile, IconFileDownload, IconFileImport, IconFileInfo, IconFilePencil, IconFiles, IconFileText, IconFileUpload, IconFilter, IconFilterOff, IconFishHook, IconFolderBolt, IconGitCommit, IconGripVertical, IconHandClick, IconHeading, IconHelp, IconHexagons, IconHierarchy, IconHierarchy3, IconHistory, IconHome, IconHourglass, IconHourglassEmpty, IconInfoCircle, IconInfoCircleFilled, IconInfoSquare, IconLayoutList, IconLayoutNavbarCollapse, IconLayoutSidebar, IconLetterGSmall, IconLink, IconList, IconLoader, IconLoader2, IconLockAccess, IconMap, IconMaximize, IconMessageCircle, IconMinus, IconMessageCircleSearch, IconMessages, IconMinimize, IconMoustache, IconNews, IconNotes, IconPencil, IconPlayCardStar, IconPlayerPlay, IconPlayerPlayFilled, IconPlus, IconPoint, IconPointerOff, IconPointerSearch, IconPointFilled, IconQuestionMark, IconRecycle, IconRefresh, IconRefreshAlert, IconResize, IconRobot, IconRotate, IconScissors, IconScreenshot, IconSearch, IconSend, IconSettings, IconShare, IconShieldCheckFilled, IconShieldFilled, IconSquare, IconSquareCheck, IconStar, IconTag, IconTemplate, IconTerminal, IconThumbDown, IconThumbDownFilled, IconThumbUp, IconThumbUpFilled, IconTrash, IconTrashXFilled, IconTriangleInverted, IconTriangleSquareCircle, IconUpload, IconUser, IconUsersGroup, IconUserX, IconVariable, IconVariablePlus, IconVersions, IconWand, IconWaveSine, IconWebhook, IconWreckingBall, IconX, IconZoomCode, IconDragDrop2, IconCircleDotted, IconWorld, IconMail } from '@tabler/icons-react'; export const MemoIconHome = memo(IconHome); export const MemoIconInfoCircle = memo(IconInfoCircle); @@ -185,3 +185,4 @@ export const MemoIconMinus = memo(IconMinus); export const MemoIconDragDrop2 = memo(IconDragDrop2); export const MemoIconCircleDotted = memo(IconCircleDotted); export const MemoIconWorld = memo(IconWorld); +export const MemoIconMail = memo(IconMail); \ No newline at end of file diff --git a/inbox-mail/CreateNewMailModal.tsx b/inbox-mail/CreateNewMailModal.tsx new file mode 100644 index 0000000..a01511c --- /dev/null +++ b/inbox-mail/CreateNewMailModal.tsx @@ -0,0 +1,173 @@ +import BaseModal from "@/src/components/Common/ModalComponents/Modal"; +import ModalCreateFooter from "@/src/components/Common/ModalComponents/ModalCreateFooter"; +import { Dialog } from "@headlessui/react"; +import { useCallback, useMemo, useRef, useState } from "react"; +import { MemoIconMail } from "../components/kern-icons/icons"; +import { useTranslation } from "react-i18next"; +import { InfoButton } from "../components/InfoButton"; +import { useRouter } from "next/router"; +import { sendNewMail } from "./service-mail"; +import useRefState from "../hooks/useRefState"; + +type CreateNewMailModalProps = { + open: boolean; + setOpen: (open: boolean) => void; +} + +export default function CreateNewMailModal(props: CreateNewMailModalProps) { + const router = useRouter(); + const { t } = useTranslation('projectOverview'); + const projectId = router.query.projectId as string; + const chatId = router.query.chatId as string; + const { state: sendTo, setState: setSendTo, ref: sendToRef } = useRefState(''); + const { state: subject, setState: setSubject, ref: subjectRef } = useRefState(''); + const { state: content, setState: setContent, ref: contentRef } = useRefState(''); + const { state: includeProject, setState: setIncludeProject, ref: includeProjectRef } = useRefState(false); + const { state: includeChat, setState: setIncludeChat, ref: includeChatRef } = useRefState(false); + const { state: markAsImportant, setState: setMarkAsImportant, ref: markAsImportantRef } = useRefState(false); + + const cancelButtonRef = useRef(null); + + const initModal = useCallback(() => { + setSendTo(''); + setSubject(''); + setContent(''); + setIncludeProject(false); + setIncludeChat(false); + setMarkAsImportant(false); + }, []); + + const onTransitionComplete = useCallback(initModal, []); + + const disabledSend = useMemo(() => { + return sendTo.trim() === '' || subject.trim() === '' || content.trim() === ''; + }, [sendTo, subject, content]); + + const handleCreateMail = useCallback(() => { + const metaData = { + includeProject: includeProjectRef.current, + includeChat: includeChatRef.current + }; + sendNewMail(sendToRef.current, subjectRef.current, contentRef.current, markAsImportantRef.current, metaData, (result) => { + props.setOpen(false); + initModal(); + }); + }, []); + + return ( + +
+
+
+ +
+
+ + {t("inboxMail.modalTitle")} + +
+
+ +
+ setSendTo(e.target.value)} + /> +
+
+
+ +
+ setSubject(e.target.value)} + /> +
+
+
+ +
+