diff --git a/components/InboxMailAdminPanel.tsx b/components/InboxMailAdminPanel.tsx new file mode 100644 index 0000000..aa507f4 --- /dev/null +++ b/components/InboxMailAdminPanel.tsx @@ -0,0 +1,111 @@ +import React from "react"; +import { InboxMailThread, InboxMailThreadSupportProgressState } from "./inbox-mail/types-mail"; +import { IconExternalLink, IconProgressCheck } from "@tabler/icons-react"; +import KernDropdown from "./KernDropdown"; + + +interface MetaData { + supportOwnerName?: { first: string; last: string }; + projectId?: string; + projectName?: string; + conversationId?: string; + conversationHeader?: string; +} + +interface ProgressOption { + name: string; + value: InboxMailThreadSupportProgressState; +} + +interface InboxMailAdminPanelProps { + selectedThread: InboxMailThread; + progressStateOptions: ProgressOption[]; + handleInboxMailProgressChange: (value: InboxMailThreadSupportProgressState) => void; +} + +function InboxMailAdminPanel(props: InboxMailAdminPanelProps) { + return ( +
+
+
+ Progress: + option.value === props.selectedThread.progressState + )?.name || "Set progress" + } + options={props.progressStateOptions} + selectedOption={(option: { label: string; value: InboxMailThreadSupportProgressState }) => + props.handleInboxMailProgressChange(option.value) + } + /> +
+ {props.selectedThread.progressState !== InboxMailThreadSupportProgressState.PENDING && props.selectedThread.metaData?.supportOwnerName && ( +
+ + {props.selectedThread.metaData.supportOwnerName.first}{" "} + {props.selectedThread.metaData.supportOwnerName.last} +
+ )} +
+ + {props.selectedThread.metaData?.projectId && ( +
+
+ Project +
+ +
+ ID: + {props.selectedThread.metaData.projectId} +
+
+ {props.selectedThread.metaData.projectName} +
+ +
+ )} + + {props.selectedThread.metaData?.conversationId && ( +
+
+ Conversation +
+ +
+ ID: + {props.selectedThread.metaData.conversationId} +
+
+ {props.selectedThread.metaData.conversationHeader || "N/A"} +
+ +
+ )} +
+ ); +}; + +export default InboxMailAdminPanel; diff --git a/components/inbox-mail/CreateNewMailModal.tsx b/components/inbox-mail/CreateNewMailModal.tsx new file mode 100644 index 0000000..e39bd15 --- /dev/null +++ b/components/inbox-mail/CreateNewMailModal.tsx @@ -0,0 +1,407 @@ +import { Dialog, Transition } from "@headlessui/react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useRouter } from "next/router"; +import useRefState from "../../hooks/useRefState"; +import { InfoButton } from "../InfoButton"; +import { MemoIconMail } from "../kern-icons/icons"; +import { User, InboxMailThread } from "./types-mail"; +import { Fragment } from 'react' +import KernButton from "../kern-button/KernButton"; +import KernDropdown from "../KernDropdown"; +interface CreateNewMailModalProps { + open: boolean; + setOpen: (open: boolean) => void; + handleInboxMailCreation: (content: string, recipientIds?: string[], subject?: string, markAsImportant?: boolean, metaData?: any, threadId?: string) => void; + users: User[]; + currentUser: User; + isAdmin: boolean; + selectedOrganization?: any; + setSelectedOrganization?: (org: any) => void; + organizations?: any[]; + thread?: InboxMailThread; + isNewThread?: boolean; + isAdminSupportThread?: boolean; + translationScope?: { type: "local" | "i18n", translator: any } +}; + +export default function CreateNewMailModal(props: CreateNewMailModalProps) { + const router = useRouter(); + const t = useMemo(() => props.translationScope?.translator, [props.translationScope.translator]); + + const projectId = router.query.projectId as string; + const chatId = router.query.chatId as string; + 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 { state: selectedPeople, setState: setSelectedPeople, ref: selectedPeopleRef } = useRefState([]); + + + const cancelButtonRef = useRef(null); + + useEffect(() => { + if (props.open && props.thread && !props.isNewThread && props.thread.latestMail && props.users) { + + const currentThreadPeople = props.thread.participantIds; + setSelectedPeople(props.users.filter((user) => currentThreadPeople.includes(user.id) && user.id !== props.currentUser.id)); + setSubject(props.thread.subject); + } + }, [props.open, props.thread, props.isNewThread, props.users]); + + const initModal = useCallback(() => { + setSelectedPeople([]); + setSubject(''); + setContent(''); + setIncludeProject(false); + setIncludeChat(false); + }, []); + + const clearRouterParams = useCallback(() => { + if (projectId || chatId) { + router.replace('/inbox-mail'); + } + }, [projectId, chatId]); + + const onTransitionComplete = useCallback(initModal, []); + + const disabledSend = useMemo(() => { + return (props.isAdminSupportThread ? false : selectedPeople.length === 0) || subject.trim() === '' || content.trim() === ''; + }, [selectedPeople, subject, content, props.isAdminSupportThread]); + + const handleCreateMail = useCallback(() => { + const metaData = { + ...(projectId && includeProjectRef.current && { projectId }), + ...(chatId && includeChatRef.current && { conversationId: chatId }) + }; + props.handleInboxMailCreation(contentRef.current, selectedPeopleRef.current.map((user) => user.id), subjectRef.current, markAsImportantRef.current, metaData, props.isNewThread ? undefined : props.thread?.id); + initModal(); + clearRouterParams(); + }, [props.thread?.id, props.isNewThread]); + + return ( + + null}> + +
+ + +
+
+ +
+
+ + +
+
+
+ +
+
+ + {t("inboxMail.modalTitle")} + +
+ {props.isAdmin && props.isNewThread && !props.isAdminSupportThread && +
+
Select organization
+ +
+ } + {props.isAdminSupportThread ? + + : + + } +
+ +
+ setSubject(e.target.value)} + disabled={!props.isNewThread} + /> +
+
+
+ +
+