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

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,103 @@
+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;
+  /**
+   * 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;
+};
+//#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,
+  referralTitle: propReferralTitle,
+  referralDescription: propReferralDescription,
+  referralCta: propReferralCta,
+  inappTitle: propInappTitle,
+  inappDescription: propInappDescription,
+  inappCta: propInappCta
+}: 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,187 @@
+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, referralTitle: propReferralTitle, referralDescription: propReferralDescription, referralCta: propReferralCta, inappTitle: propInappTitle, inappDescription: propInappDescription, inappCta: propInappCta }) {
+	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: 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: 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,
+		propReferralTitle,
+		propReferralDescription,
+		propReferralCta,
+		propInappTitle,
+		propInappDescription,
+		propInappCta
+	]);
+	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",
+	"interaction",
+	"referralTitle",
+	"referralDescription",
+	"referralCta",
+	"inappTitle",
+	"inappDescription",
+	"inappCta"
+], { shadow: false });
+
+//#endregion
+export { Banner };

package/dist/buttonShare.d.ts

@@ -7,6 +7,7 @@ import * as preact from "preact";
  * @inline
  */
 type ButtonShareProps = {
+  placement?: string;
   /**
    * Text to display on the button
    *  - To specify where the reward should be displayed, use the placeholder `{REWARD}`, e.g. `Share and earn up to \{REWARD\}!`
@@ -31,10 +32,10 @@ type ButtonShareProps = {
    */
   targetInteraction?: InteractionTypeKey;
   /**
-   * Do we display the wallet modal instead of the share modal?
-   * @defaultValue `false`
+   * Which UI to open on click
+   * @defaultValue `"embedded-wallet"`
    */
-  showWallet?: boolean;
+  clickAction?: "embedded-wallet" | "share-modal" | "sharing-page";
 };
 //#endregion
 //#region src/components/ButtonShare/ButtonShare.d.ts
@@ -80,13 +81,14 @@ type ButtonShareProps = {
  * @see {@link @frak-labs/core-sdk!actions.getMerchantInformation | `getMerchantInformation()`} for more info about the estimated reward fetching
  */
 declare function ButtonShare({
+  placement: placementId,
   text,
   classname,
   useReward: rawUseReward,
   noRewardText,
   targetInteraction,
-  showWallet: rawShowWallet
-}: ButtonShareProps): preact.JSX.Element;
+  clickAction: rawClickAction
+}: ButtonShareProps): preact.JSX.Element | null;
 //#endregion
 //#region src/components/ButtonShare/index.d.ts
 /**

package/dist/buttonShare.js

@@ -1,16 +1,20 @@
-import { n as registerWebComponent, r as getModalBuilderSteps, t as useClientReady } from "./useClientReady-0vKBG0-p.js";
-import { t as Spinner } from "./Spinner-Btnwk01x.js";
-import { t as useReward } from "./useReward-DAkT-7wT.js";
-import { DebugInfoGatherer, trackEvent } from "@frak-labs/core-sdk";
-import { displayEmbeddedWallet } from "@frak-labs/core-sdk/actions";
-import { cx } from "class-variance-authority";
+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/components/ButtonShare/ButtonShare.module.css?css_module
-const classes = { "buttonShare": "nOB7Uq_buttonShare" };
-const _buttonShare0 = classes["buttonShare"];
+//#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
@@ -165,65 +169,9 @@ function ErrorMessage({ debugInfo }) {
 	});
 }
 
-//#endregion
-//#region src/components/ButtonShare/hooks/useShareModal.ts
-/**
-* Open the share modal
-*
-* @description
-* This function will open the share modal with the configuration provided in the `window.FrakSetup.modalShareConfig` object.
-*/
-function useShareModal(targetInteraction) {
-	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 modalBuilderSteps = getModalBuilderSteps();
-			if (!modalBuilderSteps) throw new Error("modalBuilderSteps not found");
-			try {
-				await modalBuilderSteps.sharing(window.FrakSetup?.modalShareConfig ?? {}).display((metadata) => ({
-					...metadata,
-					targetInteraction
-				}));
-			} 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]),
-		isError,
-		debugInfo
-	};
-}
-
 //#endregion
 //#region src/components/ButtonShare/ButtonShare.tsx
 /**
-* Open the embedded wallet modal
-*
-* @description
-* This function will open the wallet modal with the configuration provided in the `window.FrakSetup.modalWalletConfig` object.
-*/
-async function modalEmbeddedWallet() {
-	if (!window.FrakSetup?.client) throw new Error("Frak client not found");
-	await displayEmbeddedWallet(window.FrakSetup.client, window.FrakSetup?.modalWalletConfig ?? {});
-}
-/**
 * Button to share the current page
 *
 * @param args
@@ -264,48 +212,65 @@ async function modalEmbeddedWallet() {
 * @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 ButtonShare({ text = "Share and earn!", classname = "", useReward: rawUseReward, noRewardText, targetInteraction, showWallet: rawShowWallet }) {
-	const shouldUseReward = useMemo(() => rawUseReward !== void 0, [rawUseReward]);
-	const showWallet = useMemo(() => rawShowWallet !== void 0, [rawShowWallet]);
-	const { isClientReady } = useClientReady();
-	const { reward } = useReward(shouldUseReward && isClientReady, targetInteraction);
-	const { handleShare, isError, debugInfo } = useShareModal(targetInteraction);
-	/**
-	* Compute the text we will display
-	*/
+function ButtonShare({ placement: placementId, text = "Share and earn!", classname = "", useReward: rawUseReward, noRewardText, targetInteraction, clickAction: rawClickAction }) {
+	const placement = usePlacement(placementId);
+	const componentConfig = placement?.components?.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 ?? "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 text;
-		if (!reward) return noRewardText ?? text.replace("{REWARD}", "");
-		return text.includes("{REWARD}") ? text.replace("{REWARD}", reward) : `${text} ${reward}`;
+		if (!shouldUseReward) return resolvedText;
+		if (!reward) return resolvedNoRewardText ?? resolvedText.replace("{REWARD}", "");
+		return resolvedText.includes("{REWARD}") ? resolvedText.replace("{REWARD}", reward) : `${resolvedText} ${reward}`;
 	}, [
 		shouldUseReward,
-		text,
-		noRewardText,
+		resolvedText,
+		resolvedNoRewardText,
 		reward
 	]);
-	/**
-	* The action when the button is clicked
-	*/
 	const onClick = useCallback(async () => {
 		trackEvent(window.FrakSetup.client, "share_button_clicked");
-		if (showWallet) await modalEmbeddedWallet();
-		else await handleShare();
-	}, [showWallet, handleShare]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+		if (resolvedClickAction === "embedded-wallet") openEmbeddedWallet(resolvedTargetInteraction, placementId);
+		else if (resolvedClickAction === "share-modal") await handleShare();
+		else openSharingPage(resolvedTargetInteraction, placementId);
+	}, [
+		resolvedClickAction,
+		handleShare,
+		resolvedTargetInteraction,
+		placementId
+	]);
+	if (!shouldRender || isHidden) return null;
+	const buttonClass = [
+		"button",
+		"button__fadeIn",
+		classname
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: cx(classes.buttonShare, classname, "override"),
+		disabled: !isClientReady,
+		class: buttonClass,
 		onClick,
-		children: [
-			!isClientReady && /* @__PURE__ */ jsx(Spinner, {}),
-			" ",
-			btnText
-		]
+		children: btnText
 	}), isError && /* @__PURE__ */ jsx(ErrorMessage, { debugInfo })] });
 }
 
 //#endregion
 //#region src/components/ButtonShare/index.ts
-registerWebComponent(ButtonShare, "frak-button-share", ["text"], { shadow: false });
+registerWebComponent(ButtonShare, "frak-button-share", [
+	"text",
+	"placement",
+	"classname",
+	"clickAction",
+	"useReward",
+	"noRewardText",
+	"targetInteraction"
+], { shadow: false });
 
 //#endregion
 export { ButtonShare };

package/dist/buttonWallet.d.ts

@@ -7,6 +7,7 @@ import * as preact from "preact";
  * @inline
  */
 type ButtonWalletProps = {
+  placement?: string;
   /**
    * Classname to apply to the button
    */
@@ -55,14 +56,21 @@ type ButtonWalletProps = {
  * <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
  */
 declare function ButtonWallet({
+  placement: placementId,
   classname,
   useReward: rawUseReward,
   targetInteraction
-}: ButtonWalletProps): preact.JSX.Element;
+}: ButtonWalletProps): preact.JSX.Element | null;
 //#endregion
 //#region src/components/ButtonWallet/index.d.ts
 /**