# salla-bullet-delivery (https://docs.salla.dev/twilight/react/web-components/salla-bullet-delivery)



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

A modal where the customer picks how they get their order: a delivery address (saved, new, or chosen on a map)
or a pickup branch. The choice is saved as the shopper's delivery scope and used to show products available for it.
It only works when the store has the `bullet-delivery-v2` feature and the bullet delivery setting enabled; otherwise it renders nothing,
and in the Salla mobile app it asks the native app to show its own sheet instead.
Themes usually place one instance in the page and let it open itself according to the store's bullet delivery
opening type (`first_visit`, `on_cart_click` or `after_add_to_cart`), or open it with `open()` or the
`salla::bullet-delivery.modal.open.requested` Salla event (optionally with `preselected_address_id` or `preselected_branch_id`).
The `salla::bullet-delivery.modal.close.requested` Salla event closes it.
The pickup tab shows only when the store supports pickup.

## Use it [#use-it]

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

```tsx
import { SallaBulletDelivery } from '@salla.sa/twilight-components-react/bullet-delivery';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaBulletDelivery } from '@salla.sa/twilight-components-react/bullet-delivery';

export function Example() {
  useEffect(() => {
    document.querySelector('salla-bullet-delivery').addEventListener('bulletDeliveryConfirmed', e => {
      console.log(e.detail.type, e.detail.city_id);
    });
  }, []);

  return (
    <>
      <SallaBulletDelivery />
      <button onClick={() => document.querySelector('salla-bullet-delivery').open()}>Choose delivery</button>
    </>
  );
}
```

```html
<salla-bullet-delivery></salla-bullet-delivery>
<button onclick="document.querySelector('salla-bullet-delivery').open()">Choose delivery</button>
<script>
  document.querySelector('salla-bullet-delivery').addEventListener('bulletDeliveryConfirmed', e => {
    console.log(e.detail.type, e.detail.city_id);
  });
</script>
```

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event                     | Description                                                                                                                                                                                                                                                                                                                                                          | Detail                         |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
| `addressCreated`          | Emitted when a new address is saved for the customer. `event.detail` is `{ address }`, the saved address object.                                                                                                                                                                                                                                                     | `AddressCreatedEvent`          |
| `bulletDeliveryClosed`    | Emitted when the modal is closed through `close()`. It carries no `event.detail`.                                                                                                                                                                                                                                                                                    | `void`                         |
| `bulletDeliveryConfirmed` | Emitted when the customer confirms their selection. `event.detail` is the chosen scope: `type` (`address` or `branch`), `country_id`, `country_code`, optional `region_id`, `city_id`, `district_id`, `address_id` or `branch_id`, display details (`address_details` or `branch_details`), plus the `address` (saved address) or `branch` object that was selected. | `BulletDeliveryConfirmedEvent` |
| `headerContextUpdate`     | Emitted after a confirmed selection so the header can show the current location. `event.detail` is `{ type, display_text, country_code, city?, district?, branch_name? }`, where `display_text` is like "Delivering to: Riyadh".                                                                                                                                     | `HeaderContextUpdateEvent`     |

## Methods [#methods]

Call these on the element or a React ref.

### `close() => Promise<HTMLElement>` [#close--promisehtmlelement]

Closes the bullet delivery modal and emits `bulletDeliveryClosed`. It does nothing when a signed-in customer
is on the cart page without a complete delivery choice, because the modal cannot be skipped there.

Returns `Promise<HTMLElement>`: Resolves when the modal is closed.

### `open(silent?: boolean) => Promise<void>` [#opensilent-boolean--promisevoid]

Opens the bullet delivery modal and loads its data (countries, saved addresses or branches). Does nothing if the feature is disabled.
Pass `silent: true` to run the same state/data loading without showing the modal
(used after login so a successful auto-confirm never flashes the saved-addresses list);
the caller is then responsible for revealing the modal if it still needs the customer's input.

| Parameter | Type      | Description                                                                |
| --------- | --------- | -------------------------------------------------------------------------- |
| `silent`  | `boolean` | When `true`, load the data without showing the modal. Defaults to `false`. |

## Related [#related]

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-searchable-dropdown>`](https://docs.salla.dev/twilight/react/web-components/salla-searchable-dropdown), [`<salla-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton), [`<salla-placeholder>`](https://docs.salla.dev/twilight/react/web-components/salla-placeholder), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal).