add enroll to subscribed

apps/admin.saladeaula.digital/app/routes/_.setup._index/route.tsx

@@ -1,6 +1,8 @@
 import type { Route } from './+types/route'
 
+import { isValidCNPJ } from '@brazilian-utils/brazilian-utils'
 import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { PatternFormat } from 'react-number-format'
 
 import {
@@ -13,9 +15,22 @@ import {
 } from '@repo/ui/components/ui/form'
 import { Input } from '@repo/ui/components/ui/input'
 import { Button } from '@repo/ui/components/ui/button'
+import z from 'zod'
+
+const formSchema = z.object({
+  cnpj: z
+    .string('CNPJ obrigatório')
+    .refine(isValidCNPJ, { message: 'CNPJ inválido' })
+})
+
+export type Schema = z.infer<typeof formSchema>
 
 export default function Route({}: Route.ComponentProps) {
-  const form = useForm()
+  const form = useForm({ resolver: zodResolver(formSchema) })
+  const { handleSubmit, control } = form
+  const onSubmit = async (data: Schema) => {
+    console.log(data)
+  }
 
   return (
     <>
@@ -26,17 +41,18 @@ export default function Route({}: Route.ComponentProps) {
       </div>
 
       <Form {...form}>
-        <form className="space-y-6">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
           <FormField
-            control={form.control}
+            control={control}
             name="cnpj"
-            render={({ field: { onChange, ref, ...props } }) => (
+            render={({ field: { onChange, ref } }) => (
               <FormItem className="grid gap-3">
                 <FormLabel>CNPJ</FormLabel>
                 <FormControl>
                   <PatternFormat
                     format="##.###.###/####-##"
                     mask="_"
+                    autoFocus={true}
                     placeholder="__.___.__/____-__"
                     customInput={Input}
                     getInputRef={ref}
@@ -50,7 +66,7 @@ export default function Route({}: Route.ComponentProps) {
             )}
           />
 
-          <Button type="submit" className="w-full">
+          <Button type="submit" className="w-full cursor-pointer">
             Continuar
           </Button>
         </form>

apps/admin.saladeaula.digital/app/routes/_.setup/route.tsx

@@ -15,15 +15,15 @@ export function meta({}: Route.MetaArgs) {
 export default function Route({}: Route.ComponentProps) {
   return (
     <>
-      <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10 relative">
+      <div className="min-h-dvh flex items-center justify-center overflow-auto">
         <Link
           to="/"
-          className="flex items-center gap-0.5 absolute top-5 left-5 text-sm z-2"
+          className="absolute left-4 top-6 flex items-center gap-1 z-10 hover:underline"
         >
           <ChevronLeftIcon className="size-5" /> Voltar
         </Link>
 
-        <div className="w-full max-w-xs relative max-sm:mt-10 z-1 space-y-6">
+        <div className="w-full max-w-xs pt-8 relative z-10 space-y-6 px-4">
           <div className="flex justify-center">
             <div className="border border-white/15 bg-white/5 px-2.5 py-3 rounded-xl">
               <img src={logo} alt="EDUSEG®" className="block size-12" />