@rpg-engine/long-bow 0.8.219 → 0.8.221

package/src/components/Store/hooks/useStoreCart.ts

@@ -8,7 +8,6 @@ import {
 import { useEffect, useRef, useState } from 'react';
 import { useStoreMetadata } from './useStoreMetadata';
 
-// Create local cart item interface that uses IProductBlueprint
 interface ICartItem {
   item: IProductBlueprint;
   quantity: number;
@@ -26,6 +25,8 @@ interface IUseStoreCart {
   getTotalItems: () => number;
   getTotalPrice: () => number;
   isCollectingMetadata: boolean;
+  currentMetadataItem: IProductBlueprint | null;
+  resolveMetadata: (metadata: Record<string, any> | null) => void;
 }
 
 export const useStoreCart = (): IUseStoreCart => {
@@ -39,7 +40,7 @@ export const useStoreCart = (): IUseStoreCart => {
     };
   }, []);
 
-  const { collectMetadata, isCollectingMetadata } = useStoreMetadata();
+  const { collectMetadata, resolveMetadata, isCollectingMetadata, currentMetadataItem } = useStoreMetadata();
 
   const handleAddToCart = async (item: IProductBlueprint, quantity: number, preselectedMetadata?: Record<string, any>) => {
     // If metadata is already provided (from inline selection), use it directly
@@ -153,6 +154,8 @@ export const useStoreCart = (): IUseStoreCart => {
     getTotalItems,
     getTotalPrice,
     isCollectingMetadata,
+    currentMetadataItem,
+    resolveMetadata,
   };
 };
 

package/src/components/Store/hooks/useStoreMetadata.ts

@@ -1,55 +1,37 @@
-import { IProductBlueprint, MetadataType } from "@rpg-engine/shared";
-import { useState } from "react";
+import { IProductBlueprint, MetadataType } from '@rpg-engine/shared';
+import { useRef, useState } from 'react';
 
-interface IUseStoreMetadata {
-    collectMetadata: (item: IProductBlueprint) => Promise<Record<string, any> | null>;
-    isCollectingMetadata: boolean;
+export interface IUseStoreMetadata {
+  collectMetadata: (item: IProductBlueprint) => Promise<Record<string, any> | null>;
+  resolveMetadata: (metadata: Record<string, any> | null) => void;
+  isCollectingMetadata: boolean;
+  currentMetadataItem: IProductBlueprint | null;
 }
 
 export const useStoreMetadata = (): IUseStoreMetadata => {
-    const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
-    
-    const collectMetadata = async (item: IProductBlueprint): Promise<Record<string, any> | null> => {
-        if (!item.metadataType || item.metadataType !== MetadataType.CharacterSkin) {
-            return null;
-        }
+  const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
+  const [currentMetadataItem, setCurrentMetadataItem] = useState<IProductBlueprint | null>(null);
+  const resolverRef = useRef<((metadata: Record<string, any> | null) => void) | null>(null);
 
-        setIsCollectingMetadata(true);
-        
-        try {
-            // This is a promise-based approach that will be resolved when the MetadataCollector
-            // component calls the onCollect or onCancel callbacks
-            return await new Promise<Record<string, any> | null>((resolve) => {
-                // We'll store the resolver functions in a global context
-                // that will be accessible to the MetadataCollector component
-                window.__metadataResolvers = {
-                    resolve: (metadata: Record<string, any> | null) => {
-                        resolve(metadata);
-                    },
-                    item,
-                };
-            });
-        } finally {
-            setIsCollectingMetadata(false);
-            // Clean up the resolvers
-            if (window.__metadataResolvers) {
-                delete window.__metadataResolvers;
-            }
-        }
-    };
+  const collectMetadata = (item: IProductBlueprint): Promise<Record<string, any> | null> => {
+    if (!item.metadataType || item.metadataType !== MetadataType.CharacterSkin) {
+      return Promise.resolve(null);
+    }
 
-    return {
-        collectMetadata,
-        isCollectingMetadata,
-    };
-};
+    setIsCollectingMetadata(true);
+    setCurrentMetadataItem(item);
 
-// Add TypeScript declaration for the global object
-declare global {
-    interface Window {
-        __metadataResolvers?: {
-            resolve: (metadata: Record<string, any> | null) => void;
-            item: IProductBlueprint;
-        };
-    }
-}
+    return new Promise<Record<string, any> | null>((resolve) => {
+      resolverRef.current = resolve;
+    });
+  };
+
+  const resolveMetadata = (metadata: Record<string, any> | null) => {
+    resolverRef.current?.(metadata);
+    resolverRef.current = null;
+    setIsCollectingMetadata(false);
+    setCurrentMetadataItem(null);
+  };
+
+  return { collectMetadata, resolveMetadata, isCollectingMetadata, currentMetadataItem };
+};

package/src/components/Store/hooks/useStoreTabs.ts

@@ -0,0 +1,104 @@
+import { useEffect, useMemo, useState } from 'react';
+
+export type TabId = 'premium' | 'packs' | 'items' | 'characters' | 'wallet' | 'history' | 'redeem';
+
+const DEFAULT_TAB_ORDER: TabId[] = ['premium', 'packs', 'items'];
+
+interface IUseStoreTabsParams {
+  tabOrder?: TabId[];
+  defaultActiveTab?: TabId;
+  hidePremiumTab?: boolean;
+  hasCharacters?: boolean;
+  hasRedeem?: boolean;
+  hasWallet?: boolean;
+  hasHistory?: boolean;
+  onTabChange?: (tab: TabId, itemsShown: number) => void;
+  getItemCount?: (tab: TabId) => number;
+}
+
+interface IUseStoreTabs {
+  availableTabIds: TabId[];
+  activeTab: TabId;
+  setActiveTab: (tab: TabId) => void;
+  handleTabChange: (tabId: string) => void;
+}
+
+function isTabAvailable(
+  tabId: TabId,
+  params: Omit<IUseStoreTabsParams, 'defaultActiveTab' | 'onTabChange' | 'getItemCount'>
+): boolean {
+  const { hidePremiumTab, hasCharacters, hasRedeem, hasWallet, hasHistory } = params;
+
+  if (tabId === 'premium') return !hidePremiumTab;
+  if (tabId === 'characters') return !!hasCharacters;
+  if (tabId === 'redeem') return !!hasRedeem;
+  if (tabId === 'wallet') return !!hasWallet;
+  if (tabId === 'history') return !!hasHistory;
+
+  return true;
+}
+
+function getInitialActiveTab(availableTabIds: TabId[], defaultActiveTab?: TabId): TabId {
+  if (defaultActiveTab && availableTabIds.includes(defaultActiveTab)) {
+    return defaultActiveTab;
+  }
+
+  return availableTabIds[0] ?? 'items';
+}
+
+function buildAvailableTabIds(params: Omit<IUseStoreTabsParams, 'defaultActiveTab' | 'onTabChange' | 'getItemCount'>): TabId[] {
+  const { tabOrder, hasCharacters, hasRedeem, hasWallet, hasHistory } = params;
+  const ids: TabId[] = [
+    ...(tabOrder ?? DEFAULT_TAB_ORDER),
+    ...(hasCharacters ? ['characters' as TabId] : []),
+    ...(hasRedeem ? ['redeem' as TabId] : []),
+    ...(hasWallet ? ['wallet' as TabId] : []),
+    ...(hasHistory ? ['history' as TabId] : []),
+  ];
+  return Array.from(new Set(ids.filter(id => isTabAvailable(id, params))));
+}
+
+export function useStoreTabs(params: IUseStoreTabsParams): IUseStoreTabs {
+  const {
+    tabOrder,
+    hidePremiumTab,
+    hasCharacters,
+    hasRedeem,
+    hasWallet,
+    hasHistory,
+    defaultActiveTab,
+    onTabChange,
+    getItemCount,
+  } = params;
+
+  const availableTabIds = useMemo(
+    () => buildAvailableTabIds({ tabOrder, hidePremiumTab, hasCharacters, hasRedeem, hasWallet, hasHistory }),
+    [tabOrder, hidePremiumTab, hasCharacters, hasRedeem, hasWallet, hasHistory]
+  );
+
+  const [activeTab, setActiveTab] = useState<TabId>(() => getInitialActiveTab(availableTabIds, defaultActiveTab));
+  const resolvedActiveTab = availableTabIds.includes(activeTab)
+    ? activeTab
+    : getInitialActiveTab(availableTabIds, defaultActiveTab);
+
+  useEffect(() => {
+    if (resolvedActiveTab === activeTab) {
+      return;
+    }
+
+    setActiveTab(resolvedActiveTab);
+  }, [activeTab, resolvedActiveTab]);
+
+  const handleTabChange = (tabId: string) => {
+    const nextTab = tabId as TabId;
+
+    if (!availableTabIds.includes(nextTab) || nextTab === resolvedActiveTab) {
+      return;
+    }
+
+    setActiveTab(nextTab);
+    onTabChange?.(nextTab, getItemCount?.(nextTab) ?? 0);
+  };
+
+  return { availableTabIds, activeTab: resolvedActiveTab, setActiveTab, handleTabChange };
+}

package/src/components/Store/internal/packToBlueprint.ts

@@ -0,0 +1,21 @@
+import { IItemPack, IProductBlueprint, ItemRarities, ItemSubType, ItemType, PaymentCurrency, PurchaseType } from '@rpg-engine/shared';
+
+export function packToBlueprint(pack: IItemPack): IProductBlueprint {
+  return {
+    key: pack.key,
+    name: pack.title,
+    description: pack.description || '',
+    price: pack.priceUSD,
+    currency: PaymentCurrency.USD,
+    texturePath: pack.image.default || pack.image.src,
+    type: PurchaseType.Pack,
+    onPurchase: async () => {},
+    itemType: ItemType.Consumable,
+    itemSubType: ItemSubType.Other,
+    rarity: ItemRarities.Common,
+    weight: 0,
+    isStackable: false,
+    maxStackSize: 1,
+    isUsable: false,
+  };
+}

package/src/components/Store/sections/StoreItemsSection.tsx

@@ -2,10 +2,8 @@ import {
   IProductBlueprint,
   MetadataType,
   UserAccountTypes,
-  ItemType,
 } from '@rpg-engine/shared';
-import React, { useEffect, useState } from 'react';
-import { FaFilter } from 'react-icons/fa';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { StoreCharacterSkinRow } from '../StoreCharacterSkinRow';
@@ -28,12 +26,11 @@ interface IStoreItemsSectionProps {
   userAccountType?: UserAccountTypes;
   textInputItemKeys?: string[];
   itemBadges?: Record<string, { badges?: IStoreBadge[]; buyCount?: number; viewersCount?: number; saleEndsAt?: string; originalPrice?: number }>;
-  /** Fires when an item row becomes visible. Passes item and its 0-based position. */
   onItemView?: (item: IProductBlueprint, position: number) => void;
-  /** Fires when the category filter changes. Passes new category and item count. */
   onCategoryChange?: (category: string, itemsShown: number) => void;
-  /** Currency symbol to display (e.g. "$" for USD, "R$" for BRL). Defaults to "$". */
   currencySymbol?: string;
+  /** Override the auto-derived category filter pills. */
+  categoryOptions?: Array<{ value: string; label: string }>;
 }
 
 export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
@@ -48,6 +45,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   onItemView,
   onCategoryChange,
   currencySymbol = '$',
+  categoryOptions: categoryOptionsProp,
 }) => {
   const {
     searchQuery,
@@ -56,9 +54,8 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
     setSelectedCategory,
     categoryOptions,
     filteredItems,
-  } = useStoreFiltering(items);
+  } = useStoreFiltering(items, categoryOptionsProp);
 
-  // Fire category change event when the filter changes
   useEffect(() => {
     onCategoryChange?.(selectedCategory, filteredItems.length);
   }, [selectedCategory, filteredItems.length]);
@@ -66,7 +63,6 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   const renderStoreItem = (item: IProductBlueprint) => {
     const meta = itemBadges[item.key];
     const position = filteredItems.indexOf(item);
-    // Prefer a specialized character skin row when needed
     if (item.metadataType === MetadataType.CharacterSkin) {
       return (
         <StoreCharacterSkinRow
@@ -79,7 +75,6 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
         />
       );
     }
-    // Render text input row when configured for this item key
     if (textInputItemKeys.includes(item.key)) {
       return (
         <StoreItemRow
@@ -98,7 +93,6 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
         />
       );
     }
-    // Fallback to standard arrow-based row
     return (
       <StoreItemRow
         key={item.key}
@@ -116,40 +110,28 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
     );
   };
 
-  const [showFilters, setShowFilters] = useState(false);
-
   return (
     <StoreContainer>
-      <FilterBar>
-        <FilterToggle $active={showFilters} onClick={() => setShowFilters(prev => !prev)}>
-          <FaFilter size={12} />
-          <span>Filter</span>
-        </FilterToggle>
-      </FilterBar>
-
-      {showFilters && (
-        <SearchHeader>
-          <SearchBarContainer>
-            <SearchBar
-              value={searchQuery}
-              onChange={setSearchQuery}
-              placeholder="Search items..."
-            />
-          </SearchBarContainer>
-          <SegmentedToggle
-            options={categoryOptions.map(opt => ({ id: opt.value, label: opt.option }))}
-            activeId={selectedCategory}
-            onChange={id => setSelectedCategory(id as ItemType | 'all')}
+      <SearchHeader>
+        <SearchBarContainer>
+          <SearchBar
+            value={searchQuery}
+            onChange={setSearchQuery}
+            placeholder="Search items..."
           />
-        </SearchHeader>
-      )}
+        </SearchBarContainer>
+        <SegmentedToggle
+          options={categoryOptions.map(opt => ({ id: opt.value, label: opt.option }))}
+          activeId={selectedCategory}
+          onChange={setSelectedCategory}
+        />
+      </SearchHeader>
 
       <ScrollableContent
         items={filteredItems}
         renderItem={renderStoreItem}
         emptyMessage="No items match your filters."
         layout="list"
-        maxHeight="none"
       />
     </StoreContainer>
   );
@@ -166,32 +148,9 @@ const SearchHeader = styled.div`
   display: flex;
   gap: 0.5rem;
   align-items: center;
-  padding-top: 0.25rem;
+  padding: 0.25rem 1rem 0;
 `;
 
 const SearchBarContainer = styled.div`
   flex: 0.75;
 `;
-
-const FilterBar = styled.div`
-  display: flex;
-  padding-top: 0.25rem;
-`;
-
-const FilterToggle = styled.button<{ $active: boolean }>`
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  background: ${({ $active }) => ($active ? 'rgba(255,255,255,0.15)' : 'transparent')};
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  color: #fff;
-  padding: 0.3rem 0.6rem;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.55rem;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
-`;

package/src/components/Store/sections/StorePacksSection.tsx

@@ -165,7 +165,6 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
         placeholder: 'Search packs...',
       }}
       layout="list"
-      maxHeight="50vh"
     />
   );
 };

package/src/components/shared/ScrollableContent/ScrollableContent.tsx

@@ -32,7 +32,7 @@ export const ScrollableContent = <T extends unknown>({
   searchOptions,
   layout = 'list',
   gridColumns = 4,
-  maxHeight = '500px',
+  maxHeight,
 }: IScrollableContentProps<T>): React.ReactElement => {
   if (items.length === 0) {
     return <EmptyMessage>{emptyMessage}</EmptyMessage>;
@@ -117,16 +117,13 @@ const StyledDropdown = styled(Dropdown)`
   min-width: 150px;
 `;
 
-const Content = styled.div<{ $gridColumns: number; $maxHeight: string }>`
+const Content = styled.div<{ $gridColumns: number; $maxHeight?: string }>`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   flex: 1;
   padding: 1rem;
-  max-height: ${props => props.$maxHeight};
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-gutter: stable;
+  ${p => p.$maxHeight ? `max-height: ${p.$maxHeight}; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;` : ''}
 
 
   &.grid {

package/src/hooks/useStoreFiltering.spec.tsx

@@ -0,0 +1,79 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { useStoreFiltering } from './useStoreFiltering';
+
+const items = [
+  { key: 'sword', name: 'Sword', itemType: 'Weapon' },
+  { key: 'potion', name: 'Potion', itemType: 'Consumable' },
+];
+
+let hookResult;
+
+const TestComponent = ({ overrideCategoryOptions }) => {
+  hookResult = useStoreFiltering(items, overrideCategoryOptions);
+  return null;
+};
+
+describe('useStoreFiltering', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
+
+  it('prepends the All category when overrides omit it', () => {
+    act(() => {
+      ReactDOM.render(
+        <TestComponent overrideCategoryOptions={[{ value: 'Weapon', label: 'Weapons' }]} />,
+        container
+      );
+    });
+
+    expect(hookResult.selectedCategory).toBe('all');
+    expect(hookResult.categoryOptions.map(option => option.value)).toEqual(['all', 'Weapon']);
+    expect(hookResult.filteredItems).toHaveLength(2);
+  });
+
+  it('resets to a valid category when the active override disappears', () => {
+    act(() => {
+      ReactDOM.render(
+        <TestComponent
+          overrideCategoryOptions={[
+            { value: 'all', label: 'All' },
+            { value: 'Weapon', label: 'Weapons' },
+          ]}
+        />,
+        container
+      );
+    });
+
+    act(() => {
+      hookResult.setSelectedCategory('Weapon');
+    });
+
+    expect(hookResult.selectedCategory).toBe('Weapon');
+    expect(hookResult.filteredItems.map(item => item.key)).toEqual(['sword']);
+
+    act(() => {
+      ReactDOM.render(
+        <TestComponent overrideCategoryOptions={[{ value: 'Consumable', label: 'Consumables' }]} />,
+        container
+      );
+    });
+
+    expect(hookResult.selectedCategory).toBe('all');
+    expect(hookResult.categoryOptions.map(option => option.value)).toEqual(['all', 'Consumable']);
+    expect(hookResult.filteredItems).toHaveLength(2);
+  });
+});

package/src/hooks/useStoreFiltering.ts

@@ -1,24 +1,42 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { IProductBlueprint, ItemType } from '@rpg-engine/shared';
 import { IOptionsProps } from '../components/Dropdown';
 
-export const useStoreFiltering = (items: IProductBlueprint[]) => {
+export const useStoreFiltering = (
+  items: IProductBlueprint[],
+  overrideCategoryOptions?: Array<{ value: string; label: string }>
+) => {
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedCategory, setSelectedCategory] = useState<ItemType | 'all'>(
-    'all'
-  );
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
 
   const categoryOptions: IOptionsProps[] = useMemo(() => {
-    const uniqueCategories = Array.from(
-      new Set(items.map(item => item.itemType))
-    );
+    if (overrideCategoryOptions) {
+      const normalizedOptions = overrideCategoryOptions.some(opt => opt.value === 'all')
+        ? overrideCategoryOptions
+        : [{ value: 'all', label: 'All' }, ...overrideCategoryOptions];
+
+      return normalizedOptions.map((opt, index) => ({
+        id: index,
+        value: opt.value,
+        option: opt.label,
+      }));
+    }
+    const uniqueCategories = Array.from(new Set(items.map(item => item.itemType)));
     const allCategories = ['all', ...uniqueCategories] as (ItemType | 'all')[];
     return allCategories.map((category, index) => ({
       id: index,
       value: category,
       option: category === 'all' ? 'All' : category,
     }));
-  }, [items]);
+  }, [items, overrideCategoryOptions]);
+
+  useEffect(() => {
+    if (categoryOptions.some(option => option.value === selectedCategory)) {
+      return;
+    }
+
+    setSelectedCategory(categoryOptions[0]?.value ?? 'all');
+  }, [categoryOptions, selectedCategory]);
 
   const filteredItems = useMemo(() => {
     return items