Fejlesztőknek
Kezdj bele
Témák/Theme SDK/Modules/customer/Parts: OrderDetailScope to PasskeySignIn

Parts: OrderDetailScope to PasskeySignIn

Ez az oldal még csak angolul érhető el.

The parts of @poltura/theme-sdk/customer, OrderDetailScope to PasskeySignIn.

Ezen az oldalon
import { … } from '@poltura/theme-sdk/customer';

OrderDetailScope

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

OrderDetailScope(props: OrderDetailScopeProps): ReactElement | null

Props: OrderDetailScopeProps

Example

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

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

OrderSummaryHeader

The order's number, date, status and documents, inside OrderDetailScope.

OrderSummaryHeader(): ReactElement | null

Example

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

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

OrderItems

The order's products with their digital keys and guides, inside OrderDetailScope.

OrderItems(): ReactElement | null

Example

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

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

OrderTotals

The order's totals, inside OrderDetailScope.

OrderTotals(): ReactElement | null

Example

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

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

OrderReturns

The order's returns and the way to start one, inside OrderDetailScope.

OrderReturns(): ReactElement | null

Example

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

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

OrderDownloads

The files a paid order unlocks, inside OrderDetailScope.

OrderDownloads(): ReactElement | null

Example

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

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

OrderInfo

The order's addresses and methods, inside OrderDetailScope.

OrderInfo(): ReactElement | null

Example

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

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

MarketingConsentToggle

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

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

Example

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

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

AuthInput

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

AuthInput(props: AuthInputProps): ReactElement

Props: AuthInputProps

Example

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

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

AuthSubmit(props: AuthSubmitProps): ReactElement

Props: AuthSubmitProps

Example

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

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

AuthError

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

AuthError(props: AuthErrorProps): ReactElement | null

Props: AuthErrorProps

Example

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

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

PasskeySignIn

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

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

Example

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>
  );
}
Utoljára frissítve