@frak-labs/components 0.0.23 → 0.0.24-beta.1e44255d

package/dist/Spinner-CO7JOohC.js

@@ -0,0 +1,36 @@
+import { cx } from "class-variance-authority";
+import { jsx, jsxs } from "preact/jsx-runtime";
+
+//#region src/components/Spinner/index.module.css?css_module
+const classes = {
+	"spinner__leaf": "M4fSKa_spinner__leaf",
+	"rt-spinner-leaf-fade": "M4fSKa_rt-spinner-leaf-fade",
+	"spinner": "M4fSKa_spinner"
+};
+const _spinner__leaf0 = classes["spinner__leaf"];
+const _rt_spinner_leaf_fade0 = classes["rt-spinner-leaf-fade"];
+const _spinner0 = classes["spinner"];
+
+//#endregion
+//#region src/components/Spinner/index.tsx
+const Spinner = ({ ref, className, ...props }) => {
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		ref,
+		className: cx(classes.spinner),
+		children: [
+			/* @__PURE__ */ jsx("span", { className: classes.spinner__leaf }),
+			/* @__PURE__ */ jsx("span", { className: classes.spinner__leaf }),
+			/* @__PURE__ */ jsx("span", { className: classes.spinner__leaf }),
+			/* @__PURE__ */ jsx("span", { className: classes.spinner__leaf }),
+			/* @__PURE__ */ jsx("span", { className: classes.spinner__leaf }),
+			/* @__PURE__ */ jsx("span", { className: classes.spinner__leaf }),
+			/* @__PURE__ */ jsx("span", { className: classes.spinner__leaf }),
+			/* @__PURE__ */ jsx("span", { className: classes.spinner__leaf })
+		]
+	});
+};
+Spinner.displayName = "Spinner";
+
+//#endregion
+export { Spinner as t };

package/dist/buttonShare.css

@@ -1 +1 @@
-.spinner-KHk8mw{--spinner-opacity:.65;opacity:var(--spinner-opacity);width:16px;height:16px;display:block;position:relative}.spinner__leaf-xtOJmT{--spinner-animation-duration:.8s;width:12.5%;height:100%;animation:rt-spinner-leaf-fade-OXYBVY var(--spinner-animation-duration)linear infinite;position:absolute;top:0;left:43.75%}.spinner__leaf-xtOJmT:before{content:"";background-color:currentColor;border-radius:3px;width:100%;height:30%;display:block}.spinner__leaf-xtOJmT:where(:first-child){animation-delay:calc(-8/8*var(--spinner-animation-duration));transform:rotate(0)}.spinner__leaf-xtOJmT:where(:nth-child(2)){animation-delay:calc(-7/8*var(--spinner-animation-duration));transform:rotate(45deg)}.spinner__leaf-xtOJmT:where(:nth-child(3)){animation-delay:calc(-6/8*var(--spinner-animation-duration));transform:rotate(90deg)}.spinner__leaf-xtOJmT:where(:nth-child(4)){animation-delay:calc(-5/8*var(--spinner-animation-duration));transform:rotate(135deg)}.spinner__leaf-xtOJmT:where(:nth-child(5)){animation-delay:calc(-4/8*var(--spinner-animation-duration));transform:rotate(180deg)}.spinner__leaf-xtOJmT:where(:nth-child(6)){animation-delay:calc(-3/8*var(--spinner-animation-duration));transform:rotate(225deg)}.spinner__leaf-xtOJmT:where(:nth-child(7)){animation-delay:calc(-2/8*var(--spinner-animation-duration));transform:rotate(270deg)}.spinner__leaf-xtOJmT:where(:nth-child(8)){animation-delay:calc(-1/8*var(--spinner-animation-duration));transform:rotate(315deg)}@keyframes rt-spinner-leaf-fade-OXYBVY{0%{opacity:1}to{opacity:.25}}.buttonShare-F23Y9m{justify-content:center;align-items:center;gap:10px;display:flex}
+.nOB7Uq_buttonShare{justify-content:center;align-items:center;gap:10px;display:flex}

package/dist/buttonShare.d.ts

@@ -1,85 +1,103 @@
-import type { FullInteractionTypesKey } from '@frak-labs/core-sdk';
-import { JSX } from 'preact';
-
-/**
- * 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="retail.customerMeeting"></frak-button-share>
- * ```
- *
- * @see {@link @frak-labs/core-sdk!actions.modalBuilder | `modalBuilder()`} for more info about the modal display
- * @see {@link @frak-labs/core-sdk!actions.getProductInformation | `getProductInformation()`} for more info about the estimated reward fetching
- */
-export declare function ButtonShare({ text, classname, useReward: rawUseReward, noRewardText, targetInteraction, showWallet: rawShowWallet, }: ButtonShareProps): JSX.Element;
-
-export declare interface ButtonShareElement extends HTMLElement, ButtonShareProps {
-}
-
-/**
- * The props type for {@link ButtonShare}.
- * @inline
- */
-declare type ButtonShareProps = {
-    /**
-     * 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}!`
-     * @defaultValue `"Share and earn!"`
-     */
-    text?: string;
-    /**
-     * Classname to apply to the button
-     */
-    classname?: string;
-    /**
-     * Do we display the reward on the share modal?
-     * @defaultValue `false`
-     */
-    useReward?: boolean;
-    /**
-     * Fallback text if the reward isn't found
-     */
-    noRewardText?: string;
-    /**
-     * Target interaction behind this sharing action (will be used to get the right reward to display)
-     */
-    targetInteraction?: FullInteractionTypesKey;
-    /**
-     * Do we display the wallet modal instead of the share modal?
-     * @defaultValue `false`
-     */
-    showWallet?: boolean;
-};
-
-export { }
+import { InteractionTypeKey } from "@frak-labs/core-sdk";
+import * as preact from "preact";
+
+//#region src/components/ButtonShare/types.d.ts
+/**
+ * The props type for {@link ButtonShare}.
+ * @inline
+ */
+type ButtonShareProps = {
+  /**
+   * 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\}!`
+   * @defaultValue `"Share and earn!"`
+   */
+  text?: string;
+  /**
+   * Classname to apply to the button
+   */
+  classname?: string;
+  /**
+   * Do we display the reward on the share modal?
+   * @defaultValue `false`
+   */
+  useReward?: boolean;
+  /**
+   * Fallback text if the reward isn't found
+   */
+  noRewardText?: string;
+  /**
+   * Target interaction behind this sharing action (will be used to get the right reward to display)
+   */
+  targetInteraction?: InteractionTypeKey;
+  /**
+   * Do we display the wallet modal instead of the share modal?
+   * @defaultValue `false`
+   */
+  showWallet?: boolean;
+};
+//#endregion
+//#region src/components/ButtonShare/ButtonShare.d.ts
+/**
+ * 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.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 ButtonShare({
+  text,
+  classname,
+  useReward: rawUseReward,
+  noRewardText,
+  targetInteraction,
+  showWallet: rawShowWallet
+}: ButtonShareProps): preact.JSX.Element;
+//#endregion
+//#region src/components/ButtonShare/index.d.ts
+/**
+ * Custom element interface for `<frak-button-share>`.
+ * Combines standard {@link HTMLElement} with {@link ButtonShareProps}.
+ */
+interface ButtonShareElement extends HTMLElement, ButtonShareProps {}
+declare global {
+  interface HTMLElementTagNameMap {
+    "frak-button-share": ButtonShareElement;
+  }
+}
+//#endregion
+export { ButtonShare, ButtonShareElement };

package/dist/buttonShare.js

@@ -1 +1,311 @@
-import e from"preact-custom-element";import{DebugInfoGatherer as t,formatAmount as n,getCurrencyAmountKey as o,setupClient as r,trackEvent as a}from"@frak-labs/core-sdk";import{displayEmbeddedWallet as i,getProductInformation as l,modalBuilder as d,referralInteraction as s}from"@frak-labs/core-sdk/actions";import{Fragment as c,jsx as u,jsxs as p}from"preact/jsx-runtime";import{cx as f}from"class-variance-authority";import{useCallback as m,useEffect as w,useMemo as g,useState as k}from"preact/hooks";import{FrakRpcError as h,RpcErrorCodes as S}from"@frak-labs/frame-connector";import*as y from"@frak-labs/core-sdk/bundle";let b="frakClientReady";function F(e,t){if(window.FrakSetup?.client&&"add"===e)return void t();("add"===e?window.addEventListener:window.removeEventListener)(b,t,!1)}async function v(e){console.log("referral",await s(e,{modalConfig:window.FrakSetup?.modalWalletConfig}))}async function x(){if(window.FrakSetup.core=y,!(window.frakSetupInProgress?(console.log("[Frak SDK] Initialization already in progress"),!1):window.FrakSetup?.client?(console.log("[Frak SDK] Client already initialized"),!1):!!window.FrakSetup?.config||(console.error("[Frak SDK] Configuration not found. Please ensure window.FrakSetup.config is set."),!1)))return;if(console.log("[Frak SDK] Starting initialization"),window.frakSetupInProgress=!0,!window.FrakSetup.config){console.error("[Frak SDK] Configuration not found"),window.frakSetupInProgress=!1;return}let e=await r({config:window.FrakSetup.config});if(!e){console.error("[Frak SDK] Failed to create client"),window.frakSetupInProgress=!1;return}window.FrakSetup.client=e,console.log("[Frak SDK] Client initialized successfully");let t=new CustomEvent(b);window.dispatchEvent(t),window.modalBuilderSteps=d(e,window.FrakSetup?.modalConfig??{}),v(e),window.frakSetupInProgress=!1,function(){let e=new URLSearchParams(window.location.search).get("frakAction");e&&"share"===e&&(console.log("[Frak SDK] Auto open query param found"),function(){if(!window.FrakSetup?.client)return console.error("Frak client not found");"vibrate"in navigator?navigator.vibrate(10):console.log("Vibration not supported"),i(window.FrakSetup.client,window.FrakSetup?.modalWalletConfig??{})}())}()}let C="spinner__leaf-xtOJmT",D=({ref:e,className:t,...n})=>p("span",{...n,ref:e,className:f("spinner-KHk8mw"),children:[u("span",{className:C}),u("span",{className:C}),u("span",{className:C}),u("span",{className:C}),u("span",{className:C}),u("span",{className:C}),u("span",{className:C}),u("span",{className:C})]});async function E({targetInteraction:e}){let t=window.FrakSetup?.client;if(!t)return void console.warn("Frak client not ready yet");let{maxReferrer:r,rewards:a}=await l(t);if(!r)return;let i=o(t.config.metadata?.currency),d=Math.round(r[i]);if(e){let t=a.filter(t=>t.interactionTypeKey===e).map(e=>e.referrer[i]).reduce((e,t)=>t>e?t:e,0);t>0&&(d=Math.round(t))}return n(d,t.config.metadata?.currency)}D.displayName="Spinner";let I={marginTop:"16px",padding:"16px",backgroundColor:"#FEE2E2",border:"1px solid #FCA5A5",borderRadius:"4px",color:"#991B1B"},B={display:"flex",alignItems:"center",gap:"8px",marginBottom:"12px"},N={margin:0,fontSize:"16px",fontWeight:500},R={fontSize:"14px",lineHeight:"1.5",margin:"0 0 12px 0"},z={color:"#991B1B",textDecoration:"underline",textUnderlineOffset:"2px"},K={display:"inline-flex",alignItems:"center",gap:"8px",marginBottom:"10px",padding:"8px 12px",backgroundColor:"white",border:"1px solid #D1D5DB",borderRadius:"4px",color:"black",fontSize:"14px",fontWeight:500};function W({debugInfo:e}){let[t,n]=k(!1);return p("div",{children:[u("button",{type:"button",style:K,onClick:()=>n(!t),children:"Ouvrir les informations"}),t&&u("textarea",{style:{display:"block",width:"100%",height:"200px",fontSize:"12px"},children:e})]})}function A({debugInfo:e}){let{copied:t,copy:n}=function(e={}){let{successDuration:t=2e3}=e,[n,o]=k(!1);return{copy:m(async e=>{try{if(navigator.clipboard&&window.isSecureContext)await navigator.clipboard.writeText(e),o(!0);else{let t=document.createElement("textarea");t.value=e,t.style.position="fixed",t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{document.execCommand("copy"),o(!0)}catch(e){return console.error("Failed to copy text:",e),!1}finally{t.remove()}}return setTimeout(()=>{o(!1)},t),!0}catch(e){return console.error("Failed to copy text:",e),!1}},[t]),copied:n}}();return p("div",{style:I,children:[u("div",{style:B,children:u("h3",{style:N,children:"Oups ! Nous avons rencontr\xe9 un petit probl\xe8me"})}),p("p",{style:R,children:["Impossible d'ouvrir le menu de partage pour le moment. Si le probl\xe8me persiste, copiez les informations ci-dessous et collez-les dans votre mail \xe0"," ",u("a",{href:"mailto:help@frak-labs.com?subject=Debug",style:z,children:"help@frak-labs.com"})," ",u("br",{}),"Merci pour votre retour, nous traitons votre demande dans les plus brefs d\xe9lais."]}),u("button",{type:"button",onClick:()=>n(e??""),style:K,children:t?"Informations copi\xe9es !":"Copier les informations de d\xe9bogage"}),u(W,{debugInfo:e})]})}async function P(){if(!window.FrakSetup?.client)throw Error("Frak client not found");await i(window.FrakSetup.client,window.FrakSetup?.modalWalletConfig??{})}function L({text:e="Share and earn!",classname:n="",useReward:o,noRewardText:r,targetInteraction:i,showWallet:l}){let d=g(()=>void 0!==o,[o]),s=g(()=>void 0!==l,[l]),{isClientReady:y}=function(){let[e,t]=k(!0),n=m(()=>{t(!1)},[]);return w(()=>(F("add",n),()=>F("remove",n)),[n]),{isClientReady:!e}}(),{reward:b}=function(e,t){let[n,o]=k(void 0);return w(()=>{e&&E({targetInteraction:t}).then(e=>{e&&o(e)})},[e,t]),{reward:n}}(d&&y,i),{handleShare:v,isError:x,debugInfo:C}=function(e){let[n,o]=k(void 0),[r,i]=k(!1);return{handleShare:m(async()=>{if(!window.FrakSetup?.client){console.error("Frak client not found"),o(t.empty().formatDebugInfo("Frak client not found")),i(!0);return}let n=function(){if(!window.modalBuilderSteps)throw Error("modalBuilderSteps not found");return window.modalBuilderSteps}();if(!n)throw Error("modalBuilderSteps not found");try{await n.sharing(window.FrakSetup?.modalShareConfig??{}).display(t=>({...t,targetInteraction:e}))}catch(t){if(t instanceof h&&t.code===S.clientAborted)return void console.debug("User aborted the modal");let e=window.FrakSetup.client.debugInfo.formatDebugInfo(t);a(window.FrakSetup.client,"share_modal_error",{error:t instanceof Object&&"message"in t?t.message:"Unknown error",debugInfo:e}),o(e),i(!0),console.error("Error while opening the modal",t)}},[e]),isError:r,debugInfo:n}}(i),I=g(()=>d?b?e.includes("{REWARD}")?e.replace("{REWARD}",b):`${e} ${b}`:r??e.replace("{REWARD}",""):e,[d,e,r,b]),B=m(async()=>{a(window.FrakSetup.client,"share_button_clicked"),s?await P():await v()},[s,v]);return p(c,{children:[p("button",{type:"button",className:f("buttonShare-F23Y9m",n,"override"),onClick:B,children:[!y&&u(D,{})," ",I]}),x&&u(A,{debugInfo:C})]})}!function(t,n,o=[],r={shadow:!1}){"undefined"!=typeof window&&("complete"===document.readyState||"interactive"===document.readyState?setTimeout(x,1):document.addEventListener?document.addEventListener("DOMContentLoaded",x):document.attachEvent("onreadystatechange",()=>{"complete"===document.readyState&&x()}),customElements.get(n)||e(t,n,o,r))}(L,"frak-button-share",["text"],{shadow:!1});export{L as ButtonShare};
+import { n as registerWebComponent, r as getModalBuilderSteps, t as useClientReady } from "./useClientReady-iCtUeDsc.js";
+import { t as Spinner } from "./Spinner-CO7JOohC.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 { 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;
+	const [copied, setCopied] = useState(false);
+	return {
+		copy: useCallback(async (text) => {
+			try {
+				if (navigator.clipboard && window.isSecureContext) {
+					await navigator.clipboard.writeText(text);
+					setCopied(true);
+				} else {
+					const textArea = document.createElement("textarea");
+					textArea.value = text;
+					textArea.style.position = "fixed";
+					textArea.style.opacity = "0";
+					document.body.appendChild(textArea);
+					textArea.focus();
+					textArea.select();
+					try {
+						document.execCommand("copy");
+						setCopied(true);
+					} catch (err) {
+						console.error("Failed to copy text:", err);
+						return false;
+					} finally {
+						textArea.remove();
+					}
+				}
+				setTimeout(() => {
+					setCopied(false);
+				}, successDuration);
+				return true;
+			} catch (err) {
+				console.error("Failed to copy text:", err);
+				return false;
+			}
+		}, [successDuration]),
+		copied
+	};
+}
+
+//#endregion
+//#region src/components/ButtonShare/components/ErrorMessage.tsx
+const styles = {
+	errorContainer: {
+		marginTop: "16px",
+		padding: "16px",
+		backgroundColor: "#FEE2E2",
+		border: "1px solid #FCA5A5",
+		borderRadius: "4px",
+		color: "#991B1B"
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		gap: "8px",
+		marginBottom: "12px"
+	},
+	title: {
+		margin: 0,
+		fontSize: "16px",
+		fontWeight: 500
+	},
+	message: {
+		fontSize: "14px",
+		lineHeight: "1.5",
+		margin: "0 0 12px 0"
+	},
+	link: {
+		color: "#991B1B",
+		textDecoration: "underline",
+		textUnderlineOffset: "2px"
+	},
+	copyButton: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "8px",
+		marginBottom: "10px",
+		padding: "8px 12px",
+		backgroundColor: "white",
+		border: "1px solid #D1D5DB",
+		borderRadius: "4px",
+		color: "black",
+		fontSize: "14px",
+		fontWeight: 500
+	}
+};
+/**
+* Renders a toggleable debug information section
+* @param {Object} props - Component props
+* @param {string} [props.debugInfo] - Debug information to display in textarea
+*/
+function ToggleMessage({ debugInfo }) {
+	const [showInfo, setShowInfo] = useState(false);
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		style: styles.copyButton,
+		onClick: () => setShowInfo(!showInfo),
+		children: "Ouvrir les informations"
+	}), showInfo && /* @__PURE__ */ jsx("textarea", {
+		style: {
+			display: "block",
+			width: "100%",
+			height: "200px",
+			fontSize: "12px"
+		},
+		children: debugInfo
+	})] });
+}
+/**
+* Displays an error message with debug information and copy functionality
+* @param {Object} props - Component props
+* @param {string} [props.debugInfo] - Debug information that can be copied or displayed
+*/
+function ErrorMessage({ debugInfo }) {
+	const { copied, copy } = useCopyToClipboard();
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.errorContainer,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: styles.header,
+				children: /* @__PURE__ */ jsx("h3", {
+					style: styles.title,
+					children: "Oups ! Nous avons rencontré un petit problème"
+				})
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				style: styles.message,
+				children: [
+					"Impossible d'ouvrir le menu de partage pour le moment. Si le problème persiste, copiez les informations ci-dessous et collez-les dans votre mail à",
+					" ",
+					/* @__PURE__ */ jsx("a", {
+						href: "mailto:help@frak-labs.com?subject=Debug",
+						style: styles.link,
+						children: "help@frak-labs.com"
+					}),
+					" ",
+					/* @__PURE__ */ jsx("br", {}),
+					"Merci pour votre retour, nous traitons votre demande dans les plus brefs délais."
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => copy(debugInfo ?? ""),
+				style: styles.copyButton,
+				children: copied ? "Informations copiées !" : "Copier les informations de débogage"
+			}),
+			/* @__PURE__ */ jsx(ToggleMessage, { 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
+* @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.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
+	*/
+	const btnText = useMemo(() => {
+		if (!shouldUseReward) return text;
+		if (!reward) return noRewardText ?? text.replace("{REWARD}", "");
+		return text.includes("{REWARD}") ? text.replace("{REWARD}", reward) : `${text} ${reward}`;
+	}, [
+		shouldUseReward,
+		text,
+		noRewardText,
+		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", {
+		type: "button",
+		className: cx(classes.buttonShare, classname, "override"),
+		onClick,
+		children: [
+			!isClientReady && /* @__PURE__ */ jsx(Spinner, {}),
+			" ",
+			btnText
+		]
+	}), isError && /* @__PURE__ */ jsx(ErrorMessage, { debugInfo })] });
+}
+
+//#endregion
+//#region src/components/ButtonShare/index.ts
+registerWebComponent(ButtonShare, "frak-button-share", ["text"], { shadow: false });
+
+//#endregion
+export { ButtonShare };

package/dist/buttonWallet.css

@@ -1 +1 @@
-.button-aPZnsb{all:unset;z-index:2000000;cursor:pointer;text-align:center;background-color:#3e557e;border-radius:50%;justify-content:center;align-items:center;width:45px;height:45px;font-size:24px;display:flex;position:fixed;bottom:20px}.button__left-fQJUnK{left:20px}.button__right-TkFFFK{right:20px}.reward-w5dm3K{color:#fff;white-space:nowrap;background:#ff3f3f;border-radius:5px;padding:2px 3px;font-size:9px;font-weight:600;line-height:9px;position:absolute;top:-4px;right:27px}
+.Kl62ia_button{all:unset;z-index:2000000;cursor:pointer;text-align:center;background-color:#3e557e;border-radius:50%;justify-content:center;align-items:center;width:45px;height:45px;font-size:24px;display:flex;position:fixed;bottom:20px}.Kl62ia_button__left{left:20px}.Kl62ia_button__right{right:20px}.Kl62ia_reward{color:#fff;white-space:nowrap;background:#ff3f3f;border-radius:5px;padding:2px 3px;font-size:9px;font-weight:600;line-height:9px;position:absolute;top:-4px;right:27px}