Skip to content

Feat: payment selector #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Maximus7474 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Feat: payment selector #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0825fb9
feat: added payment selector system
Maximus7474 Jan 27, 2026
eda0e72
refactor(server): allow user to pay with cash
Maximus7474 Jan 27, 2026
cbcd089
refactor(web/paymentselector): added cash option to AccountSelector w…
Maximus7474 Jan 27, 2026
24b218d
chore(locales/en): added cash locale field
Maximus7474 Jan 27, 2026
84f1dce
tweak(locales/en): pay selector title
Maximus7474 Jan 27, 2026
eb0af75
tweak(web/layouts): PaymentStatus styling
Maximus7474 Jan 27, 2026
c577284
fix(web/layouts): AccountSelector pagination value being off by 1 value
Maximus7474 Jan 27, 2026
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
5 changes: 3 additions & 2 deletions bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 12 additions & 1 deletion locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"date_format": "yyyy/MM/dd HH:mm",
"currency": "USD",
"bank": "Bank",
"cash": "Cash",
"target_access_bank": "Access bank",
"target_access_atm": "Access ATM",
"text_ui_access_bank": "[E] - Access bank",
Expand Down Expand Up @@ -158,9 +159,19 @@
"no_permission": "You are not authorised to perform this action.",
"invalid_input": "Invalid input.",
"insufficient_funds": "Insufficient funds",
"insufficient_balance": "Insufficient funds",
"no_balance": "No balance",
"no_access": "No access",
"time_out": "Action timed out",
"something_went_wrong": "Unknown error, something went wrong",
"account_id_not_exists": "No account with such id found",
"same_account_transfer": "Cannot transfer money to the same account"
"same_account_transfer": "Cannot transfer money to the same account",
"pay_selector_title": "Payment Method",
"pay_selector_reason": "Purchase",
"pay_selector_no_reason": "Amount",
"pay_selector_amount": "Amount",
"pay_selector_status": "Payment Status",
"pay_selector_awaiting_payment": "Awaiting Payment...",
"pay_selector_processing": "Processing",
"pay_selector_denied": "Action denied for this account"
}
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"fast-printf": "^1.6.9",
"jotai": "^2.10.0",
"jotai-tanstack-query": "^0.7.2",
"lucide-react": "^0.428.0",
"lucide-react": "^0.563.0",
"prettier": "^3.3.3",
"react": "^18.3.1",
"react-day-picker": "8.10.1",
Expand Down Expand Up @@ -77,4 +77,4 @@
"engines": {
"node": ">=16.9.1"
}
}
}
44 changes: 39 additions & 5 deletions src/client/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
import { Config, LoadJsonFile, Locale } from '@common/.';
import { OxAccountPermissions, OxAccountRole } from '@communityox/ox_core';
import { cache, getLocales, hideTextUI, requestAnimDict, sleep, waitFor } from '@communityox/ox_lib/client';
import type { Character } from '../common/typings';
import {
cache,
getLocales,
hideTextUI,
onServerCallback,
requestAnimDict,
sleep,
waitFor,
} from '@communityox/ox_lib/client';
import type { Character, NuiPaySelectionData, NuiPaySelectResponse, PaySelectNuiData } from '../common/typings';
import { SendTypedNUIMessage, serverNuiCallback } from './utils';

let hasLoadedUi = false;
Expand Down Expand Up @@ -44,10 +52,9 @@ const openAtm = async ({ entity }: { entity: number }) => {
const [cX, cY, cZ] = GetEntityCoords(entity, false);
const [pX, pY, pZ] = GetEntityCoords(cache.ped, false);

const doAnim = (entity && DoesEntityExist(entity) && Math.abs((cX - cY) + (cZ - pX) + (pY - pZ)) < 5.0)
const doAnim = entity && DoesEntityExist(entity) && Math.abs(cX - cY + (cZ - pX) + (pY - pZ)) < 5.0;

if (doAnim)
{
if (doAnim) {
const [x, y, z] = GetOffsetFromEntityInWorldCoords(entity, 0, -0.7, 1);
const heading = GetEntityHeading(entity);
const sequence = OpenSequenceTask(0) as unknown as number;
Expand Down Expand Up @@ -156,6 +163,33 @@ on('ox_inventory:itemCount', (itemName: string, count: number) => {
SendTypedNUIMessage<Character>('refreshCharacter', { cash: count });
});

let currentPaymentPromise: Function | null = null;
onServerCallback(
'ox_banking:usePaySelector',
async (amount: PaySelectNuiData['amount'], reason: PaySelectNuiData['reason']) => {
setupUi();
SetNuiFocus(true, true);
SendTypedNUIMessage<PaySelectNuiData>('openPaySelector', { amount, reason });

return new Promise((resolve) => {
currentPaymentPromise = (data: NuiPaySelectionData) => resolve(data);
});
}
);

RegisterNuiCallback('confirmPayment', async (data: NuiPaySelectionData, cb: Function) => {
if (currentPaymentPromise) {
currentPaymentPromise(data);
currentPaymentPromise = null;
}

cb({ received: true });
});

onNet('ox_banking:paySelectorResponse', (response: { success: boolean; message: string }) => {
SendTypedNUIMessage('paySelectorResult', response);
});

serverNuiCallback('getDashboardData');
serverNuiCallback('transferOwnership');
serverNuiCallback('manageUser');
Expand Down
1 change: 1 addition & 0 deletions src/common/typings/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ export * from './game';
export * from './accounts';
export * from './character';
export * from './nui';
export * from './payselector';
22 changes: 22 additions & 0 deletions src/common/typings/payselector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
export type NuiPaySelectResponse =
| {
success: true;
}
| {
success: false;
message: string;
};

export type NuiPaySelectionData =
| {
cancelled: false;
accountId: number;
}
| {
cancelled: true;
};

export interface PaySelectNuiData {
reason: string;
amount: number;
}
97 changes: 95 additions & 2 deletions src/server/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import type { OxAccountRole, OxAccountUserMetadata } from '@communityox/ox_core';
import { CreateAccount, GetAccount, GetCharacterAccount, GetPlayer } from '@communityox/ox_core/server';
import { onClientCallback, versionCheck, checkDependency } from '@communityox/ox_lib/server';
import {
onClientCallback,
versionCheck,
checkDependency,
triggerClientCallback,
locale,
} from '@communityox/ox_lib/server';
import { oxmysql } from '@communityox/oxmysql';
import type { DateRange } from 'react-day-picker';
import type {
Expand All @@ -11,6 +17,7 @@ import type {
Invoice,
InvoicesFilters,
LogsFilters,
NuiPaySelectionData,
RawLogItem,
Transaction,
} from '../common/typings';
Expand Down Expand Up @@ -137,7 +144,7 @@ onClientCallback(

if (!hasPermission) return;

target = typeof(target) == "string" ? Number.parseInt(target) : target
target = typeof target == 'string' ? Number.parseInt(target) : target;
let targetAccountId = 0;

try {
Expand Down Expand Up @@ -820,3 +827,89 @@ function sanitizeSearch(search: string) {

return search === '+*' ? null : search;
}

let usingSelector: number[] = [];
async function usePaySelector(playerId: number, amount: number, reason: string = '') {
if (usingSelector.includes(playerId)) return { success: false, message: 'already_using' };

const player = GetPlayer(playerId);
if (!player) return { success: false, message: 'no_player' };

const closeSelector = (success: boolean, message?: string | null) => {
usingSelector = usingSelector.filter((id) => id !== playerId);
return { success, message };
};

usingSelector.push(playerId);

let response: NuiPaySelectionData | void;
try {
response = await triggerClientCallback<NuiPaySelectionData>('ox_banking:usePaySelector', playerId, amount, reason);
} catch {
// doubt much would error excluding a time out
player.emit('ox_banking:paySelectorResponse', {
success: false,
message: locale('time_out'),
});

return closeSelector(false, 'time_out');
}

if (!response || response.cancelled === true) {
return closeSelector(false, !response ? 'failed_to_send' : 'payment_cancelled');
}

// response from client will have accountId set to -1 if paying with cash
if (response.accountId > 0) {
const account = await GetAccount(response.accountId);
const hasPermission = await account.playerHasPermission(playerId, 'payInvoice');
const hasFunds = await account.get('balance');

if (!hasPermission) {
player.emit('ox_banking:paySelectorResponse', {
success: false,
message: locale('pay_selector_denied'),
});
return closeSelector(false, 'unauthorised');
}

if (hasFunds > amount) {
player.emit('ox_banking:paySelectorResponse', {
success: false,
message: locale('pay_selector_denied'),
});
return closeSelector(false, 'insufficient_funds');
}

const actionResponse = await account.removeBalance({
amount,
overdraw: false,
message: `Payment by ${player.get('firstName')} ${player.get('lastName')} for ${reason}`,
});

if (!actionResponse.success) {
player.emit('ox_banking:paySelectorResponse', {
success: false,
message: locale(actionResponse.message),
});
}

return closeSelector(actionResponse.success, actionResponse.message);
} else {
const hasFunds = exports.ox_inventory.GetItemCount(playerId, 'money') as number;

if (hasFunds > amount) {
player.emit('ox_banking:paySelectorResponse', {
success: false,
message: locale('pay_selector_denied'),
});
return closeSelector(false, 'insufficient_funds');
}

exports.ox_inventory.RemoveItem(playerId, 'money', amount);

return closeSelector(true);
}
}

exports('usePaySelector', usePaySelector);
4 changes: 3 additions & 1 deletion src/web/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import DeveloperDrawer from './layouts/dev/DeveloperDrawer';
import locales, { setLocale } from './locales';
import { Permissions, setPermissions } from './permissions';
import { isEnvBrowser } from './utils/misc';
import PaymentSelector from './layouts/paymentselector/PaymentSelector';

const App: React.FC = () => {
useNuiEvent('setInitData', (data: { locales: typeof locales; permissions: Permissions }) => {
Expand All @@ -18,8 +19,9 @@ const App: React.FC = () => {
<div className="flex h-full w-full items-center justify-center">
<ModalsProvider>
<Bank />
{isEnvBrowser() && <DeveloperDrawer />}
<ATM />
<PaymentSelector />
{isEnvBrowser() && <DeveloperDrawer />}
</ModalsProvider>
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion src/web/src/layouts/dev/DeveloperDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import React from 'react';
import { Wrench } from 'lucide-react';
import { Button } from '../../components/ui/button';
import { useAtmVisibilityState, useBankVisibilityState } from '../../state/visibility';
import { useAtmVisibilityState, useBankVisibilityState, usePaySelectorVisibilityState } from '../../state/visibility';
import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';

const DeveloperDrawer: React.FC = () => {
const [open, setOpen] = React.useState(false);
const [bankVisibility, setBankVisibility] = useBankVisibilityState();
const [atmVisibility, setAtmVisibility] = useAtmVisibilityState();
const [paySelectorVisibility, setPaySelectorVisibility] = usePaySelectorVisibilityState();

return (
<>
Expand All @@ -24,6 +25,7 @@ const DeveloperDrawer: React.FC = () => {

<Button onClick={() => setBankVisibility((prev) => !prev)}>{bankVisibility ? 'Close' : 'Open'} bank</Button>
<Button onClick={() => setAtmVisibility((prev) => !prev)}>{atmVisibility ? 'Close' : 'Open'} ATM</Button>
<Button onClick={() => setPaySelectorVisibility((prev) => !prev)}>{paySelectorVisibility ? 'Close' : 'Open'} Payment Selector</Button>
</SheetContent>
</Sheet>
</>
Expand Down
Loading