@rpg-engine/long-bow 0.8.129 → 0.8.130

package/dist/components/Store/Store.d.ts

@@ -1,6 +1,6 @@
 import { IItemPack, IPurchase, IProductBlueprint, UserAccountTypes } from '@rpg-engine/shared';
 import React from 'react';
-declare type TabId = 'premium' | 'packs' | 'items';
+declare type TabId = 'premium' | 'packs' | 'items' | 'wallet';
 export interface IStoreProps {
     items: IProductBlueprint[];
     packs?: IItemPack[];
@@ -17,6 +17,7 @@ export interface IStoreProps {
     defaultActiveTab?: TabId;
     textInputItemKeys?: string[];
     customPacksContent?: React.ReactNode;
+    customWalletContent?: React.ReactNode;
 }
 export declare const Store: React.FC<IStoreProps>;
 export {};

package/dist/long-bow.cjs.development.js

@@ -58850,69 +58850,6 @@ var DropdownContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-l6f466-3"
 })(["flex:0.25;min-width:140px;"]);
 
-var ShoppingCardHorizontal = function ShoppingCardHorizontal(_ref) {
-  var title = _ref.title,
-    description = _ref.description,
-    imageUrl = _ref.imageUrl,
-    onClick = _ref.onClick,
-    footer = _ref.footer,
-    className = _ref.className;
-  var getImageSrc = function getImageSrc() {
-    if (!imageUrl) return '/placeholder-thumbnail.png';
-    if (typeof imageUrl === 'string') return imageUrl;
-    return imageUrl["default"] || imageUrl.src;
-  };
-  return React__default.createElement(CardContainer, {
-    onClick: onClick,
-    className: className
-  }, React__default.createElement(LeftSection, null, imageUrl && React__default.createElement(CardThumbnail, null, React__default.createElement("img", {
-    src: getImageSrc(),
-    alt: title
-  }))), React__default.createElement(RightSection, null, React__default.createElement(CardTitle, null, React__default.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "100%"
-  }, title)), React__default.createElement(CardDescription, null, React__default.createElement(Ellipsis, {
-    maxLines: 3,
-    maxWidth: "100%"
-  }, description)), footer && React__default.createElement(CardFooter, {
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, footer)));
-};
-var CardContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "CartCardHorizontal__CardContainer",
-  componentId: "sc-ngkh06-0"
-})(["display:flex;background:rgba(0,0,0,0.3);border-radius:4px;border:1px solid ", ";cursor:", ";transition:transform 0.2s ease;&:hover{transform:", ";}max-width:380px;"], uiColors.darkGray, function (props) {
-  return props.onClick ? 'pointer' : 'default';
-}, function (props) {
-  return props.onClick ? 'translateY(-2px)' : 'none';
-});
-var LeftSection = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "CartCardHorizontal__LeftSection",
-  componentId: "sc-ngkh06-1"
-})(["width:120px;flex-shrink:0;"]);
-var RightSection = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "CartCardHorizontal__RightSection",
-  componentId: "sc-ngkh06-2"
-})(["flex:1;display:flex;flex-direction:column;padding:12px;min-width:0;max-width:100%;"]);
-var CardThumbnail = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "CartCardHorizontal__CardThumbnail",
-  componentId: "sc-ngkh06-3"
-})(["width:100%;height:100%;background:rgba(0,0,0,0.2);overflow:hidden;img{width:100%;height:100%;object-fit:cover;}"]);
-var CardTitle = /*#__PURE__*/styled__default.h3.withConfig({
-  displayName: "CartCardHorizontal__CardTitle",
-  componentId: "sc-ngkh06-4"
-})(["margin:0;font-size:0.6rem;color:", ";font-family:'Press Start 2P',cursive;margin-bottom:8px;"], uiColors.yellow);
-var CardDescription = /*#__PURE__*/styled__default.p.withConfig({
-  displayName: "CartCardHorizontal__CardDescription",
-  componentId: "sc-ngkh06-5"
-})(["margin:0;font-size:0.55rem;color:", ";font-family:'Press Start 2P',cursive;line-height:1.4;margin-bottom:8px;"], uiColors.lightGray);
-var CardFooter = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "CartCardHorizontal__CardFooter",
-  componentId: "sc-ngkh06-6"
-})(["margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,0.1);"]);
-
 var usePackFiltering = function usePackFiltering(packs) {
   var _useState = React.useState(''),
     searchQuery = _useState[0],
@@ -58937,28 +58874,28 @@ var StorePacksSection = function StorePacksSection(_ref) {
     searchQuery = _usePackFiltering.searchQuery,
     setSearchQuery = _usePackFiltering.setSearchQuery,
     filteredPacks = _usePackFiltering.filteredPacks;
-  var renderPackFooter = React.useCallback(function (pack) {
-    return React__default.createElement(FooterContainer, null, React__default.createElement(Price, null, "$", pack.priceUSD), React__default.createElement(CTAButton, {
+  var getImageSrc = function getImageSrc(imageUrl) {
+    if (typeof imageUrl === 'string') return imageUrl;
+    return imageUrl["default"] || imageUrl.src;
+  };
+  var renderPack = React.useCallback(function (pack) {
+    return React__default.createElement(PackRow, {
+      key: pack.key,
+      onClick: function onClick() {
+        return onSelectPack == null ? void 0 : onSelectPack(pack);
+      }
+    }, React__default.createElement(PackIconContainer, null, React__default.createElement("img", {
+      src: getImageSrc(pack.image),
+      alt: pack.title
+    })), React__default.createElement(PackDetails, null, React__default.createElement(PackName, null, pack.title), React__default.createElement(PackPrice, null, "$", pack.priceUSD), pack.description && React__default.createElement(PackDescription, null, pack.description)), React__default.createElement(Controls$2, null, React__default.createElement(CTAButton, {
       icon: React__default.createElement(fa.FaCartPlus, null),
       label: "Add",
       onClick: function onClick(e) {
         e.stopPropagation();
         onAddToCart(pack);
       }
-    }));
-  }, [onAddToCart]);
-  var renderPack = React.useCallback(function (pack) {
-    return React__default.createElement(ShoppingCardHorizontal, {
-      key: pack.key,
-      title: pack.title,
-      description: pack.description,
-      imageUrl: pack.image,
-      footer: renderPackFooter(pack),
-      onClick: function onClick() {
-        return onSelectPack == null ? void 0 : onSelectPack(pack);
-      }
-    });
-  }, [onSelectPack, renderPackFooter]);
+    })));
+  }, [onSelectPack, onAddToCart]);
   return React__default.createElement(ScrollableContent, {
     items: filteredPacks,
     renderItem: renderPack,
@@ -58968,19 +58905,38 @@ var StorePacksSection = function StorePacksSection(_ref) {
       onChange: setSearchQuery,
       placeholder: 'Search packs...'
     },
-    layout: "grid",
-    gridColumns: 2,
+    layout: "list",
     maxHeight: "420px"
   });
 };
-var FooterContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "StorePacksSection__FooterContainer",
+var PackRow = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StorePacksSection__PackRow",
   componentId: "sc-ulazq3-0"
-})(["display:flex;align-items:center;justify-content:space-between;gap:8px;"]);
-var Price = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "StorePacksSection__Price",
+})(["display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;border-bottom:1px solid rgba(255,255,255,0.1);cursor:pointer;&:last-child{border-bottom:none;}&:hover{background:rgba(255,255,255,0.04);}"]);
+var PackIconContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StorePacksSection__PackIconContainer",
   componentId: "sc-ulazq3-1"
-})(["font-family:'Press Start 2P',cursive;font-size:0.6rem;color:#fef08a;"]);
+})(["width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;img{width:100%;height:100%;object-fit:cover;}"]);
+var PackDetails = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StorePacksSection__PackDetails",
+  componentId: "sc-ulazq3-2"
+})(["flex:1;display:flex;flex-direction:column;gap:0.25rem;min-width:0;"]);
+var PackName = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StorePacksSection__PackName",
+  componentId: "sc-ulazq3-3"
+})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;"]);
+var PackPrice = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StorePacksSection__PackPrice",
+  componentId: "sc-ulazq3-4"
+})(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:#fef08a;"]);
+var PackDescription = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StorePacksSection__PackDescription",
+  componentId: "sc-ulazq3-5"
+})(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:rgba(255,255,255,0.7);line-height:1.4;"]);
+var Controls$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StorePacksSection__Controls",
+  componentId: "sc-ulazq3-6"
+})(["display:flex;align-items:center;flex-shrink:0;"]);
 
 var StoreItemDetails = function StoreItemDetails(_ref) {
   var item = _ref.item,
@@ -59070,7 +59026,8 @@ var Store = function Store(_ref) {
     defaultActiveTab = _ref.defaultActiveTab,
     _ref$textInputItemKey = _ref.textInputItemKeys,
     textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey,
-    customPacksContent = _ref.customPacksContent;
+    customPacksContent = _ref.customPacksContent,
+    customWalletContent = _ref.customWalletContent;
   var _useState = React.useState(null),
     selectedPack = _useState[0],
     setSelectedPack = _useState[1];
@@ -59214,6 +59171,11 @@ var Store = function Store(_ref) {
         userAccountType: userAccountType,
         textInputItemKeys: textInputItemKeys
       })
+    },
+    wallet: {
+      id: 'wallet',
+      title: 'Wallet',
+      content: customWalletContent != null ? customWalletContent : null
     }
   };
   var tabs = availableTabIds.map(function (id) {