Developers
Start building
Themes/Theme SDK/Modules/customer/Parts: AccountDeletion to OrderLines

Parts: AccountDeletion to OrderLines

The parts of @poltura/theme-sdk/customer, AccountDeletion to OrderLines.

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

AccountDeletion

The account deletion card: what deleting means and the button that asks for it after a confirmation dialog.

AccountDeletion(props: AccountSettingsPartProps): ReactElement

The request runs behind the host's captcha; the store deletes the account after reviewing it.

Props: AccountSettingsPartProps

Example

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

export function DangerZone() {
  return <AccountDeletion />;
}

BusinessDetails

The shopper's company details, tier and applications under their own heading; nothing for a consumer-only store and shopper.

BusinessDetails(props: AccountSettingsPartProps): ReactElement | null

Props: AccountSettingsPartProps

Example

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

export function CompanySettings() {
  return <BusinessDetails />;
}

EmailAddress

The shopper's sign-in email address; nothing until the shopper loads.

EmailAddress(props: AccountSettingsPartProps): ReactElement | null

Props: AccountSettingsPartProps

Example

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

export function SignInEmail() {
  return <EmailAddress className='rounded-lg border p-6' />;
}

PasswordChange

The shopper's password, changed in place or through an emailed link, and the passkeys that sign in without it.

PasswordChange(props: AccountSettingsPartProps): ReactElement

The emailed link runs behind the host's captcha. The passkeys card shows only in a browser that supports passkeys.

Props: AccountSettingsPartProps

Example

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

export function Security() {
  return <PasswordChange />;
}

PersonalInfoForm

The shopper's name and phone number, changed in place; nothing until the shopper loads.

PersonalInfoForm(props: AccountSettingsPartProps): ReactElement | null

Props: AccountSettingsPartProps

Example

import { EmailAddress, PersonalInfoForm } from '@poltura/theme-sdk/customer';

export function Contact() {
  return (
    <div className='space-y-6'>
      <PersonalInfoForm />
      <EmailAddress />
    </div>
  );
}

AddressCard

A saved address: personal or company, the recipient, the address lines, the phone and its default badges.

AddressCard(props: AddressCardProps): ReactElement

Props: AddressCardProps

Example

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

export function SavedAddresses() {
  const { addresses } = useAddresses();
  return <div>{addresses.map((address) => <AddressCard key={address.id} address={address} />)}</div>;
}

AddressForm

The address fields in the page language's name order, limited to the countries the store sells to, with a company tax id.

AddressForm(props: AddressFormProps): ReactElement

Props: AddressFormProps

Example

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

export function NewAddress({ onDone }: { onDone: () => void }) {
  const { add, isBusy } = useAddresses();
  return (
    <AddressForm
      submitting={isBusy}
      onCancel={onDone}
      onSubmit={async (input) => {
        const result = await add(input);
        if (result.ok) onDone();
      }}
    />
  );
}

AccountNav

The account navigation as a grid of cards: an icon for the kind of page, its name and a line about it.

AccountNav(props: AccountNavProps): ReactElement

Props: AccountNavProps

Example

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

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

OrderCard

An order in a list: its number, status badge, date, product count, amount due, a preview of the products and a link to its page.

OrderCard(props: OrderCardProps): ReactElement

Props: OrderCardProps

Example

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

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

OrderCardSkeleton

A placeholder shaped like OrderCard, for the time the orders load.

OrderCardSkeleton(props: OrderCardSkeletonProps): ReactElement

Props: OrderCardSkeletonProps

Example

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

export function OrdersLoading() {
  const { status } = useOrders();
  return status === 'pending' ? <OrderCardSkeleton /> : null;
}

OrderFilters

Buttons that narrow the order list to all orders or one status.

OrderFilters(props: OrderFiltersProps): ReactElement

Props: OrderFiltersProps

Example

import { useState } from 'react';
import { OrderCard, OrderFilters, useOrders, type OrderStatusFilter } from '@poltura/theme-sdk/customer';

export function FilteredOrders() {
  const [status, setStatus] = useState<OrderStatusFilter>('all');
  const { data } = useOrders({ status });
  return (
    <div>
      <OrderFilters value={status} onChange={setStatus} />
      {data?.items.map((order) => <OrderCard key={order.id} order={order} />)}
    </div>
  );
}

OrderLines

The products of an order in a table: image, name, variant, quantity and line total.

OrderLines(props: OrderLinesProps): ReactElement

Delivering digital keys is part of OrderDetail.

Props: OrderLinesProps

Example

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

export function OrderProducts({ id }: { id: string }) {
  const { order } = useOrder({ id });
  return order === null ? null : <OrderLines lines={order.lines} />;
}
Last updated