@rpg-engine/long-bow 0.8.231 → 0.8.233

package/src/components/Store/__test__/PaymentMethodModal.spec.tsx

@@ -0,0 +1,108 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { PaymentMethodModal } from '../PaymentMethodModal';
+
+jest.mock('../../Abstractions/ModalPortal', () => ({
+  __esModule: true,
+  default: ({ children }) => <>{children}</>,
+}));
+
+jest.mock('../../Button', () => ({
+  ButtonTypes: { RPGUIButton: 'rpgui-button' },
+  Button: ({ children, disabled, onPointerDown }) => (
+    <button type="button" disabled={disabled} onPointerDown={onPointerDown}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock('../../shared/MMORPGNumber', () => ({
+  MMORPGNumber: ({ value }) => <span>{value}</span>,
+}));
+
+jest.mock('pixelarticons/react/Cancel', () => ({
+  Cancel: () => <span>close</span>,
+}));
+
+jest.mock('styled-components', () => {
+  const withoutTransientProps = (props) =>
+    Object.fromEntries(
+      Object.entries(props).filter(([key]) => !key.startsWith('$'))
+    );
+  const createTag = (tag) => () => {
+    const Tag =
+      tag === 'button'
+        ? 'button'
+        : tag === 'h3'
+        ? 'h3'
+        : tag === 'span'
+        ? 'span'
+        : 'div';
+    return ({ children, ...props }) => (
+      <Tag {...withoutTransientProps(props)}>{children}</Tag>
+    );
+  };
+  const styled = new Proxy(() => {}, {
+    get: (_target, prop) => {
+      if (prop === '__esModule') return true;
+      return createTag(prop);
+    },
+    apply: () => createTag('div'),
+  });
+  return { __esModule: true, default: styled };
+});
+
+describe('PaymentMethodModal processing guard', () => {
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(document.body.lastElementChild);
+    document.body.innerHTML = '';
+  });
+
+  it('blocks close, backdrop, and confirm while checkout is processing', () => {
+    const onClose = jest.fn();
+    const onPayWithCard = jest.fn();
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    act(() => {
+      ReactDOM.render(
+        <PaymentMethodModal
+          dcBalance={0}
+          onPayWithDC={jest.fn()}
+          onPayWithCard={onPayWithCard}
+          onPayWithPix={jest.fn()}
+          onClose={onClose}
+          isProcessing
+        />,
+        container
+      );
+    });
+
+    const closeButton = container.querySelector('button[aria-label="Close"]');
+    const confirmButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Processing...'
+    );
+    const overlay = container.firstElementChild;
+
+    expect(closeButton.disabled).toBe(true);
+    expect(confirmButton.disabled).toBe(true);
+
+    act(() => {
+      closeButton.dispatchEvent(
+        new MouseEvent('pointerdown', { bubbles: true })
+      );
+      confirmButton.dispatchEvent(
+        new MouseEvent('pointerdown', { bubbles: true })
+      );
+      overlay.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }));
+    });
+
+    expect(onClose).not.toHaveBeenCalled();
+    expect(onPayWithCard).not.toHaveBeenCalled();
+  });
+});

package/src/components/Store/hooks/useStoreCart.ts

@@ -6,6 +6,7 @@ import {
   PurchaseType
 } from '@rpg-engine/shared';
 import { useEffect, useRef, useState } from 'react';
+import { CartPurchaseResult } from '../CartView';
 import { useStoreMetadata } from './useStoreMetadata';
 
 interface ICartItem {
@@ -19,7 +20,7 @@ interface IUseStoreCart {
   isCartOpen: boolean;
   handleAddToCart: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
   handleRemoveFromCart: (itemKey: string) => void;
-  handlePurchase: (onPurchase: (purchase: IPurchase) => Promise<boolean>) => Promise<boolean>;
+  handlePurchase: (onPurchase: (purchase: IPurchase) => Promise<CartPurchaseResult>) => Promise<CartPurchaseResult>;
   openCart: () => void;
   closeCart: () => void;
   getTotalItems: () => number;
@@ -104,7 +105,7 @@ export const useStoreCart = (): IUseStoreCart => {
     );
   };
 
-  const handlePurchase = async (onPurchase: (purchase: IPurchase) => Promise<boolean>): Promise<boolean> => {
+  const handlePurchase = async (onPurchase: (purchase: IPurchase) => Promise<CartPurchaseResult>): Promise<CartPurchaseResult> => {
     const purchaseUnits: IPurchaseUnit[] = cartItems.map(cartItem => ({
       purchaseKey: cartItem.item.key,
       qty: cartItem.quantity,
@@ -122,14 +123,15 @@ export const useStoreCart = (): IUseStoreCart => {
       purchases: purchaseUnits,
     };
 
-    const success = await onPurchase(purchase);
+    const result = await onPurchase(purchase);
+    const success = typeof result === 'boolean' ? result : result.status === 'success';
 
     if (success && isMounted.current) {
       setCartItems([]);
       setIsCartOpen(false);
     }
 
-    return success;
+    return result;
   };
 
   const openCart = () => setIsCartOpen(true);

package/src/components/Tutorial/TutorialStepper.tsx

@@ -9,6 +9,8 @@ export interface ITutorialLesson {
   title: string;
   body?: React.ReactNode | string;
   text?: string;
+  bodyHighlights?: string[];
+  textHighlights?: string[];
   image: string;
   imageUrl?: string;
 }

package/src/index.tsx

@@ -62,6 +62,7 @@ export * from './components/PropertySelect/PropertySelect';
 export * from './components/QuantitySelector/QuantitySelectorModal';
 export * from './components/Quests/QuestInfo/QuestInfo';
 export * from './components/Quests/QuestList';
+export * from './components/Quests/QuestListRow';
 export * from './components/RadioButton';
 export * from './components/RadioSelectCard/RadioSelectCard';
 export * from './components/RangeSlider';
@@ -98,4 +99,3 @@ export * from './components/Truncate';
 export * from './components/Tutorial/TutorialStepper';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';
-