# Parts: AccountDeletion to OrderLines (/themes/sdk/reference/customer/parts-1)

```ts
import { … } from '@poltura/theme-sdk/customer';
```

## `AccountDeletion` [#accountdeletion]

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

```ts
AccountDeletion(props: AccountSettingsPartProps): ReactElement
```

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

**Props:** [`AccountSettingsPartProps`](/themes/sdk/reference/customer/types-1#accountsettingspartprops)

**Example**

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

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

## `BusinessDetails` [#businessdetails]

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

```ts
BusinessDetails(props: AccountSettingsPartProps): ReactElement | null
```

**Props:** [`AccountSettingsPartProps`](/themes/sdk/reference/customer/types-1#accountsettingspartprops)

**Example**

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

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

## `EmailAddress` [#emailaddress]

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

```ts
EmailAddress(props: AccountSettingsPartProps): ReactElement | null
```

**Props:** [`AccountSettingsPartProps`](/themes/sdk/reference/customer/types-1#accountsettingspartprops)

**Example**

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

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

## `PasswordChange` [#passwordchange]

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

```ts
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`](/themes/sdk/reference/customer/types-1#accountsettingspartprops)

**Example**

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

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

## `PersonalInfoForm` [#personalinfoform]

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

```ts
PersonalInfoForm(props: AccountSettingsPartProps): ReactElement | null
```

**Props:** [`AccountSettingsPartProps`](/themes/sdk/reference/customer/types-1#accountsettingspartprops)

**Example**

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

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

## `AddressCard` [#addresscard]

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

```ts
AddressCard(props: AddressCardProps): ReactElement
```

**Props:** [`AddressCardProps`](/themes/sdk/reference/customer/types-3#addresscardprops)

**Example**

```tsx
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` [#addressform]

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

```ts
AddressForm(props: AddressFormProps): ReactElement
```

**Props:** [`AddressFormProps`](/themes/sdk/reference/customer/types-3#addressformprops)

**Example**

```tsx
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` [#accountnav]

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

```ts
AccountNav(props: AccountNavProps): ReactElement
```

**Props:** [`AccountNavProps`](/themes/sdk/reference/customer/types-3#accountnavprops)

**Example**

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

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

## `OrderCard` [#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.

```ts
OrderCard(props: OrderCardProps): ReactElement
```

**Props:** [`OrderCardProps`](/themes/sdk/reference/customer/types-3#ordercardprops)

**Example**

```tsx
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` [#ordercardskeleton]

A placeholder shaped like [`OrderCard`](/themes/sdk/reference/customer/parts-1#ordercard), for the time the orders load.

```ts
OrderCardSkeleton(props: OrderCardSkeletonProps): ReactElement
```

**Props:** [`OrderCardSkeletonProps`](/themes/sdk/reference/customer/types-3#ordercardskeletonprops)

**Example**

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

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

## `OrderFilters` [#orderfilters]

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

```ts
OrderFilters(props: OrderFiltersProps): ReactElement
```

**Props:** [`OrderFiltersProps`](/themes/sdk/reference/customer/types-3#orderfiltersprops)

**Example**

```tsx
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` [#orderlines]

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

```ts
OrderLines(props: OrderLinesProps): ReactElement
```

Delivering digital keys is part of [`OrderDetail`](/themes/sdk/reference/customer/defaults-2#orderdetail).

**Props:** [`OrderLinesProps`](/themes/sdk/reference/customer/types-3#orderlinesprops)

**Example**

```tsx
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} />;
}
```