@rpg-engine/long-bow 0.8.231 → 0.8.233

package/src/components/Quests/QuestListRow.tsx

@@ -0,0 +1,178 @@
+import { IQuest, QuestStatus, QuestType } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IQuestListAtlasProps {
+  itemsAtlasJSON?: any;
+  itemsAtlasIMG?: any;
+}
+
+interface IProps extends IQuestListAtlasProps {
+  quest: IQuest;
+  compact?: boolean;
+}
+
+const getProgressText = (quest: IQuest): string | null => {
+  const objective = (quest.objectives || [])[0] as any;
+  if (!objective) {
+    return null;
+  }
+
+  if (objective.type === QuestType.Kill) {
+    return `${objective.killCount || 0}/${objective.killCountTarget}`;
+  }
+
+  if (objective.type === QuestType.Interaction && objective.items?.length) {
+    const item = objective.items[0];
+    return `Bring ${item.playerHasQty || 0}/${item.qty}`;
+  }
+
+  return objective.type === QuestType.Interaction && objective.targetNPCkey ? 'Talk' : null;
+};
+
+export const QuestListRow: React.FC<IProps> = ({
+  quest,
+  compact,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+}) => {
+  const rewardItems = (quest.rewards || []).flatMap((reward: any) => reward.items || []);
+  const visibleRewards = rewardItems.slice(0, 6);
+  const overflowCount = Math.max(rewardItems.length - visibleRewards.length, 0);
+  const progressText = getProgressText(quest);
+
+  return (
+    <QuestCard>
+      <Header>
+        <Title>{formatQuestText(quest.title)}</Title>
+        <Status style={{ color: getQuestStatusColor(quest.status) }}>
+          {formatQuestStatus(quest.status) || 'Unknown'}
+        </Status>
+      </Header>
+      {!compact && (
+        <>
+          <Description>{quest.description}</Description>
+          <MetaRow>
+            {quest.status === QuestStatus.Completed ? 'Completed' : progressText}
+          </MetaRow>
+          {!!visibleRewards.length && (
+            <RewardStrip>
+              {visibleRewards.map((item: any) => (
+                <RewardIcon key={`${item.key}-${item.qty}`}>
+                  {itemsAtlasJSON && itemsAtlasIMG && item.texturePath ? (
+                    <ItemInfoWrapper item={{ ...item, stackQty: item.qty } as any} atlasJSON={itemsAtlasJSON} atlasIMG={itemsAtlasIMG}>
+                      <SpriteFromAtlas
+                        atlasJSON={itemsAtlasJSON}
+                        atlasIMG={itemsAtlasIMG}
+                        spriteKey={item.texturePath}
+                        width={24}
+                        height={24}
+                        imgScale={1}
+                        centered
+                      />
+                    </ItemInfoWrapper>
+                  ) : (
+                    <FallbackIcon>{item.name?.[0] || '?'}</FallbackIcon>
+                  )}
+                </RewardIcon>
+              ))}
+              {overflowCount > 0 && <MoreRewards>+{overflowCount} more</MoreRewards>}
+            </RewardStrip>
+          )}
+        </>
+      )}
+    </QuestCard>
+  );
+};
+
+export const formatQuestText = (text: string) => {
+  if (!text) return '';
+  return text
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+
+export const getQuestStatusColor = (status?: QuestStatus) => {
+  switch (status) {
+    case QuestStatus.Pending:
+      return uiColors.orange;
+    case QuestStatus.InProgress:
+      return uiColors.blue;
+    case QuestStatus.Completed:
+      return uiColors.lightGreen;
+    default:
+      return uiColors.white;
+  }
+};
+
+export const formatQuestStatus = (status?: QuestStatus) => {
+  if (!status) return '';
+  return status
+    .split(/(?=[A-Z])/)
+    .join(' ')
+    .replace(/^\w/, c => c.toUpperCase());
+};
+
+const QuestCard = styled.div`
+  background-color: ${uiColors.darkGray};
+  padding: 12px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  border: 1px solid ${uiColors.gray};
+`;
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+`;
+
+const Title = styled.span`
+  color: ${uiColors.yellow};
+  font-weight: bold;
+`;
+
+const Status = styled.span`
+  white-space: nowrap;
+`;
+
+const Description = styled.p`
+  color: ${uiColors.white};
+  margin: 8px 0;
+`;
+
+const MetaRow = styled.div`
+  color: ${uiColors.lightGreen};
+  font-size: 0.7rem;
+  margin-bottom: 6px;
+`;
+
+const RewardStrip = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const RewardIcon = styled.div`
+  width: 24px;
+  height: 24px;
+`;
+
+const FallbackIcon = styled.div`
+  width: 24px;
+  height: 24px;
+  border: 1px solid ${uiColors.gray};
+  color: ${uiColors.yellow};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const MoreRewards = styled.span`
+  color: ${uiColors.lightGray};
+  font-size: 0.65rem;
+`;

package/src/components/Store/CartView.tsx

@@ -21,11 +21,29 @@ interface ICartItem {
   metadata?: Record<string, any>;
 }
 
+export type PurchaseResult =
+  | { status: 'success' }
+  | { status: 'cancelled' }
+  | { status: 'failed'; error?: string };
+
+export type LegacyPurchaseResult = boolean;
+export type CartPurchaseResult = PurchaseResult | LegacyPurchaseResult;
+
+const GENERIC_PURCHASE_FAILED_MESSAGE = 'Purchase failed. Please try again.';
+
+const normalizePurchaseResult = (result: CartPurchaseResult): PurchaseResult => {
+  if (typeof result === 'boolean') {
+    return result ? { status: 'success' } : { status: 'failed' };
+  }
+
+  return result;
+};
+
 export interface ICartViewProps {
   cartItems: ICartItem[];
   onRemoveFromCart: (itemKey: string) => void;
   onClose: () => void;
-  onPurchase: () => Promise<boolean>;
+  onPurchase: () => Promise<CartPurchaseResult>;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
   paymentMethodLabel?: string;
@@ -53,7 +71,7 @@ const MetadataDisplay: React.FC<{
             <InfoBox />
             <span>Skin:</span>
           </MetadataLabel>
-          <MetadataValue>{metadata.selectedSkinName || 'Custom skin'}</MetadataValue>
+          <MetadataValue>{metadata.selectedSkinName || metadata.selectedSkin || 'Custom skin'}</MetadataValue>
         </MetadataInfo>
       );
     default:
@@ -99,13 +117,13 @@ export const CartView: React.FC<ICartViewProps> = ({
       const snapshot = [...cartItems];
       const trackItems = snapshot.map(ci => ({ key: ci.item.key, name: ci.item.name, quantity: ci.quantity }));
       onCheckoutStart?.(trackItems, total);
-      const success = await onPurchase();
+      const purchaseResult = normalizePurchaseResult(await onPurchase());
 
-      if (success) {
+      if (purchaseResult.status === 'success') {
         onPurchaseSuccess?.(trackItems, total);
         setPurchasedItems(snapshot);
-      } else {
-        const errMsg = 'Purchase failed. Please try again.';
+      } else if (purchaseResult.status === 'failed') {
+        const errMsg = purchaseResult.error ?? GENERIC_PURCHASE_FAILED_MESSAGE;
         onPurchaseError?.(errMsg);
         setError(errMsg);
       }
@@ -159,6 +177,7 @@ export const CartView: React.FC<ICartViewProps> = ({
               const getSpriteKey = (textureKey: string) => {
                 return textureKey + '/down/standing/0.png';
               };
+              const selectedSkinTextureKey = cartItem.metadata?.selectedSkinTextureKey ?? cartItem.metadata?.selectedSkin;
 
               return (
                 <CartItemRow key={cartItem.item.key}>
@@ -166,7 +185,7 @@ export const CartView: React.FC<ICartViewProps> = ({
                     <SpriteFromAtlas
                       atlasJSON={cartItem.item.metadataType === MetadataType.CharacterSkin ? characterAtlasJSON : atlasJSON}
                       atlasIMG={cartItem.item.metadataType === MetadataType.CharacterSkin ? characterAtlasIMG : atlasIMG}
-                      spriteKey={cartItem.item.metadataType === MetadataType.CharacterSkin && cartItem.metadata?.selectedSkinTextureKey ? getSpriteKey(cartItem.metadata.selectedSkinTextureKey) : cartItem.item.texturePath}
+                      spriteKey={cartItem.item.metadataType === MetadataType.CharacterSkin && selectedSkinTextureKey ? getSpriteKey(selectedSkinTextureKey) : cartItem.item.texturePath}
                       width={24}
                       height={24}
                       imgScale={1.5}

package/src/components/Store/MetadataCollector.tsx

@@ -2,6 +2,11 @@ import { MetadataType } from '@rpg-engine/shared';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { CharacterSkinSelectionModal } from '../Character/CharacterSkinSelectionModal';
 
+interface ICharacterSkinOption {
+  name: string;
+  textureKey: string;
+}
+
 export interface IMetadataCollectorProps {
   metadataType: MetadataType;
   config: Record<string, any>;
@@ -9,6 +14,21 @@ export interface IMetadataCollectorProps {
   onCancel: () => void;
 }
 
+const getCharacterSkinMetadata = (
+  selectedSkinTextureKey: string,
+  availableCharacters: ICharacterSkinOption[]
+) => {
+  const selectedSkin = availableCharacters.find(
+    (character) => character.textureKey === selectedSkinTextureKey
+  );
+
+  return {
+    selectedSkin: selectedSkinTextureKey,
+    selectedSkinName: selectedSkin?.name ?? selectedSkinTextureKey,
+    selectedSkinTextureKey,
+  };
+};
+
 export const MetadataCollector: React.FC<IMetadataCollectorProps> = ({
   metadataType,
   config,
@@ -54,7 +74,14 @@ export const MetadataCollector: React.FC<IMetadataCollectorProps> = ({
       <CharacterSkinSelectionModal
         isOpen
         onClose={handleCancel}
-        onConfirm={(selectedSkin: any) => handleCollect({ selectedSkin })}
+        onConfirm={(selectedSkin: string) =>
+          handleCollect(
+            getCharacterSkinMetadata(
+              selectedSkin,
+              config.availableCharacters || []
+            )
+          )
+        }
         availableCharacters={config.availableCharacters || []}
         atlasJSON={config.atlasJSON}
         atlasIMG={config.atlasIMG}

package/src/components/Store/PaymentMethodModal.tsx

@@ -13,6 +13,7 @@ export interface IPaymentMethodModalProps {
   onPayWithPix: () => void;
   onClose: () => void;
   showPix?: boolean;
+  isProcessing?: boolean;
 }
 
 type PaymentMethod = 'dc' | 'card' | 'pix';
@@ -25,6 +26,7 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   onPayWithPix,
   onClose,
   showPix = false,
+  isProcessing = false,
 }) => {
   const [selected, setSelected] = useState<PaymentMethod>('card');
 
@@ -44,6 +46,8 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   );
 
   const handleConfirm = useCallback(() => {
+    if (isProcessing) return;
+
     if (selected === 'dc' && !dcDisabled) {
       onPayWithDC();
     } else if (selected === 'pix') {
@@ -51,7 +55,11 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
     } else {
       onPayWithCard();
     }
-  }, [selected, dcDisabled, onPayWithDC, onPayWithCard, onPayWithPix]);
+  }, [selected, dcDisabled, isProcessing, onPayWithDC, onPayWithCard, onPayWithPix]);
+
+  const handleClose = useCallback(() => {
+    if (!isProcessing) onClose();
+  }, [isProcessing, onClose]);
 
   const dcSubText =
     dcRequired !== undefined ? (
@@ -67,7 +75,7 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
 
   return (
     <ModalPortal>
-      <Overlay onPointerDown={onClose} />
+      <Overlay onPointerDown={handleClose} />
       <ModalContainer>
         <ModalContent
           onClick={stopPropagation as React.MouseEventHandler}
@@ -76,7 +84,7 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
         >
           <Header>
             <Title>How would you like to pay?</Title>
-            <CloseButton onPointerDown={onClose} aria-label="Close">
+            <CloseButton onPointerDown={handleClose} aria-label="Close" disabled={isProcessing}>
               <Cancel />
             </CloseButton>
           </Header>
@@ -84,7 +92,8 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
           <Options>
             <RadioOption
               $selected={selected === 'card'}
-              onPointerDown={() => setSelected('card')}
+              $disabled={isProcessing}
+              onPointerDown={isProcessing ? undefined : () => setSelected('card')}
             >
               <RadioCircle $selected={selected === 'card'} />
               <OptionText>
@@ -96,7 +105,8 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
             {showPix && (
               <RadioOption
                 $selected={selected === 'pix'}
-                onPointerDown={() => setSelected('pix')}
+                $disabled={isProcessing}
+                onPointerDown={isProcessing ? undefined : () => setSelected('pix')}
               >
                 <RadioCircle $selected={selected === 'pix'} />
                 <OptionText>
@@ -108,8 +118,8 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
 
             <RadioOption
               $selected={selected === 'dc'}
-              $disabled={dcDisabled}
-              onPointerDown={dcDisabled ? undefined : () => setSelected('dc')}
+              $disabled={dcDisabled || isProcessing}
+              onPointerDown={dcDisabled || isProcessing ? undefined : () => setSelected('dc')}
             >
               <RadioCircle $selected={selected === 'dc'} />
               <OptionText>
@@ -120,8 +130,8 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
           </Options>
 
           <ConfirmRow>
-            <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={handleConfirm}>
-              Confirm
+            <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={handleConfirm} disabled={isProcessing}>
+              {isProcessing ? 'Processing...' : 'Confirm'}
             </Button>
           </ConfirmRow>
         </ModalContent>

package/src/components/Store/Store.tsx

@@ -14,7 +14,7 @@ import { DraggableContainer } from '../DraggableContainer';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { LabelPill } from '../shared/LabelPill/LabelPill';
-import { CartView } from './CartView';
+import { CartPurchaseResult, CartView } from './CartView';
 import { FeaturedBanner, IFeaturedItem } from './FeaturedBanner';
 import { packToBlueprint } from './internal/packToBlueprint';
 import { useStoreCart } from './hooks/useStoreCart';
@@ -31,7 +31,7 @@ export interface IStoreProps {
   packs?: IItemPack[];
   atlasJSON: any;
   atlasIMG: string;
-  onPurchase: (purchase: Partial<IPurchase>) => Promise<boolean>;
+  onPurchase: (purchase: Partial<IPurchase>) => Promise<CartPurchaseResult>;
   onShowHistory?: () => void;
   onShowWallet?: () => void;
   walletLabel?: string;

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

@@ -0,0 +1,190 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { CartView } from '../CartView';
+
+jest.mock(
+  '../../../mocks/atlas/entities/entities.json',
+  () => ({ frames: {} }),
+  { virtual: true }
+);
+jest.mock('../../../mocks/atlas/entities/entities.png', () => 'entities.png', {
+  virtual: true,
+});
+
+jest.mock('../../shared/SpriteFromAtlas', () => ({
+  SpriteFromAtlas: ({ spriteKey }) => (
+    <div data-testid="sprite">{spriteKey}</div>
+  ),
+}));
+
+jest.mock('../../shared/MMORPGNumber', () => ({
+  MMORPGNumber: ({ value }) => <span>{value}</span>,
+}));
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ label, onClick, disabled }) => (
+    <button type="button" onClick={onClick} disabled={disabled}>
+      {label}
+    </button>
+  ),
+}));
+
+jest.mock('../TrustBar', () => ({
+  TrustBar: () => <div data-testid="trust-bar" />,
+}));
+
+jest.mock('../PurchaseSuccess', () => ({
+  PurchaseSuccess: () => <div>Purchase Success</div>,
+}));
+
+jest.mock('styled-components', () => {
+  const withoutTransientProps = (props) =>
+    Object.fromEntries(
+      Object.entries(props).filter(([key]) => !key.startsWith('$'))
+    );
+  const createTag = (tag) => () => {
+    if (tag === 'button')
+      return ({ children, ...props }) => (
+        <button {...withoutTransientProps(props)}>{children}</button>
+      );
+    if (tag === 'span')
+      return ({ children, ...props }) => (
+        <span {...withoutTransientProps(props)}>{children}</span>
+      );
+    return ({ children, ...props }) => (
+      <div {...withoutTransientProps(props)}>{children}</div>
+    );
+  };
+  const styled = new Proxy(() => {}, {
+    get: (_target, prop) => {
+      if (prop === '__esModule') return true;
+      return createTag(prop);
+    },
+    apply: () => createTag('div'),
+  });
+  return {
+    __esModule: true,
+    default: styled,
+    keyframes: () => '',
+    css: () => '',
+  };
+});
+
+jest.mock('pixelarticons/react/Cancel', () => ({
+  Cancel: () => <span>x</span>,
+}));
+jest.mock('pixelarticons/react/Delete', () => ({
+  Delete: () => <span>delete</span>,
+}));
+jest.mock('pixelarticons/react/InfoBox', () => ({
+  InfoBox: () => <span>info</span>,
+}));
+jest.mock('pixelarticons/react/Box', () => ({ Box: () => <span>box</span> }));
+jest.mock('pixelarticons/react/ShoppingBag', () => ({
+  ShoppingBag: () => <span>bag</span>,
+}));
+
+const cartItems = [
+  {
+    item: {
+      _id: 'item-1',
+      key: 'life-potion',
+      name: 'Life Potion',
+      price: 1.5,
+      texturePath: 'items/life-potion.png',
+    },
+    quantity: 2,
+  },
+];
+
+const renderCart = (onPurchase, onPurchaseError = jest.fn()) => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+
+  act(() => {
+    ReactDOM.render(
+      <CartView
+        cartItems={cartItems}
+        onRemoveFromCart={jest.fn()}
+        onClose={jest.fn()}
+        onPurchase={onPurchase}
+        atlasJSON={{}}
+        atlasIMG="items.png"
+        onPurchaseError={onPurchaseError}
+      />,
+      container
+    );
+  });
+
+  return { container, onPurchaseError };
+};
+
+const clickPay = async (container) => {
+  const button = Array.from(container.querySelectorAll('button')).find(
+    (button) => button.textContent.includes('Pay')
+  );
+  await act(async () => {
+    button.click();
+  });
+};
+
+describe('CartView purchase result handling', () => {
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(document.body.lastElementChild);
+    document.body.innerHTML = '';
+  });
+
+  it('treats cancelled purchases as a quiet dismissal without generic error telemetry', async () => {
+    const onPurchaseError = jest.fn();
+    const { container } = renderCart(
+      jest.fn().mockResolvedValue({ status: 'cancelled' }),
+      onPurchaseError
+    );
+
+    await clickPay(container);
+
+    expect(container.textContent).not.toContain(
+      'Purchase failed. Please try again.'
+    );
+    expect(container.textContent).not.toContain(
+      'An error occurred during purchase. Please try again.'
+    );
+    expect(onPurchaseError).not.toHaveBeenCalled();
+  });
+
+  it('shows and reports the exact failed purchase error message', async () => {
+    const onPurchaseError = jest.fn();
+    const exactError = 'Your session has expired. Please log in again.';
+    const { container } = renderCart(
+      jest.fn().mockResolvedValue({ status: 'failed', error: exactError }),
+      onPurchaseError
+    );
+
+    await clickPay(container);
+
+    expect(container.textContent).toContain(exactError);
+    expect(onPurchaseError).toHaveBeenCalledWith(exactError);
+  });
+
+  it('keeps legacy false purchase results as the generic failure fallback', async () => {
+    const onPurchaseError = jest.fn();
+    const { container } = renderCart(
+      jest.fn().mockResolvedValue(false),
+      onPurchaseError
+    );
+
+    await clickPay(container);
+
+    expect(container.textContent).toContain(
+      'Purchase failed. Please try again.'
+    );
+    expect(onPurchaseError).toHaveBeenCalledWith(
+      'Purchase failed. Please try again.'
+    );
+  });
+});

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

@@ -72,11 +72,16 @@ describe('MetadataCollector', () => {
   });
 
   it('collects once without cancelling again when the modal closes after confirm', () => {
+    const availableCharacters = [
+      { name: 'Superior Knight', textureKey: 'superior-knight' },
+      { name: 'Black Knight', textureKey: 'black-knight' },
+    ];
+
     act(() => {
       ReactDOM.render(
         <MetadataCollector
           metadataType={MetadataType.CharacterSkin}
-          config={{ availableCharacters: ['char1', 'char2'] }}
+          config={{ availableCharacters }}
           onCollect={mockOnCollect}
           onCancel={mockOnCancel}
         />,
@@ -87,11 +92,15 @@ describe('MetadataCollector', () => {
     const callArgs = CharacterSkinSelectionModal.mock.calls[0][0];
 
     act(() => {
-      callArgs.onConfirm('char1');
+      callArgs.onConfirm('superior-knight');
       callArgs.onClose();
     });
 
-    expect(mockOnCollect).toHaveBeenCalledWith({ selectedSkin: 'char1' });
+    expect(mockOnCollect).toHaveBeenCalledWith({
+      selectedSkin: 'superior-knight',
+      selectedSkinName: 'Superior Knight',
+      selectedSkinTextureKey: 'superior-knight',
+    });
     expect(mockOnCollect).toHaveBeenCalledTimes(1);
     expect(mockOnCancel).not.toHaveBeenCalled();