add payments method list

src/app/[locale]/pages/payment/page.tsx

@@ -3,6 +3,7 @@ import UserUsage from '@/app/ui/payment/user-usage';
 import TokensSpendStats from '@/app/ui/payment/tokens-spend-stats';
 import PaymentTabs from '@/app/ui/payment/payment-tabs';
 import SecurePayments from '@/app/ui/payment/secure-payments';
+import PaymentUserCards from '@/app/ui/payment/payment-user-cards';
 
 export const metadata: Metadata = {
 	title: 'payment',
@@ -22,6 +23,7 @@ export default function Page() {
 					<UserUsage />
 					<TokensSpendStats />
 					<PaymentTabs />
+					<PaymentUserCards />
 					<SecurePayments />
 				</div>
 			</main>

src/app/actions/paymentAction.ts

@@ -0,0 +1,30 @@
+'use server'
+
+import { API_BASE_URL } from '@/app/actions/definitions';
+import { getSessionData } from '@/app/actions/session';
+
+export async function getPaymentsMethods() {
+	const token = await getSessionData('token');
+	console.log('getPaymentsMethods');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/payments/methods`, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+				'Authorization': `Bearer ${token}`,
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+			console.log(parsed);
+			return parsed;
+		} else {
+			return null
+		}
+	} catch (error) {
+		return null
+	}
+}

src/app/hooks/react-query/usePaymentsMethods.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
+import { getPaymentsMethods } from '@/app/actions/paymentAction';
+
+/* export interface PaymentsMethods {
+	total_violations: number,
+	new_violations: number,
+	in_progress_violations: number,
+	resolved_violations: number
+} */
+
+export const usePaymentsMethods = () => {
+	return useQuery({
+		queryKey: ['paymentsMethods'],
+		queryFn: () => {
+			return getPaymentsMethods()
+		},
+		select: (data: any | null) => {
+			if (!data) {
+				return null
+			}
+			return data;
+		},
+		retry: false
+	});
+};

src/app/styles/pages-styles.scss

@@ -5248,3 +5248,10 @@
 		}
 	}
 }
+
+.payment-user-cards {
+	.card-wrapper {
+		display: flex;
+		gap: 10px;
+	}
+}

src/app/ui/inputs/bank-card-inpit.tsx

@@ -35,7 +35,6 @@ export default function BankCardInput({ bankCardState, validateHandler, disabled
 	return (
 		<InputMask
 			type="phone"
-			id="bankCard"
 			name="bankCard"
 			className={`${styles['form-input']} ${isValid ? styles['valid-card'] : ''}`}
 			mask="____ ____ ____ ____"

src/app/ui/payment/payment-user-cards.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import BankCardInput from '@/app/ui/inputs/bank-card-inpit';
+import { usePaymentsMethods } from '@/app/hooks/react-query/usePaymentsMethods';
+import { useEffect } from 'react';
+
+export default function PaymentUserCards() {
+	const t = useTranslations('Global');
+	const { data: paymentsMethods } = usePaymentsMethods();
+
+	useEffect(() => {
+		console.log(paymentsMethods);
+	}, [paymentsMethods])
+
+	return (
+		<div
+			className="block-wrapper payment-user-cards"
+		>
+			<div
+				className="card-wrapper"
+			>
+				<BankCardInput
+					bankCardState={'1111 1111 1111 1111'}
+					validateHandler={() => { }}
+					disabled={true}
+					isValid={undefined}
+				/>
+
+				<button
+					className="btn btn-primary"
+				>
+					{t('remove')}
+				</button>
+			</div>
+		</div>
+	)
+}