salla-loyalty-point

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

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

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

ExampleCopy Anchor Link

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

PropertiesCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-badge>, <salla-modal>.

Used inside: <salla-loyalty-program>.