@rpg-engine/long-bow 0.8.70 → 0.8.72

package/dist/long-bow.esm.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, Component, useRef, useCallback, useContext,
 import styled, { css, keyframes, createGlobalStyle } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, RewardType, isMobileOrTablet, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, MetadataType, PurchaseType, UserAccountTypes, PeriodOfDay } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, RewardType, isMobileOrTablet, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, MetadataType, PurchaseType, UserAccountTypes, PaymentCurrency, PeriodOfDay } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaChevronUp, FaChevronDown, FaReddit, FaTrash, FaShoppingBag, FaInfoCircle, FaCartPlus, FaArrowLeft, FaHistory, FaShoppingCart } from 'react-icons/fa';
@@ -57512,7 +57512,7 @@ var CartView = function CartView(_ref2) {
   return React.createElement(Container$K, null, React.createElement(Header$7, null, React.createElement(Title$e, null, "Shopping Cart"), React.createElement(CloseButton$9, {
     onPointerDown: onClose
   }, React.createElement(FaTimes, null))), React.createElement(CartItems, null, cartItems.length === 0 ? React.createElement(EmptyCart, null, "Your cart is empty") : cartItems.map(function (cartItem) {
-    var _cartItem$metadata;
+    var _cartItem$metadata, _cartItem$metadata2;
     console.log('Item metadataType: , texturePath:', cartItem.item.metadataType, cartItem.item.texturePath);
     var getSpriteKey = function getSpriteKey(textureKey) {
       return textureKey + '/down/standing/0.png';
@@ -57527,7 +57527,7 @@ var CartView = function CartView(_ref2) {
       height: 32,
       imgScale: 2,
       centered: true
-    })), React.createElement(ItemDetails, null, React.createElement(ItemName, null, cartItem.item.name), React.createElement(ItemInfo$1, null, React.createElement("span", null, "$", formatPrice(cartItem.item.price)), React.createElement("span", null, "\xD7"), React.createElement("span", null, cartItem.quantity), React.createElement("span", null, "="), React.createElement("span", null, "$", formatPrice(cartItem.item.price * cartItem.quantity))), cartItem.metadata && cartItem.item.metadataType && React.createElement(MetadataDisplay, {
+    })), React.createElement(ItemDetails, null, React.createElement(ItemName, null, cartItem.item.name), ((_cartItem$metadata2 = cartItem.metadata) == null ? void 0 : _cartItem$metadata2.inputValue) && React.createElement(CartMeta, null, cartItem.metadata.inputValue), React.createElement(ItemInfo$1, null, React.createElement("span", null, "$", formatPrice(cartItem.item.price)), React.createElement("span", null, "\xD7"), React.createElement("span", null, cartItem.quantity), React.createElement("span", null, "="), React.createElement("span", null, "$", formatPrice(cartItem.item.price * cartItem.quantity))), cartItem.metadata && cartItem.item.metadataType && React.createElement(MetadataDisplay, {
       type: cartItem.item.metadataType,
       metadata: cartItem.metadata
     })), React.createElement(CTAButton, {
@@ -57617,6 +57617,10 @@ var MetadataValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__MetadataValue",
   componentId: "sc-ydtyl1-17"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+var CartMeta = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__CartMeta",
+  componentId: "sc-ydtyl1-18"
+})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;opacity:0.8;margin-top:0.25rem;"]);
 
 var useStoreMetadata = function useStoreMetadata() {
   var _useState = useState(false),
@@ -57627,7 +57631,7 @@ var useStoreMetadata = function useStoreMetadata() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            if (!(!item.metadataType || item.metadataType === MetadataType.None)) {
+            if (!(!item.metadataType || item.metadataType !== MetadataType.CharacterSkin)) {
               _context.next = 2;
               break;
             }
@@ -57707,7 +57711,7 @@ var useStoreCart = function useStoreCart() {
             });
             return _context.abrupt("return");
           case 3:
-            if (!(item.metadataType && item.metadataType !== MetadataType.None)) {
+            if (!(item.metadataType === MetadataType.CharacterSkin)) {
               _context.next = 12;
               break;
             }
@@ -57823,7 +57827,11 @@ var useStoreCart = function useStoreCart() {
 };
 // Helper functions
 function getPurchaseType(item) {
-  // Check if the item comes from a pack based on naming convention or other property
+  // 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 {
@@ -57973,7 +57981,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
   // Effect to reset currentIndex when switching items
   useEffect(function () {
     setCurrentIndex(0);
-  }, [item._id]);
+  }, [item.key]);
   var handlePreviousSkin = function handlePreviousSkin() {
     setCurrentIndex(function (prevIndex) {
       return prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1;
@@ -58080,10 +58088,17 @@ var StoreItemRow = function StoreItemRow(_ref) {
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     onAddToCart = _ref.onAddToCart,
-    userAccountType = _ref.userAccountType;
+    userAccountType = _ref.userAccountType,
+    _ref$showTextInput = _ref.showTextInput,
+    showTextInput = _ref$showTextInput === void 0 ? false : _ref$showTextInput,
+    _ref$textInputPlaceho = _ref.textInputPlaceholder,
+    textInputPlaceholder = _ref$textInputPlaceho === void 0 ? item.inputPlaceholder : _ref$textInputPlaceho;
   var _useState = useState(1),
     quantity = _useState[0],
     setQuantity = _useState[1];
+  var _useState2 = useState(''),
+    textInputValue = _useState2[0],
+    setTextInputValue = _useState2[1];
   var handleQuantityChange = function handleQuantityChange(e) {
     var value = parseInt(e.target.value) || 1;
     setQuantity(Math.min(Math.max(1, value), 99));
@@ -58103,10 +58118,17 @@ var StoreItemRow = function StoreItemRow(_ref) {
     });
   };
   var hasRequiredAccount = !((_item$requiredAccount = item.requiredAccountType) != null && _item$requiredAccount.length) || item.requiredAccountType.includes(userAccountType);
-  var handleAddToCart = function handleAddToCart() {
+  var handleAddToCartInternal = function handleAddToCartInternal() {
     if (!hasRequiredAccount) return;
-    onAddToCart(item, quantity);
-    setQuantity(1); // Reset quantity after adding to cart
+    if (showTextInput) {
+      onAddToCart(item, 1, {
+        inputValue: textInputValue
+      });
+      setTextInputValue('');
+    } else {
+      onAddToCart(item, quantity);
+      setQuantity(1);
+    }
   };
   return React.createElement(ItemWrapper$1, null, React.createElement(ItemIconContainer$3, null, React.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
@@ -58116,7 +58138,15 @@ var StoreItemRow = function StoreItemRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  })), React.createElement(ItemDetails$2, null, React.createElement(ItemName$2, null, item.name), React.createElement(ItemPrice$1, null, "$", item.price)), React.createElement(Controls$1, null, React.createElement(ArrowsContainer, null, React.createElement(SelectArrow, {
+  })), React.createElement(ItemDetails$2, null, React.createElement(ItemName$2, null, item.name), React.createElement(ItemPrice$1, null, "$", item.price), React.createElement(ItemDescription, null, item.description)), React.createElement(Controls$1, null, showTextInput ? React.createElement(TextInput, {
+    type: "text",
+    value: textInputValue,
+    placeholder: textInputPlaceholder,
+    onChange: function onChange(e) {
+      return setTextInputValue(e.target.value);
+    },
+    className: "rpgui-input"
+  }) : item.isStackable ? React.createElement(ArrowsContainer, null, React.createElement(SelectArrow, {
     direction: "left",
     onPointerDown: decrementQuantity,
     size: 24
@@ -58132,10 +58162,10 @@ var StoreItemRow = function StoreItemRow(_ref) {
     direction: "right",
     onPointerDown: incrementQuantity,
     size: 24
-  })), React.createElement(CTAButton, {
+  })) : null, React.createElement(CTAButton, {
     icon: React.createElement(FaCartPlus, null),
     label: "Add",
-    onClick: handleAddToCart,
+    onClick: handleAddToCartInternal,
     disabled: !hasRequiredAccount
   })));
 };
@@ -58159,25 +58189,35 @@ var ItemPrice$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemRow__ItemPrice",
   componentId: "sc-ptotuo-4"
 })(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;"]);
+var ItemDescription = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemRow__ItemDescription",
+  componentId: "sc-ptotuo-5"
+})(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:rgba(255,255,255,0.7);line-height:1.4;"]);
 var Controls$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemRow__Controls",
-  componentId: "sc-ptotuo-5"
+  componentId: "sc-ptotuo-6"
 })(["display:flex;align-items:center;gap:1rem;min-width:fit-content;"]);
 var ArrowsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemRow__ArrowsContainer",
-  componentId: "sc-ptotuo-6"
+  componentId: "sc-ptotuo-7"
 })(["position:relative;display:flex;align-items:center;width:120px;height:42px;justify-content:space-between;"]);
 var QuantityInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StoreItemRow__QuantityInput",
-  componentId: "sc-ptotuo-7"
+  componentId: "sc-ptotuo-8"
 })(["width:40px;text-align:center;margin:0 auto;font-size:0.875rem;background:rgba(0,0,0,0.2);color:#ffffff;border:none;padding:0.25rem;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}"]);
+var TextInput = /*#__PURE__*/styled.input.withConfig({
+  displayName: "StoreItemRow__TextInput",
+  componentId: "sc-ptotuo-9"
+})(["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;"]);
 
 var StoreItemsSection = function StoreItemsSection(_ref) {
   var items = _ref.items,
     onAddToCart = _ref.onAddToCart,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
-    userAccountType = _ref.userAccountType;
+    userAccountType = _ref.userAccountType,
+    _ref$textInputItemKey = _ref.textInputItemKeys,
+    textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey;
   var _useState = useState(''),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
@@ -58185,10 +58225,10 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     return item.name.toLowerCase().includes(searchQuery.toLowerCase());
   });
   var renderStoreItem = function renderStoreItem(item) {
-    // Use the specialized character skin row for items with character skin metadata
+    // Prefer a specialized character skin row when needed
     if (item.metadataType === MetadataType.CharacterSkin) {
       return React.createElement(StoreCharacterSkinRow, {
-        key: item._id,
+        key: item.key,
         item: item,
         atlasJSON: atlasJSON,
         atlasIMG: atlasIMG,
@@ -58196,9 +58236,21 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
         userAccountType: userAccountType || UserAccountTypes.Free
       });
     }
-    // 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 React.createElement(StoreItemRow, {
+        key: item.key,
+        item: item,
+        atlasJSON: atlasJSON,
+        atlasIMG: atlasIMG,
+        onAddToCart: onAddToCart,
+        userAccountType: userAccountType || UserAccountTypes.Free,
+        showTextInput: true
+      });
+    }
+    // Fallback to standard arrow-based row
     return React.createElement(StoreItemRow, {
-      key: item._id,
+      key: item.key,
       item: item,
       atlasJSON: atlasJSON,
       atlasIMG: atlasIMG,
@@ -58415,7 +58467,7 @@ var Store = function Store(_ref) {
     packs = _ref$packs === void 0 ? [] : _ref$packs,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
-    _onPurchase = _ref.onPurchase,
+    _onPurchase2 = _ref.onPurchase,
     onShowHistory = _ref.onShowHistory,
     userAccountType = _ref.userAccountType,
     _ref$loading = _ref.loading,
@@ -58425,7 +58477,9 @@ var Store = function Store(_ref) {
     _ref$hidePremiumTab = _ref.hidePremiumTab,
     hidePremiumTab = _ref$hidePremiumTab === void 0 ? false : _ref$hidePremiumTab,
     tabOrder = _ref.tabOrder,
-    defaultActiveTab = _ref.defaultActiveTab;
+    defaultActiveTab = _ref.defaultActiveTab,
+    _ref$textInputItemKey = _ref.textInputItemKeys,
+    textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey;
   var _useState = useState(null),
     selectedPack = _useState[0],
     setSelectedPack = _useState[1];
@@ -58458,29 +58512,35 @@ var Store = function Store(_ref) {
     setCurrentMetadataItem = _useState4[1];
   var handleAddPackToCart = function handleAddPackToCart(pack) {
     var packItem = {
-      _id: pack.key,
       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: function () {
+        var _onPurchase = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function onPurchase() {
+          return _onPurchase.apply(this, arguments);
+        }
+        return onPurchase;
+      }(),
+      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
+      isUsable: false
     };
     handleAddToCart(packItem, 1);
   };
@@ -58560,7 +58620,8 @@ var Store = function Store(_ref) {
         onAddToCart: handleAddToCart,
         atlasJSON: atlasJSON,
         atlasIMG: atlasIMG,
-        userAccountType: userAccountType
+        userAccountType: userAccountType,
+        textInputItemKeys: textInputItemKeys
       })
     }
   };
@@ -58585,22 +58646,22 @@ var Store = function Store(_ref) {
     onRemoveFromCart: handleRemoveFromCart,
     onClose: closeCart,
     onPurchase: function () {
-      var _onPurchase2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+      var _onPurchase3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _context.next = 2;
-              return handleCartPurchase(_onPurchase);
+              _context2.next = 2;
+              return handleCartPurchase(_onPurchase2);
             case 2:
-              return _context.abrupt("return", true);
+              return _context2.abrupt("return", true);
             case 3:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee);
+        }, _callee2);
       }));
       function onPurchase() {
-        return _onPurchase2.apply(this, arguments);
+        return _onPurchase3.apply(this, arguments);
       }
       return onPurchase;
     }(),