salla-bullet-delivery

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 itCopy Anchor Link

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

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.

ExampleCopy Anchor Link

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>
    </>
  );
}

EventsCopy Anchor Link

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

MethodsCopy Anchor Link

Call these on the element or a React ref.

close() => Promise<HTMLElement>Copy Anchor Link

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>Copy Anchor Link

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.

RelatedCopy Anchor Link

Renders: <salla-button>, <salla-searchable-dropdown>, <salla-skeleton>, <salla-placeholder>, <salla-modal>.