@rpg-engine/long-bow 0.8.218 → 0.8.220

package/package.json

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

package/src/components/Store/CartView.tsx

@@ -260,14 +260,17 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: 1rem;
+  height: 100%;
   padding: 1rem;
+  overflow: hidden;
+  box-sizing: border-box;
 `;
 
 const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-shrink: 0;
 `;
 
 const Title = styled.h2`
@@ -293,8 +296,10 @@ const CartItems = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
-  max-height: 250px;
+  margin: 1rem 0;
   padding-right: 0.5rem;
 
   &::-webkit-scrollbar {

package/src/components/Store/MetadataCollector.tsx

@@ -1,48 +1,68 @@
-import { MetadataType } from "@rpg-engine/shared";
-import React, { useEffect } from "react";
-import { CharacterSkinSelectionModal } from "../Character/CharacterSkinSelectionModal";
+import { MetadataType } from '@rpg-engine/shared';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { CharacterSkinSelectionModal } from '../Character/CharacterSkinSelectionModal';
 
 export interface IMetadataCollectorProps {
-    metadataType: MetadataType;
-    config: Record<string, any>;
-    onCollect: (metadata: Record<string, any>) => void;
-    onCancel: () => void;
+  metadataType: MetadataType;
+  config: Record<string, any>;
+  onCollect: (metadata: Record<string, any>) => void;
+  onCancel: () => void;
 }
 
 export const MetadataCollector: React.FC<IMetadataCollectorProps> = ({
-    metadataType,
-    config,
-    onCollect,
-    onCancel,
+  metadataType,
+  config,
+  onCollect,
+  onCancel,
 }) => {
-    // Make sure we clean up if unmounted without collecting
-    useEffect(() => {
-        return () => {
-            // If we're unmounting without explicitly collecting or canceling,
-            // make sure to call onCancel to prevent any hanging promises
-            if (window.__metadataResolvers) {
-                onCancel();
-            }
-        };
-    }, [onCancel]);
-
-    // Use string comparison instead of direct property access
-    if (metadataType === 'CharacterSkin') {
-        return (
-            <CharacterSkinSelectionModal
-                isOpen={true}
-                onClose={onCancel}
-                onConfirm={(selectedSkin: any) => onCollect({ selectedSkin })}
-                availableCharacters={config.availableCharacters || []}
-                atlasJSON={config.atlasJSON}
-                atlasIMG={config.atlasIMG}
-                initialSelectedSkin={config.initialSelectedSkin}
-            />
-        );
-    } else {
-        console.warn(`No collector implemented for metadata type: ${metadataType}`);
-        // Auto-cancel for unhandled types to prevent hanging promises
-        setTimeout(onCancel, 0);
-        return null;
+  const isPendingRef = useRef(true);
+
+  const finalize = useCallback((callback: () => void) => {
+    if (!isPendingRef.current) {
+      return;
+    }
+
+    isPendingRef.current = false;
+    callback();
+  }, []);
+
+  const handleCollect = useCallback((metadata: Record<string, any>) => {
+    finalize(() => onCollect(metadata));
+  }, [finalize, onCollect]);
+
+  const handleCancel = useCallback(() => {
+    finalize(onCancel);
+  }, [finalize, onCancel]);
+
+  useEffect(() => {
+    return () => {
+      handleCancel();
+    };
+  }, [handleCancel]);
+
+  useEffect(() => {
+    if (metadataType === MetadataType.CharacterSkin) {
+      return undefined;
     }
+
+    const timer = window.setTimeout(handleCancel, 0);
+    return () => window.clearTimeout(timer);
+  }, [handleCancel, metadataType]);
+
+  if (metadataType === MetadataType.CharacterSkin) {
+    return (
+      <CharacterSkinSelectionModal
+        isOpen
+        onClose={handleCancel}
+        onConfirm={(selectedSkin: any) => handleCollect({ selectedSkin })}
+        availableCharacters={config.availableCharacters || []}
+        atlasJSON={config.atlasJSON}
+        atlasIMG={config.atlasIMG}
+        initialSelectedSkin={config.initialSelectedSkin}
+      />
+    );
+  }
+
+  console.warn(`No collector implemented for metadata type: ${metadataType}`);
+  return null;
 };

package/src/components/Store/Store.tsx

@@ -1,4 +1,4 @@
-import { IItemPack, IPurchase, IProductBlueprint, ItemRarities, ItemSubType, ItemType, UserAccountTypes, PaymentCurrency, PurchaseType } from '@rpg-engine/shared';
+import { IItemPack, IPurchase, IProductBlueprint, UserAccountTypes } from '@rpg-engine/shared';
 import { Crown } from 'pixelarticons/react/Crown';
 import { Gift } from 'pixelarticons/react/Gift';
 import { Package } from 'pixelarticons/react/Package';
@@ -9,22 +9,20 @@ import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
-import { Tabs } from '../shared/Tabs';
-import { LabelPill } from '../shared/LabelPill/LabelPill';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { LabelPill } from '../shared/LabelPill/LabelPill';
 import { CartView } from './CartView';
 import { FeaturedBanner, IFeaturedItem } from './FeaturedBanner';
+import { packToBlueprint } from './internal/packToBlueprint';
 import { useStoreCart } from './hooks/useStoreCart';
+import { TabId, useStoreTabs } from './hooks/useStoreTabs';
 import { MetadataCollector } from './MetadataCollector';
+import { StoreHeader } from './StoreHeader';
 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' | 'characters' | 'wallet' | 'history' | 'redeem';
-
-// Define IStoreProps locally as a workaround
 export interface IStoreProps {
   items: IProductBlueprint[];
   packs?: IItemPack[];
@@ -47,47 +45,33 @@ export interface IStoreProps {
   customCharactersContent?: React.ReactNode;
   customWalletContent?: React.ReactNode;
   customHistoryContent?: React.ReactNode;
-  /** When true the store renders full-screen (useful on mobile). */
   fullScreen?: boolean;
-  /** Override the DraggableContainer width (e.g. "90vw"). Defaults to "1000px". */
-  containerWidth?: string;
-  /** Override the DraggableContainer height (e.g. "80vh"). Defaults to "80vh" so the inner scroll area is bounded. */
-  containerHeight?: string;
   packsBadge?: string;
   featuredItems?: IFeaturedItem[];
   onQuickBuy?: (item: IProductBlueprint, quantity?: number) => void;
   itemBadges?: Record<string, { badges?: import('./StoreBadges').IStoreBadge[]; buyCount?: number; viewersCount?: number; saleEndsAt?: string; originalPrice?: number }>;
   packBadges?: Record<string, { badges?: import('./StoreBadges').IStoreBadge[]; buyCount?: number; viewersCount?: number; saleEndsAt?: string; originalPrice?: number }>;
-  /** Fires when an item row becomes visible (on mount). Useful for store_item_viewed analytics. */
   onItemView?: (item: IProductBlueprint, position: number) => void;
-  /** Fires when a pack row becomes visible (on mount). Useful for pack_viewed analytics. */
   onPackView?: (pack: IItemPack, position: number) => void;
-  /** Fires when the active store tab changes (e.g. 'items', 'packs', 'premium'). */
   onTabChange?: (tab: string, itemsShown: number) => void;
-  /** Fires when the category filter changes in the items tab. */
   onCategoryChange?: (category: string, itemsShown: number) => void;
-  /** Fires when the cart is opened. */
   onCartOpen?: () => void;
-  /** Fires when any item or pack is added to the cart. */
   onAddToCart?: (item: IProductBlueprint, quantity: number) => void;
-  /** Fires when an item is removed from the cart. */
   onRemoveFromCart?: (itemKey: string) => void;
-  /** Fires when the user taps "Pay" — before the purchase resolves. */
   onCheckoutStart?: (items: Array<{ key: string; name: string; quantity: number }>, total: number) => void;
-  /** Fires after a successful purchase. */
   onPurchaseSuccess?: (items: Array<{ key: string; name: string; quantity: number }>, total: number) => void;
-  /** Fires when a purchase fails. */
   onPurchaseError?: (error: string) => void;
-  /** Called when the DC nudge in CartView is tapped — open the DC purchase flow. */
   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;
+  /** Override the modal width. Defaults to '1000px'. */
+  width?: string;
+  /** Override the modal height. Defaults to 'min(85vh, 900px)'. */
+  height?: string;
+  /** Override the item category filter pills. Auto-derived from item.itemType when omitted. */
+  itemCategoryOptions?: Array<{ value: string; label: string }>;
 }
 
 export type { IFeaturedItem };
@@ -114,8 +98,6 @@ export const Store: React.FC<IStoreProps> = ({
   customWalletContent,
   customHistoryContent,
   fullScreen = false,
-  containerWidth,
-  containerHeight,
   packsTabLabel = 'Packs',
   packsBadge,
   featuredItems,
@@ -137,23 +119,12 @@ export const Store: React.FC<IStoreProps> = ({
   onRedeem,
   onRedeemInputFocus,
   onRedeemInputBlur,
+  width = '1000px',
+  height = 'min(85vh, 900px)',
+  itemCategoryOptions,
 }) => {
-  const defaultTabOrder: TabId[] = ['premium', 'packs', 'items'];
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
-  const [activeTab, setActiveTab] = useState<TabId>(() => {
-    const allTabIds: TabId[] = [
-      ...(tabOrder ?? defaultTabOrder),
-      ...(customCharactersContent ? ['characters' as TabId] : []),
-      ...(onRedeem ? ['redeem' as TabId] : []),
-      ...((onShowWallet || customWalletContent) ? ['wallet' as TabId] : []),
-      ...((onShowHistory || customHistoryContent) ? ['history' as TabId] : []),
-    ];
-    const validTabs = Array.from(new Set(allTabIds.filter(id => !(hidePremiumTab && id === 'premium'))));
-    if (defaultActiveTab && validTabs.includes(defaultActiveTab)) {
-      return defaultActiveTab;
-    }
-    return validTabs[0] ?? (hidePremiumTab ? 'items' : 'premium');
-  });
+
   const {
     cartItems,
     handleAddToCart,
@@ -164,9 +135,32 @@ export const Store: React.FC<IStoreProps> = ({
     getTotalItems,
     getTotalPrice,
     isCartOpen,
+    isCollectingMetadata,
+    currentMetadataItem,
+    resolveMetadata,
   } = useStoreCart();
-  const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
-  const [currentMetadataItem, setCurrentMetadataItem] = useState<IProductBlueprint | null>(null);
+
+  const filteredItems = useMemo(() => ({
+    items: items,
+    premium: items.filter(item => (item.requiredAccountType?.length ?? 0) > 0),
+  }), [items]);
+
+  const { availableTabIds, activeTab, handleTabChange } = useStoreTabs({
+    tabOrder,
+    defaultActiveTab,
+    hidePremiumTab,
+    hasCharacters: !!customCharactersContent,
+    hasRedeem: !!onRedeem,
+    hasWallet: !!(onShowWallet || customWalletContent),
+    hasHistory: !!(onShowHistory || customHistoryContent),
+    onTabChange: onTabChange as ((tab: TabId, itemsShown: number) => void) | undefined,
+    getItemCount: (tab) => {
+      if (tab === 'items') return filteredItems.items.length;
+      if (tab === 'premium') return filteredItems.premium.length;
+      if (tab === 'packs') return packs.length;
+      return 0;
+    },
+  });
 
   const handleOpenCart = () => {
     openCart();
@@ -184,87 +178,14 @@ export const Store: React.FC<IStoreProps> = ({
   };
 
   const handleAddPackToCart = (pack: IItemPack, quantity: number = 1) => {
-    const packItem: IProductBlueprint = {
-      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,
-    };
-    handleAddToCart(packItem, quantity);
-    onAddToCart?.(packItem, quantity);
-  };
-
-  const filterItems = (
-    itemsToFilter: IProductBlueprint[],
-    type: 'items' | 'premium'
-  ): IProductBlueprint[] => {
-    return itemsToFilter.filter(item => {
-      if (type === 'premium') {
-        return item.requiredAccountType?.length ?? 0 > 0;
-      }
-      return true;
-    });
-  };
-
-  const filteredItems = useMemo(
-    () => ({
-      items: filterItems(items, 'items'),
-      premium: filterItems(items, 'premium'),
-    }),
-    [items]
-  );
-
-  const handleMetadataCollected = (metadata: Record<string, any>) => {
-    if (currentMetadataItem && window.__metadataResolvers) {
-      // Resolve the promise in the useStoreMetadata hook
-      window.__metadataResolvers.resolve(metadata);
-      
-      // Reset the metadata collection state
-      setCurrentMetadataItem(null);
-      // Removed unused setPendingMetadataQuantity call
-    }
+    const bp = packToBlueprint(pack);
+    handleAddToCart(bp, quantity);
+    onAddToCart?.(bp, quantity);
   };
 
-  const handleMetadataCancel = () => {
-    if (window.__metadataResolvers) {
-      // Resolve with null to indicate cancellation
-      window.__metadataResolvers.resolve(null);
-    }
-    
-    // Reset the metadata collection state
-    setCurrentMetadataItem(null);
-    // Removed unused setPendingMetadataQuantity call
-    setIsCollectingMetadata(false);
-  };
-
-  if (loading) {
-    return <LoadingMessage>Loading...</LoadingMessage>;
-  }
-
-  if (error) {
-    return <ErrorMessage>{error}</ErrorMessage>;
-  }
-
-  // Build tabs dynamically based on props
-  const tabIds: TabId[] = [
-    ...(tabOrder ?? defaultTabOrder),
-    ...(customCharactersContent ? ['characters' as TabId] : []),
-    ...(onRedeem ? ['redeem' as TabId] : []),
-    ...((onShowWallet || customWalletContent) ? ['wallet' as TabId] : []),
-    ...((onShowHistory || customHistoryContent) ? ['history' as TabId] : [])
-  ];
-  const availableTabIds: TabId[] = Array.from(new Set(tabIds.filter(id => !(hidePremiumTab && id === 'premium'))));
+  const makePackQuickBuy = onQuickBuy
+    ? (pack: IItemPack, qty?: number) => onQuickBuy(packToBlueprint(pack), qty)
+    : undefined;
 
   const tabsMap: Record<string, { id: TabId; title: ReactNode; icon: ReactNode; content: ReactNode }> = {
     premium: {
@@ -275,26 +196,7 @@ export const Store: React.FC<IStoreProps> = ({
         <StorePacksSection
           packs={packs.filter(pack => pack.priceUSD >= 9.99)}
           onAddToCart={handleAddPackToCart}
-          onQuickBuy={onQuickBuy ? (pack, qty) => {
-            const bp: IProductBlueprint = {
-              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,
-            };
-            onQuickBuy(bp, qty);
-          } : undefined}
+          onQuickBuy={makePackQuickBuy}
           onSelectPack={setSelectedPack}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
@@ -317,26 +219,7 @@ export const Store: React.FC<IStoreProps> = ({
         <StorePacksSection
           packs={hidePremiumTab ? packs : packs.filter(pack => pack.priceUSD < 9.99)}
           onAddToCart={handleAddPackToCart}
-          onQuickBuy={onQuickBuy ? (pack, qty) => {
-            const bp: IProductBlueprint = {
-              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,
-            };
-            onQuickBuy(bp, qty);
-          } : undefined}
+          onQuickBuy={makePackQuickBuy}
           onSelectPack={setSelectedPack}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
@@ -354,7 +237,7 @@ export const Store: React.FC<IStoreProps> = ({
         <StoreItemsSection
           items={filteredItems.items}
           onAddToCart={handleAddToCartTracked}
-          onQuickBuy={onQuickBuy ? (item, qty, _meta) => onQuickBuy(item, qty) : undefined}
+          onQuickBuy={onQuickBuy ? (item, qty) => onQuickBuy(item, qty) : undefined}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
           userAccountType={userAccountType}
@@ -363,6 +246,7 @@ export const Store: React.FC<IStoreProps> = ({
           onItemView={onItemView}
           onCategoryChange={onCategoryChange}
           currencySymbol={currencySymbol}
+          categoryOptions={itemCategoryOptions}
         />
       ),
     },
@@ -406,33 +290,32 @@ export const Store: React.FC<IStoreProps> = ({
     },
   };
 
+  if (loading) return <LoadingMessage>Loading...</LoadingMessage>;
+  if (error) return <ErrorMessage>{error}</ErrorMessage>;
+
   return (
     <DraggableContainer
-      title="Store"
       onCloseButton={onClose}
-      width={containerWidth ?? "1000px"}
+      width={width}
       minWidth="700px"
-      height={containerHeight ?? "80vh"}
+      height={height}
       type={RPGUIContainerTypes.Framed}
-      cancelDrag="[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails'], .close-button"
+      cancelDrag=".store-scroll-area, [class*='CartView'], [class*='StoreItemDetails'], .close-button"
       isFullScreen={fullScreen}
     >
-      {isCollectingMetadata && currentMetadataItem && currentMetadataItem.metadataType ? (
+      {isCollectingMetadata && currentMetadataItem?.metadataType ? (
         <MetadataCollector
           metadataType={currentMetadataItem.metadataType}
           config={currentMetadataItem.metadataConfig || {}}
-          onCollect={handleMetadataCollected}
-          onCancel={handleMetadataCancel}
+          onCollect={resolveMetadata}
+          onCancel={() => resolveMetadata(null)}
         />
       ) : isCartOpen ? (
         <CartView
           cartItems={cartItems}
           onRemoveFromCart={handleRemoveFromCartTracked}
           onClose={closeCart}
-          onPurchase={async () => {
-            handleCartPurchase(onPurchase);
-            return true;
-          }}
+          onPurchase={async () => { handleCartPurchase(onPurchase); return true; }}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
           onCheckoutStart={onCheckoutStart}
@@ -454,7 +337,7 @@ export const Store: React.FC<IStoreProps> = ({
           currencySymbol={currencySymbol}
         />
       ) : (
-        <Container>
+        <Container className="store-scroll-area">
           {featuredItems && featuredItems.length > 0 && (
             <FeaturedBanner
               items={featuredItems}
@@ -466,62 +349,23 @@ export const Store: React.FC<IStoreProps> = ({
               }}
               onQuickBuy={onQuickBuy ? item => {
                 const blueprint = items.find(bp => bp.key === item.key);
-                if (blueprint) onQuickBuy(blueprint, 1);
-                else {
+                if (blueprint) {
+                  onQuickBuy(blueprint, 1);
+                } else {
                   const pack = packs.find(p => p.key === item.key);
-                  if (pack) {
-                    const packBlueprint: IProductBlueprint = {
-                      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,
-                    };
-                    onQuickBuy(packBlueprint, 1);
-                  }
+                  if (pack) onQuickBuy(packToBlueprint(pack), 1);
                 }
               } : undefined}
             />
           )}
           <MainContent>
-            <HeaderRow>
-              <TabsFlexWrapper>
-                <Tabs
-                  options={availableTabIds.map(id => ({ id, label: tabsMap[id]?.title, icon: tabsMap[id]?.icon }))}
-                  activeTabId={activeTab}
-                  onTabChange={(tabId) => {
-                    const nextTab = tabId as TabId;
-                    setActiveTab(nextTab);
-                    if (onTabChange) {
-                      const itemCount = nextTab === 'items' ? filteredItems.items.length
-                        : nextTab === 'premium' ? filteredItems.premium.length
-                        : nextTab === 'packs' ? packs.length
-                        : 0;
-                      onTabChange(nextTab, itemCount);
-                    }
-                  }}
-                />
-              </TabsFlexWrapper>
-              <CartButtonWrapper>
-                <CTAButton
-                  icon={<FaShoppingCart />}
-                  onClick={handleOpenCart}
-                />
-                {getTotalItems() > 0 && (
-                  <CartBadge>{getTotalItems()}</CartBadge>
-                )}
-              </CartButtonWrapper>
-            </HeaderRow>
+            <StoreHeader
+              tabs={availableTabIds.map(id => ({ id, label: tabsMap[id]?.title, icon: tabsMap[id]?.icon }))}
+              activeTabId={activeTab}
+              onTabChange={handleTabChange}
+              cartItemCount={getTotalItems()}
+              onOpenCart={handleOpenCart}
+            />
             <TabContent>
               {tabsMap[activeTab]?.content}
             </TabContent>
@@ -530,7 +374,7 @@ export const Store: React.FC<IStoreProps> = ({
             <Footer>
               <CTAButton
                 icon={<FaShoppingCart />}
-                label={`Checkout · ${getTotalItems()} item${getTotalItems() !== 1 ? 's' : ''} (${currencySymbol}${getTotalPrice().toFixed(2)})`}
+                label={`Proceed to Checkout (${currencySymbol}${getTotalPrice().toFixed(2)})`}
                 onClick={handleOpenCart}
                 fullWidth
               />
@@ -546,50 +390,12 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: calc(100% - 48px);
+  height: 100%;
   gap: 0.5rem;
   position: relative;
   overflow: hidden;
 `;
 
-const HeaderRow = styled.div`
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  margin-bottom: 0.25rem;
-  padding-top: 10px;
-  padding-right: 12px;
-`;
-
-const TabsFlexWrapper = styled.div`
-  flex: 1;
-  min-width: 0;
-`;
-
-const CartButtonWrapper = styled.div`
-  position: relative;
-  flex-shrink: 0;
-`;
-
-const CartBadge = styled.div`
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  background: #ef4444; /* red */
-  color: white;
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.5rem;
-  padding: 4px;
-  border-radius: 50%;
-  border: 2px solid #000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  min-height: 16px;
-  box-sizing: content-box;
-`;
-
 const MainContent = styled.div`
   flex: 1;
   display: flex;
@@ -604,7 +410,7 @@ const TabContent = styled.div`
 `;
 
 const Footer = styled.div`
-  padding: 0.5rem;
+  padding: 1rem;
   border-top: 2px solid #f59e0b;
   background: rgba(0, 0, 0, 0.2);
   flex-shrink: 0;
@@ -616,7 +422,6 @@ const TabLabelWithBadge = styled.span`
   gap: 5px;
 `;
 
-
 const LoadingMessage = styled.div`
   text-align: center;
   color: ${uiColors.white};