@riosst100/pwa-marketplace 3.2.9 → 3.3.0

package/package.json

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

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 { 
@@ -61,29 +63,32 @@ 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);
+        
+
+        // console.log('query',query)
+        // console.log('messageId',messageId)
     
         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;
+            console.log('query',query)
+        console.log('messageId',messageId)
+    
+            if (messageId && sortedThreads?.length) {
+                const selectedThread = sortedThreads.find(t => t.message_id == messageId);
+                console.log('sortedThreads',sortedThreads)
+                console.log('selectedThread',selectedThread)
+                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 +170,9 @@ const Messages = props => {
             setSelectLatestAfterSend(true);
         };
 
+
+        
+
     return (
         <>
             <div className={cn(classes.leftContent, '')}>
@@ -176,124 +184,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;

package/src/components/RFQ/modalRfq.js

@@ -30,15 +30,42 @@ const RFQModalForm = (props) => {
 
     // Upload File with remove capability
     const [uploadedFiles, setUploadedFiles] = useState([]);
+    // Calculate safe raw-size limit to keep base64 payload under 2MB
+    const GRAPHQL_BASE64_LIMIT = 2 * 1024 * 1024;
+    const SAFE_RAW_LIMIT = Math.floor((GRAPHQL_BASE64_LIMIT * 3) / 4) - 8 * 1024;
+    const estimateBase64Size = size => Math.ceil((4 * size) / 3);
+
     const onDrop = useCallback((accepted) => {
-        setUploadedFiles(prev => [...prev, ...accepted]);
-    }, []);
+        const safe = [];
+        const rejected = [];
+        accepted.forEach(f => {
+            const est = estimateBase64Size(f.size || 0);
+            if (est <= GRAPHQL_BASE64_LIMIT) {
+                safe.push(f);
+            } else {
+                rejected.push({ name: f.name || f.path, size: f.size });
+            }
+        });
+        if (safe.length) {
+            setUploadedFiles(prev => [...prev, ...safe]);
+        }
+        if (rejected.length) {
+            addToast({
+                type: 'error',
+                message: formatMessage({
+                    id: 'productFullDetail.rfqFileTooLarge',
+                    defaultMessage: 'One or more files are too large. Max ~1.5MB each.'
+                }),
+                timeout: 4000
+            });
+        }
+    }, [addToast, formatMessage]);
 
     const {
         getRootProps,
         getInputProps,
         isDragActive
-    } = useDropzone({ onDrop });
+    } = useDropzone({ onDrop, maxSize: SAFE_RAW_LIMIT, multiple: true });
 
     const handleRemoveFile = useCallback((index) => {
         setUploadedFiles(prev => prev.filter((_, i) => i !== index));
@@ -59,8 +86,60 @@ const RFQModalForm = (props) => {
         </div>
     ));
 
+    // Helper: convert File to base64 string (without data URL prefix)
+    const toBase64 = useCallback(
+        file =>
+            new Promise((resolve, reject) => {
+                try {
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        const result = reader.result;
+                        // reader.result is a Data URL: "data:<mime>;base64,<payload>"
+                        const base64 = typeof result === 'string' && result.includes(',')
+                            ? result.split(',')[1]
+                            : '';
+                        resolve(base64);
+                    };
+                    reader.onerror = reject;
+                    reader.readAsDataURL(file);
+                } catch (e) {
+                    reject(e);
+                }
+            }),
+        []
+    );
+
     const handleSubmit = useCallback(async values => {
-        console.log('[RFQ] submit values', values);
+        // console.log('[RFQ] submit values', values);
+        // Prepare base64 conversions if any files were uploaded
+        let filesPayload = undefined;
+        if (uploadedFiles && uploadedFiles.length) {
+            // Hard guard: abort if any file would exceed limit after base64 encoding
+            const oversize = uploadedFiles.find(f => estimateBase64Size(f.size || 0) > GRAPHQL_BASE64_LIMIT);
+            if (oversize) {
+                addToast({
+                    type: 'error',
+                    message: formatMessage({
+                        id: 'productFullDetail.rfqFileTooLargeSubmit',
+                        defaultMessage: 'A selected file is too large (limit ~1.5MB).' 
+                    }),
+                    timeout: 4000
+                });
+                return;
+            }
+            try {
+                const base64List = await Promise.all(
+                    uploadedFiles.map(file => toBase64(file))
+                );
+                filesPayload = uploadedFiles.map((file, i) => ({
+                    file_name: (file && (file.name || file.path)) || '',
+                    file_type: (file && file.type) ? file.type : 'application/octet-stream',
+                    base64: base64List[i] || ''
+                }));
+            } catch (e) {
+                console.error('[RFQ] file base64 conversion failed', e);
+            }
+        }
         const input = {
             product_id: productId,
             quantity: values.quote_qty ? Number(values.quote_qty) : undefined,
@@ -70,24 +149,16 @@ const RFQModalForm = (props) => {
                 ? Number(values.quote_price_per_unit)
                 : undefined,
             date_need_quote: startDate ? startDate.toISOString() : undefined,
-            files: uploadedFiles.length
-                ? uploadedFiles.map(file => ({
-                    file_name: (file && (file.name || file.path)) || '',
-                    // Browsers do not expose real file system paths; use name as a stable placeholder
-                    file_path: (file && (file.path || file.name)) || '',
-                    // Ensure a valid MIME string; default if missing
-                    file_type: (file && file.type) ? file.type : 'application/octet-stream'
-                }))
-                : undefined
+            files: filesPayload
         };
 
-            console.log('[RFQ] input payload', input);
+            // console.log('[RFQ] input payload', input);
 
         Object.keys(input).forEach(key => input[key] === undefined && delete input[key]);
 
         try {
             const result = await handleCreateQuickRfq(input);
-            console.log('[RFQ] mutation result', result);
+            // console.log('[RFQ] mutation result', result);
             addToast({
                 type: 'success',
                 message: formatMessage({
@@ -108,7 +179,7 @@ const RFQModalForm = (props) => {
                 timeout: 4000
             });
         }
-    }, [uploadedFiles, addToast, formatMessage, handleCreateQuickRfq, setOpen, startDate]);
+    }, [uploadedFiles, addToast, formatMessage, handleCreateQuickRfq, setOpen, startDate, toBase64]);
 
     return (
         <>
@@ -271,6 +342,7 @@ const RFQModalForm = (props) => {
                                         color="#f76b1c"
                                     />
                                     <div className='mt-2 text-blue-600'>Drop files or click here to upload</div>
+                                    <div className='mt-1 text-gray-500 text-xs'>Max size per file ~1.5MB (transport limit 2MB)</div>
                                 </div>
                                 {files && files.length > 0 && (
                                     <div className="wfp--dropzone__file-list mt-4">
@@ -288,7 +360,7 @@ const RFQModalForm = (props) => {
                                     }}
                                     type="button"
                                     onClick={() => {
-                                        console.log('[RFQ] Cancel clicked, closing modal');
+                                        // console.log('[RFQ] Cancel clicked, closing modal');
                                         setOpen(false);
                                     }}
                                 >
@@ -307,7 +379,7 @@ const RFQModalForm = (props) => {
                                     }}
                                     type="button"
                                     onPress={() => {
-                                        console.log('[RFQ] Submit pressed, calling formApi.submitForm()');
+                                        // console.log('[RFQ] Submit pressed, calling formApi.submitForm()');
                                         formApi.submitForm();
                                     }}
                                     disabled={createState?.loading}

package/src/components/RFQPage/quoteDetail.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
 import Image from '@magento/venia-ui/lib/components/Image';
-import { Link, useParams, useLocation } from 'react-router-dom';
+import { useParams, useLocation, useHistory } from 'react-router-dom';
 import Button from '@magento/venia-ui/lib/components/Button';
 import ChatContent from '../LiveChat/chatContent';
 import cn from 'classnames';
@@ -10,16 +10,52 @@ import { Send } from 'iconsax-react';
 import Price from '@magento/venia-ui/lib/components/Price';
 import { useRFQ } from '@riosst100/pwa-marketplace/src/talons/RFQ/useRFQ';
 import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { useToasts } from '@magento/peregrine/lib';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import {
+    useApolloClient
+} from '@apollo/client';
 
 const quoteDetail = () => {
+    const history = useHistory();
+
     const { formatMessage } = useIntl();
     const { urlKey } = useParams();
     const location = useLocation();
     const locationRfq = location && location.state && location.state.rfq ? location.state.rfq : null;
-    const { loadRfqDetail, rfqDetailState, handleSendRfqMessage, startDetailPolling, stopDetailPolling, handleConvertQuickrfqToCart } = useRFQ();
+    const { fetchCartId, addToCartResponseData, isAddProductLoading, errorAddingProductToCart, loadRfqDetail, rfqDetailState, handleSendRfqMessage, startDetailPolling, stopDetailPolling, handleConvertQuickrfqToCart } = useRFQ();
+
+    const apolloClient = useApolloClient();
+    const [{ createCart, removeCart }] = useCartContext();
+
+    useEffect(async() => {
+        if (
+            addToCartResponseData 
+            && !addToCartResponseData?.addProductsToCart?.user_errors.length 
+            && !isAddProductLoading 
+            && !errorAddingProductToCart
+        ) {
+            try {
+                await removeCart();
+                await apolloClient.clearCacheData(apolloClient, 'cart');
+
+                // masked_cart_id
+                await createCart({ fetchCartId });
+
+                history.push('/checkout');
+            } catch (cleanupErr) {
+                // eslint-disable-next-line no-console
+                console.log(cleanupErr);
+            }
+
+            
+        }
+    }, [history, fetchCartId, apolloClient, removeCart, createCart, addToCartResponseData, errorAddingProductToCart, isAddProductLoading]);
+
     const [messageText, setMessageText] = useState('');
     const [isSending, setIsSending] = useState(false);
     const [sendError, setSendError] = useState(null);
+    
     const detailData = rfqDetailState && rfqDetailState.data ? rfqDetailState.data.quickrfqDetail : null;
     const detailLoading = rfqDetailState ? rfqDetailState.loading : false;
     const detailError = rfqDetailState ? rfqDetailState.error : null;
@@ -27,10 +63,9 @@ const quoteDetail = () => {
         id: 'Quotes.pageTitleTextQuoteDetail',
         defaultMessage: 'Quote Detail'
     });
-
-    // prefer image from info_buy_request if available; otherwise use placeholder
-    const urlImage = 'https://pwa-tcgcollective.local:8255/media/catalog/product/s/-/s-l1600_6__1.jpg?auto=webp&format=pjpg&width=495&height=618.75&fit=cover';
-
+    
+    const placeholderImage = 'https://pwa-tcgcollective.local:8255/media/catalog/product/s/-/s-l1600_6__1.jpg?auto=webp&format=pjpg&width=495&height=618.75&fit=cover';
+    
     useEffect(() => {
         if (!locationRfq) {
             const fromParam = urlKey ? parseInt(urlKey, 10) : NaN;
@@ -311,8 +346,8 @@ const quoteDetail = () => {
                 <div className='relative flex w-full md_w-6/12 justify-center flex-col mb-10 md_mb-0'>
                     <Image
                         alt='product image'
-                        className="relative max-w-[300px]"
-                        src={urlImage}
+                        className="relative max-w-[200px]"
+                        src={rfq && rfq.image_url ? rfq.image_url : placeholderImage}
                         classes={{
                             root: ' relative self-center mb-5'
                         }}
@@ -334,32 +369,15 @@ const quoteDetail = () => {
                         classes={{
                             content: 'capitalize text-[16px] font-medium'
                         }}
-                        disabled={isConverting || !quickrfqIdValue || isNaN(quickrfqIdValue)}
+                        disabled={isConverting || !quickrfqIdValue || isNaN(quickrfqIdValue) || status === 'Done'}
                         aria-busy={isConverting}
-                        onPress={async () => {
-                            const qid = quickrfqIdValue;
-                            if (!qid || isNaN(qid)) return;
-                            try {
-                                setConvertError(null);
-                                setConvertSuccess(null);
-                                setIsConverting(true);
-                                const res = await handleConvertQuickrfqToCart(qid);
-                                const payload = res && res.data && res.data.convertQuickrfqToCart ? res.data.convertQuickrfqToCart : null;
-                                if (payload && payload.status) {
-                                    setConvertSuccess(payload.message || 'Converted to cart.');
-                                } else {
-                                    setConvertError('Failed to convert quote to cart.');
-                                }
-                            } catch (e) {
-                                setConvertError('Failed to convert quote to cart.');
-                            } finally {
-                                setIsConverting(false);
-                            }
-                        }}
+                        onClick={handleConvertQuickrfqToCart}
                     >
                         {isConverting
                             ? formatMessage({ id: 'Quotes.converting', defaultMessage: 'Add To Cart…' })
-                            : formatMessage({ id: 'Quotes.addToCart', defaultMessage: 'Add To Cart' })}
+                            : status === 'Done'
+                                ? formatMessage({ id: 'Quotes.completed', defaultMessage: 'Completed' })
+                                : formatMessage({ id: 'Quotes.addToCart', defaultMessage: 'Add To Cart' })}
                     </Button>
                     {convertError ? (
                         <div className='text-red-600 text-[12px] mt-2 text-center'>{convertError}</div>

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -41,12 +41,13 @@ import ProductLabel from '@riosst100/pwa-marketplace/src/components/ProductLabel
 import RFQ from '@riosst100/pwa-marketplace/src/components/RFQ';
 import LinkToOtherStores from '@riosst100/pwa-marketplace/src/components/LinkToOtherStores';
 import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Collapsible';
-import { useLocation } from 'react-router-dom';
 import Icon from '@magento/venia-ui/lib/components/Icon';
 import { ShoppingCart } from 'react-feather';
 import MessagesModal from '@riosst100/pwa-marketplace/src/components/LiveChat/MessagesModal';
 import SellerOperations from '@riosst100/pwa-marketplace/src/talons/Seller/seller.gql';
 
+import { useLocation, useHistory } from 'react-router-dom';
+
 import AgeVerificationModal from '@riosst100/pwa-marketplace/src/components/AgeVerification/ageVerificationModal';
 
 import { totalListings, lowestPrice } from '@riosst100/pwa-marketplace/src/components/CrossSeller/crossSellerBuy';
@@ -87,6 +88,8 @@ const ProductDetailsCollapsible = (props) => {
 const ProductFullDetail = props => {
     const { product } = props;
 
+    const history = useHistory();
+
     const { search } = useLocation();
 
     const params = new URLSearchParams(search);
@@ -174,7 +177,10 @@ const ProductFullDetail = props => {
             message: formatMessage({ id: 'messages.messageSent', defaultMessage: 'Message sent successfully.' }),
             timeout: 3000
         });
-        await refetchMessages({ fetchPolicy: 'network-only' });
+        if (result) {
+            var messageId = result?.data?.customerSendMessage.message_id;
+            history.push('/messages?id=' + messageId);
+        }
         return result?.data?.customerSendMessage;
     };
 

package/src/talons/MessagesPage/messagesPage.gql.js

@@ -223,6 +223,10 @@ export const GET_CUSTOMER_SELLER_MESSAGES = gql`
                     total_pages
                 }
                 items {
+                    seller {
+                        name
+                        url_key
+                    }
                     message_id
                     subject
                     description

package/src/talons/RFQ/rfq.gql.js

@@ -94,6 +94,7 @@ export const GET_QUICK_RFQ_DETAIL_QUERY = gql`
             date_need_quote
             email
             expiry
+            image_url
             info_buy_request
             messages {
                 created_at
@@ -166,7 +167,14 @@ export const CONVERT_QUICK_RFQ_TO_CART_MUTATION = gql`
     }
 `;
 
+export const CREATE_CART = gql`
+    mutation createCart {
+        cartId: createEmptyCart
+    }
+`;
+
 export default {
+    createCartMutation: CREATE_CART,
     convertQuickrfqToCartMutation: CONVERT_QUICK_RFQ_TO_CART_MUTATION,
     sendRfqMessageMutation: SEND_RFQ_MESSAGE_MUTATION,
     getQuickRfqDetailQuery: GET_QUICK_RFQ_DETAIL_QUERY,

package/src/talons/RFQ/useRFQ.js

@@ -4,14 +4,23 @@ import { useCallback } from 'react';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './rfq.gql';
 
+import { useLocation } from 'react-router-dom';
+
 export const useRFQ = props => {
+	const { pathname } = useLocation();
+	const rfqQuoteId = pathname.split('/')[2];
+
+	console.log('rfqQuoteId',rfqQuoteId)
+
 	const operations = mergeOperations(DEFAULT_OPERATIONS, props?.operations);
+
 	const {
 		getQuickRfqListQuery,
 		getQuickRfqDetailQuery,
 		createQuickRfqMutation,
 		sendRfqMessageMutation,
-		convertQuickrfqToCartMutation
+		convertQuickrfqToCartMutation,
+		createCartMutation
 	} = operations;
 
 	const [fetchRfqList, rfqListState] = useLazyQuery(getQuickRfqListQuery, {
@@ -28,7 +37,20 @@ export const useRFQ = props => {
 
 	const [createQuickRfq, createState] = useMutation(createQuickRfqMutation);
 	const [sendRfqMessage, sendMessageState] = useMutation(sendRfqMessageMutation);
-	const [convertQuickrfqToCart, convertState] = useMutation(convertQuickrfqToCartMutation);
+
+	const [fetchCartId] = useMutation(createCartMutation);
+	// const [convertQuickrfqToCart, convertState] = useMutation(convertQuickrfqToCartMutation);
+	
+	const convertState = null;
+
+	const [
+        convertQuickrfqToCart,
+        {
+            data: addToCartResponseData,
+            error: errorAddingProductToCart,
+            loading: isAddProductLoading
+        }
+    ] = useMutation(convertQuickrfqToCartMutation);
 
 	const loadRfqList = useCallback(
 		variables => fetchRfqList({ variables }),
@@ -57,12 +79,15 @@ export const useRFQ = props => {
 		[sendRfqMessage]
 	);
 
-	const handleConvertQuickrfqToCart = useCallback(
-		quickrfqId => convertQuickrfqToCart({ variables: { quickrfqId } }),
-		[convertQuickrfqToCart]
-	);
+	const handleConvertQuickrfqToCart = useCallback(() => {
+		convertQuickrfqToCart({ variables: { quickrfqId: rfqQuoteId } })
+	}, [convertQuickrfqToCart, rfqQuoteId]);
 
 	return {
+		fetchCartId,
+		addToCartResponseData, 
+		isAddProductLoading, 
+		errorAddingProductToCart,
 		loadRfqList,
 		rfqListState,
 		loadRfqDetail,

package/src/talons/Seller/useSeller.js

@@ -154,7 +154,10 @@ export const useSeller = props => {
             }),
             timeout: 3000
         });
-        history.push('/messages');
+        if (result) {
+            var messageId = result?.data?.customerSendMessage.message_id;
+            history.push('/messages?id=' + messageId);
+        }
         return result?.data?.customerSendMessage;
     }, [sendMessage, refetchMessages, addToast, formatMessage]);