@riosst100/pwa-marketplace 2.9.4 → 2.9.6

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

@@ -1,39 +1,59 @@
-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
+    const handleFieldChange = (field, value) => {
+        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,38 +65,43 @@ 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'>
+                            <div className='flex flex-col mb-2.5' onChange={e => handleFieldChange('qty_requested', parseFloat(e.target.value))}>
                                 <p className='mb-1'>
                                     Qty Return
                                 </p>
-                                <TextField />
+                                <TextField
+                                    value={itemState.qty_requested || ''}
+                                    onChange={e => handleFieldChange('qty_requested', parseFloat(e.target.value))}
+                                    type="number"
+                                    min={1}
+                                    max={item.quantity_ordered}
+                                />
                             </div>
-                            <div className='flex flex-col mb-2.5'>
+                            <div className='flex flex-col mb-2.5' onChange={e => handleFieldChange('reason_id', parseInt(e.target.value, 10))}>
                                 <p className='mb-1'>
                                     Return Reason
                                 </p>
@@ -85,21 +110,21 @@ const productItem = (props) => {
                                     className='w-full'
                                 />
                             </div>
-                            <div className='flex flex-col mb-2.5'>
+                            <div className='flex flex-col mb-2.5' onChange={e => handleFieldChange('condition_id', parseInt(e.target.value, 10))}>
                                 <p className='mb-1'>
                                     Item Condition
                                 </p>
                                 <Select
-                                    options={reasonOptions}
+                                    options={conditionOptions}
                                     className='w-full'
                                 />
                             </div>
-                            <div className='flex flex-col mb-2.5'>
+                            <div className='flex flex-col mb-2.5' onChange={e => handleFieldChange('resolution_id', parseInt(e.target.value, 10))}>
                                 <p className='mb-1'>
                                     Resolution
                                 </p>
                                 <Select
-                                    options={reasonOptions}
+                                    options={resolutionOptions}
                                     className='w-full'
                                 />
                             </div>
@@ -108,7 +133,7 @@ const productItem = (props) => {
                 </div>
             </div>
         </>
-    )
-}
+    );
+};
 
 export default productItem

package/src/components/RMAPage/orderRow.js

@@ -1,318 +1,173 @@
+
 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 { Shop } from 'iconsax-react';
 import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholderImage';
 import { Link } from 'react-router-dom';
+import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css';
 
-const OrderRow = props => {
-    const { order } = props;
+const RmaRow = props => {
+    const { rma } = props;
     const { formatMessage } = useIntl();
     const {
-        invoices,
+        created_at,
+        increment_id,
+        order_increment_id,
         items,
-        number: orderNumber,
-        order_date: orderDate,
-        shipments,
+        order,
+        rma_date,
+        rma_id,
+        seller,
         status,
-        total
-    } = order;
-    const { grand_total: grandTotal } = total;
-    const { currency, value: orderTotal } = grandTotal;
+        status_label,
+        rmaDetailLoading,
+        rmaDetailError,
+        rmaDetailData
+    } = rma;
 
-    // Convert date to ISO-8601 format so Safari can also parse it
-    const isoFormattedDate = orderDate.replace(' ', 'T');
-    const formattedDate = new Date(isoFormattedDate).toLocaleDateString(
+    const classes = useStyle(defaultClasses, props.classes);
+    // Format date
+    const isoFormattedDate = created_at ? created_at.replace(' ', 'T') : '';
+    const formattedDate = isoFormattedDate ? 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'
-        });
+    ) : '';
+
+    // Seller name: prefer from first item's seller_name, fallback to seller?.name
+    let sellerName = '-';
+    if (items && items.length > 0 && items[0].seller_name) {
+        sellerName = items[0].seller_name;
+    } else if (seller?.name) {
+        sellerName = seller.name;
     }
 
-    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-semibold rounded-full px-[30px] py-[5px] border-none';
+        return 'text-blue-700 text-[14px] font-medium 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 className='flex flex-col md_flex-row md_items-start justify-between mb-2.5'>
+                <div className='flex flex-col ml-[14px] mt-[5px]'>
+                    <div className="flex gap-x-[15px] flex-col">
+                        <div className='flex gap-x-[5px] items-center'>
+                            <Shop size={17} className='text-blue-700' variant="Bold" />
+                            <span className='text-[14px] font-medium text-blue-700'>
+                                {sellerName}
+                            </span>
+                            <span>|</span>
+                            <span className="text-blue-700 text-[14px]">#{order_increment_id}</span>
+                        </div>
                     </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}
+                            {status_label || status}
                         </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-col ml-[14px]'>
                     <div className='flex flex-row'>
-                        <div>
-                            <PlaceholderImage {...thumbnailProps} />
+                        <div className={cn('mr-4 flex flex-col gap-8')}>
+                            {items && items.length > 0 && items.map((it, idx) => {
+                                const thumbnailProps = {
+                                    alt: it.name,
+                                    classes: { root: classes.thumbnail },
+                                    width: 50
+                                };
+                                return (
+                                    <div key={it.id || idx} className={classes.productImage}>
+                                        {it.image_url ? (
+                                            <img src={it.image_url} alt={it.name} width={70} className={classes.thumbnail} />
+                                        ) : (
+                                            <PlaceholderImage {...thumbnailProps} />
+                                        )}
+                                    </div>
+                                );
+                            })}
                         </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 className='flex flex-col max-w-[375px] gap-8'>
+                            {items && items.length > 0 && items.map((it, idx) => (
+                                <div key={it.id || idx} className='flex flex-col gap-1 pb-2 last_pb-0'>
+                                    <div className={cn(classes.productName, 'text-[14] font-medium')}>
+                                        <span>{it.name}</span>
+                                    </div>
+                                    <div className="text-[14] text-gray-300">
+                                        <span>Qty : {`${it.qty_requested || 0}`}</span>
+                                        <br />
+                                        <span>
+                                            Price : {it.price ? <Price currencyCode={it.price.currency} value={it.price.value} /> : '-'}
+                                        </span>
+                                    </div>
+                                </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">
+                {/* Right column: bottom-aligned RMA Date + CTA */}
+                <div className='flex flex-col items-end gap-2 md_pl-10 md_self-end mr-4 mb-1'>
+                    <Link 
+                            to={{
+                                pathname: `/return/view/${rma_id}`,
+                                state: { rma }
+                            }}
+                        >
+                        <span className="bg-blue-700 hover:bg-white hover:text-blue-700 hover:border hover:border-blue-700 rounded-full px-[30px] py-[5px] text-[13px] font-medium text-white transition-all duration-300 ease-in-out">
                             <FormattedMessage
-                                id={'orderRow.orderTotalText'}
-                                defaultMessage={'Order Total'}
+                                id={'rmaRow.ViewTransactionDetail'}
+                                defaultMessage={'View RMA Detail'}
                             />
                         </span>
-                        <div className="text-lg font-semibold text-left md_text-center block">{orderTotalPrice}</div>
-                    </div>
+                    </Link>
                 </div>
             </div>
-            <div className='flex flex-row justify-end py-[5px]'>
-                <Link to="/return/view/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)
-        }),
+RmaRow.propTypes = {
+    rma: shape({
+        created_at: string,
+        increment_id: string,
         items: arrayOf(
             shape({
                 id: string,
-                product_name: string,
-                product_sale_price: shape({
+                name: string,
+                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
+                qty_requested: number
             })
         ),
-        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
+        order: shape({
+            id: string,
+            increment_id: string,
+            status: string,
+            status_label: string
+        }),
+        rma_date: string,
+        rma_id: string,
+        seller: shape({
+            id: string,
+            name: string,
+            url: 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
-            })
-        })
+        status_label: string
     })
 };
+
+export default RmaRow;