continue: made a payments method list

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

@@ -2,36 +2,197 @@
 
 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';
+import { usePaymentsMethods, PaymentsMethods } from '@/app/hooks/react-query/usePaymentsMethods';
+import { useEffect, useState } from 'react';
+import { deletePaymentsMethods } from '@/app/actions/paymentAction';
+import { useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import ModalWindow from '@/app/components/ModalWindow';
 
 export default function PaymentUserCards() {
 	const t = useTranslations('Global');
 	const { data: paymentsMethods } = usePaymentsMethods();
+	const queryClient = useQueryClient();
+	const [openWindow, setOpenWindow] = useState<boolean>(false);
+	const [selectedCard, setSelectedCard] = useState<PaymentsMethods | null>(null);
+	const [modalLoading, setModalLoading] = useState(false);
 
-	useEffect(() => {
-		console.log(paymentsMethods);
-	}, [paymentsMethods])
+	function openConfirmWindowHandler(item: PaymentsMethods) {
+		setOpenWindow(true);
+		setSelectedCard(item);
+	}
+
+	async function removeCardHandler(id: string) {
+		setModalLoading(true);
+
+		try {
+			const response = await deletePaymentsMethods(id);
+
+			if (response) {
+					await queryClient.invalidateQueries({ queryKey: ['paymentsMethods'] });
+				toast.success('bank-card-has-been-successfully-deleted');
+			} else {
+				throw 'error'
+			}
+		} catch (error) {
+			toast.warning(t('failed-to-delete-bank-card'))
+		} finally {
+			setModalLoading(false);
+			setOpenWindow(false);
+			setSelectedCard(null);
+		}
+	}
+
+	const ConfirmModalWindow = () => {
+		return (
+			<div
+				className="card-item-confirm-window"
+			>
+				<h4>
+					{t('delete-a-bank-card')}?
+				</h4>
+				<div
+					className="card-item-confirm-action"
+				>
+					<button
+						className="btn btn-secondary"
+						onClick={() => {
+							setSelectedCard(null);
+							setOpenWindow(false);
+						}}
+						disabled={modalLoading}
+					>
+						{t('no')}
+						{modalLoading && (
+							<div
+								className="loading-animation"
+							>
+								<span
+									className="global-spinner"
+								>
+								</span>
+							</div>
+						)}
+					</button>
+					<button
+						className="btn btn-secondary"
+						onClick={() => {
+							if (selectedCard?.paymentMethodId) {
+								removeCardHandler(selectedCard?.paymentMethodId)
+							}
+						}}
+						disabled={modalLoading}
+					>
+						{t('yes')}
+						{modalLoading && (
+							<div
+								className="loading-animation"
+							>
+								<span
+									className="global-spinner"
+								>
+								</span>
+							</div>
+						)}
+					</button>
+				</div>
+			</div >
+		)
+	}
 
 	return (
 		<div
 			className="block-wrapper payment-user-cards"
 		>
-			<div
-				className="card-wrapper"
-			>
-				<BankCardInput
-					bankCardState={'1111 1111 1111 1111'}
-					validateHandler={() => { }}
-					disabled={true}
-					isValid={undefined}
-				/>
+			<ModalWindow state={openWindow} callBack={setOpenWindow}>
+				<ConfirmModalWindow />
+			</ModalWindow>
+			<h3>
+				{t('linked-bank-cards')}
+			</h3>
 
-				<button
-					className="btn btn-primary"
-				>
-					{t('remove')}
-				</button>
+			<div
+				className="cards-wrapper"
+			>
+				{paymentsMethods?.length !== 0 ? (
+					paymentsMethods?.map((item: PaymentsMethods) => {
+						return (
+							<div
+								className="card-item"
+								key={item?.paymentMethodId}
+							>
+								<div
+									className="card-item-info"
+								>
+									<BankCardInput
+										bankCardState={item?.lastFour}
+										validateHandler={() => { }}
+										disabled={true}
+										isValid={undefined}
+									/>
+
+									<span
+										className="card-item-type"
+									>
+										{item?.cardType}
+									</span>
+
+{/* 									<span
+										className="card-item-expired"
+									>
+										<span
+											className="ml-1"
+										>
+											expired at: &nbsp;
+										</span>
+										<span>
+											{item?.expiryMonth}/
+										</span>
+										<span>
+											{item?.expiryYear}
+										</span>
+									</span> */}
+								</div>
+
+								<button
+									className="btn btn-warning"
+									onClick={() => {
+										openConfirmWindowHandler(item)
+									}}
+								>
+									{t('remove')}
+								</button>
+							</div>
+						)
+					})
+				) : (
+					<div
+						className="payment-user-cards-empty"
+					>
+						<div>
+							<p
+								className="empty-card-title"
+							>
+								{t('the-card-is-not-linked')}
+							</p>
+							<p
+								className="empty-card-text"
+							>
+								{t('the-card-is-linked-automatically-the-next-time-you-pay-for-a-subscription')}
+								<br />
+								{t('after-this-the-subscription-will-renew-automatically')}
+							</p>
+						</div>
+					</div>
+				)}
+			</div>
+
+			<div
+				className="payment-user-cards-notification"
+			>
+				{t('when-you-pay-for-a-subscription-your-card-is-saved-for-automatic-renewal')}&nbsp;
+				{t('the-debit-occurs-1-day-before-the-end-of-the-subscription')}&nbsp;
+				{t('you-can-unlink-your-card-and-cancel-auto-renewal-at-any-time')}
 			</div>
 		</div>
 	)