@riosst100/pwa-marketplace 2.9.4 → 2.9.6

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

@@ -10,7 +10,7 @@ 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 { useOrderHistoryPage } from '@riosst100/pwa-marketplace/src/talons/OrderHistoryPage/useOrderHistoryPage';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Button from '@magento/venia-ui/lib/components/Button';
@@ -24,6 +24,7 @@ import OrderRow from './orderRow';
 import ResetButton from './resetButton';
 import { SearchNormal } from 'iconsax-react';
 import cn from 'classnames';
+import Pagination from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination';
 
 const errorIcon = (
     <Icon
@@ -46,7 +47,8 @@ const OrderHistoryPage = props => {
         isLoadingWithoutData,
         orders,
         pageInfo,
-        searchText
+        searchText,
+        pageControl
     } = talonProps;
     const [, { addToast }] = useToasts();
     const { formatMessage } = useIntl();
@@ -205,6 +207,12 @@ const OrderHistoryPage = props => {
                     <span className={classes.pageInfo}>{pageInfoLabel}</span>
                 </div>
                 {pageContents}
+                {/* Pagination Controls */}
+                <div className="mt-4">
+                    {pageControl?.totalPages > 1 ? (
+                        <Pagination pageControl={pageControl} />
+                    ) : null}
+                </div>
                 {loadMoreButton}
             </div>
         </OrderHistoryContextProvider >

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 } from 'iconsax-react';
+import { Verify, Shop } 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,
@@ -28,6 +29,7 @@ const OrderRow = props => {
         status,
         total
     } = order;
+
     const { grand_total: grandTotal } = total;
     const { currency, value: orderTotal } = grandTotal;
 
@@ -72,6 +74,11 @@ const OrderRow = props => {
 
     const classes = useStyle(defaultClasses, props.classes);
 
+    // Determine seller/store name from first item if available
+    const sellerName = items && items.length > 0 && items[0] && items[0].seller_name
+        ? items[0].seller_name
+        : '-';
+
     const contentClass = isOpen ? classes.content : classes.content_collapsed;
 
     const contentToggleIconSrc = isOpen ? ChevronUp : ChevronDown;
@@ -94,7 +101,7 @@ const OrderRow = props => {
         );
 
     const badgeStatusStyle = () => {
-        return 'bg-[#F1EFF6] text-blue-700 text-[14px] font-medium rounded-full px-[30px] py-[5px] border-none';
+        return 'text-blue-700 text-[14px] font-medium py-[5px] border-none';
     }
 
     const thumbnailProps = {
@@ -103,13 +110,88 @@ const OrderRow = props => {
         width: 50
     };
 
+
+    // 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;
+        // 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 && 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 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]">#{orderNumber}</span>
+                        </div>
                     </div>
                 </div>
                 <div className='flex flex-col'>
@@ -121,90 +203,86 @@ const OrderRow = props => {
                 </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-[5px]'>
                     <div className='flex flex-row'>
-                        <div>
-                            <PlaceholderImage {...thumbnailProps} />
+                        <div className={cn('flex flex-col gap-2')}>
+                            {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={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>
-                        <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.product_name}</span>
+                                    </div>
+                                    <div className="text-[14] text-gray-300">
+                                        <span>Qty : {`${it.quantity_ordered}`}</span>
+                                        <br />
+                                        <span>
+                                            Price : <Price currencyCode={it?.product_sale_price?.currency} value={it?.product_sale_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 Order Total + CTA */}
+                <div className='flex flex-col items-end gap-2 md_pl-10 md_self-end mr-4 mb-1'>
+                    <div className="md_text-right">
+                        <span className="text-[14] text-gray-200 block mb-1">
                             <FormattedMessage
                                 id={'orderRow.orderTotalText'}
                                 defaultMessage={'Order Total'}
                             />
                         </span>
-                        <div className="text-lg font-medium text-left md_text-center block">{orderTotalPrice}</div>
+                        <div className="text-lg font-medium">{orderTotalPrice}</div>
+                    </div>
+                    <div className="flex flex-row gap-2 w-full justify-end items-center">
+                        {showNewReturnButton && (
+                            <button
+                                type="button"
+                                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"
+                                onClick={handleNewReturn}
+                            >
+                                <FormattedMessage
+                                    id={'orderRow.newReturn'}
+                                    defaultMessage={'New Return'}
+                                />
+                            </button>
+                        )}
+                        <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>
                 </div>
             </div>
-            <div className='flex flex-row justify-end py-[5px]'>
-                {/* <button
-                    className={cn(classes.contentToggleContainer, '!p-0 !border-0')}
-                    onClick={handleContentToggle}
-                    type="button"
-                    aria-expanded={isOpen}
-                >
-                    <span className="text-[13px] font-medium text-blue-700 underline">
-                        <FormattedMessage
-                            id={'orderRow.ViewTransactionDetail'}
-                            defaultMessage={'View Transaction Detail'}
-                        />
-                    </span>
-                </button> */}
-                <Link to="/order-history/view/123213">
-                    <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>
     );
 };
@@ -259,6 +337,7 @@ OrderRow.propTypes = {
                         value: string
                     })
                 ),
+                seller_name: string,
                 quantity_ordered: number
             })
         ),

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

@@ -101,14 +101,14 @@
 }
 
 .orderStatusBadge {
-    composes: border from global;
+    /* composes: border from global;
     composes: border-solid from global;
-    composes: border-subtle from global;
+    composes: border-subtle from global; */
     composes: font-bold from global;
     composes: justify-self-start from global;
     composes: px-xs from global;
     composes: py-1 from global;
-    composes: rounded-md from global;
+    /* composes: rounded-md from global; */
     composes: text-2xs from global;
 }
 

package/src/overwrites/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js

@@ -41,7 +41,7 @@ const StoreCodeRoute = () => {
     // the storage value and refresh so that we start using the new code.
     useEffect(() => {
         if (!websiteCodeInUrl) {
-            history.replace(location.pathname)
+            history.replace(location.pathname + location.search)
         } else if (websiteCodeInUrl && websiteCodeInUrl !== currentWebsiteCode) {
             let storeCodeInUrl = websiteStores[websiteCodeInUrl];
 

package/src/talons/AccountInformationPage/deleteAccount.gql.js

@@ -0,0 +1,23 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_ACCOUNT = gql`
+    mutation DeleteAccount {
+        deleteCustomerAccount {
+            success
+            message
+        }
+    }
+`;
+
+export const SIGN_OUT = gql`
+    mutation SignOutFromMenu {
+        revokeCustomerToken {
+            result
+        }
+    }
+`;
+
+export default {
+    deleteAccountMutation: DELETE_ACCOUNT,
+    signOutMutation: SIGN_OUT
+};

package/src/talons/AccountInformationPage/useDeleteAccount.js

@@ -0,0 +1,98 @@
+
+import { useCallback, useMemo, useState, useRef, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery } from '@apollo/client';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './deleteAccount.gql';
+import { useHistory } from 'react-router-dom';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import { useToasts } from '@magento/peregrine';
+
+export const useDeleteAccount = (props = {}) => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(false);
+
+    const { formatMessage } = useIntl();
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { signOutMutation } = operations;
+
+    const history = useHistory();
+
+    const [isSigningOut, setIsSigningOut] = useState(false);
+    const [{ currentUser, isSignedIn }, { signOut }] = useUserContext();
+    const [revokeToken] = useMutation(signOutMutation);
+    
+    const [, { dispatch }] = useEventingContext();
+    const [, { addToast }] = useToasts();
+
+    const {
+        deleteAccountMutation
+    } = operations;
+
+    const [deleteAccount, { data: deleteAccountData, error: deleteAccountError, loading: deleteAccountLoading}] = useMutation(
+        deleteAccountMutation,
+        {
+            fetchPolicy: 'no-cache'
+        }
+    );
+
+    const handleDeleteAccount = useCallback(() => {
+        deleteAccount({});
+    }, [
+        setLoading,
+        deleteAccount,
+        deleteAccountError,
+        deleteAccountData
+    ]);
+
+    const handleSignOut = useCallback(async () => {
+        setIsSigningOut(true);
+
+        dispatch({
+            type: 'USER_SIGN_OUT',
+            payload: currentUser
+        });
+
+        // Delete cart/user data from the redux stor`e.
+        await signOut({ revokeToken });
+
+    }, [history, revokeToken, signOut, dispatch, currentUser]);
+
+    useEffect(() => {
+        if (deleteAccountLoading) {
+            setLoading(true);
+        }
+
+        if (deleteAccountData && !deleteAccountLoading) {
+            if (deleteAccountData.deleteCustomerAccount.success) {
+                addToast({
+                    type: 'info',
+                    message: formatMessage({
+                        id: 'deleteAccount.deleteAccountSuccess',
+                        defaultMessage: 'Your account is deleted successfully.'
+                    }),
+                    timeout: 10000
+                });
+
+                handleSignOut();
+            }
+
+            setLoading(false);
+        }
+    }, [
+        deleteAccountData,
+        deleteAccountLoading,
+        handleSignOut,
+        addToast
+    ]);
+
+    return {
+        loading,
+        error,
+        success,
+        handleDeleteAccount
+    };
+}

package/src/talons/ConfirmEmailPage/confirmEmailPage.gql.js

@@ -0,0 +1,20 @@
+import { gql } from '@apollo/client';
+
+export const CONFIRM_EMAIL = gql`
+    mutation ConfirmEmail(
+        $id: Int!
+        $key: String!
+    ) {
+        confirmCustomerEmail(
+            id: $id
+            key: $key
+        ) {
+            success
+            message
+        }
+    }
+`;
+
+export default {
+    confirmCustomerEmailMutation: CONFIRM_EMAIL
+};

package/src/talons/ConfirmEmailPage/useConfirmEmailPage.js

@@ -0,0 +1,78 @@
+
+import { useCallback, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { useMutation } from '@apollo/client';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './confirmEmailPage.gql';
+import { useHistory } from 'react-router-dom';
+import { useToasts } from '@magento/peregrine';
+
+export const useConfirmEmailPage = (props = {}) => {
+    const { formatMessage } = useIntl();
+
+    const { id, key } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const history = useHistory();
+
+    const [, { addToast }] = useToasts();
+
+    const {
+        confirmCustomerEmailMutation
+    } = operations;
+    
+    const [confirmEmail, { called: called, data: data, error: error, loading: loading}] = useMutation(
+        confirmCustomerEmailMutation,
+        {
+            fetchPolicy: 'no-cache'
+        }
+    );
+
+    const handleConfirmEmail = useCallback(() => {
+        confirmEmail({
+            variables: {
+                id,
+                key
+            }
+        });
+    }, [
+        confirmEmail,
+        id,
+        key
+    ]);
+
+    const shouldShowLoadingIndicator = called && loading;
+    const isSuccess = !loading && data && data.confirmCustomerEmail.success ? true : false;
+    
+    
+    useEffect(() => {
+        if (data && !loading) {
+            if (data.confirmCustomerEmail.success) {
+                addToast({
+                    type: 'success',
+                    message: formatMessage({
+                        id: 'emailConfirmation.confirmEmailSuccess',
+                        defaultMessage: data.confirmCustomerEmail.message
+                    }),
+                    timeout: 10000
+                });
+
+                // history.go(0)
+            }
+        }
+    }, [
+        data,
+        loading,
+        addToast
+    ]);
+
+    return {
+        loading,
+        error,
+        data,
+        handleConfirmEmail,
+        shouldShowLoadingIndicator,
+        isSuccess
+    };
+}