@frak-labs/components 0.0.26-beta.d2556d47 → 0.0.26-beta.eb3cff34

package/dist/buttonShare.js

@@ -1,12 +1,22 @@
-import { a as registerWebComponent, i as useClientReady, s as openEmbeddedWallet, t as usePlacement } from "./usePlacement-D99UDsVs.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-ZGaYUErZ.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 registerWebComponent, i as useClientReady, s as openEmbeddedWallet, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
+import { t as useGlobalComponents } from "./useGlobalComponents-Cmfszr7v.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-hgYYZsTy.js";
+import { t as applyRewardPlaceholder } from "./formatReward-Bub6Z6eY.js";
+import { t as useReward } from "./useReward-DU3_yP8Q.js";
+import { t as useShareModal } from "./useShareModal-DgEf5WWG.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;
@@ -47,7 +57,6 @@ function useCopyToClipboard(options = {}) {
 		copied
 	};
 }
-
 //#endregion
 //#region src/components/ButtonShare/components/ErrorMessage.tsx
 const styles = {
@@ -158,52 +167,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
 /**
@@ -249,20 +212,21 @@ function useShareModal(targetInteraction, placement) {
 */
 function ButtonShare({ placement: placementId, text = "Share and earn!", classname = "", useReward: rawUseReward, noRewardText, targetInteraction, clickAction: rawClickAction }) {
 	const placement = usePlacement(placementId);
-	const componentConfig = placement?.components?.buttonShare;
+	const globalComponents = useGlobalComponents();
+	const componentConfig = placement?.components?.buttonShare ?? globalComponents?.buttonShare;
 	useLightDomStyles("frak-button-share", placementId, componentConfig?.css);
 	const resolvedTargetInteraction = useMemo(() => placement?.targetInteraction !== void 0 ? placement.targetInteraction : targetInteraction, [placement?.targetInteraction, targetInteraction]);
 	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);
 	const btnText = useMemo(() => {
 		if (!shouldUseReward) return resolvedText;
-		if (!reward) return resolvedNoRewardText ?? resolvedText.replace("{REWARD}", "");
-		return resolvedText.includes("{REWARD}") ? resolvedText.replace("{REWARD}", reward) : `${resolvedText} ${reward}`;
+		if (!reward) return resolvedNoRewardText ?? applyRewardPlaceholder(resolvedText, void 0);
+		return resolvedText.includes("{REWARD}") ? applyRewardPlaceholder(resolvedText, reward) : `${resolvedText} ${reward}`;
 	}, [
 		shouldUseReward,
 		resolvedText,
@@ -271,8 +235,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,
@@ -293,7 +258,6 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 		children: btnText
 	}), isError && /* @__PURE__ */ jsx(ErrorMessage, { debugInfo })] });
 }
-
 //#endregion
 //#region src/components/ButtonShare/index.ts
 registerWebComponent(ButtonShare, "frak-button-share", [
@@ -305,6 +269,5 @@ registerWebComponent(ButtonShare, "frak-button-share", [
 	"noRewardText",
 	"targetInteraction"
 ], { shadow: false });
-
 //#endregion
-export { ButtonShare };
+export { ButtonShare };

package/dist/buttonWallet.d.ts

@@ -1,5 +1,5 @@
 import { InteractionTypeKey } from "@frak-labs/core-sdk";
-import * as preact from "preact";
+import * as _$preact from "preact";
 
 //#region src/components/ButtonWallet/types.d.ts
 /**
@@ -70,7 +70,7 @@ declare function ButtonWallet({
   classname,
   useReward: rawUseReward,
   targetInteraction
-}: ButtonWalletProps): preact.JSX.Element | null;
+}: ButtonWalletProps): _$preact.JSX.Element | null;
 //#endregion
 //#region src/components/ButtonWallet/index.d.ts
 /**

package/dist/buttonWallet.js

@@ -1,9 +1,8 @@
-import { a as registerWebComponent, i as useClientReady, n as buildStyleContent, o as openWalletModal, t as usePlacement } from "./usePlacement-D99UDsVs.js";
-import { t as useReward } from "./useReward-DAkT-7wT.js";
+import { a as registerWebComponent, i as useClientReady, n as buildStyleContent, o as openWalletModal, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
+import { t as useReward } from "./useReward-DU3_yP8Q.js";
 import { trackEvent } from "@frak-labs/core-sdk";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-
 //#region src/components/ButtonWallet/assets/GiftIcon.tsx
 function GiftIcon(props) {
 	return /* @__PURE__ */ jsxs("svg", {
@@ -21,7 +20,6 @@ function GiftIcon(props) {
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/ButtonWallet/ButtonWallet.tsx
 const componentCss = `
@@ -140,7 +138,6 @@ function ButtonWallet({ placement: placementId, classname = "", useReward: rawUs
 		})]
 	})] });
 }
-
 //#endregion
 //#region src/components/ButtonWallet/index.ts
 registerWebComponent(ButtonWallet, "frak-button-wallet", [
@@ -149,6 +146,5 @@ registerWebComponent(ButtonWallet, "frak-button-wallet", [
 	"useReward",
 	"targetInteraction"
 ], { shadow: true });
-
 //#endregion
-export { ButtonWallet };
+export { ButtonWallet };

package/dist/formatReward-Bub6Z6eY.js

@@ -0,0 +1,33 @@
+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);
+		}
+	}
+}
+/**
+* Replace the `{REWARD}` placeholder in a text string with a reward value.
+* If no reward is provided, returns the text with `{REWARD}` stripped.
+*/
+function applyRewardPlaceholder(text, reward) {
+	return reward ? text.replace("{REWARD}", reward) : text.replace("{REWARD}", "");
+}
+//#endregion
+export { formatEstimatedReward as n, applyRewardPlaceholder as t };

package/dist/openInApp.d.ts

@@ -1,4 +1,4 @@
-import * as preact from "preact";
+import * as _$preact from "preact";
 
 //#region src/components/OpenInAppButton/types.d.ts
 /**
@@ -49,7 +49,7 @@ declare function OpenInAppButton({
   placement: placementId,
   text,
   classname
-}: OpenInAppButtonProps): preact.JSX.Element | null;
+}: OpenInAppButtonProps): _$preact.JSX.Element | null;
 //#endregion
 //#region src/components/OpenInAppButton/index.d.ts
 /**

package/dist/openInApp.js

@@ -1,9 +1,8 @@
-import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-D99UDsVs.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-ZGaYUErZ.js";
+import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-hgYYZsTy.js";
 import { DEEP_LINK_SCHEME, trackEvent, triggerDeepLinkWithFallback } from "@frak-labs/core-sdk";
 import { useMemo } from "preact/hooks";
 import { jsx } from "preact/jsx-runtime";
-
 //#region src/utils/isMobile.ts
 /**
 * Check if the current device is a mobile device
@@ -20,13 +19,11 @@ function isMobile() {
 	if (/Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints > 1) return true;
 	return false;
 }
-
 //#endregion
 //#region src/hooks/useIsMobile.ts
 function useIsMobile() {
 	return { isMobile: useMemo(() => isMobile(), []) };
 }
-
 //#endregion
 //#region src/utils/openInApp.ts
 const DEFAULT_PATH = "wallet";
@@ -46,7 +43,6 @@ function openFrakWalletApp(path = DEFAULT_PATH) {
 		if (client) trackEvent(client, "app_not_installed");
 	} });
 }
-
 //#endregion
 //#region src/components/OpenInAppButton/OpenInAppButton.tsx
 /**
@@ -99,7 +95,6 @@ function OpenInAppButton({ placement: placementId, text = "Open in App", classna
 		children: resolvedText
 	});
 }
-
 //#endregion
 //#region src/components/OpenInAppButton/index.ts
 registerWebComponent(OpenInAppButton, "frak-open-in-app", [
@@ -107,6 +102,5 @@ registerWebComponent(OpenInAppButton, "frak-open-in-app", [
 	"placement",
 	"classname"
 ], { shadow: false });
-
 //#endregion
-export { OpenInAppButton };
+export { OpenInAppButton };

package/dist/postPurchase.d.ts

@@ -0,0 +1,122 @@
+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";
+  /**
+   * 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;
+};
+//#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
+}: 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 };