add persistence to cart

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

@@ -1,42 +1,99 @@
+import { useForm, Controller } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { ErrorMessage } from '@hookform/error-message'
+import z from 'zod'
+
 import { Button } from '@repo/ui/components/ui/button'
 import { Label } from '@repo/ui/components/ui/label'
 import { RadioGroup, RadioGroupItem } from '@repo/ui/components/ui/radio-group'
 import { Separator } from '@repo/ui/components/ui/separator'
 
-export function Payment() {
+import { useWizard } from '@/components/wizard'
+
+const formSchema = z.object({
+  payment_method: z.enum(['PIX', 'BANK_SLIP', 'CREDIT_CARD'], {
+    error: 'Escolha uma forma de pagamento'
+  })
+})
+
+type Schema = z.infer<typeof formSchema>
+
+type PaymentProps = {
+  onSubmit: (value: any) => void | Promise<void>
+  defaultValues?: object
+}
+
+export function Payment({ onSubmit, defaultValues }: PaymentProps) {
+  const wizard = useWizard()
+  const { control, handleSubmit } = useForm<Schema>({
+    defaultValues: {
+      payment_method: '' as any,
+      ...defaultValues
+    },
+    resolver: zodResolver(formSchema)
+  })
+
+  const onSubmit_ = async (data: Schema) => {
+    await onSubmit(data)
+    wizard('review')
+  }
+
   return (
-    <>
-      <RadioGroup
-        defaultValue="comfortable"
-        className="lg:flex *:p-5 *:border *:rounded-xl *:flex-1 *:cursor-pointer
-                 *:bg-accent/25 *:has-[button[data-state=checked]]:bg-accent"
-      >
-        <Label>
-          <RadioGroupItem value="default" id="r1" />
-          <span>Pix</span>
-        </Label>
-        <Label>
-          <RadioGroupItem value="comfortable" id="r2" />
-          <span>Boleto bancário</span>
-        </Label>
-        <Label>
-          <RadioGroupItem value="compact" id="r3" />
-          <span>Cartão de crédito</span>
-        </Label>
-      </RadioGroup>
+    <form onSubmit={handleSubmit(onSubmit_)} className="space-y-6">
+      <Controller
+        name="payment_method"
+        control={control}
+        render={({ field: { name, value, onChange }, formState }) => (
+          <div className="space-y-1.5">
+            <RadioGroup
+              value={value}
+              onValueChange={onChange}
+              className="lg:flex gap-3
+                       *:p-5 *:border *:rounded-xl *:flex-1
+                       *:cursor-pointer *:bg-accent/25
+                       *:has-[button[data-state=checked]]:bg-accent
+            "
+            >
+              <Label>
+                <RadioGroupItem value="PIX" />
+                <span>Pix</span>
+              </Label>
+
+              <Label>
+                <RadioGroupItem value="BANK_SLIP" />
+                <span>Boleto bancário</span>
+              </Label>
+
+              <Label>
+                <RadioGroupItem value="CREDIT_CARD" />
+                <span>Cartão de crédito</span>
+              </Label>
+            </RadioGroup>
+
+            <ErrorMessage
+              errors={formState.errors}
+              name={name}
+              render={({ message }) => (
+                <p className="text-destructive text-sm">{message}</p>
+              )}
+            />
+          </div>
+        )}
+      />
 
       <Separator />
 
-      <div className="flex justify-end">
+      <div className="flex justify-end gap-4 *:cursor-pointer">
         <Button
-          type="submit"
-          className="cursor-pointer"
-          // disabled={formState.isSubmitting}
+          type="button"
+          variant="link"
+          className="text-black dark:text-white"
+          onClick={() => wizard('cart')}
         >
-          {/*{formState.isSubmitting && <Spinner />}*/}
-          Continuar
+          Voltar
         </Button>
+        <Button type="submit">Continuar</Button>
       </div>
-    </>
+    </form>
   )
 }