salla-loyalty-program

The full loyalty program page content: a hero with the customer's points (or a login button for guests), a "how to start" section, the ways to earn points, and the rewards that can be redeemed, grouped into tabs. Use it once on the theme's loyalty program page; it has no props and loads everything from the store's loyalty program. Clicking a reward opens a details modal, and redeeming opens an exchange modal. Points and rewards reload after the loyalty::exchange.succeeded event. A guest's login button dispatches login::open. If loading the program fails, a short error message is shown instead.

Use itCopy Anchor Link

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

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

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 { SallaLoyaltyProgram } from '@salla.sa/twilight-components-react/loyalty-program';

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

RelatedCopy Anchor Link

Renders: <salla-loyalty-hero>, <salla-button>, <salla-loyalty-point>, <salla-tabs>, <salla-tab-header>, <salla-tab-content>, <salla-slider>, <salla-reward-card>, <salla-modal>, <salla-reward-details>, <salla-reward-exchange>.