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



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

Shows the estimated delivery message for the current product with the delivery city, and lets the customer change
the city. Place it on a product page. It takes no props: the product is the current page id, and the message text
comes from the store's API.

It renders nothing unless the store has the `delivery-promises` feature enabled and, in the default flow, the product has delivery
cities. Clicking the header opens a city search modal. When the store uses the delivery location dialog instead, clicking
the header emits the `salla::bullet-delivery.modal.open.requested` SDK event and the message updates when
the `bulletDeliveryConfirmed` window event fires.

## Use it [#use-it]

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

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

## Example [#example]

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

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

```html
<salla-delivery-promise></salla-delivery-promise>
```

## Related [#related]

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