@riosst100/pwa-marketplace 2.9.5 → 2.9.7

package/src/components/RMAPage/RMAList.js

@@ -7,8 +7,8 @@ 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 OrderHistoryContextProvider from '@magento/peregrine/lib/talons/OrderHistoryPage/orderHistoryContext';
+import { useRmaPage } from '@riosst100/pwa-marketplace/src/talons/RMAPage/useRmaPage';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Button from '@magento/venia-ui/lib/components/Button';
@@ -16,9 +16,9 @@ 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 Pagination from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination';
 import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.module.css';
-import OrderRow from './orderRow';
+import RmaRow 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';
@@ -34,17 +34,21 @@ const errorIcon = (
 );
 
 const RMAList = props => {
-    const talonProps = useOrderHistoryPage();
+    const talonProps = useRmaPage();
     const {
         errorMessage,
-        loadMoreOrders,
+        loadMoreRmas,
         handleReset,
         handleSubmit,
         isBackgroundLoading,
         isLoadingWithoutData,
-        orders,
+        rmas,
         pageInfo,
-        searchText
+        searchText,
+        pageControl,
+        rmaDetailData,
+        rmaDetailLoading,
+        rmaDetailError
     } = talonProps;
     const [, { addToast }] = useToasts();
     const { formatMessage } = useIntl();
@@ -61,33 +65,33 @@ const RMAList = props => {
 
     const classes = useStyle(defaultClasses, props.classes);
 
-    const orderRows = useMemo(() => {
-        return orders.map(order => {
-            return <OrderRow key={order.id} order={order} />;
+    const rmaRows = useMemo(() => {
+        return rmas.map(rma => {
+            return <RmaRow key={rma.rma_id} rma={rma} />;
         });
-    }, [orders]);
+    }, [rmas]);
 
     const pageContents = useMemo(() => {
         if (isLoadingWithoutData) {
             return <LoadingIndicator />;
-        } else if (!isBackgroundLoading && searchText && !orders.length) {
+        } else if (!isBackgroundLoading && searchText && !rmas.length) {
             return (
                 <h3 className={classes.emptyHistoryMessage}>
                     <FormattedMessage
-                        id={'orderHistoryPage.invalidOrderNumber'}
-                        defaultMessage={`Order "${searchText}" was not found.`}
+                        id={'rmaPage.invalidOrderNumber'}
+                        defaultMessage={`RMA for Order "${searchText}" was not found.`}
                         values={{
                             number: searchText
                         }}
                     />
                 </h3>
             );
-        } else if (!isBackgroundLoading && !orders.length) {
+        } else if (!isBackgroundLoading && !rmas.length) {
             return (
                 <h3 className={classes.emptyHistoryMessage}>
                     <FormattedMessage
-                        id={'orderHistoryPage.emptyDataMessage'}
-                        defaultMessage={"You don't have any orders yet."}
+                        id={'rmaPage.emptyDataMessage'}
+                        defaultMessage={"You don't have any RMA requests yet."}
                     />
                 </h3>
             );
@@ -95,9 +99,9 @@ const RMAList = props => {
             return (
                 <ul
                     className={classes.orderHistoryTable}
-                    data-cy="OrderHistoryPage-orderHistoryTable"
+                    data-cy="RMAPage-rmaTable"
                 >
-                    {orderRows}
+                    {rmaRows}
                 </ul>
             );
         }
@@ -106,8 +110,8 @@ const RMAList = props => {
         classes.orderHistoryTable,
         isBackgroundLoading,
         isLoadingWithoutData,
-        orderRows,
-        orders.length,
+        rmaRows,
+        rmas.length,
         searchText
     ]);
 
@@ -127,24 +131,20 @@ const RMAList = props => {
         />
     ) : null;
 
-    const loadMoreButton = loadMoreOrders ? (
+    const loadMoreButton = loadMoreRmas ? (
         <Button
             classes={{ root_lowPriority: classes.loadMoreButton }}
             disabled={isBackgroundLoading || isLoadingWithoutData}
-            onClick={loadMoreOrders}
+            onClick={loadMoreRmas}
             priority="low"
         >
             <FormattedMessage
-                id={'orderHistoryPage.loadMore'}
+                id={'rmaPage.loadMore'}
                 defaultMessage={'Load More'}
             />
         </Button>
     ) : null;
 
-    const gotoSelectRMA = () => {
-        history.push('/return/select')
-    }
-
     useEffect(() => {
         if (errorMessage) {
             addToast({
@@ -158,8 +158,7 @@ const RMAList = props => {
     }, [addToast, errorMessage]);
 
     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}
@@ -196,34 +195,16 @@ const RMAList = props => {
                     </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}
+                <div className="mt-4">
+                    {pageControl?.totalPages > 1 ? (
+                        <Pagination pageControl={pageControl} />
+                    ) : null}
+                </div>
                 {loadMoreButton}
-            </div>
-        </OrderHistoryContextProvider >
-    );
-};
+			</div>
+		);
+}
 
 export default RMAList;
 

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

@@ -1,39 +1,68 @@
-import React, { useState } from 'react';
+import React 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 productItem = (props) => {
+    const {
+        withCheckbox = false,
+        item,
+        order,
+        rmaConfigData,
+        itemState = {},
+        onItemChange,
+        onItemCheck
+    } = props;
 
-    const handleChange = (e) => {
-        const checked = e.target.checked;
-        setShow(checked)
+    let urlImage = undefined;
+    if (item && typeof item.product_image === 'string' && item.product_image.length > 0) {
+        urlImage = item.product_image;
     }
 
+    const reasonOptions = rmaConfigData && rmaConfigData?.lofmpRmaConfigurations && rmaConfigData?.lofmpRmaConfigurations?.reasons
+        ? rmaConfigData?.lofmpRmaConfigurations?.reasons.map(r => ({ value: r.id, label: r.name }))
+        : [];
+    const conditionOptions = rmaConfigData && rmaConfigData?.lofmpRmaConfigurations && rmaConfigData?.lofmpRmaConfigurations?.conditions
+        ? rmaConfigData?.lofmpRmaConfigurations?.conditions.map(c => ({ value: c.id, label: c.name }))
+        : [];
+    const resolutionOptions = rmaConfigData && rmaConfigData?.lofmpRmaConfigurations && rmaConfigData?.lofmpRmaConfigurations?.resolutions
+        ? rmaConfigData?.lofmpRmaConfigurations?.resolutions.map(res => ({ value: res.id, label: res.name }))
+        : [];
+
+    // Checkbox handler
+    const handleCheck = (e) => {
+        if (onItemCheck) onItemCheck(e.target.checked);
+    };
+
+
+    // Input change handler with qty_requested validation
+    const handleFieldChange = (field, value) => {
+        if (field === 'qty_requested' && item && item.quantity_ordered) {
+            if (value > item.quantity_ordered) {
+                value = item.quantity_ordered;
+            }
+            if (value < 1) {
+                value = 1;
+            }
+        }
+        if (onItemChange) onItemChange(field, value);
+    };
+
     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)} />
+                        <Checkbox onChange={handleCheck} checked={!!itemState.checked} />
                     ) : null}
 
                     <div className='flex w-full gap-4'>
                         <div className='block'>
                             <Image
-                                alt='product image'
+                                alt={item && item.product_name ? item.product_name : 'product image'}
                                 className="relative max-w-[120px]"
                                 src={urlImage}
                                 classes={{
@@ -45,36 +74,51 @@ const productItem = (props) => {
                             <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
+                                        {item && item.product_name ? item.product_name : '-'}
                                     </span>
                                 </p>
                             </div>
                             <div className='block'>
                                 <p className='text-[13px] text-gray-200 flex justify-between'>
                                     <span className='font-normal block'>
-                                        Qty : 3
+                                        Qty : {item && item.quantity_ordered ? item.quantity_ordered : '-'}
                                     </span>
                                 </p>
                             </div>
                             <div className='block'>
                                 <p className='text-[13px] text-gray-200 flex justify-between'>
                                     <span className='font-normal block'>
-                                        SGD 16
+                                        {item && item.product_sale_price && item.product_sale_price.currency ? item.product_sale_price.currency : ''} {item && item.product_sale_price && item.product_sale_price.value ? item.product_sale_price.value : '-'}
                                     </span>
                                 </p>
                             </div>
                         </div>
-
                     </div>
                 </div>
                 <div className='block w-full lg_w-2/5'>
-                    {show ? (
+                    {!!itemState.checked ? (
                         <>
                             <div className='flex flex-col mb-2.5'>
                                 <p className='mb-1'>
                                     Qty Return
                                 </p>
-                                <TextField />
+                                <TextField
+                                    value={
+                                        itemState.qty_requested > item.quantity_ordered
+                                            ? item.quantity_ordered
+                                            : itemState.qty_requested || ''
+                                    }
+                                    onChange={e => {
+                                        let val = parseFloat(e.target.value);
+                                        if (isNaN(val)) val = '';
+                                        if (val > item.quantity_ordered) val = item.quantity_ordered;
+                                        if (val < 1 && val !== '') val = 1;
+                                        handleFieldChange('qty_requested', val);
+                                    }}
+                                    type="number"
+                                    min={1}
+                                    max={item.quantity_ordered}
+                                />
                             </div>
                             <div className='flex flex-col mb-2.5'>
                                 <p className='mb-1'>
@@ -83,6 +127,8 @@ const productItem = (props) => {
                                 <Select
                                     options={reasonOptions}
                                     className='w-full'
+                                    value={itemState.reason_id !== undefined && itemState.reason_id !== null ? itemState.reason_id : ''}
+                                    onChange={e => handleFieldChange('reason_id', e.target.value)}
                                 />
                             </div>
                             <div className='flex flex-col mb-2.5'>
@@ -90,8 +136,10 @@ const productItem = (props) => {
                                     Item Condition
                                 </p>
                                 <Select
-                                    options={reasonOptions}
+                                    options={conditionOptions}
                                     className='w-full'
+                                    value={itemState.condition_id !== undefined && itemState.condition_id !== null ? itemState.condition_id : ''}
+                                    onChange={e => handleFieldChange('condition_id', e.target.value)}
                                 />
                             </div>
                             <div className='flex flex-col mb-2.5'>
@@ -99,8 +147,10 @@ const productItem = (props) => {
                                     Resolution
                                 </p>
                                 <Select
-                                    options={reasonOptions}
+                                    options={resolutionOptions}
                                     className='w-full'
+                                    value={itemState.resolution_id !== undefined && itemState.resolution_id !== null ? itemState.resolution_id : ''}
+                                    onChange={e => handleFieldChange('resolution_id', e.target.value)}
                                 />
                             </div>
                         </>
@@ -108,7 +158,7 @@ const productItem = (props) => {
                 </div>
             </div>
         </>
-    )
-}
+    );
+};
 
 export default productItem