@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.
Files changed (38) hide show
  1. package/LICENSE +1 -1
  2. package/dist/index.d.ts +23 -192
  3. package/dist/index.es.js +249 -221
  4. package/dist/index.umd.js +1 -1
  5. package/package.json +20 -17
  6. package/src/components/Nosto404.tsx +2 -25
  7. package/src/components/NostoCategory.tsx +2 -30
  8. package/src/components/NostoCheckout.tsx +2 -25
  9. package/src/components/NostoHome.tsx +2 -26
  10. package/src/components/NostoOrder.tsx +2 -33
  11. package/src/components/NostoOther.tsx +2 -25
  12. package/src/components/NostoPlacement.tsx +1 -1
  13. package/src/components/NostoProduct.tsx +2 -32
  14. package/src/components/NostoProvider.tsx +5 -9
  15. package/src/components/NostoSearch.tsx +2 -30
  16. package/src/components/NostoSession.tsx +2 -42
  17. package/src/context.ts +2 -2
  18. package/src/hooks/scriptLoader.ts +4 -4
  19. package/src/hooks/useDeepCompareEffect.ts +1 -4
  20. package/src/hooks/useLoadClientScript.ts +26 -17
  21. package/src/hooks/useNosto404.tsx +25 -0
  22. package/src/hooks/useNostoApi.ts +4 -7
  23. package/src/hooks/useNostoCategory.tsx +31 -0
  24. package/src/hooks/useNostoCheckout.tsx +25 -0
  25. package/src/hooks/useNostoContext.ts +2 -3
  26. package/src/hooks/useNostoHome.tsx +25 -0
  27. package/src/hooks/useNostoOrder.tsx +35 -0
  28. package/src/hooks/useNostoOther.tsx +25 -0
  29. package/src/hooks/useNostoProduct.tsx +43 -0
  30. package/src/hooks/useNostoSearch.tsx +31 -0
  31. package/src/hooks/useNostoSession.tsx +34 -0
  32. package/src/hooks/useRenderCampaigns.tsx +12 -9
  33. package/src/index.ts +23 -3
  34. package/src/types.ts +1 -923
  35. package/src/utils/types.ts +5 -3
  36. package/src/components/helpers.ts +0 -3
  37. package/src/components/index.ts +0 -11
  38. package/src/hooks/index.ts +0 -5
package/dist/index.es.js CHANGED
@@ -1,93 +1,121 @@
1
- import { useEffect as O, useRef as P, useMemo as I, createContext as k, useContext as V, cloneElement as b, useState as q, isValidElement as F } from "react";
2
- import { jsx as v } from "react/jsx-runtime";
3
- import H from "react-dom";
4
- const j = (e) => String(e) === "[object Object]";
5
- function _(e) {
6
- if (!j(e))
7
- return !1;
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 !(!j(n) || !n.hasOwnProperty("isPrototypeOf"));
19
+ return !(!A(n) || !n.hasOwnProperty("isPrototypeOf"));
13
20
  }
14
- function g(e, t) {
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) => g(n, t[r]));
21
- if (_(e) && _(t)) {
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]) => g(o, t[r]));
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 T(e, t) {
28
- return O(e, x(t));
34
+ function $(e, t) {
35
+ return E(e, U(t));
29
36
  }
30
- function x(e) {
37
+ function U(e) {
31
38
  const t = P(e), n = P(0);
32
- return g(e, t.current) || (t.current = e, n.current += 1), I(() => t.current, [n.current]);
39
+ return v(e, t.current) || (t.current = e, n.current += 1), x(() => t.current, [n.current]);
33
40
  }
34
- const D = k({
35
- account: "",
36
- currentVariation: "",
37
- responseMode: "HTML",
38
- clientScriptLoaded: !1
39
- });
40
- function E() {
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
- function u(e, t, n) {
44
- const { clientScriptLoaded: r } = E();
45
- (n != null && n.deep ? T : O)(() => {
46
- r && window.nostojs(e);
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 h, S = H;
77
+ var O, y = z;
50
78
  if (process.env.NODE_ENV === "production")
51
- h = S.createRoot, S.hydrateRoot;
79
+ O = y.createRoot, y.hydrateRoot;
52
80
  else {
53
- var A = S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
54
- h = function(e, t) {
55
- A.usingClientEntryPoint = !0;
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 S.createRoot(e, t);
85
+ return y.createRoot(e, t);
58
86
  } finally {
59
- A.usingClientEntryPoint = !1;
87
+ I.usingClientEntryPoint = !1;
60
88
  }
61
89
  };
62
90
  }
63
- function M(e) {
64
- return b(e.recommendationComponent, {
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 z(e) {
97
+ function K(e) {
70
98
  if (!window.nostojs)
71
99
  throw new Error("Nosto has not yet been initialized");
72
- window.nostojs((t) => {
100
+ w((t) => {
73
101
  t.placements.injectCampaigns(e.recommendations);
74
102
  });
75
103
  }
76
104
  function l() {
77
- const { responseMode: e, recommendationComponent: t } = E(), n = P({});
105
+ const { responseMode: e, recommendationComponent: t } = L(), n = P({});
78
106
  if (e == "HTML")
79
- return { renderCampaigns: z };
107
+ return { renderCampaigns: K };
80
108
  function r(o) {
81
- var i;
82
- const c = ((i = o.campaigns) == null ? void 0 : i.recommendations) ?? {};
109
+ var s;
110
+ const c = ((s = o.campaigns) == null ? void 0 : s.recommendations) ?? {};
83
111
  for (const a in c) {
84
- const d = c[a], C = "#" + a, p = document.querySelector(C);
85
- p && (n.current[a] || (n.current[a] = h(p)), n.current[a].render(
86
- /* @__PURE__ */ v(
87
- M,
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: d
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 U() {
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
- u(
150
- async (n) => {
151
- const r = await n.defaultSession().viewNotFound().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
152
- t(r);
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 de(e) {
194
- return K(e), null;
133
+ function we(e) {
134
+ return Q(e), null;
195
135
  }
196
- function K({ category: e, placements: t }) {
136
+ function X({ category: e, placements: t }) {
197
137
  const { renderCampaigns: n } = l();
198
- u(
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 me(e) {
207
- return Q(e), null;
146
+ function Ce(e) {
147
+ return X(e), null;
208
148
  }
209
- function Q({ query: e, placements: t }) {
210
- const { renderCampaigns: n } = l();
211
- u(
212
- async (r) => {
213
- const o = await r.defaultSession().viewSearch(e).setPlacements(t || r.placements.getPlacements()).load();
214
- n(o);
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 w(e) {
220
- return !e || typeof e != "object" || X(e) || ee(e) ? e : Array.isArray(e) ? e.map(w) : Object.keys(e).reduce((t, n) => {
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] = w(e[n]), t;
172
+ return t[r] = p(e[n]), t;
223
173
  }, {});
224
174
  }
225
- function X(e) {
175
+ function ne(e) {
226
176
  return Object.prototype.toString.call(e) === "[object Date]";
227
177
  }
228
- function ee(e) {
178
+ function oe(e) {
229
179
  return Object.prototype.toString.call(e) === "[object RegExp]";
230
180
  }
231
- function fe(e) {
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
- u(
183
+ d(
237
184
  async (r) => {
238
- const o = await r.defaultSession().addOrder(w(e)).setPlacements(t || r.placements.getPlacements()).load();
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 we(e) {
246
- return ne(e), null;
192
+ function Se(e) {
193
+ return re(e), null;
247
194
  }
248
- function ne(e) {
195
+ function ce(e) {
249
196
  const { renderCampaigns: t } = l();
250
- u(
251
- async (n) => {
252
- const r = await n.defaultSession().viewFrontPage().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
253
- t(r);
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 Ce({ id: e, pageType: t }) {
258
- return /* @__PURE__ */ v("div", { className: "nosto_element", id: e }, e + (t || ""));
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 pe(e) {
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
- account: t,
263
- multiCurrency: n = !1,
264
- children: r,
265
- recommendationComponent: o
266
- } = e, c = n ? e.currentVariation : "";
267
- if (o && !F(o))
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 i = o ? "JSON_ORIGINAL" : "HTML", { clientScriptLoaded: a } = B(e);
272
- return a && window.nostojs((d) => {
273
- d.defaultSession().setVariation(c).setResponseMode(i);
274
- }), /* @__PURE__ */ v(
275
- D.Provider,
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: i,
296
+ responseMode: s,
282
297
  recommendationComponent: o
283
298
  },
284
299
  children: r
285
300
  }
286
301
  );
287
302
  }
288
- function Ne(e) {
289
- return oe(e), null;
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 oe({ cart: e, customer: t } = {}) {
292
- const { clientScriptLoaded: n } = E();
293
- T(() => {
294
- const r = e ? w(e) : void 0, o = t ? w(t) : void 0;
295
- n && window.nostojs((c) => {
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
- ae as Nosto404,
302
- de as NostoCategory,
303
- ue as NostoCheckout,
304
- D as NostoContext,
305
- we as NostoHome,
306
- fe as NostoOrder,
307
- ie as NostoOther,
308
- Ce as NostoPlacement,
309
- le as NostoProduct,
310
- pe as NostoProvider,
311
- me as NostoSearch,
312
- Ne as NostoSession,
313
- G as useNosto404,
314
- K as useNostoCategory,
315
- Y as useNostoCheckout,
316
- E as useNostoContext,
317
- ne as useNostoHome,
318
- te as useNostoOrder,
319
- J as useNostoOther,
320
- Z as useNostoProduct,
321
- Q as useNostoSearch,
322
- oe as useNostoSession
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,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react"),require("react/jsx-runtime"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime","react-dom"],a):(r=typeof globalThis<"u"?globalThis:r||self,a(r["@nosto/nosto-react"]={},r.React,r["react/jsx-runtime"],r.ReactDOM))})(this,function(r,a,g,z){"use strict";const p=e=>String(e)==="[object Object]";function L(e){if(!p(e))return!1;const t=e.constructor;if(t===void 0)return!0;const n=t.prototype;return!(!p(n)||!n.hasOwnProperty("isPrototypeOf"))}function j(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,s)=>j(n,t[s]));if(L(e)&&L(t)){const n=Object.entries(e);return n.length!==Object.keys(t).length?!1:n.every(([s,o])=>j(o,t[s]))}return!1}function _(e,t){return a.useEffect(e,U(t))}function U(e){const t=a.useRef(e),n=a.useRef(0);return j(e,t.current)||(t.current=e,n.current+=1),a.useMemo(()=>t.current,[n.current])}const v=a.createContext({account:"",currentVariation:"",responseMode:"HTML",clientScriptLoaded:!1});function S(){return a.useContext(v)}function l(e,t,n){const{clientScriptLoaded:s}=S();(n!=null&&n.deep?_:a.useEffect)(()=>{s&&window.nostojs(e)},[s,...t??[]])}var E,y=z;if(process.env.NODE_ENV==="production")E=y.createRoot,y.hydrateRoot;else{var A=y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;E=function(e,t){A.usingClientEntryPoint=!0;try{return y.createRoot(e,t)}finally{A.usingClientEntryPoint=!1}}}function W(e){return a.cloneElement(e.recommendationComponent,{nostoRecommendation:e.nostoRecommendation})}function B(e){if(!window.nostojs)throw new Error("Nosto has not yet been initialized");window.nostojs(t=>{t.placements.injectCampaigns(e.recommendations)})}function m(){const{responseMode:e,recommendationComponent:t}=S(),n=a.useRef({});if(e=="HTML")return{renderCampaigns:B};function s(o){var d;const i=((d=o.campaigns)==null?void 0:d.recommendations)??{};for(const u in i){const f=i[u],P="#"+u,h=document.querySelector(P);h&&(n.current[u]||(n.current[u]=E(h)),n.current[u].render(g.jsx(W,{recommendationComponent:t,nostoRecommendation:f})))}}return{renderCampaigns:s}}function G(){return typeof window.nosto<"u"}function J(e,t){return new Promise((n,s)=>{const o=document.createElement("script");o.type="text/javascript",o.src=e,o.async=!0,o.onload=()=>n(),o.onerror=()=>s(),Object.entries((t==null?void 0:t.attributes)??{}).forEach(([i,d])=>o.setAttribute(i,d)),(t==null?void 0:t.position)==="head"?document.head.appendChild(o):document.body.appendChild(o)})}function Y(e){const{host:t="connect.nosto.com",scriptLoader:n=J,account:s,shopifyMarkets:o,loadScript:i=!0}=e,[d,u]=a.useState(!1);return a.useEffect(()=>{function f(){var c;"nostoReactTest"in window&&((c=window.nosto)==null||c.reload({site:"localhost"})),u(!0)}async function P(c,w={}){const C=`//${t}${c}`,R={"nosto-client-script":"",...w};await n(C,{attributes:R}),f()}function h(){var b,F;const c=document.querySelector("[nosto-client-script]"),w=String((o==null?void 0:o.marketId)||""),C=(o==null?void 0:o.language)||"",R=(c==null?void 0:c.getAttribute("nosto-language"))!==C||(c==null?void 0:c.getAttribute("nosto-market-id"))!==w;if(!c||R){d&&u(!1);const O=document.querySelector("#nosto-sandbox");(b=c==null?void 0:c.parentNode)==null||b.removeChild(c),(F=O==null?void 0:O.parentNode)==null||F.removeChild(O);const ie=`/script/shopify/market/nosto.js?merchant=${s}&market=${w}&locale=${C.toLowerCase()}`;P(ie,{"nosto-language":C,"nosto-market-id":w})}}if(window.nostojs||(window.nostojs=c=>{(window.nostojs.q=window.nostojs.q||[]).push(c)},window.nostojs(c=>c.setAutoLoad(!1))),!i){window.nosto?f():window.nostojs(f);return}if(!G()&&!o){const c=`/include/${s}`;P(c)}o&&h()},[o==null?void 0:o.marketId,o==null?void 0:o.language]),{clientScriptLoaded:d}}function Z(e){return T(e),null}function T(e){const{renderCampaigns:t}=m();l(async n=>{const s=await n.defaultSession().viewNotFound().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(s)})}function K(e){return D(e),null}function D(e){const{renderCampaigns:t}=m();l(async n=>{const s=await n.defaultSession().viewOther().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(s)})}function Q(e){return k(e),null}function k(e){const{renderCampaigns:t}=m();l(async n=>{const s=await n.defaultSession().viewCart().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(s)})}function X(e){return I(e),null}function I({product:e,tagging:t,placements:n}){const{renderCampaigns:s}=m();l(async o=>{const i=await o.defaultSession().viewProduct(t??e).setPlacements(n||o.placements.getPlacements()).load();s(i)},[e,t==null?void 0:t.selected_sku_id])}function x(e){return q(e),null}function q({category:e,placements:t}){const{renderCampaigns:n}=m();l(async s=>{const o=await s.defaultSession().viewCategory(e).setPlacements(t||s.placements.getPlacements()).load();n(o)},[e])}function ee(e){return H(e),null}function H({query:e,placements:t}){const{renderCampaigns:n}=m();l(async s=>{const o=await s.defaultSession().viewSearch(e).setPlacements(t||s.placements.getPlacements()).load();n(o)},[e])}function N(e){return!e||typeof e!="object"||te(e)||ne(e)?e:Array.isArray(e)?e.map(N):Object.keys(e).reduce((t,n)=>{const s=n[0].toLowerCase()+n.slice(1).replace(/([A-Z]+)/g,(o,i)=>"_"+i.toLowerCase());return t[s]=N(e[n]),t},{})}function te(e){return Object.prototype.toString.call(e)==="[object Date]"}function ne(e){return Object.prototype.toString.call(e)==="[object RegExp]"}function oe(e){return V(e),null}function V({order:e,placements:t}){const{renderCampaigns:n}=m();l(async s=>{const o=await s.defaultSession().addOrder(N(e)).setPlacements(t||s.placements.getPlacements()).load();n(o)},[e],{deep:!0})}function se(e){return $(e),null}function $(e){const{renderCampaigns:t}=m();l(async n=>{const s=await n.defaultSession().viewFrontPage().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(s)})}function re({id:e,pageType:t}){return g.jsx("div",{className:"nosto_element",id:e},e+(t||""))}function ce(e){const{account:t,multiCurrency:n=!1,children:s,recommendationComponent:o}=e,i=n?e.currentVariation:"";if(o&&!a.isValidElement(o))throw new Error("The recommendationComponent prop must be a valid React element. Please provide a valid React element.");const d=o?"JSON_ORIGINAL":"HTML",{clientScriptLoaded:u}=Y(e);return u&&window.nostojs(f=>{f.defaultSession().setVariation(i).setResponseMode(d)}),g.jsx(v.Provider,{value:{account:t,clientScriptLoaded:u,currentVariation:i,responseMode:d,recommendationComponent:o},children:s})}function ae(e){return M(e),null}function M({cart:e,customer:t}={}){const{clientScriptLoaded:n}=S();_(()=>{const s=e?N(e):void 0,o=t?N(t):void 0;n&&window.nostojs(i=>{i.defaultSession().setCart(s).setCustomer(o).viewOther().load({skipPageViews:!0})})},[n,e,t])}r.Nosto404=Z,r.NostoCategory=x,r.NostoCheckout=Q,r.NostoContext=v,r.NostoHome=se,r.NostoOrder=oe,r.NostoOther=K,r.NostoPlacement=re,r.NostoProduct=X,r.NostoProvider=ce,r.NostoSearch=ee,r.NostoSession=ae,r.useNosto404=T,r.useNostoCategory=q,r.useNostoCheckout=k,r.useNostoContext=S,r.useNostoHome=$,r.useNostoOrder=V,r.useNostoOther=D,r.useNostoProduct=I,r.useNostoSearch=H,r.useNostoSession=M,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
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"})});