@ecomiq/storefront 2.1.3 → 3.0.0

package/src/pages/account/account-page-view.tsx

@@ -1,270 +0,0 @@
-import { useEffect, useRef, type ReactNode } from 'react'
-import { useQueryClient } from '@tanstack/react-query'
-import { useRouterState } from '@tanstack/react-router'
-import {
-  createCustomerAddress,
-  customerMeToProfile,
-  deleteCustomerAddress,
-  getCustomerAddresses,
-  getCustomerMe,
-  getCustomerOrder,
-  getCustomerOrders,
-  patchCustomer,
-  toCustomerSavedAddresses,
-  updateCustomerAddress,
-  type CustomerAddressUpsertInput,
-  type CustomerProfilePatch,
-} from '@ecomiq/core'
-import { MapPinHouse, MonitorSmartphone, Package, UserRound } from 'lucide-react'
-import { CustomerAddressesPanel } from '../../components/account/customer-addresses-panel'
-import { CustomerOrderDetailPanel } from '../../components/account/customer-order-detail-panel'
-import { CustomerOrdersPanel } from '../../components/account/customer-orders-panel'
-import { CustomerProfilePanel } from '../../components/account/customer-profile-panel'
-import {
-  useApiQuery,
-  useAuth,
-  useSearchNavigate,
-  useSettings,
-} from '../../providers'
-import { createStorefrontProxyApi } from '../../proxy-api'
-import { AccountShell } from './account-shell'
-import {
-  AccountPageSkeleton,
-  AccountSectionSkeleton,
-} from './account-page-skeleton'
-import { parseAccountRoute } from './parse-account-route'
-
-const ACCOUNT_BASE = '/account'
-const ORDERS_BASE = `${ACCOUNT_BASE}/orders`
-const LOGIN_HREF = '/login'
-const HOME_HREF = '/'
-
-function proxyApi() {
-  return createStorefrontProxyApi()
-}
-
-export function AccountPageView() {
-  const pathname = useRouterState({ select: (s) => s.location.pathname })
-  const { section, orderId } = parseAccountRoute(pathname || ACCOUNT_BASE)
-  const navigate = useSearchNavigate()
-  const queryClient = useQueryClient()
-  const settings = useSettings()
-  const { client, session, isPending, signOut } = useAuth()
-  const isAuthenticated = Boolean(session?.user)
-  const redirectTargetRef = useRef<string | null>(null)
-  const language = settings.store.language || 'es-PE'
-
-  const profileQuery = useApiQuery(
-    ['account-customer-me'],
-    async () => customerMeToProfile(await getCustomerMe(proxyApi())),
-    {
-      enabled: section === 'personal' && isAuthenticated && !isPending,
-      freshForMs: 60_000,
-    },
-  )
-
-  const addressesQuery = useApiQuery(
-    ['customer-addresses'],
-    async () =>
-      toCustomerSavedAddresses(await getCustomerAddresses(proxyApi())),
-    {
-      enabled: section === 'addresses' && isAuthenticated && !isPending,
-      freshForMs: 30_000,
-    },
-  )
-
-  const ordersQuery = useApiQuery(
-    ['customer-orders'],
-    async () => getCustomerOrders(proxyApi()),
-    {
-      enabled:
-        section === 'orders' && !orderId && isAuthenticated && !isPending,
-      freshForMs: 30_000,
-    },
-  )
-
-  const orderDetailQuery = useApiQuery(
-    ['customer-order', orderId],
-    async () => getCustomerOrder(proxyApi(), orderId!),
-    {
-      enabled:
-        section === 'orders' && Boolean(orderId) && isAuthenticated && !isPending,
-      freshForMs: 30_000,
-    },
-  )
-
-  useEffect(() => {
-    if (isPending || isAuthenticated) return
-
-    const redirectTarget = redirectTargetRef.current ?? (pathname || ACCOUNT_BASE)
-    redirectTargetRef.current = redirectTarget
-
-    void navigate({
-      to: LOGIN_HREF,
-      search: { redirect: redirectTarget },
-      replace: true,
-    })
-  }, [isAuthenticated, isPending, navigate, pathname])
-
-  const handleLogout = async () => {
-    await signOut()
-    void navigate({ to: HOME_HREF, replace: true })
-  }
-
-  const invalidateAddresses = () =>
-    queryClient.invalidateQueries({ queryKey: ['customer-addresses'] })
-
-  const handleUpdateProfile = async (payload: CustomerProfilePatch) => {
-    await patchCustomer(proxyApi(), payload)
-    const displayName = `${payload.firstName} ${payload.lastName}`.trim()
-    try {
-      await client.$fetch('/update-user', {
-        method: 'POST',
-        body: {
-          name: displayName || payload.firstName,
-          firstName: payload.firstName,
-          lastName: payload.lastName,
-          phone: payload.phone,
-        },
-      })
-    } catch {
-      // La sesión Better Auth es secundaria; el PATCH upstream ya se aplicó.
-    }
-    await queryClient.invalidateQueries({ queryKey: ['account-customer-me'] })
-  }
-
-  const handleCreateAddress = async (payload: CustomerAddressUpsertInput) => {
-    await createCustomerAddress(proxyApi(), payload)
-    await invalidateAddresses()
-  }
-
-  const handleUpdateAddress = async (
-    addressId: string,
-    payload: CustomerAddressUpsertInput,
-  ) => {
-    await updateCustomerAddress(proxyApi(), addressId, payload)
-    await invalidateAddresses()
-  }
-
-  const handleDeleteAddress = async (addressId: string) => {
-    await deleteCustomerAddress(proxyApi(), addressId)
-    await invalidateAddresses()
-  }
-
-  const menuItems = [
-    {
-      key: 'personal',
-      href: ACCOUNT_BASE,
-      label: 'Datos personales',
-      icon: <UserRound className="size-4" />,
-    },
-    {
-      key: 'addresses',
-      href: `${ACCOUNT_BASE}/addresses`,
-      label: 'Direcciones',
-      icon: <MapPinHouse className="size-4" />,
-    },
-    {
-      key: 'orders',
-      href: ORDERS_BASE,
-      label: 'Mis pedidos',
-      icon: <Package className="size-4" />,
-    },
-    {
-      key: 'devices',
-      href: `${ACCOUNT_BASE}/devices`,
-      label: 'Dispositivos vinculados',
-      icon: <MonitorSmartphone className="size-4" />,
-    },
-  ]
-
-  if (isPending || !isAuthenticated) {
-    return <AccountPageSkeleton />
-  }
-
-  let sectionContent: ReactNode
-
-  switch (section) {
-    case 'personal':
-      sectionContent = (
-        <SectionPanel>
-          <CustomerProfilePanel
-            profile={profileQuery.data}
-            isLoading={profileQuery.isLoading}
-            errorMessage={profileQuery.error?.message}
-            onUpdateProfile={handleUpdateProfile}
-          />
-        </SectionPanel>
-      )
-      break
-    case 'addresses':
-      sectionContent = (
-        <SectionPanel>
-          <CustomerAddressesPanel
-            addresses={addressesQuery.data}
-            isLoading={addressesQuery.isLoading}
-            errorMessage={addressesQuery.error?.message}
-            onCreateAddress={handleCreateAddress}
-            onUpdateAddress={handleUpdateAddress}
-            onDeleteAddress={handleDeleteAddress}
-          />
-        </SectionPanel>
-      )
-      break
-    case 'orders':
-      sectionContent = (
-        <SectionPanel>
-          {orderId ? (
-            <CustomerOrderDetailPanel
-              order={orderDetailQuery.data}
-              isLoading={orderDetailQuery.isLoading}
-              errorMessage={orderDetailQuery.error?.message}
-              backHref={ORDERS_BASE}
-              language={language}
-              productHref={(handle) => `/products/${encodeURIComponent(handle)}`}
-            />
-          ) : (
-            <CustomerOrdersPanel
-              orders={ordersQuery.data}
-              isLoading={ordersQuery.isLoading}
-              errorMessage={ordersQuery.error?.message}
-              orderDetailBasePath={ORDERS_BASE}
-              shopHref={HOME_HREF}
-              language={language}
-            />
-          )}
-        </SectionPanel>
-      )
-      break
-    case 'devices':
-      sectionContent = (
-        <SectionPanel>
-          <h2 className="text-lg font-medium text-foreground">Dispositivos vinculados</h2>
-          <p className="mt-2 text-muted-foreground">
-            Aún no hay endpoint para listar sesiones/dispositivos.
-          </p>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Cuando esté disponible el backend, podrás cerrar sesiones remotas desde aquí.
-          </p>
-        </SectionPanel>
-      )
-      break
-    default:
-      sectionContent = <AccountSectionSkeleton />
-  }
-
-  return (
-    <AccountShell
-      menuItems={menuItems}
-      onLogout={() => void handleLogout()}
-      pathname={pathname}
-      homeHref={HOME_HREF}
-    >
-      {sectionContent}
-    </AccountShell>
-  )
-}
-
-function SectionPanel({ children }: { children: ReactNode }) {
-  return <div className="px-6">{children}</div>
-}

package/src/pages/account/account-shell.tsx

@@ -1,101 +0,0 @@
-import type { ReactNode } from 'react'
-import { ArrowLeft, ChevronRight, LogOut } from 'lucide-react'
-import { Link } from '../../link'
-import { cn } from '../../ui/cn'
-import {
-  accountSectionLabel,
-  parseAccountRoute,
-} from './parse-account-route'
-
-export type AccountMenuItem = {
-  key: string
-  href: string
-  label: string
-  icon: ReactNode
-}
-
-type AccountShellProps = {
-  menuItems: AccountMenuItem[]
-  onLogout: () => void
-  profileSyncError?: string | null
-  children: ReactNode
-  pathname: string
-  homeHref?: string
-}
-
-export function AccountShell({
-  menuItems,
-  onLogout,
-  profileSyncError,
-  children,
-  pathname,
-  homeHref = '/',
-}: AccountShellProps) {
-  const { section, orderId } = parseAccountRoute(pathname || '/account')
-  const sectionTitle = accountSectionLabel(section, orderId)
-
-  return (
-    <div className="container max-w-6xl mx-auto px-4 py-8">
-      <Link
-        to={homeHref}
-        className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors [@media(hover:hover)]:hover:text-foreground"
-      >
-        <ArrowLeft className="size-4" />
-        <span className="underline">Volver a la tienda</span>
-      </Link>
-
-      <h1 className="mt-2 text-3xl font-semibold tracking-tight">Mi perfil</h1>
-
-      {profileSyncError ? (
-        <p className="mt-3 text-sm text-amber-800">{profileSyncError}</p>
-      ) : null}
-
-      <div className="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-[320px_1fr]">
-        <aside className="overflow-hidden rounded-xl border border-border bg-background lg:sticky lg:top-15 lg:self-start">
-          <nav className="divide-y divide-border">
-            {menuItems.map((item) => {
-              const isOrders = item.key === 'orders'
-              const active =
-                (section === item.key && !orderId) ||
-                (isOrders && section === 'orders' && Boolean(orderId))
-
-              return (
-                <Link
-                  key={item.key}
-                  to={item.href}
-                  className={cn(
-                    'flex items-center justify-between border-b border-border px-4 py-4 text-[15px] transition-colors',
-                    active
-                      ? 'bg-muted font-semibold'
-                      : '[@media(hover:hover)]:hover:bg-muted',
-                  )}
-                >
-                  <span className="flex items-center gap-3">
-                    <span className="text-muted-foreground">{item.icon}</span>
-                    <span>{item.label}</span>
-                  </span>
-                  <ChevronRight className="size-4 text-muted-foreground" />
-                </Link>
-              )
-            })}
-            <button
-              type="button"
-              onClick={onLogout}
-              className="flex w-full items-center justify-between px-4 py-4 text-left text-[15px] transition-colors [@media(hover:hover)]:hover:bg-muted"
-            >
-              <span className="flex items-center gap-3">
-                <LogOut className="size-4 text-muted-foreground" />
-                <span>Cerrar sesión</span>
-              </span>
-              <ChevronRight className="size-4 text-muted-foreground" />
-            </button>
-          </nav>
-        </aside>
-
-        <section className="min-w-0" aria-label={sectionTitle}>
-          {children}
-        </section>
-      </div>
-    </div>
-  )
-}

package/src/pages/account/parse-account-route.ts

@@ -1,36 +0,0 @@
-export type AccountSection = 'personal' | 'addresses' | 'orders' | 'devices'
-
-export type ParsedAccountRoute = {
-  section: AccountSection
-  orderId?: string
-}
-
-const SECTION_LABELS: Record<AccountSection, string> = {
-  personal: 'Datos personales',
-  addresses: 'Direcciones',
-  orders: 'Mis pedidos',
-  devices: 'Dispositivos vinculados',
-}
-
-export function accountSectionLabel(section: AccountSection, orderId?: string): string {
-  if (section === 'orders' && orderId) return 'Detalle del pedido'
-  return SECTION_LABELS[section]
-}
-
-/** Deriva sección y orderId desde `/account/...`. */
-export function parseAccountRoute(pathname: string): ParsedAccountRoute {
-  const normalized = pathname.replace(/\/$/, '') || '/'
-  const parts = normalized.split('/').filter(Boolean)
-  const accountIdx = parts.indexOf('account')
-  if (accountIdx === -1) return { section: 'personal' }
-
-  const sub = parts.slice(accountIdx + 1)
-  if (sub.length === 0) return { section: 'personal' }
-  if (sub[0] === 'addresses') return { section: 'addresses' }
-  if (sub[0] === 'devices') return { section: 'devices' }
-  if (sub[0] === 'orders') {
-    if (sub[1]) return { section: 'orders', orderId: decodeURIComponent(sub[1]) }
-    return { section: 'orders' }
-  }
-  return { section: 'personal' }
-}

package/src/pages/account.tsx

@@ -1,16 +0,0 @@
-/**
- * Área de cuenta cerrada de Ecomiq (`/account`, `/account/addresses`, …).
- * Los templates no pueden overridear estas rutas desde `pages/account`.
- * Login/register viven en la raíz del template (`/login`, `/register`).
- */
-import { definePage } from '../index'
-import { AccountPageView } from './account/account-page-view'
-
-export default definePage({
-  meta: () => ({
-    title: 'Mi cuenta',
-    description: 'Gestiona tu cuenta, direcciones y pedidos',
-    noIndex: true,
-  }),
-  component: AccountPageView,
-})

package/src/pages/api.$.ts

@@ -1,20 +0,0 @@
-/**
- * Proxy catch-all same-origin: `/api/*` → storefront `/v1/*`.
- * Ruta cerrada del framework (no hace falta en pages/ del usuario).
- */
-import { proxyStorefrontRequest } from '../api-proxy'
-
-type ApiHandlerArgs = {
-  request: Request
-  params: { _splat?: string }
-}
-
-async function handle({ request, params }: ApiHandlerArgs) {
-  return proxyStorefrontRequest(request, params._splat)
-}
-
-export const GET = handle
-export const POST = handle
-export const PUT = handle
-export const PATCH = handle
-export const DELETE = handle

package/src/pages/api.auth.$.ts

@@ -1,16 +0,0 @@
-/**
- * Better Auth catch-all: `/api/auth/*`.
- * Ruta cerrada del framework (no hace falta en pages/ del usuario).
- */
-import { storefrontAuth } from '../auth/storefront-auth'
-
-type ApiHandlerArgs = {
-  request: Request
-}
-
-async function handle({ request }: ApiHandlerArgs) {
-  return storefrontAuth.handler(request)
-}
-
-export const GET = handle
-export const POST = handle

package/src/pages/checkout.$checkoutId.tsx

@@ -1,60 +0,0 @@
-/**
- * Checkout cerrado de Ecomiq (`/checkout/$checkoutId`).
- * Los templates heredan la ruta vía codegen; no se puede overridear desde `pages/`.
- * `/checkout` sin ID redirige a `/cart` (ver `checkout.tsx`).
- */
-import { useEffect } from 'react'
-import { CheckoutSessionView } from '../components/checkout'
-import { definePage } from '../index'
-import { useAuth, useSearchNavigate, useSettings } from '../providers'
-
-export default definePage<undefined, { checkoutId: string }>({
-  meta: () => ({
-    title: 'Checkout',
-    description: 'Confirma tu pedido y completa la compra',
-    noIndex: true,
-  }),
-  component: CheckoutPage,
-})
-
-function CheckoutPage({ params }: { params: { checkoutId: string } }) {
-  const checkoutId = params.checkoutId?.trim() ?? ''
-  const { store } = useSettings()
-  const allowGuest = store.checkoutSettings.general.allowGuestCheckout
-  const { session, isPending: authPending } = useAuth()
-  const navigate = useSearchNavigate()
-  const isAuthenticated = Boolean(session?.user)
-  const needsAuth = !allowGuest && !authPending && !isAuthenticated && Boolean(checkoutId)
-
-  useEffect(() => {
-    if (checkoutId) return
-    void navigate({ to: '/cart', replace: true })
-  }, [checkoutId, navigate])
-
-  useEffect(() => {
-    if (!needsAuth || !checkoutId) return
-    void navigate({
-      to: '/login',
-      search: { redirect: `/checkout/${checkoutId}` },
-      replace: true,
-    })
-  }, [needsAuth, navigate, checkoutId])
-
-  if (!checkoutId) {
-    return (
-      <div className="mx-auto w-full max-w-6xl px-4 py-16 text-center text-sm text-muted-foreground">
-        Redirigiendo al carrito…
-      </div>
-    )
-  }
-
-  if (authPending || needsAuth) {
-    return (
-      <div className="mx-auto w-full max-w-6xl px-4 py-16 text-center text-sm text-muted-foreground">
-        {needsAuth ? 'Redirigiendo para iniciar sesión…' : 'Cargando…'}
-      </div>
-    )
-  }
-
-  return <CheckoutSessionView cartToken={checkoutId} />
-}

package/src/pages/checkout.tsx

@@ -1,31 +0,0 @@
-/**
- * Checkout cerrado de Ecomiq (`/checkout` / `/checkout/`).
- * Sin ID → redirige al carrito. El flujo vive en `/checkout/$checkoutId`
- * (ruta hermana, no hija: codegen usa `checkout.index.tsx`).
- */
-import { useEffect } from 'react'
-import { definePage } from '../index'
-import { useSearchNavigate } from '../providers'
-
-export default definePage({
-  meta: () => ({
-    title: 'Checkout',
-    description: 'Confirma tu pedido y completa la compra',
-    noIndex: true,
-  }),
-  component: CheckoutRedirectPage,
-})
-
-function CheckoutRedirectPage() {
-  const navigate = useSearchNavigate()
-
-  useEffect(() => {
-    void navigate({ to: '/cart', replace: true })
-  }, [navigate])
-
-  return (
-    <div className="mx-auto w-full max-w-6xl px-4 py-16 text-center text-sm text-muted-foreground">
-      Redirigiendo al carrito…
-    </div>
-  )
-}

package/src/pages/pages.$pageSlug.tsx

@@ -1,111 +0,0 @@
-/**
- * Página de contenido (`/pages/$pageSlug`).
- * La Definition es la dueña de estas rutas; el CMS queda solo como fallback
- * de lectura para tiendas que aún no migraron sus páginas.
- */
-import type { CmsPageDetailsDto } from '@ecomiq/core'
-import type { ActiveStorefrontPage } from '../storefront-runtime'
-import {
-  DefinitionSections,
-  definePage,
-  sanitizeHtml,
-  serverApi,
-  stripHtml,
-  z,
-} from '../index'
-import { StorefrontError } from '../ui'
-
-const ContentPageSettingsSchema = z.object({
-  title: z.string().optional(),
-  html: z.string().optional(),
-  seo: z.object({
-    title: z.string().optional(),
-    description: z.string().optional(),
-  }).optional(),
-}).passthrough()
-
-type ContentPageData =
-  | Extract<ActiveStorefrontPage, { kind: 'definition' }>
-  | {
-      kind: 'cms'
-      page: CmsPageDetailsDto
-      content: z.infer<typeof ContentPageSettingsSchema>
-    }
-
-export default definePage<ContentPageData, { pageSlug: string }>({
-  loader: async ({ params }) => {
-    const resolved = await serverApi.getActiveStorefrontPage(
-      `/pages/${params.pageSlug}`,
-    )
-    if (resolved.kind === 'definition') return resolved
-
-    const page = await serverApi.getPageBySlug(params.pageSlug)
-    if (page.status !== 'published') throw new Error('Página no publicada')
-
-    return {
-      kind: 'cms' as const,
-      page,
-      content: ContentPageSettingsSchema.parse(page.settings ?? {}),
-    }
-  },
-
-  meta: ({ data, settings }) => {
-    if (data.kind === 'definition') {
-      const { page } = data
-      return {
-        title: page.seo.title ?? page.title ?? settings?.store.name ?? '',
-        ...(page.seo.description === undefined
-          ? {}
-          : { description: page.seo.description }),
-        ...(page.seo.noindex ? { noIndex: true } : {}),
-      }
-    }
-    return {
-      title: data.content.seo?.title ?? data.content.title ?? data.page.name,
-      description: data.content.seo?.description ?? (
-        data.content.html
-          ? stripHtml(data.content.html).slice(0, 155)
-          : undefined
-      ),
-    }
-  },
-
-  error: () => (
-    <StorefrontError
-      title="Página no disponible"
-      description="El contenido no existe o todavía no está publicado."
-    />
-  ),
-
-  component: ({ data, settings }) => {
-    if (data.kind === 'definition') {
-      return (
-        <DefinitionSections
-          definition={data.definition}
-          pageId={data.page.id}
-          data={data.data}
-          locale={settings.store.language}
-          currency={settings.store.currency}
-        />
-      )
-    }
-    return (
-      <article className="mx-auto w-full max-w-4xl px-4 py-10 sm:py-14">
-        <header className="mb-8 border-b pb-8">
-          <h1 className="text-balance text-3xl font-semibold tracking-[-0.02em] md:text-4xl">
-            {data.content.title ?? data.page.name}
-          </h1>
-        </header>
-
-        {data.content.html ? (
-          <div
-            className="prose prose-neutral max-w-none text-foreground prose-headings:font-semibold prose-a:text-primary"
-            dangerouslySetInnerHTML={{ __html: sanitizeHtml(data.content.html) }}
-          />
-        ) : (
-          <p className="text-muted-foreground">Contenido no disponible.</p>
-        )}
-      </article>
-    )
-  },
-})