@frak-labs/components 0.0.26 → 1.0.0-beta.0cd79998

package/dist/buttonShare.js

@@ -1,17 +1,21 @@
-import { n as registerWebComponent, r as getModalBuilderSteps, t as useClientReady } from "./useClientReady-iCtUeDsc.js";
-import { t as Spinner } from "./Spinner-1CZC_zy6.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 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/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
 function useCopyToClipboard(options = {}) {
@@ -53,7 +57,6 @@ function useCopyToClipboard(options = {}) {
 		copied
 	};
 }
-
 //#endregion
 //#region src/components/ButtonShare/components/ErrorMessage.tsx
 const styles = {
@@ -164,66 +167,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 +210,68 @@ 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, preview }) {
+	const isPreview = !!preview;
+	const placement = usePlacement(placementId);
+	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 ?? "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 ?? applyRewardPlaceholder(resolvedText, void 0);
+		return resolvedText.includes("{REWARD}") ? applyRewardPlaceholder(resolvedText, reward) : `${resolvedText} ${reward}`;
 	}, [
 		shouldUseReward,
-		text,
-		noRewardText,
+		resolvedText,
+		resolvedNoRewardText,
 		reward
 	]);
-	/**
-	* The action when the button is clicked
-	*/
 	const onClick = useCallback(async () => {
+		if (isPreview) return;
 		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);
+	}, [
+		isPreview,
+		resolvedClickAction,
+		handleShare,
+		resolvedTargetInteraction,
+		placementId
+	]);
+	if (!isPreview && (!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: !isPreview && !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",
+	"preview"
+], { 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
 /**
@@ -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
 /**

package/dist/buttonWallet.js

@@ -1,10 +1,8 @@
-import { i as openWalletModal, n as registerWebComponent, t as useClientReady } from "./useClientReady-iCtUeDsc.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 { 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) {
 	return /* @__PURE__ */ jsxs("svg", {
@@ -22,22 +20,48 @@ function GiftIcon(props) {
 		})]
 	});
 }
-
-//#endregion
-//#region src/components/ButtonWallet/ButtonWallet.module.css?css_module
-const classes = {
-	"reward": "Kl62ia_reward",
-	"button__left": "Kl62ia_button__left",
-	"button": "Kl62ia_button",
-	"button__right": "Kl62ia_button__right"
-};
-const _reward0 = classes["reward"];
-const _button__left0 = classes["button__left"];
-const _button0 = classes["button"];
-const _button__right0 = classes["button__right"];
-
 //#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 +94,57 @@ const _button__right0 = classes["button__right"];
 * <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 };
+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
 /**
@@ -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,9 +46,10 @@ type OpenInAppButtonProps = {
  * ```
  */
 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,10 +1,8 @@
-import { n as registerWebComponent, t as useClientReady } from "./useClientReady-iCtUeDsc.js";
-import { t as Spinner } from "./Spinner-1CZC_zy6.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 { 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
 /**
 * Check if the current device is a mobile device
@@ -21,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";
@@ -47,12 +43,6 @@ function openFrakWalletApp(path = DEFAULT_PATH) {
 		if (client) trackEvent(client, "app_not_installed");
 	} });
 }
-
-//#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 +71,36 @@ 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 };
+export { OpenInAppButton };