[SVC-5] Добавить выбор разных видов платежных карт

[alex-radchenko-github]

[SVC-5] Добавить выбор разных видов платежных карт

Commits

• Добавить выбор разных видов платежных карт

Changes

.claude.json                       |  1 +
 src/app/components/CreditCards.tsx |  4 ++--
 src/app/components/Modal.tsx       | 32 ++++++++++++++++++++++++++++----
 3 files changed, 31 insertions(+), 6 deletions(-)

Full diff

diff --git a/.claude.json b/.claude.json
new file mode 100644
index 0000000..5c82f7a
--- /dev/null
+++ b/.claude.json
@@ -0,0 +1 @@
+{"numStartups": 1, "hasCompletedOnboarding": true, "theme": "dark", "projects": {"/workspace": {"allowedTools": [], "hasTrustDialogAccepted": true}}}
\ No newline at end of file
diff --git a/src/app/components/CreditCards.tsx b/src/app/components/CreditCards.tsx
index ddd646a..45f8a02 100644
--- a/src/app/components/CreditCards.tsx
+++ b/src/app/components/CreditCards.tsx
@@ -27,7 +27,7 @@ export const VisaLogo = () => (
 	</svg>
 );
 
-const PaypalLogo = () => (
+export const PaypalLogo = () => (
 	<svg xmlns="http://www.w3.org/2000/svg" width="10%" height="10%" preserveAspectRatio="xMidYMid"
 	     viewBox="0 0 256 302" id="paypal">
 		<path fill="#27346A"
@@ -41,7 +41,7 @@ const PaypalLogo = () => (
 	</svg>
 )
 
-const MastercardLogo = () => (
+export const MastercardLogo = () => (
 	<svg width="17%" height="17%" viewBox="0 0 41 26" version="1.1" xmlns="http://www.w3.org/2000/svg"
 	>
 		<desc>Created with Sketch.</desc>
diff --git a/src/app/components/Modal.tsx b/src/app/components/Modal.tsx
index 6180d17..cdb7dbd 100644
--- a/src/app/components/Modal.tsx
+++ b/src/app/components/Modal.tsx
@@ -2,6 +2,7 @@ import {addCard} from "@/app/services/getAllCredit";
 import {useQueryClient} from "@tanstack/react-query";
 import React, {useState} from "react";
 import {useForm} from "react-hook-form";
+import {VisaLogo, MastercardLogo, PaypalLogo, CardTypes} from "@/app/components/CreditCards";
 
 interface ModalProps {
 	onClose: () => void;
@@ -10,13 +11,14 @@ interface ModalProps {
 
 const Modal: React.FC<ModalProps> = ({onClose, children}) => {
 	
-	const {register, handleSubmit, formState: {errors}} = useForm();
+	const {register, handleSubmit, watch, setValue, formState: {errors}} = useForm({defaultValues: {type_credit_card: CardTypes.VISA}});
+	const selectedType = watch('type_credit_card');
 	const [isModalOpen, setModalOpen] = useState(true);
 	
 	
 	const queryClient = useQueryClient()
 	const onSubmit = (data: any) => {
-		addCard({...data, type_credit_card: 'VISA'})
+		addCard(data)
 		setModalOpen(false)
 		queryClient.invalidateQueries(["getCards"])
 		
@@ -29,7 +31,7 @@ const Modal: React.FC<ModalProps> = ({onClose, children}) => {
 			className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-70 z-50"
 		>
 			<div
-				className="rounded-b-2xl bg-white h-64 w-96"
+				className="rounded-b-2xl bg-white w-96"
 				onClick={e => e.stopPropagation()}
 			>
 				<form onSubmit={handleSubmit(onSubmit)} className="bg-white p-6 rounded-lg shadow-lg w-96 flex flex-wrap">
@@ -77,7 +79,29 @@ const Modal: React.FC<ModalProps> = ({onClose, children}) => {
 							{errors.cvv && <span>This field is required</span>}
 						</div>
 					</div>
-					<div className="w-full flex justify-between items-center mt-4">
+					<div className="w-full mb-4">
+						<label className="block text-sm font-semibold mb-2">Card Type</label>
+						<input type="hidden" {...register('type_credit_card', {required: true})}/>
+						<div className="flex gap-2">
+							{[
+								{type: CardTypes.VISA, Logo: VisaLogo, label: 'Visa'},
+								{type: CardTypes.MASTERCARD, Logo: MastercardLogo, label: 'Mastercard'},
+								{type: CardTypes.PAYPAL, Logo: PaypalLogo, label: 'PayPal'},
+							].map(({type, Logo, label}) => (
+								<button
+									key={type}
+									type="button"
+									onClick={() => setValue('type_credit_card', type)}
+									className={`flex flex-col items-center justify-center border-2 rounded-lg p-2 w-24 h-14 cursor-pointer transition-colors ${selectedType === type ? 'border-purple-600 bg-purple-50' : 'border-gray-300 hover:border-gray-400'}`}
+								>
+									<Logo/>
+									<span className="text-xs mt-1 font-medium text-gray-600">{label}</span>
+								</button>
+							))}
+						</div>
+						{errors.type_credit_card && <span className="text-red-500 text-xs">Please select a card type</span>}
+					</div>
+				<div className="w-full flex justify-between items-center mt-4">
 						<button onClick={onClose} className="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded"
 						        type="button">Cancel
 						</button>

---

Generated by ForgeAI Interactive Session