@frak-labs/components/dist/buttonShare.d.ts

Frak Wallet components, helping any person to interact with the Frak wallet.

import { InteractionTypeKey, SharingPageProduct } from "@frak-labs/core-sdk";
//#region src/components/ButtonShare/types.d.ts
/**
 * The props type for {@link ButtonShare}.
 * @inline
 */
type ButtonShareProps = {
  placement?: string;
  /**
   * Text to display on the button.
   *
   * Including the placeholder `{REWARD}` (e.g. `Share and earn up to \{REWARD\}!`)
   * opts the button into the live reward flow: the SDK fetches the
   * estimated reward and substitutes the placeholder. When no reward is
   * available, `noRewardText` is used as a fallback (or the placeholder is
   * stripped if no fallback is provided).
   *
   * When omitted, a built-in localized default is used based on the
   * resolved language (`"Share & earn {REWARD}!"` / `"Partagez et gagnez
   * {REWARD} !"`) — mirroring the dashboard's first wording preset.
   */
  text?: string;
  /**
   * Classname to apply to the button
   */
  classname?: string;
  /**
   * Fallback text when `text` contains the `{REWARD}` placeholder but no
   * reward is available.
   */
  noRewardText?: string;
  /**
   * Target interaction behind this sharing action (will be used to get the right reward to display)
   */
  targetInteraction?: InteractionTypeKey;
  /**
   * Products currently in view, used to prefer a campaign whose
   * `productScope` matches one of them when picking the reward to advertise,
   * and forwarded to the sharing page so it can render product cards.
   *
   * Accepts a {@link SharingPageProduct} array (JS property) or a
   * JSON-stringified array (HTML attribute).
   */
  products?: SharingPageProduct[] | string;
  /**
   * Which UI to open on click.
   *
   * Legacy values (e.g. `"share-modal"`) are accepted at runtime and
   * gracefully route to the full-page sharing UI — the modal-flow
   * share path was retired in favour of `displaySharingPage`.
   *
   * @defaultValue `"sharing-page"`
   */
  clickAction?: "embedded-wallet" | "sharing-page";
  /**
   * When set, renders the button in preview mode (e.g. Shopify/WP editor).
   * Skips the client-ready gating so the button is always enabled visually,
   * and no-ops the click handler so merchants can see the final layout with
   * their configured copy even when no Frak client is initialized.
   */
  preview?: string;
};
//#endregion
//#region src/components/ButtonShare/ButtonShare.d.ts
/**
 * Button to share the current page
 *
 * @param args
 * @returns The share button with `<button>` tag
 *
 * @group components
 *
 * @example
 * Basic usage:
 * ```html
 * <frak-button-share></frak-button-share>
 * ```
 *
 * @example
 * Using a custom text:
 * ```html
 * <frak-button-share text="Share and earn!"></frak-button-share>
 * ```
 *
 * @example
 * Using a custom class:
 * ```html
 * <frak-button-share classname="button button-primary"></frak-button-share>
 * ```
 *
 * @example
 * Embedding the live reward amount. Include `{REWARD}` in `text` and the
 * SDK fetches + substitutes the estimated reward at render time. Provide
 * `no-reward-text` as a fallback when no reward is available:
 * ```html
 * <frak-button-share text="Share and earn up to {REWARD}!" no-reward-text="Share and earn!"></frak-button-share>
 * ```
 *
 * @example
 * Same as above, scoped to a specific interaction type so the reward
 * estimate matches that flow:
 * ```html
 * <frak-button-share text="Share and earn up to {REWARD}!" no-reward-text="Share and earn!" target-interaction="custom.customerMeeting"></frak-button-share>
 * ```
 *
 * @example
 * On a product page, pass the displayed product(s) so a matching
 * `productScope`d campaign is preferred and the sharing page can render product
 * cards:
 * ```html
 * <frak-button-share text="Share and earn up to {REWARD}!" products='[{"title":"Shoes","sku":"SHOE-42","unitPrice":79.90}]'></frak-button-share>
 * ```
 *
 * @see {@link @frak-labs/core-sdk!actions.displaySharingPage | `displaySharingPage()`} for more info about the sharing-page flow
 * @see {@link @frak-labs/core-sdk!actions.getMerchantInformation | `getMerchantInformation()`} for more info about the estimated reward fetching
 */
declare function ButtonShare({ placement: placementId, text, classname, noRewardText, targetInteraction, products, clickAction: rawClickAction, preview }: ButtonShareProps): import("preact").JSX.Element | null;
//#endregion
//#region src/components/ButtonShare/index.d.ts
/**
 * Custom element interface for `<frak-button-share>`.
 * Combines standard {@link HTMLElement} with {@link ButtonShareProps}.
 */
interface ButtonShareElement extends HTMLElement, ButtonShareProps {}
declare global {
  interface HTMLElementTagNameMap {
    "frak-button-share": ButtonShareElement;
  }
}
//#endregion
export { ButtonShare, ButtonShareElement };