@rpg-engine/long-bow 0.8.140 → 0.8.145

package/src/components/Marketplace/BuyPanel.tsx

@@ -1,14 +1,33 @@
-import { goldToDC, IEquipmentSet, IMarketplaceItem } from '@rpg-engine/shared';
-import React, { useEffect, useRef, useState } from 'react';
+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';
 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 { MarketplaceRows } from './MarketplaceRows';
+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;
@@ -28,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> = ({
@@ -49,14 +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]);
@@ -68,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)
@@ -83,6 +122,58 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   const getDCEquivalentPrice = (goldPrice: number): number =>
     dcToGoldSwapRate > 0 ? goldToDC(goldPrice) : 0;
 
+  const groupedItems = useMemo(() => {
+    const groups = new Map<string, IMarketplaceItem[]>();
+    for (const entry of items) {
+      const key = entry.item.key;
+      if (!groups.has(key)) {
+        groups.set(key, []);
+      }
+      groups.get(key)!.push(entry);
+    }
+    return Array.from(groups.values()).map(group => {
+      const sorted = [...group].sort((a, b) => a.price - b.price);
+      return {
+        bestListing: sorted[0],
+        otherListings: sorted.slice(1),
+      };
+    });
+  }, [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 && (
@@ -109,205 +200,362 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
           message="Are you sure you want to buy this item?"
         />
       )}
-      <InputWrapper>
-        <p>Search By Name</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}
+          message="Try to fulfill this buy request with a matching item from your inventory or depot?"
         />
-      </InputWrapper>
-
-      <OptionsWrapper>
-        <FilterInputsWrapper>
-          <div>
-            <p>Main level</p>
-            <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 />
-            <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>
-            <p>Secondary level</p>
-            <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 />
-            <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>
-            <p>Price</p>
-            <Input
-              onChange={e => {
-                setPrice([Number(e.target.value), price[1]]);
-                onChangePriceInput([Number(e.target.value), price[1]]);
-              }}
-              placeholder="Min"
-              type="number"
-              min={0}
-              className="big-input"
-              onBlur={enableHotkeys}
-              onFocus={disableHotkeys}
-            />
-            <AiFillCaretRight />
-            <Input
-              onChange={e => {
-                setPrice([price[0], Number(e.target.value)]);
-                onChangePriceInput([price[0], Number(e.target.value)]);
-              }}
-              placeholder="Max"
-              type="number"
-              min={0}
-              className="big-input"
-              onBlur={enableHotkeys}
-              onFocus={disableHotkeys}
-            />
-          </div>
-        </FilterInputsWrapper>
-
-        <WrapperContainer>
-          <StyledDropdown
-            options={itemTypeOptions}
-            onChange={onChangeType}
-            width="95%"
-          />
-          <StyledDropdown
-            options={itemRarityOptions}
-            onChange={onChangeRarity}
-            width="95%"
+      )}
+      <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' },
+            ]}
           />
-          <StyledDropdown
-            options={orderByOptions}
-            onChange={onChangeOrder}
-            width="100%"
+        </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"
           />
-        </WrapperContainer>
-      </OptionsWrapper>
+        </SearchField>
+
+        <FilterButton
+          type="button"
+          $active={showFilters}
+          onClick={() => setShowFilters(!showFilters)}
+          aria-label="Toggle marketplace filters"
+        >
+          <SortVertical width={18} height={18} />
+        </FilterButton>
+      </ToolbarRow>
+
+      {showFilters && (
+        <OptionsWrapper showFilters={showFilters}>
+            <WrapperContainer>
+              <StyledDropdown
+                options={itemTypeOptions}
+                onChange={onChangeType}
+                width="100%"
+              />
+              <StyledDropdown
+                options={itemRarityOptions}
+                onChange={value => {
+                  setSelectedRarity(value);
+                  onChangeRarity(value);
+                }}
+                width="100%"
+              />
+              <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>
+              <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>
+              <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}>
-        {items?.map(({ item, price, _id, owner }, index) => (
-          <MarketplaceRows
-            key={`${item.key}_${index}`}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            item={item}
-            itemPrice={price}
-            dcEquivalentPrice={dcToGoldSwapRate > 0 ? getDCEquivalentPrice(price) : undefined}
-            equipmentSet={equipmentSet}
-            onMarketPlaceItemBuy={setBuyingItemId.bind(null, _id)}
-            disabled={owner === characterId}
-          />
-        ))}
+        {!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: auto;
+  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.05);
 
-  p {
-    width: auto;
-    margin-right: 20px;
+  @media (max-width: 950px) {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      'toggle toggle'
+      'search filter';
   }
+`;
+
+const SearchField = styled.div`
+  min-width: 0;
 
-  input {
-    width: 68%;
+  input.search-input {
     height: 10px;
+    width: 100%;
   }
 `;
 
-const OptionsWrapper = styled.div`
-  width: 100%;
-  height: 100px;
+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);
+  }
 `;
 
-const FilterInputsWrapper = styled.div`
-  width: 95%;
+const BrowseModeRow = styled.div`
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 10px;
-  margin-left: 10px;
-  gap: 5px;
+  min-width: 0;
+
+  @media (max-width: 950px) {
+    grid-area: toggle;
+  }
+`;
+
+const OptionsWrapper = styled.div<{ showFilters: boolean }>`
+  width: 95%;
+  margin: 0 auto;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ showFilters }) => (showFilters ? '15px' : '0')};
+`;
+
+const FilterInputsWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
   color: white;
-  flex-wrap: wrap;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
 
   p {
-    width: auto;
     margin: 0;
+    font-size: 0.65rem;
+    color: #aaa;
+    text-transform: uppercase;
+    letter-spacing: 1px;
   }
 
-  input {
-    width: 75px;
-    height: 10px;
+  .input-group {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    
+    input {
+      width: 100%;
+      height: 10px;
+    }
   }
 
-  .big-input {
-    width: 130px;
+  .separator-icon {
+    flex-shrink: 0;
+    color: rgba(255, 255, 255, 0.3);
   }
 `;
 
 const WrapperContainer = styled.div`
   display: grid;
-  grid-template-columns: 40% 30% 30%;
-  justify-content: space-between;
-  width: calc(100% - 40px);
-  margin-left: 10px;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 15px;
 
   .rpgui-content .rpgui-dropdown-imp-header {
     padding: 0px 10px 0 !important;
@@ -317,15 +565,83 @@ const WrapperContainer = styled.div`
 const ItemComponentScrollWrapper = styled.div`
   overflow-y: scroll;
   height: 390px;
-  width: 100%;
-  margin-top: 1rem;
+  width: 95%;
+  margin: 1rem auto 0 auto;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
 
   @media (max-width: 950px) {
     height: 250px;
   }
 `;
 
+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: 3px !important;
-  width: 170px !important;
+  margin: 0px !important;
+  width: 100% !important;
 `;