@rpg-engine/long-bow 0.8.197 → 0.8.199

package/package.json

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

package/src/components/Marketplace/BuyOrderRows.tsx

@@ -218,6 +218,7 @@ export const GroupedBuyOrderRow: React.FC<IGroupedBuyOrderRowProps> = ({
       mainRow={makeRow(bestOrder)}
       subRows={otherOrders.map(makeRow)}
       badgeLabel="requests"
+      metaRightInset={156}
     />
   );
 };

package/src/components/Marketplace/BuyPanel.tsx

@@ -642,9 +642,12 @@ const WrapperContainer = styled.div<{ $sell: boolean }>`
 `;
 
 const ItemComponentScrollWrapper = styled.div`
-  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
   overflow-x: hidden;
-  height: 390px;
+  max-height: 390px;
+  min-height: 120px;
   width: 95%;
   margin: 1rem auto 0 auto;
   background: rgba(0, 0, 0, 0.2);
@@ -652,7 +655,7 @@ const ItemComponentScrollWrapper = styled.div`
   border-radius: 4px;
 
   @media (max-width: 950px) {
-    height: 250px;
+    max-height: 250px;
   }
 `;
 

package/src/components/Marketplace/CharacterMarketplaceRows.tsx

@@ -1,5 +1,5 @@
 import { formatDCAmount, ICharacterListing } from '@rpg-engine/shared';
-import { Coins } from 'pixelarticons/react/Coins';
+import { Wallet } from 'pixelarticons/react/Wallet';
 import React from 'react';
 import styled from 'styled-components';
 import { ItemRowWrapper } from '../shared/ItemRowWrapper';
@@ -77,7 +77,7 @@ export const CharacterMarketplaceRows: React.FC<ICharacterMarketplaceRowsProps>
 
       <ActionSection>
         <CTAButton
-          icon={onCharacterBuy ? <Coins width={18} height={18} /> : undefined}
+          icon={onCharacterBuy ? <Wallet width={18} height={18} /> : undefined}
           label={onCharacterBuy ? 'Buy' : 'Delist'}
           disabled={disabled || isBeingBought}
           onClick={() => {

package/src/components/Marketplace/GroupedRowContainer.tsx

@@ -5,12 +5,14 @@ export interface IGroupedRowContainerProps {
   mainRow: React.ReactNode;
   subRows: React.ReactNode[];
   badgeLabel?: string;
+  metaRightInset?: number;
 }
 
 export const GroupedRowContainer: React.FC<IGroupedRowContainerProps> = ({
   mainRow,
   subRows,
   badgeLabel = 'offers',
+  metaRightInset = 120,
 }) => {
   const [expanded, setExpanded] = useState(false);
   const hasMultiple = subRows.length > 0;
@@ -21,7 +23,7 @@ export const GroupedRowContainer: React.FC<IGroupedRowContainerProps> = ({
       <GroupHeader $clickable={hasMultiple} onClick={hasMultiple ? () => setExpanded(e => !e) : undefined}>
         {mainRow}
         {hasMultiple && (
-          <GroupMeta>
+          <GroupMeta $rightInset={metaRightInset}>
             <OfferBadge>{totalCount} {badgeLabel}</OfferBadge>
             <Chevron $expanded={expanded}>&#9656;</Chevron>
           </GroupMeta>
@@ -48,15 +50,18 @@ const GroupHeader = styled.div<{ $clickable: boolean }>`
   overflow-x: hidden;
 `;
 
-const GroupMeta = styled.div`
+const GroupMeta = styled.div<{ $rightInset: number }>`
   position: absolute;
-  right: 100px;
+  right: ${({ $rightInset }) => `${$rightInset}px`};
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
+  padding-left: 10px;
+  background: linear-gradient(to left, rgba(25, 23, 23, 0.85), rgba(25, 23, 23, 0));
   pointer-events: none;
+  z-index: 1;
 `;
 
 const OfferBadge = styled.span`

package/src/components/Marketplace/ManagmentPanel.tsx

@@ -1,5 +1,5 @@
 import { formatDCAmount, goldToDC, IEquipmentSet, IItem, IMarketplaceItem, MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
-import { Coins } from 'pixelarticons/react/Coins';
+import { Wallet } from 'pixelarticons/react/Wallet';
 import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -185,7 +185,7 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
               </BalanceRow>
             )}
             <SmallCTAButton
-              icon={<Coins width={18} height={18} />}
+              icon={<Wallet width={18} height={18} />}
               label="Withdraw Gold"
               disabled={availableGold === 0}
               onClick={() => availableGold > 0 && onMoneyWithdraw()}

package/src/components/Marketplace/Marketplace.tsx

@@ -9,7 +9,7 @@ import {
   IMarketplaceItem,
   IMarketplaceTransaction,
 } from '@rpg-engine/shared';
-import { Clock } from 'pixelarticons/react/Clock';
+import { DateTime } from 'pixelarticons/react/DateTime';
 import { Settings2 } from 'pixelarticons/react/Settings2';
 import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
@@ -262,7 +262,7 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
           {
             id: 'history',
             label: 'History',
-            icon: <Clock width={18} height={18} />,
+            icon: <DateTime width={18} height={18} />,
           },
           ...(showWalletTab && walletProps
             ? [

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -6,7 +6,7 @@ import {
   IMarketplaceItem,
   MarketplaceAcceptedCurrency,
 } from '@rpg-engine/shared';
-import { Coins } from 'pixelarticons/react/Coins';
+import { Wallet } from 'pixelarticons/react/Wallet';
 import { Delete } from 'pixelarticons/react/Delete';
 import React from 'react';
 import styled from 'styled-components';
@@ -134,7 +134,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
 
       <ActionSection>
         <CTAButton
-          icon={onMarketPlaceItemBuy ? <Coins width={18} height={18} /> : <Delete width={18} height={18} />}
+          icon={onMarketPlaceItemBuy ? <Wallet width={18} height={18} /> : <Delete width={18} height={18} />}
           label={onMarketPlaceItemBuy ? 'Buy' : 'Remove'}
           disabled={disabled}
           onClick={() => {
@@ -201,6 +201,7 @@ export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
       mainRow={makeRow(bestListing)}
       subRows={otherListings.map(makeRow)}
       badgeLabel="offers"
+      metaRightInset={132}
     />
   );
 };

package/src/components/Store/Store.tsx

@@ -1,10 +1,10 @@
 import { IItemPack, IPurchase, IProductBlueprint, ItemRarities, ItemSubType, ItemType, UserAccountTypes, PaymentCurrency, PurchaseType } from '@rpg-engine/shared';
-import { Box } from 'pixelarticons/react/Box';
 import { Crown } from 'pixelarticons/react/Crown';
 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,6 +123,9 @@ export const Store: React.FC<IStoreProps> = ({
   onPurchaseError,
   onBuyDC,
   currencySymbol = '$',
+  onRedeem,
+  onRedeemInputFocus,
+  onRedeemInputBlur,
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
@@ -230,6 +240,7 @@ export const Store: React.FC<IStoreProps> = ({
   // Build tabs dynamically based on props
   const tabIds: TabId[] = [
     ...(tabOrder ?? ['premium', 'packs', 'items']),
+    ...(onRedeem ? ['redeem' as TabId] : []),
     ...((onShowWallet || customWalletContent) ? ['wallet' as TabId] : []),
     ...((onShowHistory || customHistoryContent) ? ['history' as TabId] : [])
   ];
@@ -318,7 +329,7 @@ export const Store: React.FC<IStoreProps> = ({
     items: {
       id: 'items',
       title: 'Items',
-      icon: <Box width={18} height={18} />,
+      icon: <Package width={18} height={18} />,
       content: (
         <StoreItemsSection
           items={filteredItems.items}
@@ -335,6 +346,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__/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);
+  });
+});