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

package/dist/buttonWallet.js

@@ -1,10 +1,8 @@
-import { i as openWalletModal, n as registerWebComponent, t as useClientReady } from "./useClientReady-0vKBG0-p.js";
-import { t as useReward } from "./useReward-DAkT-7wT.js";
+import { a as useClientReady, o as registerWebComponent, r as buildStyleContent, s as openWalletModal, t as usePlacement } from "./usePlacement-BKWDIvXP.js";
+import { t as useReward } from "./useReward-XF2hB_C_.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 = {
-	"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 +94,57 @@ 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 };
+export { ButtonWallet };

package/dist/formatReward-_UYA3aHE.js

@@ -0,0 +1,26 @@
+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);
+		}
+	}
+}
+//#endregion
+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
 /**
@@ -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-0vKBG0-p.js";
-import { t as Spinner } from "./Spinner-Btnwk01x.js";
+import { a as useClientReady, o as registerWebComponent, t as usePlacement } from "./usePlacement-BKWDIvXP.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-utGwQ5Gs.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 };

package/dist/postPurchase.d.ts

@@ -0,0 +1,122 @@
+import * as _$preact from "preact";
+
+//#region src/components/PostPurchase/types.d.ts
+/**
+ * Props for the {@link PostPurchase} component.
+ * @inline
+ */
+type PostPurchaseProps = {
+  /**
+   * Merchant customer ID for purchase tracking fallback.
+   * All three tracking props (`customerId`, `orderId`, `token`) must be
+   * present for tracking to fire.
+   */
+  customerId?: string;
+  /**
+   * Merchant order ID for purchase tracking fallback.
+   */
+  orderId?: string;
+  /**
+   * Checkout token for purchase tracking fallback.
+   */
+  token?: string;
+  /**
+   * Base URL to share. Falls back to the merchant domain returned by
+   * the backend when omitted.
+   */
+  sharingUrl?: string;
+  /**
+   * Override the merchant ID resolved from the SDK config.
+   */
+  merchantId?: string;
+  /**
+   * Placement ID for backend-driven CSS customization.
+   */
+  placement?: string;
+  /**
+   * CSS class names passed through to the root element (Light DOM).
+   */
+  classname?: string;
+  /**
+   * 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
+/**
+ * Post-purchase card component.
+ *
+ * Renders an inline card on the merchant's thank-you / order-status page
+ * that either congratulates a referee or invites a referrer to share.
+ *
+ * Fetches referral status and merchant information via two independent
+ * RPC calls, then computes the display variant locally.
+ *
+ * @group components
+ *
+ * @example
+ * Minimal — just show the card:
+ * ```html
+ * <frak-post-purchase></frak-post-purchase>
+ * ```
+ *
+ * @example
+ * With purchase tracking fallback and custom sharing URL:
+ * ```html
+ * <frak-post-purchase
+ *   customer-id="cust_123"
+ *   order-id="ord_456"
+ *   token="checkout_abc"
+ *   sharing-url="https://merchant.com/product/shoes"
+ * ></frak-post-purchase>
+ * ```
+ */
+declare function PostPurchase({
+  customerId,
+  orderId,
+  token,
+  sharingUrl,
+  merchantId,
+  placement: placementId,
+  classname,
+  variant: forcedVariant,
+  badgeText: propBadgeText,
+  referrerText: propReferrerText,
+  refereeText: propRefereeText,
+  ctaText: propCtaText
+}: PostPurchaseProps): _$preact.JSX.Element | null;
+//#endregion
+//#region src/components/PostPurchase/index.d.ts
+/**
+ * Custom element interface for `<frak-post-purchase>`.
+ * Combines standard {@link HTMLElement} with {@link PostPurchaseProps}.
+ */
+interface PostPurchaseElement extends HTMLElement, PostPurchaseProps {}
+declare global {
+  interface HTMLElementTagNameMap {
+    "frak-post-purchase": PostPurchaseElement;
+  }
+}
+//#endregion
+export { PostPurchase, PostPurchaseElement };