@nosto/nosto-react 2.2.1 → 2.3.0
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/LICENSE +1 -1
- package/dist/index.d.ts +23 -192
- package/dist/index.es.js +249 -221
- package/dist/index.umd.js +1 -1
- package/package.json +20 -17
- package/src/components/Nosto404.tsx +2 -25
- package/src/components/NostoCategory.tsx +2 -30
- package/src/components/NostoCheckout.tsx +2 -25
- package/src/components/NostoHome.tsx +2 -26
- package/src/components/NostoOrder.tsx +2 -33
- package/src/components/NostoOther.tsx +2 -25
- package/src/components/NostoPlacement.tsx +1 -1
- package/src/components/NostoProduct.tsx +2 -32
- package/src/components/NostoProvider.tsx +5 -9
- package/src/components/NostoSearch.tsx +2 -30
- package/src/components/NostoSession.tsx +2 -42
- package/src/context.ts +2 -2
- package/src/hooks/scriptLoader.ts +4 -4
- package/src/hooks/useDeepCompareEffect.ts +1 -4
- package/src/hooks/useLoadClientScript.ts +26 -17
- package/src/hooks/useNosto404.tsx +25 -0
- package/src/hooks/useNostoApi.ts +4 -7
- package/src/hooks/useNostoCategory.tsx +31 -0
- package/src/hooks/useNostoCheckout.tsx +25 -0
- package/src/hooks/useNostoContext.ts +2 -3
- package/src/hooks/useNostoHome.tsx +25 -0
- package/src/hooks/useNostoOrder.tsx +35 -0
- package/src/hooks/useNostoOther.tsx +25 -0
- package/src/hooks/useNostoProduct.tsx +43 -0
- package/src/hooks/useNostoSearch.tsx +31 -0
- package/src/hooks/useNostoSession.tsx +34 -0
- package/src/hooks/useRenderCampaigns.tsx +12 -9
- package/src/index.ts +23 -3
- package/src/types.ts +1 -923
- package/src/utils/types.ts +5 -3
- package/src/components/helpers.ts +0 -3
- package/src/components/index.ts +0 -11
- package/src/hooks/index.ts +0 -5
package/dist/index.es.js
CHANGED
|
@@ -1,93 +1,121 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { jsx as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { createContext as V, useContext as q, useEffect as E, useRef as P, useMemo as x, cloneElement as F, useState as H, isValidElement as M } from "react";
|
|
2
|
+
import { jsx as R } from "react/jsx-runtime";
|
|
3
|
+
import z from "react-dom";
|
|
4
|
+
const T = V({
|
|
5
|
+
account: "",
|
|
6
|
+
currentVariation: "",
|
|
7
|
+
responseMode: "HTML",
|
|
8
|
+
clientScriptLoaded: !1
|
|
9
|
+
});
|
|
10
|
+
function L() {
|
|
11
|
+
return q(T);
|
|
12
|
+
}
|
|
13
|
+
const A = (e) => String(e) === "[object Object]";
|
|
14
|
+
function b(e) {
|
|
15
|
+
if (!A(e)) return !1;
|
|
8
16
|
const t = e.constructor;
|
|
9
|
-
if (t === void 0)
|
|
10
|
-
return !0;
|
|
17
|
+
if (t === void 0) return !0;
|
|
11
18
|
const n = t.prototype;
|
|
12
|
-
return !(!
|
|
19
|
+
return !(!A(n) || !n.hasOwnProperty("isPrototypeOf"));
|
|
13
20
|
}
|
|
14
|
-
function
|
|
21
|
+
function v(e, t) {
|
|
15
22
|
if (e === t)
|
|
16
23
|
return !0;
|
|
17
24
|
if (e instanceof Date && t instanceof Date)
|
|
18
25
|
return e.getTime() === t.getTime();
|
|
19
26
|
if (e instanceof Array && t instanceof Array)
|
|
20
|
-
return e.length !== t.length ? !1 : e.every((n, r) =>
|
|
21
|
-
if (
|
|
27
|
+
return e.length !== t.length ? !1 : e.every((n, r) => v(n, t[r]));
|
|
28
|
+
if (b(e) && b(t)) {
|
|
22
29
|
const n = Object.entries(e);
|
|
23
|
-
return n.length !== Object.keys(t).length ? !1 : n.every(([r, o]) =>
|
|
30
|
+
return n.length !== Object.keys(t).length ? !1 : n.every(([r, o]) => v(o, t[r]));
|
|
24
31
|
}
|
|
25
32
|
return !1;
|
|
26
33
|
}
|
|
27
|
-
function
|
|
28
|
-
return
|
|
34
|
+
function $(e, t) {
|
|
35
|
+
return E(e, U(t));
|
|
29
36
|
}
|
|
30
|
-
function
|
|
37
|
+
function U(e) {
|
|
31
38
|
const t = P(e), n = P(0);
|
|
32
|
-
return
|
|
39
|
+
return v(e, t.current) || (t.current = e, n.current += 1), x(() => t.current, [n.current]);
|
|
33
40
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
return V(D);
|
|
41
|
+
function D() {
|
|
42
|
+
window.nostojs = window.nostojs ?? function(e) {
|
|
43
|
+
(window.nostojs.q = window.nostojs.q ?? []).push(e);
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
function W() {
|
|
47
|
+
return typeof window.nosto < "u";
|
|
42
48
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
49
|
+
const B = {
|
|
50
|
+
production: "https://connect.nosto.com/",
|
|
51
|
+
staging: "https://connect.staging.nosto.com/",
|
|
52
|
+
local: "https://connect.nosto.com/"
|
|
53
|
+
};
|
|
54
|
+
function G(e) {
|
|
55
|
+
return B[e ?? "production"];
|
|
56
|
+
}
|
|
57
|
+
function J({ merchantId: e, env: t, options: n, scriptLoader: r }) {
|
|
58
|
+
const o = new URL(`/include/${e}`, G(t));
|
|
59
|
+
return (r ?? Y)(o.toString(), n);
|
|
60
|
+
}
|
|
61
|
+
function Y(e, t) {
|
|
62
|
+
return new Promise((n, r) => {
|
|
63
|
+
const o = document.createElement("script");
|
|
64
|
+
o.src = e, o.async = !0, o.type = "text/javascript", o.onload = () => n(), o.onerror = () => r(), Object.entries((t == null ? void 0 : t.attributes) ?? {}).forEach(([c, s]) => o.setAttribute(c, s)), (t == null ? void 0 : t.position) === "head" ? document.head.appendChild(o) : document.body.appendChild(o);
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
async function w(e) {
|
|
68
|
+
return window.nostojs(e);
|
|
69
|
+
}
|
|
70
|
+
D();
|
|
71
|
+
function d(e, t, n) {
|
|
72
|
+
const { clientScriptLoaded: r } = L();
|
|
73
|
+
(n != null && n.deep ? $ : E)(() => {
|
|
74
|
+
r && w(e);
|
|
47
75
|
}, [r, ...t ?? []]);
|
|
48
76
|
}
|
|
49
|
-
var
|
|
77
|
+
var O, y = z;
|
|
50
78
|
if (process.env.NODE_ENV === "production")
|
|
51
|
-
|
|
79
|
+
O = y.createRoot, y.hydrateRoot;
|
|
52
80
|
else {
|
|
53
|
-
var
|
|
54
|
-
|
|
55
|
-
|
|
81
|
+
var I = y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
|
82
|
+
O = function(e, t) {
|
|
83
|
+
I.usingClientEntryPoint = !0;
|
|
56
84
|
try {
|
|
57
|
-
return
|
|
85
|
+
return y.createRoot(e, t);
|
|
58
86
|
} finally {
|
|
59
|
-
|
|
87
|
+
I.usingClientEntryPoint = !1;
|
|
60
88
|
}
|
|
61
89
|
};
|
|
62
90
|
}
|
|
63
|
-
function
|
|
64
|
-
return
|
|
91
|
+
function Z(e) {
|
|
92
|
+
return F(e.recommendationComponent, {
|
|
65
93
|
// eslint-disable-next-line react/prop-types
|
|
66
94
|
nostoRecommendation: e.nostoRecommendation
|
|
67
95
|
});
|
|
68
96
|
}
|
|
69
|
-
function
|
|
97
|
+
function K(e) {
|
|
70
98
|
if (!window.nostojs)
|
|
71
99
|
throw new Error("Nosto has not yet been initialized");
|
|
72
|
-
|
|
100
|
+
w((t) => {
|
|
73
101
|
t.placements.injectCampaigns(e.recommendations);
|
|
74
102
|
});
|
|
75
103
|
}
|
|
76
104
|
function l() {
|
|
77
|
-
const { responseMode: e, recommendationComponent: t } =
|
|
105
|
+
const { responseMode: e, recommendationComponent: t } = L(), n = P({});
|
|
78
106
|
if (e == "HTML")
|
|
79
|
-
return { renderCampaigns:
|
|
107
|
+
return { renderCampaigns: K };
|
|
80
108
|
function r(o) {
|
|
81
|
-
var
|
|
82
|
-
const c = ((
|
|
109
|
+
var s;
|
|
110
|
+
const c = ((s = o.campaigns) == null ? void 0 : s.recommendations) ?? {};
|
|
83
111
|
for (const a in c) {
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
/* @__PURE__ */
|
|
87
|
-
|
|
112
|
+
const u = c[a], S = "#" + a, C = document.querySelector(S);
|
|
113
|
+
C && (n.current[a] || (n.current[a] = O(C)), n.current[a].render(
|
|
114
|
+
/* @__PURE__ */ R(
|
|
115
|
+
Z,
|
|
88
116
|
{
|
|
89
117
|
recommendationComponent: t,
|
|
90
|
-
nostoRecommendation:
|
|
118
|
+
nostoRecommendation: u
|
|
91
119
|
}
|
|
92
120
|
)
|
|
93
121
|
));
|
|
@@ -95,107 +123,19 @@ function l() {
|
|
|
95
123
|
}
|
|
96
124
|
return { renderCampaigns: r };
|
|
97
125
|
}
|
|
98
|
-
function
|
|
99
|
-
return typeof window.nosto < "u";
|
|
100
|
-
}
|
|
101
|
-
function W(e, t) {
|
|
102
|
-
return new Promise((n, r) => {
|
|
103
|
-
const o = document.createElement("script");
|
|
104
|
-
o.type = "text/javascript", o.src = e, o.async = !0, o.onload = () => n(), o.onerror = () => r(), Object.entries((t == null ? void 0 : t.attributes) ?? {}).forEach(([c, i]) => o.setAttribute(c, i)), (t == null ? void 0 : t.position) === "head" ? document.head.appendChild(o) : document.body.appendChild(o);
|
|
105
|
-
});
|
|
106
|
-
}
|
|
107
|
-
function B(e) {
|
|
108
|
-
const { host: t = "connect.nosto.com", scriptLoader: n = W, account: r, shopifyMarkets: o, loadScript: c = !0 } = e, [i, a] = q(!1);
|
|
109
|
-
return O(() => {
|
|
110
|
-
function d() {
|
|
111
|
-
var s;
|
|
112
|
-
"nostoReactTest" in window && ((s = window.nosto) == null || s.reload({
|
|
113
|
-
site: "localhost"
|
|
114
|
-
})), a(!0);
|
|
115
|
-
}
|
|
116
|
-
async function C(s, m = {}) {
|
|
117
|
-
const f = `//${t}${s}`, y = { "nosto-client-script": "", ...m };
|
|
118
|
-
await n(f, { attributes: y }), d();
|
|
119
|
-
}
|
|
120
|
-
function p() {
|
|
121
|
-
var R, L;
|
|
122
|
-
const s = document.querySelector("[nosto-client-script]"), m = String((o == null ? void 0 : o.marketId) || ""), f = (o == null ? void 0 : o.language) || "", y = (s == null ? void 0 : s.getAttribute("nosto-language")) !== f || (s == null ? void 0 : s.getAttribute("nosto-market-id")) !== m;
|
|
123
|
-
if (!s || y) {
|
|
124
|
-
i && a(!1);
|
|
125
|
-
const N = document.querySelector("#nosto-sandbox");
|
|
126
|
-
(R = s == null ? void 0 : s.parentNode) == null || R.removeChild(s), (L = N == null ? void 0 : N.parentNode) == null || L.removeChild(N);
|
|
127
|
-
const $ = `/script/shopify/market/nosto.js?merchant=${r}&market=${m}&locale=${f.toLowerCase()}`;
|
|
128
|
-
C($, { "nosto-language": f, "nosto-market-id": m });
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
if (window.nostojs || (window.nostojs = (s) => {
|
|
132
|
-
(window.nostojs.q = window.nostojs.q || []).push(s);
|
|
133
|
-
}, window.nostojs((s) => s.setAutoLoad(!1))), !c) {
|
|
134
|
-
window.nosto ? d() : window.nostojs(d);
|
|
135
|
-
return;
|
|
136
|
-
}
|
|
137
|
-
if (!U() && !o) {
|
|
138
|
-
const s = `/include/${r}`;
|
|
139
|
-
C(s);
|
|
140
|
-
}
|
|
141
|
-
o && p();
|
|
142
|
-
}, [o == null ? void 0 : o.marketId, o == null ? void 0 : o.language]), { clientScriptLoaded: i };
|
|
143
|
-
}
|
|
144
|
-
function ae(e) {
|
|
145
|
-
return G(e), null;
|
|
146
|
-
}
|
|
147
|
-
function G(e) {
|
|
126
|
+
function Q(e) {
|
|
148
127
|
const { renderCampaigns: t } = l();
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
}
|
|
154
|
-
);
|
|
155
|
-
}
|
|
156
|
-
function ie(e) {
|
|
157
|
-
return J(e), null;
|
|
158
|
-
}
|
|
159
|
-
function J(e) {
|
|
160
|
-
const { renderCampaigns: t } = l();
|
|
161
|
-
u(
|
|
162
|
-
async (n) => {
|
|
163
|
-
const r = await n.defaultSession().viewOther().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
|
|
164
|
-
t(r);
|
|
165
|
-
}
|
|
166
|
-
);
|
|
167
|
-
}
|
|
168
|
-
function ue(e) {
|
|
169
|
-
return Y(e), null;
|
|
170
|
-
}
|
|
171
|
-
function Y(e) {
|
|
172
|
-
const { renderCampaigns: t } = l();
|
|
173
|
-
u(
|
|
174
|
-
async (n) => {
|
|
175
|
-
const r = await n.defaultSession().viewCart().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
|
|
176
|
-
t(r);
|
|
177
|
-
}
|
|
178
|
-
);
|
|
179
|
-
}
|
|
180
|
-
function le(e) {
|
|
181
|
-
return Z(e), null;
|
|
182
|
-
}
|
|
183
|
-
function Z({ product: e, tagging: t, placements: n }) {
|
|
184
|
-
const { renderCampaigns: r } = l();
|
|
185
|
-
u(
|
|
186
|
-
async (o) => {
|
|
187
|
-
const c = await o.defaultSession().viewProduct(t ?? e).setPlacements(n || o.placements.getPlacements()).load();
|
|
188
|
-
r(c);
|
|
189
|
-
},
|
|
190
|
-
[e, t == null ? void 0 : t.selected_sku_id]
|
|
191
|
-
);
|
|
128
|
+
d(async (n) => {
|
|
129
|
+
const r = await n.defaultSession().viewNotFound().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
|
|
130
|
+
t(r);
|
|
131
|
+
});
|
|
192
132
|
}
|
|
193
|
-
function
|
|
194
|
-
return
|
|
133
|
+
function we(e) {
|
|
134
|
+
return Q(e), null;
|
|
195
135
|
}
|
|
196
|
-
function
|
|
136
|
+
function X({ category: e, placements: t }) {
|
|
197
137
|
const { renderCampaigns: n } = l();
|
|
198
|
-
|
|
138
|
+
d(
|
|
199
139
|
async (r) => {
|
|
200
140
|
const o = await r.defaultSession().viewCategory(e).setPlacements(t || r.placements.getPlacements()).load();
|
|
201
141
|
n(o);
|
|
@@ -203,121 +143,209 @@ function K({ category: e, placements: t }) {
|
|
|
203
143
|
[e]
|
|
204
144
|
);
|
|
205
145
|
}
|
|
206
|
-
function
|
|
207
|
-
return
|
|
146
|
+
function Ce(e) {
|
|
147
|
+
return X(e), null;
|
|
208
148
|
}
|
|
209
|
-
function
|
|
210
|
-
const { renderCampaigns:
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
},
|
|
216
|
-
[e]
|
|
217
|
-
);
|
|
149
|
+
function ee(e) {
|
|
150
|
+
const { renderCampaigns: t } = l();
|
|
151
|
+
d(async (n) => {
|
|
152
|
+
const r = await n.defaultSession().viewCart().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
|
|
153
|
+
t(r);
|
|
154
|
+
});
|
|
218
155
|
}
|
|
219
|
-
function
|
|
220
|
-
return
|
|
156
|
+
function he(e) {
|
|
157
|
+
return ee(e), null;
|
|
158
|
+
}
|
|
159
|
+
function te(e) {
|
|
160
|
+
const { renderCampaigns: t } = l();
|
|
161
|
+
d(async (n) => {
|
|
162
|
+
const r = await n.defaultSession().viewFrontPage().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
|
|
163
|
+
t(r);
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
function ye(e) {
|
|
167
|
+
return te(e), null;
|
|
168
|
+
}
|
|
169
|
+
function p(e) {
|
|
170
|
+
return !e || typeof e != "object" || ne(e) || oe(e) ? e : Array.isArray(e) ? e.map(p) : Object.keys(e).reduce((t, n) => {
|
|
221
171
|
const r = n[0].toLowerCase() + n.slice(1).replace(/([A-Z]+)/g, (o, c) => "_" + c.toLowerCase());
|
|
222
|
-
return t[r] =
|
|
172
|
+
return t[r] = p(e[n]), t;
|
|
223
173
|
}, {});
|
|
224
174
|
}
|
|
225
|
-
function
|
|
175
|
+
function ne(e) {
|
|
226
176
|
return Object.prototype.toString.call(e) === "[object Date]";
|
|
227
177
|
}
|
|
228
|
-
function
|
|
178
|
+
function oe(e) {
|
|
229
179
|
return Object.prototype.toString.call(e) === "[object RegExp]";
|
|
230
180
|
}
|
|
231
|
-
function
|
|
232
|
-
return te(e), null;
|
|
233
|
-
}
|
|
234
|
-
function te({ order: e, placements: t }) {
|
|
181
|
+
function re({ order: e, placements: t }) {
|
|
235
182
|
const { renderCampaigns: n } = l();
|
|
236
|
-
|
|
183
|
+
d(
|
|
237
184
|
async (r) => {
|
|
238
|
-
const o = await r.defaultSession().addOrder(
|
|
185
|
+
const o = await r.defaultSession().addOrder(p(e)).setPlacements(t || r.placements.getPlacements()).load();
|
|
239
186
|
n(o);
|
|
240
187
|
},
|
|
241
188
|
[e],
|
|
242
189
|
{ deep: !0 }
|
|
243
190
|
);
|
|
244
191
|
}
|
|
245
|
-
function
|
|
246
|
-
return
|
|
192
|
+
function Se(e) {
|
|
193
|
+
return re(e), null;
|
|
247
194
|
}
|
|
248
|
-
function
|
|
195
|
+
function ce(e) {
|
|
249
196
|
const { renderCampaigns: t } = l();
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
197
|
+
d(async (n) => {
|
|
198
|
+
const r = await n.defaultSession().viewOther().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
|
|
199
|
+
t(r);
|
|
200
|
+
});
|
|
201
|
+
}
|
|
202
|
+
function Ne(e) {
|
|
203
|
+
return ce(e), null;
|
|
204
|
+
}
|
|
205
|
+
function Pe({ id: e, pageType: t }) {
|
|
206
|
+
return /* @__PURE__ */ R("div", { className: "nosto_element", id: e }, e + (t || ""));
|
|
207
|
+
}
|
|
208
|
+
function se({ product: e, tagging: t, placements: n, reference: r }) {
|
|
209
|
+
const { renderCampaigns: o } = l();
|
|
210
|
+
if (t && !t.product_id)
|
|
211
|
+
throw new Error("The product object must contain a product_id property");
|
|
212
|
+
const c = (t == null ? void 0 : t.product_id) ?? e;
|
|
213
|
+
d(
|
|
214
|
+
async (s) => {
|
|
215
|
+
const a = s.defaultSession().viewProduct(t ?? e).setPlacements(n || s.placements.getPlacements());
|
|
216
|
+
r && a.setRef(c, r);
|
|
217
|
+
const u = await a.load();
|
|
218
|
+
o(u);
|
|
219
|
+
},
|
|
220
|
+
[c, t == null ? void 0 : t.selected_sku_id]
|
|
255
221
|
);
|
|
256
222
|
}
|
|
257
|
-
function
|
|
258
|
-
return
|
|
223
|
+
function ve(e) {
|
|
224
|
+
return se(e), null;
|
|
225
|
+
}
|
|
226
|
+
function ae(e, t) {
|
|
227
|
+
return new Promise((n, r) => {
|
|
228
|
+
const o = document.createElement("script");
|
|
229
|
+
o.type = "text/javascript", o.src = e, o.async = !0, o.onload = () => n(), o.onerror = () => r(), Object.entries((t == null ? void 0 : t.attributes) ?? {}).forEach(([c, s]) => o.setAttribute(c, s)), (t == null ? void 0 : t.position) === "head" ? document.head.appendChild(o) : document.body.appendChild(o);
|
|
230
|
+
});
|
|
259
231
|
}
|
|
260
|
-
function
|
|
232
|
+
function ie(e) {
|
|
233
|
+
return window.nosto && "reload" in window.nosto ? (window.nosto.reload(e), !0) : !1;
|
|
234
|
+
}
|
|
235
|
+
function ue(e) {
|
|
261
236
|
const {
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
237
|
+
host: t = "connect.nosto.com",
|
|
238
|
+
scriptLoader: n = ae,
|
|
239
|
+
account: r,
|
|
240
|
+
shopifyMarkets: o,
|
|
241
|
+
loadScript: c = !0
|
|
242
|
+
} = e, [s, a] = H(!1);
|
|
243
|
+
return E(() => {
|
|
244
|
+
function u() {
|
|
245
|
+
"nostoReactTest" in window && ie({
|
|
246
|
+
site: "localhost"
|
|
247
|
+
}), a(!0);
|
|
248
|
+
}
|
|
249
|
+
async function S(i, m = {}) {
|
|
250
|
+
const f = `//${t}${i}`, N = { "nosto-client-script": "", ...m };
|
|
251
|
+
await n(f, { attributes: N }), u();
|
|
252
|
+
}
|
|
253
|
+
function C() {
|
|
254
|
+
var j, g;
|
|
255
|
+
const i = document.querySelector("[nosto-client-script]"), m = String((o == null ? void 0 : o.marketId) || ""), f = (o == null ? void 0 : o.language) || "", N = (i == null ? void 0 : i.getAttribute("nosto-language")) !== f || (i == null ? void 0 : i.getAttribute("nosto-market-id")) !== m;
|
|
256
|
+
if (!i || N) {
|
|
257
|
+
s && a(!1);
|
|
258
|
+
const h = document.querySelector("#nosto-sandbox");
|
|
259
|
+
(j = i == null ? void 0 : i.parentNode) == null || j.removeChild(i), (g = h == null ? void 0 : h.parentNode) == null || g.removeChild(h);
|
|
260
|
+
const k = `/script/shopify/market/nosto.js?merchant=${r}&market=${m}&locale=${f.toLowerCase()}`;
|
|
261
|
+
S(k, { "nosto-language": f, "nosto-market-id": m });
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
if (D(), !c) {
|
|
265
|
+
w(u);
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
268
|
+
async function _() {
|
|
269
|
+
await J({
|
|
270
|
+
merchantId: r,
|
|
271
|
+
options: {
|
|
272
|
+
attributes: { "nosto-client-script": "" }
|
|
273
|
+
},
|
|
274
|
+
scriptLoader: n
|
|
275
|
+
}), u();
|
|
276
|
+
}
|
|
277
|
+
!W() && !o && _(), o && C();
|
|
278
|
+
}, [o == null ? void 0 : o.marketId, o == null ? void 0 : o.language]), { clientScriptLoaded: s };
|
|
279
|
+
}
|
|
280
|
+
function Oe(e) {
|
|
281
|
+
const { account: t, multiCurrency: n = !1, children: r, recommendationComponent: o } = e, c = n ? e.currentVariation : "";
|
|
282
|
+
if (o && !M(o))
|
|
268
283
|
throw new Error(
|
|
269
284
|
"The recommendationComponent prop must be a valid React element. Please provide a valid React element."
|
|
270
285
|
);
|
|
271
|
-
const
|
|
272
|
-
return a &&
|
|
273
|
-
|
|
274
|
-
}), /* @__PURE__ */
|
|
275
|
-
|
|
286
|
+
const s = o ? "JSON_ORIGINAL" : "HTML", { clientScriptLoaded: a } = ue(e);
|
|
287
|
+
return a && w((u) => {
|
|
288
|
+
u.defaultSession().setVariation(c).setResponseMode(s);
|
|
289
|
+
}), /* @__PURE__ */ R(
|
|
290
|
+
T.Provider,
|
|
276
291
|
{
|
|
277
292
|
value: {
|
|
278
293
|
account: t,
|
|
279
294
|
clientScriptLoaded: a,
|
|
280
295
|
currentVariation: c,
|
|
281
|
-
responseMode:
|
|
296
|
+
responseMode: s,
|
|
282
297
|
recommendationComponent: o
|
|
283
298
|
},
|
|
284
299
|
children: r
|
|
285
300
|
}
|
|
286
301
|
);
|
|
287
302
|
}
|
|
288
|
-
function
|
|
289
|
-
|
|
303
|
+
function de({ query: e, placements: t }) {
|
|
304
|
+
const { renderCampaigns: n } = l();
|
|
305
|
+
d(
|
|
306
|
+
async (r) => {
|
|
307
|
+
const o = await r.defaultSession().viewSearch(e).setPlacements(t || r.placements.getPlacements()).load();
|
|
308
|
+
n(o);
|
|
309
|
+
},
|
|
310
|
+
[e]
|
|
311
|
+
);
|
|
312
|
+
}
|
|
313
|
+
function Ee(e) {
|
|
314
|
+
return de(e), null;
|
|
290
315
|
}
|
|
291
|
-
function
|
|
292
|
-
const { clientScriptLoaded: n } =
|
|
293
|
-
|
|
294
|
-
const r = e ?
|
|
295
|
-
n &&
|
|
316
|
+
function le({ cart: e, customer: t } = {}) {
|
|
317
|
+
const { clientScriptLoaded: n } = L();
|
|
318
|
+
$(() => {
|
|
319
|
+
const r = e ? p(e) : void 0, o = t ? p(t) : void 0;
|
|
320
|
+
n && w((c) => {
|
|
296
321
|
c.defaultSession().setCart(r).setCustomer(o).viewOther().load({ skipPageViews: !0 });
|
|
297
322
|
});
|
|
298
323
|
}, [n, e, t]);
|
|
299
324
|
}
|
|
325
|
+
function Re(e) {
|
|
326
|
+
return le(e), null;
|
|
327
|
+
}
|
|
300
328
|
export {
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
329
|
+
we as Nosto404,
|
|
330
|
+
Ce as NostoCategory,
|
|
331
|
+
he as NostoCheckout,
|
|
332
|
+
T as NostoContext,
|
|
333
|
+
ye as NostoHome,
|
|
334
|
+
Se as NostoOrder,
|
|
335
|
+
Ne as NostoOther,
|
|
336
|
+
Pe as NostoPlacement,
|
|
337
|
+
ve as NostoProduct,
|
|
338
|
+
Oe as NostoProvider,
|
|
339
|
+
Ee as NostoSearch,
|
|
340
|
+
Re as NostoSession,
|
|
341
|
+
Q as useNosto404,
|
|
342
|
+
X as useNostoCategory,
|
|
343
|
+
ee as useNostoCheckout,
|
|
344
|
+
L as useNostoContext,
|
|
345
|
+
te as useNostoHome,
|
|
346
|
+
re as useNostoOrder,
|
|
347
|
+
ce as useNostoOther,
|
|
348
|
+
se as useNostoProduct,
|
|
349
|
+
de as useNostoSearch,
|
|
350
|
+
le as useNostoSession
|
|
323
351
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(r,
|
|
1
|
+
(function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react"),require("react/jsx-runtime"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime","react-dom"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r["@nosto/nosto-react"]={},r.React,r["react/jsx-runtime"],r.ReactDOM))})(this,function(r,i,O,B){"use strict";const v=i.createContext({account:"",currentVariation:"",responseMode:"HTML",clientScriptLoaded:!1});function h(){return i.useContext(v)}const _=e=>String(e)==="[object Object]";function g(e){if(!_(e))return!1;const t=e.constructor;if(t===void 0)return!0;const n=t.prototype;return!(!_(n)||!n.hasOwnProperty("isPrototypeOf"))}function E(e,t){if(e===t)return!0;if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(e instanceof Array&&t instanceof Array)return e.length!==t.length?!1:e.every((n,c)=>E(n,t[c]));if(g(e)&&g(t)){const n=Object.entries(e);return n.length!==Object.keys(t).length?!1:n.every(([c,o])=>E(o,t[c]))}return!1}function T(e,t){return i.useEffect(e,G(t))}function G(e){const t=i.useRef(e),n=i.useRef(0);return E(e,t.current)||(t.current=e,n.current+=1),i.useMemo(()=>t.current,[n.current])}function A(){window.nostojs=window.nostojs??function(e){(window.nostojs.q=window.nostojs.q??[]).push(e)}}function J(){return typeof window.nosto<"u"}const Y={production:"https://connect.nosto.com/",staging:"https://connect.staging.nosto.com/",local:"https://connect.nosto.com/"};function Z(e){return Y[e??"production"]}function K({merchantId:e,env:t,options:n,scriptLoader:c}){const o=new URL(`/include/${e}`,Z(t));return(c??Q)(o.toString(),n)}function Q(e,t){return new Promise((n,c)=>{const o=document.createElement("script");o.src=e,o.async=!0,o.type="text/javascript",o.onload=()=>n(),o.onerror=()=>c(),Object.entries((t==null?void 0:t.attributes)??{}).forEach(([s,a])=>o.setAttribute(s,a)),(t==null?void 0:t.position)==="head"?document.head.appendChild(o):document.body.appendChild(o)})}async function C(e){return window.nostojs(e)}A();function m(e,t,n){const{clientScriptLoaded:c}=h();(n!=null&&n.deep?T:i.useEffect)(()=>{c&&C(e)},[c,...t??[]])}var R,y=B;if(process.env.NODE_ENV==="production")R=y.createRoot,y.hydrateRoot;else{var b=y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;R=function(e,t){b.usingClientEntryPoint=!0;try{return y.createRoot(e,t)}finally{b.usingClientEntryPoint=!1}}}function X(e){return i.cloneElement(e.recommendationComponent,{nostoRecommendation:e.nostoRecommendation})}function x(e){if(!window.nostojs)throw new Error("Nosto has not yet been initialized");C(t=>{t.placements.injectCampaigns(e.recommendations)})}function f(){const{responseMode:e,recommendationComponent:t}=h(),n=i.useRef({});if(e=="HTML")return{renderCampaigns:x};function c(o){var a;const s=((a=o.campaigns)==null?void 0:a.recommendations)??{};for(const u in s){const l=s[u],j="#"+u,S=document.querySelector(j);S&&(n.current[u]||(n.current[u]=R(S)),n.current[u].render(O.jsx(X,{recommendationComponent:t,nostoRecommendation:l})))}}return{renderCampaigns:c}}function I(e){const{renderCampaigns:t}=f();m(async n=>{const c=await n.defaultSession().viewNotFound().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(c)})}function ee(e){return I(e),null}function D({category:e,placements:t}){const{renderCampaigns:n}=f();m(async c=>{const o=await c.defaultSession().viewCategory(e).setPlacements(t||c.placements.getPlacements()).load();n(o)},[e])}function te(e){return D(e),null}function k(e){const{renderCampaigns:t}=f();m(async n=>{const c=await n.defaultSession().viewCart().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(c)})}function ne(e){return k(e),null}function $(e){const{renderCampaigns:t}=f();m(async n=>{const c=await n.defaultSession().viewFrontPage().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(c)})}function oe(e){return $(e),null}function N(e){return!e||typeof e!="object"||ce(e)||re(e)?e:Array.isArray(e)?e.map(N):Object.keys(e).reduce((t,n)=>{const c=n[0].toLowerCase()+n.slice(1).replace(/([A-Z]+)/g,(o,s)=>"_"+s.toLowerCase());return t[c]=N(e[n]),t},{})}function ce(e){return Object.prototype.toString.call(e)==="[object Date]"}function re(e){return Object.prototype.toString.call(e)==="[object RegExp]"}function q({order:e,placements:t}){const{renderCampaigns:n}=f();m(async c=>{const o=await c.defaultSession().addOrder(N(e)).setPlacements(t||c.placements.getPlacements()).load();n(o)},[e],{deep:!0})}function se(e){return q(e),null}function H(e){const{renderCampaigns:t}=f();m(async n=>{const c=await n.defaultSession().viewOther().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(c)})}function ie(e){return H(e),null}function ae({id:e,pageType:t}){return O.jsx("div",{className:"nosto_element",id:e},e+(t||""))}function V({product:e,tagging:t,placements:n,reference:c}){const{renderCampaigns:o}=f();if(t&&!t.product_id)throw new Error("The product object must contain a product_id property");const s=(t==null?void 0:t.product_id)??e;m(async a=>{const u=a.defaultSession().viewProduct(t??e).setPlacements(n||a.placements.getPlacements());c&&u.setRef(s,c);const l=await u.load();o(l)},[s,t==null?void 0:t.selected_sku_id])}function ue(e){return V(e),null}function de(e,t){return new Promise((n,c)=>{const o=document.createElement("script");o.type="text/javascript",o.src=e,o.async=!0,o.onload=()=>n(),o.onerror=()=>c(),Object.entries((t==null?void 0:t.attributes)??{}).forEach(([s,a])=>o.setAttribute(s,a)),(t==null?void 0:t.position)==="head"?document.head.appendChild(o):document.body.appendChild(o)})}function le(e){return window.nosto&&"reload"in window.nosto?(window.nosto.reload(e),!0):!1}function me(e){const{host:t="connect.nosto.com",scriptLoader:n=de,account:c,shopifyMarkets:o,loadScript:s=!0}=e,[a,u]=i.useState(!1);return i.useEffect(()=>{function l(){"nostoReactTest"in window&&le({site:"localhost"}),u(!0)}async function j(d,w={}){const p=`//${t}${d}`,L={"nosto-client-script":"",...w};await n(p,{attributes:L}),l()}function S(){var U,W;const d=document.querySelector("[nosto-client-script]"),w=String((o==null?void 0:o.marketId)||""),p=(o==null?void 0:o.language)||"",L=(d==null?void 0:d.getAttribute("nosto-language"))!==p||(d==null?void 0:d.getAttribute("nosto-market-id"))!==w;if(!d||L){a&&u(!1);const P=document.querySelector("#nosto-sandbox");(U=d==null?void 0:d.parentNode)==null||U.removeChild(d),(W=P==null?void 0:P.parentNode)==null||W.removeChild(P);const we=`/script/shopify/market/nosto.js?merchant=${c}&market=${w}&locale=${p.toLowerCase()}`;j(we,{"nosto-language":p,"nosto-market-id":w})}}if(A(),!s){C(l);return}async function z(){await K({merchantId:c,options:{attributes:{"nosto-client-script":""}},scriptLoader:n}),l()}!J()&&!o&&z(),o&&S()},[o==null?void 0:o.marketId,o==null?void 0:o.language]),{clientScriptLoaded:a}}function fe(e){const{account:t,multiCurrency:n=!1,children:c,recommendationComponent:o}=e,s=n?e.currentVariation:"";if(o&&!i.isValidElement(o))throw new Error("The recommendationComponent prop must be a valid React element. Please provide a valid React element.");const a=o?"JSON_ORIGINAL":"HTML",{clientScriptLoaded:u}=me(e);return u&&C(l=>{l.defaultSession().setVariation(s).setResponseMode(a)}),O.jsx(v.Provider,{value:{account:t,clientScriptLoaded:u,currentVariation:s,responseMode:a,recommendationComponent:o},children:c})}function M({query:e,placements:t}){const{renderCampaigns:n}=f();m(async c=>{const o=await c.defaultSession().viewSearch(e).setPlacements(t||c.placements.getPlacements()).load();n(o)},[e])}function Ce(e){return M(e),null}function F({cart:e,customer:t}={}){const{clientScriptLoaded:n}=h();T(()=>{const c=e?N(e):void 0,o=t?N(t):void 0;n&&C(s=>{s.defaultSession().setCart(c).setCustomer(o).viewOther().load({skipPageViews:!0})})},[n,e,t])}function Ne(e){return F(e),null}r.Nosto404=ee,r.NostoCategory=te,r.NostoCheckout=ne,r.NostoContext=v,r.NostoHome=oe,r.NostoOrder=se,r.NostoOther=ie,r.NostoPlacement=ae,r.NostoProduct=ue,r.NostoProvider=fe,r.NostoSearch=Ce,r.NostoSession=Ne,r.useNosto404=I,r.useNostoCategory=D,r.useNostoCheckout=k,r.useNostoContext=h,r.useNostoHome=$,r.useNostoOrder=q,r.useNostoOther=H,r.useNostoProduct=V,r.useNostoSearch=M,r.useNostoSession=F,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
|