@riosst100/pwa-marketplace 2.9.3 → 2.9.5

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

@@ -12,7 +12,7 @@ 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';
 
@@ -28,6 +28,7 @@ const OrderRow = props => {
         status,
         total
     } = order;
+
     const { grand_total: grandTotal } = total;
     const { currency, value: orderTotal } = grandTotal;
 
@@ -72,6 +73,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 +100,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 +109,37 @@ const OrderRow = props => {
         width: 50
     };
 
+    // Helper to resolve a product image by SKU with graceful fallback
+    const getThumbnailForSku = (sku, fallbackLabel) => {
+        let url = null;
+        let label = fallbackLabel;
+        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) {
+                url = chosen.thumbnail.url;
+                label = chosen.thumbnail.label || label;
+            }
+        }
+        return { url, label };
+    };
+
     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 +151,72 @@ 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-[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 { 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-[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>
+                    <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 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 +271,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
+    };
+}

package/src/talons/OrderHistoryPage/useOrderHistoryPage.js

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from '@apollo/client';
+
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+import { deriveErrorMessage } from '@magento/peregrine/lib/util/deriveErrorMessage';
+import { usePagination } from '@magento/peregrine/lib/hooks/usePagination';
+
+import operations from '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderHistoryPage.gql';
+
+const PAGE_SIZE = 5;
+
+// Custom Order History talon with page-based pagination
+export const useOrderHistoryPage = (props = {}) => {
+    const { getCustomerOrdersQuery } = operations;
+
+    const [
+        ,
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
+
+    const [pageSize] = useState(PAGE_SIZE);
+    const [searchText, setSearchText] = useState('');
+
+    // Pagination state
+    const [paginationValues, paginationApi] = usePagination();
+    const { currentPage = 1, totalPages } = paginationValues;
+    const { setCurrentPage, setTotalPages } = paginationApi;
+
+    const { data, error, loading } = useQuery(getCustomerOrdersQuery, {
+        fetchPolicy: 'cache-and-network',
+        variables: {
+            filter: {
+                number: {
+                    match: searchText
+                }
+            },
+            pageSize,
+            currentPage
+        }
+    });
+
+    const ordersData = data && data.customer ? data.customer.orders : undefined;
+    const orders = ordersData && ordersData.items ? ordersData.items : [];
+    const totalCount = ordersData && typeof ordersData.total_count !== 'undefined' && ordersData.total_count !== null
+        ? ordersData.total_count
+        : 0;
+    const totalPagesFromData = ordersData && ordersData.page_info && typeof ordersData.page_info.total_pages !== 'undefined'
+        ? ordersData.page_info.total_pages
+        : null;
+
+    // Keep pagination total pages in sync with query result
+    useEffect(() => {
+        setTotalPages(totalPagesFromData);
+        return () => setTotalPages(null);
+    }, [setTotalPages, totalPagesFromData]);
+
+    const isLoadingWithoutData = !data && loading;
+    const isBackgroundLoading = !!data && loading;
+
+    const pageInfo = useMemo(() => {
+        if (data) {
+            const currentShown = Math.min(currentPage * pageSize, totalCount);
+            return {
+                current: currentShown,
+                total: totalCount
+            };
+        }
+        return null;
+    }, [data, currentPage, pageSize, totalCount]);
+
+    const derivedErrorMessage = useMemo(
+        () => deriveErrorMessage([error]),
+        [error]
+    );
+
+    const handleReset = useCallback(() => {
+        setSearchText('');
+        setCurrentPage(1);
+    }, [setCurrentPage]);
+
+    const handleSubmit = useCallback(
+        ({ search }) => {
+            setSearchText(search);
+            setCurrentPage(1);
+        },
+        [setCurrentPage]
+    );
+
+    // Update the page indicator if the GraphQL query is in flight.
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
+
+    const pageControl = useMemo(
+        () => ({ currentPage, setPage: setCurrentPage, totalPages }),
+        [currentPage, setCurrentPage, totalPages]
+    );
+
+    return {
+        errorMessage: derivedErrorMessage,
+        handleReset,
+        handleSubmit,
+        isBackgroundLoading,
+        isLoadingWithoutData,
+        loadMoreOrders: null,
+        orders,
+        pageInfo,
+        searchText,
+        pageControl
+    };
+};
+
+export default useOrderHistoryPage;

package/src/talons/ShopBy/useShopBy.js

@@ -154,7 +154,12 @@ export const useShopBy = props => {
             return null;
         }
 
-        let options = rawData.find(item => item.attribute_code === shopby).options;
+        let filter = rawData.find(item => item.attribute_code === shopby);
+        if (!filter) {
+            return null;
+        }
+        
+        let options = filter.options;
 
         const mappingData = options.reduce((acc, item) => {
             let firstLetter = item.label.charAt(0).toUpperCase();
@@ -184,7 +189,12 @@ export const useShopBy = props => {
             return null;
         }
 
-        let options = rawData.find(item => item.attribute_code === shopby).options;
+        let filter = rawData.find(item => item.attribute_code === shopby);
+        if (!filter) {
+            return null;
+        }
+        
+        let options = filter.options;
 
         // const filteredSets = [];