@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/components/RFQPage/quoteDetail.js

@@ -0,0 +1,342 @@
+import React 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 Button from '@magento/venia-ui/lib/components/Button';
+import ChatContent from '../LiveChat/chatContent';
+import cn from 'classnames';
+import { Send } from 'iconsax-react';
+
+const quoteDetail = () => {
+    const { formatMessage } = useIntl();
+    const PAGE_TITLE = formatMessage({
+        id: 'Quotes.pageTitleTextQuoteDetail',
+        defaultMessage: 'Quote Detail'
+    });
+
+    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"
+        },
+    ]
+
+    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
+            </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'>
+                    <div className='block p-2 -ml-2 -mr-2 bg-[#F1EFF6] rounded-md'>
+                        <p className='text-[13px] text-blue-700 flex justify-between'>
+                            <span className='font-medium block'>
+                                {
+                                    formatMessage({
+                                        id: 'Quotes.labelStatus',
+                                        defaultMessage: 'Quote Status'
+                                    })
+                                }
+                            </span>
+                            <span className='font-medium block text-blue-700'>
+                                Approve
+                            </span>
+                        </p>
+                    </div>
+                    <div className='block'>
+                        <p className='text-[13px] text-colorDefault flex justify-between'>
+                            <span className='font-medium block'>
+                                {
+                                    formatMessage({
+                                        id: 'Quotes.labelQty',
+                                        defaultMessage: 'Quantity'
+                                    })
+                                }
+                            </span>
+                            <span className='font-normal block'>
+                                4 Units
+                            </span>
+                        </p>
+                    </div>
+                    <div className='block'>
+                        <p className='text-[13px] text-colorDefault flex justify-between'>
+                            <span className='font-medium block'>
+                                {
+                                    formatMessage({
+                                        id: 'Quotes.adminSuggestedQty',
+                                        defaultMessage: 'Admin Suggested Quantity'
+                                    })
+                                }
+                            </span>
+                            <span className='font-normal block'>
+                                4 Units
+                            </span>
+                        </p>
+                    </div>
+                    <div className='block'>
+                        <p className='text-[13px] text-colorDefault flex justify-between'>
+                            <span className='font-medium block'>
+                                {
+                                    formatMessage({
+                                        id: 'Quotes.expectedPrice',
+                                        defaultMessage: 'Expected Price'
+                                    })
+                                }
+                            </span>
+                            <span className='font-normal block'>
+                                $50.00 Per Unit
+                            </span>
+                        </p>
+                    </div>
+                    <div className='block'>
+                        <p className='text-[13px] text-colorDefault flex justify-between'>
+                            <span className='font-medium block'>
+                                {
+                                    formatMessage({
+                                        id: 'Quotes.adminSuggestedPrice',
+                                        defaultMessage: 'Admin Suggested Price'
+                                    })
+                                }
+                            </span>
+                            <span className='font-normal block'>
+                                $55.00 Units
+                            </span>
+                        </p>
+                    </div>
+                    <div className='block'>
+                        <p className='text-[13px] text-colorDefault flex justify-between'>
+                            <span className='font-medium block'>
+                                {
+                                    formatMessage({
+                                        id: 'Quotes.expectedTotal',
+                                        defaultMessage: 'Expected Total'
+                                    })
+                                }
+                            </span>
+                            <span className='font-medium block'>
+                                $200.00 Units
+                            </span>
+                        </p>
+                    </div>
+                    <div className='block'>
+                        <p className='text-[13px] text-colorDefault flex justify-between'>
+                            <span className='font-medium block'>
+                                {
+                                    formatMessage({
+                                        id: 'Quotes.adminSuggestedTotal',
+                                        defaultMessage: 'Admin Suggested Total'
+                                    })
+                                }
+                            </span>
+                            <span className='font-normal block'>
+                                $220.00 Units
+                            </span>
+                        </p>
+                    </div>
+                    <div className='block'>
+                        <p className='text-[13px] text-colorDefault flex justify-between'>
+                            <span className='font-medium block'>
+                                {
+                                    formatMessage({
+                                        id: 'Quotes.adminAddedCouponCode',
+                                        defaultMessage: 'Admin Added Coupon Code'
+                                    })
+                                }
+                            </span>
+                            <span className='font-normal block'>
+                                H20
+                            </span>
+                        </p>
+                        <small className='text-[10px] text-gray-600'>
+                            {
+                                formatMessage({
+                                    id: 'Quotes.couponCodeNotes',
+                                    defaultMessage: 'You can apply coupon code when checkout order for this quote'
+                                })
+                            }
+                        </small>
+                    </div>
+                    <div className='block'>
+                        <p className='text-[13px] text-colorDefault flex justify-between'>
+                            <span className='font-medium block'>
+                                {
+                                    formatMessage({
+                                        id: 'Quotes.seller',
+                                        defaultMessage: 'Seller'
+                                    })
+                                }
+                            </span>
+                            <span className='font-normal block'>
+                                Gundam Info
+                            </span>
+                        </p>
+                    </div>
+                    <div className='block'>
+                        <p className='text-[13px] text-colorDefault flex justify-between'>
+                            <span className='font-medium block'>
+                                {
+                                    formatMessage({
+                                        id: 'Quotes.dateNeedQuote',
+                                        defaultMessage: 'Date Need Quote'
+                                    })
+                                }
+                            </span>
+                            <span className='font-normal block'>
+                                2024-08-22
+                            </span>
+                        </p>
+                    </div>
+                    <div className='block'>
+                        <p className='text-[13px] text-colorDefault flex justify-between'>
+                            <span className='font-medium block'>
+                                {
+                                    formatMessage({
+                                        id: 'Quotes.expiryDateForOrder',
+                                        defaultMessage: 'Expiry Date For Create Order'
+                                    })
+                                }
+                            </span>
+                            <span className='font-normal block'>
+                                2024-08-30
+                            </span>
+                        </p>
+                    </div>
+                </div>
+                <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}
+                        classes={{
+                            root: ' relative self-center mb-5'
+                        }}
+                    />
+
+                    <p className='text-[16px] font-medium text-colorDefault text-center'>
+                        $60.00
+                    </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
+                        </span>
+                    </Link>
+                    <Button
+                        priority='high'
+                        classes={{
+                            content: 'capitalize text-[16px] font-medium'
+                        }}
+                    >
+                        {
+                            formatMessage({
+                                id: 'Quotes.addToCart',
+                                defaultMessage: 'Add To Cart'
+                            })
+                        }
+                    </Button>
+                </div>
+            </div>
+            <div className=' flex flex-col mb-10'>
+                <div aria-live="polite" className="text-lg font-medium text-left mb-4">
+                    Messages
+                </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} />
+                    </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}
+                        />
+                        <Button
+                            priority='high'
+                            classes={{
+                                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"
+                            )}
+                        >
+                            <Send
+                                size="24"
+                                className='text-white'
+                            />
+                        </Button>
+                    </div>
+                </div>
+            </div>
+            <style jsx>
+                {`
+                    .chat-container::-webkit-scrollbar {
+                        width: 8px;
+                        border-radius: 5px;
+                    }
+                    
+                    .chat-container::-webkit-scrollbar-track {
+                        background: #f2f2f2;
+                        border-radius: 8px;
+                    }
+                    
+                    .chat-container::-webkit-scrollbar-thumb {
+                        background-color: #c3c3c3;
+                        border-radius: 20px;
+                        border: 2px solid #f2f2f2;
+                    }
+                `}
+            </style>
+        </div>
+    )
+}
+
+export default quoteDetail

package/src/components/RFQPage/quoteDetailPage.js

@@ -0,0 +1,14 @@
+import AccountLayout from '@riosst100/pwa-marketplace/src/components/AccountLayout';
+import QuoteDetail from '@riosst100/pwa-marketplace/src/components/RFQPage/quoteDetail';
+
+import React from 'react'
+
+const index = () => {
+    return (
+        <AccountLayout>
+            <QuoteDetail />
+        </AccountLayout>
+    )
+}
+
+export default index;

package/src/components/RFQPage/quoteList.js

@@ -0,0 +1,227 @@
+import React, { useMemo, useEffect } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import {
+    Search as SearchIcon,
+    AlertCircle as AlertCircleIcon,
+    ArrowRight as SubmitIcon
+} 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';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+
+import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.module.css';
+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';
+
+const errorIcon = (
+    <Icon
+        src={AlertCircleIcon}
+        attrs={{
+            width: 18
+        }}
+    />
+);
+const searchIcon = <Icon src={SearchIcon} size={24} />;
+
+const QuoteList = props => {
+    const talonProps = useOrderHistoryPage();
+    const {
+        errorMessage,
+        loadMoreOrders,
+        handleReset,
+        handleSubmit,
+        isBackgroundLoading,
+        isLoadingWithoutData,
+        orders,
+        pageInfo,
+        searchText
+    } = talonProps;
+    const [, { addToast }] = useToasts();
+    const { formatMessage } = useIntl();
+    const PAGE_TITLE = formatMessage({
+        id: 'Quotes.pageTitleText',
+        defaultMessage: 'Quotes'
+    });
+    const SEARCH_PLACE_HOLDER = formatMessage({
+        id: 'Quotes.search',
+        defaultMessage: 'Search by Quote Number'
+    });
+
+    const ordersCountMessage = formatMessage(
+        {
+            id: 'orderHistoryPage.ordersCount',
+            defaultMessage: 'You have {count} orders in your history.'
+        },
+        { count: orders.length }
+    );
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const orderRows = useMemo(() => {
+        return orders.map(order => {
+            return <OrderRow key={order.id} order={order} />;
+        });
+    }, [orders]);
+
+    const pageContents = useMemo(() => {
+        if (isLoadingWithoutData) {
+            return <LoadingIndicator />;
+        } else if (!isBackgroundLoading && searchText && !orders.length) {
+            return (
+                <h3 className={classes.emptyHistoryMessage}>
+                    <FormattedMessage
+                        id={'orderHistoryPage.invalidOrderNumber'}
+                        defaultMessage={`Order "${searchText}" was not found.`}
+                        values={{
+                            number: searchText
+                        }}
+                    />
+                </h3>
+            );
+        } else if (!isBackgroundLoading && !orders.length) {
+            return (
+                <h3 className={classes.emptyHistoryMessage}>
+                    <FormattedMessage
+                        id={'orderHistoryPage.emptyDataMessage'}
+                        defaultMessage={"You don't have any orders yet."}
+                    />
+                </h3>
+            );
+        } else {
+            return (
+                <ul
+                    className={classes.orderHistoryTable}
+                    data-cy="OrderHistoryPage-orderHistoryTable"
+                >
+                    {orderRows}
+                </ul>
+            );
+        }
+    }, [
+        classes.emptyHistoryMessage,
+        classes.orderHistoryTable,
+        isBackgroundLoading,
+        isLoadingWithoutData,
+        orderRows,
+        orders.length,
+        searchText
+    ]);
+
+    const resetButtonElement = searchText ? (
+        <ResetButton onReset={handleReset} />
+    ) : null;
+
+    const submitIcon = (
+        <SearchNormal size="18" color="#1b1b1b" className='mt-[4px]' />
+    );
+
+    const pageInfoLabel = pageInfo ? (
+        <FormattedMessage
+            defaultMessage={'Showing {current} of {total}'}
+            id={'orderHistoryPage.pageInfo'}
+            values={pageInfo}
+        />
+    ) : null;
+
+    const loadMoreButton = loadMoreOrders ? (
+        <Button
+            classes={{ root_lowPriority: classes.loadMoreButton }}
+            disabled={isBackgroundLoading || isLoadingWithoutData}
+            onClick={loadMoreOrders}
+            priority="low"
+        >
+            <FormattedMessage
+                id={'orderHistoryPage.loadMore'}
+                defaultMessage={'Load More'}
+            />
+        </Button>
+    ) : null;
+
+    useEffect(() => {
+        if (errorMessage) {
+            addToast({
+                type: 'error',
+                icon: errorIcon,
+                message: errorMessage,
+                dismissable: true,
+                timeout: 10000
+            });
+        }
+    }, [addToast, errorMessage]);
+
+    return (
+        <OrderHistoryContextProvider>
+            <div className="grid gap-y-md">
+                <StoreTitle>{PAGE_TITLE}</StoreTitle>
+                <div aria-live="polite" className="text-xl font-medium text-left">
+                    {PAGE_TITLE}
+                </div>
+                {/* <div>
+                    <div aria-live="polite" aria-label={ordersCountMessage} />
+                </div> */}
+
+                <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}
+                            classes={{
+                                input: 'focus-visible_outline-none border-none w-full'
+                            }}
+                        />
+                        {searchText ? (
+                            <>
+                                {resetButtonElement}
+                            </>
+                        ) : (
+                            <Button
+                                className="focus-visible_outline-none"
+                                disabled={
+                                    isBackgroundLoading || isLoadingWithoutData
+                                }
+                                priority={'high'}
+                                type="submit"
+                                aria-label="submit"
+                            >
+                                {submitIcon}
+                            </Button>
+                        )}
+                    </Form>
+                    <span className={classes.pageInfo}>{pageInfoLabel}</span>
+                </div>
+                {pageContents}
+                {loadMoreButton}
+            </div>
+        </OrderHistoryContextProvider >
+    );
+};
+
+export default QuoteList;
+
+QuoteList.propTypes = {
+    classes: shape({
+        root: string,
+        heading: string,
+        emptyHistoryMessage: string,
+        orderHistoryTable: string,
+        search: string,
+        searchButton: string,
+        submitIcon: string,
+        loadMoreButton: string
+    })
+};