Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion apps/web/src/lib/__tests__/wallet-store.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ vi.mock('@/services/api', () => ({
paymentsAPI,
}));

import { getWalletSnapshot } from '../wallet-store';
import { getWalletSnapshot, topUpWallet } from '../wallet-store';

describe('wallet-store', () => {
beforeEach(() => {
Expand Down Expand Up @@ -49,4 +49,28 @@ describe('wallet-store', () => {
expect(snapshot.transactions).toEqual([bookingTransaction]);
expect(snapshot.wallet.recent_transactions).toEqual([bookingTransaction]);
});

it('uses the caller-provided idempotency key when topping up the wallet', async () => {
paymentsAPI.topUp.mockResolvedValue({
success: true,
data: { balance: 32500 },
});
paymentsAPI.getWallet.mockResolvedValue({
success: true,
data: {
id: 'wallet-user-1',
user_id: 'user-1',
balance: 32500,
currency: 'EGP',
recent_transactions: [],
},
});

await topUpWallet('user-1', 2500, 'wallet:topup:user-1:intent-1');

expect(paymentsAPI.topUp).toHaveBeenCalledWith({
amount: 2500,
idempotency_key: 'wallet:topup:user-1:intent-1',
});
});
});
6 changes: 5 additions & 1 deletion apps/web/src/lib/wallet-store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -149,14 +149,18 @@ export async function getWalletSnapshot(userId: string): Promise<StoredWalletSta
export async function topUpWallet(
userId: string,
amountPiasters: number,
idempotencyKey: string,
description = DEFAULT_TOP_UP_DESCRIPTION,
reference?: { reference_id?: string; reference_type?: string },
): Promise<StoredWalletState> {
if (!Number.isSafeInteger(amountPiasters) || amountPiasters <= 0) {
throw new Error('amountPiasters must be a positive integer');
}

const response = await paymentsAPI.topUp(amountPiasters);
const response = await paymentsAPI.topUp({
amount: amountPiasters,
idempotency_key: idempotencyKey,
});
Comment thread
idris-builds marked this conversation as resolved.
if (!response.success) {
throw new Error('فشل شحن المحفظة');
}
Expand Down
31 changes: 27 additions & 4 deletions apps/web/src/pages/profile/WalletPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,21 @@ import { useAuth } from '@/hooks/use-auth';
import { formatPrice } from '@/lib/format';
import { getWalletSnapshot, parseEgpInputToPiasters, topUpWallet } from '@/lib/wallet-store';

function createWalletTopUpIdempotencyKey(userId: string) {
return `wallet:topup:${userId}:${crypto.randomUUID()}`;
}

const WalletPage = () => {
const { user } = useAuth();
const [wallet, setWallet] = useState<WalletType | null>(null);
const [transactions, setTransactions] = useState<Transaction[]>([]);
const [topupAmount, setTopupAmount] = useState('');
const [showTopup, setShowTopup] = useState(false);
const [loading, setLoading] = useState(true);
const [pendingTopupIntent, setPendingTopupIntent] = useState<{
amountPiasters: number;
idempotencyKey: string;
} | null>(null);

const refreshWallet = useCallback(async () => {
if (!user) {
Expand Down Expand Up @@ -55,12 +63,18 @@ const WalletPage = () => {
}

setLoading(true);
const idempotencyKey =
pendingTopupIntent?.amountPiasters === amountPiasters
? pendingTopupIntent.idempotencyKey
: createWalletTopUpIdempotencyKey(user.id);
setPendingTopupIntent({ amountPiasters, idempotencyKey });
try {
const snapshot = await topUpWallet(user.id, amountPiasters);
const snapshot = await topUpWallet(user.id, amountPiasters, idempotencyKey);
setWallet(snapshot.wallet);
setTransactions(snapshot.transactions);
setShowTopup(false);
setTopupAmount('');
setPendingTopupIntent(null);
toast.success('تم شحن المحفظة بنجاح');
} catch (error: unknown) {
toast.error(error instanceof Error ? error.message : 'تعذر شحن المحفظة');
Expand Down Expand Up @@ -129,7 +143,10 @@ const WalletPage = () => {
variant="outline"
size="sm"
className="hover:scale-[1.05] transition-transform rounded-lg"
onClick={() => setTopupAmount(String(amt))}
onClick={() => {
setTopupAmount(String(amt));
setPendingTopupIntent(null);
}}
>
{amt}
</Button>
Expand All @@ -141,7 +158,10 @@ const WalletPage = () => {
step="0.01"
placeholder="مبلغ آخر..."
value={topupAmount}
onChange={(e) => setTopupAmount(e.target.value)}
onChange={(e) => {
setTopupAmount(e.target.value);
setPendingTopupIntent(null);
}}
className="h-12 rounded-xl"
/>
<div className="flex gap-3">
Expand All @@ -155,7 +175,10 @@ const WalletPage = () => {
<Button
variant="outline"
className="h-12 rounded-xl"
onClick={() => setShowTopup(false)}
onClick={() => {
setShowTopup(false);
setPendingTopupIntent(null);
}}
>
إلغاء
</Button>
Expand Down
133 changes: 133 additions & 0 deletions apps/web/src/pages/profile/__tests__/WalletPage.spec.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import type { ReactNode } from 'react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router';
import { beforeEach, describe, expect, it, vi } from 'vitest';

import WalletPage from '../WalletPage';

const mockGetWalletSnapshot = vi.fn();
const mockTopUpWallet = vi.fn();
const mockToastSuccess = vi.fn();
const mockToastError = vi.fn();
const mockRandomUuid = vi.fn();

vi.mock('@/components/layout/Layout', () => ({
Layout: ({ children }: { children: ReactNode }) => <div>{children}</div>,
}));

vi.mock('@/components/motion/PageTransition', () => ({
PageTransition: ({ children }: { children: ReactNode }) => <div>{children}</div>,
GradientMesh: () => null,
}));

vi.mock('@/components/motion/ScrollReveal', () => ({
SR: ({ children }: { children: ReactNode }) => <div>{children}</div>,
}));

vi.mock('@/components/motion/Skeleton', () => ({
Skeleton: () => null,
}));

vi.mock('@/hooks/use-auth', () => ({
useAuth: () => ({
user: {
id: 'user-1',
email: 'resident@hena-wadeena.online',
},
}),
}));

vi.mock('@/lib/format', () => ({
formatPrice: (value: number) => String(value),
}));

vi.mock('@/lib/wallet-store', () => ({
getWalletSnapshot: (...args: unknown[]) => mockGetWalletSnapshot(...args),
parseEgpInputToPiasters: (value: string) => {
const amount = Number(value);
return Number.isFinite(amount) ? amount * 100 : null;
},
topUpWallet: (...args: unknown[]) => mockTopUpWallet(...args),
}));

vi.mock('sonner', () => ({
toast: {
success: (...args: unknown[]) => mockToastSuccess(...args),
error: (...args: unknown[]) => mockToastError(...args),
},
}));

describe('WalletPage', () => {
beforeEach(() => {
vi.clearAllMocks();
mockGetWalletSnapshot.mockResolvedValue({
wallet: {
id: 'wallet-user-1',
user_id: 'user-1',
balance: 0,
currency: 'EGP',
recent_transactions: [],
},
transactions: [],
});

mockRandomUuid.mockReset();
mockRandomUuid
.mockReturnValueOnce('idem-1')
.mockReturnValueOnce('idem-2')
.mockReturnValueOnce('idem-3');
vi.spyOn(globalThis.crypto, 'randomUUID').mockImplementation(() => mockRandomUuid());
});

it('reuses the same idempotency key when the user retries the same top-up', async () => {
mockTopUpWallet
.mockRejectedValueOnce(new Error('network error'))
.mockResolvedValueOnce({
wallet: {
id: 'wallet-user-1',
user_id: 'user-1',
balance: 10000,
currency: 'EGP',
recent_transactions: [],
},
transactions: [],
});

render(
<MemoryRouter>
<WalletPage />
</MemoryRouter>,
);

await screen.findByText('الرصيد الحالي');

fireEvent.click(screen.getByRole('button', { name: 'شحن المحفظة' }));
fireEvent.change(screen.getByPlaceholderText('مبلغ آخر...'), {
target: { value: '100' },
});

fireEvent.click(screen.getByRole('button', { name: 'شحن الآن' }));

await waitFor(() =>
expect(mockTopUpWallet).toHaveBeenNthCalledWith(
1,
'user-1',
10000,
'wallet:topup:user-1:idem-1',
),
);

fireEvent.click(screen.getByRole('button', { name: 'شحن الآن' }));

await waitFor(() =>
expect(mockTopUpWallet).toHaveBeenNthCalledWith(
2,
'user-1',
10000,
'wallet:topup:user-1:idem-1',
),
);

expect(mockRandomUuid).toHaveBeenCalledTimes(1);
});
});
4 changes: 2 additions & 2 deletions apps/web/src/services/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1443,10 +1443,10 @@ export interface Transaction {

export const paymentsAPI = {
getWallet: () => apiFetchWithRefresh<{ success: boolean; data: Wallet }>('/wallet'),
topUp: (amount: number) =>
topUp: (data: { amount: number; idempotency_key: string }) =>
apiFetchWithRefresh<{ success: boolean; data: { balance: number } }>('/wallet/topup', {
method: 'POST',
body: JSON.stringify({ amount }),
body: JSON.stringify(data),
}),
deduct: (data: {
amount: number;
Expand Down
Loading