@rpg-engine/long-bow 0.8.141 → 0.8.145

package/src/components/Marketplace/BuyPanel.tsx

@@ -1,4 +1,10 @@
-import { goldToDC, IEquipmentSet, IMarketplaceItem } from '@rpg-engine/shared';
+import {
+  goldToDC,
+  IEquipmentSet,
+  IMarketplaceBuyOrderItem,
+  IMarketplaceItem,
+  MarketplaceBuyOrderStatus,
+} from '@rpg-engine/shared';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { AiFillCaretRight } from 'react-icons/ai';
 import { SortVertical } from 'pixelarticons/react/SortVertical';
@@ -6,10 +12,22 @@ import styled from 'styled-components';
 import { ConfirmModal } from '../ConfirmModal';
 import { Dropdown } from '../Dropdown';
 import { Input } from '../Input';
+import { SegmentedToggle } from '../shared/SegmentedToggle';
+import { Pager } from '../Pager';
+import { BuyOrderRow } from './BuyOrderRows';
 import { MarketplaceBuyModal, MarketplacePaymentMethod } from './MarketplaceBuyModal';
 import { GroupedMarketplaceRow } from './MarketplaceRows';
 import { itemRarityOptions, itemTypeOptions, orderByOptions } from './filters';
 
+type MarketplaceBrowseMode = 'all' | 'sell' | 'buy';
+
+const BUY_REQUESTS_PER_PAGE = 5;
+
+const formatBlueprintKey = (key: string): string => {
+  const name = key.includes('/') ? key.split('/').pop()! : key;
+  return name.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+};
+
 export interface IBuyPanelProps {
   items: IMarketplaceItem[];
   atlasJSON: any;
@@ -29,12 +47,20 @@ export interface IBuyPanelProps {
   scale?: number;
   equipmentSet?: IEquipmentSet | null;
   onMarketPlaceItemBuy?: (marketPlaceItemId: string, paymentMethod?: MarketplacePaymentMethod) => void;
+  onFulfillBuyOrder?: (buyOrderId: string) => void;
   characterId: string;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
+  totalItems: number;
   currentPage: number;
+  itemsPerPage: number;
+  onPageChange: (page: number) => void;
   dcBalance?: number;
   dcToGoldSwapRate?: number;
+  openBuyOrders?: IMarketplaceBuyOrderItem[];
+  openBuyOrdersTotal?: number;
+  openBuyOrdersPage?: number;
+  onOpenBuyOrdersPageChange?: (page: number) => void;
 }
 
 export const BuyPanel: React.FC<IBuyPanelProps> = ({
@@ -50,15 +76,25 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   onChangePriceInput,
   equipmentSet,
   onMarketPlaceItemBuy,
+  onFulfillBuyOrder,
   characterId,
   enableHotkeys,
   disableHotkeys,
+  totalItems,
   currentPage,
+  itemsPerPage,
+  onPageChange,
   dcBalance = 0,
   dcToGoldSwapRate = 0,
+  openBuyOrders = [],
+  openBuyOrdersTotal = 0,
+  openBuyOrdersPage = 1,
+  onOpenBuyOrdersPageChange,
 }) => {
   const [name, setName] = useState('');
   const [showFilters, setShowFilters] = useState(false);
+  const [browseMode, setBrowseMode] = useState<MarketplaceBrowseMode>('all');
+  const [selectedRarity, setSelectedRarity] = useState('');
   const [mainLevel, setMainLevel] = useState<
     [number | undefined, number | undefined]
   >([undefined, undefined]);
@@ -70,12 +106,13 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
     undefined,
   ]);
   const [buyingItemId, setBuyingItemId] = useState<string | null>(null);
+  const [fulfillingBuyOrderId, setFulfillingBuyOrderId] = useState<string | null>(null);
 
   const itemsContainer = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     itemsContainer.current?.scrollTo(0, 0);
-  }, [currentPage]);
+  }, [browseMode, currentPage, openBuyOrdersPage]);
 
   const buyingItem = buyingItemId
     ? items.find(i => i._id === buyingItemId)
@@ -103,6 +140,40 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
     });
   }, [items]);
 
+  const visibleBuyOrders = useMemo(() => {
+    const normalizedName = name.trim().toLowerCase();
+
+    return openBuyOrders.filter(order => {
+      if (order.status !== MarketplaceBuyOrderStatus.Active) {
+        return false;
+      }
+
+      if (normalizedName && !formatBlueprintKey(order.itemBlueprintKey).toLowerCase().includes(normalizedName)) {
+        return false;
+      }
+
+      if (selectedRarity && selectedRarity !== 'Rarity' && order.itemRarity !== selectedRarity) {
+        return false;
+      }
+
+      if (price[0] !== undefined && order.maxPrice < price[0]) {
+        return false;
+      }
+
+      if (price[1] !== undefined && order.maxPrice > price[1]) {
+        return false;
+      }
+
+      return true;
+    });
+  }, [name, openBuyOrders, price, selectedRarity]);
+
+  const showSellSection = browseMode === 'all' || browseMode === 'sell';
+  const showBuySection = browseMode === 'all' || browseMode === 'buy';
+  const hasVisibleContent =
+    (showSellSection && groupedItems.length > 0) ||
+    (showBuySection && visibleBuyOrders.length > 0);
+
   return (
     <>
       {buyingItemId && buyingItem && hasDCBalance && (
@@ -129,202 +200,306 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
           message="Are you sure you want to buy this item?"
         />
       )}
-      <InputWrapper>
-        <p>SEARCH</p>
-        <Input
-          onChange={e => {
-            setName(e.target.value);
-            onChangeNameInput(e.target.value);
+      {fulfillingBuyOrderId && (
+        <ConfirmModal
+          onClose={setFulfillingBuyOrderId.bind(null, null)}
+          onConfirm={() => {
+            onFulfillBuyOrder?.(fulfillingBuyOrderId);
+            setFulfillingBuyOrderId(null);
+            enableHotkeys?.();
           }}
-          value={name}
-          placeholder="Enter name..."
-          onBlur={enableHotkeys}
-          onFocus={disableHotkeys}
-          className="search-input"
+          message="Try to fulfill this buy request with a matching item from your inventory or depot?"
         />
-        <button className="filter-btn" onClick={() => setShowFilters(!showFilters)}>
+      )}
+      <ToolbarRow>
+        <BrowseModeRow>
+          <SegmentedToggle
+            activeId={browseMode}
+            onChange={value => setBrowseMode(value as MarketplaceBrowseMode)}
+            options={[
+              { id: 'all', label: 'All' },
+              { id: 'sell', label: 'Sell Offers' },
+              { id: 'buy', label: 'Buy Requests' },
+            ]}
+          />
+        </BrowseModeRow>
+
+        <SearchField>
+          <Input
+            onChange={e => {
+              setName(e.target.value);
+              onChangeNameInput(e.target.value);
+            }}
+            value={name}
+            placeholder="Search items or requests..."
+            onBlur={enableHotkeys}
+            onFocus={disableHotkeys}
+            className="search-input"
+          />
+        </SearchField>
+
+        <FilterButton
+          type="button"
+          $active={showFilters}
+          onClick={() => setShowFilters(!showFilters)}
+          aria-label="Toggle marketplace filters"
+        >
           <SortVertical width={18} height={18} />
-        </button>
-      </InputWrapper>
+        </FilterButton>
+      </ToolbarRow>
 
-      <OptionsWrapper showFilters={showFilters}>
-        {showFilters && (
-          <FilterInputsWrapper>
-            <div>
-              <p>Main level</p>
-            <div className="input-group">
-              <Input
-                onChange={e => {
-                  setMainLevel([Number(e.target.value), mainLevel[1]]);
-                  onChangeMainLevelInput([Number(e.target.value), mainLevel[1]]);
-                }}
-                placeholder="Min"
-                type="number"
-                min={0}
-                onBlur={enableHotkeys}
-                onFocus={disableHotkeys}
-              />
-              <AiFillCaretRight className="separator-icon" />
-              <Input
-                onChange={e => {
-                  setMainLevel([mainLevel[0], Number(e.target.value)]);
-                  onChangeMainLevelInput([mainLevel[0], Number(e.target.value)]);
-                }}
-                placeholder="Max"
-                type="number"
-                min={0}
-                onBlur={enableHotkeys}
-                onFocus={disableHotkeys}
+      {showFilters && (
+        <OptionsWrapper showFilters={showFilters}>
+            <WrapperContainer>
+              <StyledDropdown
+                options={itemTypeOptions}
+                onChange={onChangeType}
+                width="100%"
               />
-            </div>
-          </div>
-
-          <div>
-            <p>Secondary level</p>
-            <div className="input-group">
-              <Input
-                onChange={e => {
-                  setSecondaryLevel([Number(e.target.value), secondaryLevel[1]]);
-                  onChangeSecondaryLevelInput([
-                    Number(e.target.value),
-                    secondaryLevel[1],
-                  ]);
+              <StyledDropdown
+                options={itemRarityOptions}
+                onChange={value => {
+                  setSelectedRarity(value);
+                  onChangeRarity(value);
                 }}
-                placeholder="Min"
-                type="number"
-                min={0}
-                onBlur={enableHotkeys}
-                onFocus={disableHotkeys}
+                width="100%"
               />
-              <AiFillCaretRight className="separator-icon" />
-              <Input
-                onChange={e => {
-                  setSecondaryLevel([secondaryLevel[0], Number(e.target.value)]);
-                  onChangeSecondaryLevelInput([
-                    secondaryLevel[0],
-                    Number(e.target.value),
-                  ]);
-                }}
-                placeholder="Max"
-                type="number"
-                min={0}
-                onBlur={enableHotkeys}
-                onFocus={disableHotkeys}
+              <StyledDropdown
+                options={orderByOptions}
+                onChange={onChangeOrder}
+                width="100%"
               />
+            </WrapperContainer>
+
+            <FilterInputsWrapper>
+              <div>
+                <p>Main level</p>
+              <div className="input-group">
+                <Input
+                  onChange={e => {
+                    setMainLevel([Number(e.target.value), mainLevel[1]]);
+                    onChangeMainLevelInput([Number(e.target.value), mainLevel[1]]);
+                  }}
+                  placeholder="Min"
+                  type="number"
+                  min={0}
+                  onBlur={enableHotkeys}
+                  onFocus={disableHotkeys}
+                />
+                <AiFillCaretRight className="separator-icon" />
+                <Input
+                  onChange={e => {
+                    setMainLevel([mainLevel[0], Number(e.target.value)]);
+                    onChangeMainLevelInput([mainLevel[0], Number(e.target.value)]);
+                  }}
+                  placeholder="Max"
+                  type="number"
+                  min={0}
+                  onBlur={enableHotkeys}
+                  onFocus={disableHotkeys}
+                />
+              </div>
             </div>
-          </div>
-
-          <div>
-            <p>Price</p>
-            <div className="input-group">
-              <Input
-                onChange={e => {
-                  setPrice([Number(e.target.value), price[1]]);
-                  onChangePriceInput([Number(e.target.value), price[1]]);
-                }}
-                placeholder="Min"
-                type="number"
-                min={0}
-                onBlur={enableHotkeys}
-                onFocus={disableHotkeys}
-              />
-              <AiFillCaretRight className="separator-icon" />
-              <Input
-                onChange={e => {
-                  setPrice([price[0], Number(e.target.value)]);
-                  onChangePriceInput([price[0], Number(e.target.value)]);
-                }}
-                placeholder="Max"
-                type="number"
-                min={0}
-                onBlur={enableHotkeys}
-                onFocus={disableHotkeys}
-              />
+
+            <div>
+              <p>Secondary level</p>
+              <div className="input-group">
+                <Input
+                  onChange={e => {
+                    setSecondaryLevel([Number(e.target.value), secondaryLevel[1]]);
+                    onChangeSecondaryLevelInput([
+                      Number(e.target.value),
+                      secondaryLevel[1],
+                    ]);
+                  }}
+                  placeholder="Min"
+                  type="number"
+                  min={0}
+                  onBlur={enableHotkeys}
+                  onFocus={disableHotkeys}
+                />
+                <AiFillCaretRight className="separator-icon" />
+                <Input
+                  onChange={e => {
+                    setSecondaryLevel([secondaryLevel[0], Number(e.target.value)]);
+                    onChangeSecondaryLevelInput([
+                      secondaryLevel[0],
+                      Number(e.target.value),
+                    ]);
+                  }}
+                  placeholder="Max"
+                  type="number"
+                  min={0}
+                  onBlur={enableHotkeys}
+                  onFocus={disableHotkeys}
+                />
+              </div>
             </div>
-          </div>
-        </FilterInputsWrapper>
-        )}
 
-        <WrapperContainer>
-          <StyledDropdown
-            options={itemTypeOptions}
-            onChange={onChangeType}
-            width="100%"
-          />
-          <StyledDropdown
-            options={itemRarityOptions}
-            onChange={onChangeRarity}
-            width="100%"
-          />
-          <StyledDropdown
-            options={orderByOptions}
-            onChange={onChangeOrder}
-            width="100%"
-          />
-        </WrapperContainer>
-      </OptionsWrapper>
+            <div>
+              <p>Price</p>
+              <div className="input-group">
+                <Input
+                  onChange={e => {
+                    setPrice([Number(e.target.value), price[1]]);
+                    onChangePriceInput([Number(e.target.value), price[1]]);
+                  }}
+                  placeholder="Min"
+                  type="number"
+                  min={0}
+                  onBlur={enableHotkeys}
+                  onFocus={disableHotkeys}
+                />
+                <AiFillCaretRight className="separator-icon" />
+                <Input
+                  onChange={e => {
+                    setPrice([price[0], Number(e.target.value)]);
+                    onChangePriceInput([price[0], Number(e.target.value)]);
+                  }}
+                  placeholder="Max"
+                  type="number"
+                  min={0}
+                  onBlur={enableHotkeys}
+                  onFocus={disableHotkeys}
+                />
+              </div>
+            </div>
+          </FilterInputsWrapper>
+        </OptionsWrapper>
+      )}
 
       <ItemComponentScrollWrapper id="MarketContainer" ref={itemsContainer}>
-        {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}
-          />
-        ))}
+        {!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>
+            )}
+          </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>
+            )}
+          </MarketSection>
+        )}
       </ItemComponentScrollWrapper>
     </>
   );
 };
 
-const InputWrapper = styled.div`
+const ToolbarRow = styled.div`
   width: 95%;
-  display: flex !important;
-  justify-content: flex-start;
+  display: grid;
+  grid-template-columns: auto minmax(220px, 1fr) auto;
+  gap: 10px;
   align-items: center;
   margin: 0 auto 10px auto;
   background: rgba(0, 0, 0, 0.2);
   padding: 8px 12px;
   border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.05);
 
-  p {
-    width: auto;
-    margin-right: 20px;
-    font-size: 0.7rem;
-    color: #ccc;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 0px;
+  @media (max-width: 950px) {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      'toggle toggle'
+      'search filter';
   }
+`;
+
+const SearchField = styled.div`
+  min-width: 0;
 
   input.search-input {
     height: 10px;
-    flex-grow: 1;
+    width: 100%;
+  }
+`;
+
+const FilterButton = styled.button<{ $active: boolean }>`
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  border: 1px solid ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.55)' : 'rgba(255, 255, 255, 0.08)')};
+  background: ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.14)' : 'rgba(255, 255, 255, 0.03)')};
+  color: ${({ $active }) => ($active ? '#f59e0b' : '#ccc')};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+
+  &:hover {
+    color: #f59e0b;
+    border-color: rgba(245, 158, 11, 0.45);
   }
+`;
 
-  .filter-btn {
-    background: transparent;
-    border: none;
-    color: #ccc;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 5px;
-    margin-left: 10px;
-    transition: color 0.15s;
+const BrowseModeRow = styled.div`
+  display: flex;
+  align-items: center;
+  min-width: 0;
 
-    &:hover {
-      color: #f59e0b;
-    }
+  @media (max-width: 950px) {
+    grid-area: toggle;
   }
 `;
 
@@ -401,6 +576,71 @@ const ItemComponentScrollWrapper = styled.div`
   }
 `;
 
+const MarketSection = styled.div`
+  padding: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+const SectionHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+
+const SectionTitle = styled.p`
+  margin: 0;
+  font-size: 0.58rem;
+  color: #f3f4f6;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+const SectionMeta = styled.span`
+  font-size: 0.44rem;
+  color: #8a8a8a;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+const SectionEmpty = styled.div`
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #71717a;
+  font-size: 0.48rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px dashed rgba(255, 255, 255, 0.08);
+  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;
+  justify-content: center;
+  margin-top: 10px;
+`;
+
 const StyledDropdown = styled(Dropdown)`
   margin: 0px !important;
   width: 100% !important;