@riosst100/pwa-marketplace 3.2.9 → 3.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "3.2.9",
+  "version": "3.3.1",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/AgeVerification/ageVerification.js

@@ -0,0 +1,121 @@
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import AgeVerificationModal from '@riosst100/pwa-marketplace/src/components/AgeVerificationModal';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useToasts } from '@magento/peregrine/lib/Toasts';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import { useAgeVerification } from '@riosst100/pwa-marketplace/src/talons/AgeVerification/useAgeVerification'
+
+const storage = new BrowserPersistence();
+
+const AgeVerification = (props) => {
+    const { pageType, product } = props;
+    
+    const [modalOpen, setModalOpen] = useState(false);
+
+    const [month, setMonth] = useState("");
+    const [day, setDay] = useState("");
+    const [year, setYear] = useState("");
+    const [ageVerificationErrorMessage, setAgeVerificationErrorMessage] = useState("");
+
+    const history = useHistory();
+    const location = useLocation();
+
+    const [, { addToast }] = useToasts();
+
+    const handleClose = () => setModalOpen(false);
+
+    const {
+        error,
+        loading,
+        ageVerificationConfig
+     } = useAgeVerification({ pageType, product });
+
+    const months = [
+        "January","February","March","April","May","June",
+        "July","August","September","October","November","December"
+    ];
+
+    const savedAge = storage.getItem('age');
+    
+    useEffect(() => {
+        if (ageVerificationConfig && ageVerificationConfig.status) {
+            if (savedAge && savedAge > 18) {
+                setModalOpen(false);
+            } else {
+                setModalOpen(true);
+            }
+        }
+    }, [loading, setModalOpen, savedAge, ageVerificationConfig]);
+
+    const redirectUser = () => {
+        const currentPathname = location.pathname;
+        let historyPathname = history.location.pathname;
+        if (historyPathname == currentPathname) {
+            historyPathname = '/';
+        }
+
+        addToast({
+            type: 'error',
+            message: 'Access is restricted because you are under 18 years old.',
+            dismissable: true,
+            timeout: 5000
+        });
+
+        history.push(historyPathname)
+    };
+
+    const handleUnderAge = useCallback(() => {
+        redirectUser();
+    }, [])
+
+    const handleOverAge = useCallback(() => {
+        if (!day || !month || !year) {
+            setAgeVerificationErrorMessage('Please enter your birthday!');
+            return false;
+        }
+
+        const birthDate = new Date(
+            year,
+            months.indexOf(month),
+            day
+        );
+        const today = new Date();
+        const age = today.getFullYear() - birthDate.getFullYear();
+        const isBirthdayPassed =
+        today >= new Date(today.getFullYear(), birthDate.getMonth(), birthDate.getDate());
+
+        if (age > 18 || (age === 18 && isBirthdayPassed)) {
+            storage.setItem('age', age);
+
+            addToast({
+                type: 'success',
+                message: 'Thank you for confirming your age. Your birthday has been saved. You may now continue.',
+                dismissable: true,
+                timeout: 5000
+            });
+            
+            handleClose();
+            return true;
+        }
+        
+        redirectUser();
+        return;
+    }, [day, month, year])
+
+    
+
+    return modalOpen ? (
+        <AgeVerificationModal
+            ageVerificationErrorMessage={ageVerificationErrorMessage}
+            modalOpen={modalOpen}
+            months={months}
+            setMonth={setMonth}
+            setDay={setDay}
+            setYear={setYear}
+            handleOverAge={handleOverAge}
+            handleUnderAge={handleUnderAge}
+        />
+    ) : ''
+};
+
+export default AgeVerification;

package/src/components/AgeVerification/index.js

@@ -1,2 +1 @@
-export { default } from './ageVerificationModal';
-// export { default as AgeVerificationModalShimmer } from './ageVerificationModal.shimmer';
+export { default } from './ageVerification';

package/src/components/AgeVerificationModal/ageVerificationModal.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import modalClasses from './ageVerificationModal.module.css';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import { AlertTriangle } from 'react-feather';
+
+
+// Simple portal root fallback
+const getPortalRoot = () => {
+    let root = document.getElementById('age-verification-portal');
+    if (!root) {
+        root = document.createElement('div');
+        root.id = 'age-verification-portal';
+        document.body.appendChild(root);
+    }
+    return root;
+};
+
+const AgeVerificationModal = props => {
+
+    const {
+        setMonth,
+        setDay,
+        setYear,
+        handleOverAge,
+        handleUnderAge,
+        ageVerificationErrorMessage,
+        modalOpen,
+        months
+    } = props;
+
+    const currentYear = new Date().getFullYear();
+    const years = Array.from({ length: 100 }, (_, i) => currentYear - i);
+    const days = Array.from({ length: 31 }, (_, i) => i + 1);
+
+    const modal = modalOpen ? (
+        <div className={modalClasses.overlay} role="dialog" aria-modal="true" aria-label="Modal">
+            <div className={modalClasses.backdrop} />
+            <div className={modalClasses.dialog}>
+                <div className={modalClasses.body}>
+                    <div><Icon src={AlertTriangle} attrs={{ width: 20 }} /></div>
+                    <h2 className={modalClasses.title}>Are you over 18 years old?</h2>
+                    <p>You must be at least 18 years old to access this page. Please verify your age.</p>
+                    <label>Your Birthday</label>
+                    <div className={modalClasses.birthday}>
+                        {/* Month */}
+                        <select onChange={(e) => setMonth(e.target.value)}>
+                        <option value="">Month</option>
+                        {months.map((m) => (
+                            <option key={m} value={m}>{m}</option>
+                        ))}
+                        </select>
+
+                        {/* Day */}
+                        <select onChange={(e) => setDay(e.target.value)}>
+                        <option value="">Day</option>
+                        {days.map((d) => (
+                            <option key={d} value={d}>{d}</option>
+                        ))}
+                        </select>
+
+                        {/* Year */}
+                        <select onChange={(e) => setYear(e.target.value)}>
+                        <option value="">Year</option>
+                        {years.map((y) => (
+                            <option key={y} value={y}>{y}</option>
+                        ))}
+                        </select>
+                    </div>
+                    {ageVerificationErrorMessage && <div>{ageVerificationErrorMessage}</div>}
+                    <div className={modalClasses.actions}>
+                        <button className={modalClasses.btnUnder} onClick={handleUnderAge}>I'm under 18 years old</button>
+                        <button className={modalClasses.btnOver} onClick={handleOverAge}>I'm 18 years old</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    ) : null;
+
+    return <>{modalOpen ? ReactDOM.createPortal(modal, getPortalRoot()) : null}</>;
+};
+
+export default AgeVerificationModal;

package/src/components/{AgeVerification → AgeVerificationModal}/ageVerificationModal.module.css

@@ -1,26 +1,89 @@
+.modal label {
+  display: block;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  text-align: left;
+}
+
+/* Birthday selects */
+.birthday {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.birthday select {
+  flex: 1;
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+}
+
+/* Buttons */
+.actions {
+  display: flex;
+  gap: 10px;
+}
+
+.btnUnder {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.btnOver {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.btnUnder {
+  background: #ef4444;
+}
+
+.btnOver {
+  background: #22c55e;
+}
+
+.btnOver:hover {
+  opacity: 0.9;
+}
+
+.btnUnder:hover {
+  opacity: 0.9;
+}
+
 .overlay{
     position:fixed;
     inset:0;
-    z-index:1000;
     display:flex;
-    align-items:flex-start;
-    justify-content:center;
     padding:5vh 24px;
-    font-family:inherit
+    font-family:inherit;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
 }
 .backdrop{
     position:absolute;
     inset:0;
-    background:rgba(0,0,0,.4);
-    backdrop-filter:blur(2px)
+    background: rgba(0, 0, 0, 0.64);
+    backdrop-filter: blur(8px);
 }
 .dialog{
     position:relative;
     background:#fff;
     border-radius:12px;
     box-shadow:0 8px 32px rgba(0,0,0,.25);
-    width:clamp(320px,80vw,370px);
-    max-height:90vh;
+    width:clamp(320px,80vw,500px);
     display:flex;
     flex-direction:column
 }
@@ -52,8 +115,12 @@
     color:#222
 }
 .body{
-    padding:16px 20px;
-    overflow:auto
+    padding: 20px 50px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    flex-wrap: wrap;
 }
 .triggerBtn{
     background:#f76b1c;

package/src/components/AgeVerificationModal/index.js

@@ -0,0 +1,2 @@
+export { default } from './ageVerificationModal';
+// export { default as AgeVerificationModalShimmer } from './ageVerificationModal.shimmer';

package/src/components/LiveChat/MessagesModal.js

@@ -173,7 +173,7 @@ const MessagesModal = ({
                 onClick={(e) => e.stopPropagation()}
             >
                 <div className='flex items-center justify-between mb-3'>
-                    <h3 className='text-[18px] font-semibold'>{formatMessage({ id: 'messages.titleWithSeller', defaultMessage: 'Start Conversation With ' })} {seller?.name}</h3>
+                    <h3 className='text-[18px] font-semibold'>Send Message</h3>
                     <button onClick={onClose} aria-label='Close' className='text-gray-600 text-[30px] hover:text-black'>×</button>
                 </div>
                 <div className='flex gap-4'>
@@ -184,7 +184,7 @@ const MessagesModal = ({
                         
                         <form onSubmit={handleSubmitNewMessage} className='mb-3 rounded-[6px] p-1 flex flex-col gap-2'>
                             <div className='text-[13px] font-semibold flex items-center justify-between'>
-                                <span>{formatMessage({ id: 'messages.compose.header', defaultMessage: 'Create New Message' })}</span>
+                                <span>Send Message to {seller?.name}</span>
                                 {/* {(sortedThreads.length > 0) && (
                                     <button
                                         type='button'
@@ -217,7 +217,7 @@ const MessagesModal = ({
                                     aria-busy={isSendingNew}
                                 >
                                     {isSendingNew
-                                        ? formatMessage({ id: 'messages.compose.sending', defaultMessage: 'Send Message...' })
+                                        ? formatMessage({ id: 'messages.compose.sending', defaultMessage: 'Sending Message...' })
                                         : formatMessage({ id: 'messages.compose.send', defaultMessage: 'Send Message' })}
                                 </button>
                             </div>

package/src/components/Messages/messages.js

@@ -8,6 +8,8 @@ import defaultClasses from './messages.module.css';
 import cn from 'classnames';
 import React, { useMemo, useState, useEffect } from 'react';
 import ChatContent from '@riosst100/pwa-marketplace/src/components/LiveChat/chatContent';
+import { Link } from "react-router-dom";
+import { Star1, Verify, Sms, Message, Shop, ArrowUp2 } from 'iconsax-react';
 
 const Messages = props => {
     const { 
@@ -18,7 +20,6 @@ const Messages = props => {
     onSend,
     loading } = props;
     const classes = useStyle(defaultClasses, props.classes);
-    // const { becomeSellerProps } = useMessages(props);
     const { formatMessage } = useIntl();
     
         const [selectedThread, setSelectedThread] = useState(null);
@@ -61,29 +62,23 @@ const Messages = props => {
         }, [messages, seller]);
     
         const sortedThreads = useMemo(() => {
-            return [...threads].sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+            return [...threads].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
         }, [threads]);
+
+        const { location } = globalThis;
+
+        const query = new URLSearchParams(location.search);
     
         useEffect(() => {
-            if (!isComposing && sortedThreads?.length) {
-                const latest = sortedThreads[sortedThreads.length - 1];
-                if (!selectedThread) {
-                    setSelectedThread(latest);
-                } else {
-                    const stillThere = sortedThreads.find(t => t.message_id === selectedThread.message_id);
-                    if (!stillThere) {
-                        setSelectedThread(latest);
-                    } else {
-                        // Replace with the fresh thread data so new details from polling appear
-                        setSelectedThread(stillThere);
-                        if (selectLatestAfterSend) {
-                            setSelectedThread(latest);
-                            setSelectLatestAfterSend(false);
-                        }
-                    }
+            const messageId = query.get('id') || null;
+            if (messageId && sortedThreads?.length) {
+                const selectedThread = sortedThreads.find(t => t.message_id == messageId);
+                if (selectedThread) {
+                    console.log('selectedThread',selectedThread)
+                    setSelectedThread(selectedThread);
                 }
             }
-        }, [sortedThreads, isComposing, selectedThread, selectLatestAfterSend]);
+        }, [sortedThreads, query]);
     
         // Tandai sudah pernah load minimal sekali untuk mencegah flicker
         useEffect(() => {
@@ -165,6 +160,9 @@ const Messages = props => {
             setSelectLatestAfterSend(true);
         };
 
+
+        
+
     return (
         <>
             <div className={cn(classes.leftContent, '')}>
@@ -176,124 +174,99 @@ const Messages = props => {
                 </StoreTitle>
                 <div className={cn(classes.leftContentContainer, 'border !border-gray-100 lg_rounded-md !rounded-lg')}>
                     <div class="auth-left">
-                        <div className='px-3 py-2 border-b font-medium flex items-center justify-between'>
+                        <div className='text-[16px] px-3 py-3 border-gray-100 border-b font-medium flex items-center justify-between'>
                             <span>{formatMessage({ id: 'messages.sidebar.title', defaultMessage: 'Messages' })}</span>
-                            <button
-                                type='button'
-                                onClick={() => {
-                                    setIsComposing(true);
-                                    setSelectedThread(null);
-                                }}
-                                className='text-[12px] px-2 py-1 rounded border border-[#FF6E26] text-[#FF6E26] hover:bg-[#FF6E26] hover:text-white'
-                            >
-                                {formatMessage({ id: 'messages.compose.newMessage', defaultMessage: 'Send New Message' })}
-                            </button>
                         </div>
                         <div className='max-h-[420px] overflow-y-auto'>
-                            {(!isComposing && !hasLoadedOnce && loading && sortedThreads.length === 0) ? (
+                            {(!hasLoadedOnce && loading) ? (
                                 <div className='p-3 text-sm text-gray-500'>{formatMessage({ id: 'messages.loading', defaultMessage: 'Loading…' })}</div>
+                            ) :  !sortedThreads || sortedThreads.length === 0 ? (
+                                <div className={cn(classes.noMessages, 'text-sm text-gray-500')}>{formatMessage({ id: 'messages.detail.noMessages', defaultMessage: 'No messages yet.' })}</div>
                             ) : (
-                                sortedThreads.map(t => (
-                                    <button
-                                        key={t.message_id}
-                                        onClick={() => setSelectedThread(t)}
-                                        className={cn('w-full text-left px-3 py-2 border-b hover:bg-gray-50',
-                                            selectedThread?.message_id === t.message_id && 'bg-gray-100')}
-                                    >
-                                        <div className='flex items-center justify-between gap-2'>
-                                            <div className='text-[13px] font-semibold line-clamp-1'>{t.subject || formatMessage({ id: 'messages.noSubject', defaultMessage: 'No Subject' })}</div>
-                                            {/* <div className='text-[12px] flex-shrink-0'>
-                                                {renderStatusBadge(t.status)}
-                                            </div> */}
-                                        </div>
-                                        <div className='text-[11px] text-gray-500 mt-1'>{formatMessage({ id: 'messages.createdAt', defaultMessage: 'Created:' })} {new Date(t.created_at).toLocaleString()}</div>
-                                    </button>
-                                ))
+                                sortedThreads && sortedThreads.length && sortedThreads.map(t => 
+                                    // console.log('fffff',t)
+                                    <div>
+                                        <hr className="!border-gray-100" style={{"width": "100%"}} />
+                                        <button
+                                            key={t.message_id}
+                                            onClick={() => setSelectedThread(t)}
+                                            className={cn('w-full text-left px-3 py-2 border-b hover:bg-gray-50',
+                                                selectedThread?.message_id === t.message_id && 'bg-gray-100')}
+                                        >
+                                            <div className='flex items-center justify-between gap-2'>
+                                                <div style={{"color": "#f76b1c"}}className='text-[12px] font-semibold line-clamp-1'>{t.seller ? t.seller.name : 'Unknown Seller' }</div>
+                                                {/* <div className='text-[12px] flex-shrink-0'>
+                                                    {renderStatusBadge(t.status)}
+                                                </div> */}
+                                            </div>
+                                            <div className='flex items-center justify-between gap-2'>
+                                                <div className='text-[12px] line-clamp-1'>Subject: {t.subject || formatMessage({ id: 'messages.noSubject', defaultMessage: 'No Subject' })}</div>
+                                                {/* <div className='text-[12px] flex-shrink-0'>
+                                                    {renderStatusBadge(t.status)}
+                                                </div> */}
+                                            </div>
+                                            <div className='text-[11px] text-gray-500 mt-1'>
+                                                {t.details.total_count ? t.details.items[t.details.items.length-1].content : t.description}
+                                            </div>
+                                            <div className='text-[10px] text-gray-500 mt-2'>{new Date(t.created_at).toLocaleString()}</div>
+                                        </button>
+                                    </div>
+                                )
                             )}
                         </div>
                     </div>
                 </div>
             </div>
             <div className={classes.root}>
-                <div className="lg_border-2 lg_border-solid lg_border-subtle lg_rounded-md !border !border-gray-100 p-6 !rounded-lg">
+                <div style={{"padding": "20px"}} className="lg_border-2 lg_border-solid lg_border-subtle lg_rounded-md !border !border-gray-100 p-6 !rounded-lg">
                     {/* Compose new message (shown only when composing OR when no thread exists) */}
-                        {(isComposing || sortedThreads.length === 0) && (
-                            <form onSubmit={handleSubmitNewMessage} className='mb-3 rounded-[6px] p-1 flex flex-col gap-2'>
-                                <div className='text-[13px] font-semibold flex items-center justify-between'>
-                                    <span>{formatMessage({ id: 'messages.compose.header', defaultMessage: 'Create New Message' })}</span>
-                                    {(sortedThreads.length > 0) && (
-                                        <button
-                                            type='button'
-                                            onClick={() => setIsComposing(false)}
-                                            className='text-[12px] px-2 py-1 !border-gray-100 rounded border text-gray-600 hover:bg-gray-50'
-                                        >
-                                            {formatMessage({ id: 'messages.compose.cancel', defaultMessage: 'Cancel' })}
-                                        </button>
-                                    )}
-                                </div>
-                                <input
-                                    type='text'
-                                    className='border border-gray-100 rounded px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF6E26]'
-                                    placeholder={formatMessage({ id: 'messages.compose.subjectPlaceholder', defaultMessage: 'Subject' })}
-                                    value={newSubject}
-                                    onChange={(e) => setNewSubject(e.target.value)}
-                                />
-                                <textarea
-                                    rows={3}
-                                    className='border border-gray-100 rounded px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF6E26]'
-                                    placeholder={formatMessage({ id: 'messages.compose.contentPlaceholder', defaultMessage: 'Write a message to the seller…' })}
-                                    value={newContent}
-                                    onChange={(e) => setNewContent(e.target.value)}
-                                />
-                                <div className='flex justify-end'>
+                        {sortedThreads.length > 0 && (
+                        <div className='flex items-center justify-between mb-2'>
+                            {selectedThread && (
+                                <>
+                                    <div style={{"textAlign": "left"}}>
+                                        {selectedThread.seller && <Link to={"/seller/"+selectedThread.seller.url_key}>
+                                            {/* <div class="flex items-center justify-center gap-[10px] relative">
+                                                <Shop color="#f76b1c" size={14} variant="Outline" className='stroke-[#f76b1c]' />
+                                                <div class="relative xs_hidden lg_flex w-fit text-[12px] text-[#f76b1c] text-[14px] tracking-[0] leading-[15px] whitespace-nowrap">
+                                                    Visit Store
+                                                </div>
+                                            </div> */}
+                                            <div style={{"color": "#f76b1c"}}className='text-[14px] font-semibold line-clamp-1'>{selectedThread.seller ? selectedThread.seller.name : 'Unknown Seller' }</div>
+                                        </Link>}
+                                        <div className='mt-3 mb-1 text-[12px]'>Subject: {selectedThread?.subject || formatMessage({ id: 'messages.noSubject', defaultMessage: 'No Subject' })}</div>
+                                        {/* <div className='text-[12px] text-gray-600 flex items-center gap-2'>
+                                            <span>{formatMessage({ id: 'messages.detail.status', defaultMessage: 'Status:' })}</span>
+                                            {selectedThread && renderStatusBadge(selectedThread.status)}
+                                        </div> */}
+                                    </div>
                                     <button
-                                        type='submit'
-                                        className={cn('px-4 py-2 rounded-[6px] text-white disabled:opacity-50 disabled:cursor-not-allowed', isSendingNew ? 'bg-gray-500 text-gray-700' : 'bg-[#FF6E26]')}
-                                        disabled={isSendingNew}
-                                        aria-busy={isSendingNew}
+                                        onClick={handleDeleteThread}
+                                        disabled={isDeleting}
+                                        className='text-[12px] px-3 py-1 rounded border text-red-600 border-red-300 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2'
                                     >
-                                        {isSendingNew
-                                            ? formatMessage({ id: 'messages.compose.sending', defaultMessage: 'Send Message...' })
-                                            : formatMessage({ id: 'messages.compose.send', defaultMessage: 'Send Message' })}
+                                        {isDeleting && (
+                                            <span className='w-3 h-3 border-2 border-red-200 border-t-red-500 rounded-full animate-spin' aria-hidden='true'></span>
+                                        )}
+                                        {isDeleting
+                                            ? formatMessage({ id: 'messages.detail.deleting', defaultMessage: 'Deleting...' })
+                                            : formatMessage({ id: 'messages.detail.delete', defaultMessage: 'Delete Message' })}
                                     </button>
-                                </div>
-                            </form>
-                        )}
-                        {!isComposing && sortedThreads.length > 0 && (
-                        <div className='flex items-center justify-between mb-2'>
-                            <div>
-                                <div className='text-[14px] font-semibold'>{selectedThread?.subject || formatMessage({ id: 'messages.noSubject', defaultMessage: 'No Subject' })}</div>
-                                {/* <div className='text-[12px] text-gray-600 flex items-center gap-2'>
-                                    <span>{formatMessage({ id: 'messages.detail.status', defaultMessage: 'Status:' })}</span>
-                                    {selectedThread && renderStatusBadge(selectedThread.status)}
-                                </div> */}
-                            </div>
-                            {selectedThread && (
-                                <button
-                                    onClick={handleDeleteThread}
-                                    disabled={isDeleting}
-                                    className='text-[12px] px-3 py-1 rounded border text-red-600 border-red-300 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2'
-                                >
-                                    {isDeleting && (
-                                        <span className='w-3 h-3 border-2 border-red-200 border-t-red-500 rounded-full animate-spin' aria-hidden='true'></span>
-                                    )}
-                                    {isDeleting
-                                        ? formatMessage({ id: 'messages.detail.deleting', defaultMessage: 'Deleting...' })
-                                        : formatMessage({ id: 'messages.detail.delete', defaultMessage: 'Delete Message' })}
-                                </button>
+                                </>
                             )}
                         </div>
                         )}
-                        {!isComposing && sortedThreads.length > 0 && (
-                        <div className='!border-gray-100 border rounded-[6px] p-3 flex-1 min-h-[320px]'>
-                            {selectedThread ? (
+                        {sortedThreads.length > 0 && selectedThread ? (
+                            <div className='!border-gray-100 border rounded-[6px] p-3 flex-1 min-h-[320px]'>
                                 <ChatContent chatData={chatData} />
-                            ) : (
-                                <div className='text-sm text-gray-500'>{formatMessage({ id: 'messages.detail.selectPrompt', defaultMessage: 'Select a message to view the conversation.' })}</div>
-                            )}
-                        </div>
+                            </div>
+                        ) : (
+                            <div className={classes.noConversationContainer}>
+                                <img src="https://cdni.iconscout.com/illustration/premium/thumb/empty-message-illustration-svg-download-png-8593289.png" style={{"width":"20%"}}/>
+                                <div className='text-sm text-gray-500'>{formatMessage({ id: 'messages.detail.noConversation', defaultMessage: 'Select a message to view the conversation.' })}</div>
+                            </div>
                         )}
-                        {!isComposing && sortedThreads.length > 0 && selectedThread && (
+                        {sortedThreads.length > 0 && selectedThread && (
                         <form onSubmit={handleSubmitReply} className='mt-3 flex gap-2'>
                             {(() => {
                                 const statusNum = Number(selectedThread.status);

package/src/components/Messages/messages.module.css

@@ -29,6 +29,21 @@
     text-align: left;
 }
 
+.noConversationContainer {
+    flex-direction: column;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    justify-content: flex-start;
+    align-items: center;
+    row-gap: 15px;
+}
+
+.noMessages {
+text-align: center;
+  padding: 60px;
+}
+
 .rootContainer {
     justify-content: space-around;
     display: flex;