@riosst100/pwa-marketplace 2.0.8 → 2.0.9

package/src/components/RFQPage/orderRow.js

@@ -1,318 +0,0 @@
-import React from 'react';
-import { arrayOf, number, shape, string } from 'prop-types';
-import { ChevronDown, ChevronUp } from 'react-feather';
-import { FormattedMessage, useIntl } from 'react-intl';
-import Price from '@magento/venia-ui/lib/components/Price';
-import { useOrderRow } from '@magento/peregrine/lib/talons/OrderHistoryPage/useOrderRow';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import CollapsedImageGallery from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/collapsedImageGallery';
-import OrderDetails from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails';
-import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css';
-import cn from 'classnames';
-import { Verify } from 'iconsax-react';
-import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholderImage';
-import { Link } from 'react-router-dom';
-
-const OrderRow = props => {
-    const { order } = props;
-    const { formatMessage } = useIntl();
-    const {
-        invoices,
-        items,
-        number: orderNumber,
-        order_date: orderDate,
-        shipments,
-        status,
-        total
-    } = order;
-    const { grand_total: grandTotal } = total;
-    const { currency, value: orderTotal } = grandTotal;
-
-    // Convert date to ISO-8601 format so Safari can also parse it
-    const isoFormattedDate = orderDate.replace(' ', 'T');
-    const formattedDate = new Date(isoFormattedDate).toLocaleDateString(
-        undefined,
-        {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric'
-        }
-    );
-
-    const hasInvoice = !!invoices.length;
-    const hasShipment = !!shipments.length;
-    let derivedStatus;
-    if (status === 'Complete') {
-        derivedStatus = formatMessage({
-            id: 'Quotes.deliveredText',
-            defaultMessage: 'Delivered'
-        });
-    } else if (hasShipment) {
-        derivedStatus = formatMessage({
-            id: 'Quotes.shippedText',
-            defaultMessage: 'Shipped'
-        });
-    } else if (hasInvoice) {
-        derivedStatus = formatMessage({
-            id: 'Quotes.readyToShipText',
-            defaultMessage: 'Ready to ship'
-        });
-    } else {
-        derivedStatus = formatMessage({
-            id: 'Quotes.new',
-            defaultMessage: 'New'
-        });
-    }
-
-    const talonProps = useOrderRow({ items });
-    const { loading, isOpen, imagesData } = talonProps;
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const contentClass = isOpen ? classes.content : classes.content_collapsed;
-
-    const contentToggleIconSrc = isOpen ? ChevronUp : ChevronDown;
-
-    const contentToggleIcon = <Icon src={contentToggleIconSrc} size={24} />;
-
-    const collapsedImageGalleryElement = isOpen ? null : (
-        <CollapsedImageGallery items={imagesData} />
-    );
-
-    const orderDetails = loading ? null : (
-        <OrderDetails orderData={order} imagesData={imagesData} />
-    );
-
-    const orderTotalPrice =
-        currency && orderTotal !== null ? (
-            <Price currencyCode={currency} value={orderTotal} />
-        ) : (
-            '-'
-        );
-
-    const badgeStatusStyle = () => {
-        return 'bg-[#F1EFF6] text-blue-700 text-[14px] font-medium rounded-full px-[30px] py-[5px] border-none';
-    }
-
-    const thumbnailProps = {
-        alt: items[0].product_name,
-        classes: { root: classes.thumbnail },
-        width: 50
-    };
-
-    return (
-        <li className={classes.root}>
-            <div className='flex flex-col md_flex-row justify-between mb-2.5'>
-                <div className='flex flex-col'>
-                    <div className="flex gap-x-[15px] flex-row">
-                        <span className="text-[14px] text-colorDefault">{formattedDate}</span>
-                        <span className="text-gray-200 text-[14px]">{orderNumber}</span>
-                    </div>
-                </div>
-                <div className='flex flex-col'>
-                    <div className='flex w-full justify-start mt-2.5 md_mt-0 md_justify-end'>
-                        <span className={cn(classes.orderStatusBadge, badgeStatusStyle())}>
-                            {derivedStatus}
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div className='flex flex-col md_flex-row justify-between mb-2.5'>
-                <div className='flex flex-col'>
-                    <div className='flex gap-x-[5px] mb-2.5'>
-                        <Verify size={17} className='text-blue-700' variant="Bold" />
-                        <span className='text-xs font-medium text-[rgba(25, 34, 42, 0.7)]'>
-                            Gundam Info
-                        </span>
-                    </div>
-                    <div className='flex flex-row'>
-                        <div>
-                            <PlaceholderImage {...thumbnailProps} />
-                        </div>
-                        <div className='flex flex-col max-w-[260px] gap-2.5'>
-                            <div className={cn(classes.productName, 'text-[14] font-medium')}>
-                                <span>
-                                    {items[0]?.product_name}
-                                </span>
-                            </div>
-                            <div className="text-[14] text-gray-200">
-                                <span>
-                                    {`${items[0]?.quantity_ordered}X`}
-                                </span>
-                                {' '}
-                                <span>
-                                    <Price currencyCode={items[0]?.product_sale_price?.currency} value={items[0]?.product_sale_price?.value} />
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className='flex flex-col'>
-                    <div className="md_px-10 py-3 md_border-l border-gray-100">
-                        <span className="text-[14] text-gray-200 text-left md_text-center block mb-2">
-                            <FormattedMessage
-                                id={'orderRow.orderTotalText'}
-                                defaultMessage={'Order Total'}
-                            />
-                        </span>
-                        <div className="text-lg font-medium text-left md_text-center block">{orderTotalPrice}</div>
-                    </div>
-                </div>
-            </div>
-            <div className='flex flex-row justify-end py-[5px]'>
-                <Link to="/quotes/DEV123123123">
-                    <span className="text-[13px] font-medium text-blue-700 underline">
-                        <FormattedMessage
-                            id={'orderRow.ViewTransactionDetail'}
-                            defaultMessage={'View Transaction Detail'}
-                        />
-                    </span>
-                </Link>
-            </div>
-
-            {/* <div className={classes.orderDateContainer}>
-                <span className={classes.orderDateLabel}>
-                    <FormattedMessage
-                        id={'orderRow.orderDateText'}
-                        defaultMessage={'Order Date'}
-                    />
-                </span>
-                <span className={classes.orderDate}>{formattedDate}</span>
-            </div> */}
-            {/* <div className={classes.orderItemsContainer}>
-                {collapsedImageGalleryElement}
-            </div> */}
-            {/* <div className={classes.orderStatusContainer}>
-                <span className={classes.orderStatusBadge}>
-                    {derivedStatus}
-                </span>
-                <OrderProgressBar status={derivedStatus} />
-            </div> */}
-            <div className={cn(contentClass, '!py-4 mt-4')}>{orderDetails}</div>
-        </li>
-    );
-};
-
-export default OrderRow;
-
-OrderRow.propTypes = {
-    classes: shape({
-        root: string,
-        cell: string,
-        stackedCell: string,
-        label: string,
-        value: string,
-        orderNumberContainer: string,
-        orderDateContainer: string,
-        orderTotalContainer: string,
-        orderStatusContainer: string,
-        orderItemsContainer: string,
-        contentToggleContainer: string,
-        orderNumberLabel: string,
-        orderDateLabel: string,
-        orderTotalLabel: string,
-        orderNumber: string,
-        orderDate: string,
-        orderTotal: string,
-        orderStatusBadge: string,
-        content: string,
-        content_collapsed: string
-    }),
-    order: shape({
-        billing_address: shape({
-            city: string,
-            country_code: string,
-            firstname: string,
-            lastname: string,
-            postcode: string,
-            region_id: string,
-            street: arrayOf(string)
-        }),
-        items: arrayOf(
-            shape({
-                id: string,
-                product_name: string,
-                product_sale_price: shape({
-                    currency: string,
-                    value: number
-                }),
-                product_sku: string,
-                selected_options: arrayOf(
-                    shape({
-                        label: string,
-                        value: string
-                    })
-                ),
-                quantity_ordered: number
-            })
-        ),
-        invoices: arrayOf(
-            shape({
-                id: string
-            })
-        ),
-        number: string,
-        order_date: string,
-        payment_methods: arrayOf(
-            shape({
-                type: string,
-                additional_data: arrayOf(
-                    shape({
-                        name: string,
-                        value: string
-                    })
-                )
-            })
-        ),
-        shipping_address: shape({
-            city: string,
-            country_code: string,
-            firstname: string,
-            lastname: string,
-            postcode: string,
-            region_id: string,
-            street: arrayOf(string),
-            telephone: string
-        }),
-        shipping_method: string,
-        shipments: arrayOf(
-            shape({
-                id: string,
-                tracking: arrayOf(
-                    shape({
-                        number: string
-                    })
-                )
-            })
-        ),
-        status: string,
-        total: shape({
-            discounts: arrayOf(
-                shape({
-                    amount: shape({
-                        currency: string,
-                        value: number
-                    })
-                })
-            ),
-            grand_total: shape({
-                currency: string,
-                value: number
-            }),
-            subtotal: shape({
-                currency: string,
-                value: number
-            }),
-            total_tax: shape({
-                currency: string,
-                value: number
-            }),
-            total_shipping: shape({
-                currency: string,
-                value: number
-            })
-        })
-    })
-};

package/src/components/RFQPage/quoteDetail.js

@@ -1,342 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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;