@riosst100/pwa-marketplace 2.9.3 → 2.9.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.9.3",
+  "version": "2.9.4",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

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/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/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

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -26,7 +26,9 @@ const Breadcrumbs = props => {
 
     const talonProps = useBreadcrumbs({ categoryId });
 
-    const DELIMITER = <ArrowRight2 size={13} className='inline-flex text-gray-200' />
+    const location = useLocation(); // ✅ dipindah ke atas sebelum conditional return
+
+    const DELIMITER = <ArrowRight2 size={13} className='inline-flex text-gray-200' />;
 
     const {
         currentCategory,
@@ -39,13 +41,15 @@ const Breadcrumbs = props => {
 
     // For all links generate a fragment like "/ Text"
     const links = useMemo(() => {
-        return normalizedData.map(({ text, path }) => {
+        return normalizedData.map(({ text, path }, index) => {
             if (text == "dCollectible Card Games") {
                 return '';
             }
-            
+
+            console.log('index', index);
+
             return (
-                <Fragment key={text}>
+                <Fragment key={index}>
                     <span className={classes.divider}>{DELIMITER}</span>
                     <Link
                         className={classes.link}
@@ -74,14 +78,11 @@ const Breadcrumbs = props => {
         );
     }
 
-    const filterBreadcrumbsElement = [];
+    let filterBreadcrumbsElement = []; // ✅ pakai let agar bisa di-push
 
     const lastIndex = currentFilter ? currentFilter.length - 1 : 0;
-    // const filterpath = ;
-
-    const { search } = useLocation();
 
-    // const previousSearch = useRef(search);
+    const { search } = location;
 
     const removeShopbyParam = (url) => {
         const urlParts = url.split("?"); // Pisahkan URL sebelum dan sesudah tanda tanya
@@ -98,78 +99,72 @@ const Breadcrumbs = props => {
 
         // Gabungkan URL dasar dengan query string yang telah dimodifikasi
         return newQueryString ? `${baseUrl}?${newQueryString}` : baseUrl;
-    }
+    };
 
     const params = removeShopbyParam(search);
-    
+
     currentFilter && currentFilter.length && currentFilter.map((filter, index) => {
         currentProduct ? (
             filterBreadcrumbsElement.push(
-                <>
-                <span className={classes.divider}>{DELIMITER}</span>
-                <Link
-                    key={index}
-                    className={classes.link}
-                    to={resourceUrl('/'+currentCategoryPath)}
-                    onClick={handleClick}
-                >
-                    {filter.label}
-                </Link>
-                </>
-            )
-        ) : (
-            customPage ? (
-                filterBreadcrumbsElement.push(
-                    <>
+                <span key={index}>
                     <span className={classes.divider}>{DELIMITER}</span>
                     <Link
-                        key={index}
                         className={classes.link}
-                        to={resourceUrl('/'+currentCategoryPath+params)}
+                        to={resourceUrl('/' + currentCategoryPath)}
                         onClick={handleClick}
                     >
                         {filter.label}
                     </Link>
-                    </>
+                </span>
+            )
+        ) : (
+            customPage ? (
+                filterBreadcrumbsElement.push(
+                    <span key={index}>
+                        <span className={classes.divider}>{DELIMITER}</span>
+                        <Link
+                            className={classes.link}
+                            to={resourceUrl('/' + currentCategoryPath + params)}
+                            onClick={handleClick}
+                        >
+                            {filter.label}
+                        </Link>
+                    </span>
                 )
             ) : filterBreadcrumbsElement.push(
                 index == lastIndex ?
-                <>
-                    <span className={classes.divider}>{DELIMITER}</span>
-                    <span key={index} className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{filter.label}</span>
-                </> : <>
-                    <span className={classes.divider}>{DELIMITER}</span>
-                    <Link
-                        key={index}
-                        className={classes.link}
-                        to={resourceUrl('/'+currentCategoryPath+params)}
-                        onClick={handleClick}
-                    >
-                        {filter.label}
-                    </Link>
-                    </>
+                    <span key={index}>
+                        <span className={classes.divider}>{DELIMITER}</span>
+                        <span className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{filter.label}</span>
+                    </span> : <span key={index}>
+                        <span className={classes.divider}>{DELIMITER}</span>
+                        <Link
+                            className={classes.link}
+                            to={resourceUrl('/' + currentCategoryPath + params)}
+                            onClick={handleClick}
+                        >
+                            {filter.label}
+                        </Link>
+                    </span>
             )
         );
     });
 
-    // If we have a "currentProduct" it means we're on a PDP so we want the last
-    // category text to be a link. If we don't have a "currentProduct" we're on
-    // a category page so it should be regular text.
     const currentCategoryLink = currentCategory == "dCollectible Card Games" ? '' : (customPage || currentProduct || currentFilter && currentFilter.length ? (
         <>
-        <span className={classes.divider}>{DELIMITER}</span>
-        <Link
-            className={classes.link}
-            to={'/'+resourceUrl(currentCategoryPath)}
-            onClick={handleClick}
-        >
-            {currentCategory}
-        </Link>
+            <span className={classes.divider}>{DELIMITER}</span>
+            <Link
+                className={classes.link}
+                to={'/' + resourceUrl(currentCategoryPath)}
+                onClick={handleClick}
+            >
+                {currentCategory}
+            </Link>
         </>
     ) : (
         <>
-        <span className={classes.divider}>{DELIMITER}</span>
-        <span className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{currentCategory}</span>
+            <span className={classes.divider}>{DELIMITER}</span>
+            <span className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{currentCategory}</span>
         </>
     ));
 
@@ -186,7 +181,7 @@ const Breadcrumbs = props => {
             <span className={classes.text}>{customPage}</span>
         </Fragment>
     ) : null;
-    
+
     return (
         <div className={classes.root} aria-live="polite" aria-busy="false">
             <Link className={classes.link} to="/">

package/src/overwrites/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js

@@ -15,9 +15,27 @@ const OrderConfirmationPage = props => {
     const { data, orderNumber } = props;
     const { formatMessage } = useIntl();
 
-    const talonProps = useOrderConfirmationPage({
-        data
-    });
+    // If data is not available (e.g., after external redirect without snapshot),
+    // render a minimal confirmation page.
+    const hasData =
+        data &&
+        data.cart &&
+        Array.isArray(data.cart.shipping_addresses) &&
+        data.cart.shipping_addresses.length > 0;
+
+    const talonProps = hasData
+        ? useOrderConfirmationPage({ data })
+        : { flatData: {
+              city: '',
+              country: '',
+              email: '',
+              firstname: '',
+              lastname: '',
+              postcode: '',
+              region: '',
+              shippingMethod: '',
+              street: []
+          }, isSignedIn: true };
 
     const { flatData, isSignedIn } = talonProps;
 
@@ -33,7 +51,7 @@ const OrderConfirmationPage = props => {
         street
     } = flatData;
 
-    const streetRows = street.map((row, index) => {
+    const streetRows = (street || []).map((row, index) => {
         return (
             <span key={index} className={classes.addressStreet}>
                 {row}
@@ -51,6 +69,13 @@ const OrderConfirmationPage = props => {
                 behavior: 'smooth'
             });
         }
+        // Best-effort cleanup of stored snapshot after successful view
+        try {
+            if (orderNumber) {
+                const key = `orderConfirmationSnapshot:${orderNumber}`;
+                globalThis.localStorage && globalThis.localStorage.removeItem(key);
+            }
+        } catch (_) {}
     }, []);
 
     const createAccountForm = !isSignedIn ? (
@@ -109,42 +134,46 @@ const OrderConfirmationPage = props => {
                         </Link>
                     </div>
                 </div>
-                <div className={classes.detailsGrid}>
-                    <div className={classes.card}>
-                        <div
-                            data-cy="OrderConfirmationPage-shippingInfoHeading"
-                            className={classes.cardHeading}
-                        >
-                            <FormattedMessage
-                                id={'global.shippingInformation'}
-                                defaultMessage={'Shipping Information'}
-                            />
+                {hasData ? (
+                    <>
+                        <div className={classes.detailsGrid}>
+                            <div className={classes.card}>
+                                <div
+                                    data-cy="OrderConfirmationPage-shippingInfoHeading"
+                                    className={classes.cardHeading}
+                                >
+                                    <FormattedMessage
+                                        id={'global.shippingInformation'}
+                                        defaultMessage={'Shipping Information'}
+                                    />
+                                </div>
+                                <div className={classes.shippingInfo}>
+                                    <span className={classes.email}>{email}</span>
+                                    <span className={classes.name}>{nameString}</span>
+                                    {streetRows}
+                                    <span className={classes.addressAdditional}>
+                                        {additionalAddressString}
+                                    </span>
+                                </div>
+                            </div>
+                            <div className={classes.card}>
+                                <div
+                                    data-cy="OrderConfirmationPage-shippingMethodHeading"
+                                    className={classes.cardHeading}
+                                >
+                                    <FormattedMessage
+                                        id={'global.shippingMethod'}
+                                        defaultMessage={'Shipping Method'}
+                                    />
+                                </div>
+                                <div className={classes.shippingMethod}>{shippingMethod}</div>
+                            </div>
                         </div>
-                        <div className={classes.shippingInfo}>
-                            <span className={classes.email}>{email}</span>
-                            <span className={classes.name}>{nameString}</span>
-                            {streetRows}
-                            <span className={classes.addressAdditional}>
-                                {additionalAddressString}
-                            </span>
+                        <div className={classes.itemsReview}>
+                            <ItemsReview data={data} />
                         </div>
-                    </div>
-                    <div className={classes.card}>
-                        <div
-                            data-cy="OrderConfirmationPage-shippingMethodHeading"
-                            className={classes.cardHeading}
-                        >
-                            <FormattedMessage
-                                id={'global.shippingMethod'}
-                                defaultMessage={'Shipping Method'}
-                            />
-                        </div>
-                        <div className={classes.shippingMethod}>{shippingMethod}</div>
-                    </div>
-                </div>
-                <div className={classes.itemsReview}>
-                    <ItemsReview data={data} />
-                </div>
+                    </>
+                ) : null}
                 <div
                     data-cy="OrderConfirmationPage-additionalText"
                     className={classes.additionalText}
@@ -181,6 +210,6 @@ OrderConfirmationPage.propTypes = {
         additionalText: string,
         sidebarContainer: string
     }),
-    data: object.isRequired,
+    data: object,
     orderNumber: string
 };

package/src/overwrites/venia-ui/lib/components/CheckoutPage/checkoutPage.js

@@ -125,7 +125,7 @@ const CheckoutPage = props => {
             defaultMessage: 'Checkout'
         });
 
-    if (orderNumber && orderDetailsData) {
+    if (orderNumber) {
         return (
             <OrderConfirmationPage
                 data={orderDetailsData}

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 = [];
 

package/src/talons/WebsiteSwitcher/useWebsiteSwitcher.js

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/client';
+import { useApolloClient, useQuery } from '@apollo/client';
 import { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
@@ -6,6 +6,7 @@ import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
 import { BrowserPersistence } from '@magento/peregrine/lib/util';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './websiteSwitcher.gql';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
 
 const storage = new BrowserPersistence();
 
@@ -161,6 +162,13 @@ export const useWebsiteSwitcher = (props = {}) => {
         [pathname, fetchRouteData, internalRoutes]
     );
 
+    const apolloClient = useApolloClient();
+
+    const [
+        { cartId },
+        { createCart, removeCart, getCartDetails }
+    ] = useCartContext();
+
     const handleSwitchWebsite = useCallback(
         // Change store view code and currency to be used in Apollo link request headers
         async (storeCode, websiteCode) => {
@@ -190,13 +198,16 @@ export const useWebsiteSwitcher = (props = {}) => {
 
             const newPath = pathName ? `/${pathName}${newSearchParams}` : (accessBaseWebsite ? `/${pathName}${accessBaseWebsite}` : '');
 
+            await apolloClient.clearCacheData(apolloClient, 'cart');
+            await removeCart();
+
             if (newWebsiteCode) {
                 globalThis.location.assign(`/${newWebsiteCode}${newPath || ''}`);
             } else {
                 globalThis.location.assign(`${newPath || ''}`);
             }
         },
-        [availableStores, getPathname, searchParams]
+        [availableStores, getPathname, searchParams, apolloClient, removeCart]
     );
 
     const handleTriggerClick = useCallback(() => {