@frak-labs/components 0.0.26-beta.06c52c98 → 0.0.26-beta.1c24fe7c

package/cdn/useLightDomStyles.D895e4W1.js

@@ -0,0 +1 @@
+import{t as e}from"./loader.js";import{a as t,u as n}from"./jsxRuntime.module.5UNmmhNi.js";function r(r,i,a,o){n(()=>{e.injectBase(r,o??t)},[r]),n(()=>{!i||!a||e.injectPlacement(r,i,a)},[r,i,a])}export{r as t};

package/cdn/useReward.DEU0AF3P.js

@@ -0,0 +1 @@
+import{_ as e,b as t,l as n}from"./loader.js";import{c as r,u as i}from"./jsxRuntime.module.5UNmmhNi.js";import{t as a}from"./formatReward.C8hlSKRj.js";function o(e,t){switch(e.payoutType){case`fixed`:return e.amount[t];case`tiered`:return e.tiers.reduce((e,n)=>Math.max(e,n.amount[t]),0);case`percentage`:return 0}}function s({rewards:n},r,i){let s=(i?n.filter(e=>e.interactionTypeKey===i):n).map(e=>e.referrer).filter(e=>e!==void 0);if(s.length===0)return;let c=t(e(r)),l=s[0],u=o(l,c);for(let e=1;e<s.length;e++){let t=o(s[e],c);t>u&&(l=s[e],u=t)}if(u<=0){let e=s.find(e=>e.payoutType===`percentage`);if(!e)return;l=e}return a(l,r)}function c(e,t){let[a,o]=r(void 0);return i(()=>{if(!e)return;let r=window.FrakSetup?.client;r&&n(r).then(e=>{let n=r.config.metadata?.currency,i=s(e,n,t);i&&o(i)}).catch(()=>{})},[e,t]),{reward:a}}export{c as t};

package/cdn/useShareModal.CN9_P7Sl.js

@@ -0,0 +1 @@
+import{C as e,S as t,u as n,v as r,w as i}from"./loader.js";import{c as a,l as o}from"./jsxRuntime.module.5UNmmhNi.js";function s(s,c,l){let[u,d]=a(void 0),[f,p]=a(!1);return{handleShare:o(async()=>{if(!window.FrakSetup?.client){console.error(`Frak client not found`),d(r.empty().formatDebugInfo(`Frak client not found`)),p(!0);return}let a=n(window.FrakSetup.client,{});try{await a.sharing(l?{link:l}:{}).display(e=>({...e,targetInteraction:s}),c)}catch(n){if(n instanceof i&&n.code===e.clientAborted){console.debug(`User aborted the modal`);return}let r=window.FrakSetup.client.debugInfo.formatDebugInfo(n);t(window.FrakSetup.client,`share_modal_error`,{error:n instanceof Object&&`message`in n?n.message:`Unknown error`,debugInfo:r}),d(r),p(!0),console.error(`Error while opening the modal`,n)}},[s,c,l]),isError:f,debugInfo:u}}export{s as t};

package/dist/banner.d.ts

@@ -0,0 +1,73 @@
+import { InteractionTypeKey } from "@frak-labs/core-sdk";
+import * as preact from "preact";
+
+//#region src/components/Banner/types.d.ts
+/**
+ * The props type for {@link Banner}.
+ * @inline
+ */
+type BannerProps = {
+  /**
+   * Placement ID for backend-driven CSS customization.
+   */
+  placement?: string;
+  /**
+   * CSS class names passed through to the root element (Light DOM).
+   */
+  classname?: string;
+  /**
+   * Filter rewards by interaction type (e.g. "purchase", "referral").
+   * When omitted, the best reward across all interaction types is shown.
+   */
+  interaction?: InteractionTypeKey;
+};
+//#endregion
+//#region src/components/Banner/Banner.d.ts
+/**
+ * Auto-detecting notification banner component.
+ *
+ * Renders an inline banner on the merchant page that auto-detects which
+ * message to display:
+ *
+ * - **Referral mode**: Shown after successful referral link processing.
+ *   Displays reward info and a dismiss button ("Got it").
+ * - **In-app browser mode**: Shown when the page is opened inside a social
+ *   media in-app browser (Instagram, Facebook). Offers a redirect to the
+ *   default browser.
+ *
+ * In-app browser mode takes priority over referral mode.
+ * Uses Light DOM to inherit merchant page styles.
+ *
+ * @group components
+ *
+ * @example
+ * Basic usage (auto-detects mode):
+ * ```html
+ * <frak-banner></frak-banner>
+ * ```
+ *
+ * @example
+ * With a custom class:
+ * ```html
+ * <frak-banner classname="my-custom-banner"></frak-banner>
+ * ```
+ */
+declare function Banner({
+  placement: placementId,
+  classname,
+  interaction
+}: BannerProps): preact.JSX.Element | null;
+//#endregion
+//#region src/components/Banner/index.d.ts
+/**
+ * Custom element interface for `<frak-banner>`.
+ * Combines standard {@link HTMLElement} with {@link BannerProps}.
+ */
+interface BannerElement extends HTMLElement, BannerProps {}
+declare global {
+  interface HTMLElementTagNameMap {
+    "frak-banner": BannerElement;
+  }
+}
+//#endregion
+export { Banner, BannerElement };

package/dist/banner.js

@@ -0,0 +1,171 @@
+import { a as useClientReady, n as bannerBaseCss, o as registerWebComponent, t as usePlacement } from "./usePlacement-BbMuz8_A.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-DukxuNnJ.js";
+import { t as useReward } from "./useReward-CI2yRrCj.js";
+import { isInAppBrowser, redirectToExternalBrowser } from "@frak-labs/core-sdk";
+import { REFERRAL_SUCCESS_EVENT } from "@frak-labs/core-sdk/actions";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
+import { jsx, jsxs } from "preact/jsx-runtime";
+
+//#region src/components/Banner/Banner.tsx
+/**
+* Reward/gift icon for referral mode.
+*/
+function RewardIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "3",
+				y: "11",
+				width: "18",
+				height: "11",
+				rx: "1"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 11v11" }),
+			/* @__PURE__ */ jsx("rect", {
+				x: "5",
+				y: "7",
+				width: "14",
+				height: "4",
+				rx: "1"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 7c0 0-1.5-4-4.5-4S5 5 7.5 7" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 7c0 0 1.5-4 4.5-4S19 5 16.5 7" })
+		]
+	});
+}
+/**
+* External link icon for in-app browser mode.
+*/
+function BrowserIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
+			/* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+			/* @__PURE__ */ jsx("line", {
+				x1: "10",
+				y1: "14",
+				x2: "21",
+				y2: "3"
+			})
+		]
+	});
+}
+/**
+* Auto-detecting notification banner component.
+*
+* Renders an inline banner on the merchant page that auto-detects which
+* message to display:
+*
+* - **Referral mode**: Shown after successful referral link processing.
+*   Displays reward info and a dismiss button ("Got it").
+* - **In-app browser mode**: Shown when the page is opened inside a social
+*   media in-app browser (Instagram, Facebook). Offers a redirect to the
+*   default browser.
+*
+* In-app browser mode takes priority over referral mode.
+* Uses Light DOM to inherit merchant page styles.
+*
+* @group components
+*
+* @example
+* Basic usage (auto-detects mode):
+* ```html
+* <frak-banner></frak-banner>
+* ```
+*
+* @example
+* With a custom class:
+* ```html
+* <frak-banner classname="my-custom-banner"></frak-banner>
+* ```
+*/
+function Banner({ placement: placementId, classname = "", interaction }) {
+	const placement = usePlacement(placementId);
+	const { shouldRender, isHidden, isClientReady } = useClientReady();
+	useLightDomStyles("frak-banner", placementId, placement?.components?.banner?.css, bannerBaseCss);
+	const [dismissed, setDismissed] = useState(false);
+	const [mode, setMode] = useState(() => isInAppBrowser ? "inapp" : null);
+	const { reward } = useReward(mode === "referral" && isClientReady, interaction);
+	useEffect(() => {
+		if (mode === "inapp") return;
+		const handler = () => setMode("referral");
+		window.addEventListener(REFERRAL_SUCCESS_EVENT, handler);
+		return () => window.removeEventListener(REFERRAL_SUCCESS_EVENT, handler);
+	}, [mode]);
+	const handleAction = useCallback(() => {
+		if (mode === "referral") setDismissed(true);
+		else redirectToExternalBrowser(window.location.href);
+	}, [mode]);
+	const bannerConfig = placement?.components?.banner;
+	const texts = useMemo(() => {
+		if (mode === "referral") {
+			const defaultTitle = reward ? `Earn ${reward} on purchases on this site` : "You've been referred!";
+			return {
+				title: bannerConfig?.referralTitle ?? defaultTitle,
+				description: bannerConfig?.referralDescription ?? "Earn rewards after your purchase via the Frak partner app.",
+				cta: bannerConfig?.referralCta ?? "Got it"
+			};
+		}
+		return {
+			title: bannerConfig?.inappTitle ?? "Open in your browser",
+			description: bannerConfig?.inappDescription ?? "For a better experience and to earn your rewards, open this page in your default browser.",
+			cta: bannerConfig?.inappCta ?? "Open browser"
+		};
+	}, [
+		mode,
+		reward,
+		bannerConfig
+	]);
+	if (!shouldRender || isHidden || dismissed || !mode) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		class: [
+			"banner",
+			"banner__fadeIn",
+			classname
+		].filter(Boolean).join(" "),
+		role: "alert",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				class: "banner__icon",
+				children: mode === "referral" ? /* @__PURE__ */ jsx(RewardIcon, {}) : /* @__PURE__ */ jsx(BrowserIcon, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				class: "banner__content",
+				children: [/* @__PURE__ */ jsx("p", {
+					class: "banner__title",
+					children: texts.title
+				}), /* @__PURE__ */ jsx("p", {
+					class: "banner__description",
+					children: texts.description
+				})]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				class: "banner__cta",
+				onClick: handleAction,
+				children: texts.cta
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/Banner/index.ts
+registerWebComponent(Banner, "frak-banner", ["placement", "classname"], { shadow: false });
+
+//#endregion
+export { Banner };

package/dist/buttonShare.d.ts

@@ -35,7 +35,7 @@ type ButtonShareProps = {
    * Which UI to open on click
    * @defaultValue `"embedded-wallet"`
    */
-  clickAction?: "embedded-wallet" | "share-modal";
+  clickAction?: "embedded-wallet" | "share-modal" | "sharing-page";
 };
 //#endregion
 //#region src/components/ButtonShare/ButtonShare.d.ts

package/dist/buttonShare.js

@@ -1,12 +1,22 @@
-import { a as registerWebComponent, i as useClientReady, s as openEmbeddedWallet, t as usePlacement } from "./usePlacement-DD1NUBps.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-C029nIFk.js";
-import { t as useReward } from "./useReward-DAkT-7wT.js";
-import { DebugInfoGatherer, trackEvent } from "@frak-labs/core-sdk";
-import { modalBuilder } from "@frak-labs/core-sdk/actions";
+import { a as useClientReady, c as openEmbeddedWallet, o as registerWebComponent, t as usePlacement } from "./usePlacement-BbMuz8_A.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-DukxuNnJ.js";
+import { t as useReward } from "./useReward-CI2yRrCj.js";
+import { t as useShareModal } from "./useShareModal-DHlayNqk.js";
+import { trackEvent } from "@frak-labs/core-sdk";
+import { displaySharingPage } from "@frak-labs/core-sdk/actions";
 import { useCallback, useMemo, useState } from "preact/hooks";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import { FrakRpcError, RpcErrorCodes } from "@frak-labs/frame-connector";
 
+//#region src/utils/sharingPage.ts
+async function openSharingPage(targetInteraction, placement) {
+	if (!window.FrakSetup?.client) {
+		console.error("Frak client not found");
+		return;
+	}
+	await displaySharingPage(window.FrakSetup.client, { metadata: { ...targetInteraction && { targetInteraction } } }, placement);
+}
+
+//#endregion
 //#region src/hooks/useCopyToClipboard.ts
 function useCopyToClipboard(options = {}) {
 	const { successDuration = 2e3 } = options;
@@ -159,51 +169,6 @@ function ErrorMessage({ debugInfo }) {
 	});
 }
 
-//#endregion
-//#region src/components/ButtonShare/hooks/useShareModal.ts
-/**
-* Open the share modal
-*
-* @description
-* This function will open the share modal, lazily creating a modal builder on demand.
-*/
-function useShareModal(targetInteraction, placement) {
-	const [debugInfo, setDebugInfo] = useState(void 0);
-	const [isError, setIsError] = useState(false);
-	return {
-		handleShare: useCallback(async () => {
-			if (!window.FrakSetup?.client) {
-				console.error("Frak client not found");
-				setDebugInfo(DebugInfoGatherer.empty().formatDebugInfo("Frak client not found"));
-				setIsError(true);
-				return;
-			}
-			const builder = modalBuilder(window.FrakSetup.client, {});
-			try {
-				await builder.sharing({}).display((metadata) => ({
-					...metadata,
-					targetInteraction
-				}), placement);
-			} catch (e) {
-				if (e instanceof FrakRpcError && e.code === RpcErrorCodes.clientAborted) {
-					console.debug("User aborted the modal");
-					return;
-				}
-				const debugInfo = window.FrakSetup.client.debugInfo.formatDebugInfo(e);
-				trackEvent(window.FrakSetup.client, "share_modal_error", {
-					error: e instanceof Object && "message" in e ? e.message : "Unknown error",
-					debugInfo
-				});
-				setDebugInfo(debugInfo);
-				setIsError(true);
-				console.error("Error while opening the modal", e);
-			}
-		}, [targetInteraction, placement]),
-		isError,
-		debugInfo
-	};
-}
-
 //#endregion
 //#region src/components/ButtonShare/ButtonShare.tsx
 /**
@@ -255,7 +220,7 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 	const resolvedText = componentConfig?.text ?? text;
 	const resolvedNoRewardText = componentConfig?.noRewardText ?? noRewardText;
 	const shouldUseReward = useMemo(() => componentConfig?.useReward ?? rawUseReward === true, [componentConfig?.useReward, rawUseReward]);
-	const resolvedClickAction = useMemo(() => componentConfig?.clickAction ?? rawClickAction ?? "embedded-wallet", [componentConfig?.clickAction, rawClickAction]);
+	const resolvedClickAction = useMemo(() => componentConfig?.clickAction ?? rawClickAction ?? "sharing-page", [componentConfig?.clickAction, rawClickAction]);
 	const { shouldRender, isHidden, isClientReady } = useClientReady();
 	const { reward } = useReward(shouldUseReward && isClientReady, resolvedTargetInteraction);
 	const { handleShare, isError, debugInfo } = useShareModal(resolvedTargetInteraction, placementId);
@@ -271,8 +236,9 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 	]);
 	const onClick = useCallback(async () => {
 		trackEvent(window.FrakSetup.client, "share_button_clicked");
-		if (resolvedClickAction === "share-modal") await handleShare();
-		else openEmbeddedWallet(resolvedTargetInteraction, placementId);
+		if (resolvedClickAction === "embedded-wallet") openEmbeddedWallet(resolvedTargetInteraction, placementId);
+		else if (resolvedClickAction === "share-modal") await handleShare();
+		else openSharingPage(resolvedTargetInteraction, placementId);
 	}, [
 		resolvedClickAction,
 		handleShare,

package/dist/buttonWallet.js

@@ -1,5 +1,5 @@
-import { a as registerWebComponent, i as useClientReady, n as buildStyleContent, o as openWalletModal, t as usePlacement } from "./usePlacement-DD1NUBps.js";
-import { t as useReward } from "./useReward-DAkT-7wT.js";
+import { a as useClientReady, o as registerWebComponent, r as buildStyleContent, s as openWalletModal, t as usePlacement } from "./usePlacement-BbMuz8_A.js";
+import { t as useReward } from "./useReward-CI2yRrCj.js";
 import { trackEvent } from "@frak-labs/core-sdk";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";

package/dist/formatReward-6JQldDEC.js

@@ -0,0 +1,28 @@
+import { formatAmount, getCurrencyAmountKey, getSupportedCurrency } from "@frak-labs/core-sdk";
+
+//#region src/utils/formatReward.ts
+/**
+* Format an {@link EstimatedReward} into a human-readable string.
+*
+* - `fixed`      → e.g. `"5 €"`
+* - `percentage`  → if `basketAmount` is provided, computes the actual value
+*                   (e.g. `"10 €"`), otherwise returns `"10 %"`
+* - `tiered`      → max tier value, e.g. `"50 €"`
+*/
+function formatEstimatedReward(reward, currency, basketAmount) {
+	const supportedCurrency = getSupportedCurrency(currency);
+	const key = getCurrencyAmountKey(supportedCurrency);
+	switch (reward.payoutType) {
+		case "fixed": return formatAmount(Math.round(reward.amount[key]), supportedCurrency);
+		case "percentage":
+			if (basketAmount !== void 0) return formatAmount(Math.round(reward.percent * basketAmount / 100), supportedCurrency);
+			return `${reward.percent} %`;
+		case "tiered": {
+			const max = reward.tiers.reduce((acc, tier) => Math.max(acc, tier.amount[key]), 0);
+			return formatAmount(Math.round(max), supportedCurrency);
+		}
+	}
+}
+
+//#endregion
+export { formatEstimatedReward as t };

package/dist/openInApp.js

@@ -1,5 +1,5 @@
-import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-DD1NUBps.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-C029nIFk.js";
+import { a as useClientReady, o as registerWebComponent, t as usePlacement } from "./usePlacement-BbMuz8_A.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-DukxuNnJ.js";
 import { DEEP_LINK_SCHEME, trackEvent, triggerDeepLinkWithFallback } from "@frak-labs/core-sdk";
 import { useMemo } from "preact/hooks";
 import { jsx } from "preact/jsx-runtime";

package/dist/postPurchase.d.ts

@@ -0,0 +1,98 @@
+import * as preact from "preact";
+
+//#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";
+};
+//#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
+}: PostPurchaseProps): 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 };

package/dist/postPurchase.js

@@ -0,0 +1,140 @@
+import { a as useClientReady, o as registerWebComponent, t as usePlacement } from "./usePlacement-BbMuz8_A.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-DukxuNnJ.js";
+import { t as formatEstimatedReward } from "./formatReward-6JQldDEC.js";
+import { t as useShareModal } from "./useShareModal-DHlayNqk.js";
+import { getMerchantInformation, getUserReferralStatus, trackPurchaseStatus } from "@frak-labs/core-sdk/actions";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { FrakRpcError, RpcErrorCodes } from "@frak-labs/frame-connector";
+
+//#region src/components/PostPurchase/PostPurchase.tsx
+/**
+* Given referral status and merchant info, compute the display variant
+* and pick the appropriate purchase reward.
+*/
+function resolvePostPurchaseContext(referralStatus, merchantInfo) {
+	const purchaseReward = merchantInfo.rewards.find((r) => r.interactionTypeKey === "purchase" && (r.referrer || r.referee));
+	if (!purchaseReward) return null;
+	const variant = referralStatus?.isReferred && purchaseReward.referee ? "referee" : "referrer";
+	return {
+		variant,
+		reward: variant === "referee" ? purchaseReward.referee : purchaseReward.referrer,
+		merchantDomain: merchantInfo.onChainMetadata.domain
+	};
+}
+/**
+* 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>
+* ```
+*/
+function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, placement: placementId, classname = "", variant: forcedVariant }) {
+	const { shouldRender, isHidden, isClientReady } = useClientReady();
+	const placement = usePlacement(placementId);
+	useLightDomStyles("frak-post-purchase", placementId, placement?.components?.postPurchase?.css);
+	const [context, setContext] = useState(null);
+	const [hasFetched, setHasFetched] = useState(false);
+	useEffect(() => {
+		if (!isClientReady || !customerId || !orderId || !token) return;
+		trackPurchaseStatus({
+			customerId,
+			orderId,
+			token,
+			merchantId
+		}).catch(() => {});
+	}, [
+		isClientReady,
+		customerId,
+		orderId,
+		token,
+		merchantId
+	]);
+	useEffect(() => {
+		if (!isClientReady || hasFetched) return;
+		const client = window.FrakSetup?.client;
+		if (!client) return;
+		setHasFetched(true);
+		Promise.all([getUserReferralStatus(client), getMerchantInformation(client)]).then(([referralStatus, merchantInfo]) => {
+			setContext(resolvePostPurchaseContext(referralStatus, merchantInfo));
+		}).catch((e) => {
+			if (e instanceof FrakRpcError && e.code === RpcErrorCodes.configError) return;
+			console.warn("[Frak] Post-purchase context error", e);
+		});
+	}, [isClientReady, hasFetched]);
+	const resolvedVariant = forcedVariant ?? context?.variant;
+	const resolvedSharingUrl = sharingUrl ?? context?.merchantDomain;
+	const rewardText = useMemo(() => {
+		if (!context?.reward) return void 0;
+		const currency = window.FrakSetup?.client?.config?.metadata?.currency;
+		return formatEstimatedReward(context.reward, currency);
+	}, [context?.reward]);
+	const postPurchaseConfig = placement?.components?.postPurchase;
+	const texts = useMemo(() => {
+		const applyReward = (text) => rewardText ? text.replace("{REWARD}", rewardText) : text;
+		return {
+			message: resolvedVariant === "referee" ? rewardText ? applyReward(postPurchaseConfig?.refereeText ?? "You just earned {REWARD}! Share with friends to earn even more.") : postPurchaseConfig?.refereeNoRewardText ?? "You just earned a reward! Share with friends to earn even more." : rewardText ? applyReward(postPurchaseConfig?.referrerText ?? "Earn {REWARD} by sharing this with your friends!") : postPurchaseConfig?.referrerNoRewardText ?? "Share this with your friends and earn rewards!",
+			cta: rewardText ? applyReward(postPurchaseConfig?.ctaText ?? "Share & earn {REWARD}") : postPurchaseConfig?.ctaNoRewardText ?? "Share & earn"
+		};
+	}, [
+		resolvedVariant,
+		rewardText,
+		postPurchaseConfig
+	]);
+	const { handleShare } = useShareModal(void 0, placementId, resolvedSharingUrl);
+	if (!shouldRender || isHidden) return null;
+	if (!context || !resolvedVariant) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		class: ["post-purchase", classname].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx("div", {
+			class: "post-purchase__content",
+			children: /* @__PURE__ */ jsx("p", {
+				class: "post-purchase__message",
+				children: texts.message
+			})
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			class: "post-purchase__cta button",
+			disabled: !isClientReady,
+			onClick: handleShare,
+			children: texts.cta
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/PostPurchase/index.ts
+registerWebComponent(PostPurchase, "frak-post-purchase", [
+	"customerId",
+	"orderId",
+	"token",
+	"sharingUrl",
+	"merchantId",
+	"placement",
+	"classname",
+	"variant"
+], { shadow: false });
+
+//#endregion
+export { PostPurchase };

package/dist/{useLightDomStyles-C029nIFk.js → useLightDomStyles-DukxuNnJ.js}

@@ -1,4 +1,4 @@
-import { r as lightDomBaseCss } from "./usePlacement-DD1NUBps.js";
+import { i as lightDomBaseCss } from "./usePlacement-BbMuz8_A.js";
 import { useEffect } from "preact/hooks";
 
 //#region src/utils/styleManager.ts
@@ -26,9 +26,9 @@ const styleManager = {
 
 //#endregion
 //#region src/hooks/useLightDomStyles.ts
-function useLightDomStyles(tag, placementId, placementCss) {
+function useLightDomStyles(tag, placementId, placementCss, baseCss) {
 	useEffect(() => {
-		styleManager.injectBase(tag, lightDomBaseCss);
+		styleManager.injectBase(tag, baseCss ?? lightDomBaseCss);
 	}, [tag]);
 	useEffect(() => {
 		if (!placementId || !placementCss) return;