# Parts: OrderDetailScope to PasskeySignIn (/themes/sdk/reference/customer/parts-2)

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

## `OrderDetailScope` [#orderdetailscope]

Loads one order for the order parts inside; nothing when it is not found.

```ts
OrderDetailScope(props: OrderDetailScopeProps): ReactElement | null
```

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

**Example**

```tsx
import { OrderDetailScope, OrderItems, OrderTotals } from '@poltura/theme-sdk/customer';

export function CompactOrder({ id }: { id: string }) {
  return (
    <OrderDetailScope id={id}>
      <OrderItems />
      <OrderTotals />
    </OrderDetailScope>
  );
}
```

## `OrderSummaryHeader` [#ordersummaryheader]

The order's number, date, status and documents, inside [`OrderDetailScope`](/themes/sdk/reference/customer/parts-2#orderdetailscope).

```ts
OrderSummaryHeader(): ReactElement | null
```

**Example**

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

export function OrderTitle({ id }: { id: string }) {
  return (
    <OrderDetailScope id={id}>
      <OrderSummaryHeader />
    </OrderDetailScope>
  );
}
```

## `OrderItems` [#orderitems]

The order's products with their digital keys and guides, inside [`OrderDetailScope`](/themes/sdk/reference/customer/parts-2#orderdetailscope).

```ts
OrderItems(): ReactElement | null
```

**Example**

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

export function OrderProducts({ id }: { id: string }) {
  return (
    <OrderDetailScope id={id}>
      <OrderItems />
    </OrderDetailScope>
  );
}
```

## `OrderTotals` [#ordertotals]

The order's totals, inside [`OrderDetailScope`](/themes/sdk/reference/customer/parts-2#orderdetailscope).

```ts
OrderTotals(): ReactElement | null
```

**Example**

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

export function OrderSums({ id }: { id: string }) {
  return (
    <OrderDetailScope id={id}>
      <OrderTotals />
    </OrderDetailScope>
  );
}
```

## `OrderReturns` [#orderreturns]

The order's returns and the way to start one, inside [`OrderDetailScope`](/themes/sdk/reference/customer/parts-2#orderdetailscope).

```ts
OrderReturns(): ReactElement | null
```

**Example**

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

export function OrderReturnsPanel({ id }: { id: string }) {
  return (
    <OrderDetailScope id={id}>
      <OrderReturns />
    </OrderDetailScope>
  );
}
```

## `OrderDownloads` [#orderdownloads]

The files a paid order unlocks, inside [`OrderDetailScope`](/themes/sdk/reference/customer/parts-2#orderdetailscope).

```ts
OrderDownloads(): ReactElement | null
```

**Example**

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

export function OrderFiles({ id }: { id: string }) {
  return (
    <OrderDetailScope id={id}>
      <OrderDownloads />
    </OrderDetailScope>
  );
}
```

## `OrderInfo` [#orderinfo]

The order's addresses and methods, inside [`OrderDetailScope`](/themes/sdk/reference/customer/parts-2#orderdetailscope).

```ts
OrderInfo(): ReactElement | null
```

**Example**

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

export function OrderAddresses({ id }: { id: string }) {
  return (
    <OrderDetailScope id={id}>
      <OrderInfo />
    </OrderDetailScope>
  );
}
```

## `MarketingConsentToggle` [#marketingconsenttoggle]

The switch that subscribes the shopper to or unsubscribes them from marketing email, next to the always-on order updates.

```ts
MarketingConsentToggle(props: MarketingConsentToggleProps): ReactElement
```

Subscribing runs the host's double opt-in, so the switch can end up pending until the shopper confirms by email.

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

**Example**

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

export function NotificationSettings() {
  return <MarketingConsentToggle />;
}
```

## `AuthInput` [#authinput]

One field of an auth form: label, icon, input of the right type and autocomplete, and the field's error.

```ts
AuthInput(props: AuthInputProps): ReactElement
```

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

**Example**

```tsx
import { AuthInput, AuthSubmit, useAuthForm } from '@poltura/theme-sdk/customer';

export function SignIn() {
  const form = useAuthForm('signIn');
  return (
    <form onSubmit={(event) => { event.preventDefault(); void form.submit(); }}>
      <AuthInput form={form} field='email' />
      <AuthInput form={form} field='password' />
      <AuthSubmit form={form} />
    </form>
  );
}
```

## `AuthSubmit` [#authsubmit]

The submit button of an auth form, labelled for the form and disabled while it sends.

```ts
AuthSubmit(props: AuthSubmitProps): ReactElement
```

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

**Example**

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

export function SendLink() {
  const form = useAuthForm('magicLink');
  return <AuthSubmit form={form} />;
}
```

## `AuthError` [#autherror]

Why the form did not send, in a notice box; nothing when there is no error.

```ts
AuthError(props: AuthErrorProps): ReactElement | null
```

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

**Example**

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

export function SignInErrors() {
  return <AuthError form={useAuthForm('signIn')} />;
}
```

## `PasskeySignIn` [#passkeysignin]

Passkey sign-in button, for the address typed in the form; nothing without browser support.

```ts
PasskeySignIn(props: PasskeySignInProps): ReactElement | null
```

Asks for the email field first, then opens the browser's passkey prompt; where the browser can, a saved passkey is also offered in the email field's autofill with nothing typed. The host runs the security check, finishes the session and moves on to the page the shopper came from; a prompt the shopper closes leaves the form as it was.

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

**Example**

```tsx
import { AuthInput, AuthSubmit, PasskeySignIn, useAuthForm } from '@poltura/theme-sdk/customer';

export function SignIn() {
  const form = useAuthForm('signIn');
  return (
    <form onSubmit={(event) => { event.preventDefault(); void form.submit(); }}>
      <AuthInput form={form} field='email' />
      <AuthInput form={form} field='password' />
      <AuthSubmit form={form} />
      <PasskeySignIn form={form} />
    </form>
  );
}
```