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

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

import { SharingPageProduct } from "@frak-labs/core-sdk";
//#region src/components/PostPurchase/types.d.ts
/**
 * Props for the {@link PostPurchase} component.
 * @inline
 */
type PostPurchaseProps = {
  /**
   * Merchant customer ID for purchase tracking fallback.
   * All three tracking props (`customerId`, `orderId`, `token`) must be
   * present for tracking to fire.
   */
  customerId?: string;
  /**
   * Merchant order ID for purchase tracking fallback.
   */
  orderId?: string;
  /**
   * Checkout token for purchase tracking fallback.
   */
  token?: string;
  /**
   * Base URL to share. Falls back to the merchant domain returned by
   * the backend when omitted.
   */
  sharingUrl?: string;
  /**
   * Override the merchant ID resolved from the SDK config.
   */
  merchantId?: string;
  /**
   * Placement ID for backend-driven CSS customization.
   */
  placement?: string;
  /**
   * CSS class names passed through to the root element (Light DOM).
   */
  classname?: string;
  /**
   * Force a display variant instead of relying on the backend evaluation.
   */
  variant?: "referrer" | "referee";
  /**
   * Label for the pill badge displayed above the message.
   * When omitted (and no placement config provides one), the badge is hidden.
   */
  badgeText?: string;
  /**
   * Override the message shown to referrers.
   * Use `{REWARD}` as placeholder for the reward amount.
   */
  referrerText?: string;
  /**
   * Override the message shown to referees.
   * Use `{REWARD}` as placeholder for the reward amount.
   */
  refereeText?: string;
  /**
   * Override the CTA button text.
   * Use `{REWARD}` as placeholder for the reward amount.
   */
  ctaText?: string;
  /**
   * Override the image displayed on the left of the post-purchase card.
   * Accepts an image URL. Falls back to the built-in gift icon when omitted.
   * The image is constrained to the icon slot via `object-fit: contain`,
   * so any aspect ratio renders correctly.
   */
  imageUrl?: string;
  /**
   * Order line items, forwarded to the sharing page as product cards on CTA
   * click, and used to prefer a campaign whose `productScope` matches one of
   * the purchased items when picking the reward to advertise.
   *
   * Accepts a {@link SharingPageProduct} array (JS property) or a
   * JSON-stringified array (HTML attribute, used by server-rendered plugins).
   */
  products?: SharingPageProduct[] | string;
  /**
   * When set, renders the card in preview mode (e.g. Shopify/WP editor).
   * Bypasses the client-ready / RPC gates that normally hide the card
   * until the backend resolves, and no-ops the click handler so merchants
   * can see the final layout with their configured copy.
   */
  preview?: string;
  /**
   * Which variant to show when {@link preview} is set.
   * Defaults to `"referrer"`.
   */
  previewVariant?: "referrer" | "referee";
};
//#endregion
//#region src/components/PostPurchase/PostPurchase.d.ts
/**
 * Post-purchase card component.
 *
 * Renders an inline card on the merchant's thank-you / order-status page
 * that either congratulates a referee or invites a referrer to share.
 *
 * Fetches referral status and merchant information via two independent
 * RPC calls, then computes the display variant locally.
 *
 * @group components
 *
 * @example
 * Minimal — just show the card:
 * ```html
 * <frak-post-purchase></frak-post-purchase>
 * ```
 *
 * @example
 * With purchase tracking fallback and custom sharing URL:
 * ```html
 * <frak-post-purchase
 *   customer-id="cust_123"
 *   order-id="ord_456"
 *   token="checkout_abc"
 *   sharing-url="https://merchant.com/product/shoes"
 * ></frak-post-purchase>
 * ```
 */
declare function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, placement: placementId, classname, variant: forcedVariant, badgeText: propBadgeText, referrerText: propReferrerText, refereeText: propRefereeText, ctaText: propCtaText, preview, previewVariant, products, imageUrl: propImageUrl }: PostPurchaseProps): import("preact").JSX.Element | null;
//#endregion
//#region src/components/PostPurchase/index.d.ts
/**
 * Custom element interface for `<frak-post-purchase>`.
 * Combines standard {@link HTMLElement} with {@link PostPurchaseProps}.
 */
interface PostPurchaseElement extends HTMLElement, PostPurchaseProps {}
declare global {
  interface HTMLElementTagNameMap {
    "frak-post-purchase": PostPurchaseElement;
  }
}
//#endregion
export { PostPurchase, PostPurchaseElement };