@ecomiq/storefront 2.0.9 → 2.0.12

package/src/hooks/recently-viewed.ts

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useState } from 'react'
+import { z } from 'zod'
+import { useSettings } from '../providers/ecomiq'
+
+const RecentlyViewedItemSchema = z.object({
+  id: z.string().min(1),
+  name: z.string().min(1),
+  slug: z.string().min(1),
+  imageUrl: z.string(),
+  price: z.number().nonnegative(),
+  compareAtPrice: z.number().nonnegative().nullable(),
+})
+
+const RecentlyViewedSessionSchema = z.object({
+  version: z.literal(1),
+  storeId: z.string().min(1),
+  items: z.array(RecentlyViewedItemSchema).max(12),
+})
+
+export type RecentlyViewedItem = z.infer<typeof RecentlyViewedItemSchema>
+
+const MAX_ITEMS = 8
+
+function storageKey(storeId: string) {
+  return `ecomiq:recently-viewed:v1:${storeId}`
+}
+
+function readSession(storeId: string) {
+  if (typeof localStorage === 'undefined') return undefined
+  try {
+    const raw = localStorage.getItem(storageKey(storeId))
+    if (!raw) return undefined
+    const parsed = RecentlyViewedSessionSchema.safeParse(JSON.parse(raw))
+    return parsed.success && parsed.data.storeId === storeId ? parsed.data : undefined
+  } catch {
+    return undefined
+  }
+}
+
+/** Lectura síncrona (tests / casos sin React). */
+export function listRecentlyViewed(storeId: string): RecentlyViewedItem[] {
+  return readSession(storeId)?.items ?? []
+}
+
+/** Persistencia síncrona: el item queda al frente y se deduplica por id. */
+export function trackRecentlyViewed(
+  storeId: string,
+  item: RecentlyViewedItem,
+): RecentlyViewedItem[] {
+  const current = listRecentlyViewed(storeId).filter((entry) => entry.id !== item.id)
+  const items = [item, ...current].slice(0, MAX_ITEMS)
+  localStorage.setItem(
+    storageKey(storeId),
+    JSON.stringify({
+      version: 1,
+      storeId,
+      items,
+    } satisfies z.infer<typeof RecentlyViewedSessionSchema>),
+  )
+  return items
+}
+
+export type TrackableProduct = {
+  id: string | number
+  name: string
+  slug: string
+  imageUrl?: string | null
+  images?: Array<{ url: string }>
+  price: number
+  compareAtPrice: number | null
+}
+
+export function toRecentlyViewedItem(product: TrackableProduct): RecentlyViewedItem {
+  return {
+    id: String(product.id),
+    name: product.name,
+    slug: product.slug,
+    imageUrl: product.imageUrl || product.images?.[0]?.url || '',
+    price: product.price,
+    compareAtPrice: product.compareAtPrice,
+  }
+}
+
+/**
+ * Lista reactiva de productos vistos recientemente de la tienda actual.
+ *
+ * ```tsx
+ * const { items, track } = useRecentlyViewed()
+ * ```
+ */
+export function useRecentlyViewed() {
+  const { store } = useSettings()
+  const [items, setItems] = useState<RecentlyViewedItem[]>([])
+
+  useEffect(() => {
+    setItems(listRecentlyViewed(store.id))
+  }, [store.id])
+
+  const track = useCallback(
+    (item: RecentlyViewedItem) => {
+      const next = trackRecentlyViewed(store.id, item)
+      setItems(next)
+      return next
+    },
+    [store.id],
+  )
+
+  return { items, track, storeId: store.id }
+}
+
+/**
+ * Registra un producto en “visto recientemente” al montar / cambiar de PDP.
+ *
+ * ```tsx
+ * useTrackRecentlyViewed(product)
+ * ```
+ */
+export function useTrackRecentlyViewed(product: TrackableProduct) {
+  const { store } = useSettings()
+  const item = toRecentlyViewedItem(product)
+
+  useEffect(() => {
+    trackRecentlyViewed(store.id, item)
+  }, [store.id, item.id, item.name, item.slug, item.imageUrl, item.price, item.compareAtPrice])
+}

package/src/index.ts

@@ -8,10 +8,7 @@ import type { StorefrontSettings } from '@ecomiq/core'
 import type { PublicEcomiqConfig } from './public-config'
 
 export type {
-  EcomiqAnalyticsConfig,
   EcomiqConfig,
-  EcomiqLayoutConfig,
-  EcomiqSeoConfig,
   EcomiqThemeConfig,
   PublicEcomiqConfig,
 } from './public-config'
@@ -169,6 +166,15 @@ export {
   type StorefrontAuthClientInstance,
   type StorefrontSession,
 } from './providers'
+export {
+  listRecentlyViewed,
+  trackRecentlyViewed,
+  toRecentlyViewedItem,
+  useRecentlyViewed,
+  useTrackRecentlyViewed,
+  type RecentlyViewedItem,
+  type TrackableProduct,
+} from './hooks'
 export { createStorefrontAuth } from './auth/create-storefront-auth'
 export { ecomiqOAuthPassword } from './auth/ecomiq-oauth-password-plugin'
 export { ecomiqOAuthPasswordClient } from './auth/ecomiq-oauth-password-client'
@@ -202,12 +208,14 @@ export interface PageProps<
   data: TData
   params: TParams
   search: TSearch
+  /** Settings storefront (CMS, store, menus). Cargado en el root; sin request extra. */
+  settings: StorefrontSettings
 }
 
 export interface PageMeta {
   title?: string
   description?: string
-  /** Imagen OG específica de esta página (sobreescribe seo.ogImage). */
+  /** Imagen OG específica de esta página (sobreescribe branding.socialImageUrl). */
   ogImage?: string
   /** Marca la página como noindex,nofollow. */
   noIndex?: boolean
@@ -254,6 +262,11 @@ export interface EcomiqPage<
     params: TParams
     search: TSearch
     config: PublicEcomiqConfig
+    /**
+     * Settings storefront cargados en el root. Opcional: puede faltar si el
+     * `<head>` se calcula antes de que el match raíz tenga sus datos.
+     */
+    settings?: StorefrontSettings
   }) => PageMeta
   /** UI de la página. */
   component: (props: PageProps<TData, TParams, TSearch>) => ReactNode

package/src/public-config.ts

@@ -7,38 +7,18 @@ export interface EcomiqThemeConfig {
   radius?: string
 }
 
-export interface EcomiqSeoConfig {
-  titleTemplate?: string
-  keywords?: string[]
-  favicon?: string
-  ogImage?: string
-  twitterCard?: 'summary' | 'summary_large_image'
-  meta?: Array<{ name?: string; property?: string; content: string }>
-  links?: Array<Record<string, string>>
-}
-
-export interface EcomiqAnalyticsConfig {
-  googleAnalytics?: string
-  metaPixel?: string
-  plausible?: string
-  scripts?: Array<{ src?: string; inline?: string; defer?: boolean; async?: boolean }>
-}
-
-export interface EcomiqLayoutConfig {
-  nav?: Array<{ label: string; to: string }>
-  footerText?: string
-  stickyHeader?: boolean
-}
-
+/**
+ * Proyección pública de ecomiq.config.js (seguro para el bundle cliente).
+ * Nombre, SEO, analytics y menús viven en `/v1/settings`.
+ */
 export interface PublicEcomiqConfig {
-  name: string
-  /** Identidad de tienda para x-Store-Domain (ej. 'marketplace'). */
-  slug: string
-  description?: string
+  /**
+   * Identidad de tienda para `x-Store-Domain`.
+   * Acepta slug corto o dominio completo, p. ej. `marketplace`,
+   * `marketplace.ecomiq.app` o `marketplace.pe`.
+   */
+  domain: string
   theme?: EcomiqThemeConfig
-  seo?: EcomiqSeoConfig
-  analytics?: EcomiqAnalyticsConfig
-  layout?: EcomiqLayoutConfig
 }
 
 export type EcomiqConfig = PublicEcomiqConfig

package/src/runtime/default-layout.tsx

@@ -1,40 +1,24 @@
 /**
  * Layout por defecto de Ecomiq.
  * Nav y footer salen de settings.cms.menus (main / footer).
- * Fallback: bloque `layout` de ecomiq.config.js.
  */
 import { Link } from '@tanstack/react-router'
 import { getMenuItems } from '@ecomiq/core'
 import type { LayoutProps } from '../index'
 
-export default function DefaultLayout({ children, config, settings }: LayoutProps) {
-  const layout = (config.layout ?? {}) as {
-    nav?: Array<{ label: string; to: string }>
-    footerText?: string
-    stickyHeader?: boolean
-  }
-
+export default function DefaultLayout({ children, settings }: LayoutProps) {
   const mainItems = getMenuItems(settings, 'main')
   const footerItems = getMenuItems(settings, 'footer')
   const nav =
     mainItems.length > 0
       ? mainItems.map((item) => ({ label: item.label, to: item.url, target: item.target }))
-      : (layout.nav ?? [{ label: 'Productos', to: '/' }]).map((item) => ({
-          ...item,
-          target: null as string | null | undefined,
-        }))
+      : [{ label: 'Productos', to: '/', target: null as string | null }]
 
-  const sticky = layout.stickyHeader !== false
-  const storeName = settings?.store.name ?? config.name
+  const storeName = settings?.store.name ?? 'Tienda'
 
   return (
     <div className="flex min-h-dvh flex-col">
-      <header
-        className={
-          'border-b bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/75 z-40' +
-          (sticky ? ' sticky top-0' : '')
-        }
-      >
+      <header className="sticky top-0 z-40 border-b bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/75">
         <div className="mx-auto flex h-14 w-full max-w-6xl items-center justify-between px-4">
           <Link to="/" className="font-semibold tracking-tight text-lg">
             {storeName}
@@ -63,7 +47,7 @@ export default function DefaultLayout({ children, config, settings }: LayoutProp
       <main className="mx-auto w-full max-w-6xl flex-1 px-4 py-8">{children}</main>
       <footer className="border-t">
         <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-6 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
-          <p>{layout.footerText ?? `${storeName} — creado con Ecomiq`}</p>
+          <p>{settings?.store.description || `${storeName} — creado con Ecomiq`}</p>
           {footerItems.length > 0 && (
             <nav className="flex flex-wrap gap-4">
               {footerItems.map((item) => (

package/src/runtime/head.ts

@@ -1,9 +1,16 @@
 /**
  * Runtime interno: construcción del <head>.
- * Mezcla el SEO global de ecomiq.config.js con el `meta` de cada página
- * (la página siempre gana) y genera los scripts de analytics declarados.
+ * Mezcla SEO/branding/tracking de `/v1/settings` con el `meta` de cada página
+ * (la página siempre gana) y genera los scripts de analytics del CMS.
  */
-import type { PageMeta, PublicEcomiqConfig } from '../index'
+import type { StorefrontSettings } from '@ecomiq/core'
+import type { PageMeta } from '../index'
+import {
+  cmsBranding,
+  cmsSeo,
+  storeDisplayName,
+  storeSeoDescription,
+} from '../utils'
 
 type MetaTag = Record<string, string>
 type LinkTag = Record<string, string>
@@ -22,53 +29,75 @@ function serializeJsonLd(value: Record<string, unknown>) {
     .replace(/\u2029/g, '\\u2029')
 }
 
-/** Aplica titleTemplate ('%s · Tienda') o cae al patrón `Título · Tienda`. */
-export function resolveTitle(pageTitle: string | undefined, config: PublicEcomiqConfig): string {
-  const seo = config.seo ?? {}
-  if (!pageTitle) return config.name
-  const template = seo.titleTemplate
-  return template ? template.replace('%s', pageTitle) : `${pageTitle} · ${config.name}`
+function siteName(settings: StorefrontSettings | null | undefined): string {
+  return storeDisplayName(settings) ?? 'Tienda'
 }
 
-/** Head global: charset, viewport, favicon, metas/links extra y analytics. Va en el root. */
-export function buildRootHead(config: PublicEcomiqConfig): HeadResult {
-  const seo = config.seo ?? {}
+/** Aplica titleTemplate del CMS (`{page} | {site}` o `%s · Tienda`). */
+export function resolveTitle(
+  pageTitle: string | undefined,
+  settings: StorefrontSettings | null | undefined,
+): string {
+  const name = siteName(settings)
+  const seo = cmsSeo(settings)
+  if (!pageTitle) return seo?.metaTitle ?? name
+
+  const template = seo?.titleTemplate?.trim()
+  if (!template) return `${pageTitle} · ${name}`
+
+  return template
+    .replaceAll('{page}', pageTitle)
+    .replaceAll('{site}', name)
+    .replace('%s', pageTitle)
+}
+
+/** Head global: charset, viewport, favicon, tracking. Va en el root. */
+export function buildRootHead(
+  settings: StorefrontSettings | null | undefined,
+): HeadResult {
+  const branding = cmsBranding(settings)
+  const seo = cmsSeo(settings)
 
   const meta: MetaTag[] = [
     { charSet: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
   ]
-  if (seo.keywords?.length) meta.push({ name: 'keywords', content: seo.keywords.join(', ') })
-  for (const extra of seo.meta ?? []) meta.push(extra)
+  if (seo?.robotsIndex === false) {
+    meta.push({ name: 'robots', content: 'noindex, nofollow' })
+  }
 
-  const links: LinkTag[] = [{ rel: 'icon', href: seo.favicon ?? '/favicon.ico' }]
-  for (const extra of seo.links ?? []) links.push(extra)
+  const links: LinkTag[] = [
+    { rel: 'icon', href: branding?.faviconUrl ?? '/favicon.ico' },
+  ]
 
-  return { meta, links, scripts: buildAnalyticsScripts(config) }
+  return { meta, links, scripts: buildAnalyticsScripts(settings) }
 }
 
 /** Head por página: title (con plantilla), description, OG/Twitter, robots, metas extra y JSON-LD. */
 export function buildPageHead(
   pageMeta: PageMeta | undefined,
-  config: PublicEcomiqConfig,
+  settings: StorefrontSettings | null | undefined,
 ): HeadResult {
-  const seo = config.seo ?? {}
-  const title = resolveTitle(pageMeta?.title, config)
-  const description = pageMeta?.description ?? config.description
-  const ogImage = pageMeta?.ogImage ?? seo.ogImage
+  const branding = cmsBranding(settings)
+  const seo = cmsSeo(settings)
+  const title = resolveTitle(pageMeta?.title, settings)
+  const description = pageMeta?.description ?? storeSeoDescription(settings) ?? undefined
+  const ogImage = pageMeta?.ogImage ?? branding?.socialImageUrl ?? undefined
+  const name = siteName(settings)
 
   const meta: MetaTag[] = [{ title }]
   if (description) meta.push({ name: 'description', content: description })
-  if (pageMeta?.noIndex) meta.push({ name: 'robots', content: 'noindex, nofollow' })
+  if (pageMeta?.noIndex || seo?.robotsIndex === false) {
+    meta.push({ name: 'robots', content: 'noindex, nofollow' })
+  }
 
-  // Open Graph + Twitter con fallbacks razonables
   meta.push({ property: 'og:title', content: title })
   meta.push({ property: 'og:type', content: 'website' })
-  meta.push({ property: 'og:site_name', content: config.name })
+  meta.push({ property: 'og:site_name', content: name })
   if (description) meta.push({ property: 'og:description', content: description })
   if (ogImage) {
     meta.push({ property: 'og:image', content: ogImage })
-    meta.push({ name: 'twitter:card', content: seo.twitterCard ?? 'summary_large_image' })
+    meta.push({ name: 'twitter:card', content: 'summary_large_image' })
     meta.push({ name: 'twitter:image', content: ogImage })
   }
 
@@ -82,44 +111,38 @@ export function buildPageHead(
   return { meta, ...(scripts.length ? { scripts } : {}) }
 }
 
-/** Traduce el bloque `analytics` del config a etiquetas <script>. */
-export function buildAnalyticsScripts(config: PublicEcomiqConfig): ScriptTag[] {
-  const analytics = config.analytics ?? {}
+/** Traduce tracking + customScripts del CMS a etiquetas <script>. */
+export function buildAnalyticsScripts(
+  settings: StorefrontSettings | null | undefined,
+): ScriptTag[] {
+  const tracking = settings?.cms?.settings?.tracking
+  const custom = settings?.cms?.settings?.customScripts
   const scripts: ScriptTag[] = []
 
-  if (analytics.googleAnalytics) {
-    const id = analytics.googleAnalytics
+  if (tracking?.googleAnalyticsMeasurementId) {
+    const id = tracking.googleAnalyticsMeasurementId
     scripts.push({ src: `https://www.googletagmanager.com/gtag/js?id=${id}`, async: true })
     scripts.push({
       children: `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)};gtag('js',new Date());gtag('config','${id}');`,
     })
   }
 
-  if (analytics.plausible) {
+  if (tracking?.googleTagManagerContainerId) {
+    const id = tracking.googleTagManagerContainerId
     scripts.push({
-      src: 'https://plausible.io/js/script.js',
-      defer: true,
-      'data-domain': analytics.plausible,
+      children: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${id}');`,
     })
   }
 
-  if (analytics.metaPixel) {
-    const id = analytics.metaPixel
+  if (tracking?.metaPixelId) {
+    const id = tracking.metaPixelId
     scripts.push({
       children: `!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init','${id}');fbq('track','PageView');`,
     })
   }
 
-  for (const custom of analytics.scripts ?? []) {
-    if (custom.src) {
-      scripts.push({
-        src: custom.src,
-        ...(custom.defer ? { defer: true } : {}),
-        ...(custom.async ? { async: true } : {}),
-      })
-    } else if (custom.inline) {
-      scripts.push({ children: custom.inline })
-    }
+  if (custom?.enabled && custom.head) {
+    scripts.push({ children: custom.head })
   }
 
   return scripts

package/src/runtime/page.tsx

@@ -2,10 +2,30 @@
  * Runtime interno de Ecomiq (solo lo importa el código generado en .ecomiq).
  * Traduce el contrato público `definePage` a las opciones del router interno.
  */
+import type { StorefrontSettings } from '@ecomiq/core'
 import type { EcomiqPage, PublicEcomiqConfig } from '../index'
+import { useSettings } from '../providers'
+import { serverApi } from '../server'
 import { StorefrontError } from '../ui/storefront-error'
 import { buildPageHead } from './head'
 
+async function resolveSettingsForMeta(
+  matches?: Array<{ loaderData?: unknown }>,
+): Promise<StorefrontSettings | undefined> {
+  // Preferir el loader del root si ya está en el match (hidratación cliente).
+  // En SSR `matches` suele venir stale (updateMatch no muta el array), así que
+  // caemos a serverApi: el cliente core cachea settings y no hay HTTP extra.
+  const fromRoot = matches?.[0]?.loaderData
+  if (fromRoot && typeof fromRoot === 'object' && fromRoot !== null && 'store' in fromRoot) {
+    return fromRoot as StorefrontSettings
+  }
+  try {
+    return await serverApi.getSettings()
+  } catch {
+    return undefined
+  }
+}
+
 export function pageToRouteOptions<
   TData,
   TParams extends Record<string, string>,
@@ -40,21 +60,32 @@ export function pageToRouteOptions<
           })
         }
       : undefined,
-    head: ({ loaderData, params, match }: {
+    head: async ({ loaderData, params, match, matches }: {
       loaderData: TData
       params: TParams
       match: { search: TSearch }
-    }) => buildPageHead(
-      loaderData === undefined
-        ? undefined
-        : page.meta?.({
-            data: loaderData,
-            params,
-            search: match.search,
-            config,
-          }),
-      config,
-    ),
+      matches?: Array<{ loaderData?: unknown }>
+    }) => {
+      // Con loader: si TanStack calcula head antes de tener datos, degrada al head global.
+      // Sin loader: loaderData es siempre undefined — aún así hay que llamar meta.
+      const waitingForLoader = Boolean(page.loader) && loaderData === undefined
+      if (waitingForLoader) return buildPageHead(undefined, undefined)
+
+      const settings = page.meta
+        ? await resolveSettingsForMeta(matches)
+        : undefined
+
+      return buildPageHead(
+        page.meta?.({
+          data: loaderData,
+          params,
+          search: match.search,
+          config,
+          settings,
+        }),
+        settings,
+      )
+    },
     pendingComponent: page.loading,
     errorComponent: page.error
       ? ({ error, reset }: { error: Error; reset: () => void }) => page.error!({ error, reset })
@@ -77,6 +108,7 @@ export function PageBoundary<
   params: TParams
   search: TSearch
 }) {
+  const settings = useSettings()
   const Component = page.component
-  return <Component data={data} params={params} search={search} />
+  return <Component data={data} params={params} search={search} settings={settings} />
 }

package/src/server-config-store.ts

@@ -2,7 +2,7 @@ import type { CreateApiOptions } from '@ecomiq/core'
 import { createServerOnlyFn } from '@tanstack/react-start'
 
 export interface ServerEcomiqConfig {
-  slug: string
+  domain: string
   api?: CreateApiOptions
 }
 

package/templates/__root.tsx

@@ -14,7 +14,7 @@ import '../styles.css'
 
 export const Route = createRootRoute({
   loader: () => serverApi.getSettings(),
-  head: () => buildRootHead(publicConfig),
+  head: ({ loaderData }) => buildRootHead(loaderData),
   component: RootComponent,
   errorComponent: RootError,
   notFoundComponent: NotFound,