# salla-order-branch (https://docs.salla.dev/twilight/react/web-components/salla-order-branch)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

The `salla-order-branch` component renders pickup branch details for thank-you pages.
It reads the order id from the page config (`page.id`), loads the order's pickup branch through the order API and shows the branch name, address, estimated preparation time, phone number, a Google Maps link and working hours.
It renders nothing until the branch data has loaded, and when the order has no branch. API errors are shown as a notification.
Use it only on the order thank-you or order details page, where `page.id` is the order id; it takes no required attributes.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-order-branch>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaOrderBranch } from '@salla.sa/twilight-components-react/order-branch';
```

## Example [#example]

```tsx
import { SallaOrderBranch } from '@salla.sa/twilight-components-react/order-branch';

export function Example() {
  return (
    <SallaOrderBranch />
  );
}
```

```html
<salla-order-branch></salla-order-branch>
```

```tsx
import { SallaOrderBranch } from '@salla.sa/twilight-components-react/order-branch';

export function Example() {
  return (
    <SallaOrderBranch stackCards />
  );
}
```

```html
<salla-order-branch stack-cards></salla-order-branch>
```

## Properties [#properties]

| Property     | Attribute     | Description                                                                                                     | Type      | Default |
| ------------ | ------------- | --------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `stackCards` | `stack-cards` | When true, the branch identity card and the contact card are stacked vertically instead of placed side by side. | `boolean` | `false` |