Developers
Start building
Themes/Theme SDK/Modules/customer/Hooks

Hooks

The hooks of @poltura/theme-sdk/customer.

On this page
import { … } from '@poltura/theme-sdk/customer';

useCustomer

The signed-in shopper and the way out.

useCustomer(): CustomerState

Signing out clears the shopper's session, cart and account data.

Returns: The customer, or null for a guest; the status; and the sign-out action.

Example

import { useCustomer } from '@poltura/theme-sdk/customer';

export function Greeting() {
  const { customer, signOut } = useCustomer();
  if (customer === null) return null;
  return <button onClick={() => void signOut()}>Sign out {customer.displayName}</button>;
}

useAccount

The account area's shell: the shopper and the account navigation, including installed apps' and store features' pages.

useAccount(): AccountView

Reads the account template, so it works inside the account section only.

Returns: The shopper, the navigation in order and whether the shopper is signed in.

Example

import { AccountNav, useAccount } from '@poltura/theme-sdk/customer';

export function AccountLinks() {
  const { navigation } = useAccount();
  return <AccountNav items={navigation} />;
}

useOrders

One page of the signed-in shopper's order history, newest first.

useOrders(request?: OrdersRequest): QueryResult<OrderPage>

The status filter keeps the matching orders among the requested page's, so a filtered page can hold fewer than limit orders.

Parameters

  • request?: OrdersRequest: The page, its size and a status filter; the first page of every order by default.

Returns: The page once it loads, the read's status and a refetch.

Example

import { OrderCard, useOrders } from '@poltura/theme-sdk/customer';

export function OrderHistory() {
  const { data } = useOrders({ limit: 5 });
  return <div>{data?.items.map((order) => <OrderCard key={order.id} order={order} />)}</div>;
}

useAddresses

The signed-in shopper's address book with the actions that change it.

useAddresses(): AddressBookState

Returns: The addresses, their status and the actions that add, change, delete and pick defaults.

Example

import { useAddresses } from '@poltura/theme-sdk/customer';

export function AddressCount() {
  const { addresses } = useAddresses();
  return <span>{addresses.length}</span>;
}

useOrder

One of the signed-in shopper's orders.

useOrder(by: {
    readonly id: string;
}): OrderState

Parameters

  • by: { readonly id: string; }: The order's id.

Returns: The order once it loads, or null when the shopper has no such order.

Example

import { useOrder } from '@poltura/theme-sdk/customer';

export function OrderNumber({ id }: { id: string }) {
  const { order } = useOrder({ id });
  return <span>{order?.number ?? ''}</span>;
}

useAuthForm

The state of a sign-in, registration or password form, for a theme that draws the form itself.

useAuthForm(mode: AuthMode): AuthFormState

The host runs the captcha, the session and the redirect; signing in and registering emit the login and sign-up events. Registering sends the shopper on to the sign-in page with the company details BusinessSignUpFields collected, the magicLink mode emails a one-time sign-in link, and a new password shows a confirmation and moves on to the sign-in page.

Parameters

  • mode: AuthMode: Which form it drives; resetting a password reads its token from the address.

Returns: The fields, values, errors and submit.

Example

import { useAuthForm } from '@poltura/theme-sdk/customer';

export function ForgotPassword() {
  const form = useAuthForm('forgotPassword');
  if (form.status === 'done') return <p>Check your inbox.</p>;
  return (
    <form onSubmit={(event) => { event.preventDefault(); void form.submit(); }}>
      <input value={form.values.email} onChange={(event) => form.setValue('email', event.target.value)} />
      {form.error === null ? null : <p>{form.error}</p>}
      <button disabled={form.status === 'submitting'}>Send</button>
    </form>
  );
}

useEmailCodeStep

The state of the verify page, for a theme that draws the step of an emailed code itself.

useEmailCodeStep(): EmailCodeStepState

Works inside the verify page's main section only. The host keeps the step and the code in this browser's cookie, never in the page; a sign-up asks for its password here, and a password reset moves on to the new-password page.

Returns: The phase, the values, the error and submit.

Example

import { useEmailCodeStep } from '@poltura/theme-sdk/customer';

export function VerifyCode() {
  const step = useEmailCodeStep();
  if (step.phase === 'expired') return <p>This link no longer works.</p>;
  return (
    <form onSubmit={(event) => { event.preventDefault(); void step.submit(); }}>
      {step.phase === 'code' ? (
        <input value={step.values.code} onChange={(event) => step.setValue('code', event.target.value)} />
      ) : null}
      {step.error === null ? null : <p>{step.error}</p>}
      <button disabled={step.busy}>Continue</button>
    </form>
  );
}
Last updated