@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/components/RMAPage/RMAList.js

@@ -0,0 +1,241 @@
+import React, { useMemo, useEffect } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+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';
+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';
+import { useHistory } from "react-router-dom";
+
+const errorIcon = (
+    <Icon
+        src={AlertCircleIcon}
+        attrs={{
+            width: 18
+        }}
+    />
+);
+
+const RMAList = 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: 'RMA.pageTitleText',
+        defaultMessage: 'Quotes'
+    });
+    const SEARCH_PLACE_HOLDER = formatMessage({
+        id: 'RMA.search',
+        defaultMessage: 'Search by Order Number'
+    });
+
+    const history = useHistory();
+
+    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;
+
+    const gotoSelectRMA = () => {
+        history.push('/return/select')
+    }
+
+    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 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
+                            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>
+                <div className='flex justify-end w-full'>
+                    <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-md text-white border ",
+                            "border-blue-600 hover_bg-blue-700 hover_border-blue-700 focus-visible_outline-none"
+                        )}
+                        onClick={gotoSelectRMA}
+                    >
+                        <span className='flex gap-x-3 justify-center'>
+                            {
+                                formatMessage({
+                                    id: 'RMA.newReturn',
+                                    defaultMessage: 'New Return'
+                                })
+                            }
+                        </span>
+                    </Button>
+                </div>
+                {pageContents}
+                {loadMoreButton}
+            </div>
+        </OrderHistoryContextProvider >
+    );
+};
+
+export default RMAList;
+
+RMAList.propTypes = {
+    classes: shape({
+        root: string,
+        heading: string,
+        emptyHistoryMessage: string,
+        orderHistoryTable: string,
+        search: string,
+        searchButton: string,
+        submitIcon: string,
+        loadMoreButton: string
+    })
+};

package/src/components/RMAPage/RMASelect.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import RMAList from './components/rmaList';
+
+const RMASelect = () => {
+    const { formatMessage } = useIntl();
+    const PAGE_TITLE = formatMessage({
+        id: 'Quotes.pageTitleTextSelectOrder',
+        defaultMessage: 'Select Order'
+    });
+
+    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}
+            </div>
+
+            <div class="block block-order-details-view">
+                <div aria-live="polite" className="text-lg font-medium text-left mb-4 block-title">
+                    {
+                        formatMessage({
+                            id: 'rma.selectOrderToReturn',
+                            defaultMessage: 'Select an order to return'
+                        })
+                    }
+                </div>
+
+                <RMAList />
+            </div>
+        </div>
+    )
+}
+
+export default RMASelect;

package/src/components/RMAPage/RMASelectPage.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import AccountLayout from '@riosst100/pwa-marketplace/src/components/AccountLayout';
+import RMASelect from './RMASelect';
+
+const RMASelectPage = () => {
+    return (
+        <AccountLayout>
+            <RMASelect />
+        </AccountLayout>
+    )
+}
+
+export default RMASelectPage;

package/src/components/RMAPage/components/productItem.js

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import Image from '@magento/venia-ui/lib/components/Image';
+import { Link } from 'react-router-dom';
+import Select from '@riosst100/pwa-marketplace/src/components/commons/Select';
+import TextField from '@riosst100/pwa-marketplace/src/components/commons/Textfield';
+import Checkbox from '@riosst100/pwa-marketplace/src/components/commons/Checkbox';
+
+const productItem = (props) => {
+    const { withCheckbox = false } = props
+    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 reasonOptions = [
+        {
+            value: 0,
+            label: 'Out of Service'
+        }
+    ]
+
+    const [show, setShow] = useState(false);
+
+    const handleChange = (e) => {
+        const checked = e.target.checked;
+        setShow(checked)
+    }
+
+    return (
+        <>
+            <div className='item flex flex-col lg_flex-row justify-between border border-gray-100 rounded-md p-4'>
+                <div className='flex gap-4 w-full lg_w-3/5'>
+                    {withCheckbox ? (
+                        <Checkbox onChange={(e) => handleChange(e)} />
+                    ) : null}
+
+                    <div className='flex w-full gap-4'>
+                        <div className='block'>
+                            <Image
+                                alt='product image'
+                                className="relative max-w-[120px]"
+                                src={urlImage}
+                                classes={{
+                                    root: ' relative self-center mb-5'
+                                }}
+                            />
+                        </div>
+                        <div className='flex flex-col gap-y-1 w-full md_w-6/12'>
+                            <div className='block'>
+                                <p className='text-[13px] text-colorDefault flex justify-between'>
+                                    <span className='font-medium block'>
+                                        BANPRESTO DEMON SLAYER: KIMETSU NO YAIBA: GIYU TOMIOKA - FIGURE
+                                    </span>
+                                </p>
+                            </div>
+                            <div className='block'>
+                                <p className='text-[13px] text-gray-200 flex justify-between'>
+                                    <span className='font-normal block'>
+                                        Qty : 3
+                                    </span>
+                                </p>
+                            </div>
+                            <div className='block'>
+                                <p className='text-[13px] text-gray-200 flex justify-between'>
+                                    <span className='font-normal block'>
+                                        SGD 16
+                                    </span>
+                                </p>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div className='block w-full lg_w-2/5'>
+                    {show ? (
+                        <>
+                            <div className='flex flex-col mb-2.5'>
+                                <p className='mb-1'>
+                                    Qty Return
+                                </p>
+                                <TextField />
+                            </div>
+                            <div className='flex flex-col mb-2.5'>
+                                <p className='mb-1'>
+                                    Return Reason
+                                </p>
+                                <Select
+                                    options={reasonOptions}
+                                    className='w-full'
+                                />
+                            </div>
+                            <div className='flex flex-col mb-2.5'>
+                                <p className='mb-1'>
+                                    Item Condition
+                                </p>
+                                <Select
+                                    options={reasonOptions}
+                                    className='w-full'
+                                />
+                            </div>
+                            <div className='flex flex-col mb-2.5'>
+                                <p className='mb-1'>
+                                    Resolution
+                                </p>
+                                <Select
+                                    options={reasonOptions}
+                                    className='w-full'
+                                />
+                            </div>
+                        </>
+                    ) : null}
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default productItem

package/src/components/RMAPage/components/rmaList.js

@@ -0,0 +1,250 @@
+import React from 'react'
+import { useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+const rmaList = () => {
+    const { formatMessage } = useIntl();
+
+    return (
+        <>
+            <div className='rounded-md border border-gray-100'>
+                <div class="hidden md_block table-wrapper order-items w-full">
+                    <table class="data table table-order-items w-full" id="my-orders-table" summary="Items Ordered">
+                        <thead>
+                            <tr className='bg-gray-150'>
+                                <th class="col text-left py-3 px-2.5 rounded-tl-md">Order</th>
+                                <th class="col text-left py-3 px-2.5">Date</th>
+                                <th class="col text-left py-3 px-2.5">Ship To</th>
+                                <th class="col text-left py-3 px-2.5">Total</th>
+                                <th class="col text-left py-3 px-2.5">Status</th>
+                                <th class="col text-left py-3 px-2.5 rounded-tr-md">Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr id="order-item-row-1" className='item'>
+                                <td class="col rma text-left align-top py-3 px-2.5" data-th="Product Name">
+                                    <span className='font-semibold'>
+                                        3000000011
+                                    </span>
+                                </td>
+                                <td class="col date align-top py-3 px-2.5" data-th="SKU">
+                                    <span className='font-normal'>
+                                        Jun 29, 2024
+                                    </span>
+                                </td>
+                                <td class="col date align-top py-3 px-2.5" data-th="SKU">
+                                    <span className='font-normal'>
+                                        John Doe
+                                    </span>
+                                </td>
+                                <td class="col order text-left align-top py-3 px-2.5" data-th="Price">
+                                    <span className='font-normal'>
+                                        SGD 34.69
+                                    </span>
+                                </td>
+                                <td class="col qty text-left align-top py-3 px-2.5" data-th="Qty">
+                                    <p className='p-1 bg-[#F1EFF6] rounded-md flex items-center px-5 w-fit'>
+                                        <span className='font-medium block text-blue-700'>
+                                            Pending Approval
+                                        </span>
+                                    </p>
+                                </td>
+                                <td class="col subtotal text-left align-top py-3 px-2.5" data-th="Subtotal">
+                                    <Link to={'/return/view/123123'} className="underline">
+                                        View Return
+                                    </Link>
+                                </td>
+                            </tr>
+                            <tr class="seller-order-info border-b border-gray-150 last-of-type_border-0">
+                                <td data-th="Order #" class="col id">&nbsp;</td>
+                                <td data-th="Date" class="col date">&nbsp;</td>
+                                <td data-th="Ship To" class="col shipping">&nbsp;</td>
+                                <td data-th="Seller: " class="col total">&nbsp;</td>
+                                <td class="col status text-left align-top py-3 px-2.5">
+                                    <span className='font-semibold mr-1'>Seller </span>
+                                    <Link to="/seller/test-store" target="_BLANK" title="View The Seller" className="underline">
+                                        Test Store
+                                    </Link>
+                                </td>
+                                <td data-th="Actions" class="col actions text-left align-top py-3 px-2.5">
+                                    <Link to="/return/create/123123" class="action return underline">
+                                        <span>Return to Seller</span>
+                                    </Link>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                {/* <div class="block">
+                    <div class="block-title">
+                        <strong>Select an order to return</strong>
+                    </div>
+                    <div class="block-content">
+                        <div class="order-filter-form-wrappger">
+                            <form action="https://seller-dev.tcgcollective.co/returns/rma/sellect/" id="form-search-order" method="GET">
+                                <table class="data table table-order-finder-items" id="my-orders-finder-table">
+                                    <thead>
+                                        <tr>
+                                            <th scope="col" class="col order-id">Order ID</th>
+                                            <th scope="col" class="col product-name">Product Name</th>
+                                            <th scope="col" class="col order-date">Order Date</th>
+                                            <th scope="col" class="col sort-by">Sort</th>
+                                            <th scope="col" class="col actions">&nbsp;</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td data-th="Order ID" class="col order-id">
+                                                <input type="text" class="input-text" name="id" placeholder="Search by Order ID" value="" />
+                                            </td>
+                                            <td data-th="Product Name" class="col product-name">
+                                                <input type="text" class="input-text" name="product" placeholder="Search by Product Name" value="" />
+                                            </td>
+                                            <td data-th="Order Date" class="col order-date">
+                                                <input type="text" class="input-text hasDatepicker filterHasDatePicker _has-datepicker" id="filter-order-date-from" name="date_from" placeholder="From Date" value="" autocomplete="on" />
+                                                <input type="text" class="input-text hasDatepicker filterHasDatePicker _has-datepicker" id="filter-order-date-to" name="date_to" placeholder="To Date" value="" autocomplete="on" />
+                                            </td>
+                                            <td data-th="Sort" class="col sort">
+                                                <select name="sort" class="input-select">
+                                                    <option value="">Default</option>
+                                                    <option value="entity_id:ASC">ID ASC</option>
+                                                    <option value="entity_id:DESC">ID DESC</option>
+                                                    <option value="created_at:ASC">Order Date ASC</option>
+                                                    <option value="created_at:DESC">Order Date DESC</option>
+                                                    <option value="grand_total:ASC">Order Total ASC</option>
+                                                    <option value="grand_total:DESC">Order Total DESC</option>
+                                                </select>
+                                            </td>
+                                            <td data-th="Actions" class="col actions">
+                                                <input type="submit" class="action save primary" name="submit" value="Submit" />
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </form>
+                        </div>
+                        <div class="table-wrapper orders-history">
+                            <table class="data table table-order-items history w-full" id="my-orders-table">
+                                <thead>
+                                    <tr>
+                                        <th scope="col" class="col id">Order #</th>
+                                        <th scope="col" class="col date">Date</th>
+                                        <th scope="col" class="col shipping">Ship To</th>
+                                        <th scope="col" class="col total">Order Total</th>
+                                        <th scope="col" class="col status">Status</th>
+                                        <th scope="col" class="col actions">Action</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td data-th="Order #" class="col id">#000000029</td>
+                                        <td data-th="Date" class="col date">7/22/24</td>
+                                        <td data-th="Ship To" class="col shipping">danis alifian 16</td>
+                                        <td data-th="Order Total" class="col total"><span class="price">$34.69</span></td>
+                                        <td data-th="Status" class="col status">Complete</td>
+                                        <td data-th="Actions" class="col actions">
+                                            <a href="https://seller-dev.tcgcollective.co/sales/order/view/order_id/41/" class="action view">
+                                                <span>View Order</span>
+                                            </a>
+                                        </td>
+                                    </tr>
+                                    <tr class="seller-order-info">
+                                        <td data-th="Order #" class="col id">&nbsp;</td>
+                                        <td data-th="Date" class="col date">&nbsp;</td>
+                                        <td data-th="Ship To" class="col shipping">&nbsp;</td>
+                                        <td data-th="Seller: " class="col total"><strong><i>Seller: </i></strong></td>
+                                        <td class="col status"><a href="https://dev.tcgcollective.co/seller/test-store" target="_BLANK" title="View The Seller">Test Store</a></td>
+                                        <td data-th="Actions" class="col actions">
+                                            <a href="https://seller-dev.tcgcollective.co/returns/rma/new/order_id/41/seller_id/6/" class="action return">
+                                                <span>Return to Seller</span>
+                                            </a>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td data-th="Order #" class="col id">#3000000011</td>
+                                        <td data-th="Date" class="col date">5/25/24</td>
+                                        <td data-th="Ship To" class="col shipping">danis alifian 16</td>
+                                        <td data-th="Order Total" class="col total"><span class="price">SGD&nbsp;20.76</span></td>
+                                        <td data-th="Status" class="col status">Complete</td>
+                                        <td data-th="Actions" class="col actions">
+                                            <a href="https://seller-dev.tcgcollective.co/sales/order/view/order_id/40/" class="action view">
+                                                <span>View Order</span>
+                                            </a>
+                                        </td>
+                                    </tr>
+                                    <tr class="seller-order-info">
+                                        <td data-th="Order #" class="col id">&nbsp;</td>
+                                        <td data-th="Date" class="col date">&nbsp;</td>
+                                        <td data-th="Ship To" class="col shipping">&nbsp;</td>
+                                        <td data-th="Seller: " class="col total"><strong><i>Seller: </i></strong></td>
+                                        <td class="col status"><a href="https://dev.tcgcollective.co/seller/test-store" target="_BLANK" title="View The Seller">Test Store</a></td>
+                                        <td data-th="Actions" class="col actions">
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div> */}
+
+                <div className='md_hidden'>
+                    <div class="orderDetails-orderTotalContainer-6or m-0 max-w-none min-w-none lg_m-auto lg_max-w-[25rem] lg_min-w-[22rem]">
+                        <div className='item flex flex-col gap-2 p-4 odd_border border-gray-150 last-of-type_border-0'>
+                            <div className='flex gap-3'>
+                                <div className='min-w-[60px] text-[14px] font-semibold'>
+                                    RMA
+                                </div>
+                                <div className='min-w-[60px] text-[14px]'>
+                                    3000000011-2
+                                </div>
+                            </div>
+                            <div className='flex gap-3'>
+                                <div className='min-w-[60px] text-[14px] font-semibold'>
+                                    Date
+                                </div>
+                                <div className='min-w-[60px] text-[14px]'>
+                                    Jun 29, 2024
+                                </div>
+                            </div>
+                            <div className='flex gap-3'>
+                                <div className='min-w-[60px] text-[14px] font-semibold'>
+                                    Order
+                                </div>
+                                <div className='min-w-[60px] text-[14px]'>
+                                    <Link to={'/order/123123'} className="underline">
+                                        3000000011
+                                    </Link>
+                                </div>
+                            </div>
+                            <div className='flex gap-3'>
+                                <div className='min-w-[60px] text-[14px] font-semibold self-center'>
+                                    Status
+                                </div>
+                                <div className='min-w-[60px] text-[14px]'>
+                                    <p className='p-1 bg-[#F1EFF6] rounded-md flex items-center px-5 w-fit'>
+                                        <span className='font-medium block text-blue-700'>
+                                            Pending Approval
+                                        </span>
+                                    </p>
+                                </div>
+                            </div>
+                            <div className='flex gap-3'>
+                                <div className='min-w-[60px] text-[14px] font-semibold self-center'>
+                                    Action
+                                </div>
+                                <div className='min-w-[60px] text-[14px]'>
+                                    <Link to={'/order/123123'} className="underline">
+                                        View Return
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default rmaList