add address

apps/admin.saladeaula.digital/app/components/workspace-switcher.tsx

@@ -30,6 +30,7 @@ import { initials } from '@repo/ui/lib/utils'
 import { Link } from 'react-router'
 
 import type { Workspace, WorkspaceContextProps } from '@/middleware/workspace'
+import type { Address } from '@/routes/_.$orgid.enrollments.buy/review'
 
 type Subscription = {
   billing_day: number
@@ -39,6 +40,7 @@ type Subscription = {
 const WorkspaceContext = createContext<
   | (WorkspaceContextProps & {
       subscription: Subscription | null
+      address: Address | null
     })
   | null
 >(null)
@@ -57,11 +59,13 @@ export function WorkspaceProvider({
   activeWorkspace,
   workspaces,
   subscription,
+  address,
   children
 }: {
   activeWorkspace: Workspace
   workspaces: Workspace[]
   subscription?: Subscription
+  address?: Address
   children: React.ReactNode
 }) {
   return (
@@ -69,6 +73,7 @@ export function WorkspaceProvider({
       value={{
         activeWorkspace,
         workspaces,
+        address: address && Object.keys(address).length > 0 ? address : null,
         subscription:
           subscription && Object.keys(subscription).length > 0
             ? subscription
@@ -106,6 +111,7 @@ export function WorkspaceSwitcher() {
                 {subscription && (
                   <BadgeCheckIcon className="fill-blue-500 absolute size-3 -top-1 -right-1" />
                 )}
+
                 {initials(activeWorkspace.name)}
               </div>
               <div className="grid flex-1 text-left text-sm leading-tight">

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

@@ -46,6 +46,7 @@ export function Discount({ onChange, ...props }: DiscountProps) {
     resolver: zodResolver(formSchema)
   })
   const [open, { toggle, set }] = useToggle()
+  const { handleSubmit, control, formState, setError, reset } = form
   const { runAsync } = useRequest(
     async (coupon) => {
       return await fetch(`/~/api/coupons/${coupon}`, {
@@ -54,7 +55,6 @@ export function Discount({ onChange, ...props }: DiscountProps) {
     },
     { manual: true }
   )
-  const { handleSubmit, control, formState, setError, reset } = form
 
   const onSubmit = async (data: Schema) => {
     const r = await runAsync(data.coupon)
@@ -62,6 +62,7 @@ export function Discount({ onChange, ...props }: DiscountProps) {
     if (!r.ok) {
       return setError('coupon', { message: 'Cupom inválido' })
     }
+
     const {
       sk: code,
       discount_amount: amount,

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

@@ -33,8 +33,6 @@ 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 './store'
 import { applyDiscount } from './discount'
 import { useWizardStore } from './store'
 
@@ -86,7 +84,8 @@ export type CreditCard = z.infer<typeof creditCard>
 
 export function Payment({}) {
   const wizard = useWizard()
-  const { update, ...state } = useWizardStore()
+  const { update, summary, ...state } = useWizardStore()
+  const { total } = summary()
   const { control, handleSubmit } = useForm<Schema>({
     defaultValues: {
       payment_method: state.payment_method,
@@ -96,17 +95,6 @@ export function Payment({}) {
     resolver: zodResolver(formSchema)
   })
   const paymentMethod = useWatch({ control, name: 'payment_method' })
-  const subtotal = state.items.reduce(
-    (acc, { course, quantity }) =>
-      acc +
-      (course?.unit_price || 0) *
-        (Number.isFinite(quantity) && quantity > 0 ? quantity : 1),
-    0
-  )
-  const discount = state.coupon
-    ? applyDiscount(subtotal, state.coupon.amount, state.coupon.type) * -1
-    : 0
-  const total = subtotal > 0 ? subtotal + discount : 0
 
   const onSubmit = async ({ payment_method, ...data }: Schema) => {
     if (payment_method === 'CREDIT_CARD') {

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>

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

@@ -34,8 +34,9 @@ import { Payment } from './payment'
 import { Assigned } from './assigned'
 import { Review } from './review'
 
-import { useWizardStore, type WizardState } from './store'
-import { useState } from 'react'
+import { useWizardStore } from './store'
+import { useEffect, useState } from 'react'
+import { useWorksapce } from '@/components/workspace-switcher'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Comprar matrículas' }]
@@ -65,7 +66,9 @@ export default function Route({
 }: Route.ComponentProps) {
   const fetcher = useFetcher()
   const [mounted, setMounted] = useState(false)
-  const { index, kind, setIndex, setKind, reset, ...state } = useWizardStore()
+  const { address } = useWorksapce()
+  const { index, kind, setIndex, setKind, reset, update, ...state } =
+    useWizardStore()
 
   const onSubmit = async () => {
     await fetcher.submit(JSON.stringify(state), {
@@ -79,6 +82,12 @@ export default function Route({
     setMounted(true)
   })
 
+  useEffect(() => {
+    if (address) {
+      update({ address })
+    }
+  }, [address])
+
   if (!mounted) {
     return <Skeleton />
   }

apps/admin.saladeaula.digital/app/routes/_.$orgid/route.tsx

@@ -64,14 +64,9 @@ export function shouldRevalidate({
 }
 
 export default function Route({ loaderData }: Route.ComponentProps) {
-  const {
-    user,
-    activeWorkspace,
-    workspaces,
-    sidebar_state,
-    subscription: subscription_
-  } = loaderData
-  const subscription = use(subscription_)
+  const { user, activeWorkspace, workspaces, sidebar_state } = loaderData
+  const subscription = use(loaderData.subscription)
+  const address = use(loaderData.address)
 
   useEffect(() => {
     if (typeof window !== 'undefined' && window.rybbit) {
@@ -88,6 +83,7 @@ export default function Route({ loaderData }: Route.ComponentProps) {
       activeWorkspace={activeWorkspace}
       workspaces={workspaces}
       subscription={subscription}
+      address={address}
     >
       <SidebarProvider defaultOpen={sidebar_state === 'true'} className="flex">
         <AppSidebar />