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



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

<Callout title="Used inside salla-loyalty">
  [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty) renders this component for you. You rarely use it directly.
</Callout>

One way to earn loyalty points (for example share the store, complete the profile, rate an order), shown as a row with its icon,
points badge, name and an action link. Clicking the row opens a popup with the steps, conditions and branches of that rule.
Used inside salla-loyalty-program; a theme rarely places it directly.
The action link shows `point.description`, or "Completed" when `point.is_completed` is true. For types `profile`, `rating` and `share`,
a guest is sent to the login popup. For `share` the link shares or copies `point.url` instead of navigating; other types go to `point.url`.

## Use it [#use-it]

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

```tsx
import { SallaLoyaltyPoint } from '@salla.sa/twilight-components-react/loyalty-point';
```

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaLoyaltyPoint } from '@salla.sa/twilight-components-react/loyalty-point';

export function Example() {
  useEffect(() => {
    const el = document.querySelector('#point');
    el.point = {
      type: 'share', name: 'Share the store', description: 'Share now', points: 20,
      icon: 'sicon-share-alt', url: 'https://example.com/?ref=abc', is_completed: false, conditions: []
    };
  }, []);

  return (
    <SallaLoyaltyPoint id="point" />
  );
}
```

```html
<salla-loyalty-point id="point"></salla-loyalty-point>
<script>
  const el = document.querySelector('#point');
  el.point = {
    type: 'share', name: 'Share the store', description: 'Share now', points: 20,
    icon: 'sicon-share-alt', url: 'https://example.com/?ref=abc', is_completed: false, conditions: []
  };
</script>
```

## Properties [#properties]

| Property | Attribute | Description                                                                                                                                                                                                                                                                                      | Type    | Default |
| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | ------- |
| `point`  | `point`   | The points rule to show, set as a JS property. Used fields: `type`, `name`, `description` (the action link text), `points`, `icon` (a CSS icon class), `url`, `is_completed`, `conditions` (an array; optional), and optional `steps` and `branches`. It must be set, otherwise rendering fails. | `Point` |         |

## Related [#related]

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

Used inside: [`<salla-loyalty-program>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-program).