86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { Card } from '@/components/ui/card';
|
|
import { CreditCard, Lock } from 'lucide-react';
|
|
import type { CheckoutFormState } from './types';
|
|
|
|
interface CheckoutViewPaymentCardProps {
|
|
form: CheckoutFormState;
|
|
setForm: React.Dispatch<React.SetStateAction<CheckoutFormState>>;
|
|
}
|
|
|
|
export function CheckoutViewPaymentCard({
|
|
form,
|
|
setForm,
|
|
}: CheckoutViewPaymentCardProps) {
|
|
return (
|
|
<Card variant="default">
|
|
<div className="mb-4 px-4 py-2 rounded-lg bg-muted/50 border border-border text-sm text-muted-foreground">
|
|
Payment integration coming soon
|
|
</div>
|
|
<h3 className="font-bold text-foreground mb-6 border-b border-border pb-2 flex items-center gap-2 tracking-tight">
|
|
<Lock className="w-4 h-4 text-success" /> Payment Method
|
|
</h3>
|
|
|
|
<div className="bg-card p-4 rounded-xl border border-border mb-4 opacity-60 pointer-events-none">
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<CreditCard className="w-5 h-5 text-muted-foreground" />
|
|
<span className="font-bold text-foreground">Credit Card</span>
|
|
<div className="flex gap-1 ml-auto">
|
|
<div className="w-8 h-5 bg-muted rounded" />
|
|
<div className="w-8 h-5 bg-muted rounded" />
|
|
<div className="w-8 h-5 bg-muted rounded" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="bg-muted border border-border rounded-xl px-4 py-4 text-sm text-muted-foreground flex items-center justify-between">
|
|
<span>4242 4242 4242 4242</span>
|
|
<CreditCard className="w-4 h-4" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="bg-muted border border-border rounded-xl px-4 py-4 text-sm text-muted-foreground">
|
|
MM / YY
|
|
</div>
|
|
<div className="bg-muted border border-border rounded-xl px-4 py-4 text-sm text-muted-foreground">
|
|
CVC
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2 opacity-60 pointer-events-none select-none">
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
className="rounded border-border bg-transparent text-primary focus:ring-0"
|
|
checked={form.saveInfo}
|
|
onChange={(e) =>
|
|
setForm((prev) => ({ ...prev, saveInfo: e.target.checked }))
|
|
}
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
Save payment information for future purchases
|
|
</span>
|
|
</label>
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
className="rounded border-border bg-transparent text-primary focus:ring-0"
|
|
checked={form.acceptTerms}
|
|
onChange={(e) =>
|
|
setForm((prev) => ({ ...prev, acceptTerms: e.target.checked }))
|
|
}
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
I accept the{' '}
|
|
<span className="text-foreground hover:underline">Terms of Service</span>{' '}
|
|
and{' '}
|
|
<span className="text-foreground hover:underline">
|
|
Licensing Agreement
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|