@rpg-engine/long-bow 0.8.150 → 0.8.153

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.150",
+  "version": "0.8.153",
   "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.90",
+    "@rpg-engine/shared": "^0.10.92",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Marketplace/BuyOrderRows.tsx

@@ -4,6 +4,7 @@ import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
 import { resolveAtlasSpriteKey } from '../../utils/atlasUtils';
 import { LabelPill } from '../shared/LabelPill';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
@@ -23,6 +24,7 @@ export interface IBuyOrderRowProps {
 }
 
 const BUY_ORDER_DURATION_WEEKS = 4;
+type BuyOrderWithQuantityFallback = IMarketplaceBuyOrderItem & { quantity?: number };
 
 // Format "Active" → "ACTIVE", "Fulfilled" → "FULFILLED"
 const formatStatusLabel = (status: string): string => {
@@ -68,6 +70,7 @@ export const BuyOrderRow: React.FC<IBuyOrderRowProps> = ({
   showRequestTag = false,
   requestTagLabel = 'Buy Request',
 }) => {
+  const stackQty = (buyOrder as BuyOrderWithQuantityFallback).stackQty ?? (buyOrder as BuyOrderWithQuantityFallback).quantity;
   const timeRemaining =
     buyOrder.status === MarketplaceBuyOrderStatus.Active ? getTimeRemaining(buyOrder.createdAt) : null;
   const spriteKey = resolveAtlasSpriteKey(atlasJSON, buyOrder.itemBlueprintKey);
@@ -90,6 +93,9 @@ export const BuyOrderRow: React.FC<IBuyOrderRowProps> = ({
               <SpritePlaceholder />
             )}
           </RarityGlow>
+          {stackQty && stackQty > 1 && (
+            <QuantityOverlay>x{stackQty}</QuantityOverlay>
+          )}
         </SpriteContainer>
 
         <ItemDetails>
@@ -285,3 +291,11 @@ const ActionSection = styled.div`
   flex-shrink: 0;
   margin-left: 0.75rem;
 `;
+
+const QuantityOverlay = styled.p`
+  position: absolute;
+  display: block;
+  top: 15px;
+  left: -8px;
+  font-size: ${uiFonts.size.xsmall} !important;
+`;

package/src/components/Marketplace/__test__/BuyPanel.spec.tsx

@@ -0,0 +1,129 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import { MarketplaceBuyOrderStatus } from '@rpg-engine/shared';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { BuyPanel } from '../BuyPanel';
+
+jest.mock('../../ConfirmModal', () => ({
+  ConfirmModal: ({ message, onConfirm, onClose }) => (
+    <div data-testid="confirm-modal">
+      <div>{message}</div>
+      <button onClick={onConfirm}>Confirm fulfill</button>
+      <button onClick={onClose}>Cancel fulfill</button>
+    </div>
+  ),
+}));
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ label, onClick }) => <button onClick={onClick}>{label}</button>,
+}));
+
+describe('BuyPanel fulfill flow', () => {
+  let container;
+
+  const openBuyOrder = {
+    _id: 'buy-order-123',
+    owner: 'buyer-id',
+    itemBlueprintKey: 'short-sword',
+    maxPrice: 1000,
+    status: MarketplaceBuyOrderStatus.Active,
+    createdAt: new Date().toISOString(),
+    expiresAt: new Date(Date.now() + 60_000).toISOString(),
+  };
+
+  const renderBuyPanel = (onFulfillBuyOrder = jest.fn()) => {
+    act(() => {
+      ReactDOM.render(
+        <BuyPanel
+          items={[]}
+          atlasIMG=""
+          atlasJSON={{}}
+          onClose={jest.fn()}
+          onChangeType={jest.fn()}
+          onChangeRarity={jest.fn()}
+          onChangeOrder={jest.fn()}
+          onChangeNameInput={jest.fn()}
+          onChangeMainLevelInput={jest.fn()}
+          onChangeSecondaryLevelInput={jest.fn()}
+          onChangePriceInput={jest.fn()}
+          characterId="seller-id"
+          totalItems={0}
+          currentPage={1}
+          itemsPerPage={10}
+          onPageChange={jest.fn()}
+          openBuyOrders={[openBuyOrder]}
+          openBuyOrdersTotal={1}
+          openBuyOrdersPage={1}
+          onOpenBuyOrdersPageChange={jest.fn()}
+          onFulfillBuyOrder={onFulfillBuyOrder}
+        />,
+        container
+      );
+    });
+
+    return onFulfillBuyOrder;
+  };
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    HTMLElement.prototype.scrollTo = jest.fn();
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    container.remove();
+    jest.clearAllMocks();
+  });
+
+  it('waits for confirmation before calling onFulfillBuyOrder', () => {
+    const onFulfillBuyOrder = renderBuyPanel();
+
+    const fulfillButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Fulfill'
+    );
+
+    act(() => {
+      fulfillButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(onFulfillBuyOrder).not.toHaveBeenCalled();
+    expect(container.textContent).toContain('Try to fulfill this buy request with a matching item from your inventory or depot?');
+
+    const confirmButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Confirm fulfill'
+    );
+
+    act(() => {
+      confirmButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(onFulfillBuyOrder).toHaveBeenCalledWith('buy-order-123');
+  });
+
+  it('does not call onFulfillBuyOrder when the confirm modal is cancelled', () => {
+    const onFulfillBuyOrder = renderBuyPanel();
+
+    const fulfillButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Fulfill'
+    );
+
+    act(() => {
+      fulfillButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+
+    const cancelButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Cancel fulfill'
+    );
+
+    act(() => {
+      cancelButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(onFulfillBuyOrder).not.toHaveBeenCalled();
+  });
+});

package/src/stories/Features/marketplace/BuyOrderPanel.stories.tsx

@@ -83,6 +83,7 @@ const mockBuyOrders: IMarketplaceBuyOrderItem[] = [
     itemBlueprintKey: 'items/broad-sword',
     itemRarity: 'Rare',
     maxPrice: 500,
+    stackQty: 5,
     escrowedGold: 500,
     fee: 25,
     status: MarketplaceBuyOrderStatus.Active,
@@ -151,6 +152,7 @@ const DefaultWrapper = () => {
               itemBlueprintKey: selectedBlueprint.key,
               itemRarity: rarity as any,
               maxPrice,
+              stackQty: quantity,
               escrowedGold: maxPrice,
               fee: Math.floor(maxPrice * 0.05),
               status: MarketplaceBuyOrderStatus.Active,
@@ -222,6 +224,7 @@ const WithBlueprintWrapper = () => {
               itemBlueprintKey: selectedBlueprint.key,
               itemRarity: rarity as any,
               maxPrice,
+              stackQty: quantity,
               escrowedGold: maxPrice,
               fee: Math.floor(maxPrice * 0.05),
               status: MarketplaceBuyOrderStatus.Active,

package/src/stories/Features/marketplace/BuyOrderRows.stories.tsx

@@ -36,6 +36,7 @@ const mockActiveBuyOrder: IMarketplaceBuyOrderItem = {
   itemBlueprintKey: 'items/broad-sword',
   itemRarity: 'Rare',
   maxPrice: 500,
+  stackQty: 5,
   escrowedGold: 500,
   fee: 25,
   status: MarketplaceBuyOrderStatus.Active,

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

@@ -141,6 +141,7 @@ const Template: Story = () => {
               itemBlueprintKey: selectedBlueprint.key,
               itemRarity: selectedRarity as any,
               maxPrice,
+              stackQty: quantity,
               escrowedGold: maxPrice,
               fee: Math.floor(maxPrice * 0.05),
               status: MarketplaceBuyOrderStatus.Active,