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

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";
 };
 //#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,18 +1,12 @@
-import { n as registerWebComponent, r as getModalBuilderSteps, t as useClientReady } from "./useClientReady-0vKBG0-p.js";
-import { t as Spinner } from "./Spinner-Btnwk01x.js";
+import { a as registerWebComponent, i as useClientReady, s as openEmbeddedWallet, t as usePlacement } from "./usePlacement-D99UDsVs.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-ZGaYUErZ.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 { modalBuilder } 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"];
-
-//#endregion
 //#region src/hooks/useCopyToClipboard.ts
 function useCopyToClipboard(options = {}) {
 	const { successDuration = 2e3 } = options;
@@ -171,9 +165,9 @@ function ErrorMessage({ debugInfo }) {
 * Open the share modal
 *
 * @description
-* This function will open the share modal with the configuration provided in the `window.FrakSetup.modalShareConfig` object.
+* This function will open the share modal, lazily creating a modal builder on demand.
 */
-function useShareModal(targetInteraction) {
+function useShareModal(targetInteraction, placement) {
 	const [debugInfo, setDebugInfo] = useState(void 0);
 	const [isError, setIsError] = useState(false);
 	return {
@@ -184,13 +178,12 @@ function useShareModal(targetInteraction) {
 				setIsError(true);
 				return;
 			}
-			const modalBuilderSteps = getModalBuilderSteps();
-			if (!modalBuilderSteps) throw new Error("modalBuilderSteps not found");
+			const builder = modalBuilder(window.FrakSetup.client, {});
 			try {
-				await modalBuilderSteps.sharing(window.FrakSetup?.modalShareConfig ?? {}).display((metadata) => ({
+				await builder.sharing({}).display((metadata) => ({
 					...metadata,
 					targetInteraction
-				}));
+				}), placement);
 			} catch (e) {
 				if (e instanceof FrakRpcError && e.code === RpcErrorCodes.clientAborted) {
 					console.debug("User aborted the modal");
@@ -205,7 +198,7 @@ function useShareModal(targetInteraction) {
 				setIsError(true);
 				console.error("Error while opening the modal", e);
 			}
-		}, [targetInteraction]),
+		}, [targetInteraction, placement]),
 		isError,
 		debugInfo
 	};
@@ -214,16 +207,6 @@ function useShareModal(targetInteraction) {
 //#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 +247,64 @@ 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 ?? "embedded-wallet", [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 === "share-modal") await handleShare();
+		else openEmbeddedWallet(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
 /**

package/dist/buttonWallet.js

@@ -1,9 +1,8 @@
-import { i as openWalletModal, n as registerWebComponent, t as useClientReady } from "./useClientReady-0vKBG0-p.js";
+import { a as registerWebComponent, i as useClientReady, n as buildStyleContent, o as openWalletModal, t as usePlacement } from "./usePlacement-D99UDsVs.js";
 import { t as useReward } from "./useReward-DAkT-7wT.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/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 registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-D99UDsVs.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-ZGaYUErZ.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/useLightDomStyles-ZGaYUErZ.js

@@ -0,0 +1,44 @@
+import { r as lightDomBaseCss } from "./usePlacement-D99UDsVs.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) {
+	useEffect(() => {
+		styleManager.injectBase(tag, lightDomBaseCss);
+	}, [tag]);
+	useEffect(() => {
+		if (!placementId || !placementCss) return;
+		styleManager.injectPlacement(tag, placementId, placementCss);
+	}, [
+		tag,
+		placementId,
+		placementCss
+	]);
+}
+
+//#endregion
+export { useLightDomStyles as t };