@rpg-engine/long-bow 0.8.133 → 0.8.134

package/dist/long-bow.esm.js

@@ -5,7 +5,7 @@ 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, isMobileOrTablet, RewardType, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getLevelFromXP, getSkillConstants, getLevelFromSPTiered, getXPForLevel, getSPForLevelTiered, 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, FaClipboardList, FaChevronUp, FaChevronDown, FaReddit, FaTrash, FaShoppingBag, FaInfoCircle, FaCartPlus, FaArrowLeft, FaHistory, FaWallet, FaShoppingCart, FaCreditCard } from 'react-icons/fa';
+import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaClipboardList, FaChevronUp, FaChevronDown, FaReddit, FaTrash, FaShoppingBag, FaInfoCircle, FaCartPlus, FaArrowLeft, FaHistory, FaWallet, FaShoppingCart } from 'react-icons/fa';
 import { RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
 import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import Draggable from 'react-draggable';
@@ -16,7 +16,6 @@ import { AiFillFilter, AiOutlineFilter, AiFillCaretRight } from 'react-icons/ai'
 import { HexColorPicker } from 'react-colorful';
 import 'rpgui/rpgui.css';
 import 'rpgui/rpgui.min.js';
-import { GiCrystalBall } from 'react-icons/gi';
 import capitalize from 'lodash-es/capitalize';
 
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
@@ -59310,25 +59309,46 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
     onPayWithDC = _ref.onPayWithDC,
     onPayWithCard = _ref.onPayWithCard,
     onClose = _ref.onClose;
+  var _useState = useState('card'),
+    selected = _useState[0],
+    setSelected = _useState[1];
   var stopPropagation = useCallback(function (e) {
     e.stopPropagation();
   }, []);
+  var handleConfirm = useCallback(function () {
+    if (selected === 'dc') {
+      onPayWithDC();
+    } else {
+      onPayWithCard();
+    }
+  }, [selected, onPayWithDC, onPayWithCard]);
   return React.createElement(ModalPortal, null, React.createElement(Overlay$4, {
     onPointerDown: onClose
   }), React.createElement(ModalContainer$1, null, React.createElement(ModalContent$1, {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React.createElement(Title$f, null, "How would you like to pay?"), React.createElement(OptionButton, {
-    onClick: onPayWithDC,
-    className: "rpgui-button"
-  }, React.createElement(GiCrystalBall, null), React.createElement(OptionLabel, null, React.createElement("span", null, "Pay with DC"), React.createElement(OptionBalance, null, dcBalance.toLocaleString(), " DC available"))), React.createElement(OptionButton, {
-    onClick: onPayWithCard,
-    className: "rpgui-button"
-  }, React.createElement(FaCreditCard, null), React.createElement(OptionLabel, null, React.createElement("span", null, "Pay with Credit Card"))), React.createElement(CancelWrapper, null, React.createElement(Button, {
+  }, React.createElement(Header$a, null, React.createElement(Title$f, null, "How would you like to pay?"), React.createElement(CloseButton$a, {
+    onPointerDown: onClose,
+    "aria-label": "Close"
+  }, React.createElement(FaTimes, null))), React.createElement(Options, null, React.createElement(RadioOption, {
+    "$selected": selected === 'card',
+    onPointerDown: function onPointerDown() {
+      return setSelected('card');
+    }
+  }, React.createElement(RadioCircle, {
+    "$selected": selected === 'card'
+  }), React.createElement(OptionText, null, React.createElement(OptionLabel, null, "Credit Card"), React.createElement(OptionSub, null, "Stripe secure checkout"))), React.createElement(RadioOption, {
+    "$selected": selected === 'dc',
+    onPointerDown: function onPointerDown() {
+      return setSelected('dc');
+    }
+  }, React.createElement(RadioCircle, {
+    "$selected": selected === 'dc'
+  }), React.createElement(OptionText, null, React.createElement(OptionLabel, null, "Definya Coin"), React.createElement(OptionSub, null, dcBalance.toLocaleString(), " DC available")))), React.createElement(ConfirmRow, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
-    onPointerDown: onClose
-  }, "Cancel")))));
+    onPointerDown: handleConfirm
+  }, "Confirm")))));
 };
 var Overlay$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__Overlay",
@@ -59341,27 +59361,59 @@ var ModalContainer$1 = /*#__PURE__*/styled.div.withConfig({
 var ModalContent$1 = /*#__PURE__*/styled.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;}}"]);
+})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 24px;min-width:300px;max-width:90%;display:flex;flex-direction:column;gap:16px;pointer-events:auto;animation:scaleIn 0.15s ease-out;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}"]);
+var Header$a = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PaymentMethodModal__Header",
+  componentId: "sc-1dxy6lr-3"
+})(["display:flex;align-items:center;justify-content:space-between;"]);
 var Title$f = /*#__PURE__*/styled.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.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.div.withConfig({
-  displayName: "PaymentMethodModal__OptionLabel",
+})(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
+var CloseButton$a = /*#__PURE__*/styled.button.withConfig({
+  displayName: "PaymentMethodModal__CloseButton",
   componentId: "sc-1dxy6lr-5"
-})(["display:flex;flex-direction:column;align-items:flex-start;gap:4px;"]);
-var OptionBalance = /*#__PURE__*/styled.span.withConfig({
-  displayName: "PaymentMethodModal__OptionBalance",
+})(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;&:hover{color:#ffffff;}"]);
+var Options = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PaymentMethodModal__Options",
   componentId: "sc-1dxy6lr-6"
-})(["font-size:0.55rem;color:#fef08a;opacity:0.8;"]);
-var CancelWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PaymentMethodModal__CancelWrapper",
+})(["display:flex;flex-direction:column;gap:8px;"]);
+var RadioOption = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PaymentMethodModal__RadioOption",
   componentId: "sc-1dxy6lr-7"
-})(["display:flex;justify-content:center;margin-top:4px;filter:grayscale(0.6);"]);
+})(["display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid ", ";border-radius:6px;background:", ";cursor:pointer;transition:border-color 0.15s,background 0.15s;&:hover{border-color:#f59e0b;}"], function (_ref2) {
+  var $selected = _ref2.$selected;
+  return $selected ? '#f59e0b' : 'rgba(255,255,255,0.15)';
+}, function (_ref3) {
+  var $selected = _ref3.$selected;
+  return $selected ? 'rgba(245,158,11,0.1)' : 'transparent';
+});
+var RadioCircle = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PaymentMethodModal__RadioCircle",
+  componentId: "sc-1dxy6lr-8"
+})(["width:16px;height:16px;border-radius:50%;border:2px solid ", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;&::after{content:'';width:8px;height:8px;border-radius:50%;background:#f59e0b;opacity:", ";transition:opacity 0.15s;}"], function (_ref4) {
+  var $selected = _ref4.$selected;
+  return $selected ? '#f59e0b' : 'rgba(255,255,255,0.4)';
+}, function (_ref5) {
+  var $selected = _ref5.$selected;
+  return $selected ? 1 : 0;
+});
+var OptionText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PaymentMethodModal__OptionText",
+  componentId: "sc-1dxy6lr-9"
+})(["display:flex;flex-direction:column;gap:3px;"]);
+var OptionLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "PaymentMethodModal__OptionLabel",
+  componentId: "sc-1dxy6lr-10"
+})(["font-family:'Press Start 2P',cursive;font-size:0.65rem;color:#ffffff;"]);
+var OptionSub = /*#__PURE__*/styled.span.withConfig({
+  displayName: "PaymentMethodModal__OptionSub",
+  componentId: "sc-1dxy6lr-11"
+})(["font-family:'Press Start 2P',cursive;font-size:0.5rem;color:rgba(255,255,255,0.55);"]);
+var ConfirmRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PaymentMethodModal__ConfirmRow",
+  componentId: "sc-1dxy6lr-12"
+})(["display:flex;justify-content:center;margin-top:4px;"]);
 
 var TextArea = function TextArea(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
@@ -59397,7 +59449,7 @@ var TimeWidget = function TimeWidget(_ref) {
   return React.createElement(Draggable, {
     scale: scale,
     cancel: ".time-widget-close,.time-widget-container,.time-widget-container *"
-  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$a, {
+  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$b, {
     onPointerDown: onClose,
     className: "time-widget-close"
   }, "X"), React.createElement(DayNightContainer, {
@@ -59414,7 +59466,7 @@ var Time = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$a = /*#__PURE__*/styled.p.withConfig({
+var CloseButton$b = /*#__PURE__*/styled.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);