@frak-labs/components 1.0.10 → 1.0.11-beta.b456c7f7

package/dist/i18n/defaults.js

@@ -0,0 +1,70 @@
+//#region src/i18n/defaults.ts
+/**
+* Built-in, per-language default copy for the SDK Web Components.
+*
+* These strings are the last-resort fallback, used only when a merchant
+* provides neither an HTML attribute override nor a backend-config override.
+* They keep the components bilingual out of the box **without** pulling an
+* i18n runtime (e.g. i18next) into the size-critical CDN bundle — resolution
+* is a plain object lookup keyed by the active language (see `useLang`).
+*
+* Adding a new language is a matter of adding one entry here plus extending
+* the `Language` union in `@frak-labs/core-sdk` — no new dependency, no
+* merchant action, no SDK API change.
+*/
+const componentDefaults = {
+	en: {
+		buttonShare: { text: "Share and earn!" },
+		postPurchase: {
+			refereeText: "You just earned {REWARD}! Share with friends to earn even more.",
+			refereeNoRewardText: "You just earned a reward! Share with friends to earn even more.",
+			referrerText: "Earn {REWARD} by sharing this with your friends!",
+			referrerNoRewardText: "Share this with your friends and earn rewards!",
+			ctaText: "Share & earn {REWARD}",
+			ctaNoRewardText: "Share & earn"
+		},
+		openInApp: {
+			text: "Open in App",
+			ariaLabel: "Open in Frak Wallet app"
+		},
+		buttonWallet: { ariaLabel: "Open wallet" },
+		banner: {
+			referralTitleReward: "Earn {REWARD} on purchases on this site",
+			referralTitle: "You've been referred!",
+			referralDescription: "Earn rewards after your purchase via the Frak partner app.",
+			referralCta: "Got it",
+			inappTitle: "Open in your browser",
+			inappDescription: "For a better experience and to earn your rewards, open this page in your default browser.",
+			inappCta: "Open browser",
+			dismissLabel: "Dismiss"
+		}
+	},
+	fr: {
+		buttonShare: { text: "Partagez et gagnez !" },
+		postPurchase: {
+			refereeText: "Vous venez de gagner {REWARD} ! Partagez avec vos amis pour gagner encore plus.",
+			refereeNoRewardText: "Vous venez de gagner une récompense ! Partagez avec vos amis pour gagner encore plus.",
+			referrerText: "Gagnez {REWARD} en partageant avec vos amis !",
+			referrerNoRewardText: "Partagez avec vos amis et gagnez des récompenses !",
+			ctaText: "Partagez et gagnez {REWARD}",
+			ctaNoRewardText: "Partagez et gagnez"
+		},
+		openInApp: {
+			text: "Ouvrir dans l'app",
+			ariaLabel: "Ouvrir dans l'app Frak Wallet"
+		},
+		buttonWallet: { ariaLabel: "Ouvrir le portefeuille" },
+		banner: {
+			referralTitleReward: "Gagnez {REWARD} sur vos achats sur ce site",
+			referralTitle: "Vous avez été parrainé !",
+			referralDescription: "Gagnez des récompenses après votre achat via l'application partenaire Frak.",
+			referralCta: "J'ai compris",
+			inappTitle: "Ouvrez dans votre navigateur",
+			inappDescription: "Pour une meilleure expérience et pour gagner vos récompenses, ouvrez cette page dans votre navigateur par défaut.",
+			inappCta: "Ouvrir le navigateur",
+			dismissLabel: "Fermer"
+		}
+	}
+};
+//#endregion
+export { componentDefaults };

package/dist/openInApp.d.ts

@@ -6,8 +6,10 @@
 type OpenInAppButtonProps = {
   placement?: string;
   /**
-   * Text to display on the button
-   * @defaultValue `"Open in App"`
+   * Text to display on the button.
+   *
+   * When omitted, a built-in localized default is used based on the
+   * resolved language (`"Open in App"` / `"Ouvrir dans l'app"`).
    */
   text?: string;
   /**

package/dist/openInApp.js

@@ -1,5 +1,6 @@
-import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-DTN6H6vW.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-DPKMhggr.js";
+import { i as useLang, o as useClientReady, s as registerWebComponent, t as usePlacement } from "./usePlacement-4PoDbn2X.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-DphuQhvx.js";
+import { componentDefaults } from "./i18n/defaults.js";
 import { DEEP_LINK_SCHEME, isMobile, trackEvent, triggerDeepLinkWithFallback } from "@frak-labs/core-sdk";
 import { useMemo } from "preact/hooks";
 import { jsx } from "preact/jsx-runtime";
@@ -58,12 +59,13 @@ function useIsMobile() {
 * <frak-open-in-app classname="button button-primary"></frak-open-in-app>
 * ```
 */
-function OpenInAppButton({ placement: placementId, text = "Open in App", classname = "" }) {
+function OpenInAppButton({ placement: placementId, text, classname = "" }) {
+	const lang = useLang();
 	const placement = usePlacement(placementId);
 	const { shouldRender, isHidden, isClientReady } = useClientReady();
 	const { isMobile } = useIsMobile();
 	useLightDomStyles("frak-open-in-app", placementId, placement?.components?.openInApp?.css);
-	const resolvedText = placement?.components?.openInApp?.text ?? text;
+	const resolvedText = placement?.components?.openInApp?.text ?? text ?? componentDefaults[lang].openInApp.text;
 	if (!isMobile || !shouldRender || isHidden) return null;
 	const handleClick = () => {
 		openFrakWalletApp(void 0, placementId);
@@ -75,7 +77,7 @@ function OpenInAppButton({ placement: placementId, text = "Open in App", classna
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		"aria-label": "Open in Frak Wallet app",
+		"aria-label": componentDefaults[lang].openInApp.ariaLabel,
 		disabled: !isClientReady,
 		class: buttonClass,
 		onClick: handleClick,

package/dist/postPurchase.d.ts

@@ -141,7 +141,7 @@ declare function PostPurchase({
   preview,
   previewVariant,
   products,
-  imageUrl
+  imageUrl: propImageUrl
 }: PostPurchaseProps): import("preact").JSX.Element | null;
 //#endregion
 //#region src/components/PostPurchase/index.d.ts

package/dist/postPurchase.js

@@ -1,8 +1,9 @@
-import { a as registerWebComponent, i as useClientReady, o as sanitizeProductList, s as openSharingPage, t as usePlacement } from "./usePlacement-DTN6H6vW.js";
-import { t as useGlobalComponents } from "./useGlobalComponents-mSs9unyN.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-DPKMhggr.js";
-import { n as formatEstimatedReward, t as applyRewardPlaceholder } from "./formatReward-D3CkH7It.js";
-import { i as LogoFrakWithName, n as cssSource$2, t as GiftIcon } from "./GiftIcon-WEWSJ8kV.js";
+import { c as sanitizeProductList, i as useLang, l as openSharingPage, o as useClientReady, s as registerWebComponent, t as usePlacement } from "./usePlacement-4PoDbn2X.js";
+import { t as useGlobalComponents } from "./useGlobalComponents-CZ7Sh2tZ.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-DphuQhvx.js";
+import { i as y, n as T, r as b } from "./rewards-B5VmlrcI.js";
+import { componentDefaults } from "./i18n/defaults.js";
+import { i as LogoFrakWithName, n as cssSource$2, t as GiftIcon } from "./GiftIcon-BEzYdiux.js";
 import { trackEvent } from "@frak-labs/core-sdk";
 import { getMerchantInformation, getUserReferralStatus, trackPurchaseStatus } from "@frak-labs/core-sdk/actions";
 import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
@@ -116,13 +117,19 @@ const cssSource = cssSource$1;
 * 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";
+function resolvePostPurchaseContext(referralStatus, merchantInfo, currency) {
+	const audience = referralStatus?.isReferred ? "referee" : "referrer";
+	const selected = T(merchantInfo.rewards, {
+		targetInteraction: "purchase",
+		currency,
+		audience
+	});
+	if (!selected) return null;
+	const { campaign } = selected;
+	const variant = referralStatus?.isReferred && campaign.referee ? "referee" : "referrer";
 	return {
 		variant,
-		reward: variant === "referee" ? purchaseReward.referee : purchaseReward.referrer,
+		reward: variant === "referee" ? campaign.referee : campaign.referrer,
 		merchantDomain: merchantInfo.onChainMetadata.domain
 	};
 }
@@ -154,10 +161,11 @@ function resolvePostPurchaseContext(referralStatus, merchantInfo) {
 * ></frak-post-purchase>
 * ```
 */
-function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, placement: placementId, classname = "", variant: forcedVariant, badgeText: propBadgeText, referrerText: propReferrerText, refereeText: propRefereeText, ctaText: propCtaText, preview, previewVariant, products, imageUrl }) {
+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 }) {
 	const isPreview = !!preview;
 	const { shouldRender, isHidden, isClientReady } = useClientReady();
 	const placement = usePlacement(placementId);
+	const lang = useLang();
 	useLightDomStyles("frak-post-purchase", placementId, placement?.components?.postPurchase?.css, cssSource, cssSource$2);
 	const [context, setContext] = useState(null);
 	const [hasFetched, setHasFetched] = useState(false);
@@ -185,7 +193,7 @@ function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, plac
 		if (!client) return;
 		Promise.all([getUserReferralStatus(client), getMerchantInformation(client)]).then(([referralStatus, merchantInfo]) => {
 			setHasFetched(true);
-			setContext(resolvePostPurchaseContext(referralStatus, merchantInfo));
+			setContext(resolvePostPurchaseContext(referralStatus, merchantInfo, client.config.metadata?.currency));
 		}).catch((e) => {
 			if (e instanceof FrakRpcError && e.code === RpcErrorCodes.configError) {
 				setHasFetched(true);
@@ -204,17 +212,20 @@ function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, plac
 	const rewardText = useMemo(() => {
 		if (!context?.reward) return void 0;
 		const currency = window.FrakSetup?.client?.config?.metadata?.currency;
-		return formatEstimatedReward(context.reward, currency);
+		return y(context.reward, currency);
 	}, [context?.reward]);
 	const globalComponents = useGlobalComponents();
 	const postPurchaseConfig = placement?.components?.postPurchase ?? globalComponents?.postPurchase;
 	const resolvedBadgeText = propBadgeText ?? postPurchaseConfig?.badgeText;
+	const imageUrl = propImageUrl ?? postPurchaseConfig?.imageUrl;
 	const texts = useMemo(() => {
+		const defaults = componentDefaults[lang].postPurchase;
 		return {
-			message: resolvedVariant === "referee" ? rewardText ? applyRewardPlaceholder(propRefereeText ?? postPurchaseConfig?.refereeText ?? "You just earned {REWARD}! Share with friends to earn even more.", rewardText) : propRefereeText ?? postPurchaseConfig?.refereeNoRewardText ?? "You just earned a reward! Share with friends to earn even more." : rewardText ? applyRewardPlaceholder(propReferrerText ?? postPurchaseConfig?.referrerText ?? "Earn {REWARD} by sharing this with your friends!", rewardText) : propReferrerText ?? postPurchaseConfig?.referrerNoRewardText ?? "Share this with your friends and earn rewards!",
-			cta: rewardText ? applyRewardPlaceholder(propCtaText ?? postPurchaseConfig?.ctaText ?? "Share & earn {REWARD}", rewardText) : propCtaText ?? postPurchaseConfig?.ctaNoRewardText ?? "Share & earn"
+			message: resolvedVariant === "referee" ? rewardText ? b(propRefereeText ?? postPurchaseConfig?.refereeText ?? defaults.refereeText, rewardText) : propRefereeText ?? postPurchaseConfig?.refereeNoRewardText ?? defaults.refereeNoRewardText : rewardText ? b(propReferrerText ?? postPurchaseConfig?.referrerText ?? defaults.referrerText, rewardText) : propReferrerText ?? postPurchaseConfig?.referrerNoRewardText ?? defaults.referrerNoRewardText,
+			cta: rewardText ? b(propCtaText ?? postPurchaseConfig?.ctaText ?? defaults.ctaText, rewardText) : propCtaText ?? postPurchaseConfig?.ctaNoRewardText ?? defaults.ctaNoRewardText
 		};
 	}, [
+		lang,
 		resolvedVariant,
 		rewardText,
 		postPurchaseConfig,
@@ -289,7 +300,7 @@ function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, plac
 							"aria-hidden": "true",
 							className: `${icon} button`,
 							children: /* @__PURE__ */ jsx("path", {
-								d: "M13.8984 11.144C13.9864 11.052 14.1543 11.1114 14.1543 11.2388V11.644C14.1543 13.0509 12.6288 14.1918 10.7471 14.1919C8.86523 14.1919 7.33984 13.051 7.33984 11.644V11.2388C7.33984 11.1114 7.50675 11.052 7.59473 11.144C8.3452 11.9295 9.47906 12.4292 10.7471 12.4292C12.0149 12.4291 13.148 11.9293 13.8984 11.144ZM1.8457 9.64795C1.8457 9.51169 2.01094 9.44452 2.10254 9.54053C2.85304 10.3238 3.98586 10.8247 5.25293 10.8247C5.52246 10.8247 5.78608 10.8026 6.04102 10.7593C6.25744 10.7225 6.46582 10.8816 6.46582 11.1011V12.1704C6.46564 12.319 6.36769 12.4507 6.22266 12.4829C5.91535 12.5512 5.58981 12.5874 5.25293 12.5874C3.3711 12.5874 1.8457 11.4469 1.8457 10.0396V9.64795ZM10.7471 6.20654C12.6288 6.20666 14.1543 7.3475 14.1543 8.75439C14.1541 10.1612 12.6287 11.3012 10.7471 11.3013C8.86535 11.3013 7.34004 10.1612 7.33984 8.75439C7.33984 7.34743 8.86523 6.20654 10.7471 6.20654ZM1.8457 6.8501C1.84597 6.71385 2.01208 6.64848 2.10352 6.74365C2.85393 7.52827 3.98602 8.0278 5.25293 8.02783C5.52282 8.02783 5.78667 8.00448 6.04199 7.96143C6.258 7.92499 6.46582 8.08514 6.46582 8.3042V9.37256C6.46582 9.52127 6.36783 9.65378 6.22266 9.68604C5.91537 9.75429 5.58979 9.79053 5.25293 9.79053C3.3711 9.79048 1.8457 8.64863 1.8457 7.24268V6.8501ZM5.25293 1.80811C7.13481 1.80811 8.66016 2.94856 8.66016 4.35596C8.66008 5.76331 7.13476 6.90381 5.25293 6.90381C3.37115 6.90376 1.84578 5.76328 1.8457 4.35596C1.8457 2.94858 3.3711 1.80815 5.25293 1.80811Z",
+								d: "M13.9 11.14C13.99 11.05 14.15 11.11 14.15 11.24V11.64C14.15 13.05 12.63 14.19 10.75 14.19C8.87 14.19 7.34 13.05 7.34 11.64V11.24C7.34 11.11 7.51 11.05 7.59 11.14C8.35 11.93 9.48 12.43 10.75 12.43C12.01 12.43 13.15 11.93 13.9 11.14ZM1.85 9.65C1.85 9.51 2.01 9.44 2.1 9.54C2.85 10.32 3.99 10.82 5.25 10.82C5.52 10.82 5.79 10.8 6.04 10.76C6.26 10.72 6.47 10.88 6.47 11.1V12.17C6.47 12.32 6.37 12.45 6.22 12.48C5.92 12.55 5.59 12.59 5.25 12.59C3.37 12.59 1.85 11.45 1.85 10.04V9.65ZM10.75 6.21C12.63 6.21 14.15 7.35 14.15 8.75C14.15 10.16 12.63 11.3 10.75 11.3C8.87 11.3 7.34 10.16 7.34 8.75C7.34 7.35 8.87 6.21 10.75 6.21ZM1.85 6.85C1.85 6.71 2.01 6.65 2.1 6.74C2.85 7.53 3.99 8.03 5.25 8.03C5.52 8.03 5.79 8 6.04 7.96C6.26 7.92 6.47 8.09 6.47 8.3V9.37C6.47 9.52 6.37 9.65 6.22 9.69C5.92 9.75 5.59 9.79 5.25 9.79C3.37 9.79 1.85 8.65 1.85 7.24V6.85ZM5.25 1.81C7.13 1.81 8.66 2.95 8.66 4.36C8.66 5.76 7.13 6.9 5.25 6.9C3.37 6.9 1.85 5.76 1.85 4.36C1.85 2.95 3.37 1.81 5.25 1.81Z",
 								fill: "currentColor"
 							})
 						})]

package/dist/rewards-B5VmlrcI.js

@@ -0,0 +1,145 @@
+//#region ../core/dist/getCurrencyAmountKey-DQcwjJiB.js
+const e = {
+	eur: `fr-FR`,
+	usd: `en-US`,
+	gbp: `en-GB`
+};
+function t(t) {
+	return t && t in e ? t : `eur`;
+}
+function n(t) {
+	return t ? e[t] ?? e.eur : e.eur;
+}
+function r$1(e, r) {
+	let i = n(r), a = t(r);
+	return e.toLocaleString(i, {
+		style: `currency`,
+		currency: a,
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 2
+	});
+}
+function i$1(e) {
+	return e ? `${e}Amount` : `eurAmount`;
+}
+//#endregion
+//#region ../core/dist/rewards.js
+function r(e) {
+	return Array.isArray(e) ? e : e.conditions;
+}
+function i(e) {
+	if (typeof e == `number`) return e;
+	if (typeof e == `string` && e.trim() !== ``) {
+		let t = Number(e);
+		return Number.isFinite(t) ? t : void 0;
+	}
+}
+function a(e, t, n) {
+	let o = [];
+	for (let s of r(e)) {
+		if (`logic` in s) {
+			o.push(...a(s, t, n));
+			continue;
+		}
+		if (s.field === t && n.has(s.operator)) {
+			let e = i(s.value);
+			e != null && o.push(e);
+		}
+	}
+	return o;
+}
+const o = new Set([
+	`gt`,
+	`gte`,
+	`between`
+]), s = new Set([`gt`, `gte`]);
+function c(e) {
+	let t = a(e, `purchase.amount`, o);
+	return t.length > 0 ? Math.min(...t) : void 0;
+}
+function l(e) {
+	let t = a(e, `time.timestamp`, s);
+	if (t.length !== 0) return /* @__PURE__ */ new Date(Math.min(...t) * 1e3);
+}
+function h(e, t) {
+	switch (e.payoutType) {
+		case `fixed`: return e.amount[t];
+		case `percentage`: return e.maxAmount?.[t] ?? 0;
+		case `tiered`: return e.tiers.reduce((e, n) => `amount` in n ? Math.max(e, n.amount[t]) : e, 0);
+	}
+}
+function g(e) {
+	return e.payoutType === `percentage` ? e.percent : e.payoutType === `tiered` ? e.tiers.reduce((e, t) => `percent` in t ? Math.max(e, t.percent) : e, 0) : 0;
+}
+function _(e, t) {
+	let n = h(e, t);
+	return n > 0 ? n : g(e) * 1e-6;
+}
+function v(r, i) {
+	let a = t(i), o = i$1(a);
+	switch (r.payoutType) {
+		case `fixed`: return r$1(Math.round(r.amount[o]), a);
+		case `percentage`: return `${r.percent} %`;
+		case `tiered`: {
+			let t = h(r, o);
+			if (t > 0) return r$1(Math.round(t), a);
+			let n = g(r);
+			return n > 0 ? `${n} %` : r$1(0, a);
+		}
+	}
+}
+function y(e, r) {
+	if (e && !(_(e, i$1(t(r))) <= 0)) return v(e, r);
+}
+function b(e, t) {
+	return t ? e.replaceAll(`{REWARD}`, t) : e.replaceAll(`{REWARD}`, ``);
+}
+function x(e, t) {
+	return e.expiresAt != null && new Date(e.expiresAt).getTime() <= t;
+}
+function S(e, t) {
+	let n = l(e.conditions);
+	return n == null || n.getTime() <= t;
+}
+function C(e, t) {
+	return t === `referee` ? e.referee : e.referrer;
+}
+function w(e, t, n) {
+	let r = C(e, n);
+	return r ? _(r, t) : 0;
+}
+function T(e, r = {}) {
+	let i = (r.now ?? /* @__PURE__ */ new Date()).getTime(), a = r.audience ?? `referrer`, o = i$1(t(r.currency)), s = (r.targetInteraction ? e.filter((e) => e.interactionTypeKey === r.targetInteraction) : e).filter((e) => !x(e, i)), c = s.filter((e) => S(e, i));
+	if (c.length > 0) return {
+		campaign: c.reduce((e, t) => w(t, o, a) > w(e, o, a) ? t : e),
+		status: `live`
+	};
+	let u = s.map((e) => ({
+		campaign: e,
+		startsAt: l(e.conditions)
+	})).filter((e) => e.startsAt != null);
+	if (u.length === 0) return;
+	let d = u.reduce((e, t) => t.startsAt.getTime() < e.startsAt.getTime() ? t : e);
+	return {
+		campaign: d.campaign,
+		status: `upcoming`,
+		startsAt: d.startsAt
+	};
+}
+function E(t, n = {}) {
+	let r = T(t, n);
+	if (!r) return;
+	let i = C(r.campaign, n.audience ?? `referrer`);
+	if (!i) return;
+	let a = y(i, n.currency);
+	if (!a) return;
+	let o = c(r.campaign.conditions), s = o == null ? void 0 : r$1(o, n.currency), l = r.campaign.defaultLockupSeconds, u = l && l > 0 ? Math.round(l / 86400) : void 0;
+	return {
+		formatted: a,
+		payoutType: i.payoutType,
+		minPurchaseAmount: s,
+		lockupDurationDays: u
+	};
+}
+//#endregion
+export { y as i, T as n, b as r, E as t };

package/dist/useGlobalComponents-CZ7Sh2tZ.js

@@ -0,0 +1,17 @@
+import { a as subscribeSdkConfig } from "./usePlacement-4PoDbn2X.js";
+import { sdkConfigStore } from "@frak-labs/core-sdk";
+import { useSyncExternalStore } from "preact/compat";
+//#region src/hooks/useGlobalComponents.ts
+/**
+* Subscribe to the global component defaults from the SDK config store.
+* These serve as fallbacks when no placement-level override exists.
+*
+* Backed by `useSyncExternalStore`: the snapshot is the stored `components`
+* object reference (stable between `frak:config` dispatches), so the component
+* only re-renders when the global components actually change.
+*/
+function useGlobalComponents() {
+	return useSyncExternalStore(subscribeSdkConfig, () => sdkConfigStore.getConfig().components);
+}
+//#endregion
+export { useGlobalComponents as t };

package/dist/{useLightDomStyles-DPKMhggr.js → useLightDomStyles-DphuQhvx.js}

@@ -1,4 +1,4 @@
-import { r as lightDomBaseCss } from "./usePlacement-DTN6H6vW.js";
+import { r as lightDomBaseCss } from "./usePlacement-4PoDbn2X.js";
 import { useEffect } from "preact/hooks";
 //#region src/styles/styleManager.ts
 function ensureStyle(id, css) {

package/dist/{usePlacement-DTN6H6vW.js → usePlacement-4PoDbn2X.js}

@@ -3,7 +3,8 @@ import * as coreSdkIndex from "@frak-labs/core-sdk";
 import { decompressJsonFromB64, deleteQueryParamCaseInsensitive, getQueryParamCaseInsensitive, sdkConfigStore, setupClient, trackEvent, withCache } from "@frak-labs/core-sdk";
 import * as coreSdkActions from "@frak-labs/core-sdk/actions";
 import { displaySharingPage } from "@frak-labs/core-sdk/actions";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
+import { useSyncExternalStore } from "preact/compat";
 //#region src/actions/sharingPage.ts
 async function openSharingPage(targetInteraction, placement, options) {
 	if (!window.FrakSetup?.client) {
@@ -341,6 +342,49 @@ function useClientReady() {
 	};
 }
 //#endregion
+//#region src/hooks/sdkConfigSubscription.ts
+/**
+* Shared `useSyncExternalStore` plumbing for the SDK config store.
+*
+* The resolved merchant config lives on `window.__frakSdkConfig` and notifies
+* via the `frak:config` CustomEvent (see `@frak-labs/core-sdk` `sdkConfigStore`).
+* A single module-level `subscribe` keeps the reference stable across renders
+* so `useSyncExternalStore` never re-subscribes, and lets every config-driven
+* hook (`useLang`, `usePlacement`, `useGlobalComponents`) share one listener
+* shape instead of each hand-rolling an effect + version counter.
+*/
+/**
+* Subscribe to resolved-config changes. Stable reference (module-level) so
+* `useSyncExternalStore` treats it as a constant store subscription.
+*/
+function subscribeSdkConfig(onStoreChange) {
+	if (typeof window === "undefined") return () => {};
+	window.addEventListener("frak:config", onStoreChange);
+	return () => window.removeEventListener("frak:config", onStoreChange);
+}
+//#endregion
+//#region src/hooks/useLang.ts
+/**
+* Detect a supported language from the browser, defaulting to English.
+* Only `en` / `fr` are recognised — anything else falls back to `en`.
+*/
+function detectBrowserLang() {
+	if (typeof navigator === "undefined") return "en";
+	return navigator.language?.split("-")[0] === "fr" ? "fr" : "en";
+}
+/**
+* Resolve the active display language for the Web Components.
+*
+* Precedence: resolved SDK/backend config `lang` (driven by `metadata.lang`
+* or the backend `/resolve` response) → browser language → `en`. Backed by
+* `useSyncExternalStore` with a bare-string snapshot, so a `frak:config`
+* dispatch only re-renders the component when the resolved language actually
+* changes (see `@/i18n/defaults`).
+*/
+function useLang() {
+	return useSyncExternalStore(subscribeSdkConfig, () => sdkConfigStore.getConfig().lang ?? detectBrowserLang());
+}
+//#endregion
 //#region src/styles/sharedCss.ts
 const sharedCss = `
 :host {
@@ -409,17 +453,15 @@ const lightDomBaseCss = `
 function getPlacement(id) {
 	return sdkConfigStore.getConfig().placements?.[id];
 }
+/**
+* Subscribe to a single resolved placement from the SDK config store.
+*
+* Backed by `useSyncExternalStore`: the snapshot is the stored placement
+* object reference (stable between `frak:config` dispatches), so the component
+* only re-renders when that placement actually changes.
+*/
 function usePlacement(placementId) {
-	const [configVersion, setConfigVersion] = useState(0);
-	useEffect(() => {
-		const onConfig = (_e) => {
-			setConfigVersion((v) => v + 1);
-		};
-		window.addEventListener("frak:config", onConfig);
-		setConfigVersion((v) => v + 1);
-		return () => window.removeEventListener("frak:config", onConfig);
-	}, []);
-	return useMemo(() => placementId ? getPlacement(placementId) : void 0, [placementId, configVersion]);
+	return useSyncExternalStore(subscribeSdkConfig, useCallback(() => placementId ? getPlacement(placementId) : void 0, [placementId]));
 }
 //#endregion
-export { registerWebComponent as a, useClientReady as i, buildStyleContent as n, sanitizeProductList as o, lightDomBaseCss as r, openSharingPage as s, usePlacement as t };
+export { subscribeSdkConfig as a, sanitizeProductList as c, useLang as i, openSharingPage as l, buildStyleContent as n, useClientReady as o, lightDomBaseCss as r, registerWebComponent as s, usePlacement as t };

package/dist/useReward-DD2mMUN0.js

@@ -0,0 +1,39 @@
+import { t as E } from "./rewards-B5VmlrcI.js";
+import { getMerchantInformation } from "@frak-labs/core-sdk/actions";
+import { useEffect, useState } from "preact/hooks";
+//#region src/hooks/useReward.ts
+/**
+* Hook to fetch and format the best reward for a given interaction type.
+*
+* Calls `getMerchantInformation`, picks the highest-value reward across all
+* matching live campaigns for the requested `audience` side, and returns it as
+* a formatted string.
+*
+* @param shouldUseReward - Whether to fetch the reward at all
+* @param targetInteraction - Optional filter by interaction type (e.g. "purchase")
+* @param audience - Reward side to display: `"referrer"` (default) or `"referee"`
+* @returns Object containing the formatted reward string, or undefined if unavailable
+*/
+function useReward(shouldUseReward, targetInteraction, audience) {
+	const [reward, setReward] = useState(void 0);
+	useEffect(() => {
+		if (!shouldUseReward) return;
+		const client = window.FrakSetup?.client;
+		if (!client) return;
+		getMerchantInformation(client).then((merchantInfo) => {
+			const best = E(merchantInfo.rewards, {
+				currency: client.config.metadata?.currency,
+				targetInteraction,
+				audience
+			});
+			if (best && best.payoutType !== "percentage") setReward(best.formatted);
+		}).catch(() => {});
+	}, [
+		shouldUseReward,
+		targetInteraction,
+		audience
+	]);
+	return { reward };
+}
+//#endregion
+export { useReward as t };

package/package.json

@@ -11,7 +11,7 @@
       "url": "https://twitter.com/QNivelais"
     }
   ],
-  "version": "1.0.10",
+  "version": "1.0.11-beta.b456c7f7",
   "description": "Frak Wallet components, helping any person to interact with the Frak wallet.",
   "repository": {
     "url": "https://github.com/frak-id/wallet",
@@ -66,6 +66,12 @@
       "import": "./dist/banner.js",
       "types": "./dist/banner.d.ts"
     },
+    "./i18n/defaults": {
+      "development": "./src/i18n/defaults.ts",
+      "production": "./src/i18n/defaults.ts",
+      "import": "./dist/i18n/defaults.js",
+      "types": "./dist/i18n/defaults.d.ts"
+    },
     "./cdn": {
       "import": "./cdn/components.js"
     },
@@ -86,8 +92,8 @@
     "publish": "echo 'Publishing components...'"
   },
   "dependencies": {
-    "@frak-labs/core-sdk": "1.1.5",
-    "@frak-labs/frame-connector": "0.2.0",
+    "@frak-labs/core-sdk": "1.1.6-beta.b456c7f7",
+    "@frak-labs/frame-connector": "0.2.0-beta.b456c7f7",
     "preact": "^10.29.0",
     "preact-custom-element": "^4.6.0",
     "@frak-labs/design-system": "0.0.0"