✨ feat(payment): Add bank card payment

apps/user/components/subscribe/payment-methods.tsx

@@ -4,6 +4,7 @@ import { getAvailablePaymentMethods } from '@/services/user/portal';
 import { useQuery } from '@tanstack/react-query';
 import { Label } from '@workspace/ui/components/label';
 import { RadioGroup, RadioGroupItem } from '@workspace/ui/components/radio-group';
+import { cn } from '@workspace/ui/lib/utils';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import React, { memo } from 'react';
@@ -33,14 +34,24 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({ value, onChange, balanc
       <RadioGroup
         className='grid grid-cols-2 gap-2 md:grid-cols-5'
         value={String(value)}
-        onValueChange={(val) => onChange(Number(val))}
+        onValueChange={(val) => {
+          console.log(val);
+          onChange(Number(val));
+        }}
       >
         {data?.map((item) => (
-          <div key={item.id}>
-            <RadioGroupItem value={String(item.id)} id={String(item.id)} className='peer sr-only' />
+          <div key={item.id} className='relative'>
+            <RadioGroupItem
+              value={String(item.id)}
+              id={String(item.id)}
+              className='absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0'
+            />
             <Label
               htmlFor={String(item.id)}
-              className='border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary flex flex-col items-center justify-between rounded-md border-2 py-2'
+              className={cn(
+                'border-muted bg-popover hover:bg-accent hover:text-accent-foreground flex flex-col items-center justify-between rounded-md border-2 py-2',
+                String(value) === String(item.id) ? 'border-primary' : '',
+              )}
             >
               <div className='mb-3 size-12'>
                 <Image