@rpg-engine/long-bow 0.8.199 → 0.8.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.199",
+  "version": "0.8.200",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Marketplace/BuyPanel.tsx

@@ -23,6 +23,8 @@ import { itemRarityOptions, itemTypeOptions, orderByOptions } from './filters';
 type MarketplaceBrowseMode = 'sell' | 'buy';
 
 const BUY_REQUESTS_PER_PAGE = 5;
+const MARKETPLACE_PANEL_HEIGHT = '390px';
+const MARKETPLACE_PANEL_MOBILE_HEIGHT = '250px';
 
 const formatBlueprintKey = (key: string): string => {
   const name = key.includes('/') ? key.split('/').pop()! : key;
@@ -646,8 +648,7 @@ const ItemComponentScrollWrapper = styled.div`
   flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: 390px;
-  min-height: 120px;
+  height: ${MARKETPLACE_PANEL_HEIGHT};
   width: 95%;
   margin: 1rem auto 0 auto;
   background: rgba(0, 0, 0, 0.2);
@@ -655,7 +656,7 @@ const ItemComponentScrollWrapper = styled.div`
   border-radius: 4px;
 
   @media (max-width: 950px) {
-    max-height: 250px;
+    height: ${MARKETPLACE_PANEL_MOBILE_HEIGHT};
   }
 `;
 

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

@@ -8,6 +8,10 @@ import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { BuyPanel } from '../BuyPanel';
 
+jest.mock('pixelarticons/react/SortVertical', () => ({
+  SortVertical: () => <svg data-testid="sort-icon" />,
+}));
+
 jest.mock('../../ConfirmModal', () => ({
   ConfirmModal: ({ message, onConfirm, onClose }) => (
     <div data-testid="confirm-modal">
@@ -22,6 +26,18 @@ jest.mock('../../shared/CTAButton/CTAButton', () => ({
   CTAButton: ({ label, onClick }) => <button onClick={onClick}>{label}</button>,
 }));
 
+jest.mock('../MarketplaceRows', () => ({
+  GroupedMarketplaceRow: () => <div data-testid="grouped-marketplace-row" />,
+}));
+
+jest.mock('../BuyOrderRows', () => ({
+  GroupedBuyOrderRow: ({ bestOrder, onFulfill }) => (
+    <div data-testid="grouped-buy-order-row">
+      <button onClick={() => onFulfill(bestOrder._id)}>Fulfill</button>
+    </div>
+  ),
+}));
+
 describe('BuyPanel fulfill flow', () => {
   let container;
 
@@ -35,7 +51,7 @@ describe('BuyPanel fulfill flow', () => {
     expiresAt: new Date(Date.now() + 60_000).toISOString(),
   };
 
-  const renderBuyPanel = (onFulfillBuyOrder = jest.fn()) => {
+  const renderBuyPanel = (onFulfillBuyOrder = jest.fn(), extraProps = {}) => {
     act(() => {
       ReactDOM.render(
         <BuyPanel
@@ -60,6 +76,7 @@ describe('BuyPanel fulfill flow', () => {
           openBuyOrdersPage={1}
           onOpenBuyOrdersPageChange={jest.fn()}
           onFulfillBuyOrder={onFulfillBuyOrder}
+          {...extraProps}
         />,
         container
       );
@@ -83,8 +100,16 @@ describe('BuyPanel fulfill flow', () => {
   it('waits for confirmation before calling onFulfillBuyOrder', () => {
     const onFulfillBuyOrder = renderBuyPanel();
 
+    const buyRequestsButton = Array.from(container.querySelectorAll('button')).find(
+      button => button.textContent === 'Buy Requests'
+    );
+
+    act(() => {
+      buyRequestsButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+
     const fulfillButton = Array.from(container.querySelectorAll('button')).find(
-      (button) => button.textContent === 'Fulfill'
+      button => button.textContent === 'Fulfill'
     );
 
     act(() => {
@@ -108,8 +133,16 @@ describe('BuyPanel fulfill flow', () => {
   it('does not call onFulfillBuyOrder when the confirm modal is cancelled', () => {
     const onFulfillBuyOrder = renderBuyPanel();
 
+    const buyRequestsButton = Array.from(container.querySelectorAll('button')).find(
+      button => button.textContent === 'Buy Requests'
+    );
+
+    act(() => {
+      buyRequestsButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+
     const fulfillButton = Array.from(container.querySelectorAll('button')).find(
-      (button) => button.textContent === 'Fulfill'
+      button => button.textContent === 'Fulfill'
     );
 
     act(() => {
@@ -126,4 +159,13 @@ describe('BuyPanel fulfill flow', () => {
 
     expect(onFulfillBuyOrder).not.toHaveBeenCalled();
   });
+
+  it('keeps the marketplace viewport height fixed while loading', () => {
+    renderBuyPanel(jest.fn(), { isLoading: true });
+
+    const marketContainer = container.querySelector('#MarketContainer');
+
+    expect(marketContainer).not.toBeNull();
+    expect(getComputedStyle(marketContainer).height).toBe('390px');
+  });
 });

package/src/components/Store/Store.tsx

@@ -127,13 +127,14 @@ export const Store: React.FC<IStoreProps> = ({
   onRedeemInputFocus,
   onRedeemInputBlur,
 }) => {
+  const defaultTabOrder: TabId[] = ['premium', 'packs', 'items'];
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
-    const initialTabs = (tabOrder ?? ['premium', 'packs', 'items']).filter(id => !(hidePremiumTab && id === 'premium'));
+    const initialTabs = (tabOrder ?? defaultTabOrder).filter(id => !(hidePremiumTab && id === 'premium'));
     if (defaultActiveTab && initialTabs.includes(defaultActiveTab)) {
       return defaultActiveTab;
     }
-    return hidePremiumTab ? 'items' : 'premium';
+    return initialTabs[0] ?? (hidePremiumTab ? 'items' : 'premium');
   });
   const {
     cartItems,
@@ -239,7 +240,7 @@ export const Store: React.FC<IStoreProps> = ({
 
   // Build tabs dynamically based on props
   const tabIds: TabId[] = [
-    ...(tabOrder ?? ['premium', 'packs', 'items']),
+    ...(tabOrder ?? defaultTabOrder),
     ...(onRedeem ? ['redeem' as TabId] : []),
     ...((onShowWallet || customWalletContent) ? ['wallet' as TabId] : []),
     ...((onShowHistory || customHistoryContent) ? ['history' as TabId] : [])

package/src/components/Store/__test__/Store.spec.tsx

@@ -0,0 +1,191 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { Store } from '../Store';
+
+const mockTabs = jest.fn(({ options, activeTabId }) => (
+  <div data-testid="tabs" data-active-tab-id={activeTabId}>
+    {options.map(option => (
+      <button key={option.id} type="button">
+        {option.id}
+      </button>
+    ))}
+  </div>
+));
+
+jest.mock('styled-components', () => {
+  const createTag = (tag) => () => {
+    if (tag === 'button') return ({ children, ...props }) => <button {...props}>{children}</button>;
+    return ({ children, ...props }) => <div {...props}>{children}</div>;
+  };
+  const styled = new Proxy(() => {}, {
+    get: (_target, prop) => {
+      if (prop === '__esModule') return true;
+      return createTag(prop);
+    },
+    apply: () => createTag('div'),
+  });
+  return { __esModule: true, default: styled, keyframes: () => '', css: () => '' };
+});
+
+jest.mock('../../../constants/uiColors', () => ({
+  uiColors: {
+    black: '#000',
+    white: '#fff',
+    red: '#f00',
+  },
+}));
+
+jest.mock('../../DraggableContainer', () => ({
+  DraggableContainer: ({ children }) => <div data-testid="draggable-container">{children}</div>,
+}));
+
+jest.mock('../../RPGUI/RPGUIContainer', () => ({
+  RPGUIContainerTypes: {
+    Framed: 'Framed',
+  },
+}));
+
+jest.mock('../../shared/Tabs', () => ({
+  Tabs: (props) => mockTabs(props),
+}));
+
+jest.mock('../../shared/LabelPill/LabelPill', () => ({
+  LabelPill: ({ children }) => <span>{children}</span>,
+}));
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ children, label, onClick }) => (
+    <button type="button" onClick={onClick}>
+      {children ?? label}
+    </button>
+  ),
+}));
+
+jest.mock('../CartView', () => ({
+  CartView: () => <div>Cart View</div>,
+}));
+
+jest.mock('../FeaturedBanner', () => ({
+  FeaturedBanner: () => <div>Featured Banner</div>,
+}));
+
+jest.mock('../MetadataCollector', () => ({
+  MetadataCollector: () => <div>Metadata Collector</div>,
+}));
+
+jest.mock('../sections/StoreItemsSection', () => ({
+  StoreItemsSection: () => <div>Items Section</div>,
+}));
+
+jest.mock('../sections/StorePacksSection', () => ({
+  StorePacksSection: () => <div>Packs Section</div>,
+}));
+
+jest.mock('../sections/StoreRedeemSection', () => ({
+  StoreRedeemSection: () => <div>Redeem Section</div>,
+}));
+
+jest.mock('../StoreItemDetails', () => ({
+  StoreItemDetails: () => <div>Store Item Details</div>,
+}));
+
+jest.mock('../hooks/useStoreCart', () => ({
+  useStoreCart: () => ({
+    cartItems: [],
+    handleAddToCart: jest.fn(),
+    handleRemoveFromCart: jest.fn(),
+    handlePurchase: jest.fn(),
+    openCart: jest.fn(),
+    closeCart: jest.fn(),
+    getTotalItems: () => 0,
+    getTotalPrice: () => 0,
+    isCartOpen: false,
+  }),
+}));
+
+jest.mock('pixelarticons/react/Crown', () => ({
+  Crown: () => <span>crown</span>,
+}));
+
+jest.mock('pixelarticons/react/Gift', () => ({
+  Gift: () => <span>gift</span>,
+}));
+
+jest.mock('pixelarticons/react/Package', () => ({
+  Package: () => <span>package</span>,
+}));
+
+jest.mock('pixelarticons/react/Wallet', () => ({
+  Wallet: () => <span>wallet</span>,
+}));
+
+jest.mock('react-icons/fa', () => ({
+  FaHistory: () => <span>history</span>,
+  FaShoppingCart: () => <span>cart</span>,
+  FaTicketAlt: () => <span>ticket</span>,
+  FaWallet: () => <span>wallet</span>,
+}));
+
+describe('Store', () => {
+  let container;
+
+  const baseProps = {
+    items: [],
+    packs: [],
+    atlasJSON: {},
+    atlasIMG: '',
+    onPurchase: jest.fn().mockResolvedValue(true),
+    userAccountType: 'Free',
+  };
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    mockTabs.mockClear();
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
+
+  it('activates the first tab from tabOrder when no defaultActiveTab is provided', () => {
+    act(() => {
+      ReactDOM.render(
+        <Store
+          {...baseProps}
+          hidePremiumTab
+          tabOrder={['packs', 'items', 'wallet']}
+          customWalletContent={<div>Wallet</div>}
+        />,
+        container
+      );
+    });
+
+    const tabsProps = mockTabs.mock.calls[mockTabs.mock.calls.length - 1][0];
+    expect(tabsProps.options.map(option => option.id)).toEqual(['packs', 'items', 'wallet']);
+    expect(tabsProps.activeTabId).toBe('packs');
+  });
+
+  it('skips hidden premium when picking the initial tab from tabOrder', () => {
+    act(() => {
+      ReactDOM.render(
+        <Store
+          {...baseProps}
+          hidePremiumTab
+          tabOrder={['premium', 'packs', 'items']}
+        />,
+        container
+      );
+    });
+
+    const tabsProps = mockTabs.mock.calls[mockTabs.mock.calls.length - 1][0];
+    expect(tabsProps.options.map(option => option.id)).toEqual(['packs', 'items']);
+    expect(tabsProps.activeTabId).toBe('packs');
+  });
+});

package/src/stories/Features/store/Store.stories.tsx

@@ -564,3 +564,65 @@ export const INR: Story = {
     />
   ),
 };
+
+export const WithRedeemTab: Story = {
+  render: () => (
+    <Store
+      items={duplicatedItems}
+      packs={mockPacks}
+      userAccountType={UserAccountTypes.Free}
+      onPurchase={(purchase: Partial<IPurchase>) => {
+        console.log('Purchase details:', purchase);
+        return Promise.resolve(true);
+      }}
+      onRedeem={async (code: string) => {
+        if (code === 'CHB-550-ABCDEF1234') {
+          return { success: true, dcAmount: 550 };
+        }
+
+        return { success: false, error: 'Invalid voucher code.' };
+      }}
+      customWalletContent={<DCWalletContent
+        dcBalance={1200}
+        historyData={{ transactions: [], totalPages: 1, currentPage: 1 }}
+        historyLoading={false}
+        onRequestHistory={() => {}}
+        transferLoading={false}
+        transferResult={null}
+        onSendTransfer={() => {}}
+        onClearTransferResult={() => {}}
+        onBuyDC={() => console.log('Buy DC')}
+      />}
+      customHistoryContent={<DCHistoryPanel
+        transactions={[]}
+        totalPages={1}
+        currentPage={1}
+        loading={false}
+        onRequestHistory={() => {}}
+      />}
+      onClose={() => console.log('Store closed')}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      hidePremiumTab={true}
+      tabOrder={['items', 'packs', 'redeem']}
+      defaultActiveTab="redeem"
+      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
+      onTabChange={(tab, count) => console.log('[tracking] tab_change', { tab, count })}
+      onCategoryChange={(category, count) => console.log('[tracking] category_change', { category, count })}
+      onItemView={(item, position) => console.log('[tracking] item_viewed', { key: item.key, position })}
+      onPackView={(pack, position) => console.log('[tracking] pack_viewed', { key: pack.key, position })}
+      onCartOpen={() => console.log('[tracking] cart_opened')}
+      onAddToCart={(item, qty) => console.log('[tracking] add_to_cart', { key: item.key, qty })}
+      onRemoveFromCart={(key) => console.log('[tracking] remove_from_cart', { key })}
+      onCheckoutStart={(items, total) => console.log('[tracking] checkout_start', { items, total })}
+      onPurchaseSuccess={(items, total) => console.log('[tracking] purchase_success', { items, total })}
+      onPurchaseError={(error) => console.log('[tracking] purchase_error', { error })}
+      itemBadges={{
+        'original-greater-life-potion-0': { originalPrice: 15.00 },
+        'character-name-change': { originalPrice: 15.00 },
+        'skin-character-customization': { originalPrice: 20.00 },
+        'starter-pack': { originalPrice: 9.99 }
+      }}
+    />
+  ),
+};