@rpg-engine/long-bow 0.8.179 → 0.8.181

package/package.json

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

package/src/components/Store/CartView.tsx

@@ -34,6 +34,8 @@ export interface ICartViewProps {
   onPurchaseSuccess?: (items: Array<{ key: string; name: string; quantity: number }>, total: number) => void;
   /** Fires when a purchase fails */
   onPurchaseError?: (error: string) => void;
+  /** Currency symbol to display (e.g. "$" for USD, "R$" for BRL). Defaults to "$". */
+  currencySymbol?: string;
 }
 
 const MetadataDisplay: React.FC<{
@@ -70,13 +72,14 @@ export const CartView: React.FC<ICartViewProps> = ({
   onCheckoutStart,
   onPurchaseSuccess,
   onPurchaseError,
+  currencySymbol = '$',
 }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [purchasedItems, setPurchasedItems] = useState<ICartItem[] | null>(null);
 
   const total = cartItems.reduce(
-    (sum, cartItem) => sum + cartItem.item.price * cartItem.quantity,
+    (sum, cartItem) => sum + ((cartItem.item as any).regionalPrice ?? cartItem.item.price) * cartItem.quantity,
     0
   );
 
@@ -175,12 +178,12 @@ export const CartView: React.FC<ICartViewProps> = ({
                     <CartMeta>{cartItem.metadata.inputValue}</CartMeta>
                   )}
                   <ItemInfo>
-                    <span>${formatPrice(cartItem.item.price)}</span>
+                    <span>{currencySymbol}{formatPrice((cartItem.item as any).regionalPrice ?? cartItem.item.price)}</span>
                     <span>×</span>
                     <span>{cartItem.quantity}</span>
                     <span>=</span>
                     <span>
-                      ${formatPrice(cartItem.item.price * cartItem.quantity)}
+                      {currencySymbol}{formatPrice(((cartItem.item as any).regionalPrice ?? cartItem.item.price) * cartItem.quantity)}
                     </span>
                   </ItemInfo>
                   
@@ -220,7 +223,7 @@ export const CartView: React.FC<ICartViewProps> = ({
           <OrderSummaryLabel>Order Summary</OrderSummaryLabel>
           <TotalRow>
             <span>Subtotal:</span>
-            <span>${formatPrice(total)}</span>
+            <span>{currencySymbol}{formatPrice(total)}</span>
           </TotalRow>
           {dcTotal > 0 && (
             <TotalRow>
@@ -230,7 +233,7 @@ export const CartView: React.FC<ICartViewProps> = ({
           )}
           <TotalRow $isTotal>
             <span>Total:</span>
-            <span>${formatPrice(total)}</span>
+            <span>{currencySymbol}{formatPrice(total)}</span>
           </TotalRow>
           {paymentMethodLabel && (
             <PaymentMethodRow>
@@ -242,7 +245,7 @@ export const CartView: React.FC<ICartViewProps> = ({
         </TotalInfo>
         <CTAButton
           icon={<FaShoppingBag />}
-          label={isLoading ? 'Processing...' : `Pay $${formatPrice(total)}`}
+          label={isLoading ? 'Processing...' : `Pay ${currencySymbol}${formatPrice(total)}`}
           onClick={handlePurchase}
           fullWidth
           disabled={cartItems.length === 0 || isLoading}

package/src/components/Store/Store.tsx

@@ -72,6 +72,8 @@ export interface IStoreProps {
   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;
 }
 
 export type { IFeaturedItem };
@@ -113,6 +115,7 @@ export const Store: React.FC<IStoreProps> = ({
   onPurchaseSuccess,
   onPurchaseError,
   onBuyDC,
+  currencySymbol = '$',
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
@@ -266,6 +269,7 @@ export const Store: React.FC<IStoreProps> = ({
           atlasIMG={atlasIMG}
           packBadges={packBadges}
           onPackView={onPackView}
+          currencySymbol={currencySymbol}
         />
       ),
     },
@@ -307,6 +311,7 @@ export const Store: React.FC<IStoreProps> = ({
           atlasIMG={atlasIMG}
           packBadges={packBadges}
           onPackView={onPackView}
+          currencySymbol={currencySymbol}
         />
       ),
     },
@@ -326,6 +331,7 @@ export const Store: React.FC<IStoreProps> = ({
           itemBadges={itemBadges}
           onItemView={onItemView}
           onCategoryChange={onCategoryChange}
+          currencySymbol={currencySymbol}
         />
       ),
     },
@@ -383,6 +389,7 @@ export const Store: React.FC<IStoreProps> = ({
           onPurchaseSuccess={onPurchaseSuccess}
           onPurchaseError={onPurchaseError}
           onBuyDC={onBuyDC}
+          currencySymbol={currencySymbol}
         />
       ) : selectedPack ? (
         <StoreItemDetails
@@ -394,6 +401,7 @@ export const Store: React.FC<IStoreProps> = ({
           imageUrl={selectedPack.image}
           onBack={() => setSelectedPack(null)}
           onAddToCart={() => handleAddPackToCart(selectedPack)}
+          currencySymbol={currencySymbol}
         />
       ) : (
         <Container>
@@ -475,12 +483,12 @@ export const Store: React.FC<IStoreProps> = ({
                 </CartInfo>
                 <CartInfo>
                   <span>Total:</span>
-                  <span>${getTotalPrice().toFixed(2)}</span>
+                  <span>{currencySymbol}{getTotalPrice().toFixed(2)}</span>
                 </CartInfo>
               </CartSummary>
               <CTAButton
                 icon={<FaShoppingCart />}
-                label={`Proceed to Checkout ($${getTotalPrice().toFixed(2)})`}
+                label={`Proceed to Checkout (${currencySymbol}${getTotalPrice().toFixed(2)})`}
                 onClick={handleOpenCart}
                 fullWidth
               />

package/src/components/Store/StoreItemDetails.tsx

@@ -9,6 +9,7 @@ interface IStoreItemDetailsProps {
   imageUrl: string | { src: string; default?: string };
   onBack: () => void;
   onAddToCart: (item: IProductBlueprint) => void;
+  currencySymbol?: string;
 }
 
 export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
@@ -16,6 +17,7 @@ export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
   onBack,
   onAddToCart,
   imageUrl,
+  currencySymbol = '$',
 }) => {
   const getImageSrc = () => {
     if (!imageUrl) return '/placeholder-thumbnail.png';
@@ -43,7 +45,7 @@ export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
           <ItemInfo>
             <ItemName>{item.name}</ItemName>
             <ItemPrice>
-              ${'priceUSD' in item ? item.priceUSD : item.price}
+              {currencySymbol}{'priceUSD' in item ? item.priceUSD : ((item as any).regionalPrice ?? item.price)}
               {(item as any).dcPrice ? ` · ${((item as any).dcPrice as number).toLocaleString()} DC` : ''}
             </ItemPrice>
             <Description>{item.description}</Description>

package/src/components/Store/StoreItemRow.tsx

@@ -31,6 +31,8 @@ interface IStoreItemRowProps {
   /** Fires once on mount — use for store_item_viewed analytics. */
   onView?: (item: IProductBlueprint, position: number) => void;
   positionInList?: number;
+  /** Currency symbol to display (e.g. "$" for USD, "R$" for BRL). Defaults to "$". */
+  currencySymbol?: string;
 }
 
 export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
@@ -49,6 +51,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   originalPrice,
   onView,
   positionInList = 0,
+  currencySymbol = '$',
 }) => {
   const [textInputValue, setTextInputValue] = useState('');
 
@@ -117,7 +120,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
                     </DCCoinWrapper>
                     {originalPrice.toLocaleString()}
                   </>
-                ) : `$${originalPrice.toFixed(2)}`}
+                ) : `${currencySymbol}${originalPrice.toFixed(2)}`}
               </OriginalPrice>
             )}
             {(item.currency as string) === 'DC' ? (
@@ -131,7 +134,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
               </ItemPrice>
             ) : (
               <ItemPrice $onSale={originalPrice != null} style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
-                ${item.price.toFixed(2)}
+                {currencySymbol}{((item as any).regionalPrice ?? item.price).toFixed(2)}
                 {(item as any).dcPrice ? (
                   <>
                     <span style={{ margin: '0 4px' }}>·</span>

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

@@ -138,7 +138,7 @@ export const useStoreCart = (): IUseStoreCart => {
   const getTotalPrice = () =>
     Number(
       cartItems
-        .reduce((sum, item) => sum + item.item.price * item.quantity, 0)
+        .reduce((sum, item) => sum + (((item.item as any).regionalPrice ?? item.item.price) * item.quantity), 0)
         .toFixed(2)
     );
 
@@ -177,4 +177,3 @@ function uuidv4(): string {
     return v.toString(16);
   });
 }
-

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

@@ -31,6 +31,8 @@ interface IStoreItemsSectionProps {
   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;
 }
 
 export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
@@ -44,6 +46,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   itemBadges = {},
   onItemView,
   onCategoryChange,
+  currencySymbol = '$',
 }) => {
   const {
     searchQuery,
@@ -89,6 +92,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
           showTextInput
           onView={onItemView}
           positionInList={position}
+          currencySymbol={currencySymbol}
           {...meta}
         />
       );
@@ -105,6 +109,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
         userAccountType={userAccountType || UserAccountTypes.Free}
         onView={onItemView}
         positionInList={position}
+        currencySymbol={currencySymbol}
         {...meta}
       />
     );

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

@@ -21,6 +21,8 @@ interface IStorePacksSectionProps {
   packBadges?: Record<string, { badges?: IStoreBadge[]; buyCount?: number; viewersCount?: number; saleEndsAt?: string; originalPrice?: number }>;
   /** Fires once on mount per pack row — use for pack_viewed analytics. */
   onPackView?: (pack: IItemPack, position: number) => void;
+  /** Currency symbol to display (e.g. "$" for USD, "R$" for BRL). Defaults to "$". */
+  currencySymbol?: string;
 }
 
 interface IPackRowItemProps {
@@ -35,12 +37,14 @@ interface IPackRowItemProps {
   originalPrice?: number;
   onPackView?: (pack: IItemPack, position: number) => void;
   positionInList?: number;
+  currencySymbol?: string;
 }
 
 const PackRowItem: React.FC<IPackRowItemProps> = ({
   pack, onAddToCart, onQuickBuy, renderPackIcon,
   badges, buyCount, viewersCount, saleEndsAt, originalPrice,
   onPackView, positionInList = 0,
+  currencySymbol = '$',
 }) => {
   const { quantity, handleQuantityChange, handleBlur, incrementQuantity, decrementQuantity, resetQuantity } = useQuantityControl();
 
@@ -69,9 +73,9 @@ const PackRowItem: React.FC<IPackRowItemProps> = ({
           <PackName>{pack.title}</PackName>
           <PackPriceRow>
             {originalPrice != null && (
-              <PackOriginalPrice>${originalPrice.toFixed(2)}</PackOriginalPrice>
+              <PackOriginalPrice>{currencySymbol}{originalPrice.toFixed(2)}</PackOriginalPrice>
             )}
-            <PackPrice $onSale={originalPrice != null}>${pack.priceUSD}</PackPrice>
+            <PackPrice $onSale={originalPrice != null}>{currencySymbol}{pack.priceUSD}</PackPrice>
           </PackPriceRow>
           {pack.description && <PackDescription>{pack.description}</PackDescription>}
           <StoreBadges badges={badges} buyCount={buyCount} viewersCount={viewersCount} saleEndsAt={saleEndsAt} />
@@ -109,6 +113,7 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   atlasIMG,
   packBadges = {},
   onPackView,
+  currencySymbol = '$',
 }) => {
   const { searchQuery, setSearchQuery, filteredPacks } = usePackFiltering(packs);
 
@@ -141,11 +146,12 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
           renderPackIcon={renderPackIcon}
           onPackView={onPackView}
           positionInList={position}
+          currencySymbol={currencySymbol}
           {...meta}
         />
       );
     },
-    [onAddToCart, onQuickBuy, renderPackIcon, packBadges, onPackView, filteredPacks]
+    [onAddToCart, onQuickBuy, renderPackIcon, packBadges, onPackView, filteredPacks, currencySymbol]
   );
 
   return (

package/src/stories/Features/store/Store.stories.tsx

@@ -234,7 +234,7 @@ export const Default: Story = {
         console.log('Purchase details:', purchase);
         return Promise.resolve(true);
       }}
-      customWalletContent={<DCWalletContent 
+      customWalletContent={<DCWalletContent
         dcBalance={1200}
         historyData={{ transactions: [], totalPages: 1, currentPage: 1 }}
         historyLoading={false}
@@ -279,3 +279,288 @@ export const Default: Story = {
     />
   ),
 };
+
+// Brazilian Real currency
+export const BRL: Story = {
+  render: () => (
+    <Store
+      items={duplicatedItems}
+      packs={mockPacks}
+      userAccountType={UserAccountTypes.Free}
+      onPurchase={(purchase: Partial<IPurchase>) => {
+        console.log('Purchase details:', purchase);
+        return Promise.resolve(true);
+      }}
+      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']}
+      defaultActiveTab="packs"
+      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
+      currencySymbol="R$"
+      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 }
+      }}
+    />
+  ),
+};
+
+// Euro currency
+export const EUR: Story = {
+  render: () => (
+    <Store
+      items={duplicatedItems}
+      packs={mockPacks}
+      userAccountType={UserAccountTypes.Free}
+      onPurchase={(purchase: Partial<IPurchase>) => {
+        console.log('Purchase details:', purchase);
+        return Promise.resolve(true);
+      }}
+      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']}
+      defaultActiveTab="packs"
+      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
+      currencySymbol="€"
+      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 }
+      }}
+    />
+  ),
+};
+
+// British Pound currency
+export const GBP: Story = {
+  render: () => (
+    <Store
+      items={duplicatedItems}
+      packs={mockPacks}
+      userAccountType={UserAccountTypes.Free}
+      onPurchase={(purchase: Partial<IPurchase>) => {
+        console.log('Purchase details:', purchase);
+        return Promise.resolve(true);
+      }}
+      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']}
+      defaultActiveTab="packs"
+      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
+      currencySymbol="£"
+      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 }
+      }}
+    />
+  ),
+};
+
+// Japanese Yen currency
+export const JPY: Story = {
+  render: () => (
+    <Store
+      items={duplicatedItems}
+      packs={mockPacks}
+      userAccountType={UserAccountTypes.Free}
+      onPurchase={(purchase: Partial<IPurchase>) => {
+        console.log('Purchase details:', purchase);
+        return Promise.resolve(true);
+      }}
+      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']}
+      defaultActiveTab="packs"
+      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
+      currencySymbol="¥"
+      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 }
+      }}
+    />
+  ),
+};
+
+// Indian Rupee currency
+export const INR: Story = {
+  render: () => (
+    <Store
+      items={duplicatedItems}
+      packs={mockPacks}
+      userAccountType={UserAccountTypes.Free}
+      onPurchase={(purchase: Partial<IPurchase>) => {
+        console.log('Purchase details:', purchase);
+        return Promise.resolve(true);
+      }}
+      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']}
+      defaultActiveTab="packs"
+      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
+      currencySymbol="₹"
+      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 }
+      }}
+    />
+  ),
+};