@ecomiq/storefront 2.0.11 → 2.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecomiq/storefront",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "Micro framework SSR de Ecomiq para storefronts. Páginas, datos y deploy sin configurar nada.",
   "type": "module",
   "license": "MIT",

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+export {
+  listRecentlyViewed,
+  trackRecentlyViewed,
+  toRecentlyViewedItem,
+  useRecentlyViewed,
+  useTrackRecentlyViewed,
+  type RecentlyViewedItem,
+  type TrackableProduct,
+} from './recently-viewed'

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

@@ -166,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'