propmt input in mobile + print email + ltr and rtl new message + najva token

2025-07-28 10:09:42 +03:30
parent e687f0cb5a
commit 49a4ed3ad9
19 changed files with 216 additions and 43 deletions
@@ -9,12 +9,89 @@ import MessageSpam from './MessageSpam'
 import { MailboxEnum } from '../enum/Enum'
 import MessageFavorite from './MessageFavorite'
 import MessageTrash from './MessageTrash'
+import { MessageDetail } from '../types/Types'
+import { sanitizeEmailHTML, detectTextDirection } from '@/config/func'

-const Header: FC<{ mailBoxName: MailboxEnum, flagged: boolean }> = ({ mailBoxName, flagged }) => {
+const Header: FC<{
+    mailBoxName: MailboxEnum,
+    flagged: boolean,
+    messageDetail?: MessageDetail
+}> = ({ mailBoxName, flagged, messageDetail }) => {

    const navigate = useNavigate()
    const { t } = useTranslation()

+    const handlePrint = () => {
+        if (!messageDetail) return
+
+        // Create a new window for printing
+        const printWindow = window.open('', '_blank', 'width=800,height=600')
+        if (!printWindow) return
+
+        // Get the email content
+        let content = ''
+        if (messageDetail.html && messageDetail.html.length > 0) {
+            content = sanitizeEmailHTML(messageDetail.html.join(''))
+        } else {
+            content = messageDetail.text || 'محتوای پیام'
+        }
+
+        // Detect text direction
+        const direction = detectTextDirection(content)
+
+        // Create print content
+        const printContent = `
+            <!DOCTYPE html>
+            <html dir="${direction}">
+            <head>
+                <meta charset="utf-8">
+                <title>پرینت ایمیل</title>
+                <style>
+                    body {
+                        font-family: Arial, sans-serif;
+                        line-height: 1.6;
+                        margin: 20px;
+                        direction: ${direction};
+                    }
+                    .email-header {
+                        border-bottom: 2px solid #333;
+                        padding-bottom: 10px;
+                        margin-bottom: 20px;
+                    }
+                    .email-content {
+                        font-size: 14px;
+                        line-height: 1.7;
+                    }
+                    @media print {
+                        body { margin: 0; }
+                        .no-print { display: none; }
+                    }
+                </style>
+            </head>
+            <body>
+                <div class="email-header">
+                    <h2>موضوع: ${messageDetail.subject || 'بدون موضوع'}</h2>
+                    <p><strong>فرستنده:</strong> ${messageDetail.from.name || messageDetail.from.address} &lt;${messageDetail.from.address}&gt;</p>
+                    <p><strong>تاریخ:</strong> ${new Date(messageDetail.date).toLocaleDateString('fa-IR')}</p>
+                </div>
+                <div class="email-content">
+                    ${content}
+                </div>
+            </body>
+            </html>
+        `
+
+        // Write content and print
+        printWindow.document.write(printContent)
+        printWindow.document.close()
+
+        // Wait for content to load then print
+        printWindow.onload = () => {
+            printWindow.print()
+            printWindow.close()
+        }
+    }
+
    return (
        <div className='flex justify-between items-center border-b border-border pb-6'>
            <div className='flex flex-1 lg:gap-4'>
@@ -42,6 +119,7 @@ const Header: FC<{ mailBoxName: MailboxEnum, flagged: boolean }> = ({ mailBoxNam
                </Button>
                <Button
                    variant='secondary'
+                    onClick={handlePrint}
                >
                    <div className='flex gap-2 items-center xl:px-5'>
                        <Printer size={20} color='black' />
@@ -141,7 +141,11 @@ const DetailEmail: FC = () => {

    return (
        <div className='bg-white rounded-4xl p-8'>
-            <Header flagged={messageDetail?.flagged || false} mailBoxName={messageDetail?.mailboxName as MailboxEnum} />
+            <Header
+                flagged={messageDetail?.flagged || false}
+                mailBoxName={messageDetail?.mailboxName as MailboxEnum}
+                messageDetail={messageDetail}
+            />

            <div className='mt-6 flex xl:flex-row flex-col justify-between xl:items-center'>
                <div className='flex xl:flex-row flex-col-reverse gap-4 xl:items-center'>
@@ -206,24 +206,12 @@ const List: FC = () => {
    };

    const messages = inboxData?.data?.results || [];
-    const pager = inboxData?.data?.pager;
    const rootData = inboxData?.data as unknown as Record<string, unknown>;

-    // Debug pagination data
-    console.log('Full response data:', inboxData?.data);
-    console.log('Pager data:', pager);
-    console.log('Root nextCursor:', rootData?.nextCursor);
-    console.log('Root previousCursor:', rootData?.previousCursor);

-    // Get cursors from response
    const responseNextCursor = (typeof rootData?.nextCursor === 'string' && rootData.nextCursor !== '') ? rootData.nextCursor as string : undefined;
    const responsePreviousCursor = (typeof rootData?.previousCursor === 'string' && rootData.previousCursor !== '') ? rootData.previousCursor as string : undefined;

-    // Debug pagination values
-    console.log('responseNextCursor:', responseNextCursor);
-    console.log('responsePreviousCursor:', responsePreviousCursor);
-    console.log('Will render pagination?', !!(responseNextCursor || responsePreviousCursor));
-
    return (
        <div className='mt-2 md:mt-4 px-2 md:px-0'>
            <h1 className="text-lg mb-4 md:mb-0">{t('received.title')}</h1>
@@ -36,8 +36,6 @@ export const getDraft = async (
 export const getInbox = async (
  query: MessageListQueryDto
 ): Promise<InboxResponse> => {
-  console.log("query", query);
-
  const isSearch =
    !!query.search ||
    !!query.datestart ||