@frak-labs/components 0.0.26-beta.b38eef2e → 0.0.26-beta.d04602ec

package/dist/buttonWallet.js

@@ -1,9 +1,8 @@
-import { i as openWalletModal, n as registerWebComponent, t as useClientReady } from "./useClientReady-0vKBG0-p.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 { cx } from "class-variance-authority";
 import { useEffect, useMemo, useState } from "preact/hooks";
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 
 //#region src/components/ButtonWallet/assets/GiftIcon.tsx
 function GiftIcon(props) {
@@ -23,21 +22,48 @@ function GiftIcon(props) {
 	});
 }
 
-//#endregion
-//#region src/components/ButtonWallet/ButtonWallet.module.css?css_module
-const classes = {
-	"button__left": "Kl62ia_button__left",
-	"button__right": "Kl62ia_button__right",
-	"button": "Kl62ia_button",
-	"reward": "Kl62ia_reward"
-};
-const _button__left0 = classes["button__left"];
-const _button__right0 = classes["button__right"];
-const _button0 = classes["button"];
-const _reward0 = classes["reward"];
-
 //#endregion
 //#region src/components/ButtonWallet/ButtonWallet.tsx
+const componentCss = `
+.button {
+    all: unset;
+    position: fixed;
+    bottom: 20px;
+    z-index: 2000000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #3e557e;
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    cursor: pointer;
+    text-align: center;
+    font-size: 24px;
+}
+
+.button__left {
+    left: 20px;
+}
+
+.button__right {
+    right: 20px;
+}
+
+.reward {
+    position: absolute;
+    top: -4px;
+    right: 27px;
+    padding: 2px 3px;
+    border-radius: 5px;
+    background: #ff3f3f;
+    font-size: 9px;
+    color: #fff;
+    font-weight: 600;
+    white-space: nowrap;
+    line-height: 9px;
+}
+`;
 /**
 * Button to open wallet modal
 *
@@ -70,40 +96,59 @@ const _reward0 = classes["reward"];
 * <frak-button-wallet use-reward target-interaction="custom.customerMeeting"></frak-button-wallet>
 * ```
 *
+* @example
+* Using placement:
+* ```html
+* <frak-button-wallet placement="hero-wallet"></frak-button-wallet>
+* ```
+*
 * @see {@link @frak-labs/core-sdk!actions.modalBuilder | `modalBuilder()`} for more info about the modal display
 * @see {@link @frak-labs/core-sdk!actions.getMerchantInformation | `getMerchantInformation()`} for more info about the estimated reward fetching
 */
-function ButtonWallet({ classname = "", useReward: rawUseReward, targetInteraction }) {
-	const shouldUseReward = useMemo(() => rawUseReward !== void 0, [rawUseReward]);
-	const { isClientReady } = useClientReady();
-	const { reward } = useReward(shouldUseReward && isClientReady, targetInteraction);
+function ButtonWallet({ placement: placementId, classname = "", useReward: rawUseReward, targetInteraction }) {
+	const placement = usePlacement(placementId);
+	const resolvedTargetInteraction = useMemo(() => placement?.targetInteraction !== void 0 ? placement.targetInteraction : targetInteraction, [placement?.targetInteraction, targetInteraction]);
+	const shouldUseReward = useMemo(() => rawUseReward === true, [rawUseReward]);
+	const { shouldRender, isHidden, isClientReady } = useClientReady();
+	const { reward } = useReward(shouldUseReward && isClientReady, resolvedTargetInteraction);
 	const [position, setPosition] = useState("right");
-	/**
-	* Setup the position of the button
-	*/
 	useEffect(() => {
-		const position = window.FrakSetup?.modalWalletConfig?.metadata?.position;
-		setPosition(position ?? "right");
-	}, []);
-	return /* @__PURE__ */ jsxs("button", {
+		const placementPosition = placement?.components?.buttonWallet?.position;
+		const configPosition = window.FrakSetup?.modalWalletConfig?.metadata?.position;
+		setPosition(placementPosition ?? configPosition ?? "right");
+	}, [placement?.components?.buttonWallet?.position]);
+	if (!shouldRender || isHidden) return null;
+	const buttonClass = [
+		"button",
+		"button__fadeIn",
+		position === "left" ? "button__left" : "button__right",
+		classname
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: buildStyleContent(componentCss, placement?.components?.buttonWallet?.css) }), /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"aria-label": "Open wallet",
-		class: cx(classes.button, position === "left" ? classes.button__left : classes.button__right, classname, "override"),
+		part: "button",
 		disabled: !isClientReady,
+		class: buttonClass,
 		onClick: () => {
 			trackEvent(window.FrakSetup.client, "wallet_button_clicked");
-			openWalletModal();
+			openWalletModal(resolvedTargetInteraction, placementId);
 		},
 		children: [/* @__PURE__ */ jsx(GiftIcon, {}), reward && /* @__PURE__ */ jsx("span", {
-			className: classes.reward,
+			class: "reward",
 			children: reward
 		})]
-	});
+	})] });
 }
 
 //#endregion
 //#region src/components/ButtonWallet/index.ts
-registerWebComponent(ButtonWallet, "frak-button-wallet", [], { shadow: false });
+registerWebComponent(ButtonWallet, "frak-button-wallet", [
+	"placement",
+	"classname",
+	"useReward",
+	"targetInteraction"
+], { shadow: true });
 
 //#endregion
 export { ButtonWallet };

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.d.ts

@@ -6,6 +6,7 @@ import * as preact from "preact";
  * @inline
  */
 type OpenInAppButtonProps = {
+  placement?: string;
   /**
    * Text to display on the button
    * @defaultValue `"Open in App"`
@@ -45,6 +46,7 @@ type OpenInAppButtonProps = {
  * ```
  */
 declare function OpenInAppButton({
+  placement: placementId,
   text,
   classname
 }: OpenInAppButtonProps): preact.JSX.Element | null;

package/dist/openInApp.js

@@ -1,9 +1,8 @@
-import { n as registerWebComponent, t as useClientReady } from "./useClientReady-0vKBG0-p.js";
-import { t as Spinner } from "./Spinner-Btnwk01x.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 { cx } from "class-variance-authority";
 import { useMemo } from "preact/hooks";
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { jsx } from "preact/jsx-runtime";
 
 //#region src/utils/isMobile.ts
 /**
@@ -48,11 +47,6 @@ function openFrakWalletApp(path = DEFAULT_PATH) {
 	} });
 }
 
-//#endregion
-//#region src/components/OpenInAppButton/OpenInAppButton.module.css?css_module
-const classes = { "button": "XYfqGq_button" };
-const _button0 = classes["button"];
-
 //#endregion
 //#region src/components/OpenInAppButton/OpenInAppButton.tsx
 /**
@@ -81,30 +75,38 @@ const _button0 = classes["button"];
 * <frak-open-in-app classname="button button-primary"></frak-open-in-app>
 * ```
 */
-function OpenInAppButton({ text = "Open in App", classname = "" }) {
-	const { isClientReady } = useClientReady();
+function OpenInAppButton({ placement: placementId, text = "Open in App", classname = "" }) {
+	const placement = usePlacement(placementId);
+	const { shouldRender, isHidden, isClientReady } = useClientReady();
 	const { isMobile } = useIsMobile();
-	if (!isMobile) return null;
+	useLightDomStyles("frak-open-in-app", placementId, placement?.components?.openInApp?.css);
+	const resolvedText = placement?.components?.openInApp?.text ?? text;
+	if (!isMobile || !shouldRender || isHidden) return null;
 	const handleClick = () => {
 		openFrakWalletApp();
 	};
-	return /* @__PURE__ */ jsxs("button", {
+	const buttonClass = [
+		"button",
+		"button__fadeIn",
+		classname
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"aria-label": "Open in Frak Wallet app",
-		className: cx(classes.button, classname, "override"),
 		disabled: !isClientReady,
+		class: buttonClass,
 		onClick: handleClick,
-		children: [
-			!isClientReady && /* @__PURE__ */ jsx(Spinner, {}),
-			" ",
-			text
-		]
+		children: resolvedText
 	});
 }
 
 //#endregion
 //#region src/components/OpenInAppButton/index.ts
-registerWebComponent(OpenInAppButton, "frak-open-in-app", ["text"], { shadow: false });
+registerWebComponent(OpenInAppButton, "frak-open-in-app", [
+	"text",
+	"placement",
+	"classname"
+], { shadow: false });
 
 //#endregion
 export { OpenInAppButton };

package/dist/postPurchase.d.ts

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

package/dist/postPurchase.js

@@ -0,0 +1,146 @@
+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, referrerText: propReferrerText, refereeText: propRefereeText, ctaText: propCtaText }) {
+	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(propRefereeText ?? postPurchaseConfig?.refereeText ?? "You just earned {REWARD}! Share with friends to earn even more.") : propRefereeText ?? postPurchaseConfig?.refereeNoRewardText ?? "You just earned a reward! Share with friends to earn even more." : rewardText ? applyReward(propReferrerText ?? postPurchaseConfig?.referrerText ?? "Earn {REWARD} by sharing this with your friends!") : propReferrerText ?? postPurchaseConfig?.referrerNoRewardText ?? "Share this with your friends and earn rewards!",
+			cta: rewardText ? applyReward(propCtaText ?? postPurchaseConfig?.ctaText ?? "Share & earn {REWARD}") : propCtaText ?? postPurchaseConfig?.ctaNoRewardText ?? "Share & earn"
+		};
+	}, [
+		resolvedVariant,
+		rewardText,
+		postPurchaseConfig,
+		propReferrerText,
+		propRefereeText,
+		propCtaText
+	]);
+	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",
+	"referrerText",
+	"refereeText",
+	"ctaText"
+], { shadow: false });
+
+//#endregion
+export { PostPurchase };

package/dist/useLightDomStyles-DukxuNnJ.js

@@ -0,0 +1,44 @@
+import { i as lightDomBaseCss } from "./usePlacement-BbMuz8_A.js";
+import { useEffect } from "preact/hooks";
+
+//#region src/utils/styleManager.ts
+function ensureStyle(id, css) {
+	const existing = document.getElementById(id);
+	if (existing) {
+		if (existing.textContent !== css) existing.textContent = css;
+		return;
+	}
+	const style = document.createElement("style");
+	style.id = id;
+	style.textContent = css;
+	document.head.appendChild(style);
+}
+function injectBase(tag, css) {
+	ensureStyle(`frak-base-${tag}`, css);
+}
+function injectPlacement(tag, placementId, scopedCss) {
+	ensureStyle(`frak-placement-${tag}-${placementId}`, scopedCss);
+}
+const styleManager = {
+	injectBase,
+	injectPlacement
+};
+
+//#endregion
+//#region src/hooks/useLightDomStyles.ts
+function useLightDomStyles(tag, placementId, placementCss, baseCss) {
+	useEffect(() => {
+		styleManager.injectBase(tag, baseCss ?? lightDomBaseCss);
+	}, [tag]);
+	useEffect(() => {
+		if (!placementId || !placementCss) return;
+		styleManager.injectPlacement(tag, placementId, placementCss);
+	}, [
+		tag,
+		placementId,
+		placementCss
+	]);
+}
+
+//#endregion
+export { useLightDomStyles as t };