@rpg-engine/long-bow 0.8.198 → 0.8.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.198",
+  "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

@@ -4,7 +4,7 @@ import { Gift } from 'pixelarticons/react/Gift';
 import { Package } from 'pixelarticons/react/Package';
 import { Wallet } from 'pixelarticons/react/Wallet';
 import React, { ReactNode, useMemo, useState } from 'react';
-import { FaHistory, FaShoppingCart, FaWallet } from 'react-icons/fa';
+import { FaHistory, FaShoppingCart, FaTicketAlt, FaWallet } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
@@ -18,10 +18,11 @@ import { useStoreCart } from './hooks/useStoreCart';
 import { MetadataCollector } from './MetadataCollector';
 import { StoreItemsSection } from './sections/StoreItemsSection';
 import { StorePacksSection } from './sections/StorePacksSection';
+import { StoreRedeemSection } from './sections/StoreRedeemSection';
 import { StoreItemDetails } from './StoreItemDetails';
 
 // Define TabId union type for tab identifiers
-type TabId = 'premium' | 'packs' | 'items' | 'wallet' | 'history';
+type TabId = 'premium' | 'packs' | 'items' | 'wallet' | 'history' | 'redeem';
 
 // Define IStoreProps locally as a workaround
 export interface IStoreProps {
@@ -74,6 +75,12 @@ export interface IStoreProps {
   onBuyDC?: () => void;
   /** Currency symbol to display (e.g. "$" for USD, "R$" for BRL). Defaults to "$". */
   currencySymbol?: string;
+  /** Callback to redeem a voucher code. When provided, the Redeem tab is shown. */
+  onRedeem?: (code: string) => Promise<{ success: boolean; dcAmount?: number; error?: string }>;
+  /** Called when the voucher code input gains focus. */
+  onRedeemInputFocus?: () => void;
+  /** Called when the voucher code input loses focus. */
+  onRedeemInputBlur?: () => void;
 }
 
 export type { IFeaturedItem };
@@ -116,14 +123,18 @@ export const Store: React.FC<IStoreProps> = ({
   onPurchaseError,
   onBuyDC,
   currencySymbol = '$',
+  onRedeem,
+  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,
@@ -229,7 +240,8 @@ 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] : [])
   ];
@@ -335,6 +347,18 @@ export const Store: React.FC<IStoreProps> = ({
         />
       ),
     },
+    redeem: {
+      id: 'redeem',
+      title: 'Redeem',
+      icon: <FaTicketAlt size={16} />,
+      content: onRedeem ? (
+        <StoreRedeemSection
+          onRedeem={onRedeem}
+          onInputFocus={onRedeemInputFocus}
+          onInputBlur={onRedeemInputBlur}
+        />
+      ) : null,
+    },
     wallet: {
       id: 'wallet',
       title: walletLabel ?? 'Wallet',

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/components/Store/__test__/StoreRedeemSection.spec.tsx

@@ -0,0 +1,232 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act, Simulate } from 'react-dom/test-utils';
+import { StoreRedeemSection } from '../sections/StoreRedeemSection';
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ label, onClick, disabled }) => (
+    <button onClick={onClick} disabled={disabled} data-testid="cta-button">
+      {label}
+    </button>
+  ),
+}));
+
+jest.mock('styled-components', () => {
+  const createTag = (tag) => () => {
+    if (tag === 'input') return (props) => <input {...props} />;
+    if (tag === 'h3') return ({ children }) => <h3>{children}</h3>;
+    if (tag === 'p') return ({ children }) => <p>{children}</p>;
+    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('react-icons/fa', () => ({
+  FaCheckCircle: () => <span>check</span>,
+  FaExclamationCircle: () => <span>error</span>,
+  FaTicketAlt: () => <span>ticket</span>,
+}));
+
+jest.mock('../../../constants/uiColors', () => ({
+  uiColors: {
+    white: '#fff',
+    lightGray: '#888',
+    green: '#4CAF50',
+    red: '#D04648',
+  },
+}));
+
+const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe('StoreRedeemSection', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
+
+  it('should render input and redeem button', () => {
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={jest.fn()} />,
+        container
+      );
+    });
+    expect(container.querySelector('input')).toBeTruthy();
+    expect(container.textContent).toContain('Redeem Code');
+  });
+
+  it('should disable button when input is empty', () => {
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={jest.fn()} />,
+        container
+      );
+    });
+    const button = container.querySelector('[data-testid="cta-button"]');
+    expect(button.disabled).toBe(true);
+  });
+
+  it('should enable button when input has text', () => {
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={jest.fn()} />,
+        container
+      );
+    });
+    const input = container.querySelector('input');
+    act(() => {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      ).set;
+      nativeInputValueSetter.call(input, 'ABC-123');
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+    const button = container.querySelector('[data-testid="cta-button"]');
+    expect(button.disabled).toBe(false);
+  });
+
+  it('should show success with DC amount on valid redeem', async () => {
+    const onRedeem = jest.fn().mockResolvedValue({ success: true, dcAmount: 550 });
+
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={onRedeem} />,
+        container
+      );
+    });
+
+    const input = container.querySelector('input');
+    act(() => {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      ).set;
+      nativeInputValueSetter.call(input, 'CHB-550-ABCDEF1234');
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    const button = container.querySelector('[data-testid="cta-button"]');
+    await act(async () => {
+      button.click();
+      await flushPromises();
+    });
+
+    expect(onRedeem).toHaveBeenCalledWith('CHB-550-ABCDEF1234');
+    expect(container.textContent).toContain('Code Redeemed');
+    expect(container.textContent).toContain('+550 DC');
+  });
+
+  it('should show error on failed redeem', async () => {
+    const onRedeem = jest.fn().mockResolvedValue({ success: false, error: 'Invalid voucher code.' });
+
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={onRedeem} />,
+        container
+      );
+    });
+
+    const input = container.querySelector('input');
+    act(() => {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      ).set;
+      nativeInputValueSetter.call(input, 'INVALID-CODE');
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    const button = container.querySelector('[data-testid="cta-button"]');
+    await act(async () => {
+      button.click();
+      await flushPromises();
+    });
+
+    expect(container.textContent).toContain('Invalid voucher code.');
+    expect(container.textContent).toContain('Try Again');
+  });
+
+  it('should reset to idle when "Redeem Another" is clicked after success', async () => {
+    const onRedeem = jest.fn().mockResolvedValue({ success: true, dcAmount: 100 });
+
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={onRedeem} />,
+        container
+      );
+    });
+
+    const input = container.querySelector('input');
+    act(() => {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      ).set;
+      nativeInputValueSetter.call(input, 'CODE123');
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    const submitBtn = container.querySelector('[data-testid="cta-button"]');
+    await act(async () => {
+      submitBtn.click();
+      await flushPromises();
+    });
+
+    expect(container.textContent).toContain('Redeem Another');
+
+    const redeemAnotherBtn = Array.from(container.querySelectorAll('[data-testid="cta-button"]'))
+      .find(b => b.textContent.includes('Redeem Another'));
+
+    act(() => { redeemAnotherBtn.click(); });
+
+    expect(container.querySelector('input')).toBeTruthy();
+    expect(container.textContent).toContain('Redeem Code');
+  });
+
+  it('should call onInputFocus when input is focused', () => {
+    const onInputFocus = jest.fn();
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={jest.fn()} onInputFocus={onInputFocus} />,
+        container
+      );
+    });
+
+    const input = container.querySelector('input');
+    act(() => { Simulate.focus(input); });
+    expect(onInputFocus).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onInputBlur when input loses focus', () => {
+    const onInputBlur = jest.fn();
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={jest.fn()} onInputBlur={onInputBlur} />,
+        container
+      );
+    });
+
+    const input = container.querySelector('input');
+    act(() => { Simulate.blur(input); });
+    expect(onInputBlur).toHaveBeenCalledTimes(1);
+  });
+});