@rpg-engine/long-bow 0.8.225 → 0.8.227

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.225",
+  "version": "0.8.227",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.10.115",
+    "@rpg-engine/shared": "^0.10.119",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Marketplace/CharacterListingForm.tsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { CharacterListingModal } from './CharacterListingModal';
+import { getEligibleCharactersForListing } from './characterListingUtils';
 
 export interface ICharacterListingFormProps {
   accountCharacters: ICharacter[];
@@ -30,9 +31,7 @@ export const CharacterListingForm: React.FC<ICharacterListingFormProps> = ({
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const eligibleCount = accountCharacters.filter(
-    c => !c.isListedForSale && !c.tradedAt
-  ).length;
+  const eligibleCount = getEligibleCharactersForListing(accountCharacters).length;
 
   return (
     <Wrapper>

package/src/components/Marketplace/CharacterListingModal.tsx

@@ -1,6 +1,6 @@
 import { ICharacter } from '@rpg-engine/shared';
 import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import styled, { keyframes } from 'styled-components';
 import ModalPortal from '../Abstractions/ModalPortal';
@@ -10,6 +10,7 @@ import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { DCRateStrip } from '../shared/DCRateStrip';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
+import { getEligibleCharactersForListing } from './characterListingUtils';
 
 export interface ICharacterListingModalProps {
   isOpen: boolean;
@@ -52,12 +53,13 @@ export const CharacterListingModal: React.FC<ICharacterListingModalProps> = ({
     []
   );
 
-  if (!isOpen) return null;
-
-  const eligibleCharacters = accountCharacters.filter(
-    c => !c.isListedForSale
+  const eligibleCharacters = useMemo(
+    () => getEligibleCharactersForListing(accountCharacters, activeCharacterId),
+    [accountCharacters, activeCharacterId]
   );
 
+  if (!isOpen) return null;
+
   const isActiveCharacter = (c: ICharacter) => !!activeCharacterId && c._id === activeCharacterId;
 
   const canList = !!selectedId && Number(price) > 0 && selectedId !== activeCharacterId;

package/src/components/Marketplace/MyCharacterListingsPanel.tsx

@@ -9,6 +9,7 @@ import { Pagination } from '../shared/Pagination/Pagination';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { CharacterListingModal } from './CharacterListingModal';
+import { getEligibleCharactersForListing } from './characterListingUtils';
 
 export interface IMyCharacterListingsPanelProps {
   myCharacterListings: ICharacterListing[];
@@ -65,9 +66,7 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
     }
   };
 
-  const eligibleCount = accountCharacters.filter(
-    c => !c.isListedForSale && !c.tradedAt
-  ).length;
+  const eligibleCount = getEligibleCharactersForListing(accountCharacters).length;
 
   return (
     <>
@@ -358,4 +357,3 @@ const EmptySubtext = styled.span`
   max-width: 260px;
   line-height: 1.6;
 `;
-

package/src/components/Marketplace/__test__/characterListingUtils.spec.ts

@@ -0,0 +1,55 @@
+import { ICharacter } from '@rpg-engine/shared';
+import {
+  getEligibleCharactersForListing,
+  isCharacterEligibleForListing,
+} from '../characterListingUtils';
+
+describe('characterListingUtils', () => {
+  it('keeps traded characters eligible as long as they are not currently listed', () => {
+    const tradedCharacter = {
+      _id: 'traded-character',
+      isListedForSale: false,
+      tradedAt: '2026-04-17T00:00:00.000Z',
+    } as ICharacter;
+
+    expect(isCharacterEligibleForListing(tradedCharacter)).toBe(true);
+  });
+
+  it('sorts recently traded characters first and moves the active character to the end', () => {
+    const characters = [
+      {
+        _id: 'older-character',
+        name: 'Older',
+        isListedForSale: false,
+        tradedAt: '2026-04-10T00:00:00.000Z',
+      },
+      {
+        _id: 'newly-traded-character',
+        name: 'Newly Traded',
+        isListedForSale: false,
+        tradedAt: '2026-04-17T00:00:00.000Z',
+      },
+      {
+        _id: 'already-listed-character',
+        name: 'Already Listed',
+        isListedForSale: true,
+      },
+      {
+        _id: 'active-character',
+        name: 'Active',
+        isListedForSale: false,
+      },
+    ] as ICharacter[];
+
+    const eligibleCharacters = getEligibleCharactersForListing(
+      characters,
+      'active-character'
+    );
+
+    expect(eligibleCharacters.map(character => character._id)).toEqual([
+      'newly-traded-character',
+      'older-character',
+      'active-character',
+    ]);
+  });
+});

package/src/components/Marketplace/characterListingUtils.ts

@@ -0,0 +1,38 @@
+import { ICharacter } from '@rpg-engine/shared';
+
+const toTimestamp = (value?: Date | string | null): number => {
+  if (!value) return 0;
+
+  const timestamp = new Date(value).getTime();
+
+  return Number.isFinite(timestamp) ? timestamp : 0;
+};
+
+export const isCharacterEligibleForListing = (character: ICharacter): boolean =>
+  !character.isListedForSale;
+
+export const getEligibleCharactersForListing = (
+  accountCharacters: ICharacter[],
+  activeCharacterId?: string
+): ICharacter[] =>
+  accountCharacters
+    .filter(isCharacterEligibleForListing)
+    .sort((left, right) => {
+      const leftIsActive =
+        !!activeCharacterId && left._id === activeCharacterId;
+      const rightIsActive =
+        !!activeCharacterId && right._id === activeCharacterId;
+
+      if (leftIsActive !== rightIsActive) {
+        return leftIsActive ? 1 : -1;
+      }
+
+      const tradedAtDiff =
+        toTimestamp(right.tradedAt) - toTimestamp(left.tradedAt);
+
+      if (tradedAtDiff !== 0) {
+        return tradedAtDiff;
+      }
+
+      return 0;
+    });

package/src/components/Spellbook/Spell.tsx

@@ -13,6 +13,7 @@ export interface ISpellProps {
   charMagicLevel: number;
   charSkillLevels?: Record<string, number>;
   onPointerUp?: (spellKey: string) => void;
+  onClick?: (spellKey: string) => void;
   isSettingShortcut?: boolean;
   spellKey: string;
   spell: ISpell;
@@ -43,6 +44,7 @@ export const Spell: React.FC<ISpellProps> = ({
   charMagicLevel,
   charSkillLevels,
   onPointerUp,
+  onClick,
   isSettingShortcut,
   spell,
   activeCooldown,
@@ -77,10 +79,12 @@ export const Spell: React.FC<ISpellProps> = ({
   const CONTAINER_STYLE = { width: '32px', height: '32px' };
   const IMAGE_SCALE = 2;
 
+  const handleClick = onClick ?? onPointerUp;
+
   return (
     <SpellInfoWrapper spell={spell}>
       <Container
-        onPointerUp={onPointerUp?.bind(null, spellKey)}
+        onClick={handleClick?.bind(null, spellKey)}
         isSettingShortcut={isSettingShortcut && !disabled}
         className="spell"
       >

package/src/components/Store/Store.tsx

@@ -316,7 +316,7 @@ export const Store: React.FC<IStoreProps> = ({
           cartItems={cartItems}
           onRemoveFromCart={handleRemoveFromCartTracked}
           onClose={closeCart}
-          onPurchase={async () => { handleCartPurchase(onPurchase); return true; }}
+          onPurchase={() => handleCartPurchase(onPurchase)}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
           onCheckoutStart={onCheckoutStart}

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

@@ -127,6 +127,22 @@ jest.mock('pixelarticons/react/Wallet', () => ({
   Wallet: () => <span>wallet</span>,
 }));
 
+jest.mock('pixelarticons/react/DateTime', () => ({
+  DateTime: () => <span>datetime</span>,
+}));
+
+jest.mock('pixelarticons/react/Receipt', () => ({
+  Receipt: () => <span>receipt</span>,
+}));
+
+jest.mock('pixelarticons/react/ShoppingCart', () => ({
+  ShoppingCart: () => <span>shopping-cart</span>,
+}));
+
+jest.mock('pixelarticons/react/Users', () => ({
+  Users: () => <span>users</span>,
+}));
+
 jest.mock('react-icons/fa', () => ({
   FaHistory: () => <span>history</span>,
   FaShoppingCart: () => <span>cart</span>,

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

@@ -0,0 +1,98 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import { PurchaseType } from '@rpg-engine/shared';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { useStoreCart } from '../hooks/useStoreCart';
+
+jest.mock('../hooks/useStoreMetadata', () => ({
+  useStoreMetadata: () => ({
+    collectMetadata: jest.fn(),
+    resolveMetadata: jest.fn(),
+    isCollectingMetadata: false,
+    currentMetadataItem: null,
+  }),
+}));
+
+let hookResult;
+const TestComponent = () => {
+  hookResult = useStoreCart();
+  return null;
+};
+
+describe('useStoreCart', () => {
+  let container;
+
+  const baseItem = {
+    key: 'account-email-change',
+    name: 'Account Email Change',
+    price: 2.99,
+    type: PurchaseType.Service,
+  };
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    act(() => {
+      ReactDOM.render(<TestComponent />, container);
+    });
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
+
+  it('clears and closes the cart after a successful purchase', async () => {
+    await act(async () => {
+      await hookResult.handleAddToCart(baseItem, 1, { inputValue: 'new@example.com' });
+    });
+    act(() => {
+      hookResult.openCart();
+    });
+
+    const onPurchase = jest.fn().mockResolvedValue(true);
+    let result;
+
+    await act(async () => {
+      result = await hookResult.handlePurchase(onPurchase);
+    });
+
+    expect(result).toBe(true);
+    expect(onPurchase).toHaveBeenCalledWith(
+      expect.objectContaining({
+        purchases: [
+          expect.objectContaining({
+            purchaseKey: 'account-email-change',
+            metadata: { inputValue: 'new@example.com' },
+          }),
+        ],
+      })
+    );
+    expect(hookResult.cartItems).toEqual([]);
+    expect(hookResult.isCartOpen).toBe(false);
+  });
+
+  it('keeps the cart intact when purchase returns false', async () => {
+    await act(async () => {
+      await hookResult.handleAddToCart(baseItem, 1, { inputValue: 'new@example.com' });
+    });
+    act(() => {
+      hookResult.openCart();
+    });
+
+    const onPurchase = jest.fn().mockResolvedValue(false);
+    let result;
+
+    await act(async () => {
+      result = await hookResult.handlePurchase(onPurchase);
+    });
+
+    expect(result).toBe(false);
+    expect(hookResult.cartItems).toHaveLength(1);
+    expect(hookResult.isCartOpen).toBe(true);
+  });
+});

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

@@ -19,7 +19,7 @@ interface IUseStoreCart {
   isCartOpen: boolean;
   handleAddToCart: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
   handleRemoveFromCart: (itemKey: string) => void;
-  handlePurchase: (onPurchase: (purchase: IPurchase) => void) => void;
+  handlePurchase: (onPurchase: (purchase: IPurchase) => Promise<boolean>) => Promise<boolean>;
   openCart: () => void;
   closeCart: () => void;
   getTotalItems: () => number;
@@ -104,7 +104,7 @@ export const useStoreCart = (): IUseStoreCart => {
     );
   };
 
-  const handlePurchase = (onPurchase: (purchase: IPurchase) => void) => {
+  const handlePurchase = async (onPurchase: (purchase: IPurchase) => Promise<boolean>): Promise<boolean> => {
     const purchaseUnits: IPurchaseUnit[] = cartItems.map(cartItem => ({
       purchaseKey: cartItem.item.key,
       qty: cartItem.quantity,
@@ -122,12 +122,14 @@ export const useStoreCart = (): IUseStoreCart => {
       purchases: purchaseUnits,
     };
 
-    onPurchase(purchase);
+    const success = await onPurchase(purchase);
 
-    if (isMounted.current) {
+    if (success && isMounted.current) {
       setCartItems([]);
       setIsCartOpen(false);
     }
+
+    return success;
   };
 
   const openCart = () => setIsCartOpen(true);