update credit card mask

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.buy/payment.tsx

@@ -2,8 +2,9 @@ import { useForm, Controller, useWatch, type Control } from 'react-hook-form'
 import { PatternFormat } from 'react-number-format'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { ErrorMessage } from '@hookform/error-message'
-import z from 'zod'
+import { z } from 'zod'
 import { ArrowRightIcon, CircleQuestionMarkIcon } from 'lucide-react'
+import valid from 'card-validator'
 
 import { Button } from '@repo/ui/components/ui/button'
 import { Kbd } from '@repo/ui/components/ui/kbd'
@@ -19,6 +20,7 @@ import {
 } from '@repo/ui/components/ui/hover-card'
 import {
   Field,
+  FieldError,
   FieldGroup,
   FieldLabel,
   FieldSet
@@ -29,10 +31,21 @@ import {
 } from '@repo/ui/components/ui/native-select'
 
 import { useWizard } from '@/components/wizard'
+import { isName } from '../_.$orgid.users.add/data'
 
 const creditCard = z.object({
-  holder_name: z.string().min(1),
-  number: z.string().min(13).max(19),
+  holder_name: z
+    .string()
+    .trim()
+    .nonempty('Digite um nome')
+    .refine(isName, { message: 'Nome inválido' }),
+  number: z.string().refine(
+    (value) => {
+      const numberValidation = valid.number(value)
+      return numberValidation.isValid
+    },
+    { error: 'Número do cartão inválido' }
+  ),
   exp_month: z.string().min(2),
   exp_year: z.string().min(4),
   cvv: z.string().min(3).max(4)
@@ -90,6 +103,8 @@ export function Payment({
       <Controller
         name="payment_method"
         control={control}
+        // @ts-ignore
+        defaultValue=""
         render={({ field: { name, value, onChange }, formState }) => (
           <div className="space-y-1.5">
             <RadioGroup
@@ -143,6 +158,7 @@ export function Payment({
         >
           Voltar
         </Button>
+
         <Button type="submit" variant="secondary">
           Continuar <ArrowRightIcon />
         </Button>
@@ -161,6 +177,7 @@ export function CreditCard({ control }: { control: Control<Schema> }) {
         <FieldGroup>
           <FieldSet>
             <FieldGroup>
+              {/* Credir card number */}
               <Controller
                 control={control}
                 name="credit_card.number"
@@ -185,10 +202,14 @@ export function CreditCard({ control }: { control: Control<Schema> }) {
                       }}
                       {...field}
                     />
+
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
                   </Field>
                 )}
               />
-
+              {/* Holder name */}
               <Controller
                 control={control}
                 name="credit_card.holder_name"
@@ -203,6 +224,9 @@ export function CreditCard({ control }: { control: Control<Schema> }) {
                       aria-invalid={fieldState.invalid}
                       {...field}
                     />
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
                   </Field>
                 )}
               />