@rpg-engine/long-bow 0.8.232 → 0.8.234

package/src/components/Store/CartView.tsx

@@ -21,11 +21,29 @@ interface ICartItem {
   metadata?: Record<string, any>;
 }
 
+export type PurchaseResult =
+  | { status: 'success' }
+  | { status: 'cancelled' }
+  | { status: 'failed'; error?: string };
+
+export type LegacyPurchaseResult = boolean;
+export type CartPurchaseResult = PurchaseResult | LegacyPurchaseResult;
+
+const GENERIC_PURCHASE_FAILED_MESSAGE = 'Purchase failed. Please try again.';
+
+const normalizePurchaseResult = (result: CartPurchaseResult): PurchaseResult => {
+  if (typeof result === 'boolean') {
+    return result ? { status: 'success' } : { status: 'failed' };
+  }
+
+  return result;
+};
+
 export interface ICartViewProps {
   cartItems: ICartItem[];
   onRemoveFromCart: (itemKey: string) => void;
   onClose: () => void;
-  onPurchase: () => Promise<boolean>;
+  onPurchase: () => Promise<CartPurchaseResult>;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
   paymentMethodLabel?: string;
@@ -99,13 +117,13 @@ export const CartView: React.FC<ICartViewProps> = ({
       const snapshot = [...cartItems];
       const trackItems = snapshot.map(ci => ({ key: ci.item.key, name: ci.item.name, quantity: ci.quantity }));
       onCheckoutStart?.(trackItems, total);
-      const success = await onPurchase();
+      const purchaseResult = normalizePurchaseResult(await onPurchase());
 
-      if (success) {
+      if (purchaseResult.status === 'success') {
         onPurchaseSuccess?.(trackItems, total);
         setPurchasedItems(snapshot);
-      } else {
-        const errMsg = 'Purchase failed. Please try again.';
+      } else if (purchaseResult.status === 'failed') {
+        const errMsg = purchaseResult.error ?? GENERIC_PURCHASE_FAILED_MESSAGE;
         onPurchaseError?.(errMsg);
         setError(errMsg);
       }

package/src/components/Store/PaymentMethodModal.tsx

@@ -13,6 +13,7 @@ export interface IPaymentMethodModalProps {
   onPayWithPix: () => void;
   onClose: () => void;
   showPix?: boolean;
+  isProcessing?: boolean;
 }
 
 type PaymentMethod = 'dc' | 'card' | 'pix';
@@ -25,6 +26,7 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   onPayWithPix,
   onClose,
   showPix = false,
+  isProcessing = false,
 }) => {
   const [selected, setSelected] = useState<PaymentMethod>('card');
 
@@ -44,6 +46,8 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   );
 
   const handleConfirm = useCallback(() => {
+    if (isProcessing) return;
+
     if (selected === 'dc' && !dcDisabled) {
       onPayWithDC();
     } else if (selected === 'pix') {
@@ -51,7 +55,11 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
     } else {
       onPayWithCard();
     }
-  }, [selected, dcDisabled, onPayWithDC, onPayWithCard, onPayWithPix]);
+  }, [selected, dcDisabled, isProcessing, onPayWithDC, onPayWithCard, onPayWithPix]);
+
+  const handleClose = useCallback(() => {
+    if (!isProcessing) onClose();
+  }, [isProcessing, onClose]);
 
   const dcSubText =
     dcRequired !== undefined ? (
@@ -67,7 +75,7 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
 
   return (
     <ModalPortal>
-      <Overlay onPointerDown={onClose} />
+      <Overlay onPointerDown={handleClose} />
       <ModalContainer>
         <ModalContent
           onClick={stopPropagation as React.MouseEventHandler}
@@ -76,7 +84,7 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
         >
           <Header>
             <Title>How would you like to pay?</Title>
-            <CloseButton onPointerDown={onClose} aria-label="Close">
+            <CloseButton onPointerDown={handleClose} aria-label="Close" disabled={isProcessing}>
               <Cancel />
             </CloseButton>
           </Header>
@@ -84,7 +92,8 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
           <Options>
             <RadioOption
               $selected={selected === 'card'}
-              onPointerDown={() => setSelected('card')}
+              $disabled={isProcessing}
+              onPointerDown={isProcessing ? undefined : () => setSelected('card')}
             >
               <RadioCircle $selected={selected === 'card'} />
               <OptionText>
@@ -96,7 +105,8 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
             {showPix && (
               <RadioOption
                 $selected={selected === 'pix'}
-                onPointerDown={() => setSelected('pix')}
+                $disabled={isProcessing}
+                onPointerDown={isProcessing ? undefined : () => setSelected('pix')}
               >
                 <RadioCircle $selected={selected === 'pix'} />
                 <OptionText>
@@ -108,8 +118,8 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
 
             <RadioOption
               $selected={selected === 'dc'}
-              $disabled={dcDisabled}
-              onPointerDown={dcDisabled ? undefined : () => setSelected('dc')}
+              $disabled={dcDisabled || isProcessing}
+              onPointerDown={dcDisabled || isProcessing ? undefined : () => setSelected('dc')}
             >
               <RadioCircle $selected={selected === 'dc'} />
               <OptionText>
@@ -120,8 +130,8 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
           </Options>
 
           <ConfirmRow>
-            <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={handleConfirm}>
-              Confirm
+            <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={handleConfirm} disabled={isProcessing}>
+              {isProcessing ? 'Processing...' : 'Confirm'}
             </Button>
           </ConfirmRow>
         </ModalContent>

package/src/components/Store/Store.tsx

@@ -14,7 +14,7 @@ import { DraggableContainer } from '../DraggableContainer';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { LabelPill } from '../shared/LabelPill/LabelPill';
-import { CartView } from './CartView';
+import { CartPurchaseResult, CartView } from './CartView';
 import { FeaturedBanner, IFeaturedItem } from './FeaturedBanner';
 import { packToBlueprint } from './internal/packToBlueprint';
 import { useStoreCart } from './hooks/useStoreCart';
@@ -31,7 +31,7 @@ export interface IStoreProps {
   packs?: IItemPack[];
   atlasJSON: any;
   atlasIMG: string;
-  onPurchase: (purchase: Partial<IPurchase>) => Promise<boolean>;
+  onPurchase: (purchase: Partial<IPurchase>) => Promise<CartPurchaseResult>;
   onShowHistory?: () => void;
   onShowWallet?: () => void;
   walletLabel?: string;

package/src/components/Store/__test__/CartView.spec.tsx

@@ -0,0 +1,190 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { CartView } from '../CartView';
+
+jest.mock(
+  '../../../mocks/atlas/entities/entities.json',
+  () => ({ frames: {} }),
+  { virtual: true }
+);
+jest.mock('../../../mocks/atlas/entities/entities.png', () => 'entities.png', {
+  virtual: true,
+});
+
+jest.mock('../../shared/SpriteFromAtlas', () => ({
+  SpriteFromAtlas: ({ spriteKey }) => (
+    <div data-testid="sprite">{spriteKey}</div>
+  ),
+}));
+
+jest.mock('../../shared/MMORPGNumber', () => ({
+  MMORPGNumber: ({ value }) => <span>{value}</span>,
+}));
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ label, onClick, disabled }) => (
+    <button type="button" onClick={onClick} disabled={disabled}>
+      {label}
+    </button>
+  ),
+}));
+
+jest.mock('../TrustBar', () => ({
+  TrustBar: () => <div data-testid="trust-bar" />,
+}));
+
+jest.mock('../PurchaseSuccess', () => ({
+  PurchaseSuccess: () => <div>Purchase Success</div>,
+}));
+
+jest.mock('styled-components', () => {
+  const withoutTransientProps = (props) =>
+    Object.fromEntries(
+      Object.entries(props).filter(([key]) => !key.startsWith('$'))
+    );
+  const createTag = (tag) => () => {
+    if (tag === 'button')
+      return ({ children, ...props }) => (
+        <button {...withoutTransientProps(props)}>{children}</button>
+      );
+    if (tag === 'span')
+      return ({ children, ...props }) => (
+        <span {...withoutTransientProps(props)}>{children}</span>
+      );
+    return ({ children, ...props }) => (
+      <div {...withoutTransientProps(props)}>{children}</div>
+    );
+  };
+  const styled = new Proxy(() => {}, {
+    get: (_target, prop) => {
+      if (prop === '__esModule') return true;
+      return createTag(prop);
+    },
+    apply: () => createTag('div'),
+  });
+  return {
+    __esModule: true,
+    default: styled,
+    keyframes: () => '',
+    css: () => '',
+  };
+});
+
+jest.mock('pixelarticons/react/Cancel', () => ({
+  Cancel: () => <span>x</span>,
+}));
+jest.mock('pixelarticons/react/Delete', () => ({
+  Delete: () => <span>delete</span>,
+}));
+jest.mock('pixelarticons/react/InfoBox', () => ({
+  InfoBox: () => <span>info</span>,
+}));
+jest.mock('pixelarticons/react/Box', () => ({ Box: () => <span>box</span> }));
+jest.mock('pixelarticons/react/ShoppingBag', () => ({
+  ShoppingBag: () => <span>bag</span>,
+}));
+
+const cartItems = [
+  {
+    item: {
+      _id: 'item-1',
+      key: 'life-potion',
+      name: 'Life Potion',
+      price: 1.5,
+      texturePath: 'items/life-potion.png',
+    },
+    quantity: 2,
+  },
+];
+
+const renderCart = (onPurchase, onPurchaseError = jest.fn()) => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+
+  act(() => {
+    ReactDOM.render(
+      <CartView
+        cartItems={cartItems}
+        onRemoveFromCart={jest.fn()}
+        onClose={jest.fn()}
+        onPurchase={onPurchase}
+        atlasJSON={{}}
+        atlasIMG="items.png"
+        onPurchaseError={onPurchaseError}
+      />,
+      container
+    );
+  });
+
+  return { container, onPurchaseError };
+};
+
+const clickPay = async (container) => {
+  const button = Array.from(container.querySelectorAll('button')).find(
+    (button) => button.textContent.includes('Pay')
+  );
+  await act(async () => {
+    button.click();
+  });
+};
+
+describe('CartView purchase result handling', () => {
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(document.body.lastElementChild);
+    document.body.innerHTML = '';
+  });
+
+  it('treats cancelled purchases as a quiet dismissal without generic error telemetry', async () => {
+    const onPurchaseError = jest.fn();
+    const { container } = renderCart(
+      jest.fn().mockResolvedValue({ status: 'cancelled' }),
+      onPurchaseError
+    );
+
+    await clickPay(container);
+
+    expect(container.textContent).not.toContain(
+      'Purchase failed. Please try again.'
+    );
+    expect(container.textContent).not.toContain(
+      'An error occurred during purchase. Please try again.'
+    );
+    expect(onPurchaseError).not.toHaveBeenCalled();
+  });
+
+  it('shows and reports the exact failed purchase error message', async () => {
+    const onPurchaseError = jest.fn();
+    const exactError = 'Your session has expired. Please log in again.';
+    const { container } = renderCart(
+      jest.fn().mockResolvedValue({ status: 'failed', error: exactError }),
+      onPurchaseError
+    );
+
+    await clickPay(container);
+
+    expect(container.textContent).toContain(exactError);
+    expect(onPurchaseError).toHaveBeenCalledWith(exactError);
+  });
+
+  it('keeps legacy false purchase results as the generic failure fallback', async () => {
+    const onPurchaseError = jest.fn();
+    const { container } = renderCart(
+      jest.fn().mockResolvedValue(false),
+      onPurchaseError
+    );
+
+    await clickPay(container);
+
+    expect(container.textContent).toContain(
+      'Purchase failed. Please try again.'
+    );
+    expect(onPurchaseError).toHaveBeenCalledWith(
+      'Purchase failed. Please try again.'
+    );
+  });
+});

package/src/components/Store/__test__/PaymentMethodModal.spec.tsx

@@ -0,0 +1,108 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { PaymentMethodModal } from '../PaymentMethodModal';
+
+jest.mock('../../Abstractions/ModalPortal', () => ({
+  __esModule: true,
+  default: ({ children }) => <>{children}</>,
+}));
+
+jest.mock('../../Button', () => ({
+  ButtonTypes: { RPGUIButton: 'rpgui-button' },
+  Button: ({ children, disabled, onPointerDown }) => (
+    <button type="button" disabled={disabled} onPointerDown={onPointerDown}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock('../../shared/MMORPGNumber', () => ({
+  MMORPGNumber: ({ value }) => <span>{value}</span>,
+}));
+
+jest.mock('pixelarticons/react/Cancel', () => ({
+  Cancel: () => <span>close</span>,
+}));
+
+jest.mock('styled-components', () => {
+  const withoutTransientProps = (props) =>
+    Object.fromEntries(
+      Object.entries(props).filter(([key]) => !key.startsWith('$'))
+    );
+  const createTag = (tag) => () => {
+    const Tag =
+      tag === 'button'
+        ? 'button'
+        : tag === 'h3'
+        ? 'h3'
+        : tag === 'span'
+        ? 'span'
+        : 'div';
+    return ({ children, ...props }) => (
+      <Tag {...withoutTransientProps(props)}>{children}</Tag>
+    );
+  };
+  const styled = new Proxy(() => {}, {
+    get: (_target, prop) => {
+      if (prop === '__esModule') return true;
+      return createTag(prop);
+    },
+    apply: () => createTag('div'),
+  });
+  return { __esModule: true, default: styled };
+});
+
+describe('PaymentMethodModal processing guard', () => {
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(document.body.lastElementChild);
+    document.body.innerHTML = '';
+  });
+
+  it('blocks close, backdrop, and confirm while checkout is processing', () => {
+    const onClose = jest.fn();
+    const onPayWithCard = jest.fn();
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    act(() => {
+      ReactDOM.render(
+        <PaymentMethodModal
+          dcBalance={0}
+          onPayWithDC={jest.fn()}
+          onPayWithCard={onPayWithCard}
+          onPayWithPix={jest.fn()}
+          onClose={onClose}
+          isProcessing
+        />,
+        container
+      );
+    });
+
+    const closeButton = container.querySelector('button[aria-label="Close"]');
+    const confirmButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Processing...'
+    );
+    const overlay = container.firstElementChild;
+
+    expect(closeButton.disabled).toBe(true);
+    expect(confirmButton.disabled).toBe(true);
+
+    act(() => {
+      closeButton.dispatchEvent(
+        new MouseEvent('pointerdown', { bubbles: true })
+      );
+      confirmButton.dispatchEvent(
+        new MouseEvent('pointerdown', { bubbles: true })
+      );
+      overlay.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }));
+    });
+
+    expect(onClose).not.toHaveBeenCalled();
+    expect(onPayWithCard).not.toHaveBeenCalled();
+  });
+});

package/src/components/Store/hooks/useStoreCart.ts

@@ -6,6 +6,7 @@ import {
   PurchaseType
 } from '@rpg-engine/shared';
 import { useEffect, useRef, useState } from 'react';
+import { CartPurchaseResult } from '../CartView';
 import { useStoreMetadata } from './useStoreMetadata';
 
 interface ICartItem {
@@ -19,7 +20,7 @@ interface IUseStoreCart {
   isCartOpen: boolean;
   handleAddToCart: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
   handleRemoveFromCart: (itemKey: string) => void;
-  handlePurchase: (onPurchase: (purchase: IPurchase) => Promise<boolean>) => Promise<boolean>;
+  handlePurchase: (onPurchase: (purchase: IPurchase) => Promise<CartPurchaseResult>) => Promise<CartPurchaseResult>;
   openCart: () => void;
   closeCart: () => void;
   getTotalItems: () => number;
@@ -104,7 +105,7 @@ export const useStoreCart = (): IUseStoreCart => {
     );
   };
 
-  const handlePurchase = async (onPurchase: (purchase: IPurchase) => Promise<boolean>): Promise<boolean> => {
+  const handlePurchase = async (onPurchase: (purchase: IPurchase) => Promise<CartPurchaseResult>): Promise<CartPurchaseResult> => {
     const purchaseUnits: IPurchaseUnit[] = cartItems.map(cartItem => ({
       purchaseKey: cartItem.item.key,
       qty: cartItem.quantity,
@@ -122,14 +123,15 @@ export const useStoreCart = (): IUseStoreCart => {
       purchases: purchaseUnits,
     };
 
-    const success = await onPurchase(purchase);
+    const result = await onPurchase(purchase);
+    const success = typeof result === 'boolean' ? result : result.status === 'success';
 
     if (success && isMounted.current) {
       setCartItems([]);
       setIsCartOpen(false);
     }
 
-    return success;
+    return result;
   };
 
   const openCart = () => setIsCartOpen(true);

package/src/stories/Features/trading/Marketplace.stories.tsx

@@ -171,7 +171,7 @@ const Template: Story = () => {
         onDCCoinClick={() => console.log('open store: packs tab')}
         onFulfillBuyOrder={buyOrderId => console.log('fulfill buy order:', buyOrderId)}
         availableGold={0}
-        selectedItemToSell={null}
+        selectedItemToSell={items[0]}
         onSelectedItemToSellRemove={() => console.log('click')}
         onYourPanelToggle={() => console.log('toggle')}
         onAddItemToMarketplace={() => console.log('add')}
@@ -179,6 +179,7 @@ const Template: Story = () => {
         onMoneyWithdraw={() => console.log('withdraw')}
         dcBalance={50}
         dcToGoldSwapRate={5500}
+        commissionPercent={0.05}
         totalItems={100}
         currentPage={page}
         itemsPerPage={30}