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



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

Modal that lets the customer choose the store scope (a branch or market) they are shopping from, or see a product's availability across scopes. Use it once in the theme layout and open it from a button or link.
Open it with the `open()` method or by firing the `scopes::open` event, for example `salla.event.dispatch('scopes::open', { mode: 'availability', product_id: 123 })`.
With `selection="mandatory"` the modal opens automatically on load until the customer has chosen a scope once, and it cannot be closed before that.
Inside the native app webview the component renders nothing and hands scope selection to the app.

## Use it [#use-it]

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

```tsx
import { SallaScopes } from '@salla.sa/twilight-components-react/scopes';
```

**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 { SallaScopes } from '@salla.sa/twilight-components-react/scopes';

export function Example() {
  return (
    <SallaScopes selection="mandatory" searchDisplayLimit={8} />
  );
}
```

```html
<salla-scopes selection="mandatory" search-display-limit="8"></salla-scopes>
```

## Properties [#properties]

| Property             | Attribute              | Description                                                                                                                                       | Type                        | Default      |
| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ------------ |
| `searchDisplayLimit` | `search-display-limit` | Shows the search field only when the number of scopes is greater than this value (a count of scopes, default 6).                                  | `number`                    | `6`          |
| `selection`          | `selection`            | `optional` lets the customer close the modal. `mandatory` opens it automatically on load and prevents closing until a scope has been chosen once. | `"mandatory" \| "optional"` | `'optional'` |

## Methods [#methods]

Call these on the element or a React ref.

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

Closes the scope modal.

Returns `Promise<HTMLElement>`: A Promise that resolves when the modal has closed.

### `handleSubmit() => Promise<any>` [#handlesubmit--promiseany]

Changes the store scope to the one currently selected in the list, then reloads the page with a `scope` URL parameter and resets the cart. Used by the default confirm button.

Returns `Promise<any>`: A Promise that resolves when the change request has finished.

### `open(mode?: any, product_id?: number) => Promise<any>` [#openmode-any-product_id-number--promiseany]

Opens the scope modal and loads the scopes (cached after the first load for each mode). Inside the native app it opens the app's own scope sheet instead.

| Parameter    | Type     | Description                                                                                                                            |
| ------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `mode`       | `any`    | `default` lists scopes to switch to, `availability` shows a product's availability per scope. Any other value is treated as `default`. |
| `product_id` | `number` | The product id to check; used only with the `availability` mode.                                                                       |

Returns `Promise<any>`: A Promise that resolves once the scopes have loaded.

## Slots [#slots]

| Slot     | Description                                                                                                       |
| -------- | ----------------------------------------------------------------------------------------------------------------- |
| `footer` | The bottom section of the component, used for form action. Utilizes the `handleSubmit` method to submit the form. |

## Related [#related]

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