@rpg-engine/long-bow 0.8.162 → 0.8.163

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

@@ -21,6 +21,7 @@ export interface IStoreProps {
     textInputItemKeys?: string[];
     customPacksContent?: React.ReactNode;
     customWalletContent?: React.ReactNode;
+    packsBadge?: string;
 }
 export declare const Store: React.FC<IStoreProps>;
 export {};

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

@@ -2,7 +2,7 @@ import { IItemPack } from '@rpg-engine/shared';
 import React from 'react';
 interface IStorePacksSectionProps {
     packs: IItemPack[];
-    onAddToCart: (pack: IItemPack) => void;
+    onAddToCart: (pack: IItemPack, quantity: number) => void;
     onSelectPack?: (pack: IItemPack) => void;
     atlasJSON?: any;
     atlasIMG?: string;

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

@@ -70446,12 +70446,48 @@ var usePackFiltering = function usePackFiltering(packs) {
   };
 };
 
-var StorePacksSection = function StorePacksSection(_ref) {
-  var packs = _ref.packs,
+var PackRowItem = function PackRowItem(_ref) {
+  var pack = _ref.pack,
     onAddToCart = _ref.onAddToCart,
-    onSelectPack = _ref.onSelectPack,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG;
+    renderPackIcon = _ref.renderPackIcon;
+  var _useQuantityControl = useQuantityControl(),
+    quantity = _useQuantityControl.quantity,
+    handleQuantityChange = _useQuantityControl.handleQuantityChange,
+    handleBlur = _useQuantityControl.handleBlur,
+    incrementQuantity = _useQuantityControl.incrementQuantity,
+    decrementQuantity = _useQuantityControl.decrementQuantity,
+    resetQuantity = _useQuantityControl.resetQuantity;
+  var handleAdd = function handleAdd() {
+    onAddToCart(pack, quantity);
+    resetQuantity();
+  };
+  return React__default.createElement(PackRow, null, React__default.createElement(LeftSection$1, null, React__default.createElement(PackIconContainer, null, renderPackIcon(pack)), 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(ArrowsContainer$1, null, React__default.createElement(SelectArrow, {
+    direction: "left",
+    onPointerDown: decrementQuantity,
+    size: 24
+  }), React__default.createElement(QuantityInput$1, {
+    type: "number",
+    value: quantity,
+    onChange: handleQuantityChange,
+    onBlur: handleBlur,
+    min: 1,
+    max: 99,
+    className: "rpgui-input"
+  }), React__default.createElement(SelectArrow, {
+    direction: "right",
+    onPointerDown: incrementQuantity,
+    size: 24
+  })), React__default.createElement(CTAButton, {
+    icon: React__default.createElement(fa.FaCartPlus, null),
+    label: "Add",
+    onClick: handleAdd
+  })));
+};
+var StorePacksSection = function StorePacksSection(_ref2) {
+  var packs = _ref2.packs,
+    onAddToCart = _ref2.onAddToCart,
+    atlasJSON = _ref2.atlasJSON,
+    atlasIMG = _ref2.atlasIMG;
   var _usePackFiltering = usePackFiltering(packs),
     searchQuery = _usePackFiltering.searchQuery,
     setSearchQuery = _usePackFiltering.setSearchQuery,
@@ -70480,20 +70516,13 @@ var StorePacksSection = function StorePacksSection(_ref) {
     });
   }, [atlasJSON, atlasIMG]);
   var renderPack = React.useCallback(function (pack) {
-    return React__default.createElement(PackRow, {
+    return React__default.createElement(PackRowItem, {
       key: pack.key,
-      onClick: function onClick() {
-        return onSelectPack == null ? void 0 : onSelectPack(pack);
-      }
-    }, React__default.createElement(LeftSection$1, null, React__default.createElement(PackIconContainer, null, renderPackIcon(pack)), 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);
-      }
-    })));
-  }, [onSelectPack, onAddToCart]);
+      pack: pack,
+      onAddToCart: onAddToCart,
+      renderPackIcon: renderPackIcon
+    });
+  }, [onAddToCart, renderPackIcon]);
   return React__default.createElement(ScrollableContent, {
     items: filteredPacks,
     renderItem: renderPack,
@@ -70510,7 +70539,7 @@ var StorePacksSection = function StorePacksSection(_ref) {
 var PackRow = /*#__PURE__*/styled__default(ItemRowWrapper).withConfig({
   displayName: "StorePacksSection__PackRow",
   componentId: "sc-ulazq3-0"
-})(["cursor:pointer;"]);
+})([""]);
 var LeftSection$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StorePacksSection__LeftSection",
   componentId: "sc-ulazq3-1"
@@ -70538,7 +70567,15 @@ var PackDescription = /*#__PURE__*/styled__default.div.withConfig({
 var Controls$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StorePacksSection__Controls",
   componentId: "sc-ulazq3-7"
-})(["display:flex;align-items:center;flex-shrink:0;"]);
+})(["display:flex;align-items:center;gap:0.5rem;flex-shrink:0;"]);
+var ArrowsContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StorePacksSection__ArrowsContainer",
+  componentId: "sc-ulazq3-8"
+})(["position:relative;display:flex;align-items:center;width:120px;height:42px;justify-content:space-between;"]);
+var QuantityInput$1 = /*#__PURE__*/styled__default.input.withConfig({
+  displayName: "StorePacksSection__QuantityInput",
+  componentId: "sc-ulazq3-9"
+})(["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 StoreItemDetails = function StoreItemDetails(_ref) {
   var item = _ref.item,
@@ -70634,7 +70671,8 @@ var Store = function Store(_ref) {
     customPacksContent = _ref.customPacksContent,
     customWalletContent = _ref.customWalletContent,
     _ref$packsTabLabel = _ref.packsTabLabel,
-    packsTabLabel = _ref$packsTabLabel === void 0 ? 'Packs' : _ref$packsTabLabel;
+    packsTabLabel = _ref$packsTabLabel === void 0 ? 'Packs' : _ref$packsTabLabel,
+    packsBadge = _ref.packsBadge;
   var _useState = React.useState(null),
     selectedPack = _useState[0],
     setSelectedPack = _useState[1];
@@ -70665,7 +70703,10 @@ var Store = function Store(_ref) {
   var _useState4 = React.useState(null),
     currentMetadataItem = _useState4[0],
     setCurrentMetadataItem = _useState4[1];
-  var handleAddPackToCart = function handleAddPackToCart(pack) {
+  var handleAddPackToCart = function handleAddPackToCart(pack, quantity) {
+    if (quantity === void 0) {
+      quantity = 1;
+    }
     var packItem = {
       key: pack.key,
       name: pack.title,
@@ -70697,7 +70738,7 @@ var Store = function Store(_ref) {
       maxStackSize: 1,
       isUsable: false
     };
-    handleAddToCart(packItem, 1);
+    handleAddToCart(packItem, quantity);
   };
   var filterItems = function filterItems(itemsToFilter, type) {
     return itemsToFilter.filter(function (item) {
@@ -70764,7 +70805,11 @@ var Store = function Store(_ref) {
     },
     packs: {
       id: 'packs',
-      title: packsTabLabel,
+      title: packsBadge ? React__default.createElement(TabLabelWithBadge, null, packsTabLabel, React__default.createElement(LabelPill, {
+        background: "#f59e0b",
+        borderColor: "#f59e0b",
+        color: "#000"
+      }, packsBadge)) : packsTabLabel,
       icon: React__default.createElement(Gift.Gift, {
         width: 18,
         height: 18
@@ -70922,13 +70967,17 @@ var CartInfo = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Store__CartInfo",
   componentId: "sc-64dj00-8"
 })(["display:flex;align-items:center;gap:0.75rem;font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;span:last-child{color:#fef08a;}"]);
+var TabLabelWithBadge = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "Store__TabLabelWithBadge",
+  componentId: "sc-64dj00-9"
+})(["display:inline-flex;align-items:center;gap:5px;"]);
 var LoadingMessage$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Store__LoadingMessage",
-  componentId: "sc-64dj00-9"
+  componentId: "sc-64dj00-10"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.white);
 var ErrorMessage$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Store__ErrorMessage",
-  componentId: "sc-64dj00-10"
+  componentId: "sc-64dj00-11"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.red);
 
 var PaymentMethodModal = function PaymentMethodModal(_ref) {
@@ -71254,7 +71303,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     onPointerDown: function onPointerDown() {
       return onLeftClick();
     }
-  }), React__default.createElement(QuantityInput$1, {
+  }), React__default.createElement(QuantityInput$2, {
     type: "text",
     value: inputQty,
     onChange: handleQuantityChange,
@@ -71304,7 +71353,7 @@ var QuantityContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingItemRow__QuantityContainer",
   componentId: "sc-mja0b5-6"
 })(["display:flex;min-width:90px;width:40%;justify-content:flex-end;align-items:center;flex:30%;gap:2px;position:relative;"]);
-var QuantityInput$1 = /*#__PURE__*/styled__default.input.withConfig({
+var QuantityInput$2 = /*#__PURE__*/styled__default.input.withConfig({
   displayName: "TradingItemRow__QuantityInput",
   componentId: "sc-mja0b5-7"
 })(["width:30px;text-align:center;background-color:", ";color:white;border:none;padding:1px;font-size:", ";position:relative;right:4px;"], uiColors.darkGray, uiFonts.size.small);