add address

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

@@ -41,7 +41,6 @@ import {
 import { paymentMethods } from '@repo/ui/routes/orders/data'
 
 import { useWizard } from '@/components/wizard'
-import { type WizardState } from './store'
 import {
   Field,
   FieldDescription,
@@ -59,6 +58,14 @@ import {
 } from '@repo/ui/components/ui/input-group'
 
 import { useWizardStore } from './store'
+import { useParams } from 'react-router'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle
+} from '@repo/ui/components/ui/empty'
 
 type ReviewProps = {
   onSubmit: () => void | Promise<void>
@@ -66,7 +73,7 @@ type ReviewProps = {
 
 export function Review({ onSubmit }: ReviewProps) {
   const wizard = useWizard()
-  const { items, summary } = useWizardStore()
+  const { items, summary, address } = useWizardStore()
   const { subtotal, discount, interest_amount, total } = summary()
   const [loading, { set }] = useToggle()
 
@@ -165,7 +172,10 @@ export function Review({ onSubmit }: ReviewProps) {
             Voltar
           </Button>
 
-          <Button type="submit" disabled={loading}>
+          <Button
+            type="submit"
+            disabled={loading || !formSchema.safeParse(address).success}
+          >
             {loading && <Spinner />}
             Pagar <Currency>{total}</Currency>
           </Button>
@@ -183,10 +193,10 @@ export function Summary() {
 
   return (
     <ItemGroup className="grid lg:grid-cols-2 gap-4">
-      <Item variant="outline" className="items-start">
-        <ItemContent>
-          <ItemTitle>Endereço de cobrança</ItemTitle>
-          {address && (
+      {address ? (
+        <Item variant="outline" className="items-start">
+          <ItemContent>
+            <ItemTitle>Endereço de cobrança</ItemTitle>
             <ul className="text-muted-foreground text-sm leading-normal font-normal text-balance">
               {address?.address1}
               {address?.address2 ? <>, {address?.address2}</> : null}
@@ -197,12 +207,38 @@ export function Summary() {
               <br />
               {formatCEP(address?.postcode)}
             </ul>
-          )}
-        </ItemContent>
-        <ItemActions>
-          <AddressDialog />
-        </ItemActions>
-      </Item>
+          </ItemContent>
+          <ItemActions>
+            <AddressDialog>
+              <Button
+                variant="ghost"
+                type="button"
+                className="text-muted-foreground cursor-pointer"
+                size="icon-sm"
+              >
+                <PencilIcon />
+                <span className="sr-only">Editar endereço</span>
+              </Button>
+            </AddressDialog>
+          </ItemActions>
+        </Item>
+      ) : (
+        <Empty className="border border-dashed md:p-6 gap-4">
+          <EmptyHeader>
+            <EmptyTitle>Nenhum endereço ainda</EmptyTitle>
+            <EmptyDescription>
+              Você ainda não cadastrou nenhum endereço.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <AddressDialog>
+              <Button size="sm" variant="outline" className="cursor-pointer">
+                Cadastrar endereço
+              </Button>
+            </AddressDialog>
+          </EmptyContent>
+        </Empty>
+      )}
 
       <Item variant="outline" className="items-start">
         <ItemContent>
@@ -241,32 +277,36 @@ const formSchema = z.object({
 
 export type Address = z.infer<typeof formSchema>
 
-export function AddressDialog() {
-  const [open, { toggle, set: setOpen }] = useToggle()
+export function AddressDialog({ children }) {
   const { update, address } = useWizardStore()
-  const { handleSubmit, control, reset } = useForm({
+  const { orgid } = useParams()
+  const { runAsync } = useRequest(
+    async (address: Address) => {
+      await fetch(`/~/api/orgs/${orgid}/address`, {
+        method: 'POST',
+        body: JSON.stringify({ address }),
+        headers: new Headers({ 'Content-Type': 'application/json' })
+      })
+    },
+    {
+      manual: true
+    }
+  )
+  const { handleSubmit, control, reset, formState } = useForm({
     defaultValues: address,
     resolver: zodResolver(formSchema)
   })
+  const [open, { toggle, set: setOpen }] = useToggle(address === undefined)
 
   const onSubmit = async (address: Address) => {
+    await runAsync(address)
     setOpen(false)
     update({ address })
   }
 
   return (
     <Dialog open={open} onOpenChange={toggle}>
-      <DialogTrigger asChild>
-        <Button
-          variant="ghost"
-          type="button"
-          className="text-muted-foreground cursor-pointer"
-          size="icon-sm"
-        >
-          <PencilIcon />
-          <span className="sr-only">Editar endereço</span>
-        </Button>
-      </DialogTrigger>
+      <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Editar endereço</DialogTitle>
@@ -400,7 +440,9 @@ export function AddressDialog() {
               </Button>
             </DialogClose>
 
-            <Button type="submit">Atualizar endereço</Button>
+            <Button type="submit" disabled={formState.isSubmitting}>
+              {formState.isSubmitting && <Spinner />} Atualizar endereço
+            </Button>
           </DialogFooter>
         </form>
       </DialogContent>