@webround/commerce-react

Gli hook che collegano @webround/commerce ai componenti React (React 19 o successivo). Si limitano a collegare: le regole sono nella logica sotto. Non c'è un Provider: un modulo del sito costruisce lo store una volta e i componenti lo importano.

import { commerce } from '@webround/commerce-react/site'; // lo store di questo sito
import { useShop, useAuth, useCart, useCheckout } from '@webround/commerce-react';

Hook	Cosa dà
useResource(resource)	Qualsiasi domanda al catalogo, come { status, data, error, isFetching, isStale, retry }.
useShop({ catalog, context })	Lo shop: state, actions, storeData, sortOptions, question e results.
useShopAddress({ search, navigate, collectionId?, limit? })	Tiene lo stato dello shop nell'indirizzo, con qualsiasi router. Si usa come useShop({ store: useShopAddress(...) }).
useAuth(commerce.auth)	state, status, customer, challenge e actions (signup, login, verifyTwoFactor, cancelChallenge, logout).
useCart(commerce)	state, count, priced e actions (add, setQuantity, remove, clear, refresh).
useCheckout(commerce)	state, quote e actions (le scelte del cliente, quote, pay, reset, complete).
useAccount, useAddresses	Le richieste del cliente sul suo account e la sua rubrica.
useOrders, useOrder, useSubscriptions, useSubscription	Ciò che il cliente ha comprato, una pagina alla volta.
useReturnRequests, useReturnRequest, useGuestReturnSession(commerce, token)	I resi, per un cliente e per un ospite.
useWishlist(commerce)	count, has(variantId) e toggle.
useMyReviews, useReviewAbility	Le recensioni del cliente, e se può scriverne una (login, verify, allowed).

Un elenco

function Shop() {
  const { state, actions, results } = useShop({
    catalog: commerce.catalog,
    context: { currencyCode: 'EUR', langCode: 'default' },
  });

  if (results.status === 'error') return <button onClick={results.retry}>Riprova</button>;
  return (
    <>
      {results.data?.data.map((product) => <ProductCard key={product.id} product={product} />)}
      <button onClick={() => actions.setPage(state.page + 1)}>Altri</button>
    </>
  );
}

keepPrevious è attivo di base, quindi l'elenco non si svuota a ogni clic: results.isStale dice che i prodotti mostrati sono quelli di prima.

Il cliente e il carrello

const { status, customer, actions } = useAuth(commerce.auth);
await actions.login({ email, password }); // lancia ciò che dice lo store: mostralo nel form

const { count, priced, actions: cart } = useCart(commerce);
cart.add({ variantId, priceId, quantity: 1 });

Il primo componente che si monta riprende il cliente (una volta); un render lato server dice unknown e non chiede niente. Un carrello mostra subito le sue righe (count) e il prezzo dello store quando ce l'ha (priced, con state.isStale se è indietro di una modifica).

Pagare

const { quote, actions } = useCheckout(commerce);

async function pay() {
  const { url } = await actions.pay();
  location.assign(url); // la pagina di pagamento
}

useCheckout chiede l'anteprima da solo quando cambiano il carrello o le scelte del cliente (autoQuote: false lo spegne); un rifiuto è in state.error, non viene lanciato. Nella pagina di successo chiama actions.complete().