@thorprovider/storefront 0.3.1 → 0.4.0-mvp.2

package/assets/templates/features/customer-auth/handlers.ts

@@ -0,0 +1,59 @@
+'use client'
+
+// Generated by Thor Commerce storefront (feature: customer-auth — handlers)
+// The customer-auth capability's action handlers. Installed only when the
+// feature is in the manifest; the handlers composer calls this hook. Login and
+// registration are invoked directly by the view registry (their credential
+// payload must never enter the state store); these handlers own the non-secret
+// state transitions: the sign-in / sign-up toggle and logout.
+
+import { useEffect } from 'react'
+import { useActions, useStateStore } from '@json-render/react'
+import { logoutAction } from '../../actions'
+
+export function useCustomerAuthHandlers() {
+  const { set } = useStateStore()
+  const { registerHandler } = useActions()
+
+  useEffect(() => {
+    const handlers: Record<string, () => void> = {
+      showRegister: () => {
+        set('/accountError', null)
+        set('/accountMode', 'register')
+      },
+      showLogin: () => {
+        set('/accountError', null)
+        set('/accountMode', 'login')
+      },
+      logout: () => {
+        set('/accountPending', true)
+        set('/accountError', null)
+        void logoutAction()
+          .then((result) => {
+            set('/accountPending', false)
+            if (result.ok) {
+              set('/accountCustomer', null)
+              set('/accountAuthenticated', false)
+              set('/accountMode', 'login')
+              return
+            }
+            set('/accountError', result.error)
+          })
+          .catch((error) => {
+            // Never swallow: log a non-secret context line and surface a message.
+            console.error(
+              '[storefront/account] logout failed',
+              error instanceof Error ? error.message : error,
+            )
+            set('/accountPending', false)
+            set('/accountError', 'No se pudo cerrar la sesión. Inténtalo de nuevo.')
+          })
+      },
+    }
+
+    for (const [name, handler] of Object.entries(handlers)) {
+      registerHandler(name, handler)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}

package/assets/templates/features/customer-auth/state.ts

@@ -0,0 +1,45 @@
+// Generated by Thor Commerce storefront (feature: customer-auth — state slice)
+// The customer-auth capability's state. Installed only when the feature is in
+// the manifest; the state composer spreads it over the core state.
+
+import type { Customer } from '@thorprovider/types'
+import type { AccountOrderView } from '../../state.core'
+
+export interface CustomerAuthState {
+  /** The resolved customer, or null when unauthenticated. Never a token. */
+  accountCustomer: Customer | null
+  accountAuthenticated: boolean
+  /** Which auth surface is mounted: the sign-in page or the registration page. */
+  accountMode: 'login' | 'register'
+  accountPending: boolean
+  accountError: string | null
+  /** The customer's fetched order-history rows; empty until (or without) a load. */
+  accountOrders: AccountOrderView[]
+  /** True while the order history is being loaded. */
+  accountOrdersPending: boolean
+  /** The order-history load failure, or null when it loaded. */
+  accountOrdersError: string | null
+  /** The backend's real total for the authenticated customer on the store channel. */
+  accountOrdersCount: number
+  /** The 1-based order-history page currently loaded. */
+  accountOrdersPage: number
+  /** The bounded page size used for the order-history window. */
+  accountOrdersPageSize: number
+  /** The real backend order id selected for the inline detail; null when none is open. */
+  accountSelectedOrderId: string | null
+}
+
+export const customerAuthState: CustomerAuthState = {
+  accountCustomer: null,
+  accountAuthenticated: false,
+  accountMode: 'login',
+  accountPending: false,
+  accountError: null,
+  accountOrders: [],
+  accountOrdersPending: false,
+  accountOrdersError: null,
+  accountOrdersCount: 0,
+  accountOrdersPage: 1,
+  accountOrdersPageSize: 10,
+  accountSelectedOrderId: null,
+}

package/assets/templates/features/recommendations/state.ts

@@ -0,0 +1,11 @@
+// Generated by Thor Commerce storefront (feature: recommendations — state slice)
+// The recommendations capability's state. Installed only when the feature is in
+// the manifest; the state composer spreads it over the core state.
+
+export interface RecommendationsState {
+  recommendedProducts: unknown[]
+}
+
+export const recommendationsState: RecommendationsState = {
+  recommendedProducts: [],
+}

package/assets/templates/views/account/content.ts

@@ -0,0 +1,35 @@
+// Thor Commerce view content: account
+// User-owned view content — account copy for the sign-in and registration
+// surfaces. Reconcile seeds this file once and never rewrites it; the derived
+// view module (./index.tsx) imports it and wires it into the element tree, so
+// your edits here survive `storefront sync` and unit removal. Plain data only:
+// no React and no server imports.
+
+export const accountContent = {
+  login: {
+    logoText: '__SITE_NAME__',
+    welcomeTitleLabel: 'Bienvenido de nuevo',
+    welcomeDescriptionLabel: 'Inicia sesión para gestionar tu cuenta.',
+    emailLabel: 'Correo electrónico',
+    passwordLabel: 'Contraseña',
+    signInLabel: 'Iniciar sesión',
+    createAccountLabel: 'Crea una cuenta',
+  },
+  register: {
+    logoText: '__SITE_NAME__',
+    createAccountTitleLabel: 'Crea tu cuenta',
+    createAccountDescriptionLabel: 'Regístrate para gestionar tus pedidos.',
+    fullNameLabel: 'Nombre completo',
+    emailLabel: 'Correo electrónico',
+    passwordLabel: 'Contraseña',
+    createAccountLabel: 'Crear cuenta',
+    signInLabel: 'Inicia sesión',
+  },
+  orders: {
+    titleLabel: 'Mis pedidos',
+    descriptionLabel: 'Consulta tus pedidos anteriores',
+    emptyLabel: 'Aún no tienes pedidos.',
+    errorLabel: 'No se pudieron cargar tus pedidos.',
+    loadingLabel: 'Cargando pedidos…',
+  },
+}

package/assets/templates/views/account/index.tsx

@@ -0,0 +1,114 @@
+// Thor Commerce view module: account
+// Server Component module: elements + catalog entries + route + loader only.
+// The client-side component mappings live in ./registry.tsx ('use client'); this
+// module imports them as data so the RSC graph never evaluates @json-render/react
+// on the server. Registered by importing it in ../index.ts. Recipe: recipes.json -> "account".
+//
+// The initial render does NOT read the auth cookie here (this module is part of
+// the client catalog graph). The catch-all page mounts the route and the
+// headless `AccountBoot` resolves the current customer through the
+// cookie-authorized Server Action, so the token never reaches this module.
+
+import { getDataSource } from '../../store-context'
+import { pageRoot } from '../../spec/page-root'
+import type { StorefrontElement } from '../../spec/types'
+import type { ViewModule } from '../types'
+import { registry } from './registry'
+import { accountContent } from './content'
+import {
+  accountEmptyPropsSchema,
+  accountLoginPropsSchema,
+  accountOrdersPropsSchema,
+  accountRegisterPropsSchema,
+} from './schema'
+
+// Four surfaces: bootstrap (headless), sign-in, registration, and the signed-in
+// panel. The sign-in and registration surfaces are toggled by the `/accountMode`
+// state; the panel shows only when `/accountAuthenticated` is true.
+const elements: Record<string, StorefrontElement> = {
+  'account.boot': {
+    type: 'AccountBoot',
+    props: {},
+  },
+  'account.login': {
+    type: 'AccountLogin',
+    visible: {
+      $and: [
+        { $state: '/accountAuthenticated', not: true },
+        { $state: '/accountMode', eq: 'login' },
+      ],
+    },
+    props: accountContent.login,
+    on: { showRegister: { action: 'showRegister' } },
+  },
+  'account.register': {
+    type: 'AccountRegister',
+    visible: {
+      $and: [
+        { $state: '/accountAuthenticated', not: true },
+        { $state: '/accountMode', eq: 'register' },
+      ],
+    },
+    props: accountContent.register,
+    on: { showLogin: { action: 'showLogin' } },
+  },
+  'account.panel': {
+    type: 'AccountPanel',
+    visible: { $state: '/accountAuthenticated' },
+    props: {},
+    on: { logout: { action: 'logout' } },
+  },
+  'account.orders': {
+    type: 'AccountOrders',
+    visible: { $state: '/accountAuthenticated' },
+    props: accountContent.orders,
+  },
+}
+
+const catalog = {
+  AccountBoot: {
+    props: accountEmptyPropsSchema,
+    description: 'Headless account bootstrap: resolves the current customer from the auth cookie.',
+  },
+  AccountLogin: {
+    props: accountLoginPropsSchema,
+    description: 'Sign-in page with email and password and a link to create an account.',
+  },
+  AccountRegister: {
+    props: accountRegisterPropsSchema,
+    description: 'Registration page with name, email, and password and a link to sign in.',
+  },
+  AccountPanel: {
+    props: accountEmptyPropsSchema,
+    description: 'Minimal signed-in state with the customer name and a logout control.',
+  },
+  AccountOrders: {
+    props: accountOrdersPropsSchema,
+    description:
+      "Signed-in customer's order history rendered by OrderHistory2, with loading, empty, and error states and an inline order detail.",
+  },
+}
+
+export const account: ViewModule = {
+  name: 'account',
+  elements,
+  catalog,
+  registry,
+  route: {
+    path: '/account',
+    loaderName: 'account',
+    layout: 'default',
+    metadata: {
+      title: 'Mi cuenta',
+      description: 'Inicia sesión o crea una cuenta para gestionar tu cuenta.',
+    },
+    entry: pageRoot(
+      'account',
+      ['account.boot', 'account.login', 'account.register', 'account.panel', 'account.orders'],
+      elements,
+    ),
+  },
+  loader: {
+    account: async () => ({ dataSource: getDataSource(), dataError: null }),
+  },
+}