@riosst100/pwa-marketplace 2.9.3 → 2.9.5

package/src/components/OrderDetail/orderDetail.js

@@ -1,79 +1,113 @@
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
 import Button from '@magento/venia-ui/lib/components/Button';
 import cn from 'classnames';
 import { Printer } from 'iconsax-react';
-// import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
 import ItemsOrdered from './components/itemsOrdered';
 import RMAList from './components/rmaList';
+import { useLocation } from 'react-router-dom';
 
-const OrderDetail = () => {
+const OrderDetail = (props) => {
+    const printRef = useRef(null);
     const { formatMessage } = useIntl();
+    const location = useLocation();
     const PAGE_TITLE = formatMessage({
         id: 'Quotes.pageTitleTextRMADetail',
         defaultMessage: 'Order Detail'
     });
 
-    // const dataTabs =
-    //     [
-    //         {
-    //             id: 'items-ordered',
-    //             title: 'Items Ordered',
-    //             content: <ItemsOrdered />
-    //         },
-    //         {
-    //             id: 'invoices',
-    //             title: 'Invoices',
-    //             content: <><h2>invoices</h2></>
-    //         },
-    //         {
-    //             id: 'order-shipments',
-    //             title: 'Order Shipments',
-    //             content: <><h2>Order shipments</h2></>
-    //         }
-    //     ];
+    // Retrieve order data from props or location state
+    const order = props.order || location.state?.order;
+    // Extract order data
+    const invoiceNumber = order?.invoices?.[0]?.number || '-';
+    const orderDate = order?.order_date
+        ? new Date(order.order_date.replace(' ', 'T')).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
+        : '-';
+    const status = order?.status || '-';
+    const shippingMethod = order?.shipping_method || '-';
+    const trackingNumber = order?.shipments?.[0]?.tracking?.[0]?.number || '-';
+    const shippingAddress = order?.shipping_address;
+    const billingAddress = order?.billing_address;
+    const paymentMethod = order?.payment_methods?.[0]?.type || '-';
+
+    // Format address helper
+    const formatAddress = addr => {
+        if (!addr) return '-';
+        return [
+            `${addr.firstname} ${addr.lastname}`,
+            ...(addr.street || []),
+            `${addr.city}${addr.region_id ? ', ' + addr.region_id : ''}${addr.postcode ? ', ' + addr.postcode : ''}`,
+            addr.country_code,
+            addr.telephone ? `T: ${addr.telephone}` : ''
+        ].filter(Boolean).join('\n');
+    };
+
+        const handlePrint = useCallback(() => {
+            const styleId = 'order-detail-print-style';
+            let style = document.getElementById(styleId);
+            if (!style) {
+                style = document.createElement('style');
+                style.id = styleId;
+                style.type = 'text/css';
+                style.media = 'print';
+                style.appendChild(document.createTextNode(`
+                    @page { size: A3; margin: 0; }
+                    @media print {
+                        body { margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+                        body * { visibility: hidden !important; }
+                        .print-area, .print-area * { visibility: visible !important; }
+                        .print-area { position: relative; left: 0; top: -20px; width: 100%;}
+                        .no-print { display: none !important; }
+                    }
+                `));
+                document.head.appendChild(style);
+            }
+            window.print();
+            setTimeout(() => {
+            }, 500);
+        }, []);
 
     return (
-        <div className='relative grid gap-y-md'>
+        <div className='print-area relative grid gap-y-md' ref={printRef}>
             <StoreTitle>{PAGE_TITLE}</StoreTitle>
             <div aria-live="polite" className="text-xl font-medium text-left">
-                {PAGE_TITLE} - DEV123123123
+                {PAGE_TITLE} - #{order?.number || '-'}
             </div>
             <div className='block relative'>
                 <div className='flex gap-2 mb-4 flex-col'>
-                    <div class="box box-order-shipping-method flex gap-4">
-                        <p class="box-title block min-w-[90px] font-semibold text-[14px]">
+                    <div className="box box-order-shipping-method flex gap-4">
+                        <p className="box-title block min-w-[90px] font-semibold text-[14px]">
                             <span>Invoice</span>
                         </p>
-                        <div class="box-content text-[14px]">
-                            INV/20240705/MPL/4007072581
+                        <div className="box-content text-[14px]">
+                            {invoiceNumber || '-'}
                         </div>
                     </div>
-                    <div class="box box-order-shipping-method flex gap-4 text-[14px]">
-                        <p class="box-title block min-w-[90px] font-semibold">
+                    <div className="box box-order-shipping-method flex gap-4 text-[14px]">
+                        <p className="box-title block min-w-[90px] font-semibold">
                             <span>Order Date</span>
                         </p>
-                        <div class="box-content text-[14px]">
-                            February 23, 2024
+                        <div className="box-content text-[14px]">
+                            {orderDate}
                         </div>
                     </div>
-                    <div class="box box-order-shipping-method flex gap-4 text-[14px]">
-                        <p class="box-title block min-w-[90px] font-semibold self-center">
+                    <div className="box box-order-shipping-method flex gap-4 text-[14px]">
+                        <p className="box-title block min-w-[90px] font-semibold self-center">
                             <span>Status</span>
                         </p>
-                        <div class="box-content text-[14px]">
+                        <div className="box-content text-[14px]">
                             <div className='p-1 bg-[#F1EFF6] rounded-md flex items-center px-5'>
                                 <p className='text-[14px] text-blue-700 flex justify-between'>
                                     <span className='font-medium block text-blue-700'>
-                                        Processing
+                                        {status}
                                     </span>
                                 </p>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div className='flex flex-col md_flex-row gap-x-4 justify-end'>
+                <div className='flex flex-col md_flex-row gap-x-4 justify-end no-print'>
                     <Button
                         priority='high'
                         classes={{
@@ -83,6 +117,8 @@ const OrderDetail = () => {
                             "bg-white px-6 py-2 rounded-md text-gray-900 hover_!text-white border border-solid",
                             "border-gray-900 focus-visible_outline-none hover_bg-gray-900 min-h-[40px]"
                         )}
+                        onClick={handlePrint}
+                        aria-label={formatMessage({ id: 'order.printInvoices', defaultMessage: 'Print Invoices' })}
                     >
                         <span className='flex gap-x-3 justify-center group-hover_!text-white'>
                             <Printer
@@ -99,15 +135,7 @@ const OrderDetail = () => {
                     </Button>
                 </div>
             </div>
-
-            {/* <Tabs
-                data={dataTabs}
-                tabContentWrapperClassName='!p-0'
-                hasContent
-                tabWrapperClassName='xl_gap-x-[60px]'
-                rootClassName="mb-0"
-            /> */}
-            <div class="block block-order-details-view">
+            <div className="block block-order-details-view">
                 <div aria-live="polite" className="text-lg font-medium text-left mb-4 block-title">
                     {
                         formatMessage({
@@ -116,11 +144,9 @@ const OrderDetail = () => {
                         })
                     }
                 </div>
-
-                <ItemsOrdered />
+                <ItemsOrdered order={order} />
             </div>
-
-            <div class="block block-order-details-view">
+            <div className="block block-order-details-view">
                 <div aria-live="polite" className="text-lg font-medium text-left mb-4 block-title">
                     {
                         formatMessage({
@@ -129,11 +155,9 @@ const OrderDetail = () => {
                         })
                     }
                 </div>
-
                 <RMAList />
             </div>
-
-            <div class="block block-order-details-view">
+            <div className="block block-order-details-view">
                 <div aria-live="polite" className="text-lg font-medium text-left mb-4 block-title">
                     {
                         formatMessage({
@@ -142,63 +166,55 @@ const OrderDetail = () => {
                         })
                     }
                 </div>
-                <div class="block-content flex flex-col gap-y-4 rounded-md border border-gray-100 px-4 py-6 justify-between gap-x-10">
-                    <div class="box box-order-shipping-method flex gap-4">
-                        <strong class="box-title block min-w-[140px]">
+                <div className="block-content flex flex-col gap-y-4 rounded-md border border-gray-100 px-4 py-6 justify-between gap-x-10">
+                    <div className="box box-order-shipping-method flex gap-4">
+                        <strong className="box-title block min-w-[140px]">
                             <span>Shipping Method</span>
                         </strong>
-                        <div class="box-content">
-                            Flat Rate - Fixed
+                        <div className="box-content">
+                            {shippingMethod}
                         </div>
                     </div>
-                    <div class="box box-order-shipping-method flex gap-4">
-                        <strong class="box-title block min-w-[140px]">
+                    <div className="box box-order-shipping-method flex gap-4">
+                        <strong className="box-title block min-w-[140px]">
                             <span>Tracking Number</span>
                         </strong>
-                        <div class="box-content">
-                            TX8971239123
+                        <div className="box-content">
+                            {trackingNumber}
                         </div>
                     </div>
-                    <div class="box box-order-shipping-address flex gap-4">
-                        <strong class="box-title block min-w-[140px]"><span>Shipping Address</span></strong>
-                        <div class="box-content">
-                            <div className=' whitespace-pre-wrap'>
-                                Veronica Costello{'\n'}
-                                6146 Honey Bluff Parkway{'\n'}
-                                Calder, Michigan, 49628-7978{'\n'}
-                                United States{'\n'}
-                                T: <a href="tel:(555) 229-3326">(555) 229-3326</a>
+                    <div className="box box-order-shipping-address flex gap-4">
+                        <strong className="box-title block min-w-[140px]"><span>Shipping Address</span></strong>
+                        <div className="box-content">
+                            <div className='whitespace-pre-wrap'>
+                                {formatAddress(shippingAddress)}
                             </div>
                         </div>
                     </div>
-                    <div class="box box-order-billing-method flex gap-4">
-                        <strong class="box-title block min-w-[140px]">
+                    <div className="box box-order-billing-method flex gap-4">
+                        <strong className="box-title block min-w-[140px]">
                             <span>Payment Method</span>
                         </strong>
-                        <div class="box-content">
-                            <dl class="payment-method checkmemo">
-                                <dt class="title">Check / Money order</dt>
+                        <div className="box-content">
+                            <dl className="payment-method checkmemo">
+                                <dt className="title">{paymentMethod}</dt>
                             </dl>
                         </div>
                     </div>
-                    <div class="box box-order-billing-address flex gap-4">
-                        <strong class="box-title block min-w-[140px]">
+                    <div className="box box-order-billing-address flex gap-4">
+                        <strong className="box-title block min-w-[140px]">
                             <span>Billing Address</span>
                         </strong>
-                        <div class="box-content">
+                        <div className="box-content">
                             <div className='whitespace-pre-wrap'>
-                                Veronica Costello{'\n'}
-                                6146 Honey Bluff Parkway{'\n'}
-                                Calder, Michigan, 49628-7978{'\n'}
-                                United States{'\n'}
-                                T: <a href="tel:(555) 229-3326">(555) 229-3326</a>
+                                {formatAddress(billingAddress)}
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
+            </div>           
         </div>
-    )
-}
+    );
+};
 
 export default OrderDetail;

package/src/components/SubCategory/subCategory.js

@@ -25,7 +25,7 @@ const SubCategory = props => {
             const isActive = index == 0 ? true : false;
 
             const item = isActive ? (
-                <span className={classes.item}><b>{text}</b></span>
+                <span key={index} className={classes.item}><b>{text}</b></span>
             ) : (
                 <Link
                     key={index}

package/src/components/VerifyEmailPage/verifyEmail.js

@@ -1,18 +1,30 @@
-import React from 'react';
+import React, { useMemo, useEffect } from 'react';
 import { useQuery } from '@apollo/client';
 import { FormattedMessage } from 'react-intl';
 import { shape, string } from 'prop-types';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './verifyEmail.module.css';
-import { GET_CUSTOMER_INFORMATION } from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/AccountInformationPage/accountInformationPage.gql';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import { useHistory } from 'react-router-dom';
+import { useVerifyEmailPage } from '@riosst100/pwa-marketplace/src/talons/VerifyEmailPage/useVerifyEmailPage';
 
+const storage = new BrowserPersistence();
 
 const VerifyEmailPage = props => {
     const classes = useStyle(defaultClasses, props.classes);
-    const { data, loading } = useQuery(GET_CUSTOMER_INFORMATION);
-    const email = data?.customer?.email || '';
+    const email = storage.getItem('confirm_email');
 
-    return (
+    const history = useHistory();
+
+    const { handleResendEmail, shouldShowLoadingIndicator } = useVerifyEmailPage({ email });
+    
+    useEffect(() => {
+        if (!email) {
+            history.push('/');
+        }
+    }, [email, history]);
+
+    return email ? (
         <div className={classes.root}>
             <div className={classes.card}>
                 <h2 className={classes.title}>
@@ -21,30 +33,41 @@ const VerifyEmailPage = props => {
                         defaultMessage={'Please verify your email'}
                     />
                 </h2>
+                {email ?
                 <p className={classes.subtitle}>
                     <FormattedMessage
                         id={'verifyEmail.sentTo'}
                         defaultMessage={'You\'re almost there! We sent an email to'}
                     />
                     <br />
-                    <span className={classes.email}>{loading ? '.......' : email}</span>
-                </p>
+                    <span className={classes.email}>{email}</span>
+                </p> : ''}
                 <p className={classes.instructions}>
                     <FormattedMessage
                         id={'verifyEmail.instructions'}
                         defaultMessage={'Just click on the link in that email to complete your signup. If you don\'t see it, you may need to check your spam folder.'}
                     />
                 </p>
+                {shouldShowLoadingIndicator ? <button
+                    className={classes.resendButton}
+                    type="button"
+                    style={{"opacity":"0.5"}}
+                >
+                    <FormattedMessage
+                        id={'verifyEmail.sendingEmail'}
+                        defaultMessage={'Sending Email...'}
+                    />
+                </button> :
                 <button
                     className={classes.resendButton}
                     type="button"
-                    onClick={() => alert('Resend email logic goes here')}
+                    onClick={handleResendEmail}
                 >
                     <FormattedMessage
                         id={'verifyEmail.resend'}
                         defaultMessage={'Resend Email'}
                     />
-                </button>
+                </button>}
                 <div className={classes.contactHelp}>
                     <FormattedMessage
                         id={'verifyEmail.needHelp'}
@@ -59,7 +82,7 @@ const VerifyEmailPage = props => {
                 </div>
             </div>
         </div>
-    );
+    ) : '';
 };
 
 VerifyEmailPage.propTypes = {

package/src/intercept.js

@@ -92,7 +92,14 @@ module.exports = targets => {
       name: "VerifyEmailPage",
       pattern: "/verify-email",
       path: require.resolve("./components/VerifyEmailPage/index.js"),
-      authed: true,
+      authed: false,
+    },
+    {
+      exact: true,
+      name: "ConfirmEmailPage",
+      pattern: "/confirm-email",
+      path: require.resolve("./components/ConfirmEmailPage/index.js"),
+      authed: false,
     },
     {
       exact: true,

package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js

@@ -99,8 +99,8 @@ export const usePriceSummary = (props = {}) => {
 
         await createSellerCart({ initCheckoutSplitCart, sellerUrl });
 
-        // console.log('initCheckoutSplitCartData')
-        // console.log(initCheckoutSplitCartData)
+        console.log('initCheckoutSplitCartData',initCheckoutSplitCartData)
+        console.log('fetchCartId',fetchCartId)
 
         await removeCart();
         await apolloClient.clearCacheData(apolloClient, 'cart');

package/src/overwrites/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js

@@ -295,6 +295,9 @@ export const useCheckoutPage = (props = {}) => {
     // When true, we intentionally hide the OrderConfirmationPage (orderNumber)
     // to allow external payment (Xendit) to complete first.
     const [suppressOrderConfirmation, setSuppressOrderConfirmation] = useState(false);
+    // Support returning from external payment with orderNumber in URL
+    const [externalOrderNumber, setExternalOrderNumber] = useState(null);
+    const [externalOrderDetails, setExternalOrderDetails] = useState(null);
 
     const handlePlaceOrder = useCallback(async () => {
         // Fetch order details and then use an effect to actually place the
@@ -352,6 +355,17 @@ export const useCheckoutPage = (props = {}) => {
                     try {
                         // Prevent success page from rendering; we'll redirect to Xendit first
                         setSuppressOrderConfirmation(true);
+                        // Persist a snapshot of order details for rendering confirmation after redirect
+                        try {
+                            if (orderDetailsData) {
+                                const key = `orderConfirmationSnapshot:${orderNumber}`;
+                                const payload = JSON.stringify(orderDetailsData);
+                                globalThis.localStorage && globalThis.localStorage.setItem(key, payload);
+                            }
+                        } catch (e) {
+                            // eslint-disable-next-line no-console
+                            console.warn('Unable to persist order confirmation snapshot', e);
+                        }
                         const res = await xenditCreateInvoice({
                             variables: { orderId: orderNumber }
                         });
@@ -418,6 +432,33 @@ export const useCheckoutPage = (props = {}) => {
         isPlacingOrder
     ]);
 
+    // On first load, check for orderNumber in querystring to render confirmation
+    useEffect(() => {
+        try {
+            const { location } = globalThis;
+            if (!location) return;
+            const params = new URLSearchParams(location.search || '');
+            const qsOrder = params.get('orderNumber');
+            if (!qsOrder) return;
+
+            setExternalOrderNumber(qsOrder);
+            // Attempt to load the previously saved snapshot
+            try {
+                const key = `orderConfirmationSnapshot:${qsOrder}`;
+                const raw = globalThis.localStorage && globalThis.localStorage.getItem(key);
+                if (raw) {
+                    const parsed = JSON.parse(raw);
+                    setExternalOrderDetails(parsed);
+                }
+            } catch (e) {
+                // eslint-disable-next-line no-console
+                console.warn('Failed to restore order confirmation snapshot', e);
+            }
+        } catch (_) {
+            // ignore
+        }
+    }, []);
+
     useEffect(async () => {
         await setCheckoutState(false);
     }, [setCheckoutState]);
@@ -517,11 +558,11 @@ export const useCheckoutPage = (props = {}) => {
         isGuestCheckout: !isSignedIn,
         isLoading,
         isUpdating,
-        orderDetailsData,
+        orderDetailsData: externalOrderDetails || orderDetailsData,
         orderDetailsLoading,
         orderNumber: suppressOrderConfirmation
             ? null
-            : (placeOrderData && placeOrderData.placeOrder.order.order_number) || null,
+            : (externalOrderNumber || (placeOrderData && placeOrderData.placeOrder.order.order_number) || null),
         placeOrderLoading,
         placeOrderButtonClicked,
         setCheckoutStep,

package/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -34,7 +34,10 @@ export const useFilterSidebar = props => {
 
     const allActiveFilters = getFiltersFromSearch(search);
 
-    const { data: introspectionData } = useQuery(getFilterInputsQuery);
+    const { data: introspectionData } = useQuery(getFilterInputsQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
 
     // const {
     //     called: subFilterItemsCalled,

package/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderHistoryPage.gql.js

@@ -0,0 +1,116 @@
+import { gql } from '@apollo/client';
+
+const CustomerOrdersFragment = gql`
+    fragment CustomerOrdersFragment on CustomerOrders {
+        items {
+            billing_address {
+                city
+                country_code
+                firstname
+                lastname
+                postcode
+                region
+                street
+                telephone
+            }
+            id
+            invoices {
+                id
+                number
+            }
+            items {
+                id
+                product_name
+                product_sale_price {
+                    currency
+                    value
+                }
+                product_sku
+                product_url_key
+                selected_options {
+                    label
+                    value
+                }
+                quantity_ordered
+                seller_name
+            }
+            number
+            order_date
+            payment_methods {
+                name
+                type
+                additional_data {
+                    name
+                    value
+                }
+            }
+            shipments {
+                id
+                tracking {
+                    number
+                }
+            }
+            shipping_address {
+                city
+                country_code
+                firstname
+                lastname
+                postcode
+                region
+                street
+                telephone
+            }
+            shipping_method
+            status
+            total {
+                discounts {
+                    amount {
+                        currency
+                        value
+                    }
+                }
+                grand_total {
+                    currency
+                    value
+                }
+                subtotal {
+                    currency
+                    value
+                }
+                total_shipping {
+                    currency
+                    value
+                }
+                total_tax {
+                    currency
+                    value
+                }
+            }
+        }
+        page_info {
+            current_page
+            total_pages
+        }
+        total_count
+    }
+`;
+
+export const GET_CUSTOMER_ORDERS = gql`
+    query GetCustomerOrders(
+        $filter: CustomerOrdersFilterInput
+        $pageSize: Int!
+        $currentPage: Int
+    ) {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        customer {
+            orders(filter: $filter, pageSize: $pageSize, currentPage: $currentPage) {
+                ...CustomerOrdersFragment
+            }
+        }
+    }
+    ${CustomerOrdersFragment}
+`;
+
+export default {
+    getCustomerOrdersQuery: GET_CUSTOMER_ORDERS
+};

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -120,6 +120,7 @@ export const useCategoryContent = props => {
         return masterAttributes;
     }, [masterAttributesData]);
     
+    
 
     useEffect(() => {
         if (categoryId) {
@@ -132,6 +133,10 @@ export const useCategoryContent = props => {
             }
     
             const filters = getFiltersFromSearch(search);
+
+            // console.log('masterAttributes',masterAttributes)
+            // console.log('filters',filters)
+
     
             // Construct the filter arg object.
             const newFilters = {};
@@ -141,6 +146,8 @@ export const useCategoryContent = props => {
                 }
             });
 
+            // console.log('newFilters',newFilters)
+
             getFilters({
                 variables: {
                     filters: newFilters