@frak-labs/components 1.0.3-beta.7dfd3480 → 1.0.3-beta.9d4f564a

package/dist/buttonShare.js

@@ -1,122 +0,0 @@
-import { a as registerWebComponent, i as useClientReady, s as openEmbeddedWallet, t as usePlacement } from "./usePlacement-V7NrKoub.js";
-import { t as useGlobalComponents } from "./useGlobalComponents-Cmfszr7v.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-gbuSWvRx.js";
-import { t as applyRewardPlaceholder } from "./formatReward-Bub6Z6eY.js";
-import { t as useReward } from "./useReward-DU3_yP8Q.js";
-import { t as openSharingPage } from "./sharingPage-DFvQbviS.js";
-import { trackEvent } from "@frak-labs/core-sdk";
-import { useCallback, useMemo } from "preact/hooks";
-import { jsx } from "preact/jsx-runtime";
-//#region src/components/ButtonShare/ButtonShare.tsx
-/**
-* Button to share the current page
-*
-* @param args
-* @returns The share button with `<button>` tag
-*
-* @group components
-*
-* @example
-* Basic usage:
-* ```html
-* <frak-button-share></frak-button-share>
-* ```
-*
-* @example
-* Using a custom text:
-* ```html
-* <frak-button-share text="Share and earn!"></frak-button-share>
-* ```
-*
-* @example
-* Using a custom class:
-* ```html
-* <frak-button-share classname="button button-primary"></frak-button-share>
-* ```
-*
-* @example
-* Using reward information and fallback text:
-* ```html
-* <frak-button-share use-reward text="Share and earn up to {REWARD}!" no-reward-text="Share and earn!"></frak-button-share>
-* ```
-*
-* @example
-* Using reward information for specific reward and fallback text:
-* ```html
-* <frak-button-share use-reward text="Share and earn up to {REWARD}!" no-reward-text="Share and earn!" target-interaction="custom.customerMeeting"></frak-button-share>
-* ```
-*
-* @see {@link @frak-labs/core-sdk!actions.displaySharingPage | `displaySharingPage()`} for more info about the sharing-page flow
-* @see {@link @frak-labs/core-sdk!actions.getMerchantInformation | `getMerchantInformation()`} for more info about the estimated reward fetching
-*/
-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 btnText = useMemo(() => {
-		if (!shouldUseReward) return resolvedText;
-		if (!reward) return resolvedNoRewardText ?? applyRewardPlaceholder(resolvedText, void 0);
-		return resolvedText.includes("{REWARD}") ? applyRewardPlaceholder(resolvedText, reward) : `${resolvedText} ${reward}`;
-	}, [
-		shouldUseReward,
-		resolvedText,
-		resolvedNoRewardText,
-		reward
-	]);
-	const onClick = useCallback(() => {
-		if (isPreview) return;
-		trackEvent(window.FrakSetup.client, "share_button_clicked", {
-			placement: placementId,
-			target_interaction: resolvedTargetInteraction,
-			has_reward: Boolean(reward),
-			click_action: resolvedClickAction
-		});
-		if (resolvedClickAction === "embedded-wallet") {
-			openEmbeddedWallet(resolvedTargetInteraction, placementId);
-			return;
-		}
-		openSharingPage(resolvedTargetInteraction, placementId);
-	}, [
-		isPreview,
-		resolvedClickAction,
-		resolvedTargetInteraction,
-		placementId,
-		reward
-	]);
-	if (!isPreview && (!shouldRender || isHidden)) return null;
-	const buttonClass = [
-		"button",
-		"button__fadeIn",
-		classname
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		disabled: !isPreview && !isClientReady,
-		class: buttonClass,
-		onClick,
-		children: btnText
-	});
-}
-//#endregion
-//#region src/components/ButtonShare/index.ts
-registerWebComponent(ButtonShare, "frak-button-share", [
-	"text",
-	"placement",
-	"classname",
-	"clickAction",
-	"useReward",
-	"noRewardText",
-	"targetInteraction",
-	"preview"
-], { shadow: false });
-//#endregion
-export { ButtonShare };

package/dist/buttonWallet.d.ts

@@ -1,87 +0,0 @@
-import { InteractionTypeKey } from "@frak-labs/core-sdk";
-import * as _$preact from "preact";
-
-//#region src/components/ButtonWallet/types.d.ts
-/**
- * The props type for {@link ButtonWallet}.
- * @inline
- */
-type ButtonWalletProps = {
-  placement?: string;
-  /**
-   * Classname to apply to the button
-   */
-  classname?: string;
-  /**
-   * Do we display the reward on the button?
-   * @defaultValue `false`
-   */
-  useReward?: boolean;
-  /**
-   * Target interaction behind this sharing action (will be used to get the right reward to display)
-   */
-  targetInteraction?: InteractionTypeKey;
-};
-//#endregion
-//#region src/components/ButtonWallet/ButtonWallet.d.ts
-/**
- * Button to open wallet modal
- *
- * @param args
- * @returns The wallet button with `<button>` tag
- *
- * @group components
- *
- * @example
- * Basic usage:
- * ```html
- * <frak-button-wallet></frak-button-wallet>
- * ```
- *
- * @example
- * Using a custom class:
- * ```html
- * <frak-button-wallet classname="button button-primary"></frak-button-wallet>
- * ```
- *
- * @example
- * Using reward information:
- * ```html
- * <frak-button-wallet use-reward></frak-button-wallet>
- * ```
- *
- * @example
- * Using reward information for specific reward:
- * ```html
- * <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 | null;
-//#endregion
-//#region src/components/ButtonWallet/index.d.ts
-/**
- * Custom element interface for `<frak-button-wallet>`.
- * Combines standard {@link HTMLElement} with {@link ButtonWalletProps}.
- */
-interface ButtonWalletElement extends HTMLElement, ButtonWalletProps {}
-declare global {
-  interface HTMLElementTagNameMap {
-    "frak-button-wallet": ButtonWalletElement;
-  }
-}
-//#endregion
-export { ButtonWallet, ButtonWalletElement };

package/dist/buttonWallet.js

@@ -1,148 +0,0 @@
-import { a as registerWebComponent, i as useClientReady, n as buildStyleContent, o as openWalletModal, t as usePlacement } from "./usePlacement-V7NrKoub.js";
-import { t as useReward } from "./useReward-DU3_yP8Q.js";
-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", {
-		fill: "none",
-		height: "1em",
-		viewBox: "0 0 28 28",
-		width: "1em",
-		xmlns: "http://www.w3.org/2000/svg",
-		...props,
-		children: [/* @__PURE__ */ jsx("title", { children: "Gift icon" }), /* @__PURE__ */ jsx("path", {
-			d: "m23.1427 13.9999v11.4285h-18.2857v-11.4285m9.1429 11.4285v-17.14282m0 0h-5.1429c-.75776 0-1.48448-.30102-2.0203-.83684s-.83684-1.26255-.83684-2.02031.30102-1.48448.83684-2.0203 1.26254-.83684 2.0203-.83684c4 0 5.1429 5.71429 5.1429 5.71429zm0 0h5.1428c.7578 0 1.4845-.30102 2.0203-.83684s.8369-1.26255.8369-2.02031-.3011-1.48448-.8369-2.0203-1.2625-.83684-2.0203-.83684c-4 0-5.1428 5.71429-5.1428 5.71429zm-11.42861 0h22.85711v5.71432h-22.85711z",
-			stroke: "#fff",
-			"stroke-linecap": "round",
-			"stroke-linejoin": "round"
-		})]
-	});
-}
-//#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
-*
-* @param args
-* @returns The wallet button with `<button>` tag
-*
-* @group components
-*
-* @example
-* Basic usage:
-* ```html
-* <frak-button-wallet></frak-button-wallet>
-* ```
-*
-* @example
-* Using a custom class:
-* ```html
-* <frak-button-wallet classname="button button-primary"></frak-button-wallet>
-* ```
-*
-* @example
-* Using reward information:
-* ```html
-* <frak-button-wallet use-reward></frak-button-wallet>
-* ```
-*
-* @example
-* Using reward information for specific reward:
-* ```html
-* <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({ 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");
-	useEffect(() => {
-		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",
-		part: "button",
-		disabled: !isClientReady,
-		class: buttonClass,
-		onClick: () => {
-			openWalletModal(resolvedTargetInteraction, placementId);
-		},
-		children: [/* @__PURE__ */ jsx(GiftIcon, {}), reward && /* @__PURE__ */ jsx("span", {
-			class: "reward",
-			children: reward
-		})]
-	})] });
-}
-//#endregion
-//#region src/components/ButtonWallet/index.ts
-registerWebComponent(ButtonWallet, "frak-button-wallet", [
-	"placement",
-	"classname",
-	"useReward",
-	"targetInteraction"
-], { shadow: true });
-//#endregion
-export { ButtonWallet };

package/dist/formatReward-Bub6Z6eY.js

@@ -1,33 +0,0 @@
-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,66 +0,0 @@
-import * as _$preact from "preact";
-
-//#region src/components/OpenInAppButton/types.d.ts
-/**
- * The props type for {@link OpenInAppButton}.
- * @inline
- */
-type OpenInAppButtonProps = {
-  placement?: string;
-  /**
-   * Text to display on the button
-   * @defaultValue `"Open in App"`
-   */
-  text?: string;
-  /**
-   * Classname to apply to the button
-   */
-  classname?: string;
-};
-//#endregion
-//#region src/components/OpenInAppButton/OpenInAppButton.d.ts
-/**
- * Button to open the Frak Wallet mobile app via deep link
- *
- * @param args
- * @returns The open in app button with `<button>` tag (only renders on mobile devices)
- *
- * @group components
- *
- * @example
- * Basic usage:
- * ```html
- * <frak-open-in-app></frak-open-in-app>
- * ```
- *
- * @example
- * Using a custom text:
- * ```html
- * <frak-open-in-app text="Get the App"></frak-open-in-app>
- * ```
- *
- * @example
- * With login action:
- * ```html
- * <frak-open-in-app classname="button button-primary"></frak-open-in-app>
- * ```
- */
-declare function OpenInAppButton({
-  placement: placementId,
-  text,
-  classname
-}: OpenInAppButtonProps): _$preact.JSX.Element | null;
-//#endregion
-//#region src/components/OpenInAppButton/index.d.ts
-/**
- * Custom element interface for `<frak-open-in-app>`.
- * Combines standard {@link HTMLElement} with {@link OpenInAppButtonProps}.
- */
-interface OpenInAppButtonElement extends HTMLElement, OpenInAppButtonProps {}
-declare global {
-  interface HTMLElementTagNameMap {
-    "frak-open-in-app": OpenInAppButtonElement;
-  }
-}
-//#endregion
-export { OpenInAppButton, OpenInAppButtonElement };

package/dist/openInApp.js

@@ -1,110 +0,0 @@
-import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-V7NrKoub.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-gbuSWvRx.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
-* Uses UA regex + iPad desktop mode heuristic (maxTouchPoints)
-*
-* iPadOS 13+ sends a Macintosh UA in desktop mode, so the regex alone
-* misses it. The maxTouchPoints check catches iPads reporting as Mac.
-*
-* @returns True if the device is mobile (iOS, Android, iPadOS, etc.)
-*/
-function isMobile() {
-	if (typeof navigator === "undefined") return false;
-	if (/iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) return true;
-	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";
-/**
-* Open the Frak Wallet mobile app via deep link with fallback detection.
-*
-* Uses visibility-based detection to determine if the app opened.
-* If the app is not installed (page stays visible after 2.5s),
-* tracks an "app_not_installed" event.
-*/
-function openFrakWalletApp(path = DEFAULT_PATH, placement) {
-	const client = window.FrakSetup?.client;
-	if (client) trackEvent(client, "open_in_app_clicked", {
-		path,
-		placement
-	});
-	triggerDeepLinkWithFallback(`${DEEP_LINK_SCHEME}${path}`, { onFallback: () => {
-		if (client) trackEvent(client, "app_not_installed", {
-			path,
-			placement
-		});
-	} });
-}
-//#endregion
-//#region src/components/OpenInAppButton/OpenInAppButton.tsx
-/**
-* Button to open the Frak Wallet mobile app via deep link
-*
-* @param args
-* @returns The open in app button with `<button>` tag (only renders on mobile devices)
-*
-* @group components
-*
-* @example
-* Basic usage:
-* ```html
-* <frak-open-in-app></frak-open-in-app>
-* ```
-*
-* @example
-* Using a custom text:
-* ```html
-* <frak-open-in-app text="Get the App"></frak-open-in-app>
-* ```
-*
-* @example
-* With login action:
-* ```html
-* <frak-open-in-app classname="button button-primary"></frak-open-in-app>
-* ```
-*/
-function OpenInAppButton({ placement: placementId, text = "Open in App", classname = "" }) {
-	const placement = usePlacement(placementId);
-	const { shouldRender, isHidden, isClientReady } = useClientReady();
-	const { isMobile } = useIsMobile();
-	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(void 0, placementId);
-	};
-	const buttonClass = [
-		"button",
-		"button__fadeIn",
-		classname
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": "Open in Frak Wallet app",
-		disabled: !isClientReady,
-		class: buttonClass,
-		onClick: handleClick,
-		children: resolvedText
-	});
-}
-//#endregion
-//#region src/components/OpenInAppButton/index.ts
-registerWebComponent(OpenInAppButton, "frak-open-in-app", [
-	"text",
-	"placement",
-	"classname"
-], { shadow: false });
-//#endregion
-export { OpenInAppButton };