add payments method list

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>
+	)
+}