@rpg-engine/long-bow 0.8.198 → 0.8.199

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

@@ -1,7 +1,7 @@
 import { IItemPack, IPurchase, IProductBlueprint, UserAccountTypes } from '@rpg-engine/shared';
 import React from 'react';
 import { IFeaturedItem } from './FeaturedBanner';
-declare type TabId = 'premium' | 'packs' | 'items' | 'wallet' | 'history';
+declare type TabId = 'premium' | 'packs' | 'items' | 'wallet' | 'history' | 'redeem';
 export interface IStoreProps {
     items: IProductBlueprint[];
     packs?: IItemPack[];
@@ -72,6 +72,16 @@ export interface IStoreProps {
     onBuyDC?: () => void;
     /** Currency symbol to display (e.g. "$" for USD, "R$" for BRL). Defaults to "$". */
     currencySymbol?: string;
+    /** Callback to redeem a voucher code. When provided, the Redeem tab is shown. */
+    onRedeem?: (code: string) => Promise<{
+        success: boolean;
+        dcAmount?: number;
+        error?: string;
+    }>;
+    /** Called when the voucher code input gains focus. */
+    onRedeemInputFocus?: () => void;
+    /** Called when the voucher code input loses focus. */
+    onRedeemInputBlur?: () => void;
 }
 export type { IFeaturedItem };
 export declare const Store: React.FC<IStoreProps>;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface IStoreRedeemSectionProps {
+    onRedeem: (code: string) => Promise<{
+        success: boolean;
+        dcAmount?: number;
+        error?: string;
+    }>;
+    onInputFocus?: () => void;
+    onInputBlur?: () => void;
+}
+export declare const StoreRedeemSection: React.FC<IStoreRedeemSectionProps>;

package/dist/index.d.ts

@@ -85,6 +85,7 @@ export * from './components/Store/PaymentMethodModal';
 export * from './components/Store/PurchaseSuccess';
 export * from './components/Store/Store';
 export * from './components/Store/StoreBadges';
+export * from './components/Store/sections/StoreRedeemSection';
 export * from './components/Store/TrustBar';
 export * from './components/Table/Table';
 export * from './components/TextArea';

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

@@ -73180,6 +73180,173 @@ var QuantityInput$1 = /*#__PURE__*/styled__default.input.withConfig({
   componentId: "sc-ulazq3-11"
 })(["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 StoreRedeemSection = function StoreRedeemSection(_ref) {
+  var onRedeem = _ref.onRedeem,
+    onInputFocus = _ref.onInputFocus,
+    onInputBlur = _ref.onInputBlur;
+  var _useState = React.useState(''),
+    code = _useState[0],
+    setCode = _useState[1];
+  var _useState2 = React.useState('idle'),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = React.useState(),
+    dcAmount = _useState3[0],
+    setDcAmount = _useState3[1];
+  var _useState4 = React.useState(''),
+    errorMessage = _useState4[0],
+    setErrorMessage = _useState4[1];
+  var canSubmit = code.trim().length > 0 && status !== 'loading';
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var normalizedCode, result, _result$error;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (canSubmit) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            normalizedCode = code.trim().toUpperCase();
+            setStatus('loading');
+            setErrorMessage('');
+            _context.prev = 5;
+            _context.next = 8;
+            return onRedeem(normalizedCode);
+          case 8:
+            result = _context.sent;
+            if (result.success) {
+              setStatus('success');
+              setDcAmount(result.dcAmount);
+            } else {
+              setStatus('error');
+              setErrorMessage((_result$error = result.error) != null ? _result$error : 'Redemption failed. Please try again.');
+            }
+            _context.next = 16;
+            break;
+          case 12:
+            _context.prev = 12;
+            _context.t0 = _context["catch"](5);
+            setStatus('error');
+            setErrorMessage('Something went wrong. Please try again.');
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[5, 12]]);
+    }));
+    return function handleSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handleReset = function handleReset() {
+    setCode('');
+    setStatus('idle');
+    setDcAmount(undefined);
+    setErrorMessage('');
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Enter') {
+      void handleSubmit();
+    }
+  };
+  if (status === 'success') {
+    return React__default.createElement(Container$O, null, React__default.createElement(ResultContainer, null, React__default.createElement(SuccessIcon, null, React__default.createElement(fa.FaCheckCircle, {
+      size: 32
+    })), React__default.createElement(SuccessTitle, null, "Code Redeemed!"), dcAmount != null && React__default.createElement(DCAmountDisplay, null, "+", dcAmount.toLocaleString(), " DC"), React__default.createElement(SuccessHint, null, "Your wallet balance has been updated."), React__default.createElement(ButtonWrapper$3, null, React__default.createElement(CTAButton, {
+      icon: React__default.createElement(fa.FaTicketAlt, null),
+      label: "Redeem Another",
+      onClick: handleReset
+    }))));
+  }
+  if (status === 'error') {
+    return React__default.createElement(Container$O, null, React__default.createElement(ResultContainer, null, React__default.createElement(ErrorIcon, null, React__default.createElement(fa.FaExclamationCircle, {
+      size: 32
+    })), React__default.createElement(ErrorTitle, null, errorMessage), React__default.createElement(ButtonWrapper$3, null, React__default.createElement(CTAButton, {
+      icon: React__default.createElement(fa.FaTicketAlt, null),
+      label: "Try Again",
+      onClick: handleReset
+    }))));
+  }
+  return React__default.createElement(Container$O, null, React__default.createElement(Title$p, null, "Redeem a Voucher Code"), React__default.createElement(Description$7, null, "Enter your voucher code below to receive Definya Coins."), React__default.createElement(InputRow, null, React__default.createElement(CodeInput, {
+    type: "text",
+    value: code,
+    onChange: function onChange(e) {
+      return setCode(e.target.value);
+    },
+    onFocus: onInputFocus,
+    onBlur: onInputBlur,
+    onKeyDown: handleKeyDown,
+    placeholder: "Enter code...",
+    disabled: status === 'loading',
+    autoComplete: "off",
+    spellCheck: false
+  })), React__default.createElement(ButtonWrapper$3, null, React__default.createElement(CTAButton, {
+    icon: React__default.createElement(fa.FaTicketAlt, null),
+    label: status === 'loading' ? 'Redeeming...' : 'Redeem Code',
+    onClick: function onClick() {
+      void handleSubmit();
+    },
+    disabled: !canSubmit,
+    fullWidth: true
+  })));
+};
+var Container$O = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreRedeemSection__Container",
+  componentId: "sc-1pzosml-0"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.5rem;max-width:420px;margin:0 auto;gap:1rem;"]);
+var Title$p = /*#__PURE__*/styled__default.h3.withConfig({
+  displayName: "StoreRedeemSection__Title",
+  componentId: "sc-1pzosml-1"
+})(["font-family:'Press Start 2P',cursive;font-size:0.85rem;color:", ";margin:0;text-align:center;"], uiColors.white);
+var Description$7 = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "StoreRedeemSection__Description",
+  componentId: "sc-1pzosml-2"
+})(["font-family:'Press Start 2P',cursive;font-size:0.55rem;color:", ";margin:0;text-align:center;line-height:1.6;"], uiColors.lightGray);
+var InputRow = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreRedeemSection__InputRow",
+  componentId: "sc-1pzosml-3"
+})(["width:100%;"]);
+var CodeInput = /*#__PURE__*/styled__default.input.withConfig({
+  displayName: "StoreRedeemSection__CodeInput",
+  componentId: "sc-1pzosml-4"
+})(["width:100%;padding:12px 14px;font-family:'Press Start 2P',cursive;font-size:0.75rem;color:", ";background:rgba(0,0,0,0.4);border:2px solid #f59e0b;border-radius:4px;text-transform:uppercase;letter-spacing:2px;text-align:center;box-sizing:border-box;outline:none;&::placeholder{color:", ";text-transform:none;letter-spacing:0;}&:focus{border-color:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,0.3);}&:disabled{opacity:0.5;cursor:not-allowed;}"], uiColors.white, uiColors.lightGray);
+var ButtonWrapper$3 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreRedeemSection__ButtonWrapper",
+  componentId: "sc-1pzosml-5"
+})(["width:100%;margin-top:0.5rem;"]);
+var ResultContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreRedeemSection__ResultContainer",
+  componentId: "sc-1pzosml-6"
+})(["display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem 0;"]);
+var glowPulse$1 = /*#__PURE__*/styled.keyframes(["0%,100%{opacity:1;}50%{opacity:0.7;}"]);
+var SuccessIcon = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreRedeemSection__SuccessIcon",
+  componentId: "sc-1pzosml-7"
+})(["color:", ";animation:", " 1.5s ease-in-out infinite;"], uiColors.green, glowPulse$1);
+var SuccessTitle = /*#__PURE__*/styled__default.h3.withConfig({
+  displayName: "StoreRedeemSection__SuccessTitle",
+  componentId: "sc-1pzosml-8"
+})(["font-family:'Press Start 2P',cursive;font-size:0.85rem;color:", ";margin:0;"], uiColors.green);
+var DCAmountDisplay = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreRedeemSection__DCAmountDisplay",
+  componentId: "sc-1pzosml-9"
+})(["font-family:'Press Start 2P',cursive;font-size:1.2rem;color:#fef08a;text-shadow:0 0 10px rgba(254,240,138,0.5);"]);
+var SuccessHint = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "StoreRedeemSection__SuccessHint",
+  componentId: "sc-1pzosml-10"
+})(["font-family:'Press Start 2P',cursive;font-size:0.5rem;color:", ";margin:0;"], uiColors.lightGray);
+var ErrorIcon = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreRedeemSection__ErrorIcon",
+  componentId: "sc-1pzosml-11"
+})(["color:", ";"], uiColors.red);
+var ErrorTitle = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "StoreRedeemSection__ErrorTitle",
+  componentId: "sc-1pzosml-12"
+})(["font-family:'Press Start 2P',cursive;font-size:0.65rem;color:", ";margin:0;text-align:center;line-height:1.6;"], uiColors.red);
+
 var StoreItemDetails = function StoreItemDetails(_ref) {
   var _item$regionalPrice;
   var item = _ref.item,
@@ -73193,12 +73360,12 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
     if (typeof imageUrl === 'string') return imageUrl;
     return imageUrl["default"] || imageUrl.src;
   };
-  return React__default.createElement(Container$O, null, React__default.createElement(Header$j, null, React__default.createElement(BackButton, {
+  return React__default.createElement(Container$P, null, React__default.createElement(Header$j, null, React__default.createElement(BackButton, {
     onClick: onBack
   }, 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$3, null, React__default.createElement(ItemName$9, null, item.name), React__default.createElement(ItemPrice$2, null, currencySymbol, 'priceUSD' in item ? item.priceUSD : (_item$regionalPrice = item.regionalPrice) != null ? _item$regionalPrice : item.price, item.dcPrice ? " \xB7 " + item.dcPrice.toLocaleString() + " DC" : ''), React__default.createElement(Description$7, null, item.description))), React__default.createElement(Actions$1, null, React__default.createElement(CTAButton, {
+  })), React__default.createElement(ItemInfo$3, null, React__default.createElement(ItemName$9, null, item.name), React__default.createElement(ItemPrice$2, null, currencySymbol, 'priceUSD' in item ? item.priceUSD : (_item$regionalPrice = item.regionalPrice) != null ? _item$regionalPrice : item.price, item.dcPrice ? " \xB7 " + item.dcPrice.toLocaleString() + " DC" : ''), React__default.createElement(Description$8, null, item.description))), React__default.createElement(Actions$1, null, React__default.createElement(CTAButton, {
     icon: React__default.createElement(fa.FaCartPlus, null),
     label: "Add to Cart",
     onClick: function onClick() {
@@ -73207,7 +73374,7 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
     fullWidth: true
   }))));
 };
-var Container$O = /*#__PURE__*/styled__default.div.withConfig({
+var Container$P = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemDetails__Container",
   componentId: "sc-k3ho5z-0"
 })(["display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;height:100%;"]);
@@ -73243,7 +73410,7 @@ var ItemPrice$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemDetails__ItemPrice",
   componentId: "sc-k3ho5z-8"
 })(["font-family:'Press Start 2P',cursive;font-size:1rem;color:#fef08a;"]);
-var Description$7 = /*#__PURE__*/styled__default.p.withConfig({
+var Description$8 = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "StoreItemDetails__Description",
   componentId: "sc-k3ho5z-9"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.875rem;line-height:1.6;color:#ffffff;"]);
@@ -73296,7 +73463,10 @@ var Store = function Store(_ref) {
     onPurchaseError = _ref.onPurchaseError,
     onBuyDC = _ref.onBuyDC,
     _ref$currencySymbol = _ref.currencySymbol,
-    currencySymbol = _ref$currencySymbol === void 0 ? '$' : _ref$currencySymbol;
+    currencySymbol = _ref$currencySymbol === void 0 ? '$' : _ref$currencySymbol,
+    onRedeem = _ref.onRedeem,
+    onRedeemInputFocus = _ref.onRedeemInputFocus,
+    onRedeemInputBlur = _ref.onRedeemInputBlur;
   var _useState = React.useState(null),
     selectedPack = _useState[0],
     setSelectedPack = _useState[1];
@@ -73418,7 +73588,7 @@ var Store = function Store(_ref) {
     return React__default.createElement(ErrorMessage$3, null, error);
   }
   // Build tabs dynamically based on props
-  var tabIds = [].concat(tabOrder != null ? tabOrder : ['premium', 'packs', 'items'], onShowWallet || customWalletContent ? ['wallet'] : [], onShowHistory || customHistoryContent ? ['history'] : []);
+  var tabIds = [].concat(tabOrder != null ? tabOrder : ['premium', 'packs', 'items'], onRedeem ? ['redeem'] : [], onShowWallet || customWalletContent ? ['wallet'] : [], onShowHistory || customHistoryContent ? ['history'] : []);
   var availableTabIds = Array.from(new Set(tabIds.filter(function (id) {
     return !(hidePremiumTab && id === 'premium');
   })));
@@ -73558,6 +73728,18 @@ var Store = function Store(_ref) {
         currencySymbol: currencySymbol
       })
     },
+    redeem: {
+      id: 'redeem',
+      title: 'Redeem',
+      icon: React__default.createElement(fa.FaTicketAlt, {
+        size: 16
+      }),
+      content: onRedeem ? React__default.createElement(StoreRedeemSection, {
+        onRedeem: onRedeem,
+        onInputFocus: onRedeemInputFocus,
+        onInputBlur: onRedeemInputBlur
+      }) : null
+    },
     wallet: {
       id: 'wallet',
       title: walletLabel != null ? walletLabel : 'Wallet',
@@ -73642,7 +73824,7 @@ var Store = function Store(_ref) {
       return handleAddPackToCart(selectedPack);
     },
     currencySymbol: currencySymbol
-  }) : React__default.createElement(Container$P, null, featuredItems && featuredItems.length > 0 && React__default.createElement(FeaturedBanner, {
+  }) : React__default.createElement(Container$Q, null, featuredItems && featuredItems.length > 0 && React__default.createElement(FeaturedBanner, {
     items: featuredItems,
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
@@ -73724,7 +73906,7 @@ var Store = function Store(_ref) {
     fullWidth: true
   }))));
 };
-var Container$P = /*#__PURE__*/styled__default.div.withConfig({
+var Container$Q = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Store__Container",
   componentId: "sc-64dj00-0"
 })(["display:flex;flex-direction:column;width:100%;height:100%;gap:0.5rem;position:relative;"]);
@@ -74107,7 +74289,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React__default.createElement(Container$Q, null, React__default.createElement(Title$p, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Container$R, null, React__default.createElement(Title$q, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -74124,7 +74306,7 @@ var TradingMenu = function TradingMenu(_ref) {
       scale: scale,
       isBuy: isBuy()
     });
-  })), React__default.createElement(InfoSection$2, null, React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertText, null, "Sorry, not enough money.") : React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold().toFixed(2)))), React__default.createElement(ButtonWrapper$3, null, React__default.createElement(Button, {
+  })), React__default.createElement(InfoSection$2, null, React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertText, null, "Sorry, not enough money.") : React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold().toFixed(2)))), React__default.createElement(ButtonWrapper$4, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onPointerDown: function onPointerDown() {
@@ -74135,11 +74317,11 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$Q = /*#__PURE__*/styled__default.div.withConfig({
+var Container$R = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$p = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$q = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
@@ -74159,7 +74341,7 @@ var AlertText = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "TradingMenu__AlertText",
   componentId: "sc-1wjsz1l-5"
 })(["color:red !important;text-align:center;margin:0.3rem 0;font-size:0.5rem;"]);
-var ButtonWrapper$3 = /*#__PURE__*/styled__default.div.withConfig({
+var ButtonWrapper$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__ButtonWrapper",
   componentId: "sc-1wjsz1l-6"
 })(["display:flex;justify-content:space-around;width:100%;margin-top:1rem;"]);
@@ -74169,11 +74351,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React__default.createElement(Container$R, {
+  return React__default.createElement(Container$S, {
     maxLines: maxLines
   }, children);
 };
-var Container$R = /*#__PURE__*/styled__default.div.withConfig({
+var Container$S = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -74282,7 +74464,7 @@ var TutorialStepper = /*#__PURE__*/React__default.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React__default.createElement(Container$S, null, React__default.createElement(Stepper, {
+  return React__default.createElement(Container$T, null, React__default.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -74300,7 +74482,7 @@ var LessonBody = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$S = /*#__PURE__*/styled__default.div.withConfig({
+var Container$T = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);
@@ -74429,6 +74611,7 @@ exports.SpriteFromAtlas = SpriteFromAtlas;
 exports.Stepper = Stepper;
 exports.Store = Store;
 exports.StoreBadges = StoreBadges;
+exports.StoreRedeemSection = StoreRedeemSection;
 exports.TRANSACTION_TYPE_FILTER_ALL = TRANSACTION_TYPE_FILTER_ALL;
 exports.TabBody = TabBody;
 exports.Table = Table;