@rpg-engine/long-bow 0.8.70 → 0.8.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.70",
+  "version": "0.8.72",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.9.123",
+    "@rpg-engine/shared": "^0.10.10",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Store/CartView.tsx

@@ -1,4 +1,4 @@
-import { IStoreItem, MetadataType } from '@rpg-engine/shared';
+import { IProductBlueprint, MetadataType } from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import { FaInfoCircle, FaShoppingBag, FaTimes, FaTrash } from 'react-icons/fa';
 import styled from 'styled-components';
@@ -9,12 +9,15 @@ import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 
 
+// Local cart item interface
+interface ICartItem {
+  item: IProductBlueprint;
+  quantity: number;
+  metadata?: Record<string, any>;
+}
+
 interface ICartViewProps {
-  cartItems: { 
-    item: IStoreItem; 
-    quantity: number;
-    metadata?: Record<string, any>;
-  }[];
+  cartItems: ICartItem[];
   onRemoveFromCart: (itemKey: string) => void;
   onClose: () => void;
   onPurchase: () => Promise<boolean>;
@@ -111,6 +114,9 @@ export const CartView: React.FC<ICartViewProps> = ({
                 </ItemIconContainer>
                 <ItemDetails>
                   <ItemName>{cartItem.item.name}</ItemName>
+                  {cartItem.metadata?.inputValue && (
+                    <CartMeta>{cartItem.metadata.inputValue}</CartMeta>
+                  )}
                   <ItemInfo>
                     <span>${formatPrice(cartItem.item.price)}</span>
                     <span>×</span>
@@ -339,3 +345,11 @@ const MetadataValue = styled.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
+
+const CartMeta = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+  color: #ffffff;
+  opacity: 0.8;
+  margin-top: 0.25rem;
+`;

package/src/components/Store/Store.tsx

@@ -1,4 +1,4 @@
-import { IItemPack, IPurchase, IStoreItem, ItemRarities, ItemSubType, ItemType, UserAccountTypes } from '@rpg-engine/shared';
+import { IItemPack, IPurchase, IProductBlueprint, ItemRarities, ItemSubType, ItemType, UserAccountTypes, PaymentCurrency, PurchaseType } from '@rpg-engine/shared';
 import React, { ReactNode, useMemo, useState } from 'react';
 import { FaHistory, FaShoppingCart } from 'react-icons/fa';
 import styled from 'styled-components';
@@ -19,7 +19,7 @@ type TabId = 'premium' | 'packs' | 'items';
 
 // Define IStoreProps locally as a workaround
 export interface IStoreProps {
-  items: IStoreItem[];
+  items: IProductBlueprint[];
   packs?: IItemPack[];
   atlasJSON: any;
   atlasIMG: string;
@@ -32,6 +32,7 @@ export interface IStoreProps {
   hidePremiumTab?: boolean;
   tabOrder?: TabId[];
   defaultActiveTab?: TabId;
+  textInputItemKeys?: string[];
 }
 
 export const Store: React.FC<IStoreProps> = ({
@@ -48,6 +49,7 @@ export const Store: React.FC<IStoreProps> = ({
   hidePremiumTab = false,
   tabOrder,
   defaultActiveTab,
+  textInputItemKeys = [],
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
@@ -69,41 +71,33 @@ export const Store: React.FC<IStoreProps> = ({
     isCartOpen,
   } = useStoreCart();
   const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
-  const [currentMetadataItem, setCurrentMetadataItem] = useState<IStoreItem | null>(null);
+  const [currentMetadataItem, setCurrentMetadataItem] = useState<IProductBlueprint | null>(null);
 
   const handleAddPackToCart = (pack: IItemPack) => {
-    const packItem: IStoreItem = {
-      _id: pack.key,
+    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,
-      textureKey: pack.image.default || pack.image.src,
-      type: ItemType.Consumable,
-      subType: ItemSubType.Other,
-      description: pack.description || '',
-      fullDescription: pack.description || '',
-      textureAtlas: 'items',
-      weight: 0,
+      type: PurchaseType.Pack,
+      onPurchase: async () => {},
+      itemType: ItemType.Consumable,
+      itemSubType: ItemSubType.Other,
       rarity: ItemRarities.Common,
-      allowedEquipSlotType: [],
-      isEquipable: false,
+      weight: 0,
       isStackable: false,
-      isTwoHanded: false,
-      hasUseWith: false,
       maxStackSize: 1,
       isUsable: false,
-      isStorable: true,
-      isSolid: false,
-      isItemContainer: false,
     };
     handleAddToCart(packItem, 1);
   };
 
   const filterItems = (
-    itemsToFilter: IStoreItem[],
+    itemsToFilter: IProductBlueprint[],
     type: 'items' | 'premium'
-  ): IStoreItem[] => {
+  ): IProductBlueprint[] => {
     return itemsToFilter.filter(item => {
       if (type === 'premium') {
         return item.requiredAccountType?.length ?? 0 > 0;
@@ -188,6 +182,7 @@ export const Store: React.FC<IStoreProps> = ({
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
           userAccountType={userAccountType}
+          textInputItemKeys={textInputItemKeys}
         />
       ),
     },

package/src/components/Store/StoreCharacterSkinRow.tsx

@@ -1,4 +1,4 @@
-import { IStoreItem, MetadataType, UserAccountTypes } from '@rpg-engine/shared';
+import { IProductBlueprint, MetadataType, UserAccountTypes } from '@rpg-engine/shared';
 import React, { useEffect, useState } from 'react';
 import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
@@ -8,10 +8,10 @@ import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 interface IStoreCharacterSkinRowProps {
-  item: IStoreItem;
+  item: IProductBlueprint;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
-  onAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
+  onAddToCart: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
   userAccountType: UserAccountTypes;
 }
 
@@ -36,7 +36,7 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
   // Effect to reset currentIndex when switching items
   useEffect(() => {
     setCurrentIndex(0);
-  }, [item._id]);
+  }, [item.key]);
   
   const handlePreviousSkin = () => {
     setCurrentIndex((prevIndex) =>

package/src/components/Store/StoreItemDetails.tsx

@@ -1,14 +1,14 @@
-import { IItemPack, IStoreItem } from '@rpg-engine/shared';
+import { IItemPack, IProductBlueprint } from '@rpg-engine/shared';
 import React from 'react';
 import { FaArrowLeft, FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 
 interface IStoreItemDetailsProps {
-  item: IStoreItem | (IItemPack & { name: string; texturePath: string });
+  item: IProductBlueprint | (IItemPack & { name: string; texturePath: string });
   imageUrl: string | { src: string; default?: string };
   onBack: () => void;
-  onAddToCart: (item: IStoreItem) => void;
+  onAddToCart: (item: IProductBlueprint) => void;
 }
 
 export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
@@ -53,7 +53,7 @@ export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
           <CTAButton
             icon={<FaCartPlus />}
             label="Add to Cart"
-            onClick={() => onAddToCart(item as IStoreItem)}
+            onClick={() => onAddToCart(item as IProductBlueprint)}
             fullWidth
           />
         </Actions>

package/src/components/Store/StoreItemRow.tsx

@@ -1,4 +1,4 @@
-import { IStoreItem, UserAccountTypes } from '@rpg-engine/shared';
+import { IProductBlueprint, UserAccountTypes } from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
@@ -7,11 +7,13 @@ import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 interface IStoreItemRowProps {
-  item: IStoreItem;
+  item: IProductBlueprint;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
-  onAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
+  onAddToCart: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
   userAccountType: UserAccountTypes;
+  showTextInput?: boolean;
+  textInputPlaceholder?: string;
 }
 
 export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
@@ -20,8 +22,11 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   atlasIMG,
   onAddToCart,
   userAccountType,
+  showTextInput = false,
+  textInputPlaceholder = item.inputPlaceholder,
 }) => {
   const [quantity, setQuantity] = useState(1);
+  const [textInputValue, setTextInputValue] = useState('');
 
   const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = parseInt(e.target.value) || 1;
@@ -45,10 +50,15 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
     !item.requiredAccountType?.length ||
     item.requiredAccountType.includes(userAccountType);
 
-  const handleAddToCart = () => {
+  const handleAddToCartInternal = () => {
     if (!hasRequiredAccount) return;
+    if (showTextInput) {
+      onAddToCart(item, 1, { inputValue: textInputValue });
+      setTextInputValue('');
+    } else {
     onAddToCart(item, quantity);
-    setQuantity(1); // Reset quantity after adding to cart
+      setQuantity(1);
+    }
   };
 
   return (
@@ -68,9 +78,20 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
       <ItemDetails>
         <ItemName>{item.name}</ItemName>
         <ItemPrice>${item.price}</ItemPrice>
+        <ItemDescription>{item.description}</ItemDescription>
       </ItemDetails>
 
       <Controls>
+        {/* Show text input if configured, else show arrows only for stackable items */}
+        {showTextInput ? (
+          <TextInput
+            type="text"
+            value={textInputValue}
+            placeholder={textInputPlaceholder}
+            onChange={e => setTextInputValue(e.target.value)}
+            className="rpgui-input"
+          />
+        ) : item.isStackable ? (
         <ArrowsContainer>
           <SelectArrow
             direction="left"
@@ -94,11 +115,12 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
             size={24}
           />
         </ArrowsContainer>
+        ) : null}
 
         <CTAButton
           icon={<FaCartPlus />}
           label="Add"
-          onClick={handleAddToCart}
+          onClick={handleAddToCartInternal}
           disabled={!hasRequiredAccount}
         />
       </Controls>
@@ -147,6 +169,13 @@ const ItemPrice = styled.div`
   color: #fef08a;
 `;
 
+const ItemDescription = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.625rem;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 1.4;
+`;
+
 const Controls = styled.div`
   display: flex;
   align-items: center;
@@ -179,3 +208,14 @@ const QuantityInput = styled.input`
     margin: 0;
   }
 `;
+
+const TextInput = styled.input`
+  width: 120px;
+  text-align: center;
+  margin: 0 auto;
+  font-size: 0.875rem;
+  background: rgba(0, 0, 0, 0.2);
+  color: #ffffff;
+  border: none;
+  padding: 0.25rem;
+`;

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

@@ -1,23 +1,24 @@
 import {
-  ICartItem as IBaseCartItem,
   IPurchase,
   IPurchaseUnit,
-  IStoreItem,
+  IProductBlueprint,
   MetadataType,
   PurchaseType
 } from '@rpg-engine/shared';
 import { useEffect, useRef, useState } from 'react';
 import { useStoreMetadata } from './useStoreMetadata';
 
-// Extend the base cart item to include metadata
-interface ICartItem extends IBaseCartItem {
+// Create local cart item interface that uses IProductBlueprint
+interface ICartItem {
+  item: IProductBlueprint;
+  quantity: number;
   metadata?: Record<string, any>;
 }
 
 interface IUseStoreCart {
   cartItems: ICartItem[];
   isCartOpen: boolean;
-  handleAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
+  handleAddToCart: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
   handleRemoveFromCart: (itemKey: string) => void;
   handlePurchase: (onPurchase: (purchase: IPurchase) => void) => void;
   openCart: () => void;
@@ -40,7 +41,7 @@ export const useStoreCart = (): IUseStoreCart => {
 
   const { collectMetadata, isCollectingMetadata } = useStoreMetadata();
 
-  const handleAddToCart = async (item: IStoreItem, quantity: number, preselectedMetadata?: Record<string, any>) => {
+  const handleAddToCart = async (item: IProductBlueprint, quantity: number, preselectedMetadata?: Record<string, any>) => {
     // If metadata is already provided (from inline selection), use it directly
     if (preselectedMetadata) {
       setCartItems(prevItems => {
@@ -57,7 +58,7 @@ export const useStoreCart = (): IUseStoreCart => {
     }
     
     // If item requires metadata but none was provided, collect it before adding to cart
-    if (item.metadataType && item.metadataType !== MetadataType.None) {
+    if (item.metadataType === MetadataType.CharacterSkin) {
       const metadata = await collectMetadata(item);
       if (!metadata) return; // User cancelled
 
@@ -156,8 +157,12 @@ export const useStoreCart = (): IUseStoreCart => {
 };
 
 // Helper functions
-function getPurchaseType(item: IStoreItem): PurchaseType {
-  // Check if the item comes from a pack based on naming convention or other property
+function getPurchaseType(item: IProductBlueprint): PurchaseType {
+  // Use the type from IProductBlueprint if available, otherwise infer
+  if (item.type) {
+    return item.type;
+  }
+  // Fallback logic for backward compatibility
   if (item.key.startsWith('pack_')) {
     return PurchaseType.Pack;
   } else {

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

@@ -1,16 +1,16 @@
-import { IStoreItem, MetadataType } from "@rpg-engine/shared";
+import { IProductBlueprint, MetadataType } from "@rpg-engine/shared";
 import { useState } from "react";
 
 interface IUseStoreMetadata {
-    collectMetadata: (item: IStoreItem) => Promise<Record<string, any> | null>;
+    collectMetadata: (item: IProductBlueprint) => Promise<Record<string, any> | null>;
     isCollectingMetadata: boolean;
 }
 
 export const useStoreMetadata = (): IUseStoreMetadata => {
     const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
     
-    const collectMetadata = async (item: IStoreItem): Promise<Record<string, any> | null> => {
-        if (!item.metadataType || item.metadataType === MetadataType.None) {
+    const collectMetadata = async (item: IProductBlueprint): Promise<Record<string, any> | null> => {
+        if (!item.metadataType || item.metadataType !== MetadataType.CharacterSkin) {
             return null;
         }
 
@@ -49,7 +49,7 @@ declare global {
     interface Window {
         __metadataResolvers?: {
             resolve: (metadata: Record<string, any> | null) => void;
-            item: IStoreItem;
+            item: IProductBlueprint;
         };
     }
 }

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

@@ -1,4 +1,4 @@
-import { IStoreItem, MetadataType, UserAccountTypes } from '@rpg-engine/shared';
+import { IProductBlueprint, MetadataType, UserAccountTypes } from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { StoreCharacterSkinRow } from '../StoreCharacterSkinRow';
@@ -6,11 +6,12 @@ import { StoreItemRow } from '../StoreItemRow';
 
 
 interface IStoreItemsSectionProps {
-  items: IStoreItem[];
-  onAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
+  items: IProductBlueprint[];
+  onAddToCart: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
   userAccountType?: UserAccountTypes;
+  textInputItemKeys?: string[];
 }
 
 export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
@@ -19,6 +20,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   atlasJSON,
   atlasIMG,
   userAccountType,
+  textInputItemKeys = [],
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -26,12 +28,12 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
     item.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
-  const renderStoreItem = (item: IStoreItem) => {
-    // Use the specialized character skin row for items with character skin metadata
+  const renderStoreItem = (item: IProductBlueprint) => {
+    // Prefer a specialized character skin row when needed
     if (item.metadataType === MetadataType.CharacterSkin) {
       return (
         <StoreCharacterSkinRow
-          key={item._id}
+          key={item.key}
           item={item}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
@@ -40,11 +42,24 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
         />
       );
     }
-    
-    // Use the standard item row for all other items
+    // Render text input row when configured for this item key
+    if (textInputItemKeys.includes(item.key)) {
+      return (
+        <StoreItemRow
+          key={item.key}
+          item={item}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+          onAddToCart={onAddToCart}
+          userAccountType={userAccountType || UserAccountTypes.Free}
+          showTextInput
+        />
+      );
+    }
+    // Fallback to standard arrow-based row
     return (
       <StoreItemRow
-        key={item._id}
+        key={item.key}
         item={item}
         atlasJSON={atlasJSON}
         atlasIMG={atlasIMG}

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

@@ -1,4 +1,4 @@
-import { IItemPack, IPurchase, IStoreItem, ItemRarities, ItemSubType, ItemType, MetadataType, UserAccountTypes } from '@rpg-engine/shared';
+import { IItemPack, IPurchase, IProductBlueprint, ItemRarities, ItemSubType, ItemType, MetadataType, UserAccountTypes, PaymentCurrency, PurchaseType } from '@rpg-engine/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
@@ -29,41 +29,24 @@ export default meta;
 type Story = StoryObj<typeof Store>;
 
 // Create mock items once, with fixed stock values
-const storeItems: IStoreItem[] = mockItems.map((item, index) => ({
-  _id: `original-${item.key}-${index}`,
+const storeItems: IProductBlueprint[] = mockItems.map((item, index) => ({
   key: `original-${item.key}-${index}`,
   name: item.name,
   description: item.description,
-  fullDescription: item.description,
+  price: item.basePrice,
+  currency: PaymentCurrency.USD,
   texturePath: item.texturePath,
   textureAtlas: 'items',
   textureKey: item.texturePath,
-  price: item.basePrice,
-  stock: 5 + (index % 5), // Fixed stock values based on index
-  type: item.type,
-  subType: item.subType,
-  attack: item.attack || 0,
-  defense: item.defense || 0,
-  weight: item.weight,
+  type: PurchaseType.Item,
+  onPurchase: async () => {},
+  itemType: item.type,
+  itemSubType: item.subType,
   rarity: item.rarity,
-  isEquipable: true,
+  weight: item.weight,
   isStackable: item.maxStackSize > 1,
-  isUsable: true,
-  isStorable: true,
-  hasUseWith: false,
-  isSolid: false,
-  isTwoHanded: false,
-  isItemContainer: false,
-  layer: 1,
-  allowedEquipSlotType: item.allowedEquipSlotType || [],
   maxStackSize: item.maxStackSize || 1,
-  usableEffectDescription: item.usableEffectDescription || '',
-  canSell: item.canSell ?? true,
-  rangeType: item.rangeType,
-  entityEffects: item.entityEffects || [],
-  entityEffectChance: item.entityEffectChance || 0,
-  equippedBuff: item.equippedBuff || [],
-  equippedBuffDescription: item.equippedBuffDescription || '',
+  isUsable: true,
   requiredAccountType: item.rarity === 'Legendary' ? [UserAccountTypes.PremiumGold] : [],
 }));
 
@@ -87,35 +70,25 @@ const availableCharacters = [
 ];
 
 // Create character skin items
-const characterSkinItems: IStoreItem[] = [
+const characterSkinItems: IProductBlueprint[] = [
   {
-    _id: 'skin-character-customization',
     key: 'skin-character-customization',
     name: 'Character Skin Customization',
     description: 'Customize your character\'s appearance with a variety of skins',
-    fullDescription: 'This premium item allows you to customize your character\'s appearance by selecting from a variety of available skins.',
+    price: 14.99,
+    currency: PaymentCurrency.USD,
     texturePath: 'items/character_customization.png',
     textureAtlas: 'items',
     textureKey: 'items/character_customization.png',
-    price: 14.99,
-    type: ItemType.Other,
-    subType: ItemSubType.Other,
-    attack: 0,
-    defense: 0,
-    weight: 0,
+    type: PurchaseType.Item,
+    onPurchase: async () => {},
+    itemType: ItemType.Other,
+    itemSubType: ItemSubType.Other,
     rarity: ItemRarities.Rare,
-    isEquipable: false,
+    weight: 0,
     isStackable: false,
-    isUsable: true,
-    isStorable: true,
-    hasUseWith: false,
-    isSolid: false,
-    isTwoHanded: false,
-    isItemContainer: false,
-    layer: 1,
-    allowedEquipSlotType: [],
     maxStackSize: 1,
-    // Add metadata type and config
+    isUsable: true,
     metadataType: MetadataType.CharacterSkin,
     metadataConfig: {
       availableCharacters,
@@ -124,34 +97,24 @@ const characterSkinItems: IStoreItem[] = [
     },
   },
   {
-    _id: 'skin-premium-character-pack',
     key: 'skin-premium-character-pack',
     name: 'Premium Character Skin Pack',
     description: 'A premium collection of exclusive character skins',
-    fullDescription: 'This exclusive premium pack gives you access to rare and unique character skins to stand out from the crowd.',
+    price: 24.99,
+    currency: PaymentCurrency.USD,
     texturePath: 'items/premium_character_pack.png',
     textureAtlas: 'items',
     textureKey: 'items/premium_character_pack.png',
-    price: 24.99,
-    type: ItemType.Other,
-    subType: ItemSubType.Other,
-    attack: 0,
-    defense: 0,
-    weight: 0,
+    type: PurchaseType.Item,
+    onPurchase: async () => {},
+    itemType: ItemType.Other,
+    itemSubType: ItemSubType.Other,
     rarity: ItemRarities.Epic,
-    isEquipable: false,
+    weight: 0,
     isStackable: false,
-    isUsable: true,
-    isStorable: true,
-    hasUseWith: false,
-    isSolid: false,
-    isTwoHanded: false,
-    isItemContainer: false,
-    layer: 1,
-    allowedEquipSlotType: [],
     maxStackSize: 1,
+    isUsable: true,
     requiredAccountType: [UserAccountTypes.PremiumSilver],
-    // Add metadata type and config with the same character options
     metadataType: MetadataType.CharacterSkin,
     metadataConfig: {
       availableCharacters,
@@ -162,22 +125,19 @@ const characterSkinItems: IStoreItem[] = [
 ];
 
 // Create duplicated items once with unique keys
-const duplicatedItems: IStoreItem[] = [
+const duplicatedItems: IProductBlueprint[] = [
   ...storeItems,
   ...characterSkinItems,
   ...storeItems.map((item, index) => ({
     ...item,
-    _id: `copy1-${item.key}-${index}`,
     key: `copy1-${item.key}-${index}`,
   })),
   ...storeItems.map((item, index) => ({
     ...item,
-    _id: `copy2-${item.key}-${index}`,
     key: `copy2-${item.key}-${index}`,
   })),
   ...storeItems.map((item, index) => ({
     ...item,
-    _id: `copy3-${item.key}-${index}`,
     key: `copy3-${item.key}-${index}`,
   })),
 ];
@@ -249,6 +209,7 @@ export const Default: Story = {
       hidePremiumTab={true}
       tabOrder={['items', 'packs']}
       defaultActiveTab="items"
+      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1']}
     />
   ),
 };