@rpg-engine/long-bow 0.8.232 → 0.8.233
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Store/CartView.d.ts +11 -1
- package/dist/components/Store/PaymentMethodModal.d.ts +1 -0
- package/dist/components/Store/Store.d.ts +2 -1
- package/dist/components/Store/hooks/useStoreCart.d.ts +2 -1
- package/dist/long-bow.cjs.development.js +56 -32
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +56 -32
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Store/CartView.tsx +23 -5
- package/src/components/Store/PaymentMethodModal.tsx +19 -9
- package/src/components/Store/Store.tsx +2 -2
- package/src/components/Store/__test__/CartView.spec.tsx +190 -0
- package/src/components/Store/__test__/PaymentMethodModal.spec.tsx +108 -0
- package/src/components/Store/hooks/useStoreCart.ts +6 -4
|
@@ -6,11 +6,21 @@ interface ICartItem {
|
|
|
6
6
|
quantity: number;
|
|
7
7
|
metadata?: Record<string, any>;
|
|
8
8
|
}
|
|
9
|
+
export declare type PurchaseResult = {
|
|
10
|
+
status: 'success';
|
|
11
|
+
} | {
|
|
12
|
+
status: 'cancelled';
|
|
13
|
+
} | {
|
|
14
|
+
status: 'failed';
|
|
15
|
+
error?: string;
|
|
16
|
+
};
|
|
17
|
+
export declare type LegacyPurchaseResult = boolean;
|
|
18
|
+
export declare type CartPurchaseResult = PurchaseResult | LegacyPurchaseResult;
|
|
9
19
|
export interface ICartViewProps {
|
|
10
20
|
cartItems: ICartItem[];
|
|
11
21
|
onRemoveFromCart: (itemKey: string) => void;
|
|
12
22
|
onClose: () => void;
|
|
13
|
-
onPurchase: () => Promise<
|
|
23
|
+
onPurchase: () => Promise<CartPurchaseResult>;
|
|
14
24
|
atlasJSON: Record<string, any>;
|
|
15
25
|
atlasIMG: string;
|
|
16
26
|
paymentMethodLabel?: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { IItemPack, IPurchase, IProductBlueprint, UserAccountTypes } from '@rpg-engine/shared';
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import { CartPurchaseResult } from './CartView';
|
|
3
4
|
import { IFeaturedItem } from './FeaturedBanner';
|
|
4
5
|
import { TabId } from './hooks/useStoreTabs';
|
|
5
6
|
export interface IStoreProps {
|
|
@@ -7,7 +8,7 @@ export interface IStoreProps {
|
|
|
7
8
|
packs?: IItemPack[];
|
|
8
9
|
atlasJSON: any;
|
|
9
10
|
atlasIMG: string;
|
|
10
|
-
onPurchase: (purchase: Partial<IPurchase>) => Promise<
|
|
11
|
+
onPurchase: (purchase: Partial<IPurchase>) => Promise<CartPurchaseResult>;
|
|
11
12
|
onShowHistory?: () => void;
|
|
12
13
|
onShowWallet?: () => void;
|
|
13
14
|
walletLabel?: string;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { IPurchase, IProductBlueprint } from '@rpg-engine/shared';
|
|
2
|
+
import { CartPurchaseResult } from '../CartView';
|
|
2
3
|
interface ICartItem {
|
|
3
4
|
item: IProductBlueprint;
|
|
4
5
|
quantity: number;
|
|
@@ -9,7 +10,7 @@ interface IUseStoreCart {
|
|
|
9
10
|
isCartOpen: boolean;
|
|
10
11
|
handleAddToCart: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
|
|
11
12
|
handleRemoveFromCart: (itemKey: string) => void;
|
|
12
|
-
handlePurchase: (onPurchase: (purchase: IPurchase) => Promise<
|
|
13
|
+
handlePurchase: (onPurchase: (purchase: IPurchase) => Promise<CartPurchaseResult>) => Promise<CartPurchaseResult>;
|
|
13
14
|
openCart: () => void;
|
|
14
15
|
closeCart: () => void;
|
|
15
16
|
getTotalItems: () => number;
|
|
@@ -38006,6 +38006,17 @@ var CloseLink = /*#__PURE__*/styled__default.div.withConfig({
|
|
|
38006
38006
|
componentId: "sc-18z5q21-16"
|
|
38007
38007
|
})(["font-family:'Press Start 2P',cursive;font-size:0.5rem;color:rgba(255,255,255,0.45);cursor:pointer;display:flex;align-items:center;gap:0.3rem;transition:color 0.15s;&:hover{color:rgba(255,255,255,0.7);}"]);
|
|
38008
38008
|
|
|
38009
|
+
var GENERIC_PURCHASE_FAILED_MESSAGE = 'Purchase failed. Please try again.';
|
|
38010
|
+
var normalizePurchaseResult = function normalizePurchaseResult(result) {
|
|
38011
|
+
if (typeof result === 'boolean') {
|
|
38012
|
+
return result ? {
|
|
38013
|
+
status: 'success'
|
|
38014
|
+
} : {
|
|
38015
|
+
status: 'failed'
|
|
38016
|
+
};
|
|
38017
|
+
}
|
|
38018
|
+
return result;
|
|
38019
|
+
};
|
|
38009
38020
|
var MetadataDisplay = function MetadataDisplay(_ref) {
|
|
38010
38021
|
var type = _ref.type,
|
|
38011
38022
|
metadata = _ref.metadata;
|
|
@@ -38053,7 +38064,7 @@ var CartView = function CartView(_ref2) {
|
|
|
38053
38064
|
};
|
|
38054
38065
|
var handlePurchase = /*#__PURE__*/function () {
|
|
38055
38066
|
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
38056
|
-
var snapshot, trackItems,
|
|
38067
|
+
var snapshot, trackItems, purchaseResult, _purchaseResult$error, errMsg, _errMsg;
|
|
38057
38068
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
38058
38069
|
while (1) switch (_context.prev = _context.next) {
|
|
38059
38070
|
case 0:
|
|
@@ -38069,36 +38080,38 @@ var CartView = function CartView(_ref2) {
|
|
|
38069
38080
|
};
|
|
38070
38081
|
});
|
|
38071
38082
|
onCheckoutStart == null ? void 0 : onCheckoutStart(trackItems, total);
|
|
38072
|
-
_context.
|
|
38083
|
+
_context.t0 = normalizePurchaseResult;
|
|
38084
|
+
_context.next = 9;
|
|
38073
38085
|
return onPurchase();
|
|
38074
|
-
case
|
|
38075
|
-
|
|
38076
|
-
|
|
38086
|
+
case 9:
|
|
38087
|
+
_context.t1 = _context.sent;
|
|
38088
|
+
purchaseResult = (0, _context.t0)(_context.t1);
|
|
38089
|
+
if (purchaseResult.status === 'success') {
|
|
38077
38090
|
onPurchaseSuccess == null ? void 0 : onPurchaseSuccess(trackItems, total);
|
|
38078
38091
|
setPurchasedItems(snapshot);
|
|
38079
|
-
} else {
|
|
38080
|
-
errMsg =
|
|
38092
|
+
} else if (purchaseResult.status === 'failed') {
|
|
38093
|
+
errMsg = (_purchaseResult$error = purchaseResult.error) != null ? _purchaseResult$error : GENERIC_PURCHASE_FAILED_MESSAGE;
|
|
38081
38094
|
onPurchaseError == null ? void 0 : onPurchaseError(errMsg);
|
|
38082
38095
|
setError(errMsg);
|
|
38083
38096
|
}
|
|
38084
|
-
_context.next =
|
|
38097
|
+
_context.next = 20;
|
|
38085
38098
|
break;
|
|
38086
|
-
case
|
|
38087
|
-
_context.prev =
|
|
38088
|
-
_context.
|
|
38099
|
+
case 14:
|
|
38100
|
+
_context.prev = 14;
|
|
38101
|
+
_context.t2 = _context["catch"](0);
|
|
38089
38102
|
_errMsg = 'An error occurred during purchase. Please try again.';
|
|
38090
38103
|
onPurchaseError == null ? void 0 : onPurchaseError(_errMsg);
|
|
38091
38104
|
setError(_errMsg);
|
|
38092
|
-
console.error('Purchase error:', _context.
|
|
38093
|
-
case
|
|
38094
|
-
_context.prev =
|
|
38105
|
+
console.error('Purchase error:', _context.t2);
|
|
38106
|
+
case 20:
|
|
38107
|
+
_context.prev = 20;
|
|
38095
38108
|
setIsLoading(false);
|
|
38096
|
-
return _context.finish(
|
|
38097
|
-
case
|
|
38109
|
+
return _context.finish(20);
|
|
38110
|
+
case 23:
|
|
38098
38111
|
case "end":
|
|
38099
38112
|
return _context.stop();
|
|
38100
38113
|
}
|
|
38101
|
-
}, _callee, null, [[0,
|
|
38114
|
+
}, _callee, null, [[0, 14, 20, 23]]);
|
|
38102
38115
|
}));
|
|
38103
38116
|
return function handlePurchase() {
|
|
38104
38117
|
return _ref3.apply(this, arguments);
|
|
@@ -38617,7 +38630,7 @@ var useStoreCart = function useStoreCart() {
|
|
|
38617
38630
|
};
|
|
38618
38631
|
var handlePurchase = /*#__PURE__*/function () {
|
|
38619
38632
|
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(onPurchase) {
|
|
38620
|
-
var purchaseUnits, purchase, success;
|
|
38633
|
+
var purchaseUnits, purchase, result, success;
|
|
38621
38634
|
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
38622
38635
|
while (1) switch (_context2.prev = _context2.next) {
|
|
38623
38636
|
case 0:
|
|
@@ -38641,13 +38654,14 @@ var useStoreCart = function useStoreCart() {
|
|
|
38641
38654
|
_context2.next = 4;
|
|
38642
38655
|
return onPurchase(purchase);
|
|
38643
38656
|
case 4:
|
|
38644
|
-
|
|
38657
|
+
result = _context2.sent;
|
|
38658
|
+
success = typeof result === 'boolean' ? result : result.status === 'success';
|
|
38645
38659
|
if (success && isMounted.current) {
|
|
38646
38660
|
setCartItems([]);
|
|
38647
38661
|
setIsCartOpen(false);
|
|
38648
38662
|
}
|
|
38649
|
-
return _context2.abrupt("return",
|
|
38650
|
-
case
|
|
38663
|
+
return _context2.abrupt("return", result);
|
|
38664
|
+
case 8:
|
|
38651
38665
|
case "end":
|
|
38652
38666
|
return _context2.stop();
|
|
38653
38667
|
}
|
|
@@ -38781,7 +38795,9 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
|
|
|
38781
38795
|
onPayWithPix = _ref.onPayWithPix,
|
|
38782
38796
|
onClose = _ref.onClose,
|
|
38783
38797
|
_ref$showPix = _ref.showPix,
|
|
38784
|
-
showPix = _ref$showPix === void 0 ? false : _ref$showPix
|
|
38798
|
+
showPix = _ref$showPix === void 0 ? false : _ref$showPix,
|
|
38799
|
+
_ref$isProcessing = _ref.isProcessing,
|
|
38800
|
+
isProcessing = _ref$isProcessing === void 0 ? false : _ref$isProcessing;
|
|
38785
38801
|
var _useState = React.useState('card'),
|
|
38786
38802
|
selected = _useState[0],
|
|
38787
38803
|
setSelected = _useState[1];
|
|
@@ -38795,6 +38811,7 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
|
|
|
38795
38811
|
e.stopPropagation();
|
|
38796
38812
|
}, []);
|
|
38797
38813
|
var handleConfirm = React.useCallback(function () {
|
|
38814
|
+
if (isProcessing) return;
|
|
38798
38815
|
if (selected === 'dc' && !dcDisabled) {
|
|
38799
38816
|
onPayWithDC();
|
|
38800
38817
|
} else if (selected === 'pix') {
|
|
@@ -38802,7 +38819,10 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
|
|
|
38802
38819
|
} else {
|
|
38803
38820
|
onPayWithCard();
|
|
38804
38821
|
}
|
|
38805
|
-
}, [selected, dcDisabled, onPayWithDC, onPayWithCard, onPayWithPix]);
|
|
38822
|
+
}, [selected, dcDisabled, isProcessing, onPayWithDC, onPayWithCard, onPayWithPix]);
|
|
38823
|
+
var handleClose = React.useCallback(function () {
|
|
38824
|
+
if (!isProcessing) onClose();
|
|
38825
|
+
}, [isProcessing, onClose]);
|
|
38806
38826
|
var dcSubText = dcRequired !== undefined ? React__default.createElement(React__default.Fragment, null, React__default.createElement(MMORPGNumber, {
|
|
38807
38827
|
value: dcBalance
|
|
38808
38828
|
}), " DC available \xB7", ' ', React__default.createElement(MMORPGNumber, {
|
|
@@ -38811,40 +38831,44 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
|
|
|
38811
38831
|
value: dcBalance
|
|
38812
38832
|
}), " DC available");
|
|
38813
38833
|
return React__default.createElement(ModalPortal, null, React__default.createElement(Overlay$b, {
|
|
38814
|
-
onPointerDown:
|
|
38834
|
+
onPointerDown: handleClose
|
|
38815
38835
|
}), React__default.createElement(ModalContainer$8, null, React__default.createElement(ModalContent$8, {
|
|
38816
38836
|
onClick: stopPropagation,
|
|
38817
38837
|
onTouchStart: stopPropagation,
|
|
38818
38838
|
onPointerDown: stopPropagation
|
|
38819
38839
|
}, React__default.createElement(Header$i, null, React__default.createElement(Title$p, null, "How would you like to pay?"), React__default.createElement(CloseButton$j, {
|
|
38820
|
-
onPointerDown:
|
|
38821
|
-
"aria-label": "Close"
|
|
38840
|
+
onPointerDown: handleClose,
|
|
38841
|
+
"aria-label": "Close",
|
|
38842
|
+
disabled: isProcessing
|
|
38822
38843
|
}, React__default.createElement(Cancel.Cancel, null))), React__default.createElement(Options$1, null, React__default.createElement(RadioOption$2, {
|
|
38823
38844
|
"$selected": selected === 'card',
|
|
38824
|
-
|
|
38845
|
+
"$disabled": isProcessing,
|
|
38846
|
+
onPointerDown: isProcessing ? undefined : function () {
|
|
38825
38847
|
return setSelected('card');
|
|
38826
38848
|
}
|
|
38827
38849
|
}, React__default.createElement(RadioCircle$3, {
|
|
38828
38850
|
"$selected": selected === 'card'
|
|
38829
38851
|
}), React__default.createElement(OptionText$1, null, React__default.createElement(OptionLabel$2, null, "Credit Card"), React__default.createElement(OptionSub$1, null, "Stripe secure checkout"))), showPix && React__default.createElement(RadioOption$2, {
|
|
38830
38852
|
"$selected": selected === 'pix',
|
|
38831
|
-
|
|
38853
|
+
"$disabled": isProcessing,
|
|
38854
|
+
onPointerDown: isProcessing ? undefined : function () {
|
|
38832
38855
|
return setSelected('pix');
|
|
38833
38856
|
}
|
|
38834
38857
|
}, React__default.createElement(RadioCircle$3, {
|
|
38835
38858
|
"$selected": selected === 'pix'
|
|
38836
38859
|
}), React__default.createElement(OptionText$1, null, React__default.createElement(OptionLabel$2, null, "Pix"), React__default.createElement(OptionSub$1, null, "Instant payment via Pix"))), React__default.createElement(RadioOption$2, {
|
|
38837
38860
|
"$selected": selected === 'dc',
|
|
38838
|
-
"$disabled": dcDisabled,
|
|
38839
|
-
onPointerDown: dcDisabled ? undefined : function () {
|
|
38861
|
+
"$disabled": dcDisabled || isProcessing,
|
|
38862
|
+
onPointerDown: dcDisabled || isProcessing ? undefined : function () {
|
|
38840
38863
|
return setSelected('dc');
|
|
38841
38864
|
}
|
|
38842
38865
|
}, React__default.createElement(RadioCircle$3, {
|
|
38843
38866
|
"$selected": selected === 'dc'
|
|
38844
38867
|
}), React__default.createElement(OptionText$1, null, React__default.createElement(OptionLabel$2, null, "Definya Coin"), React__default.createElement(OptionSub$1, null, dcSubText)))), React__default.createElement(ConfirmRow$1, null, React__default.createElement(Button, {
|
|
38845
38868
|
buttonType: exports.ButtonTypes.RPGUIButton,
|
|
38846
|
-
onPointerDown: handleConfirm
|
|
38847
|
-
|
|
38869
|
+
onPointerDown: handleConfirm,
|
|
38870
|
+
disabled: isProcessing
|
|
38871
|
+
}, isProcessing ? 'Processing...' : 'Confirm')))));
|
|
38848
38872
|
};
|
|
38849
38873
|
var Overlay$b = /*#__PURE__*/styled__default.div.withConfig({
|
|
38850
38874
|
displayName: "PaymentMethodModal__Overlay",
|