add zustard

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

@@ -34,8 +34,9 @@ import { Currency } from '@repo/ui/components/currency'
 import { useWizard } from '@/components/wizard'
 import { isName } from '../_.$orgid.users.add/data'
 import type { PaymentMethod } from '@repo/ui/routes/orders/data'
-import type { WizardState } from './route'
+import type { WizardState } from './store'
 import { applyDiscount } from './discount'
+import { useWizardStore } from './store'
 
 const creditCard = z.object({
   holder_name: z
@@ -55,49 +56,42 @@ const creditCard = z.object({
   cvv: z.string().min(3).max(4)
 })
 
-const formSchema = z.discriminatedUnion('payment_method', [
-  z.object({
-    payment_method: z.literal('PIX')
-  }),
+const formSchema = z.discriminatedUnion(
+  'payment_method',
+  [
+    z.object({
+      payment_method: z.literal('PIX')
+    }),
 
-  z.object({
-    payment_method: z.literal('BANK_SLIP')
-  }),
+    z.object({
+      payment_method: z.literal('BANK_SLIP')
+    }),
 
-  z.object({
-    payment_method: z.literal('MANUAL')
-  }),
+    z.object({
+      payment_method: z.literal('MANUAL')
+    }),
 
-  z.object({
-    payment_method: z.literal('CREDIT_CARD'),
-    credit_card: creditCard,
-    installments: z.coerce.number().int().min(1).max(12)
-  })
-])
+    z.object({
+      payment_method: z.literal('CREDIT_CARD'),
+      credit_card: creditCard,
+      installments: z.coerce.number().int().min(1).max(12)
+    })
+  ],
+  { error: 'Escolha uma forma de pagamento' }
+)
 
 type Schema = z.input<typeof formSchema>
 
 export type CreditCard = z.infer<typeof creditCard>
 
-type PaymentProps = {
-  state: WizardState
-  onSubmit: (value: any) => void | Promise<void>
-  payment_method?: PaymentMethod
-  credit_card?: CreditCard
-}
-
-export function Payment({
-  onSubmit,
-  state,
-  payment_method: paymentMethodInit,
-  credit_card: creditCardInit = undefined
-}: PaymentProps) {
+export function Payment({}) {
   const wizard = useWizard()
+  const { update, ...state } = useWizardStore()
   const { control, handleSubmit } = useForm<Schema>({
     defaultValues: {
-      payment_method: paymentMethodInit,
-      installments: state?.installments ?? 1,
-      credit_card: creditCardInit
+      payment_method: state.payment_method,
+      installments: state.installments,
+      credit_card: state.credit_card
     },
     resolver: zodResolver(formSchema)
   })
@@ -114,13 +108,23 @@ export function Payment({
     : 0
   const total = subtotal > 0 ? subtotal + discount : 0
 
-  const onSubmit_ = async (data: Schema) => {
-    await onSubmit({ credit_card: undefined, ...data })
+  const onSubmit = async ({ payment_method, ...data }: Schema) => {
+    if (payment_method === 'CREDIT_CARD') {
+      // @ts-ignore
+      update({ payment_method, ...data })
+    } else {
+      update({
+        payment_method,
+        installments: undefined,
+        credit_card: undefined
+      })
+    }
+
     wizard('review')
   }
 
   return (
-    <form onSubmit={handleSubmit(onSubmit_)} className="space-y-4">
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
       <Controller
         name="payment_method"
         control={control}
@@ -206,6 +210,7 @@ export function CreditCard({
             {/* Credir card number */}
             <Controller
               control={control}
+              defaultValue=""
               name="credit_card.number"
               render={({ field: { onChange, ref, ...field }, fieldState }) => (
                 <Field data-invalid={fieldState.invalid}>