@riosst100/pwa-marketplace 3.2.5 → 3.2.7

package/src/components/RFQPage/quoteDetail.js

@@ -1,79 +1,101 @@
-import React from 'react';
+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 } from 'react-router-dom';
+import { Link, useParams, useLocation } from 'react-router-dom';
 import Button from '@magento/venia-ui/lib/components/Button';
 import ChatContent from '../LiveChat/chatContent';
 import cn from 'classnames';
 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';
 
 const quoteDetail = () => {
     const { formatMessage } = useIntl();
+    const { id } = 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 [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;
     const PAGE_TITLE = formatMessage({
         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 dummyChat = [
-        {
-            "message": "May I help you",
-            "type": "seller",
-            "timeStamp": "03-06-2024 2:59 pm"
-        },
-        {
-            "message": "Yes",
-            "type": "buyer",
-            "timeStamp": "03-06-2024 2:59 pm"
-        },
-        {
-            "message": "can i get a discount",
-            "type": "buyer",
-            "timeStamp": "03-06-2024 2:59 pm"
-        },
-        {
-            "message": "you can redeem this code 'JunePlay'",
-            "type": "seller",
-            "timeStamp": "03-06-2024 2:59 pm"
-        },
-        {
-            "message": "or this code 'collectfest'",
-            "type": "seller",
-            "timeStamp": "03-06-2024 2:59 pm"
-        },
-        {
-            "message": "May I help you",
-            "type": "seller",
-            "timeStamp": "03-06-2024 2:59 pm"
-        },
-        {
-            "message": "Yes",
-            "type": "buyer",
-            "timeStamp": "03-06-2024 2:59 pm"
-        },
-        {
-            "message": "can i get a discount",
-            "type": "buyer",
-            "timeStamp": "03-06-2024 2:59 pm"
-        },
-        {
-            "message": "you can redeem this code 'JunePlay'",
-            "type": "seller",
-            "timeStamp": "03-06-2024 2:59 pm"
-        },
-        {
-            "message": "or this code 'collectfest'",
-            "type": "seller",
-            "timeStamp": "03-06-2024 2:59 pm"
-        },
-    ]
+
+    useEffect(() => {
+        if (!locationRfq) {
+            const parsedId = id ? parseInt(id, 10) : NaN;
+            if (!isNaN(parsedId)) {
+                const variables = { quickrfqId: parsedId };
+                loadRfqDetail(variables);
+            }
+        }
+    }, [id, locationRfq, loadRfqDetail]);
+
+    // start polling messages every 5s while on detail page; stop on unmount
+    useEffect(() => {
+        if (typeof startDetailPolling === 'function' && typeof stopDetailPolling === 'function') {
+            startDetailPolling(5000);
+            return () => stopDetailPolling();
+        }
+    }, [startDetailPolling, stopDetailPolling]);
+
+    const rfq = locationRfq || detailData || {};
+    const quickrfqIdValue = rfq && rfq.quickrfq_id ? (typeof rfq.quickrfq_id === 'number' ? rfq.quickrfq_id : parseInt(rfq.quickrfq_id, 10)) : (id ? parseInt(id, 10) : null);
+    const [isConverting, setIsConverting] = useState(false);
+    const [convertError, setConvertError] = useState(null);
+    const [convertSuccess, setConvertSuccess] = useState(null);
+    const status = rfq && rfq.status ? rfq.status : '-';
+    const quantity = rfq && rfq.quantity ? rfq.quantity : '-';
+    const pricePerProduct = rfq && rfq.price_per_product ? rfq.price_per_product : null;
+    const productName = rfq && rfq.product_name ? rfq.product_name : '-';
+    const currency = pricePerProduct && pricePerProduct.currency ? pricePerProduct.currency : (rfq && rfq.store_currency_code ? rfq.store_currency_code : '');
+    const unitValue = pricePerProduct && typeof pricePerProduct.value === 'number' ? pricePerProduct.value : null;
+    const qtyNumber = typeof quantity === 'number' ? quantity : (typeof quantity === 'string' ? parseFloat(quantity) : 0);
+    const expectedTotal = unitValue !== null && !isNaN(qtyNumber) ? unitValue * qtyNumber : null;
+    const contactName = rfq && rfq.contact_name ? rfq.contact_name : '-';
+    const email = rfq && rfq.email ? rfq.email : '-';
+    const phone = rfq && rfq.phone ? rfq.phone : '-';
+    const dateNeedQuote = rfq && rfq.date_need_quote ? rfq.date_need_quote : '-';
+
+    const isInitialLoading = detailLoading && !detailData;
+    if (isInitialLoading && !locationRfq) {
+        return <LoadingIndicator />;
+    }
+
+    if (detailError && !locationRfq) {
+        return (
+            <div className="p-4">
+                <div className="text-red-600 text-sm">
+                    {formatMessage({ id: 'Quotes.detailError', defaultMessage: 'Failed to load quote detail.' })}
+                </div>
+            </div>
+        );
+    }
+
+    // map backend messages to ChatContent shape using customer_id
+    const chatData = Array.isArray(rfq && rfq.messages)
+        ? rfq.messages.map(m => ({
+              message: m && m.message ? m.message : '',
+              type: m && m.customer_id === 0 ? 'seller' : 'buyer',
+              timeStamp: m && m.created_at ? m.created_at : ''
+          }))
+        : [];
 
     return (
         <div className='relative grid gap-y-md'>
             <StoreTitle>{PAGE_TITLE}</StoreTitle>
             <div aria-live="polite" className="text-xl font-medium text-left">
-                {PAGE_TITLE} - DEV123123123
+                {PAGE_TITLE} - #{id}
             </div>
             <div className='rounded-md border border-gray-100 px-4 py-6 flex flex-col-reverse md_flex-row justify-between gap-x-10'>
                 <div className='flex flex-col gap-y-4 w-full md_w-6/12'>
@@ -88,7 +110,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-medium block text-blue-700'>
-                                Approve
+                                {status}
                             </span>
                         </p>
                     </div>
@@ -103,7 +125,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                4 Units
+                                {quantity} Units
                             </span>
                         </p>
                     </div>
@@ -118,7 +140,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                4 Units
+                                -
                             </span>
                         </p>
                     </div>
@@ -133,7 +155,13 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                $50.00 Per Unit
+                                {unitValue !== null ? (
+                                    <>
+                                        <Price currencyCode={currency} value={unitValue} /> {' '} Per Unit
+                                    </>
+                                ) : (
+                                    '-'
+                                )}
                             </span>
                         </p>
                     </div>
@@ -148,7 +176,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                $55.00 Units
+                                -
                             </span>
                         </p>
                     </div>
@@ -163,7 +191,11 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-medium block'>
-                                $200.00 Units
+                                {expectedTotal !== null ? (
+                                    <Price currencyCode={currency} value={expectedTotal} />
+                                ) : (
+                                    '-'
+                                )} {' '} Units
                             </span>
                         </p>
                     </div>
@@ -178,7 +210,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                $220.00 Units
+                                -
                             </span>
                         </p>
                     </div>
@@ -193,7 +225,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                H20
+                                -
                             </span>
                         </p>
                         <small className='text-[10px] text-gray-600'>
@@ -216,7 +248,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                Gundam Info
+                                -
                             </span>
                         </p>
                     </div>
@@ -231,7 +263,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                2024-08-22
+                                {dateNeedQuote}
                             </span>
                         </p>
                     </div>
@@ -246,7 +278,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                2024-08-30
+                                -
                             </span>
                         </p>
                     </div>
@@ -260,29 +292,56 @@ const quoteDetail = () => {
                             root: ' relative self-center mb-5'
                         }}
                     />
-
                     <p className='text-[16px] font-medium text-colorDefault text-center'>
-                        $60.00
+                        {unitValue !== null ? (
+                            <Price currencyCode={currency} value={unitValue} />
+                        ) : (
+                            '-'
+                        )}
                     </p>
-
-                    <Link to="/pop-mart-star-wars-series-blind-box-confirmed-figures-designer-art-new-toys-gift.html" className="max-w-[360px] self-center mb-5">
-                        <span className=" text-[13px] block text-center font-medium text-colorDefault w-full">
-                            POP MART Star Wars Series Blind Box Confirmed Figures Designer Art New Toys Gift
+                    <div className="max-w-[360px] self-center mb-5 text-center">
+                        <span className=" text-[13px] block font-medium text-colorDefault w-full">
+                            {productName}
                         </span>
-                    </Link>
+                    </div>
                     <Button
                         priority='high'
                         classes={{
                             content: 'capitalize text-[16px] font-medium'
                         }}
+                        disabled={isConverting || !quickrfqIdValue || isNaN(quickrfqIdValue)}
+                        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);
+                            }
+                        }}
                     >
-                        {
-                            formatMessage({
-                                id: 'Quotes.addToCart',
-                                defaultMessage: 'Add To Cart'
-                            })
-                        }
+                        {isConverting
+                            ? formatMessage({ id: 'Quotes.converting', defaultMessage: 'Add To Cart…' })
+                            : formatMessage({ id: 'Quotes.addToCart', defaultMessage: 'Add To Cart' })}
                     </Button>
+                    {convertError ? (
+                        <div className='text-red-600 text-[12px] mt-2 text-center'>{convertError}</div>
+                    ) : null}
+                    {convertSuccess ? (
+                        <div className='text-green-600 text-[12px] mt-2 text-center'>{convertSuccess}</div>
+                    ) : null}
                 </div>
             </div>
             <div className=' flex flex-col mb-10'>
@@ -291,12 +350,14 @@ const quoteDetail = () => {
                 </div>
                 <div className='rounded-md border border-gray-100 p-4 pr-0 pt-0 flex flex-col gap-y-6'>
                     <div className='max-h-[600px] overflow-auto relative chat-container pr-4 pt-4'>
-                        <ChatContent chatData={dummyChat} />
+                        <ChatContent chatData={chatData} />
                     </div>
                     <div className='flex gap-2 pr-4'>
                         <textarea
                             className='w-full focus-visible_outline-none border border-gray-100 p-1 rounded-md'
                             cols={5}
+                            value={messageText}
+                            onChange={e => setMessageText(e.target.value)}
                         />
                         <Button
                             priority='high'
@@ -304,15 +365,41 @@ const quoteDetail = () => {
                                 content: "flex justify-center gap-x-2.5 items-center text-[14px] font-medium capitalize"
                             }}
                             className={cn(
-                                "bg-blue-600 px-6 py-2 rounded-full text-white border ",
-                                "border-blue-600 hover_bg-blue-700 hover_border-blue-700 focus-visible_outline-none"
+                                "px-6 py-2 rounded-full text-white border focus-visible_outline-none",
+                                isSending
+                                    ? "bg-gray-400 border-gray-400"
+                                    : "bg-blue-600 border-blue-600 hover_bg-blue-700 hover_border-blue-700"
                             )}
+                            disabled={isSending || !(messageText || '').trim()}
+                            aria-busy={isSending}
+                            onPress={async () => {
+                                const qid = quickrfqIdValue;
+                                const msg = (messageText || '').trim();
+                                if (!qid || isNaN(qid) || msg.length === 0) {
+                                    return;
+                                }
+                                try {
+                                    setSendError(null);
+                                    setIsSending(true);
+                                    await handleSendRfqMessage({ quickrfq_id: qid, message: msg });
+                                    setMessageText('');
+                                    await loadRfqDetail({ quickrfqId: qid });
+                                } catch (err) {
+                                    setSendError('Failed to send message.');
+                                } finally {
+                                    setIsSending(false);
+                                }
+                            }}
                         >
-                            <Send
-                                size="24"
-                                className='text-white'
-                            />
+                            {isSending ? (
+                                <span className='text-white text-[14px]'>Sending…</span>
+                            ) : (
+                                <Send size="24" className='text-white' />
+                            )}
                         </Button>
+                        {sendError ? (
+                            <span className='text-red-600 text-[12px] self-center'>{sendError}</span>
+                        ) : null}
                     </div>
                 </div>
             </div>

package/src/components/RFQPage/quoteList.js

@@ -1,17 +1,10 @@
-import React, { useMemo, useEffect } from 'react';
+import React, { useMemo, useEffect, useState, useCallback } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
-import {
-    Search as SearchIcon,
-    AlertCircle as AlertCircleIcon,
-    ArrowRight as SubmitIcon
-} from 'react-feather';
+import { AlertCircle as AlertCircleIcon } from 'react-feather';
 import { shape, string } from 'prop-types';
 import { Form } from 'informed';
 
 import { useToasts } from '@magento/peregrine/lib/Toasts';
-import OrderHistoryContextProvider from '@magento/peregrine/lib/talons/OrderHistoryPage/orderHistoryContext';
-import { useOrderHistoryPage } from '@magento/peregrine/lib/talons/OrderHistoryPage/useOrderHistoryPage';
-
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Button from '@magento/venia-ui/lib/components/Button';
 import Icon from '@magento/venia-ui/lib/components/Icon';
@@ -23,7 +16,7 @@ import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/l
 import OrderRow from './orderRow';
 import ResetButton from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/resetButton';
 import { SearchNormal } from 'iconsax-react';
-import cn from 'classnames';
+import { useRFQ } from '@riosst100/pwa-marketplace/src/talons/RFQ/useRFQ';
 
 const errorIcon = (
     <Icon
@@ -33,21 +26,13 @@ const errorIcon = (
         }}
     />
 );
-const searchIcon = <Icon src={SearchIcon} size={24} />;
+// no search icon needed
 
 const QuoteList = props => {
-    const talonProps = useOrderHistoryPage();
-    const {
-        errorMessage,
-        loadMoreOrders,
-        handleReset,
-        handleSubmit,
-        isBackgroundLoading,
-        isLoadingWithoutData,
-        orders,
-        pageInfo,
-        searchText
-    } = talonProps;
+    const { loadRfqList, rfqListState } = useRFQ();
+    const { data: rfqListData, loading: rfqLoading, error: rfqError } = rfqListState || {};
+    const [searchText, setSearchText] = useState('');
+    const [submittedSearch, setSubmittedSearch] = useState('');
     const [, { addToast }] = useToasts();
     const { formatMessage } = useIntl();
     const PAGE_TITLE = formatMessage({
@@ -59,43 +44,41 @@ const QuoteList = props => {
         defaultMessage: 'Search by Quote Number'
     });
 
-    const ordersCountMessage = formatMessage(
-        {
-            id: 'orderHistoryPage.ordersCount',
-            defaultMessage: 'You have {count} orders in your history.'
-        },
-        { count: orders.length }
-    );
+    // derive items
+    const rfqItems = rfqListData?.quickrfqList?.items || [];
+    const totalCount = rfqListData?.quickrfqList?.total_count || 0;
+    const pageInfo = rfqListData?.quickrfqList?.page_info || null;
 
     const classes = useStyle(defaultClasses, props.classes);
 
     const orderRows = useMemo(() => {
-        return orders.map(order => {
-            return <OrderRow key={order.id} order={order} />;
+        return rfqItems.map(item => {
+            const key = `${item.quickrfq_id}-${item.update_date || item.create_date}`;
+            return <OrderRow key={key} rfq={item} />;
         });
-    }, [orders]);
+    }, [rfqItems]);
 
     const pageContents = useMemo(() => {
-        if (isLoadingWithoutData) {
+        if (rfqLoading && !rfqItems.length) {
             return <LoadingIndicator />;
-        } else if (!isBackgroundLoading && searchText && !orders.length) {
+        } else if (!rfqLoading && submittedSearch && !rfqItems.length) {
             return (
                 <h3 className={classes.emptyHistoryMessage}>
                     <FormattedMessage
-                        id={'orderHistoryPage.invalidOrderNumber'}
-                        defaultMessage={`Order "${searchText}" was not found.`}
+                        id={'quotesPage.invalidQuoteNumber'}
+                        defaultMessage={`Quote "${submittedSearch}" was not found.`}
                         values={{
-                            number: searchText
+                            number: submittedSearch
                         }}
                     />
                 </h3>
             );
-        } else if (!isBackgroundLoading && !orders.length) {
+        } else if (!rfqLoading && !rfqItems.length) {
             return (
                 <h3 className={classes.emptyHistoryMessage}>
                     <FormattedMessage
-                        id={'orderHistoryPage.emptyDataMessage'}
-                        defaultMessage={"You don't have any orders yet."}
+                        id={'quotesPage.emptyDataMessage'}
+                        defaultMessage={"You don't have any quotes yet."}
                     />
                 </h3>
             );
@@ -112,13 +95,24 @@ const QuoteList = props => {
     }, [
         classes.emptyHistoryMessage,
         classes.orderHistoryTable,
-        isBackgroundLoading,
-        isLoadingWithoutData,
+        rfqLoading,
         orderRows,
-        orders.length,
-        searchText
+        rfqItems.length,
+        submittedSearch
     ]);
 
+    const handleReset = useCallback(() => {
+        setSearchText('');
+        setSubmittedSearch('');
+        loadRfqList({
+            variables: {
+                currentPage: 1,
+                pageSize: 20,
+                filters: {}
+            }
+        });
+    }, [loadRfqList]);
+
     const resetButtonElement = searchText ? (
         <ResetButton onReset={handleReset} />
     ) : null;
@@ -128,18 +122,36 @@ const QuoteList = props => {
     );
 
     const pageInfoLabel = pageInfo ? (
-        <FormattedMessage
-            defaultMessage={'Showing {current} of {total}'}
-            id={'orderHistoryPage.pageInfo'}
-            values={pageInfo}
-        />
+        (() => {
+            const currentPage = pageInfo.current_page || 1;
+            const pageSize = pageInfo.page_size || 20;
+            const total = totalCount || 0;
+            const current = Math.min(currentPage * pageSize, total);
+            return (
+                <FormattedMessage
+                    defaultMessage={'Showing {current} of {total}'}
+                    id={'rfqList.pageInfo'}
+                    values={{ current, total }}
+                />
+            );
+        })()
     ) : null;
 
-    const loadMoreButton = loadMoreOrders ? (
+    const loadMoreButton = pageInfo && pageInfo.current_page < Math.ceil((totalCount || 0) / (pageInfo.page_size || 20)) ? (
         <Button
             classes={{ root_lowPriority: classes.loadMoreButton }}
-            disabled={isBackgroundLoading || isLoadingWithoutData}
-            onClick={loadMoreOrders}
+            disabled={rfqLoading}
+            onClick={() =>
+                loadRfqList({
+                    variables: {
+                        currentPage: (pageInfo.current_page || 1) + 1,
+                        pageSize: pageInfo.page_size || 20,
+                        filters: submittedSearch
+                            ? { quickrfq_id: { eq: submittedSearch } }
+                            : {}
+                    }
+                })
+            }
             priority="low"
         >
             <FormattedMessage
@@ -150,20 +162,34 @@ const QuoteList = props => {
     ) : null;
 
     useEffect(() => {
-        if (errorMessage) {
+        // initial load
+        loadRfqList({
+            variables: { currentPage: 1, pageSize: 20, filters: {} }
+        });
+    }, [loadRfqList]);
+
+    useEffect(() => {
+        if (rfqError?.message) {
             addToast({
                 type: 'error',
                 icon: errorIcon,
-                message: errorMessage,
+                message: rfqError.message,
                 dismissable: true,
                 timeout: 10000
             });
         }
-    }, [addToast, errorMessage]);
+    }, [addToast, rfqError]);
+
+    const handleSubmit = useCallback(({ values }) => {
+        const search = values?.search?.trim() || '';
+        setSearchText(search);
+        setSubmittedSearch(search);
+        const filters = search ? { quickrfq_id: { eq: search } } : {};
+        loadRfqList({ variables: { currentPage: 1, pageSize: 20, filters } });
+    }, [loadRfqList]);
 
     return (
-        <OrderHistoryContextProvider>
-            <div className="grid gap-y-md">
+        <div className="grid gap-y-md">
                 <StoreTitle>{PAGE_TITLE}</StoreTitle>
                 <div aria-live="polite" className="text-xl font-medium text-left">
                     {PAGE_TITLE}
@@ -175,8 +201,6 @@ const QuoteList = props => {
                 <div className={classes.filterRow}>
                     <Form className="flex gap-x-1 border border-gray-100 rounded-full px-[15px] w-[calc(100%-120px)] max-w-[450px]" onSubmit={handleSubmit}>
                         <TextInput
-                            // after={resetButtonElement}
-                            // before={searchIcon}
                             field="search"
                             id={classes.search}
                             placeholder={SEARCH_PLACE_HOLDER}
@@ -191,12 +215,11 @@ const QuoteList = props => {
                         ) : (
                             <Button
                                 className="focus-visible_outline-none"
-                                disabled={
-                                    isBackgroundLoading || isLoadingWithoutData
-                                }
+                                disabled={rfqLoading}
                                 priority={'high'}
-                                type="submit"
+                                type="button"
                                 aria-label="submit"
+                                onPress={(_evt, formApi) => formApi.submitForm()}
                             >
                                 {submitIcon}
                             </Button>
@@ -207,7 +230,6 @@ const QuoteList = props => {
                 {pageContents}
                 {loadMoreButton}
             </div>
-        </OrderHistoryContextProvider >
     );
 };