@rpg-engine/long-bow 0.8.198 → 0.8.199

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.198",
+  "version": "0.8.199",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Store/Store.tsx

@@ -4,7 +4,7 @@ import { Gift } from 'pixelarticons/react/Gift';
 import { Package } from 'pixelarticons/react/Package';
 import { Wallet } from 'pixelarticons/react/Wallet';
 import React, { ReactNode, useMemo, useState } from 'react';
-import { FaHistory, FaShoppingCart, FaWallet } from 'react-icons/fa';
+import { FaHistory, FaShoppingCart, FaTicketAlt, FaWallet } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
@@ -18,10 +18,11 @@ import { useStoreCart } from './hooks/useStoreCart';
 import { MetadataCollector } from './MetadataCollector';
 import { StoreItemsSection } from './sections/StoreItemsSection';
 import { StorePacksSection } from './sections/StorePacksSection';
+import { StoreRedeemSection } from './sections/StoreRedeemSection';
 import { StoreItemDetails } from './StoreItemDetails';
 
 // Define TabId union type for tab identifiers
-type TabId = 'premium' | 'packs' | 'items' | 'wallet' | 'history';
+type TabId = 'premium' | 'packs' | 'items' | 'wallet' | 'history' | 'redeem';
 
 // Define IStoreProps locally as a workaround
 export interface IStoreProps {
@@ -74,6 +75,12 @@ 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 };
@@ -116,6 +123,9 @@ export const Store: React.FC<IStoreProps> = ({
   onPurchaseError,
   onBuyDC,
   currencySymbol = '$',
+  onRedeem,
+  onRedeemInputFocus,
+  onRedeemInputBlur,
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
@@ -230,6 +240,7 @@ export const Store: React.FC<IStoreProps> = ({
   // Build tabs dynamically based on props
   const tabIds: TabId[] = [
     ...(tabOrder ?? ['premium', 'packs', 'items']),
+    ...(onRedeem ? ['redeem' as TabId] : []),
     ...((onShowWallet || customWalletContent) ? ['wallet' as TabId] : []),
     ...((onShowHistory || customHistoryContent) ? ['history' as TabId] : [])
   ];
@@ -335,6 +346,18 @@ export const Store: React.FC<IStoreProps> = ({
         />
       ),
     },
+    redeem: {
+      id: 'redeem',
+      title: 'Redeem',
+      icon: <FaTicketAlt size={16} />,
+      content: onRedeem ? (
+        <StoreRedeemSection
+          onRedeem={onRedeem}
+          onInputFocus={onRedeemInputFocus}
+          onInputBlur={onRedeemInputBlur}
+        />
+      ) : null,
+    },
     wallet: {
       id: 'wallet',
       title: walletLabel ?? 'Wallet',

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

@@ -0,0 +1,232 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act, Simulate } from 'react-dom/test-utils';
+import { StoreRedeemSection } from '../sections/StoreRedeemSection';
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ label, onClick, disabled }) => (
+    <button onClick={onClick} disabled={disabled} data-testid="cta-button">
+      {label}
+    </button>
+  ),
+}));
+
+jest.mock('styled-components', () => {
+  const createTag = (tag) => () => {
+    if (tag === 'input') return (props) => <input {...props} />;
+    if (tag === 'h3') return ({ children }) => <h3>{children}</h3>;
+    if (tag === 'p') return ({ children }) => <p>{children}</p>;
+    return ({ children, ...props }) => <div {...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('react-icons/fa', () => ({
+  FaCheckCircle: () => <span>check</span>,
+  FaExclamationCircle: () => <span>error</span>,
+  FaTicketAlt: () => <span>ticket</span>,
+}));
+
+jest.mock('../../../constants/uiColors', () => ({
+  uiColors: {
+    white: '#fff',
+    lightGray: '#888',
+    green: '#4CAF50',
+    red: '#D04648',
+  },
+}));
+
+const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe('StoreRedeemSection', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
+
+  it('should render input and redeem button', () => {
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={jest.fn()} />,
+        container
+      );
+    });
+    expect(container.querySelector('input')).toBeTruthy();
+    expect(container.textContent).toContain('Redeem Code');
+  });
+
+  it('should disable button when input is empty', () => {
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={jest.fn()} />,
+        container
+      );
+    });
+    const button = container.querySelector('[data-testid="cta-button"]');
+    expect(button.disabled).toBe(true);
+  });
+
+  it('should enable button when input has text', () => {
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={jest.fn()} />,
+        container
+      );
+    });
+    const input = container.querySelector('input');
+    act(() => {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      ).set;
+      nativeInputValueSetter.call(input, 'ABC-123');
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+    const button = container.querySelector('[data-testid="cta-button"]');
+    expect(button.disabled).toBe(false);
+  });
+
+  it('should show success with DC amount on valid redeem', async () => {
+    const onRedeem = jest.fn().mockResolvedValue({ success: true, dcAmount: 550 });
+
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={onRedeem} />,
+        container
+      );
+    });
+
+    const input = container.querySelector('input');
+    act(() => {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      ).set;
+      nativeInputValueSetter.call(input, 'CHB-550-ABCDEF1234');
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    const button = container.querySelector('[data-testid="cta-button"]');
+    await act(async () => {
+      button.click();
+      await flushPromises();
+    });
+
+    expect(onRedeem).toHaveBeenCalledWith('CHB-550-ABCDEF1234');
+    expect(container.textContent).toContain('Code Redeemed');
+    expect(container.textContent).toContain('+550 DC');
+  });
+
+  it('should show error on failed redeem', async () => {
+    const onRedeem = jest.fn().mockResolvedValue({ success: false, error: 'Invalid voucher code.' });
+
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={onRedeem} />,
+        container
+      );
+    });
+
+    const input = container.querySelector('input');
+    act(() => {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      ).set;
+      nativeInputValueSetter.call(input, 'INVALID-CODE');
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    const button = container.querySelector('[data-testid="cta-button"]');
+    await act(async () => {
+      button.click();
+      await flushPromises();
+    });
+
+    expect(container.textContent).toContain('Invalid voucher code.');
+    expect(container.textContent).toContain('Try Again');
+  });
+
+  it('should reset to idle when "Redeem Another" is clicked after success', async () => {
+    const onRedeem = jest.fn().mockResolvedValue({ success: true, dcAmount: 100 });
+
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={onRedeem} />,
+        container
+      );
+    });
+
+    const input = container.querySelector('input');
+    act(() => {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      ).set;
+      nativeInputValueSetter.call(input, 'CODE123');
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    const submitBtn = container.querySelector('[data-testid="cta-button"]');
+    await act(async () => {
+      submitBtn.click();
+      await flushPromises();
+    });
+
+    expect(container.textContent).toContain('Redeem Another');
+
+    const redeemAnotherBtn = Array.from(container.querySelectorAll('[data-testid="cta-button"]'))
+      .find(b => b.textContent.includes('Redeem Another'));
+
+    act(() => { redeemAnotherBtn.click(); });
+
+    expect(container.querySelector('input')).toBeTruthy();
+    expect(container.textContent).toContain('Redeem Code');
+  });
+
+  it('should call onInputFocus when input is focused', () => {
+    const onInputFocus = jest.fn();
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={jest.fn()} onInputFocus={onInputFocus} />,
+        container
+      );
+    });
+
+    const input = container.querySelector('input');
+    act(() => { Simulate.focus(input); });
+    expect(onInputFocus).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onInputBlur when input loses focus', () => {
+    const onInputBlur = jest.fn();
+    act(() => {
+      ReactDOM.render(
+        <StoreRedeemSection onRedeem={jest.fn()} onInputBlur={onInputBlur} />,
+        container
+      );
+    });
+
+    const input = container.querySelector('input');
+    act(() => { Simulate.blur(input); });
+    expect(onInputBlur).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Store/sections/StoreRedeemSection.tsx

@@ -0,0 +1,258 @@
+import React, { useState } from 'react';
+import { FaCheckCircle, FaExclamationCircle, FaTicketAlt } from 'react-icons/fa';
+import styled, { keyframes } from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { CTAButton } from '../../shared/CTAButton/CTAButton';
+
+type RedeemStatus = 'idle' | 'loading' | 'success' | 'error';
+
+export interface IStoreRedeemSectionProps {
+  onRedeem: (code: string) => Promise<{ success: boolean; dcAmount?: number; error?: string }>;
+  onInputFocus?: () => void;
+  onInputBlur?: () => void;
+}
+
+export const StoreRedeemSection: React.FC<IStoreRedeemSectionProps> = ({
+  onRedeem,
+  onInputFocus,
+  onInputBlur,
+}) => {
+  const [code, setCode] = useState('');
+  const [status, setStatus] = useState<RedeemStatus>('idle');
+  const [dcAmount, setDcAmount] = useState<number | undefined>();
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const canSubmit = code.trim().length > 0 && status !== 'loading';
+
+  const handleSubmit = async (): Promise<void> => {
+    if (!canSubmit) return;
+
+    const normalizedCode = code.trim().toUpperCase();
+    setStatus('loading');
+    setErrorMessage('');
+
+    try {
+      const result = await onRedeem(normalizedCode);
+      if (result.success) {
+        setStatus('success');
+        setDcAmount(result.dcAmount);
+      } else {
+        setStatus('error');
+        setErrorMessage(result.error ?? 'Redemption failed. Please try again.');
+      }
+    } catch {
+      setStatus('error');
+      setErrorMessage('Something went wrong. Please try again.');
+    }
+  };
+
+  const handleReset = (): void => {
+    setCode('');
+    setStatus('idle');
+    setDcAmount(undefined);
+    setErrorMessage('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent): void => {
+    if (e.key === 'Enter') {
+      void handleSubmit();
+    }
+  };
+
+  if (status === 'success') {
+    return (
+      <Container>
+        <ResultContainer>
+          <SuccessIcon>
+            <FaCheckCircle size={32} />
+          </SuccessIcon>
+          <SuccessTitle>Code Redeemed!</SuccessTitle>
+          {dcAmount != null && (
+            <DCAmountDisplay>+{dcAmount.toLocaleString()} DC</DCAmountDisplay>
+          )}
+          <SuccessHint>Your wallet balance has been updated.</SuccessHint>
+          <ButtonWrapper>
+            <CTAButton
+              icon={<FaTicketAlt />}
+              label="Redeem Another"
+              onClick={handleReset}
+            />
+          </ButtonWrapper>
+        </ResultContainer>
+      </Container>
+    );
+  }
+
+  if (status === 'error') {
+    return (
+      <Container>
+        <ResultContainer>
+          <ErrorIcon>
+            <FaExclamationCircle size={32} />
+          </ErrorIcon>
+          <ErrorTitle>{errorMessage}</ErrorTitle>
+          <ButtonWrapper>
+            <CTAButton
+              icon={<FaTicketAlt />}
+              label="Try Again"
+              onClick={handleReset}
+            />
+          </ButtonWrapper>
+        </ResultContainer>
+      </Container>
+    );
+  }
+
+  return (
+    <Container>
+      <Title>Redeem a Voucher Code</Title>
+      <Description>
+        Enter your voucher code below to receive Definya Coins.
+      </Description>
+      <InputRow>
+        <CodeInput
+          type="text"
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          onFocus={onInputFocus}
+          onBlur={onInputBlur}
+          onKeyDown={handleKeyDown}
+          placeholder="Enter code..."
+          disabled={status === 'loading'}
+          autoComplete="off"
+          spellCheck={false}
+        />
+      </InputRow>
+      <ButtonWrapper>
+        <CTAButton
+          icon={<FaTicketAlt />}
+          label={status === 'loading' ? 'Redeeming...' : 'Redeem Code'}
+          onClick={() => { void handleSubmit(); }}
+          disabled={!canSubmit}
+          fullWidth
+        />
+      </ButtonWrapper>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1.5rem;
+  max-width: 420px;
+  margin: 0 auto;
+  gap: 1rem;
+`;
+
+const Title = styled.h3`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.85rem;
+  color: ${uiColors.white};
+  margin: 0;
+  text-align: center;
+`;
+
+const Description = styled.p`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.55rem;
+  color: ${uiColors.lightGray};
+  margin: 0;
+  text-align: center;
+  line-height: 1.6;
+`;
+
+const InputRow = styled.div`
+  width: 100%;
+`;
+
+const CodeInput = styled.input`
+  width: 100%;
+  padding: 12px 14px;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+  color: ${uiColors.white};
+  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: ${uiColors.lightGray};
+    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;
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  width: 100%;
+  margin-top: 0.5rem;
+`;
+
+const ResultContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 0;
+`;
+
+const glowPulse = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+`;
+
+const SuccessIcon = styled.div`
+  color: ${uiColors.green};
+  animation: ${glowPulse} 1.5s ease-in-out infinite;
+`;
+
+const SuccessTitle = styled.h3`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.85rem;
+  color: ${uiColors.green};
+  margin: 0;
+`;
+
+const DCAmountDisplay = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 1.2rem;
+  color: #fef08a;
+  text-shadow: 0 0 10px rgba(254, 240, 138, 0.5);
+`;
+
+const SuccessHint = styled.p`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: ${uiColors.lightGray};
+  margin: 0;
+`;
+
+const ErrorIcon = styled.div`
+  color: ${uiColors.red};
+`;
+
+const ErrorTitle = styled.p`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem;
+  color: ${uiColors.red};
+  margin: 0;
+  text-align: center;
+  line-height: 1.6;
+`;

package/src/index.tsx

@@ -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';