@rpg-engine/long-bow 0.8.140 → 0.8.145

package/src/components/Marketplace/Marketplace.tsx

@@ -1,13 +1,30 @@
-import { IEquipmentSet, IItem, IMarketplaceItem } from '@rpg-engine/shared';
+import {
+  IEquipmentSet,
+  IItem,
+  IMarketplaceBlueprintSearchRequest,
+  IMarketplaceBlueprintSummary,
+  IMarketplaceBuyOrderItem,
+  IMarketplaceItem,
+  IMarketplaceTransaction,
+} from '@rpg-engine/shared';
+import { Clock } from 'pixelarticons/react/Clock';
+import { Settings2 } from 'pixelarticons/react/Settings2';
+import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
+import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
+import { Store } from 'pixelarticons/react/Store';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
 import { Pager } from '../Pager';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
-import { MarketplacePaymentMethod } from './MarketplaceBuyModal';
+import { Tabs } from '../shared/Tabs';
+import { BlueprintSearchModal } from './BlueprintSearchModal';
+import { BuyOrderPanel } from './BuyOrderPanel';
 import { BuyPanel } from './BuyPanel';
+import { HistoryPanel } from './HistoryPanel';
 import { ManagmentPanel } from './ManagmentPanel';
+import { MarketplacePaymentMethod } from './MarketplaceBuyModal';
+import { MarketplaceAcceptedCurrency, MarketplaceSettingsPanel } from './MarketplaceSettingsPanel';
 
 export interface IMarketPlaceProps {
   items: IMarketplaceItem[];
@@ -28,12 +45,13 @@ export interface IMarketPlaceProps {
   scale?: number;
   equipmentSet?: IEquipmentSet | null;
   onMarketPlaceItemBuy?: (marketPlaceItemId: string, paymentMethod?: MarketplacePaymentMethod) => void;
+  onFulfillBuyOrder?: (buyOrderId: string) => void;
   onMarketPlaceItemRemove?: (marketPlaceItemId: string) => void;
   availableGold: number;
   selectedItemToSell: IItem | null;
   onSelectedItemToSellRemove: (item: IItem) => void;
   onYourPanelToggle: (yourPanel: boolean) => void;
-  onAddItemToMarketplace: (item: IItem, price: number) => void;
+  onAddItemToMarketplace: (item: IItem, price: number, acceptedCurrency?: MarketplaceAcceptedCurrency) => void;
   characterId: string;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
@@ -44,12 +62,112 @@ export interface IMarketPlaceProps {
   onPageChange: (page: number) => void;
   dcBalance?: number;
   dcToGoldSwapRate?: number;
+  acceptedCurrency?: MarketplaceAcceptedCurrency;
+  onAcceptedCurrencyChange?: (value: MarketplaceAcceptedCurrency) => void;
+  onActiveTabChange?: (tab: string) => void;
+
+  // Buy Order props
+  buyOrderSelectedBlueprint?: IMarketplaceBlueprintSummary;
+  buyOrderQuantity?: number;
+  buyOrderMaxPrice?: number;
+  buyOrderSelectedRarity?: string;
+  onBuyOrderQuantityChange?: (quantity: number) => void;
+  onBuyOrderMaxPriceChange?: (price: number) => void;
+  onBuyOrderRarityChange?: (rarity: string) => void;
+  onPlaceBuyOrder?: () => void;
+  onClearBuyOrderBlueprint?: () => void;
+  yourBuyOrders?: IMarketplaceBuyOrderItem[];
+  yourBuyOrdersTotal?: number;
+  yourBuyOrdersPage?: number;
+  onYourBuyOrdersPageChange?: (page: number) => void;
+  onCancelBuyOrder?: (buyOrderId: string) => void;
+  openBuyOrders?: IMarketplaceBuyOrderItem[];
+  openBuyOrdersTotal?: number;
+  openBuyOrdersPage?: number;
+  onOpenBuyOrdersPageChange?: (page: number) => void;
+
+  // Blueprint Search props
+  onBlueprintSearch?: (request: IMarketplaceBlueprintSearchRequest) => void;
+  onBlueprintSelect?: (blueprint: IMarketplaceBlueprintSummary) => void;
+  blueprintSearchResults?: IMarketplaceBlueprintSummary[];
+  blueprintSearchTotalCount?: number;
+  blueprintSearchCurrentPage?: number;
+  blueprintSearchIsLoading?: boolean;
+
+  // History props
+  historyTransactions?: IMarketplaceTransaction[];
+  historyTotalCount?: number;
+  historyCurrentPage?: number;
+  historyItemsPerPage?: number;
+  historySelectedType?: string;
+  onHistoryTypeChange?: (type: string) => void;
+  onHistoryPageChange?: (page: number) => void;
 }
 
+type ActiveTab = 'marketplace' | 'sell' | 'buy-orders' | 'history' | 'settings';
+
 export const Marketplace: React.FC<IMarketPlaceProps> = props => {
-  const { onClose, scale, onYourPanelToggle } = props;
+  const {
+    onClose,
+    scale,
+    onYourPanelToggle,
+    onActiveTabChange,
+    acceptedCurrency: acceptedCurrencyProp,
+    onAcceptedCurrencyChange,
+    // Buy Order
+    buyOrderSelectedBlueprint,
+    buyOrderQuantity = 0,
+    buyOrderMaxPrice = 0,
+    buyOrderSelectedRarity = '',
+    onBuyOrderQuantityChange,
+    onBuyOrderMaxPriceChange,
+    onBuyOrderRarityChange,
+    onPlaceBuyOrder,
+    onClearBuyOrderBlueprint,
+    yourBuyOrders = [],
+    yourBuyOrdersTotal = 0,
+    yourBuyOrdersPage = 1,
+    onYourBuyOrdersPageChange,
+    onCancelBuyOrder,
+    // Blueprint Search
+    onBlueprintSearch,
+    onBlueprintSelect,
+    blueprintSearchResults = [],
+    blueprintSearchTotalCount = 0,
+    blueprintSearchCurrentPage = 1,
+    blueprintSearchIsLoading = false,
+    // History
+    historyTransactions = [],
+    historyTotalCount = 0,
+    historyCurrentPage = 1,
+    historyItemsPerPage = 10,
+    historySelectedType = 'All',
+    onHistoryTypeChange,
+    onHistoryPageChange,
+  } = props;
 
-  const [isYourPanel, setIsYourPanel] = useState(false);
+  const [activeTab, setActiveTab] = useState<ActiveTab>('marketplace');
+  const [acceptedCurrency, setAcceptedCurrency] = useState<MarketplaceAcceptedCurrency>(acceptedCurrencyProp ?? MarketplaceAcceptedCurrency.GoldOrDc);
+  const [isBlueprintSearchOpen, setIsBlueprintSearchOpen] = useState(false);
+
+  const handleCurrencyChange = (value: MarketplaceAcceptedCurrency) => {
+    setAcceptedCurrency(value);
+    onAcceptedCurrencyChange?.(value);
+  };
+
+  const handleTabChange = (tabId: string) => {
+    const tab = tabId as ActiveTab;
+    setActiveTab(tab);
+    onYourPanelToggle(tab === 'sell');
+    onActiveTabChange?.(tab);
+  };
+
+  const handleBlueprintSelect = (blueprint: IMarketplaceBlueprintSummary) => {
+    setIsBlueprintSearchOpen(false);
+    onBlueprintSelect?.(blueprint);
+  };
+
+  const showSharedPager = activeTab === 'sell';
 
   return (
     <DraggableContainer
@@ -61,49 +179,118 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
       cancelDrag="#MarketContainer, .rpgui-dropdown-imp, input, .empty-slot, button"
       scale={scale}
     >
-      {isYourPanel && (
-        <>
-          <ManagmentPanel {...props} />
-
-          <PagerContainer>
-            <Button
-              buttonType={ButtonTypes.RPGUIButton}
-              onPointerDown={() => {
-                onYourPanelToggle(false);
-                setIsYourPanel(false);
-              }}
-            >
-              Go to marketplace
-            </Button>
-            <Pager {...props} />
-          </PagerContainer>
-        </>
+      <Tabs
+        options={[
+          {
+            id: 'marketplace',
+            label: 'Marketplace',
+            icon: <Store width={18} height={18} />,
+          },
+          {
+            id: 'sell',
+            label: 'Sell',
+            icon: <ShoppingBag width={18} height={18} />,
+          },
+          {
+            id: 'buy-orders',
+            label: 'Buy',
+            icon: <ShoppingCart width={18} height={18} />,
+          },
+          {
+            id: 'history',
+            label: 'History',
+            icon: <Clock width={18} height={18} />,
+          },
+          {
+            id: 'settings',
+            label: 'Settings',
+            icon: <Settings2 width={18} height={18} />,
+          },
+        ]}
+        activeTabId={activeTab}
+        onTabChange={handleTabChange}
+      />
+
+      {activeTab === 'marketplace' && (
+        <BuyPanel {...props} />
+      )}
+
+      {activeTab === 'sell' && (
+        <ManagmentPanel {...props} acceptedCurrency={acceptedCurrency} />
       )}
-      {!isYourPanel && (
+
+      {activeTab === 'buy-orders' && (
         <>
-          <BuyPanel {...props} />
-
-          <PagerContainer>
-            <Button
-              buttonType={ButtonTypes.RPGUIButton}
-              onPointerDown={() => {
-                onYourPanelToggle(true);
-                setIsYourPanel(true);
-              }}
-            >
-              Go to your panel
-            </Button>
-            <Pager {...props} />
-          </PagerContainer>
+          <BuyOrderPanel
+            atlasJSON={props.atlasJSON}
+            atlasIMG={props.atlasIMG}
+            selectedBlueprint={buyOrderSelectedBlueprint}
+            onOpenBlueprintSearch={() => setIsBlueprintSearchOpen(true)}
+            onCloseDetails={onClearBuyOrderBlueprint}
+            onQuantityChange={onBuyOrderQuantityChange ?? (() => {})}
+            onMaxPriceChange={onBuyOrderMaxPriceChange ?? (() => {})}
+            onRarityChange={onBuyOrderRarityChange ?? (() => {})}
+            onPlaceBuyOrder={onPlaceBuyOrder ?? (() => {})}
+            currentQuantity={buyOrderQuantity}
+            currentMaxPrice={buyOrderMaxPrice}
+            selectedRarity={buyOrderSelectedRarity}
+            yourBuyOrders={yourBuyOrders}
+            yourBuyOrdersTotal={yourBuyOrdersTotal}
+            yourBuyOrdersPage={yourBuyOrdersPage}
+            onYourBuyOrdersPageChange={onYourBuyOrdersPageChange ?? (() => {})}
+            onCancelBuyOrder={onCancelBuyOrder ?? (() => {})}
+          />
+          <BlueprintSearchModal
+            isOpen={isBlueprintSearchOpen}
+            onClose={() => setIsBlueprintSearchOpen(false)}
+            onSelect={handleBlueprintSelect}
+            onSearch={onBlueprintSearch ?? (() => {})}
+            blueprints={blueprintSearchResults}
+            totalCount={blueprintSearchTotalCount}
+            currentPage={blueprintSearchCurrentPage}
+            isLoading={blueprintSearchIsLoading}
+            atlasJSON={props.atlasJSON}
+            atlasIMG={props.atlasIMG}
+          />
         </>
       )}
+
+      {activeTab === 'history' && (
+        <HistoryPanel
+          transactions={historyTransactions}
+          totalCount={historyTotalCount}
+          currentPage={historyCurrentPage}
+          itemsPerPage={historyItemsPerPage}
+          selectedType={historySelectedType}
+          onTypeChange={onHistoryTypeChange ?? (() => {})}
+          onPageChange={onHistoryPageChange ?? (() => {})}
+          atlasJSON={props.atlasJSON}
+          atlasIMG={props.atlasIMG}
+          dcToGoldSwapRate={props.dcToGoldSwapRate}
+        />
+      )}
+
+      {activeTab === 'settings' && (
+        <MarketplaceSettingsPanel
+          acceptedCurrency={acceptedCurrency}
+          onAcceptedCurrencyChange={handleCurrencyChange}
+        />
+      )}
+
+      {showSharedPager && (
+        <PagerContainer>
+          <Pager {...props} />
+        </PagerContainer>
+      )}
     </DraggableContainer>
   );
 };
 
 const PagerContainer = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  width: calc(100% - 30px);
+  width: 95%;
+  margin: 6px auto 0 auto;
+  padding: 4px 10px;
 `;

package/src/components/Marketplace/MarketplaceBuyModal.tsx

@@ -152,6 +152,7 @@ const CloseButton = styled.button`
   padding: 4px;
   display: flex;
   align-items: center;
+  pointer-events: auto;
 
   &:hover {
     color: #ffffff;