@rpg-engine/long-bow 0.8.199 → 0.8.202

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.199",
+  "version": "0.8.202",
   "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/NPCDialog/NPCDialog.tsx

@@ -18,6 +18,7 @@ export interface INPCDialogProps {
   text?: string;
   type: NPCDialogType;
   imagePath?: string;
+  isTranslated?: boolean;
   onClose?: () => void;
   isQuestionDialog?: boolean;
   answers?: IQuestionDialogAnswer[];
@@ -29,6 +30,7 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
   type,
   onClose,
   imagePath,
+  isTranslated = false,
   isQuestionDialog = false,
   questions,
   answers,
@@ -70,6 +72,7 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
               <NPCDialogText
                 type={type}
                 text={text || 'No text provided.'}
+                isTranslated={isTranslated}
                 onClose={() => {
                   if (onClose) {
                     onClose();

package/src/components/NPCDialog/NPCDialogText.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { NPCDialogType } from '../..';
+import type { NPCDialogType } from './NPCDialog';
 import { IS_MOBILE_OR_TABLET } from '../../constants/uiDevices';
 import { chunkString } from '../../libs/StringHelpers';
 import { DynamicText } from '../typography/DynamicText';
@@ -13,6 +13,7 @@ interface IProps {
   onEndStep?: () => void;
   onStartStep?: () => void;
   type?: NPCDialogType;
+  isTranslated?: boolean;
 }
 
 export const NPCDialogText: React.FC<IProps> = ({
@@ -21,6 +22,7 @@ export const NPCDialogText: React.FC<IProps> = ({
   onEndStep,
   onStartStep,
   type,
+  isTranslated = false,
 }) => {
   const windowSize = useRef([window.innerWidth, window.innerHeight]);
   function maxCharacters(width: number) {
@@ -43,6 +45,11 @@ export const NPCDialogText: React.FC<IProps> = ({
   const textChunks = chunkString(text, maxCharacters(windowSize.current[0]));
 
   const [chunkIndex, setChunkIndex] = useState<number>(0);
+
+  useEffect(() => {
+    setChunkIndex(0);
+  }, [text]);
+
   const onHandleSpacePress = (event: KeyboardEvent) => {
     if (event.code === 'Space') {
       goToNextStep();
@@ -70,24 +77,37 @@ export const NPCDialogText: React.FC<IProps> = ({
     false
   );
 
+  useEffect(() => {
+    setShowGoNextIndicator(isTranslated);
+
+    if (isTranslated) {
+      onStartStep && onStartStep();
+      onEndStep && onEndStep();
+    }
+  }, [chunkIndex, isTranslated, onEndStep, onStartStep, text]);
+
   return (
     <Container>
-      <DynamicText
-        text={textChunks?.[chunkIndex] || ''}
-        onFinish={() => {
-          setShowGoNextIndicator(true);
-
-          onEndStep && onEndStep();
-        }}
-        onStart={() => {
-          setShowGoNextIndicator(false);
-
-          onStartStep && onStartStep();
-        }}
-      />
+      {isTranslated ? (
+        <TextContainer>{textChunks?.[chunkIndex] || ''}</TextContainer>
+      ) : (
+        <DynamicText
+          text={textChunks?.[chunkIndex] || ''}
+          onFinish={() => {
+            setShowGoNextIndicator(true);
+
+            onEndStep && onEndStep();
+          }}
+          onStart={() => {
+            setShowGoNextIndicator(false);
+
+            onStartStep && onStartStep();
+          }}
+        />
+      )}
       {showGoNextIndicator && (
         <PressSpaceIndicator
-          right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}
+          right={type === 'TextOnly' ? '1rem' : '10.5rem'}
           src={IS_MOBILE_OR_TABLET ? pressButtonGif : pressSpaceGif}
           onPointerDown={() => {
             goToNextStep();
@@ -100,6 +120,14 @@ export const NPCDialogText: React.FC<IProps> = ({
 
 const Container = styled.div``;
 
+const TextContainer = styled.p`
+  font-size: 0.7rem !important;
+  color: white;
+  text-shadow: 1px 1px 0px #000000;
+  letter-spacing: 1.2px;
+  word-break: normal;
+`;
+
 interface IPressSpaceIndicatorProps {
   right: string;
 }

package/src/components/NPCDialog/__test__/NPCDialogText.spec.tsx

@@ -0,0 +1,68 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { NPCDialogText } from '../NPCDialogText';
+
+jest.mock('../img/press-button.gif', () => 'press-button.gif');
+jest.mock('../img/space.gif', () => 'space.gif');
+
+describe('NPCDialogText', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+    jest.useRealTimers();
+    jest.clearAllMocks();
+  });
+
+  it('renders the full translated text immediately and skips the typewriter delay', () => {
+    act(() => {
+      ReactDOM.render(
+        <NPCDialogText
+          text="Translated NPC dialog"
+          type={'TextOnly'}
+          isTranslated
+          onClose={jest.fn()}
+        />,
+        container
+      );
+    });
+
+    expect(container.textContent).toContain('Translated NPC dialog');
+    expect(container.querySelectorAll('img')).toHaveLength(1);
+  });
+
+  it('keeps the typewriter effect for untranslated text until the animation finishes', () => {
+    act(() => {
+      ReactDOM.render(
+        <NPCDialogText
+          text="Hi"
+          type={'TextOnly'}
+          onClose={jest.fn()}
+        />,
+        container
+      );
+    });
+
+    expect(container.textContent).toBe('');
+    expect(container.querySelectorAll('img')).toHaveLength(0);
+
+    act(() => {
+      jest.advanceTimersByTime(100);
+    });
+
+    expect(container.textContent).toContain('Hi');
+    expect(container.querySelectorAll('img')).toHaveLength(1);
+  });
+});

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 }
+      }}
+    />
+  ),
+};