@ecomiq/storefront 2.0.12 → 2.0.14

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

@@ -0,0 +1,270 @@
+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

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,16 @@
+/**
+ * Á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/checkout.$checkoutId.tsx

@@ -34,7 +34,7 @@ function CheckoutPage({ params }: { params: { checkoutId: string } }) {
   useEffect(() => {
     if (!needsAuth || !checkoutId) return
     void navigate({
-      to: '/account/login',
+      to: '/login',
       search: { redirect: `/checkout/${checkoutId}` },
       replace: true,
     })

package/src/providers/auth.tsx

@@ -62,8 +62,17 @@ export function useAuth() {
     session: sessionQuery.data,
     isPending: sessionQuery.isPending,
     error: sessionQuery.error,
-    signIn: (credentials: EcomiqSignInCredentials) =>
-      signInWithEcomiqCredentials(client, settings, credentials),
+    signIn: async (credentials: EcomiqSignInCredentials) => {
+      await signInWithEcomiqCredentials(client, settings, credentials)
+      const result = await client.getSession()
+      const session = (result as { data?: StorefrontSession | null })?.data ?? null
+      if (!session?.user) {
+        throw new Error(
+          'No se pudo establecer la sesión. Revisa cookies / certificado HTTPS e inténtalo de nuevo.',
+        )
+      }
+      return session
+    },
     signOut: () => client.signOut(),
   }
 }

package/src/proxy-api.ts

@@ -0,0 +1,20 @@
+import { createApi, type Api } from '@ecomiq/core'
+
+/**
+ * Cliente HTTP hacia el BFF same-origin (`/api/*`).
+ * El proxy inyecta `x-Store-Id` y el Bearer desde la cookie OAuth
+ * (`ecomiq_sf_oauth_at`, path `/api`).
+ *
+ * Usar con los services de `@ecomiq/core` (p. ej. `getCustomerAddresses(api)`).
+ * `version` vacío: el path del proxy ya es `/api/...` (el upstream añade `/v1`).
+ */
+export function createStorefrontProxyApi(): Api {
+  const origin =
+    typeof window !== 'undefined' && window.location?.origin
+      ? window.location.origin
+      : 'http://localhost'
+  return createApi({
+    baseUrl: `${origin}/api`,
+    version: '',
+  })
+}

package/src/vite-inline.mjs

@@ -7,12 +7,14 @@
  * Alineado con el ejemplo oficial TanStack Start + Cloudflare:
  * https://github.com/TanStack/router/tree/main/examples/react/start-basic-cloudflare
  */
-import { dirname, resolve } from 'node:path'
+import { readFileSync } from 'node:fs'
+import { dirname, isAbsolute, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import viteReact from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 import { cloudflare } from '@cloudflare/vite-plugin'
+import basicSsl from '@vitejs/plugin-basic-ssl'
 
 const postcssBrowserStub = fileURLToPath(
   new URL('./runtime/postcss-browser-stub.mjs', import.meta.url),
@@ -97,6 +99,51 @@ export function resolveDevRuntime({ config, runtime } = {}) {
   return runtime ?? config?.dev?.runtime ?? 'node'
 }
 
+/**
+ * HTTPS en `ecomiq dev` (localhost).
+ * - `dev.https: true` → certificado auto (plugin-basic-ssl)
+ * - `dev.https: { cert, key }` → PEM propios (paths relativos al project root)
+ *
+ * @param {{ config?: object, projectRoot?: string, appDir?: string }} opts
+ * @returns {{ enabled: boolean, plugin?: object, https?: import('node:https').ServerOptions }}
+ */
+export function resolveDevHttps({ config, projectRoot, appDir } = {}) {
+  const https = config?.dev?.https
+  if (!https) return { enabled: false }
+
+  if (https === true) {
+    return {
+      enabled: true,
+      plugin: basicSsl({
+        name: 'ecomiq',
+        domains: ['localhost', '127.0.0.1', '::1'],
+      }),
+    }
+  }
+
+  if (typeof https === 'object' && https !== null) {
+    const root = projectRoot ?? (appDir ? resolve(appDir, '..') : process.cwd())
+    const certPath = resolvePathFromRoot(root, https.cert)
+    const keyPath = resolvePathFromRoot(root, https.key)
+    return {
+      enabled: true,
+      https: {
+        cert: readFileSync(certPath),
+        key: readFileSync(keyPath),
+      },
+    }
+  }
+
+  return { enabled: false }
+}
+
+function resolvePathFromRoot(root, value) {
+  if (typeof value !== 'string' || !value.trim()) {
+    throw new Error('dev.https.cert y dev.https.key deben ser paths a archivos PEM')
+  }
+  return isAbsolute(value) ? value : resolve(root, value)
+}
+
 /**
  * @param {{ appDir: string, config?: object, projectRoot?: string, runtime?: 'workerd' | 'node' }} opts
  */
@@ -111,9 +158,14 @@ export function createViteConfig({ appDir, config, projectRoot, runtime }) {
   ]
 
   const resolvedRuntime = resolveDevRuntime({ config, runtime })
+  const resolvedHttps = resolveDevHttps({ config, projectRoot: root, appDir })
 
   const plugins = [tailwindcss()]
 
+  if (resolvedHttps.plugin) {
+    plugins.push(resolvedHttps.plugin)
+  }
+
   if (resolvedRuntime === 'workerd') {
     plugins.unshift(bundleSsrDependenciesForWorkerd())
   }
@@ -172,6 +224,7 @@ export function createViteConfig({ appDir, config, projectRoot, runtime }) {
     },
     server: {
       fs: { allow },
+      ...(resolvedHttps.https ? { https: resolvedHttps.https } : {}),
     },
   }
 }