@rpg-engine/long-bow 0.8.149 → 0.8.151

package/package.json

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

package/src/components/Marketplace/BuyOrderDetailsModal.tsx

@@ -117,11 +117,11 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
             </FieldRow>
 
             <FieldRow>
-              <Label>Max Gold</Label>
+              <Label>Gold Offer</Label>
               <StyledInput
                 value={maxPrice || ''}
                 onChange={(e) => onMaxPriceChange(Number(e.target.value))}
-                placeholder="Max gold"
+                placeholder="Gold offer"
                 type="number"
                 min={1}
                 onFocus={disableHotkeys}

package/src/components/Marketplace/BuyPanel.tsx

@@ -91,7 +91,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   openBuyOrdersTotal = 0,
   openBuyOrdersPage = 1,
   onOpenBuyOrdersPageChange,
-  isLoading = false,
+
 }) => {
   const [name, setName] = useState('');
   const [showFilters, setShowFilters] = useState(false);
@@ -371,82 +371,83 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
       )}
 
       <ItemComponentScrollWrapper id="MarketContainer" ref={itemsContainer}>
-        {isLoading && !hasVisibleContent && (
+        {!hasVisibleContent ? (
           <LoadingState>
             <Spinner />
             <LoadingText>Loading marketplace...</LoadingText>
           </LoadingState>
-        )}
-        {!isLoading && !hasVisibleContent && <EmptyState>No offers match the current filters.</EmptyState>}
-
-        {showSellSection && (
-          <MarketSection>
-            <SectionHeader>
-              <SectionTitle>Sell Offers</SectionTitle>
-              <SectionMeta>{groupedItems.length} groups</SectionMeta>
-            </SectionHeader>
-            {groupedItems.length === 0 ? (
-              <SectionEmpty>No sell offers found.</SectionEmpty>
-            ) : (
-              groupedItems.map(({ bestListing, otherListings }) => (
-                <GroupedMarketplaceRow
-                  key={bestListing.item.key}
-                  bestListing={bestListing}
-                  otherListings={otherListings}
-                  atlasIMG={atlasIMG}
-                  atlasJSON={atlasJSON}
-                  equipmentSet={equipmentSet}
-                  dcToGoldSwapRate={dcToGoldSwapRate}
-                  getDCEquivalentPrice={getDCEquivalentPrice}
-                  characterId={characterId}
-                  onBuy={setBuyingItemId}
-                />
-              ))
-            )}
-            {totalItems > itemsPerPage && (
-              <SectionPager>
-                <Pager
-                  totalItems={totalItems}
-                  currentPage={currentPage}
-                  itemsPerPage={itemsPerPage}
-                  onPageChange={onPageChange}
-                />
-              </SectionPager>
+        ) : (
+          <>
+            {showSellSection && (
+              <MarketSection>
+                <SectionHeader>
+                  <SectionTitle>Sell Offers</SectionTitle>
+                  <SectionMeta>{groupedItems.length} groups</SectionMeta>
+                </SectionHeader>
+                {groupedItems.length === 0 ? (
+                  <SectionEmpty>No sell offers found.</SectionEmpty>
+                ) : (
+                  groupedItems.map(({ bestListing, otherListings }) => (
+                    <GroupedMarketplaceRow
+                      key={bestListing.item.key}
+                      bestListing={bestListing}
+                      otherListings={otherListings}
+                      atlasIMG={atlasIMG}
+                      atlasJSON={atlasJSON}
+                      equipmentSet={equipmentSet}
+                      dcToGoldSwapRate={dcToGoldSwapRate}
+                      getDCEquivalentPrice={getDCEquivalentPrice}
+                      characterId={characterId}
+                      onBuy={setBuyingItemId}
+                    />
+                  ))
+                )}
+                {totalItems > itemsPerPage && (
+                  <SectionPager>
+                    <Pager
+                      totalItems={totalItems}
+                      currentPage={currentPage}
+                      itemsPerPage={itemsPerPage}
+                      onPageChange={onPageChange}
+                    />
+                  </SectionPager>
+                )}
+              </MarketSection>
             )}
-          </MarketSection>
-        )}
 
-        {showBuySection && (
-          <MarketSection>
-            <SectionHeader>
-              <SectionTitle>Buy Requests</SectionTitle>
-              <SectionMeta>{visibleBuyOrders.length} visible</SectionMeta>
-            </SectionHeader>
-            {visibleBuyOrders.length === 0 ? (
-              <SectionEmpty>No public buy requests found.</SectionEmpty>
-            ) : (
-              visibleBuyOrders.map(order => (
-                <BuyOrderRow
-                  key={order._id}
-                  buyOrder={order}
-                  atlasJSON={atlasJSON}
-                  atlasIMG={atlasIMG}
-                  onFulfill={setFulfillingBuyOrderId}
-                  showRequestTag
-                />
-              ))
-            )}
-            {openBuyOrdersTotal > BUY_REQUESTS_PER_PAGE && (
-              <SectionPager>
-                <Pager
-                  totalItems={openBuyOrdersTotal}
-                  currentPage={openBuyOrdersPage}
-                  itemsPerPage={BUY_REQUESTS_PER_PAGE}
-                  onPageChange={onOpenBuyOrdersPageChange ?? (() => {})}
-                />
-              </SectionPager>
+            {showBuySection && (
+              <MarketSection>
+                <SectionHeader>
+                  <SectionTitle>Buy Requests</SectionTitle>
+                  <SectionMeta>{visibleBuyOrders.length} visible</SectionMeta>
+                </SectionHeader>
+                {visibleBuyOrders.length === 0 ? (
+                  <SectionEmpty>No public buy requests found.</SectionEmpty>
+                ) : (
+                  visibleBuyOrders.map(order => (
+                    <BuyOrderRow
+                      key={order._id}
+                      buyOrder={order}
+                      atlasJSON={atlasJSON}
+                      atlasIMG={atlasIMG}
+                      onFulfill={setFulfillingBuyOrderId}
+                      showRequestTag
+                    />
+                  ))
+                )}
+                {openBuyOrdersTotal > BUY_REQUESTS_PER_PAGE && (
+                  <SectionPager>
+                    <Pager
+                      totalItems={openBuyOrdersTotal}
+                      currentPage={openBuyOrdersPage}
+                      itemsPerPage={BUY_REQUESTS_PER_PAGE}
+                      onPageChange={onOpenBuyOrdersPageChange ?? (() => {})}
+                    />
+                  </SectionPager>
+                )}
+              </MarketSection>
             )}
-          </MarketSection>
+          </>
         )}
       </ItemComponentScrollWrapper>
     </>
@@ -630,18 +631,6 @@ const SectionEmpty = styled.div`
   border-radius: 6px;
 `;
 
-const EmptyState = styled.div`
-  min-height: 96px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #71717a;
-  font-size: 0.52rem;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  padding: 0 16px;
-  text-align: center;
-`;
 
 const SectionPager = styled.div`
   display: flex;

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();
+  });
+});