@frak-labs/components 0.0.26-beta.4b98158f → 0.0.26-beta.4c302c9e
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.
- package/cdn/Banner.8suUv8bz.js +64 -0
- package/cdn/ButtonShare.BQUz6qnD.js +1 -0
- package/cdn/ButtonWallet.BWuCPyeD.js +40 -0
- package/cdn/OpenInAppButton.Cth7PeZO.js +1 -0
- package/cdn/PostPurchase.unZJ0uRk.js +52 -0
- package/cdn/components.js +1 -1
- package/cdn/formatReward.DGzaZNpK.js +1 -0
- package/cdn/loader.js +26 -26
- package/cdn/{sprinkles.css.ts.vanilla.BKH7Z6IK.js → sprinkles.css.ts.vanilla.DqftZWaO.js} +55 -55
- package/cdn/useLightDomStyles.DvsTLyAM.js +1 -0
- package/cdn/usePlacement.B7jMsQvP.js +58 -0
- package/cdn/useReward.z3Xv9W3b.js +1 -0
- package/cdn/useShareModal.BMEdhsoV.js +1 -0
- package/dist/{GiftIcon-BrNVWoWm.js → GiftIcon-ByLU2AzK.js} +72 -1
- package/dist/banner.js +209 -158
- package/dist/buttonShare.js +4 -3
- package/dist/buttonWallet.js +1 -1
- package/dist/{formatReward-_UYA3aHE.js → formatReward-DglcX-Xj.js} +8 -1
- package/dist/postPurchase.js +27 -11
- package/dist/{useReward-XF2hB_C_.js → useReward-Cup3DU1-.js} +1 -1
- package/package.json +7 -8
- package/cdn/Banner.BV0CYYyJ.js +0 -132
- package/cdn/ButtonShare.BfQyNjgk.js +0 -1
- package/cdn/ButtonWallet.DHrL4faA.js +0 -40
- package/cdn/OpenInAppButton.BuQXYJth.js +0 -1
- package/cdn/PostPurchase.CpkvA80k.js +0 -47
- package/cdn/formatReward.DXMr8a-D.js +0 -1
- package/cdn/jsxRuntime.module.Cw8k9d3Z.js +0 -58
- package/cdn/useLightDomStyles.ICOW93sC.js +0 -1
- package/cdn/useReward.CtWbol8A.js +0 -1
- package/cdn/useShareModal.DBb9gEAh.js +0 -1
package/dist/banner.js
CHANGED
|
@@ -1,56 +1,168 @@
|
|
|
1
1
|
import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
|
|
2
2
|
import { t as useLightDomStyles } from "./useLightDomStyles-Cjpf0MnX.js";
|
|
3
|
-
import { t as useReward } from "./useReward-
|
|
4
|
-
import {
|
|
3
|
+
import { t as useReward } from "./useReward-Cup3DU1-.js";
|
|
4
|
+
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-ByLU2AzK.js";
|
|
5
5
|
import { isInAppBrowser, redirectToExternalBrowser } from "@frak-labs/core-sdk";
|
|
6
|
-
import { REFERRAL_SUCCESS_EVENT } from "@frak-labs/core-sdk/actions";
|
|
6
|
+
import { REFERRAL_SUCCESS_EVENT, getMergeToken } from "@frak-labs/core-sdk/actions";
|
|
7
7
|
import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
|
|
8
8
|
import { jsx, jsxs } from "preact/jsx-runtime";
|
|
9
|
-
//#region src/
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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
|
-
})
|
|
22
|
-
});
|
|
9
|
+
//#region \0ve-inline:../../packages/design-system/src/styles/inAppBanner.css.ts.vanilla.js
|
|
10
|
+
const cssSource$3 = `@keyframes inAppBanner_fadeIn__1ibpiy70 {
|
|
11
|
+
from {
|
|
12
|
+
opacity: 0;
|
|
13
|
+
transform: translateY(-4px);
|
|
14
|
+
}
|
|
15
|
+
to {
|
|
16
|
+
opacity: 1;
|
|
17
|
+
transform: translateY(0);
|
|
18
|
+
}
|
|
23
19
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
20
|
+
.inAppBanner_container__1ibpiy71 {
|
|
21
|
+
position: fixed;
|
|
22
|
+
top: max(8px, env(safe-area-inset-top));
|
|
23
|
+
left: 16px;
|
|
24
|
+
right: 16px;
|
|
25
|
+
z-index: 1000;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
gap: 4px;
|
|
29
|
+
padding: 12px 16px;
|
|
30
|
+
padding-right: 32px;
|
|
31
|
+
border-radius: 12px;
|
|
32
|
+
background-color: #000000CC;
|
|
33
|
+
backdrop-filter: blur(12px);
|
|
34
|
+
-webkit-backdrop-filter: blur(12px);
|
|
35
|
+
color: #ffffff;
|
|
36
|
+
animation: inAppBanner_fadeIn__1ibpiy70 300ms ease-out;
|
|
37
|
+
}
|
|
38
|
+
.inAppBanner_header__1ibpiy72 {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: 8px;
|
|
42
|
+
}
|
|
43
|
+
.inAppBanner_iconWrapper__1ibpiy73 {
|
|
44
|
+
flex-shrink: 0;
|
|
45
|
+
width: 20px;
|
|
46
|
+
height: 20px;
|
|
47
|
+
display: flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
color: #ffffff;
|
|
51
|
+
}
|
|
52
|
+
.inAppBanner_title__1ibpiy74 {
|
|
53
|
+
margin: 0;
|
|
54
|
+
padding: 0;
|
|
55
|
+
font-size: 16px;
|
|
56
|
+
font-weight: 500;
|
|
57
|
+
line-height: 26px;
|
|
58
|
+
color: var(--text-onAction__pbq4ak6);
|
|
59
|
+
}
|
|
60
|
+
.inAppBanner_body__1ibpiy75 {
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-wrap: wrap;
|
|
63
|
+
align-items: baseline;
|
|
64
|
+
gap: 0 4px;
|
|
65
|
+
}
|
|
66
|
+
.inAppBanner_description__1ibpiy76 {
|
|
67
|
+
margin: 0;
|
|
68
|
+
padding: 0;
|
|
69
|
+
font-size: 14px;
|
|
70
|
+
color: var(--text-onAction__pbq4ak6);
|
|
71
|
+
line-height: 22px;
|
|
72
|
+
opacity: 0.96;
|
|
39
73
|
}
|
|
74
|
+
.inAppBanner_cta__1ibpiy77 {
|
|
75
|
+
all: unset;
|
|
76
|
+
display: inline-flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
gap: 4px;
|
|
79
|
+
color: #2BB2FF;
|
|
80
|
+
font-size: 14px;
|
|
81
|
+
font-weight: 600;
|
|
82
|
+
text-decoration: underline;
|
|
83
|
+
text-underline-offset: 2px;
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
}
|
|
86
|
+
.inAppBanner_cta__1ibpiy77:focus-visible {
|
|
87
|
+
outline: 2px solid #2BB2FF;
|
|
88
|
+
outline-offset: 2px;
|
|
89
|
+
border-radius: 4px;
|
|
90
|
+
}
|
|
91
|
+
.inAppBanner_closeButton__1ibpiy78 {
|
|
92
|
+
all: unset;
|
|
93
|
+
position: absolute;
|
|
94
|
+
top: 8px;
|
|
95
|
+
right: 8px;
|
|
96
|
+
width: 28px;
|
|
97
|
+
height: 28px;
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
border-radius: 9999px;
|
|
102
|
+
color: rgba(255, 255, 255, 0.6);
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
}
|
|
105
|
+
.inAppBanner_closeButton__1ibpiy78:focus-visible {
|
|
106
|
+
outline: 2px solid #ffffff;
|
|
107
|
+
outline-offset: 2px;
|
|
108
|
+
}`;
|
|
109
|
+
//#endregion
|
|
110
|
+
//#region ../../packages/design-system/src/styles/inAppBanner.css.ts
|
|
111
|
+
var body = "inAppBanner_body__1ibpiy75";
|
|
112
|
+
var closeButton = "inAppBanner_closeButton__1ibpiy78";
|
|
113
|
+
var container = "inAppBanner_container__1ibpiy71";
|
|
114
|
+
var cta = "inAppBanner_cta__1ibpiy77";
|
|
115
|
+
var description = "inAppBanner_description__1ibpiy76";
|
|
116
|
+
var header = "inAppBanner_header__1ibpiy72";
|
|
117
|
+
var iconWrapper = "inAppBanner_iconWrapper__1ibpiy73";
|
|
118
|
+
var title = "inAppBanner_title__1ibpiy74";
|
|
119
|
+
cssSource$4 + cssSource$3;
|
|
40
120
|
//#endregion
|
|
41
|
-
//#region src/components/
|
|
42
|
-
function
|
|
43
|
-
return /* @__PURE__ */
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
121
|
+
//#region ../../packages/design-system/src/components/InAppBanner/index.tsx
|
|
122
|
+
function InAppBanner({ title: title$1, description: description$1, cta: cta$1, dismissLabel, onAction, onDismiss, className, classNames }) {
|
|
123
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
124
|
+
className: `${container}${className ? ` ${className}` : ""}`,
|
|
125
|
+
role: "alert",
|
|
126
|
+
children: [
|
|
127
|
+
/* @__PURE__ */ jsxs("div", {
|
|
128
|
+
className: header,
|
|
129
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
130
|
+
className: `${iconWrapper}${classNames?.icon ? ` ${classNames.icon}` : ""}`,
|
|
131
|
+
children: /* @__PURE__ */ jsx(WarningIcon, {
|
|
132
|
+
width: 20,
|
|
133
|
+
height: 20
|
|
134
|
+
})
|
|
135
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
136
|
+
className: `${title}${classNames?.title ? ` ${classNames.title}` : ""}`,
|
|
137
|
+
children: title$1
|
|
138
|
+
})]
|
|
139
|
+
}),
|
|
140
|
+
/* @__PURE__ */ jsxs("div", {
|
|
141
|
+
className: body,
|
|
142
|
+
children: [/* @__PURE__ */ jsx("p", {
|
|
143
|
+
className: `${description}${classNames?.description ? ` ${classNames.description}` : ""}`,
|
|
144
|
+
children: description$1
|
|
145
|
+
}), /* @__PURE__ */ jsxs("button", {
|
|
146
|
+
type: "button",
|
|
147
|
+
className: `${cta}${classNames?.cta ? ` ${classNames.cta}` : ""}`,
|
|
148
|
+
onClick: onAction,
|
|
149
|
+
children: [cta$1, /* @__PURE__ */ jsx(ExternalLinkIcon, {
|
|
150
|
+
width: 14,
|
|
151
|
+
height: 14
|
|
152
|
+
})]
|
|
153
|
+
})]
|
|
154
|
+
}),
|
|
155
|
+
/* @__PURE__ */ jsx("button", {
|
|
156
|
+
type: "button",
|
|
157
|
+
className: `${closeButton}${classNames?.close ? ` ${classNames.close}` : ""}`,
|
|
158
|
+
onClick: onDismiss,
|
|
159
|
+
"aria-label": dismissLabel,
|
|
160
|
+
children: /* @__PURE__ */ jsx(CloseCircleIcon, {
|
|
161
|
+
width: 16,
|
|
162
|
+
height: 16
|
|
163
|
+
})
|
|
164
|
+
})
|
|
165
|
+
]
|
|
54
166
|
});
|
|
55
167
|
}
|
|
56
168
|
//#endregion
|
|
@@ -118,92 +230,17 @@ const cssSource$1 = `@keyframes Banner_fadeIn__1gnumzi0 {
|
|
|
118
230
|
.Banner_referralCta__1gnumzi8:focus-visible {
|
|
119
231
|
outline: 2px solid #000000;
|
|
120
232
|
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
233
|
}`;
|
|
190
234
|
//#endregion
|
|
191
235
|
//#region src/components/Banner/Banner.css.ts
|
|
192
236
|
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
237
|
var referral = "Banner_referral__1gnumzi3 reset_base__1831jhd0 Banner_rootBase__1gnumzi1";
|
|
201
238
|
var referralBody = "Banner_referralBody__1gnumzi5";
|
|
202
239
|
var referralCta = "Banner_referralCta__1gnumzi8 reset_element_button__1831jhd6 reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1";
|
|
203
240
|
var referralDescription = "Banner_referralDescription__1gnumzi7 reset_base__1831jhd0";
|
|
204
241
|
var referralIconWrapper = "Banner_referralIconWrapper__1gnumzi4";
|
|
205
242
|
var referralTitle = "Banner_referralTitle__1gnumzi6 reset_base__1831jhd0";
|
|
206
|
-
const cssSource = cssSource$
|
|
243
|
+
const cssSource = cssSource$5 + cssSource$4 + cssSource$6 + cssSource$1;
|
|
207
244
|
//#endregion
|
|
208
245
|
//#region src/components/Banner/Banner.tsx
|
|
209
246
|
/**
|
|
@@ -251,17 +288,44 @@ function Banner({ placement: placementId, classname = "", interaction, referralT
|
|
|
251
288
|
if (isPreview) setMode(resolvedPreviewMode);
|
|
252
289
|
}, [isPreview, resolvedPreviewMode]);
|
|
253
290
|
const { reward } = useReward(mode === "referral" && isClientReady, interaction);
|
|
291
|
+
const [prefetchedMergeToken, setPrefetchedMergeToken] = useState(null);
|
|
292
|
+
useEffect(() => {
|
|
293
|
+
const client = window.FrakSetup?.client;
|
|
294
|
+
if (mode !== "inapp" || isPreview || !isClientReady || !client) return;
|
|
295
|
+
getMergeToken(client).then((token) => setPrefetchedMergeToken(token)).catch(() => {});
|
|
296
|
+
}, [
|
|
297
|
+
mode,
|
|
298
|
+
isPreview,
|
|
299
|
+
isClientReady
|
|
300
|
+
]);
|
|
254
301
|
useEffect(() => {
|
|
255
302
|
if (isPreview || mode === "inapp") return;
|
|
256
303
|
const handler = () => setMode("referral");
|
|
257
304
|
window.addEventListener(REFERRAL_SUCCESS_EVENT, handler);
|
|
258
305
|
return () => window.removeEventListener(REFERRAL_SUCCESS_EVENT, handler);
|
|
259
306
|
}, [isPreview, mode]);
|
|
260
|
-
const handleAction = useCallback(() => {
|
|
307
|
+
const handleAction = useCallback(async () => {
|
|
261
308
|
if (isPreview) return;
|
|
262
|
-
if (mode === "referral")
|
|
263
|
-
|
|
264
|
-
|
|
309
|
+
if (mode === "referral") {
|
|
310
|
+
setDismissed(true);
|
|
311
|
+
return;
|
|
312
|
+
}
|
|
313
|
+
let mergeToken = prefetchedMergeToken;
|
|
314
|
+
if (!mergeToken && window.FrakSetup?.client) try {
|
|
315
|
+
mergeToken = await getMergeToken(window.FrakSetup?.client);
|
|
316
|
+
} catch {}
|
|
317
|
+
let targetUrl = window.location.href;
|
|
318
|
+
if (mergeToken) {
|
|
319
|
+
const url = new URL(targetUrl);
|
|
320
|
+
url.searchParams.set("fmt", mergeToken);
|
|
321
|
+
targetUrl = url.toString();
|
|
322
|
+
}
|
|
323
|
+
redirectToExternalBrowser(targetUrl);
|
|
324
|
+
}, [
|
|
325
|
+
isPreview,
|
|
326
|
+
mode,
|
|
327
|
+
prefetchedMergeToken
|
|
328
|
+
]);
|
|
265
329
|
const handleDismiss = useCallback(() => {
|
|
266
330
|
if (isPreview) return;
|
|
267
331
|
setDismissed(true);
|
|
@@ -294,43 +358,30 @@ function Banner({ placement: placementId, classname = "", interaction, referralT
|
|
|
294
358
|
]);
|
|
295
359
|
if (!mode || !isPreview && (!shouldRender || isHidden || dismissed)) return null;
|
|
296
360
|
const bannerClass = [
|
|
297
|
-
|
|
361
|
+
referral,
|
|
298
362
|
"frak-banner",
|
|
299
363
|
`frak-banner--${mode}`,
|
|
300
364
|
classname
|
|
301
365
|
].filter(Boolean).join(" ");
|
|
302
|
-
if (mode === "inapp") return /* @__PURE__ */
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
type: "button",
|
|
322
|
-
class: `${inappCta} frak-banner__cta`,
|
|
323
|
-
onClick: handleAction,
|
|
324
|
-
children: [texts.cta, /* @__PURE__ */ jsx(ExternalLinkIcon, {})]
|
|
325
|
-
}),
|
|
326
|
-
/* @__PURE__ */ jsx("button", {
|
|
327
|
-
type: "button",
|
|
328
|
-
class: `${inappClose} frak-banner__close`,
|
|
329
|
-
onClick: handleDismiss,
|
|
330
|
-
"aria-label": "Dismiss",
|
|
331
|
-
children: /* @__PURE__ */ jsx(CloseIcon, {})
|
|
332
|
-
})
|
|
333
|
-
]
|
|
366
|
+
if (mode === "inapp") return /* @__PURE__ */ jsx(InAppBanner, {
|
|
367
|
+
title: texts.title,
|
|
368
|
+
description: texts.description,
|
|
369
|
+
cta: texts.cta,
|
|
370
|
+
dismissLabel: "Dismiss",
|
|
371
|
+
onAction: handleAction,
|
|
372
|
+
onDismiss: handleDismiss,
|
|
373
|
+
className: [
|
|
374
|
+
"frak-banner",
|
|
375
|
+
"frak-banner--inapp",
|
|
376
|
+
classname
|
|
377
|
+
].filter(Boolean).join(" "),
|
|
378
|
+
classNames: {
|
|
379
|
+
icon: "frak-banner__icon",
|
|
380
|
+
title: "frak-banner__title",
|
|
381
|
+
description: "frak-banner__description",
|
|
382
|
+
cta: "frak-banner__cta",
|
|
383
|
+
close: "frak-banner__close"
|
|
384
|
+
}
|
|
334
385
|
});
|
|
335
386
|
return /* @__PURE__ */ jsxs("div", {
|
|
336
387
|
class: bannerClass,
|
package/dist/buttonShare.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { a as registerWebComponent, i as useClientReady, s as openEmbeddedWallet, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
|
|
2
2
|
import { t as useLightDomStyles } from "./useLightDomStyles-Cjpf0MnX.js";
|
|
3
|
-
import { t as
|
|
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
|
|
226
|
-
return resolvedText.includes("{REWARD}") ? resolvedText
|
|
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,
|
package/dist/buttonWallet.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
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-
|
|
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/postPurchase.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
|
|
2
2
|
import { t as useLightDomStyles } from "./useLightDomStyles-Cjpf0MnX.js";
|
|
3
|
-
import {
|
|
3
|
+
import { n as formatEstimatedReward, t as applyRewardPlaceholder } from "./formatReward-DglcX-Xj.js";
|
|
4
4
|
import { t as useShareModal } from "./useShareModal-Bmlk3eBJ.js";
|
|
5
|
-
import {
|
|
5
|
+
import { o as cssSource$4, r as LogoFrak, s as cssSource$3, t as GiftIcon } from "./GiftIcon-ByLU2AzK.js";
|
|
6
6
|
import { getMerchantInformation, getUserReferralStatus, trackPurchaseStatus } from "@frak-labs/core-sdk/actions";
|
|
7
7
|
import { useEffect, useMemo, useState } from "preact/hooks";
|
|
8
8
|
import { jsx, jsxs } from "preact/jsx-runtime";
|
|
@@ -1566,9 +1566,15 @@ const cssSource$1 = `.PostPurchase_card__5fv5lh0 {
|
|
|
1566
1566
|
.PostPurchase_giftIcon__5fv5lh5 {
|
|
1567
1567
|
display: block;
|
|
1568
1568
|
flex-shrink: 0;
|
|
1569
|
+
}
|
|
1570
|
+
.PostPurchase_frakLogo__5fv5lh6 {
|
|
1571
|
+
display: block;
|
|
1572
|
+
margin-left: auto;
|
|
1573
|
+
color: var(--surface-primary__pbq4aka);
|
|
1569
1574
|
}`;
|
|
1570
1575
|
var card = "PostPurchase_card__5fv5lh0";
|
|
1571
1576
|
var cta = "PostPurchase_cta__5fv5lh3";
|
|
1577
|
+
var frakLogo = "PostPurchase_frakLogo__5fv5lh6";
|
|
1572
1578
|
var giftIcon = "PostPurchase_giftIcon__5fv5lh5";
|
|
1573
1579
|
var icon = "PostPurchase_icon__5fv5lh4";
|
|
1574
1580
|
var message = "PostPurchase_message__5fv5lh2";
|
|
@@ -1642,11 +1648,14 @@ function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, plac
|
|
|
1642
1648
|
if (!isClientReady || hasFetched) return;
|
|
1643
1649
|
const client = window.FrakSetup?.client;
|
|
1644
1650
|
if (!client) return;
|
|
1645
|
-
setHasFetched(true);
|
|
1646
1651
|
Promise.all([getUserReferralStatus(client), getMerchantInformation(client)]).then(([referralStatus, merchantInfo]) => {
|
|
1652
|
+
setHasFetched(true);
|
|
1647
1653
|
setContext(resolvePostPurchaseContext(referralStatus, merchantInfo));
|
|
1648
1654
|
}).catch((e) => {
|
|
1649
|
-
if (e instanceof FrakRpcError && e.code === RpcErrorCodes.configError)
|
|
1655
|
+
if (e instanceof FrakRpcError && e.code === RpcErrorCodes.configError) {
|
|
1656
|
+
setHasFetched(true);
|
|
1657
|
+
return;
|
|
1658
|
+
}
|
|
1650
1659
|
console.warn("[Frak] Post-purchase context error", e);
|
|
1651
1660
|
});
|
|
1652
1661
|
}, [isClientReady, hasFetched]);
|
|
@@ -1660,10 +1669,9 @@ function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, plac
|
|
|
1660
1669
|
const postPurchaseConfig = placement?.components?.postPurchase;
|
|
1661
1670
|
const resolvedBadgeText = propBadgeText ?? postPurchaseConfig?.badgeText;
|
|
1662
1671
|
const texts = useMemo(() => {
|
|
1663
|
-
const applyReward = (text) => rewardText ? text.replace("{REWARD}", rewardText) : text;
|
|
1664
1672
|
return {
|
|
1665
|
-
message: resolvedVariant === "referee" ? rewardText ?
|
|
1666
|
-
cta: rewardText ?
|
|
1673
|
+
message: resolvedVariant === "referee" ? rewardText ? applyRewardPlaceholder(propRefereeText ?? postPurchaseConfig?.refereeText ?? "You just earned {REWARD}! Share with friends to earn even more.", rewardText) : propRefereeText ?? postPurchaseConfig?.refereeNoRewardText ?? "You just earned a reward! Share with friends to earn even more." : rewardText ? applyRewardPlaceholder(propReferrerText ?? postPurchaseConfig?.referrerText ?? "Earn {REWARD} by sharing this with your friends!", rewardText) : propReferrerText ?? postPurchaseConfig?.referrerNoRewardText ?? "Share this with your friends and earn rewards!",
|
|
1674
|
+
cta: rewardText ? applyRewardPlaceholder(propCtaText ?? postPurchaseConfig?.ctaText ?? "Share & earn {REWARD}", rewardText) : propCtaText ?? postPurchaseConfig?.ctaNoRewardText ?? "Share & earn"
|
|
1667
1675
|
};
|
|
1668
1676
|
}, [
|
|
1669
1677
|
resolvedVariant,
|
|
@@ -1715,10 +1723,18 @@ function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, plac
|
|
|
1715
1723
|
]
|
|
1716
1724
|
}) }), /* @__PURE__ */ jsx(Column, {
|
|
1717
1725
|
width: "content",
|
|
1718
|
-
children: /* @__PURE__ */
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1726
|
+
children: /* @__PURE__ */ jsxs(Stack, {
|
|
1727
|
+
space: "xs",
|
|
1728
|
+
align: "right",
|
|
1729
|
+
children: [/* @__PURE__ */ jsx(GiftIcon, {
|
|
1730
|
+
className: giftIcon,
|
|
1731
|
+
width: 80,
|
|
1732
|
+
height: 80
|
|
1733
|
+
}), /* @__PURE__ */ jsx(LogoFrak, {
|
|
1734
|
+
className: frakLogo,
|
|
1735
|
+
width: 14,
|
|
1736
|
+
height: 14
|
|
1737
|
+
})]
|
|
1722
1738
|
})
|
|
1723
1739
|
})]
|
|
1724
1740
|
})
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { n as formatEstimatedReward } from "./formatReward-DglcX-Xj.js";
|
|
2
2
|
import { getCurrencyAmountKey, getSupportedCurrency } from "@frak-labs/core-sdk";
|
|
3
3
|
import { getMerchantInformation } from "@frak-labs/core-sdk/actions";
|
|
4
4
|
import { useEffect, useState } from "preact/hooks";
|
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"url": "https://twitter.com/QNivelais"
|
|
12
12
|
}
|
|
13
13
|
],
|
|
14
|
-
"version": "0.0.26-beta.
|
|
14
|
+
"version": "0.0.26-beta.4c302c9e",
|
|
15
15
|
"description": "Frak Wallet components, helping any person to interact with the Frak wallet.",
|
|
16
16
|
"repository": {
|
|
17
17
|
"url": "https://github.com/frak-id/wallet",
|
|
@@ -86,14 +86,13 @@
|
|
|
86
86
|
"publish": "echo 'Publishing components...'"
|
|
87
87
|
},
|
|
88
88
|
"dependencies": {
|
|
89
|
-
"@frak-labs/core-sdk": "0.2.1-beta.
|
|
90
|
-
"@frak-labs/frame-connector": "0.2.0-beta.
|
|
89
|
+
"@frak-labs/core-sdk": "0.2.1-beta.4c302c9e",
|
|
90
|
+
"@frak-labs/frame-connector": "0.2.0-beta.4c302c9e",
|
|
91
91
|
"preact": "^10.29.0",
|
|
92
92
|
"preact-custom-element": "^4.6.0",
|
|
93
93
|
"@frak-labs/design-system": "0.0.0"
|
|
94
94
|
},
|
|
95
95
|
"devDependencies": {
|
|
96
|
-
"@frak-labs/dev-tooling": "0.0.0",
|
|
97
96
|
"@frak-labs/test-foundation": "0.1.0",
|
|
98
97
|
"@preact/preset-vite": "^2.10.4",
|
|
99
98
|
"@rolldown/plugin-node-polyfills": "^1.0.3",
|
|
@@ -101,7 +100,7 @@
|
|
|
101
100
|
"@testing-library/preact": "^3.2.4",
|
|
102
101
|
"@testing-library/user-event": "^14.6.1",
|
|
103
102
|
"@types/jsdom": "^28.0.0",
|
|
104
|
-
"@types/node": "^
|
|
103
|
+
"@types/node": "^25.6.0",
|
|
105
104
|
"@types/preact-custom-element": "^4.0.4",
|
|
106
105
|
"@vanilla-extract/css": "^1.20.1",
|
|
107
106
|
"@vanilla-extract/integration": "^8.0.10",
|
|
@@ -110,8 +109,8 @@
|
|
|
110
109
|
"@vitest/coverage-v8": "^4.1.0",
|
|
111
110
|
"@vitest/ui": "^4.1.0",
|
|
112
111
|
"jsdom": "^29.0.0",
|
|
113
|
-
"tsdown": "^0.21.
|
|
114
|
-
"typescript": "^
|
|
115
|
-
"vitest": "^4.1.
|
|
112
|
+
"tsdown": "^0.21.8",
|
|
113
|
+
"typescript": "^6.0.2",
|
|
114
|
+
"vitest": "^4.1.4"
|
|
116
115
|
}
|
|
117
116
|
}
|