@frak-labs/components 0.0.26-beta.1c24fe7c → 0.0.26-beta.53dfa7b2

package/cdn/{useLightDomStyles.D895e4W1.js → useLightDomStyles.B33IA3q5.js}

@@ -1 +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};
+import{t as e}from"./loader.js";import{a as t,u as n}from"./jsxRuntime.module.GTd8MQxp.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 → useReward.CvZWCurW.js}

@@ -1 +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};
+import{_ as e,b as t,l as n}from"./loader.js";import{c as r,u as i}from"./jsxRuntime.module.GTd8MQxp.js";import{t as a}from"./formatReward.DXMr8a-D.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 → useShareModal.BJBvkHbY.js}

@@ -1 +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};
+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.GTd8MQxp.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

@@ -1,5 +1,5 @@
 import { InteractionTypeKey } from "@frak-labs/core-sdk";
-import * as preact from "preact";
+import * as _$preact from "preact";
 
 //#region src/components/Banner/types.d.ts
 /**
@@ -20,6 +20,40 @@ type BannerProps = {
    * When omitted, the best reward across all interaction types is shown.
    */
   interaction?: InteractionTypeKey;
+  /**
+   * Override the referral banner title.
+   */
+  referralTitle?: string;
+  /**
+   * Override the referral banner description.
+   */
+  referralDescription?: string;
+  /**
+   * Override the referral banner CTA button text.
+   */
+  referralCta?: string;
+  /**
+   * Override the in-app browser banner title.
+   */
+  inappTitle?: string;
+  /**
+   * Override the in-app browser banner description.
+   */
+  inappDescription?: string;
+  /**
+   * Override the in-app browser banner CTA button text.
+   */
+  inappCta?: string;
+  /**
+   * When set, forces the banner to render in preview mode (e.g. in Shopify theme editor).
+   * Bypasses normal event/browser detection and shows static content.
+   */
+  preview?: string;
+  /**
+   * Which banner variant to preview: "referral" or "inapp".
+   * Only used when {@link preview} is set. Defaults to "referral".
+   */
+  previewMode?: "referral" | "inapp";
 };
 //#endregion
 //#region src/components/Banner/Banner.d.ts
@@ -55,8 +89,16 @@ type BannerProps = {
 declare function Banner({
   placement: placementId,
   classname,
-  interaction
-}: BannerProps): preact.JSX.Element | null;
+  interaction,
+  referralTitle: propReferralTitle,
+  referralDescription: propReferralDescription,
+  referralCta: propReferralCta,
+  inappTitle: propInappTitle,
+  inappDescription: propInappDescription,
+  inappCta: propInappCta,
+  preview,
+  previewMode
+}: BannerProps): _$preact.JSX.Element | null;
 //#endregion
 //#region src/components/Banner/index.d.ts
 /**

package/dist/banner.js

@@ -1,11 +1,10 @@
-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 { a as useClientReady, n as bannerBaseCss, o as registerWebComponent, t as usePlacement } from "./usePlacement-CHEgrdvN.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-B5Y_fH4K.js";
+import { t as useReward } from "./useReward-XF2hB_C_.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.
@@ -93,44 +92,59 @@ function BrowserIcon() {
 * <frak-banner classname="my-custom-banner"></frak-banner>
 * ```
 */
-function Banner({ placement: placementId, classname = "", interaction }) {
+function Banner({ placement: placementId, classname = "", interaction, referralTitle: propReferralTitle, referralDescription: propReferralDescription, referralCta: propReferralCta, inappTitle: propInappTitle, inappDescription: propInappDescription, inappCta: propInappCta, preview, previewMode }) {
+	const isPreview = !!preview;
+	const resolvedPreviewMode = previewMode === "inapp" ? "inapp" : "referral";
 	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 [mode, setMode] = useState(() => {
+		if (isPreview) return resolvedPreviewMode;
+		return isInAppBrowser ? "inapp" : null;
+	});
+	useEffect(() => {
+		if (isPreview) setMode(resolvedPreviewMode);
+	}, [isPreview, resolvedPreviewMode]);
 	const { reward } = useReward(mode === "referral" && isClientReady, interaction);
 	useEffect(() => {
-		if (mode === "inapp") return;
+		if (isPreview || mode === "inapp") return;
 		const handler = () => setMode("referral");
 		window.addEventListener(REFERRAL_SUCCESS_EVENT, handler);
 		return () => window.removeEventListener(REFERRAL_SUCCESS_EVENT, handler);
-	}, [mode]);
+	}, [isPreview, mode]);
 	const handleAction = useCallback(() => {
+		if (isPreview) return;
 		if (mode === "referral") setDismissed(true);
 		else redirectToExternalBrowser(window.location.href);
-	}, [mode]);
+	}, [isPreview, 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"
+				title: propReferralTitle ?? bannerConfig?.referralTitle ?? defaultTitle,
+				description: propReferralDescription ?? bannerConfig?.referralDescription ?? "Earn rewards after your purchase via the Frak partner app.",
+				cta: propReferralCta ?? 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"
+			title: propInappTitle ?? bannerConfig?.inappTitle ?? "Open in your browser",
+			description: propInappDescription ?? bannerConfig?.inappDescription ?? "For a better experience and to earn your rewards, open this page in your default browser.",
+			cta: propInappCta ?? bannerConfig?.inappCta ?? "Open browser"
 		};
 	}, [
 		mode,
 		reward,
-		bannerConfig
+		bannerConfig,
+		propReferralTitle,
+		propReferralDescription,
+		propReferralCta,
+		propInappTitle,
+		propInappDescription,
+		propInappCta
 	]);
-	if (!shouldRender || isHidden || dismissed || !mode) return null;
+	if (!isPreview && (!shouldRender || isHidden || dismissed || !mode)) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		class: [
 			"banner",
@@ -162,10 +176,20 @@ function Banner({ placement: placementId, classname = "", interaction }) {
 		]
 	});
 }
-
 //#endregion
 //#region src/components/Banner/index.ts
-registerWebComponent(Banner, "frak-banner", ["placement", "classname"], { shadow: false });
-
+registerWebComponent(Banner, "frak-banner", [
+	"placement",
+	"classname",
+	"interaction",
+	"referralTitle",
+	"referralDescription",
+	"referralCta",
+	"inappTitle",
+	"inappDescription",
+	"inappCta",
+	"preview",
+	"previewMode"
+], { shadow: false });
 //#endregion
-export { Banner };
+export { Banner };

package/dist/buttonShare.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/ButtonShare/types.d.ts
 /**
@@ -88,7 +88,7 @@ declare function ButtonShare({
   noRewardText,
   targetInteraction,
   clickAction: rawClickAction
-}: ButtonShareProps): preact.JSX.Element | null;
+}: ButtonShareProps): _$preact.JSX.Element | null;
 //#endregion
 //#region src/components/ButtonShare/index.d.ts
 /**

package/dist/buttonShare.js

@@ -1,12 +1,11 @@
-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 { a as useClientReady, c as openEmbeddedWallet, o as registerWebComponent, t as usePlacement } from "./usePlacement-CHEgrdvN.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-B5Y_fH4K.js";
+import { t as useReward } from "./useReward-XF2hB_C_.js";
+import { t as useShareModal } from "./useShareModal-Bmlk3eBJ.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";
-
 //#region src/utils/sharingPage.ts
 async function openSharingPage(targetInteraction, placement) {
 	if (!window.FrakSetup?.client) {
@@ -15,7 +14,6 @@ async function openSharingPage(targetInteraction, placement) {
 	}
 	await displaySharingPage(window.FrakSetup.client, { metadata: { ...targetInteraction && { targetInteraction } } }, placement);
 }
-
 //#endregion
 //#region src/hooks/useCopyToClipboard.ts
 function useCopyToClipboard(options = {}) {
@@ -57,7 +55,6 @@ function useCopyToClipboard(options = {}) {
 		copied
 	};
 }
-
 //#endregion
 //#region src/components/ButtonShare/components/ErrorMessage.tsx
 const styles = {
@@ -168,7 +165,6 @@ function ErrorMessage({ debugInfo }) {
 		]
 	});
 }
-
 //#endregion
 //#region src/components/ButtonShare/ButtonShare.tsx
 /**
@@ -259,7 +255,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", [
@@ -271,6 +266,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 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 { a as useClientReady, o as registerWebComponent, r as buildStyleContent, s as openWalletModal, t as usePlacement } from "./usePlacement-CHEgrdvN.js";
+import { t as useReward } from "./useReward-XF2hB_C_.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-6JQldDEC.js → formatReward-_UYA3aHE.js}

@@ -1,5 +1,4 @@
 import { formatAmount, getCurrencyAmountKey, getSupportedCurrency } from "@frak-labs/core-sdk";
-
 //#region src/utils/formatReward.ts
 /**
 * Format an {@link EstimatedReward} into a human-readable string.
@@ -23,6 +22,5 @@ function formatEstimatedReward(reward, currency, basketAmount) {
 		}
 	}
 }
-
 //#endregion
-export { formatEstimatedReward as t };
+export { formatEstimatedReward 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 useClientReady, o as registerWebComponent, t as usePlacement } from "./usePlacement-BbMuz8_A.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-DukxuNnJ.js";
+import { a as useClientReady, o as registerWebComponent, t as usePlacement } from "./usePlacement-CHEgrdvN.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-B5Y_fH4K.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

@@ -1,4 +1,4 @@
-import * as preact from "preact";
+import * as _$preact from "preact";
 
 //#region src/components/PostPurchase/types.d.ts
 /**
@@ -41,6 +41,26 @@ type PostPurchaseProps = {
    * 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
@@ -80,8 +100,12 @@ declare function PostPurchase({
   merchantId,
   placement: placementId,
   classname,
-  variant: forcedVariant
-}: PostPurchaseProps): preact.JSX.Element | null;
+  variant: forcedVariant,
+  badgeText: propBadgeText,
+  referrerText: propReferrerText,
+  refereeText: propRefereeText,
+  ctaText: propCtaText
+}: PostPurchaseProps): _$preact.JSX.Element | null;
 //#endregion
 //#region src/components/PostPurchase/index.d.ts
 /**