@frak-labs/components
Version:
Frak Wallet components, helping any person to interact with the Frak wallet.
125 lines (124 loc) • 4.7 kB
JavaScript
import { a as registerWebComponent, i as useClientReady, s as openSharingPage, t as usePlacement } from "./usePlacement-5kbU3BKj.js";
import { t as openEmbeddedWallet } from "./embeddedWallet-By3_p5Xc.js";
import { t as useGlobalComponents } from "./useGlobalComponents-mSs9unyN.js";
import { t as useLightDomStyles } from "./useLightDomStyles-C8giLInY.js";
import { t as applyRewardPlaceholder } from "./formatReward-Cf2KpA3x.js";
import { t as useReward } from "./useReward-ClVShg45.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
* Embedding the live reward amount. Include `{REWARD}` in `text` and the
* SDK fetches + substitutes the estimated reward at render time. Provide
* `no-reward-text` as a fallback when no reward is available:
* ```html
* <frak-button-share text="Share and earn up to {REWARD}!" no-reward-text="Share and earn!"></frak-button-share>
* ```
*
* @example
* Same as above, scoped to a specific interaction type so the reward
* estimate matches that flow:
* ```html
* <frak-button-share 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 = "", 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 wantsReward = useMemo(() => resolvedText.includes("{REWARD}"), [resolvedText]);
const resolvedClickAction = useMemo(() => componentConfig?.clickAction ?? rawClickAction ?? "sharing-page", [componentConfig?.clickAction, rawClickAction]);
const { shouldRender, isHidden, isClientReady } = useClientReady();
const { reward } = useReward(wantsReward && isClientReady, resolvedTargetInteraction);
const btnText = useMemo(() => {
if (!wantsReward) return resolvedText;
if (reward) return applyRewardPlaceholder(resolvedText, reward);
return resolvedNoRewardText ?? applyRewardPlaceholder(resolvedText, void 0);
}, [
wantsReward,
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",
"noRewardText",
"targetInteraction",
"preview"
], { shadow: false });
//#endregion
export { ButtonShare };