salla-gift-card-redeem

Gift card redemption box for the customer wallet page: a card with an "add gift card" button that lets a signed-in customer type a gift card code and add its value to their wallet balance. Used inside salla-wallet, which refreshes the balance and transactions on giftCardRedeemed; a theme rarely places it directly.

It renders nothing for guests, or unless the store has both the wallet-gift-card and giftcard-redemption-form-enabled features. On screens 768px wide or more the code field replaces the card in place; on smaller screens it opens in a bottom sheet modal. Codes are 16 uppercase letters or digits, other characters are removed as the user types, and the activate button stays disabled until 16 characters are entered. Pressing Enter in the field submits. The code is sent with POST wallet/gift-card/redeem; the result is shown in a modal (success with a "shop now" button, or the error reason). Each attempt also dispatches giftcard::redeemed on salla.event with { status: 'success' | 'failed', code }, where the code is masked after its first 4 characters.

Use itCopy Anchor Link

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

import { SallaGiftCardRedeem } from '@salla.sa/twilight-components-react/gift-card-redeem';

ExampleCopy Anchor Link

import { useEffect } from 'react';
import { SallaGiftCardRedeem } from '@salla.sa/twilight-components-react/gift-card-redeem';

export function Example() {
  useEffect(() => {
    document.querySelector('salla-gift-card-redeem')
      .addEventListener('giftCardRedeemed', e => console.log(e.detail.new_balance));
  }, []);

  return (
    <SallaGiftCardRedeem />
  );
}

EventsCopy Anchor Link

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

RelatedCopy Anchor Link

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

Used inside: <salla-wallet>.