@riosst100/pwa-marketplace 2.9.5 → 2.9.7

package/src/overwrites/peregrine/lib/talons/OrderHistoryPage/useOrderRow.js

@@ -0,0 +1,112 @@
+import { useCallback, useState, useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './orderRow.gql';
+
+/**
+ * Safe override of useOrderRow to guard against missing product data.
+ * Fixes: TypeError Cannot read properties of undefined (reading 'variants').
+ */
+export const useOrderRow = props => {
+    const { items = [], operations: ops } = props;
+    const operations = mergeOperations(DEFAULT_OPERATIONS, ops);
+    const { getProductThumbnailsQuery, getConfigurableThumbnailSource } = operations;
+
+    const urlKeys = useMemo(() => {
+        return items.map(item => item.product_url_key).filter(Boolean).sort();
+    }, [items]);
+
+    const { data, loading } = useQuery(getProductThumbnailsQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        variables: { urlKeys }
+    });
+
+    const { data: configurableThumbnailSourceData } = useQuery(
+        getConfigurableThumbnailSource,
+        { fetchPolicy: 'cache-and-network' }
+    );
+
+    const configurableThumbnailSource = useMemo(() => {
+        if (configurableThumbnailSourceData && configurableThumbnailSourceData.storeConfig) {
+            return configurableThumbnailSourceData.storeConfig.configurable_thumbnail_source;
+        }
+        return undefined;
+    }, [configurableThumbnailSourceData]);
+
+    const imagesData = useMemo(() => {
+        const mappedImagesData = {};
+
+        if (!data || !data.products || !Array.isArray(data.products.items)) {
+            return mappedImagesData;
+        }
+
+        items.forEach(item => {
+            if (!item) return;
+
+            const product = data.products.items.find(
+                element => item.product_url_key === element.url_key
+            );
+
+            if (!product) {
+                // No matching product found for url_key; leave null to avoid crashes upstream.
+                mappedImagesData[item.product_sku] = null;
+                return;
+            }
+
+            // When using variant thumbnail, prefer the configured variant image if present.
+            if (
+                configurableThumbnailSource === 'itself' &&
+                Array.isArray(product.variants) &&
+                product.variants.length > 0
+            ) {
+                const foundVariant = product.variants.find(
+                    variant => variant && variant.product && variant.product.sku === item.product_sku
+                );
+                mappedImagesData[item.product_sku] = (foundVariant && foundVariant.product) || product;
+            } else {
+                mappedImagesData[item.product_sku] = product;
+            }
+        });
+
+        return mappedImagesData;
+    }, [data, items, configurableThumbnailSource]);
+
+    const [isOpen, setIsOpen] = useState(false);
+    const handleContentToggle = useCallback(() => {
+        setIsOpen(currentValue => !currentValue);
+    }, []);
+
+    return {
+        loading,
+        imagesData,
+        isOpen,
+        handleContentToggle
+    };
+};
+
+/**
+ * JSDoc type definitions
+ */
+
+/**
+ * GraphQL operations for the Order Row Component
+ *
+ * @typedef {Object} OrderRowOperations
+ *
+ * @property {GraphQLAST} getProductThumbnailsQuery The query used to get product thumbnails of items in the Order.
+ *
+ * @see [`orderRow.gql.js`]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.gql.js}
+ * for queries used in Venia
+ */
+
+/**
+ * Props data to use when rendering a collapsed image gallery
+ *
+ * @typedef {Object} OrderRowTalonProps
+ *
+ * @property {Object} imagesData Images data with thumbnail URLs to render.
+ * @property {Boolean} isOpen Boolean which represents if a row is open or not
+ * @property {Function} handleContentToggle Callback to toggle isOpen value
+ */

package/src/overwrites/peregrine/lib/talons/RMAPage/rmaPage.gql.js

@@ -0,0 +1,202 @@
+import { gql } from '@apollo/client';
+
+const LofmpRmasFragment = gql`
+    fragment LofmpRmasFragment on RmaSearchResult {
+        items {
+            created_at
+            increment_id
+            items {
+                condition
+                id
+                image_url
+                name
+                price {
+                    currency
+                    value
+                }
+                qty_requested
+                reason
+                resolution
+                seller_name
+                sku
+            }
+            order {
+                created_at
+                id
+                increment_id
+                status
+                status_label
+            }
+            order_increment_id
+            rma_date
+            rma_id
+            seller {
+                id
+                name
+                url
+            }
+            status
+            status_label
+        }
+        total_count
+    }
+`;
+
+export const LOFMP_SEND_RMA_MESSAGE = gql`
+    mutation lofmpSendRmaMessage($input: SendMessageInput!) {
+        lofmpSendRmaMessage(input: $input) {
+            created_message {
+                attachments {
+                    id
+                    name
+                    url
+                }
+                created_at
+                id
+                sender_email
+                sender_name
+                text
+            }
+            message
+            success
+        }
+    }
+`;
+
+export const LOFMP_RMA_SHIPPING_CONFIRM = gql`
+    mutation lofmpRmaShippingConfirm($rma_id: Int!) {
+        lofmpRmaShippingConfirm(rma_id: $rma_id) {
+            message
+            success
+        }
+    }
+`;
+
+export const GET_LOFMP_RMA_CONFIGURATIONS = gql`
+    query GetLofmpRmaConfigurations {
+        lofmpRmaConfigurations {
+            conditions {
+                id
+                name
+            }
+            reasons {
+                id
+                name
+            }
+            resolutions {
+                id
+                name
+            }
+        }
+    }
+`;
+
+export const GET_LOFMP_RMAS = gql`
+    query GetLofmpRmas($filter: RmaFilterInput, $pageSize: Int!, $currentPage: Int) {
+        lofmpRmas(filter: $filter, pageSize: $pageSize, currentPage: $currentPage) {
+            ...LofmpRmasFragment
+        }
+    }
+    ${LofmpRmasFragment}
+`;
+
+export const LOFMP_CREATE_RMA = gql`
+    mutation lofmpCreateRma($input: CreateRmaInput!) {
+        lofmpCreateRma(input: $input) {
+            message
+            rma_id
+            status_id
+            success
+        }
+    }
+`;
+
+export const GET_LOFMP_RMA_DETAIL = gql`
+    query GetLofmpRmaDetail($rmaId: ID!) {
+        lofmpRmaDetail(rmaId: $rmaId) {
+            created_at
+            increment_id
+            items {
+                condition
+                id
+                image_url
+                name
+                product_options {
+                    label
+                    value
+                }
+                qty_requested
+                reason
+                resolution
+                sku
+            }
+            messages {
+                attachments {
+                    id
+                    name
+                    url
+                }
+                created_at
+                id
+                sender_email
+                sender_name
+                text
+            }
+            order {
+                created_at
+                id
+                increment_id
+                status
+                status_label
+            }
+            order_increment_id
+            rma_date
+            rma_id
+            seller {
+                id
+                name
+                url
+            }
+            shipping_address {
+                address_type
+                base_cash_on_delivery
+                cash_on_delivery
+                city
+                company
+                country_id
+                customer_address_id
+                customer_id
+                email
+                entity_id
+                fax
+                firstname
+                lastname
+                middlename
+                parent_id
+                postcode
+                prefix
+                quote_address_id
+                region
+                region_id
+                street
+                suffix
+                telephone
+                vat_id
+                vat_is_valid
+                vat_request_date
+                vat_request_id
+                vat_request_success
+            }
+            status
+            status_label
+        }
+    }
+`;
+
+export default {
+    getLofmpRmasQuery: GET_LOFMP_RMAS,
+    lofmpCreateRmaMutation: LOFMP_CREATE_RMA,
+    getLofmpRmaDetailQuery: GET_LOFMP_RMA_DETAIL,
+    lofmpRmaShippingConfirmMutation: LOFMP_RMA_SHIPPING_CONFIRM,
+    lofmpSendRmaMessageMutation: LOFMP_SEND_RMA_MESSAGE
+};

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderRow.js

@@ -12,13 +12,14 @@ import OrderProgressBar from './orderProgressBar';
 import OrderDetails from './OrderDetails';
 import defaultClasses from './orderRow.module.css';
 import cn from 'classnames';
-import { Verify, Shop } from 'iconsax-react';
+import { Verify, Shop, ConvertCard } from 'iconsax-react';
 import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholderImage';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 
 const OrderRow = props => {
     const { order } = props;
     const { formatMessage } = useIntl();
+    const history = useHistory();
     const {
         invoices,
         items,
@@ -109,24 +110,75 @@ const OrderRow = props => {
         width: 50
     };
 
-    // Helper to resolve a product image by SKU with graceful fallback
-    const getThumbnailForSku = (sku, fallbackLabel) => {
+
+    // Helper to resolve a product image by SKU with graceful fallback, now prefers product_image_url from order.items
+    const getThumbnailForSku = (sku, fallbackLabel, idx) => {
         let url = null;
         let label = fallbackLabel;
-        if (imagesData && typeof imagesData === 'object') {
+        // Prefer product_image_url from order.items if present and is a non-empty string
+        if (items && items[idx] && typeof items[idx].product_image_url === 'string' && items[idx].product_image_url.trim() !== '') {
+            url = items[idx].product_image_url;
+        } else if (imagesData && typeof imagesData === 'object') {
             const byKey = sku && imagesData[sku];
             const byValue = !byKey && sku
                 ? Object.values(imagesData).find(entry => entry?.sku === sku)
                 : null;
             const chosen = byKey || byValue;
-            if (chosen?.thumbnail?.url) {
+            if (chosen?.thumbnail?.url && typeof chosen.thumbnail.url === 'string' && chosen.thumbnail.url.trim() !== '') {
                 url = chosen.thumbnail.url;
                 label = chosen.thumbnail.label || label;
             }
         }
+        // If url is not a non-empty string, fallback to null (will trigger placeholder)
+        if (typeof url !== 'string' || url.trim() === '') {
+            url = null;
+        }
         return { url, label };
     };
 
+    const showNewReturnButton = status === 'Complete' || derivedStatus === formatMessage({ id: 'orderRow.deliveredText', defaultMessage: 'Delivered' });
+
+    const handleNewReturn = () => {
+        // Inject product_image per item with safe fallbacks (prefer product_image_url from query)
+        let orderWithImages = { ...order };
+        if (orderWithImages.items && Array.isArray(orderWithImages.items)) {
+            orderWithImages = {
+                ...orderWithImages,
+                items: orderWithImages.items.map(it => {
+                    // Start with empty string to avoid undefined passed to Image component downstream
+                    let product_image = '';
+                    // 1) Prefer product_image_url from order items (added by query)
+                    if (typeof it.product_image_url === 'string' && it.product_image_url.trim() !== '') {
+                        product_image = it.product_image_url;
+                    }
+                    // 2) Fallback to imagesData thumbnail url (if available)
+                    else if (
+                        imagesData &&
+                        it.product_sku &&
+                        imagesData[it.product_sku]?.thumbnail?.url &&
+                        typeof imagesData[it.product_sku].thumbnail.url === 'string' &&
+                        imagesData[it.product_sku].thumbnail.url.trim() !== ''
+                    ) {
+                        product_image = imagesData[it.product_sku].thumbnail.url;
+                    }
+
+                    return {
+                        ...it,
+                        // Keep product_image_url as-is, add product_image for RMACreate consumers
+                        product_image
+                    };
+                })
+            };
+        }
+        try {
+            localStorage.setItem('rma_order', JSON.stringify(orderWithImages));
+        } catch (e) {}
+        history.push({
+            pathname: `/return/create/${orderNumber}`,
+            state: { order: orderWithImages }
+        });
+    };
+
     return (
         <li className={classes.root}>
             <div className='flex flex-col md_flex-row md_items-start justify-between mb-2.5'>
@@ -151,30 +203,25 @@ const OrderRow = props => {
                 </div>
             </div>
             <div className='flex flex-col md_flex-row justify-between mb-2.5'>
-                <div className='flex flex-col ml-[14px]'>
-                    <div className='flex flex-row'>
-                        <div className={cn('mr-4 flex flex-col gap-8')}>
-                            {items && items.length > 0 && items.map((it, idx) => {
-                                const { url, label } = getThumbnailForSku(it.product_sku, it.product_name);
-                                return (
-                                    <div key={it.id || idx} className={classes.productImage}>
-                                        {url ? (
-                                            <img
-                                                src={url}
-                                                alt={label}
-                                                width={60}
-                                                className={classes.thumbnail}
-                                            />
-                                        ) : (
-                                            <PlaceholderImage alt={it.product_name} classes={{ root: classes.thumbnail }} width={60} />
-                                        )}
-                                    </div>
-                                );
-                            })}
-                        </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='flex flex-col ml-[5px] gap-y-[20px]'>
+                    {/* Per-item horizontal flex: image + detail */}
+                    {items && items.length > 0 && items.map((it, idx) => {
+                        const { url, label } = getThumbnailForSku(it.product_sku, it.product_name, idx);
+                        return (
+                            <div key={it.id || idx} className='flex flex-row gap-4 mb-2'>
+                                <div className={classes.productImage}>
+                                    {url ? (
+                                        <img
+                                            src={url}
+                                            alt={label}
+                                            width={80}
+                                            className={classes.thumbnail}
+                                        />
+                                    ) : (
+                                        <PlaceholderImage alt={it.product_name} classes={{ root: classes.thumbnail }} width={60} />
+                                    )}
+                                </div>
+                                <div className='flex flex-col gap-1 pb-2 last_pb-0 max-w-[375px]'>
                                     <div className={cn(classes.productName, 'text-[14] font-medium')}>
                                         <span>{it.product_name}</span>
                                     </div>
@@ -186,9 +233,9 @@ const OrderRow = props => {
                                         </span>
                                     </div>
                                 </div>
-                            ))}
-                        </div>
-                    </div>
+                            </div>
+                        );
+                    })}
                 </div>
                 {/* Right column: bottom-aligned Order Total + CTA */}
                 <div className='flex flex-col items-end gap-2 md_pl-10 md_self-end mr-4 mb-1'>
@@ -201,19 +248,37 @@ const OrderRow = props => {
                         </span>
                         <div className="text-lg font-medium">{orderTotalPrice}</div>
                     </div>
-                    <Link 
-                        to={{
-                            pathname: `/order-history/view/${orderNumber}`,
-                            state: { order }
-                        }}
-                    >
-                        <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.ViewTransactionDetail'}
-                                defaultMessage={'View Order Detail'}
-                            />
-                        </span>
-                    </Link>
+                    <div className="flex flex-row gap-2 w-full justify-end items-center">
+                        <Link 
+                            to={{
+                                pathname: `/order-history/view/${orderNumber}`,
+                                state: { order }
+                            }}
+                        >
+                            <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.ViewTransactionDetail'}
+                                    defaultMessage={'View Order Detail'}
+                                />
+                            </span>
+                        </Link>
+                        {showNewReturnButton && (
+                            <div
+                                className={cn(
+                                    "cursor-pointer border border-blue-700 bg-white text-blue-700 hover:bg-blue-50 hover:text-blue-700 hover:border-blue-700",
+                                    "rounded-full px-[10px] py-[3px] text-[13px] font-medium transition-all duration-300 ease-in-out flex items-center gap-2"
+                                )}
+                                onClick={handleNewReturn}
+                                title={formatMessage({ id: 'orderRow.returnProduct', defaultMessage: 'Return Product' })}
+                            >
+                                <ConvertCard size={20} color="#f26313" />
+                                <FormattedMessage
+                                    id={'orderRow.ReturnItems'}
+                                    defaultMessage={'Return Items'}
+                                />
+                            </div>
+                        )}
+                    </div>
                 </div>
             </div>