frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit referrals actions

Browse Source
This commit is contained in:
smanylov
2026-02-25 18:17:08 +07:00
parent bc1d5d5337
commit d18071e533
10 changed files with 397 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/forms/login-form.tsx
+2 -3
View File
@@ -106,12 +106,11 @@ export default function LoginForm() {
className={`${styles['btn']}`}
disabled={isPending}
>
{isPending ? (
{t("sign-in")}
{isPending && (
<div className="loading-animation">
<div className="global-spinner"></div>
</div>
) : (
t("sign-in")
)}
</button>
</form>
src/app/ui/forms/register-form.tsx
+2 -3
View File
@@ -581,12 +581,11 @@ export default function RegisterForm() {
className={`${styles['btn']}`}
disabled={isPending}
>
{isPending ? (
{t("create-an-account")}
{isPending && (
<div className="loading-animation">
<div className="global-spinner"></div>
</div>
) : (
t("create-an-account")
)}
</button>
</form >
src/app/ui/inputs/bank-card-inpit.tsx
+24 -4
View File
@@ -1,17 +1,36 @@
'use client'
import { useState, ChangeEvent, useEffect } from 'react';
import { InputMask } from '@react-input/mask';
import { InputMask, format } from '@react-input/mask';
import styles from '@/app/styles/module/login.module.scss';
import { PayoutMethods } from '@/app/actions/referralsActions';
interface BankCardProps {
bankCardState: string | undefined;
validateHandler: (e: ChangeEvent<HTMLInputElement>) => void;
clearCondition?: string | undefined | null
clearCondition?: string | undefined | null;
disabled: boolean;
}
export default function BankCardInput({ bankCardState, validateHandler }: BankCardProps) {
const [bankCard, setBankCard] = useState<string | undefined>(bankCardState ? bankCardState : '');
export default function BankCardInput({ bankCardState, validateHandler, disabled }: BankCardProps) {
const [bankCard, setBankCard] = useState<string | undefined>('');
useEffect(() => {
if (bankCardState) {
if (disabled) {
setBankCard(format(bankCardState, {
mask: "**** **** **** ____",
replacement: { _: /\d/ }
}));
} else {
setBankCard(format(bankCardState, {
mask: "____ ____ ____ ____",
replacement: { _: /\d/ }
}));
}
}
}, [bankCardState, disabled]);
return (
<InputMask
@@ -22,6 +41,7 @@ export default function BankCardInput({ bankCardState, validateHandler }: BankCa
mask="____ ____ ____ ____"
replacement={{ _: /\d/ }}
value={bankCard}
disabled={disabled}
onChange={(e) => {
setBankCard(e.target.value);
validateHandler(e);
src/app/ui/referral-page/Income-and-payments.tsx
+3 -19
View File
@@ -3,6 +3,7 @@
import PaymentsHistory from '@/app/ui/referral-page/table/payments-history';
import { useQuery } from '@tanstack/react-query';
import { fetchReferralUserStats } from '@/app/actions/referralsActions';
import RequestPayment from '@/app/ui/referral-page/request-payment';
export default function IncomeAndPayments() {
const {
@@ -55,25 +56,8 @@ export default function IncomeAndPayments() {
</div>
</div>
<div className="payout-form">
<h4>💸 Запросить выплату</h4>
<div className="payout-wrapper">
<div className="form-group">
<label>Сумма к выводу (Б)</label>
<input type="number" id="payout-amount" min="100.00" max="135.00" step="0.01" placeholder="Введите сумму"></input>
</div>
<div className="form-group" >
<label>Способ выплаты</label>
<select id="payout-method">
<option defaultValue="BALANCE">💳 На баланс аккаунта</option>
<option defaultValue="BANK_TRANSFER">🏦 Банковский перевод</option>
<option defaultValue="PAYPAL">💰 PayPal</option>
<option defaultValue="CARD">💳 Банковская карта</option>
</select>
</div>
<button className="btn-success">💸 Заказать выплату</button>
</div>
</div>
<RequestPayment />
<PaymentsHistory />
</div>
)
src/app/ui/referral-page/request-payment.tsx
+155
View File
@@ -0,0 +1,155 @@
'use client'
import DropDownList from '@/app/components/DropDownList';
import { useTranslations } from 'next-intl';
import { useState, useRef, useEffect, useActionState } from 'react';
import { useClickOutside } from '@/app/hooks/useClickOutside';
import { getPayoutMethods, PayoutMethods, createPayoutRequest } from '@/app/actions/referralsActions';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
export default function RequestPayment() {
const {
data: payoutMethods,
error
} = useQuery({
queryKey: ['payoutMethods'],
queryFn: () => {
return getPayoutMethods();
},
select: (data) => {
if (data?.methods) {
return data?.methods
} else {
return []
};
}
});
const [state, formAction, isPending] = useActionState(
createPayoutRequest,
undefined,
);
useEffect(() => {
if (state && !state.error) {
toast.success('payment request success');
queryClient.invalidateQueries({ queryKey: ['referralUserStats'] });
queryClient.invalidateQueries({ queryKey: ['referralInvitees'] });
} else if (state?.error) {
toast.error(state.error);
}
}, [state]);
const queryClient = useQueryClient();
const [paymentsType, setPaymentsType] = useState<PayoutMethods | null>(null);
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (payoutMethods) {
setPaymentsType(payoutMethods[0]);
}
}, [payoutMethods])
useClickOutside(dropdownRef,
() => {
setIsOpen(false);
},
isOpen
);
const t = useTranslations('Global');
return (
<form
className="payout-form"
action={(e) => {
formAction(e);
}}
>
<h4>Запросить выплату</h4>
<div className="payout-wrapper">
<div className="form-group">
<label>Сумма к выводу (Б)</label>
<input
type="number"
name="amount"
placeholder="Введите сумму">
</input>
</div>
<div className="form-group" >
<label>Способ выплаты</label>
<input
type="hidden"
name="payoutMethodId"
value={paymentsType?.id ?? 0}
/>
<div className="dropdown-wrapper" ref={dropdownRef}>
<button
onClick={() => {
setIsOpen(!isOpen)
}}
className="dropdown-button"
type="button"
>
<span className="flex items-center">
<span className="mr-2">
{paymentsType?.displayName}
</span>
</span>
<svg
className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
{isOpen && (
<div className="dropdown-list">
<ul
className="py-1"
role="listbox"
aria-labelledby="language-selector"
>
{payoutMethods?.map(method => {
return (
<li
key={method.id}
value="on-account-balance"
className={`dropdown-item ${paymentsType?.id === method.id ? "current" : ""}`}
onClick={() => {
setPaymentsType(method)
setIsOpen(false);
}}
>
{method.displayName}
</li>
)
})}
</ul>
</div>
)}
</div>
</div>
<button
className="btn-success btn-primary"
disabled={isPending}
>
Заказать выплату
{isPending && (
<div className="loading-animation">
<div className="global-spinner"></div>
</div>
)}
</button>
</div>
</form>
)
}
src/app/ui/referral-page/setting-referral-program.tsx
+80 -5
View File
@@ -4,8 +4,9 @@ import DropDownList from '@/app/components/DropDownList';
import { useTranslations } from 'next-intl';
import { ChangeEvent, useState, useActionState, useEffect } from 'react';
import BankCardInput from '@/app/ui/inputs/bank-card-inpit';
import { addPayoutMethod, PayoutMethodFormState } from '@/app/actions/referralsActions';
import { addPayoutMethod, PayoutMethodFormState, getPayoutMethods, PayoutMethods } from '@/app/actions/referralsActions';
import { bankCardFormSchema } from '@/app/actions/definitions';
import { useQuery } from '@tanstack/react-query';
export default function SettingReferralProgram() {
const [state, formAction, isPending] = useActionState(
@@ -13,14 +14,43 @@ export default function SettingReferralProgram() {
undefined,
);
const {
data: payoutMethods,
error
} = useQuery({
queryKey: ['payoutMethods'],
queryFn: () => {
return getPayoutMethods();
},
select: (data) => {
if (data?.methods) {
return data?.methods
} else {
return []
};
}
});
const [formState, setFormState] = useState<PayoutMethodFormState | undefined>(undefined);
const [paymentsType, setPaymentsType] = useState('bank-card');
const [defaultCardNumber, setDefaultCardNumber] = useState<PayoutMethods | undefined>(undefined);
const [isEditing, setIsEditing] = useState(false);
const t = useTranslations('Global');
useEffect(() => {
setFormState(state);
}, [state]);
useEffect(() => {
if (payoutMethods) {
payoutMethods.forEach(e => {
if (e.default) {
setDefaultCardNumber(e);
}
})
}
}, [payoutMethods])
async function validateField(
fieldName: string,
value: string,
@@ -125,7 +155,11 @@ export default function SettingReferralProgram() {
<h4>
{t('bank-card-number')}
</h4>
<BankCardInput bankCardState={formState?.previousState?.bankCard} validateHandler={onChangeHandler} />
<BankCardInput
bankCardState={defaultCardNumber?.cardNumber}
validateHandler={onChangeHandler}
disabled={!isEditing}
/>
{formState?.error?.bankCard && (
<p className="text-sm text-red-500">
{
@@ -147,9 +181,50 @@ export default function SettingReferralProgram() {
{t(formState?.error?.server)}
</p>
)}
<button type="submit" className="btn-primary">
{t('save-changes')}
</button>
{
isEditing ? (
<div
className='flex gap-4'
>
<button
type="button"
className="btn-primary"
disabled={isPending}
onClick={() => {
setIsEditing(false)
}}
>
{t('cancel')}
</button>
<button
type="submit"
className="btn-primary"
disabled={isPending}
>
{t("save-changes")}
{isPending && (
<div className="loading-animation">
<div className="global-spinner"></div>
</div>
)}
</button>
</div>
) : (
<button
type="button"
className="btn-primary"
disabled={isPending}
onClick={() => {
setIsEditing(true)
}}
>
Изменить
</button>
)
}
</div>
<div className="settings-form-wrapper">
src/app/ui/referral-page/table/invitations-table.tsx
-2
View File
@@ -57,8 +57,6 @@ export default function InvitationsTable() {
},
});
const queryClient = useQueryClient();
// Состояния
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);