@rpg-engine/long-bow 0.8.130 → 0.8.133

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface IPaymentMethodModalProps {
+    dcBalance: number;
+    onPayWithDC: () => void;
+    onPayWithCard: () => void;
+    onClose: () => void;
+}
+export declare const PaymentMethodModal: React.FC<IPaymentMethodModalProps>;

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

@@ -8,6 +8,9 @@ export interface IStoreProps {
     atlasIMG: string;
     onPurchase: (purchase: Partial<IPurchase>) => Promise<boolean>;
     onShowHistory?: () => void;
+    onShowWallet?: () => void;
+    walletLabel?: string;
+    packsTabLabel?: string;
     userAccountType: UserAccountTypes;
     loading?: boolean;
     error?: string;

package/dist/index.d.ts

@@ -61,6 +61,7 @@ export * from './components/Store/CartView';
 export * from './components/Store/hooks/useStoreCart';
 export * from './components/Store/MetadataCollector';
 export * from './components/Store/Store';
+export * from './components/Store/PaymentMethodModal';
 export * from './components/Table/Table';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';

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

@@ -25,6 +25,7 @@ var ai = require('react-icons/ai');
 var reactColorful = require('react-colorful');
 require('rpgui/rpgui.css');
 require('rpgui/rpgui.min.js');
+var gi = require('react-icons/gi');
 var capitalize = _interopDefault(require('lodash/capitalize'));
 
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
@@ -58647,7 +58648,7 @@ var StoreItemRow = function StoreItemRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  })), React__default.createElement(ItemDetails$2, null, React__default.createElement(ItemName$2, null, item.name), React__default.createElement(ItemPrice$1, null, "$", item.price), React__default.createElement(ItemDescription, null, item.description)), React__default.createElement(Controls$1, null, showTextInput ? React__default.createElement(TextInput, {
+  })), React__default.createElement(ItemDetails$2, null, React__default.createElement(ItemName$2, null, item.name), React__default.createElement(ItemPrice$1, null, "$", item.price, item.dcPrice ? " \xB7 " + item.dcPrice.toLocaleString() + " DC" : ''), React__default.createElement(ItemDescription, null, item.description)), React__default.createElement(Controls$1, null, showTextInput ? React__default.createElement(TextInput, {
     type: "text",
     value: textInputValue,
     placeholder: textInputPlaceholder,
@@ -58953,7 +58954,7 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
   }, React__default.createElement(fa.FaArrowLeft, null), React__default.createElement("span", null, "Back"))), React__default.createElement(Content$5, null, React__default.createElement(DetailsGrid, null, React__default.createElement(ItemIcon, null, React__default.createElement("img", {
     src: getImageSrc(),
     alt: item.name
-  })), React__default.createElement(ItemInfo$2, null, React__default.createElement(ItemName$3, null, item.name), React__default.createElement(ItemPrice$2, null, "$", 'priceUSD' in item ? item.priceUSD : item.price), React__default.createElement(Description$6, null, item.description))), React__default.createElement(Actions, null, React__default.createElement(CTAButton, {
+  })), React__default.createElement(ItemInfo$2, null, React__default.createElement(ItemName$3, null, item.name), React__default.createElement(ItemPrice$2, null, "$", 'priceUSD' in item ? item.priceUSD : item.price, item.dcPrice ? " \xB7 " + item.dcPrice.toLocaleString() + " DC" : ''), React__default.createElement(Description$6, null, item.description))), React__default.createElement(Actions, null, React__default.createElement(CTAButton, {
     icon: React__default.createElement(fa.FaCartPlus, null),
     label: "Add to Cart",
     onClick: function onClick() {
@@ -59015,6 +59016,8 @@ var Store = function Store(_ref) {
     atlasIMG = _ref.atlasIMG,
     _onPurchase2 = _ref.onPurchase,
     onShowHistory = _ref.onShowHistory,
+    onShowWallet = _ref.onShowWallet,
+    walletLabel = _ref.walletLabel,
     userAccountType = _ref.userAccountType,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
@@ -59027,7 +59030,9 @@ var Store = function Store(_ref) {
     _ref$textInputItemKey = _ref.textInputItemKeys,
     textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey,
     customPacksContent = _ref.customPacksContent,
-    customWalletContent = _ref.customWalletContent;
+    customWalletContent = _ref.customWalletContent,
+    _ref$packsTabLabel = _ref.packsTabLabel,
+    packsTabLabel = _ref$packsTabLabel === void 0 ? 'Packs' : _ref$packsTabLabel;
   var _useState = React.useState(null),
     selectedPack = _useState[0],
     setSelectedPack = _useState[1];
@@ -59151,7 +59156,7 @@ var Store = function Store(_ref) {
     },
     packs: {
       id: 'packs',
-      title: 'Packs',
+      title: packsTabLabel,
       content: customPacksContent != null ? customPacksContent : React__default.createElement(StorePacksSection, {
         packs: packs.filter(function (pack) {
           return pack.priceUSD < 9.99;
@@ -59232,10 +59237,14 @@ var Store = function Store(_ref) {
     onAddToCart: function onAddToCart() {
       return handleAddPackToCart(selectedPack);
     }
-  }) : React__default.createElement(Container$N, null, React__default.createElement(TopBar$1, null, React__default.createElement(HistoryButton, null, onShowHistory && React__default.createElement(CTAButton, {
+  }) : React__default.createElement(Container$N, null, React__default.createElement(TopBar$1, null, React__default.createElement(LeftButtons, null, onShowHistory && React__default.createElement(CTAButton, {
     icon: React__default.createElement(fa.FaHistory, null),
     label: "History",
     onClick: onShowHistory
+  }), onShowWallet && React__default.createElement(CTAButton, {
+    icon: React__default.createElement(fa.FaWallet, null),
+    label: walletLabel != null ? walletLabel : 'DC Wallet',
+    onClick: onShowWallet
   })), React__default.createElement(CartButton, null, React__default.createElement(CTAButton, {
     icon: React__default.createElement(fa.FaShoppingCart, null),
     label: getTotalItems() + " items ($" + getTotalPrice().toFixed(2) + ")",
@@ -59266,10 +59275,10 @@ var TopBar$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Store__TopBar",
   componentId: "sc-64dj00-1"
 })(["display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding:0 1rem;flex-shrink:0;margin-top:0.5rem;"]);
-var HistoryButton = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "Store__HistoryButton",
+var LeftButtons = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Store__LeftButtons",
   componentId: "sc-64dj00-2"
-})(["min-width:fit-content;margin-right:auto;"]);
+})(["display:flex;gap:0.5rem;min-width:fit-content;margin-right:auto;"]);
 var CartButton = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Store__CartButton",
   componentId: "sc-64dj00-3"
@@ -59299,6 +59308,64 @@ var ErrorMessage$2 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-64dj00-9"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.red);
 
+var PaymentMethodModal = function PaymentMethodModal(_ref) {
+  var dcBalance = _ref.dcBalance,
+    onPayWithDC = _ref.onPayWithDC,
+    onPayWithCard = _ref.onPayWithCard,
+    onClose = _ref.onClose;
+  var stopPropagation = React.useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Overlay$4, {
+    onPointerDown: onClose
+  }), React__default.createElement(ModalContainer$1, null, React__default.createElement(ModalContent$1, {
+    onClick: stopPropagation,
+    onTouchStart: stopPropagation,
+    onPointerDown: stopPropagation
+  }, React__default.createElement(Title$f, null, "How would you like to pay?"), React__default.createElement(OptionButton, {
+    onClick: onPayWithDC,
+    className: "rpgui-button"
+  }, React__default.createElement(gi.GiCrystalBall, null), React__default.createElement(OptionLabel, null, React__default.createElement("span", null, "Pay with DC"), React__default.createElement(OptionBalance, null, dcBalance.toLocaleString(), " DC available"))), React__default.createElement(OptionButton, {
+    onClick: onPayWithCard,
+    className: "rpgui-button"
+  }, React__default.createElement(fa.FaCreditCard, null), React__default.createElement(OptionLabel, null, React__default.createElement("span", null, "Pay with Credit Card"))), React__default.createElement(CancelWrapper, null, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: onClose
+  }, "Cancel")))));
+};
+var Overlay$4 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "PaymentMethodModal__Overlay",
+  componentId: "sc-1dxy6lr-0"
+})(["position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1000;"]);
+var ModalContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "PaymentMethodModal__ModalContainer",
+  componentId: "sc-1dxy6lr-1"
+})(["position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;"]);
+var ModalContent$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "PaymentMethodModal__ModalContent",
+  componentId: "sc-1dxy6lr-2"
+})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:24px;min-width:320px;max-width:90%;display:flex;flex-direction:column;gap:12px;pointer-events:auto;animation:scaleIn 0.2s ease-out;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}"]);
+var Title$f = /*#__PURE__*/styled__default.h3.withConfig({
+  displayName: "PaymentMethodModal__Title",
+  componentId: "sc-1dxy6lr-3"
+})(["margin:0 0 8px;font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;text-align:center;"]);
+var OptionButton = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "PaymentMethodModal__OptionButton",
+  componentId: "sc-1dxy6lr-4"
+})(["display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;cursor:pointer;font-family:'Press Start 2P',cursive;font-size:0.65rem;svg{font-size:1.25rem;flex-shrink:0;}"]);
+var OptionLabel = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "PaymentMethodModal__OptionLabel",
+  componentId: "sc-1dxy6lr-5"
+})(["display:flex;flex-direction:column;align-items:flex-start;gap:4px;"]);
+var OptionBalance = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "PaymentMethodModal__OptionBalance",
+  componentId: "sc-1dxy6lr-6"
+})(["font-size:0.55rem;color:#fef08a;opacity:0.8;"]);
+var CancelWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "PaymentMethodModal__CancelWrapper",
+  componentId: "sc-1dxy6lr-7"
+})(["display:flex;justify-content:center;margin-top:4px;filter:grayscale(0.6);"]);
+
 var TextArea = function TextArea(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return React__default.createElement("textarea", Object.assign({}, props));
@@ -59629,7 +59696,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React__default.createElement(Container$O, null, React__default.createElement(Title$f, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Container$O, null, React__default.createElement(Title$g, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -59661,7 +59728,7 @@ var Container$O = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$f = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$g = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
@@ -59890,6 +59957,7 @@ exports.PartyInvite = PartyInvite;
 exports.PartyManager = PartyManager;
 exports.PartyManagerRow = PartyManagerRow;
 exports.PartyRow = PartyRow;
+exports.PaymentMethodModal = PaymentMethodModal;
 exports.PlayersRow = PlayersRow;
 exports.ProgressBar = ProgressBar$1;
 exports.PropertySelect = PropertySelect;