@rpg-engine/long-bow 0.8.71 → 0.8.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.71",
+  "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>;

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;
@@ -71,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;

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,12 +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> = ({
@@ -22,6 +23,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   onAddToCart,
   userAccountType,
   showTextInput = false,
+  textInputPlaceholder = item.inputPlaceholder,
 }) => {
   const [quantity, setQuantity] = useState(1);
   const [textInputValue, setTextInputValue] = useState('');
@@ -76,6 +78,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
       <ItemDetails>
         <ItemName>{item.name}</ItemName>
         <ItemPrice>${item.price}</ItemPrice>
+        <ItemDescription>{item.description}</ItemDescription>
       </ItemDetails>
 
       <Controls>
@@ -84,7 +87,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
           <TextInput
             type="text"
             value={textInputValue}
-            placeholder="Enter value"
+            placeholder={textInputPlaceholder}
             onChange={e => setTextInputValue(e.target.value)}
             className="rpgui-input"
           />
@@ -166,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;

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,8 +6,8 @@ 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;
@@ -28,12 +28,12 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
     item.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
-  const renderStoreItem = (item: IStoreItem) => {
+  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}
@@ -43,10 +43,10 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
       );
     }
     // Render text input row when configured for this item key
-    if (textInputItemKeys.includes(item.key) || textInputItemKeys.includes(item._id)) {
+    if (textInputItemKeys.includes(item.key)) {
       return (
         <StoreItemRow
-          key={item._id}
+          key={item.key}
           item={item}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
@@ -59,7 +59,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
     // 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}`,
   })),
 ];