@frak-labs/components 1.0.2 → 1.0.3-beta.64c76510

package/dist/banner.js

@@ -1,8 +1,8 @@
 import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-V7NrKoub.js";
 import { t as useGlobalComponents } from "./useGlobalComponents-Cmfszr7v.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-C3lcOwY2.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-gbuSWvRx.js";
 import { t as useReward } from "./useReward-DU3_yP8Q.js";
-import { a as CloseCircleIcon, c as cssSource$5, i as ExternalLinkIcon, n as WarningIcon, o as cssSource$6, s as cssSource$4, t as GiftIcon } from "./GiftIcon-4sr9xXyq.js";
+import { a as CloseCircleIcon, c as cssSource$5, i as ExternalLinkIcon, n as WarningIcon, o as cssSource$6, r as LogoFrakWithName, s as cssSource$4, t as GiftIcon } from "./GiftIcon-2DC0OUeF.js";
 import { isInAppBrowser, redirectToExternalBrowser, trackEvent } from "@frak-labs/core-sdk";
 import { REFERRAL_SUCCESS_EVENT, getMergeToken } from "@frak-labs/core-sdk/actions";
 import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
@@ -194,6 +194,8 @@ const cssSource$1 = `@keyframes Banner_fadeIn__1gnumzi0 {
   padding: 16px;
   background-color: #ffffff;
   color: var(--text-primary__pbq4ak0);
+  border: 1px solid var(--border-default__pbq4akv);
+  border-radius: 12px;
 }
 .Banner_referralIconWrapper__1gnumzi4 {
   flex-shrink: 0;
@@ -231,9 +233,16 @@ const cssSource$1 = `@keyframes Banner_fadeIn__1gnumzi0 {
 .Banner_referralCta__1gnumzi8:focus-visible {
   outline: 2px solid #000000;
   outline-offset: 2px;
+}
+.Banner_frakLogo__1gnumzi9 {
+  position: absolute;
+  right: 16px;
+  bottom: 12px;
+  pointer-events: none;
 }`;
 //#endregion
 //#region src/components/Banner/Banner.css.ts
+var frakLogo = "Banner_frakLogo__1gnumzi9";
 var iconSvg = "Banner_iconSvg__1gnumzi2";
 var referral = "Banner_referral__1gnumzi3 reset_base__1831jhd0 Banner_rootBase__1gnumzi1";
 var referralBody = "Banner_referralBody__1gnumzi5";
@@ -421,28 +430,36 @@ function Banner({ placement: placementId, classname = "", interaction, referralT
 	return /* @__PURE__ */ jsxs("div", {
 		class: bannerClass,
 		role: "alert",
-		children: [/* @__PURE__ */ jsx("div", {
-			class: `${referralIconWrapper} frak-banner__icon`,
-			children: /* @__PURE__ */ jsx(GiftIcon, { class: iconSvg })
-		}), /* @__PURE__ */ jsxs("div", {
-			class: `${referralBody} frak-banner__text`,
-			children: [
-				/* @__PURE__ */ jsx("p", {
-					class: `${referralTitle} frak-banner__title`,
-					children: texts.title
-				}),
-				/* @__PURE__ */ jsx("p", {
-					class: `${referralDescription} frak-banner__description`,
-					children: texts.description
-				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					class: `${referralCta} frak-banner__cta`,
-					onClick: handleAction,
-					children: texts.cta
-				})
-			]
-		})]
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				class: `${referralIconWrapper} frak-banner__icon`,
+				children: /* @__PURE__ */ jsx(GiftIcon, { class: iconSvg })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				class: `${referralBody} frak-banner__text`,
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						class: `${referralTitle} frak-banner__title`,
+						children: texts.title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						class: `${referralDescription} frak-banner__description`,
+						children: texts.description
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						class: `${referralCta} frak-banner__cta`,
+						onClick: handleAction,
+						children: texts.cta
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(LogoFrakWithName, {
+				class: `${frakLogo} frak-banner__logo`,
+				width: 42,
+				height: 24
+			})
+		]
 	});
 }
 //#endregion

package/dist/buttonShare.d.ts

@@ -32,10 +32,15 @@ type ButtonShareProps = {
    */
   targetInteraction?: InteractionTypeKey;
   /**
-   * Which UI to open on click
-   * @defaultValue `"embedded-wallet"`
+   * Which UI to open on click.
+   *
+   * Legacy values (e.g. `"share-modal"`) are accepted at runtime and
+   * gracefully route to the full-page sharing UI — the modal-flow
+   * share path was retired in favour of `displaySharingPage`.
+   *
+   * @defaultValue `"sharing-page"`
    */
-  clickAction?: "embedded-wallet" | "share-modal" | "sharing-page";
+  clickAction?: "embedded-wallet" | "sharing-page";
   /**
    * When set, renders the button in preview mode (e.g. Shopify/WP editor).
    * Skips the client-ready gating so the button is always enabled visually,
@@ -84,7 +89,7 @@ type ButtonShareProps = {
  * <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.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
  */
 declare function ButtonShare({

package/dist/buttonShare.js

@@ -1,176 +1,12 @@
 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-C3lcOwY2.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 useShareModal } from "./useShareModal-BEVkLrBP.js";
+import { t as openSharingPage } from "./sharingPage-DFvQbviS.js";
 import { trackEvent } from "@frak-labs/core-sdk";
-import { displaySharingPage } from "@frak-labs/core-sdk/actions";
-import { useCallback, useMemo, useState } from "preact/hooks";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-//#region src/utils/sharingPage.ts
-async function openSharingPage(targetInteraction, placement) {
-	if (!window.FrakSetup?.client) {
-		console.error("Frak client not found");
-		return;
-	}
-	await displaySharingPage(window.FrakSetup.client, { metadata: { ...targetInteraction && { targetInteraction } } }, placement);
-}
-//#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();
-	const handleCopy = () => {
-		copy(debugInfo ?? "");
-	};
-	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: handleCopy,
-				style: styles.copyButton,
-				children: copied ? "Informations copiées !" : "Copier les informations de débogage"
-			}),
-			/* @__PURE__ */ jsx(ToggleMessage, { debugInfo })
-		]
-	});
-}
-//#endregion
+import { useCallback, useMemo } from "preact/hooks";
+import { jsx } from "preact/jsx-runtime";
 //#region src/components/ButtonShare/ButtonShare.tsx
 /**
 * Button to share the current page
@@ -210,7 +46,7 @@ function ErrorMessage({ debugInfo }) {
 * <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.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 }) {
@@ -226,7 +62,6 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 	const resolvedClickAction = useMemo(() => componentConfig?.clickAction ?? rawClickAction ?? "sharing-page", [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 resolvedText;
 		if (!reward) return resolvedNoRewardText ?? applyRewardPlaceholder(resolvedText, void 0);
@@ -237,7 +72,7 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 		resolvedNoRewardText,
 		reward
 	]);
-	const onClick = useCallback(async () => {
+	const onClick = useCallback(() => {
 		if (isPreview) return;
 		trackEvent(window.FrakSetup.client, "share_button_clicked", {
 			placement: placementId,
@@ -245,13 +80,14 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 			has_reward: Boolean(reward),
 			click_action: resolvedClickAction
 		});
-		if (resolvedClickAction === "embedded-wallet") openEmbeddedWallet(resolvedTargetInteraction, placementId);
-		else if (resolvedClickAction === "share-modal") await handleShare();
-		else openSharingPage(resolvedTargetInteraction, placementId);
+		if (resolvedClickAction === "embedded-wallet") {
+			openEmbeddedWallet(resolvedTargetInteraction, placementId);
+			return;
+		}
+		openSharingPage(resolvedTargetInteraction, placementId);
 	}, [
 		isPreview,
 		resolvedClickAction,
-		handleShare,
 		resolvedTargetInteraction,
 		placementId,
 		reward
@@ -262,13 +98,13 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 		"button__fadeIn",
 		classname
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		disabled: !isPreview && !isClientReady,
 		class: buttonClass,
 		onClick,
 		children: btnText
-	}), isError && /* @__PURE__ */ jsx(ErrorMessage, { debugInfo })] });
+	});
 }
 //#endregion
 //#region src/components/ButtonShare/index.ts

package/dist/openInApp.js

@@ -1,5 +1,5 @@
 import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-V7NrKoub.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-C3lcOwY2.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";

package/dist/postPurchase.d.ts

@@ -1,3 +1,4 @@
+import { SharingPageProduct } from "@frak-labs/core-sdk";
 import * as _$preact from "preact";
 
 //#region src/components/PostPurchase/types.d.ts
@@ -61,6 +62,20 @@ type PostPurchaseProps = {
    * Use `{REWARD}` as placeholder for the reward amount.
    */
   ctaText?: string;
+  /**
+   * Optional product cards forwarded to the sharing page when the user
+   * clicks the CTA. Accepts either a real {@link SharingPageProduct}
+   * array (when set imperatively via the JS property,
+   * `el.products = [...]`) or a JSON-stringified array (when set as an
+   * HTML attribute, `<frak-post-purchase products='[...]'>`). The HTML
+   * attribute path is required for server-rendered surfaces — e.g.
+   * WooCommerce / Magento plugins — because `preact-custom-element`
+   * delivers attribute values as raw strings.
+   *
+   * Empty arrays / unparseable strings are treated as "no products" so
+   * the sharing page renders without the product card section.
+   */
+  products?: SharingPageProduct[] | string;
   /**
    * When set, renders the card in preview mode (e.g. Shopify/WP editor).
    * Bypasses the client-ready / RPC gates that normally hide the card
@@ -118,7 +133,8 @@ declare function PostPurchase({
   refereeText: propRefereeText,
   ctaText: propCtaText,
   preview,
-  previewVariant
+  previewVariant,
+  products
 }: PostPurchaseProps): _$preact.JSX.Element | null;
 //#endregion
 //#region src/components/PostPurchase/index.d.ts

package/dist/postPurchase.js

@@ -1,12 +1,12 @@
 import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-V7NrKoub.js";
 import { t as useGlobalComponents } from "./useGlobalComponents-Cmfszr7v.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-C3lcOwY2.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-gbuSWvRx.js";
 import { n as formatEstimatedReward, t as applyRewardPlaceholder } from "./formatReward-Bub6Z6eY.js";
-import { t as useShareModal } from "./useShareModal-BEVkLrBP.js";
-import { l as createElement, o as cssSource$4, r as LogoFrak, s as cssSource$3, t as GiftIcon } from "./GiftIcon-4sr9xXyq.js";
+import { t as openSharingPage } from "./sharingPage-DFvQbviS.js";
+import { c as cssSource$5, l as createElement, o as cssSource$4, r as LogoFrakWithName, s as cssSource$3, t as GiftIcon } from "./GiftIcon-2DC0OUeF.js";
 import { trackEvent } from "@frak-labs/core-sdk";
 import { getMerchantInformation, getUserReferralStatus, trackPurchaseStatus } from "@frak-labs/core-sdk/actions";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { jsx, jsxs } from "preact/jsx-runtime";
 import { FrakRpcError, RpcErrorCodes } from "@frak-labs/frame-connector";
 //#region ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -1391,15 +1391,75 @@ const cssSource$1 = `.PostPurchase_card__5fv5lh0 {
 .PostPurchase_frakLogo__5fv5lh6 {
   display: block;
   margin-left: auto;
-  color: var(--surface-primary__pbq4aka);
 }`;
 var card = "PostPurchase_card__5fv5lh0";
-var cta = "PostPurchase_cta__5fv5lh3";
+var cta = "PostPurchase_cta__5fv5lh3 reset_element_button__1831jhd6 reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1";
 var frakLogo = "PostPurchase_frakLogo__5fv5lh6";
 var giftIcon = "PostPurchase_giftIcon__5fv5lh5";
 var icon = "PostPurchase_icon__5fv5lh4";
 var message = "PostPurchase_message__5fv5lh2";
-const cssSource = cssSource$3 + cssSource$4 + cssSource$1;
+const cssSource = cssSource$5 + cssSource$3 + cssSource$4 + cssSource$1;
+//#endregion
+//#region src/components/PostPurchase/products.ts
+/**
+* Whether `value` is a syntactically valid URL with an `http(s):` scheme.
+*
+* Used to gate `imageUrl` / `link` fields coming from the public `products`
+* prop — the listener-side sharing-page builder calls `new URL(...)` on the
+* incoming product link, and a `javascript:` URL would be a XSS sink in any
+* consumer that binds the value to an `href`.
+*/
+function isHttpUrl(value) {
+	try {
+		const parsed = new URL(value);
+		return parsed.protocol === "http:" || parsed.protocol === "https:";
+	} catch {
+		return false;
+	}
+}
+/**
+* Coerce a raw `products` prop value into a candidate array suitable for
+* per-item normalisation, or null when it cannot be reduced to one.
+*
+* Surfaces that set the prop via the JS property (`el.products = [...]`)
+* deliver a real array; surfaces that bind it as an HTML attribute
+* (WP / Magento server-render) deliver a JSON-stringified array. Anything
+* else (truthy non-array non-string, JSON parse failure, JSON that decodes
+* to a non-array) is treated as "no products" so the share still works
+* without the product card section.
+*/
+function coerceProductCandidates(products) {
+	if (!products) return null;
+	if (Array.isArray(products)) return products;
+	if (typeof products !== "string") return null;
+	try {
+		const parsed = JSON.parse(products);
+		return Array.isArray(parsed) ? parsed : null;
+	} catch {
+		return null;
+	}
+}
+/**
+* Normalise one untrusted candidate into a {@link SharingPageProduct}, or
+* return null when the candidate has no usable title.
+*
+* The `products` prop is a public API boundary (merchants can set it
+* server-side via WP/Magento or imperatively from arbitrary JS). Each entry
+* is validated structurally so a malformed `link` reaching `new URL(...)`
+* downstream would not crash the sharing-page builder, and so a
+* `javascript:` URL cannot slip through as `imageUrl` / `link`.
+*/
+function normalizeProductCandidate(candidate) {
+	if (!candidate || typeof candidate !== "object") return null;
+	const item = candidate;
+	const title = typeof item.title === "string" ? item.title.trim() : "";
+	if (title === "") return null;
+	const entry = { title };
+	if (typeof item.imageUrl === "string" && isHttpUrl(item.imageUrl)) entry.imageUrl = item.imageUrl;
+	if (typeof item.link === "string" && isHttpUrl(item.link)) entry.link = item.link;
+	if (typeof item.utmContent === "string" && item.utmContent !== "") entry.utmContent = item.utmContent;
+	return entry;
+}
 //#endregion
 //#region src/components/PostPurchase/PostPurchase.tsx
 /**
@@ -1444,7 +1504,7 @@ function resolvePostPurchaseContext(referralStatus, merchantInfo) {
 * ></frak-post-purchase>
 * ```
 */
-function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, placement: placementId, classname = "", variant: forcedVariant, badgeText: propBadgeText, referrerText: propReferrerText, refereeText: propRefereeText, ctaText: propCtaText, preview, previewVariant }) {
+function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, placement: placementId, classname = "", variant: forcedVariant, badgeText: propBadgeText, referrerText: propReferrerText, refereeText: propRefereeText, ctaText: propCtaText, preview, previewVariant, products }) {
 	const isPreview = !!preview;
 	const { shouldRender, isHidden, isClientReady } = useClientReady();
 	const placement = usePlacement(placementId);
@@ -1531,7 +1591,32 @@ function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, plac
 		placementId,
 		context?.reward
 	]);
-	const { handleShare } = useShareModal(void 0, placementId, resolvedSharingUrl);
+	const parsedProducts = useMemo(() => {
+		const candidates = coerceProductCandidates(products);
+		if (!candidates) return void 0;
+		const sanitized = [];
+		for (const candidate of candidates) {
+			const entry = normalizeProductCandidate(candidate);
+			if (entry) sanitized.push(entry);
+		}
+		return sanitized.length > 0 ? sanitized : void 0;
+	}, [products]);
+	const handleClick = useCallback(() => {
+		if (!resolvedVariant) return;
+		trackEvent(window.FrakSetup?.client, "post_purchase_clicked", {
+			placement: placementId,
+			variant: resolvedVariant
+		});
+		openSharingPage(void 0, placementId, {
+			link: resolvedSharingUrl,
+			products: parsedProducts
+		});
+	}, [
+		resolvedVariant,
+		placementId,
+		resolvedSharingUrl,
+		parsedProducts
+	]);
 	if (!isPreview && (!shouldRender || isHidden)) return null;
 	if (!isPreview && (!context || !resolvedVariant)) return null;
 	if (!resolvedVariant) return null;
@@ -1557,14 +1642,7 @@ function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, plac
 						type: "button",
 						className: `${cta} button`,
 						disabled: !isPreview && !isClientReady,
-						onClick: isPreview ? void 0 : () => {
-							if (!resolvedVariant) return;
-							trackEvent(window.FrakSetup?.client, "post_purchase_clicked", {
-								placement: placementId,
-								variant: resolvedVariant
-							});
-							handleShare();
-						},
+						onClick: isPreview ? void 0 : handleClick,
 						children: [texts.cta, /* @__PURE__ */ jsx("svg", {
 							width: "16",
 							height: "16",
@@ -1588,10 +1666,10 @@ function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, plac
 						className: giftIcon,
 						width: 80,
 						height: 80
-					}), /* @__PURE__ */ jsx(LogoFrak, {
+					}), /* @__PURE__ */ jsx(LogoFrakWithName, {
 						className: frakLogo,
-						width: 14,
-						height: 14
+						width: 42,
+						height: 24
 					})]
 				})
 			})]
@@ -1613,6 +1691,7 @@ registerWebComponent(PostPurchase, "frak-post-purchase", [
 	"referrerText",
 	"refereeText",
 	"ctaText",
+	"products",
 	"preview",
 	"previewVariant"
 ], { shadow: false });

package/dist/sharingPage-DFvQbviS.js

@@ -0,0 +1,15 @@
+import { displaySharingPage } from "@frak-labs/core-sdk/actions";
+//#region src/utils/sharingPage.ts
+async function openSharingPage(targetInteraction, placement, options) {
+	if (!window.FrakSetup?.client) {
+		console.error("Frak client not found");
+		return;
+	}
+	await displaySharingPage(window.FrakSetup.client, {
+		...options?.link && { link: options.link },
+		...options?.products?.length && { products: options.products },
+		...targetInteraction && { metadata: { targetInteraction } }
+	}, placement);
+}
+//#endregion
+export { openSharingPage as t };