@frak-labs/components 0.0.26-beta.53dfa7b2 → 0.0.26-beta.61feeff8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/cdn/Banner.BfA_VDsk.js +132 -0
  2. package/cdn/ButtonShare.Dl8hptWq.js +1 -0
  3. package/cdn/ButtonWallet.Boy4WanE.js +40 -0
  4. package/cdn/OpenInAppButton.BBj09SVF.js +1 -0
  5. package/cdn/PostPurchase.Dm7hQC-m.js +47 -0
  6. package/cdn/components.js +1 -1
  7. package/cdn/formatReward.D0OKqV7x.js +1 -0
  8. package/cdn/jsxRuntime.module.D7jbXhdY.js +58 -0
  9. package/cdn/loader.js +4 -4
  10. package/cdn/sprinkles.css.ts.vanilla.BtNHSSRm.js +1175 -0
  11. package/cdn/useLightDomStyles.x0mCz8nV.js +1 -0
  12. package/cdn/useReward.BnRGyYMM.js +1 -0
  13. package/cdn/useShareModal.DsoI-v9u.js +1 -0
  14. package/dist/GiftIcon-BrNVWoWm.js +1246 -0
  15. package/dist/banner.d.ts +9 -8
  16. package/dist/banner.js +297 -87
  17. package/dist/buttonShare.js +6 -5
  18. package/dist/buttonWallet.js +2 -2
  19. package/dist/{formatReward-_UYA3aHE.js → formatReward-DglcX-Xj.js} +8 -1
  20. package/dist/openInApp.js +2 -2
  21. package/dist/postPurchase.js +16 -1265
  22. package/dist/{useLightDomStyles-B5Y_fH4K.js → useLightDomStyles-Cjpf0MnX.js} +1 -1
  23. package/dist/{usePlacement-CHEgrdvN.js → usePlacement-LqYjZLX_.js} +1 -82
  24. package/dist/{useReward-XF2hB_C_.js → useReward-Cup3DU1-.js} +1 -1
  25. package/package.json +8 -8
  26. package/cdn/Banner.BrITmwhY.js +0 -1
  27. package/cdn/ButtonShare.Byvhu5Tc.js +0 -1
  28. package/cdn/ButtonWallet.C_GtjZpW.js +0 -40
  29. package/cdn/OpenInAppButton.CZBmQT_a.js +0 -1
  30. package/cdn/PostPurchase.BNSQonvO.js +0 -2362
  31. package/cdn/formatReward.DXMr8a-D.js +0 -1
  32. package/cdn/jsxRuntime.module.GTd8MQxp.js +0 -138
  33. package/cdn/useLightDomStyles.B33IA3q5.js +0 -1
  34. package/cdn/useReward.CvZWCurW.js +0 -1
  35. package/cdn/useShareModal.BJBvkHbY.js +0 -1
package/dist/banner.d.ts CHANGED
@@ -60,17 +60,18 @@ type BannerProps = {
60
60
  /**
61
61
  * Auto-detecting notification banner component.
62
62
  *
63
- * Renders an inline banner on the merchant page that auto-detects which
64
- * message to display:
63
+ * Renders an inline banner on the merchant page with one of two distinct
64
+ * visual styles depending on the detected mode:
65
65
  *
66
- * - **Referral mode**: Shown after successful referral link processing.
67
- * Displays reward info and a dismiss button ("Got it").
68
- * - **In-app browser mode**: Shown when the page is opened inside a social
69
- * media in-app browser (Instagram, Facebook). Offers a redirect to the
70
- * default browser.
66
+ * - **Referral mode** (white): Shown after a successful referral link
67
+ * processing. Displays a gift icon, reward copy, and a "Got it" CTA.
68
+ * - **In-app browser mode** (dark transparent): Shown when the page is
69
+ * opened inside a social media in-app browser (Instagram, Facebook).
70
+ * Offers an inline link to redirect to the default browser plus a
71
+ * close button to dismiss.
71
72
  *
72
73
  * In-app browser mode takes priority over referral mode.
73
- * Uses Light DOM to inherit merchant page styles.
74
+ * Uses Light DOM + vanilla-extract styles from `@frak-labs/design-system`.
74
75
  *
75
76
  * @group components
76
77
  *
package/dist/banner.js CHANGED
@@ -1,82 +1,226 @@
1
- import { a as useClientReady, n as bannerBaseCss, o as registerWebComponent, t as usePlacement } from "./usePlacement-CHEgrdvN.js";
2
- import { t as useLightDomStyles } from "./useLightDomStyles-B5Y_fH4K.js";
3
- import { t as useReward } from "./useReward-XF2hB_C_.js";
1
+ import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
2
+ import { t as useLightDomStyles } from "./useLightDomStyles-Cjpf0MnX.js";
3
+ import { t as useReward } from "./useReward-Cup3DU1-.js";
4
+ import { i as cssSource$2, n as cssSource$4, r as cssSource$3, t as GiftIcon } from "./GiftIcon-BrNVWoWm.js";
4
5
  import { isInAppBrowser, redirectToExternalBrowser } from "@frak-labs/core-sdk";
5
- import { REFERRAL_SUCCESS_EVENT } from "@frak-labs/core-sdk/actions";
6
+ import { REFERRAL_SUCCESS_EVENT, getMergeToken } from "@frak-labs/core-sdk/actions";
6
7
  import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
7
8
  import { jsx, jsxs } from "preact/jsx-runtime";
8
- //#region src/components/Banner/Banner.tsx
9
- /**
10
- * Reward/gift icon for referral mode.
11
- */
12
- function RewardIcon() {
13
- return /* @__PURE__ */ jsxs("svg", {
14
- viewBox: "0 0 24 24",
9
+ //#region src/components/icons/CloseIcon.tsx
10
+ function CloseIcon(props) {
11
+ return /* @__PURE__ */ jsx("svg", {
12
+ width: "15",
13
+ height: "15",
14
+ viewBox: "0 0 15 15",
15
15
  fill: "none",
16
- stroke: "currentColor",
17
- "stroke-width": "1.5",
18
- "stroke-linecap": "round",
19
- "stroke-linejoin": "round",
20
16
  "aria-hidden": "true",
21
- children: [
22
- /* @__PURE__ */ jsx("rect", {
23
- x: "3",
24
- y: "11",
25
- width: "18",
26
- height: "11",
27
- rx: "1"
28
- }),
29
- /* @__PURE__ */ jsx("path", { d: "M12 11v11" }),
30
- /* @__PURE__ */ jsx("rect", {
31
- x: "5",
32
- y: "7",
33
- width: "14",
34
- height: "4",
35
- rx: "1"
36
- }),
37
- /* @__PURE__ */ jsx("path", { d: "M12 7c0 0-1.5-4-4.5-4S5 5 7.5 7" }),
38
- /* @__PURE__ */ jsx("path", { d: "M12 7c0 0 1.5-4 4.5-4S19 5 16.5 7" })
39
- ]
17
+ ...props,
18
+ children: /* @__PURE__ */ jsx("path", {
19
+ d: "M7.33301 0C11.383 0 14.6668 3.28307 14.667 7.33301C14.667 11.3831 11.3831 14.667 7.33301 14.667C3.28307 14.6668 0 11.383 0 7.33301C0.000175746 3.28318 3.28318 0.000175742 7.33301 0ZM10.3896 4.27734C10.151 4.0388 9.76303 4.03775 9.52441 4.27637L7.33301 6.46777L5.14258 4.27637C4.90397 4.03776 4.51601 4.03882 4.27734 4.27734C4.03869 4.516 4.03771 4.90392 4.27637 5.14258L6.4668 7.33398L4.27637 9.52441C4.03807 9.76306 4.03891 10.1511 4.27734 10.3896C4.51589 10.6282 4.9039 10.629 5.14258 10.3906L7.33301 8.2002L9.52344 10.3906C9.76198 10.629 10.15 10.6279 10.3887 10.3896C10.6273 10.151 10.6283 9.76209 10.3896 9.52344L8.2002 7.33398L10.3906 5.14258C10.6293 4.90392 10.6283 4.516 10.3896 4.27734Z",
20
+ fill: "currentColor"
21
+ })
40
22
  });
41
23
  }
42
- /**
43
- * External link icon for in-app browser mode.
44
- */
45
- function BrowserIcon() {
46
- return /* @__PURE__ */ jsxs("svg", {
47
- viewBox: "0 0 24 24",
24
+ //#endregion
25
+ //#region src/components/icons/ExternalLinkIcon.tsx
26
+ function ExternalLinkIcon(props) {
27
+ return /* @__PURE__ */ jsx("svg", {
28
+ width: "12",
29
+ height: "12",
30
+ viewBox: "0 0 12 12",
48
31
  fill: "none",
49
- stroke: "currentColor",
50
- "stroke-width": "1.5",
51
- "stroke-linecap": "round",
52
- "stroke-linejoin": "round",
53
32
  "aria-hidden": "true",
54
- children: [
55
- /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
56
- /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
57
- /* @__PURE__ */ jsx("line", {
58
- x1: "10",
59
- y1: "14",
60
- x2: "21",
61
- y2: "3"
62
- })
63
- ]
33
+ ...props,
34
+ children: /* @__PURE__ */ jsx("path", {
35
+ d: "M5.45508 0C5.75614 0.000209333 6 0.244788 6 0.545898C5.99979 0.846831 5.75601 1.09159 5.45508 1.0918H4.36426C3.05445 1.0918 2.27964 1.35707 1.81836 1.81836C1.35714 2.27966 1.0918 3.05454 1.0918 4.36426V7.63672C1.09186 8.94625 1.35713 9.72139 1.81836 10.1826C2.2797 10.6436 3.05488 10.9092 4.36426 10.9092H7.63672C8.94628 10.9091 9.72135 10.6438 10.1826 10.1826C10.6438 9.72139 10.9091 8.94625 10.9092 7.63672V6.5459C10.9092 6.24466 11.1538 6 11.4551 6C11.7561 6.00028 12 6.24483 12 6.5459V7.63672C11.9999 9.05391 11.72 10.1882 10.9541 10.9541C10.1882 11.7199 9.05394 12 7.63672 12H4.36426C2.94714 12 1.81283 11.7197 1.04688 10.9541C0.280997 10.1882 6.04321e-05 9.05391 0 7.63672V4.36426C0 2.94692 0.28099 1.81283 1.04688 1.04688C1.81284 0.280915 2.94686 0 4.36426 0H5.45508ZM11.4541 0C11.7553 2.20143e-05 11.999 0.244672 11.999 0.545898V3.16406C11.9988 3.46509 11.7552 3.70896 11.4541 3.70898C11.1532 3.70873 10.9084 3.46495 10.9082 3.16406V1.8623L6.93066 5.83984C6.71766 6.05283 6.37218 6.05283 6.15918 5.83984C5.94657 5.62681 5.94632 5.28124 6.15918 5.06836L10.1357 1.0918H8.83594C8.53504 1.09154 8.29025 0.846803 8.29004 0.545898C8.29004 0.244816 8.53491 0.000254588 8.83594 0H11.4541Z",
36
+ fill: "currentColor"
37
+ })
38
+ });
39
+ }
40
+ //#endregion
41
+ //#region src/components/icons/WarningIcon.tsx
42
+ function WarningIcon(props) {
43
+ return /* @__PURE__ */ jsx("svg", {
44
+ width: "16",
45
+ height: "16",
46
+ viewBox: "0 0 16 16",
47
+ fill: "none",
48
+ "aria-hidden": "true",
49
+ ...props,
50
+ children: /* @__PURE__ */ jsx("path", {
51
+ d: "M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM8.10352 10.207C8.82025 10.2071 9.23531 10.6346 9.23535 11.3262C9.23535 12.0304 8.82028 12.4579 8.10352 12.458C7.36167 12.4579 6.97168 12.0304 6.97168 11.3262C6.97172 10.6346 7.36171 10.2072 8.10352 10.207ZM8.84766 3.54102C9.01311 3.54121 9.14736 3.67535 9.14746 3.84082V4.74805L8.84375 8.37012C8.83069 8.52552 8.6999 8.64551 8.54395 8.64551H7.62891C7.47133 8.64523 7.34074 8.52251 7.33008 8.36523L7.08496 4.74805V3.84082C7.08507 3.67533 7.2193 3.54119 7.38477 3.54102H8.84766Z",
52
+ fill: "currentColor"
53
+ })
64
54
  });
65
55
  }
56
+ //#endregion
57
+ //#region \0ve-inline:src/components/Banner/Banner.css.ts.vanilla.js
58
+ const cssSource$1 = `@keyframes Banner_fadeIn__1gnumzi0 {
59
+ from {
60
+ opacity: 0;
61
+ transform: translateY(-4px);
62
+ }
63
+ to {
64
+ opacity: 1;
65
+ transform: translateY(0);
66
+ }
67
+ }
68
+ .Banner_rootBase__1gnumzi1 {
69
+ position: relative;
70
+ display: flex;
71
+ animation: Banner_fadeIn__1gnumzi0 300ms ease-out;
72
+ }
73
+ .Banner_iconSvg__1gnumzi2 {
74
+ width: 100%;
75
+ height: 100%;
76
+ }
77
+ .Banner_referral__1gnumzi3 {
78
+ flex-direction: row;
79
+ align-items: center;
80
+ gap: 16px;
81
+ padding: 16px;
82
+ background-color: #ffffff;
83
+ color: var(--text-primary__pbq4ak0);
84
+ }
85
+ .Banner_referralIconWrapper__1gnumzi4 {
86
+ flex-shrink: 0;
87
+ align-self: flex-start;
88
+ width: 40px;
89
+ height: 40px;
90
+ }
91
+ .Banner_referralBody__1gnumzi5 {
92
+ flex: 1;
93
+ min-width: 0;
94
+ }
95
+ .Banner_referralTitle__1gnumzi6 {
96
+ font-size: 16px;
97
+ font-weight: 600;
98
+ color: var(--text-primary__pbq4ak0);
99
+ line-height: 22px;
100
+ }
101
+ .Banner_referralDescription__1gnumzi7 {
102
+ margin-bottom: 8px;
103
+ font-size: 14px;
104
+ color: #979797;
105
+ line-height: 22px;
106
+ }
107
+ .Banner_referralCta__1gnumzi8 {
108
+ display: inline-block;
109
+ padding: 8px 16px;
110
+ border: 1px solid #000000;
111
+ border-radius: 9999px;
112
+ color: var(--text-primary__pbq4ak0);
113
+ font-size: 10px;
114
+ font-weight: 700;
115
+ line-height: 12px;
116
+ text-transform: uppercase;
117
+ }
118
+ .Banner_referralCta__1gnumzi8:focus-visible {
119
+ outline: 2px solid #000000;
120
+ outline-offset: 2px;
121
+ }
122
+ .Banner_inapp__1gnumzi9 {
123
+ flex-direction: column;
124
+ gap: 4px;
125
+ padding: 12px 16px;
126
+ padding-right: 32px;
127
+ border-radius: 12px;
128
+ background-color: #000000CC;
129
+ backdrop-filter: blur(12px);
130
+ -webkit-backdrop-filter: blur(12px);
131
+ color: #ffffff;
132
+ }
133
+ .Banner_inappHeader__1gnumzia {
134
+ display: flex;
135
+ align-items: center;
136
+ gap: 8px;
137
+ }
138
+ .Banner_inappIconWrapper__1gnumzib {
139
+ flex-shrink: 0;
140
+ width: 20px;
141
+ height: 20px;
142
+ display: flex;
143
+ align-items: center;
144
+ justify-content: center;
145
+ color: #ffffff;
146
+ }
147
+ .Banner_inappTitle__1gnumzic {
148
+ font-size: 16px;
149
+ font-weight: 500;
150
+ line-height: 26px;
151
+ color: var(--text-onAction__pbq4ak6);
152
+ }
153
+ .Banner_inappDescription__1gnumzid {
154
+ font-size: 14px;
155
+ color: var(--text-onAction__pbq4ak6);
156
+ line-height: 22px;
157
+ opacity: 0.96;
158
+ }
159
+ .Banner_inappCta__1gnumzie {
160
+ display: inline-flex;
161
+ align-items: center;
162
+ gap: 4px;
163
+ color: #2BB2FF;
164
+ font-size: 14px;
165
+ font-weight: 600;
166
+ text-decoration: underline;
167
+ text-underline-offset: 2px;
168
+ }
169
+ .Banner_inappCta__1gnumzie:focus-visible {
170
+ outline: 2px solid #2BB2FF;
171
+ outline-offset: 2px;
172
+ border-radius: 4px;
173
+ }
174
+ .Banner_inappClose__1gnumzif {
175
+ position: absolute;
176
+ top: 8px;
177
+ right: 8px;
178
+ width: 28px;
179
+ height: 28px;
180
+ display: flex;
181
+ align-items: center;
182
+ justify-content: center;
183
+ border-radius: 9999px;
184
+ color: rgba(255, 255, 255, 0.6);
185
+ }
186
+ .Banner_inappClose__1gnumzif:focus-visible {
187
+ outline: 2px solid #ffffff;
188
+ outline-offset: 2px;
189
+ }`;
190
+ //#endregion
191
+ //#region src/components/Banner/Banner.css.ts
192
+ var iconSvg = "Banner_iconSvg__1gnumzi2";
193
+ var inapp = "Banner_inapp__1gnumzi9 reset_base__1831jhd0 Banner_rootBase__1gnumzi1";
194
+ var inappClose = "Banner_inappClose__1gnumzif reset_element_button__1831jhd6 reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1";
195
+ var inappCta = "Banner_inappCta__1gnumzie reset_element_button__1831jhd6 reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1";
196
+ var inappDescription = "Banner_inappDescription__1gnumzid reset_base__1831jhd0";
197
+ var inappHeader = "Banner_inappHeader__1gnumzia";
198
+ var inappIconWrapper = "Banner_inappIconWrapper__1gnumzib";
199
+ var inappTitle = "Banner_inappTitle__1gnumzic reset_base__1831jhd0";
200
+ var referral = "Banner_referral__1gnumzi3 reset_base__1831jhd0 Banner_rootBase__1gnumzi1";
201
+ var referralBody = "Banner_referralBody__1gnumzi5";
202
+ var referralCta = "Banner_referralCta__1gnumzi8 reset_element_button__1831jhd6 reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1";
203
+ var referralDescription = "Banner_referralDescription__1gnumzi7 reset_base__1831jhd0";
204
+ var referralIconWrapper = "Banner_referralIconWrapper__1gnumzi4";
205
+ var referralTitle = "Banner_referralTitle__1gnumzi6 reset_base__1831jhd0";
206
+ const cssSource = cssSource$2 + cssSource$3 + cssSource$4 + cssSource$1;
207
+ //#endregion
208
+ //#region src/components/Banner/Banner.tsx
66
209
  /**
67
210
  * Auto-detecting notification banner component.
68
211
  *
69
- * Renders an inline banner on the merchant page that auto-detects which
70
- * message to display:
212
+ * Renders an inline banner on the merchant page with one of two distinct
213
+ * visual styles depending on the detected mode:
71
214
  *
72
- * - **Referral mode**: Shown after successful referral link processing.
73
- * Displays reward info and a dismiss button ("Got it").
74
- * - **In-app browser mode**: Shown when the page is opened inside a social
75
- * media in-app browser (Instagram, Facebook). Offers a redirect to the
76
- * default browser.
215
+ * - **Referral mode** (white): Shown after a successful referral link
216
+ * processing. Displays a gift icon, reward copy, and a "Got it" CTA.
217
+ * - **In-app browser mode** (dark transparent): Shown when the page is
218
+ * opened inside a social media in-app browser (Instagram, Facebook).
219
+ * Offers an inline link to redirect to the default browser plus a
220
+ * close button to dismiss.
77
221
  *
78
222
  * In-app browser mode takes priority over referral mode.
79
- * Uses Light DOM to inherit merchant page styles.
223
+ * Uses Light DOM + vanilla-extract styles from `@frak-labs/design-system`.
80
224
  *
81
225
  * @group components
82
226
  *
@@ -97,7 +241,7 @@ function Banner({ placement: placementId, classname = "", interaction, referralT
97
241
  const resolvedPreviewMode = previewMode === "inapp" ? "inapp" : "referral";
98
242
  const placement = usePlacement(placementId);
99
243
  const { shouldRender, isHidden, isClientReady } = useClientReady();
100
- useLightDomStyles("frak-banner", placementId, placement?.components?.banner?.css, bannerBaseCss);
244
+ useLightDomStyles("frak-banner", placementId, placement?.components?.banner?.css, cssSource);
101
245
  const [dismissed, setDismissed] = useState(false);
102
246
  const [mode, setMode] = useState(() => {
103
247
  if (isPreview) return resolvedPreviewMode;
@@ -107,17 +251,48 @@ function Banner({ placement: placementId, classname = "", interaction, referralT
107
251
  if (isPreview) setMode(resolvedPreviewMode);
108
252
  }, [isPreview, resolvedPreviewMode]);
109
253
  const { reward } = useReward(mode === "referral" && isClientReady, interaction);
254
+ const [prefetchedMergeToken, setPrefetchedMergeToken] = useState(null);
255
+ useEffect(() => {
256
+ const client = window.FrakSetup?.client;
257
+ if (mode !== "inapp" || isPreview || !isClientReady || !client) return;
258
+ getMergeToken(client).then((token) => setPrefetchedMergeToken(token)).catch(() => {});
259
+ }, [
260
+ mode,
261
+ isPreview,
262
+ isClientReady
263
+ ]);
110
264
  useEffect(() => {
111
265
  if (isPreview || mode === "inapp") return;
112
266
  const handler = () => setMode("referral");
113
267
  window.addEventListener(REFERRAL_SUCCESS_EVENT, handler);
114
268
  return () => window.removeEventListener(REFERRAL_SUCCESS_EVENT, handler);
115
269
  }, [isPreview, mode]);
116
- const handleAction = useCallback(() => {
270
+ const handleAction = useCallback(async () => {
117
271
  if (isPreview) return;
118
- if (mode === "referral") setDismissed(true);
119
- else redirectToExternalBrowser(window.location.href);
120
- }, [isPreview, mode]);
272
+ if (mode === "referral") {
273
+ setDismissed(true);
274
+ return;
275
+ }
276
+ let mergeToken = prefetchedMergeToken;
277
+ if (!mergeToken && window.FrakSetup?.client) try {
278
+ mergeToken = await getMergeToken(window.FrakSetup?.client);
279
+ } catch {}
280
+ let targetUrl = window.location.href;
281
+ if (mergeToken) {
282
+ const url = new URL(targetUrl);
283
+ url.searchParams.set("fmt", mergeToken);
284
+ targetUrl = url.toString();
285
+ }
286
+ redirectToExternalBrowser(targetUrl);
287
+ }, [
288
+ isPreview,
289
+ mode,
290
+ prefetchedMergeToken
291
+ ]);
292
+ const handleDismiss = useCallback(() => {
293
+ if (isPreview) return;
294
+ setDismissed(true);
295
+ }, [isPreview]);
121
296
  const bannerConfig = placement?.components?.banner;
122
297
  const texts = useMemo(() => {
123
298
  if (mode === "referral") {
@@ -144,37 +319,72 @@ function Banner({ placement: placementId, classname = "", interaction, referralT
144
319
  propInappDescription,
145
320
  propInappCta
146
321
  ]);
147
- if (!isPreview && (!shouldRender || isHidden || dismissed || !mode)) return null;
148
- return /* @__PURE__ */ jsxs("div", {
149
- class: [
150
- "banner",
151
- "banner__fadeIn",
152
- classname
153
- ].filter(Boolean).join(" "),
322
+ if (!mode || !isPreview && (!shouldRender || isHidden || dismissed)) return null;
323
+ const bannerClass = [
324
+ mode === "inapp" ? inapp : referral,
325
+ "frak-banner",
326
+ `frak-banner--${mode}`,
327
+ classname
328
+ ].filter(Boolean).join(" ");
329
+ if (mode === "inapp") return /* @__PURE__ */ jsxs("div", {
330
+ class: bannerClass,
154
331
  role: "alert",
155
332
  children: [
156
- /* @__PURE__ */ jsx("div", {
157
- class: "banner__icon",
158
- children: mode === "referral" ? /* @__PURE__ */ jsx(RewardIcon, {}) : /* @__PURE__ */ jsx(BrowserIcon, {})
159
- }),
160
333
  /* @__PURE__ */ jsxs("div", {
161
- class: "banner__content",
162
- children: [/* @__PURE__ */ jsx("p", {
163
- class: "banner__title",
164
- children: texts.title
334
+ class: inappHeader,
335
+ children: [/* @__PURE__ */ jsx("span", {
336
+ class: `${inappIconWrapper} frak-banner__icon`,
337
+ children: /* @__PURE__ */ jsx(WarningIcon, {})
165
338
  }), /* @__PURE__ */ jsx("p", {
166
- class: "banner__description",
167
- children: texts.description
339
+ class: `${inappTitle} frak-banner__title`,
340
+ children: texts.title
168
341
  })]
169
342
  }),
170
- /* @__PURE__ */ jsx("button", {
343
+ /* @__PURE__ */ jsx("p", {
344
+ class: `${inappDescription} frak-banner__description`,
345
+ children: texts.description
346
+ }),
347
+ /* @__PURE__ */ jsxs("button", {
171
348
  type: "button",
172
- class: "banner__cta",
349
+ class: `${inappCta} frak-banner__cta`,
173
350
  onClick: handleAction,
174
- children: texts.cta
351
+ children: [texts.cta, /* @__PURE__ */ jsx(ExternalLinkIcon, {})]
352
+ }),
353
+ /* @__PURE__ */ jsx("button", {
354
+ type: "button",
355
+ class: `${inappClose} frak-banner__close`,
356
+ onClick: handleDismiss,
357
+ "aria-label": "Dismiss",
358
+ children: /* @__PURE__ */ jsx(CloseIcon, {})
175
359
  })
176
360
  ]
177
361
  });
362
+ return /* @__PURE__ */ jsxs("div", {
363
+ class: bannerClass,
364
+ role: "alert",
365
+ children: [/* @__PURE__ */ jsx("div", {
366
+ class: `${referralIconWrapper} frak-banner__icon`,
367
+ children: /* @__PURE__ */ jsx(GiftIcon, { class: iconSvg })
368
+ }), /* @__PURE__ */ jsxs("div", {
369
+ class: `${referralBody} frak-banner__text`,
370
+ children: [
371
+ /* @__PURE__ */ jsx("p", {
372
+ class: `${referralTitle} frak-banner__title`,
373
+ children: texts.title
374
+ }),
375
+ /* @__PURE__ */ jsx("p", {
376
+ class: `${referralDescription} frak-banner__description`,
377
+ children: texts.description
378
+ }),
379
+ /* @__PURE__ */ jsx("button", {
380
+ type: "button",
381
+ class: `${referralCta} frak-banner__cta`,
382
+ onClick: handleAction,
383
+ children: texts.cta
384
+ })
385
+ ]
386
+ })]
387
+ });
178
388
  }
179
389
  //#endregion
180
390
  //#region src/components/Banner/index.ts
@@ -1,6 +1,7 @@
1
- import { a as useClientReady, c as openEmbeddedWallet, o as registerWebComponent, t as usePlacement } from "./usePlacement-CHEgrdvN.js";
2
- import { t as useLightDomStyles } from "./useLightDomStyles-B5Y_fH4K.js";
3
- import { t as useReward } from "./useReward-XF2hB_C_.js";
1
+ import { a as registerWebComponent, i as useClientReady, s as openEmbeddedWallet, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
2
+ import { t as useLightDomStyles } from "./useLightDomStyles-Cjpf0MnX.js";
3
+ import { t as applyRewardPlaceholder } from "./formatReward-DglcX-Xj.js";
4
+ import { t as useReward } from "./useReward-Cup3DU1-.js";
4
5
  import { t as useShareModal } from "./useShareModal-Bmlk3eBJ.js";
5
6
  import { trackEvent } from "@frak-labs/core-sdk";
6
7
  import { displaySharingPage } from "@frak-labs/core-sdk/actions";
@@ -222,8 +223,8 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
222
223
  const { handleShare, isError, debugInfo } = useShareModal(resolvedTargetInteraction, placementId);
223
224
  const btnText = useMemo(() => {
224
225
  if (!shouldUseReward) return resolvedText;
225
- if (!reward) return resolvedNoRewardText ?? resolvedText.replace("{REWARD}", "");
226
- return resolvedText.includes("{REWARD}") ? resolvedText.replace("{REWARD}", reward) : `${resolvedText} ${reward}`;
226
+ if (!reward) return resolvedNoRewardText ?? applyRewardPlaceholder(resolvedText, void 0);
227
+ return resolvedText.includes("{REWARD}") ? applyRewardPlaceholder(resolvedText, reward) : `${resolvedText} ${reward}`;
227
228
  }, [
228
229
  shouldUseReward,
229
230
  resolvedText,
@@ -1,5 +1,5 @@
1
- import { a as useClientReady, o as registerWebComponent, r as buildStyleContent, s as openWalletModal, t as usePlacement } from "./usePlacement-CHEgrdvN.js";
2
- import { t as useReward } from "./useReward-XF2hB_C_.js";
1
+ import { a as registerWebComponent, i as useClientReady, n as buildStyleContent, o as openWalletModal, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
2
+ import { t as useReward } from "./useReward-Cup3DU1-.js";
3
3
  import { trackEvent } from "@frak-labs/core-sdk";
4
4
  import { useEffect, useMemo, useState } from "preact/hooks";
5
5
  import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
@@ -22,5 +22,12 @@ function formatEstimatedReward(reward, currency, basketAmount) {
22
22
  }
23
23
  }
24
24
  }
25
+ /**
26
+ * Replace the `{REWARD}` placeholder in a text string with a reward value.
27
+ * If no reward is provided, returns the text with `{REWARD}` stripped.
28
+ */
29
+ function applyRewardPlaceholder(text, reward) {
30
+ return reward ? text.replace("{REWARD}", reward) : text.replace("{REWARD}", "");
31
+ }
25
32
  //#endregion
26
- export { formatEstimatedReward as t };
33
+ export { formatEstimatedReward as n, applyRewardPlaceholder as t };
package/dist/openInApp.js CHANGED
@@ -1,5 +1,5 @@
1
- import { a as useClientReady, o as registerWebComponent, t as usePlacement } from "./usePlacement-CHEgrdvN.js";
2
- import { t as useLightDomStyles } from "./useLightDomStyles-B5Y_fH4K.js";
1
+ import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
2
+ import { t as useLightDomStyles } from "./useLightDomStyles-Cjpf0MnX.js";
3
3
  import { DEEP_LINK_SCHEME, trackEvent, triggerDeepLinkWithFallback } from "@frak-labs/core-sdk";
4
4
  import { useMemo } from "preact/hooks";
5
5
  import { jsx } from "preact/jsx-runtime";