@nosto/nosto-react 2.2.1 → 2.2.2

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 (37) hide show
  1. package/dist/index.d.ts +11 -15
  2. package/dist/index.es.js +178 -183
  3. package/dist/index.umd.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/Nosto404.tsx +2 -25
  6. package/src/components/NostoCategory.tsx +2 -30
  7. package/src/components/NostoCheckout.tsx +2 -25
  8. package/src/components/NostoHome.tsx +2 -26
  9. package/src/components/NostoOrder.tsx +2 -33
  10. package/src/components/NostoOther.tsx +2 -25
  11. package/src/components/NostoPlacement.tsx +1 -1
  12. package/src/components/NostoProduct.tsx +2 -32
  13. package/src/components/NostoProvider.tsx +3 -8
  14. package/src/components/NostoSearch.tsx +2 -30
  15. package/src/components/NostoSession.tsx +2 -42
  16. package/src/components/helpers.ts +2 -2
  17. package/src/context.ts +0 -1
  18. package/src/hooks/scriptLoader.ts +4 -4
  19. package/src/hooks/useDeepCompareEffect.ts +1 -4
  20. package/src/hooks/useLoadClientScript.ts +9 -4
  21. package/src/hooks/useNosto404.tsx +25 -0
  22. package/src/hooks/useNostoApi.ts +1 -5
  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 +37 -0
  30. package/src/hooks/useNostoSearch.tsx +31 -0
  31. package/src/hooks/useNostoSession.tsx +33 -0
  32. package/src/hooks/useRenderCampaigns.tsx +6 -6
  33. package/src/index.ts +21 -2
  34. package/src/types.ts +775 -733
  35. package/src/utils/types.ts +5 -3
  36. package/src/components/index.ts +0 -11
  37. package/src/hooks/index.ts +0 -5
package/dist/index.d.ts CHANGED
@@ -13,8 +13,6 @@ export declare interface Cart {
13
13
  items: CartItem[];
14
14
  }
15
15
 
16
- declare type Cart_2 = Cart | ToCamelCase<Cart>;
17
-
18
16
  /**
19
17
  * @group Types
20
18
  */
@@ -55,8 +53,6 @@ export declare interface Customer {
55
53
  type?: string;
56
54
  }
57
55
 
58
- declare type Customer_2 = Customer | ToCamelCase<Customer>;
59
-
60
56
  /**
61
57
  * You can personalise your cart and checkout pages by using the `Nosto404` component.
62
58
  * The component does not require any props.
@@ -80,7 +76,7 @@ declare type Customer_2 = Customer | ToCamelCase<Customer>;
80
76
  export declare function Nosto404(props: Nosto404Props): null;
81
77
 
82
78
  /**
83
- * @group Components
79
+ * @group Hooks
84
80
  */
85
81
  export declare type Nosto404Props = {
86
82
  placements?: string[];
@@ -111,7 +107,7 @@ export declare type Nosto404Props = {
111
107
  export declare function NostoCategory(props: NostoCategoryProps): null;
112
108
 
113
109
  /**
114
- * @group Components
110
+ * @group Hooks
115
111
  */
116
112
  export declare type NostoCategoryProps = {
117
113
  category: string;
@@ -140,7 +136,7 @@ export declare type NostoCategoryProps = {
140
136
  export declare function NostoCheckout(props: NostoCheckoutProps): null;
141
137
 
142
138
  /**
143
- * @group Components
139
+ * @group Hooks
144
140
  */
145
141
  export declare type NostoCheckoutProps = {
146
142
  placements?: string[];
@@ -189,7 +185,7 @@ export declare interface NostoContextType {
189
185
  export declare function NostoHome(props: NostoHomeProps): null;
190
186
 
191
187
  /**
192
- * @group Components
188
+ * @group Hooks
193
189
  */
194
190
  export declare type NostoHomeProps = {
195
191
  placements?: string[];
@@ -217,10 +213,10 @@ export declare type NostoHomeProps = {
217
213
  export declare function NostoOrder(props: NostoOrderProps): null;
218
214
 
219
215
  /**
220
- * @group Components
216
+ * @group Hooks
221
217
  */
222
218
  export declare type NostoOrderProps = {
223
- order: Order;
219
+ order: Order | ToCamelCase<Order>;
224
220
  placements?: string[];
225
221
  };
226
222
 
@@ -246,7 +242,7 @@ export declare type NostoOrderProps = {
246
242
  export declare function NostoOther(props: NostoOtherProps): null;
247
243
 
248
244
  /**
249
- * @group Components
245
+ * @group Hooks
250
246
  */
251
247
  export declare type NostoOtherProps = {
252
248
  placements?: string[];
@@ -302,7 +298,7 @@ export declare type NostoPlacementProps = {
302
298
  export declare function NostoProduct(props: NostoProductProps): null;
303
299
 
304
300
  /**
305
- * @group Components
301
+ * @group Hooks
306
302
  */
307
303
  export declare type NostoProductProps = {
308
304
  product: string;
@@ -424,11 +420,11 @@ export declare type NostoSearchProps = {
424
420
  export declare function NostoSession(props?: NostoSessionProps): null;
425
421
 
426
422
  /**
427
- * @group Components
423
+ * @group Hooks
428
424
  */
429
425
  export declare type NostoSessionProps = {
430
- cart?: Cart_2;
431
- customer?: Customer_2;
426
+ cart?: Cart | ToCamelCase<Cart>;
427
+ customer?: Customer | ToCamelCase<Customer>;
432
428
  };
433
429
 
434
430
  declare interface NostoSku extends Sku {
package/dist/index.es.js CHANGED
@@ -1,60 +1,60 @@
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";
1
+ import { createContext as I, useContext as k, useEffect as g, useRef as P, useMemo as V, cloneElement as b, useState as q, isValidElement as F } from "react";
2
2
  import { jsx as v } from "react/jsx-runtime";
3
3
  import H from "react-dom";
4
- const j = (e) => String(e) === "[object Object]";
4
+ const T = I({
5
+ account: "",
6
+ currentVariation: "",
7
+ responseMode: "HTML",
8
+ clientScriptLoaded: !1
9
+ });
10
+ function E() {
11
+ return k(T);
12
+ }
13
+ const L = (e) => String(e) === "[object Object]";
5
14
  function _(e) {
6
- if (!j(e))
15
+ if (!L(e))
7
16
  return !1;
8
17
  const t = e.constructor;
9
18
  if (t === void 0)
10
19
  return !0;
11
20
  const n = t.prototype;
12
- return !(!j(n) || !n.hasOwnProperty("isPrototypeOf"));
21
+ return !(!L(n) || !n.hasOwnProperty("isPrototypeOf"));
13
22
  }
14
- function g(e, t) {
23
+ function h(e, t) {
15
24
  if (e === t)
16
25
  return !0;
17
26
  if (e instanceof Date && t instanceof Date)
18
27
  return e.getTime() === t.getTime();
19
28
  if (e instanceof Array && t instanceof Array)
20
- return e.length !== t.length ? !1 : e.every((n, r) => g(n, t[r]));
29
+ return e.length !== t.length ? !1 : e.every((n, r) => h(n, t[r]));
21
30
  if (_(e) && _(t)) {
22
31
  const n = Object.entries(e);
23
- return n.length !== Object.keys(t).length ? !1 : n.every(([r, o]) => g(o, t[r]));
32
+ return n.length !== Object.keys(t).length ? !1 : n.every(([r, o]) => h(o, t[r]));
24
33
  }
25
34
  return !1;
26
35
  }
27
- function T(e, t) {
28
- return O(e, x(t));
36
+ function D(e, t) {
37
+ return g(e, x(t));
29
38
  }
30
39
  function x(e) {
31
40
  const t = P(e), n = P(0);
32
- return g(e, t.current) || (t.current = e, n.current += 1), I(() => t.current, [n.current]);
33
- }
34
- const D = k({
35
- account: "",
36
- currentVariation: "",
37
- responseMode: "HTML",
38
- clientScriptLoaded: !1
39
- });
40
- function E() {
41
- return V(D);
41
+ return h(e, t.current) || (t.current = e, n.current += 1), V(() => t.current, [n.current]);
42
42
  }
43
43
  function u(e, t, n) {
44
44
  const { clientScriptLoaded: r } = E();
45
- (n != null && n.deep ? T : O)(() => {
45
+ (n != null && n.deep ? D : g)(() => {
46
46
  r && window.nostojs(e);
47
47
  }, [r, ...t ?? []]);
48
48
  }
49
- var h, S = H;
49
+ var O, y = H;
50
50
  if (process.env.NODE_ENV === "production")
51
- h = S.createRoot, S.hydrateRoot;
51
+ O = y.createRoot, y.hydrateRoot;
52
52
  else {
53
- var A = S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
54
- h = function(e, t) {
53
+ var A = y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
54
+ O = function(e, t) {
55
55
  A.usingClientEntryPoint = !0;
56
56
  try {
57
- return S.createRoot(e, t);
57
+ return y.createRoot(e, t);
58
58
  } finally {
59
59
  A.usingClientEntryPoint = !1;
60
60
  }
@@ -73,7 +73,7 @@ function z(e) {
73
73
  t.placements.injectCampaigns(e.recommendations);
74
74
  });
75
75
  }
76
- function l() {
76
+ function d() {
77
77
  const { responseMode: e, recommendationComponent: t } = E(), n = P({});
78
78
  if (e == "HTML")
79
79
  return { renderCampaigns: z };
@@ -81,13 +81,13 @@ function l() {
81
81
  var i;
82
82
  const c = ((i = o.campaigns) == null ? void 0 : i.recommendations) ?? {};
83
83
  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(
84
+ const l = c[a], C = "#" + a, p = document.querySelector(C);
85
+ p && (n.current[a] || (n.current[a] = O(p)), n.current[a].render(
86
86
  /* @__PURE__ */ v(
87
87
  M,
88
88
  {
89
89
  recommendationComponent: t,
90
- nostoRecommendation: d
90
+ nostoRecommendation: l
91
91
  }
92
92
  )
93
93
  ));
@@ -95,144 +95,63 @@ function l() {
95
95
  }
96
96
  return { renderCampaigns: r };
97
97
  }
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);
98
+ function U(e) {
99
+ const { renderCampaigns: t } = d();
100
+ u(async (n) => {
101
+ const r = await n.defaultSession().viewNotFound().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
102
+ t(r);
105
103
  });
106
104
  }
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
105
  function ae(e) {
145
- return G(e), null;
106
+ return U(e), null;
146
107
  }
147
- function G(e) {
148
- const { renderCampaigns: t } = l();
108
+ function W({ category: e, placements: t }) {
109
+ const { renderCampaigns: n } = d();
149
110
  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
- }
111
+ async (r) => {
112
+ const o = await r.defaultSession().viewCategory(e).setPlacements(t || r.placements.getPlacements()).load();
113
+ n(o);
114
+ },
115
+ [e]
154
116
  );
155
117
  }
156
118
  function ie(e) {
157
- return J(e), null;
119
+ return W(e), null;
158
120
  }
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
- );
121
+ function B(e) {
122
+ const { renderCampaigns: t } = d();
123
+ u(async (n) => {
124
+ const r = await n.defaultSession().viewCart().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
125
+ t(r);
126
+ });
167
127
  }
168
128
  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;
129
+ return B(e), null;
182
130
  }
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
- );
131
+ function G(e) {
132
+ const { renderCampaigns: t } = d();
133
+ u(async (n) => {
134
+ const r = await n.defaultSession().viewFrontPage().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
135
+ t(r);
136
+ });
192
137
  }
193
138
  function de(e) {
194
- return K(e), null;
195
- }
196
- function K({ category: e, placements: t }) {
197
- const { renderCampaigns: n } = l();
198
- u(
199
- async (r) => {
200
- const o = await r.defaultSession().viewCategory(e).setPlacements(t || r.placements.getPlacements()).load();
201
- n(o);
202
- },
203
- [e]
204
- );
205
- }
206
- function me(e) {
207
- return Q(e), null;
208
- }
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
- );
139
+ return G(e), null;
218
140
  }
219
141
  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) => {
142
+ return !e || typeof e != "object" || J(e) || Y(e) ? e : Array.isArray(e) ? e.map(w) : Object.keys(e).reduce((t, n) => {
221
143
  const r = n[0].toLowerCase() + n.slice(1).replace(/([A-Z]+)/g, (o, c) => "_" + c.toLowerCase());
222
144
  return t[r] = w(e[n]), t;
223
145
  }, {});
224
146
  }
225
- function X(e) {
147
+ function J(e) {
226
148
  return Object.prototype.toString.call(e) === "[object Date]";
227
149
  }
228
- function ee(e) {
150
+ function Y(e) {
229
151
  return Object.prototype.toString.call(e) === "[object RegExp]";
230
152
  }
231
- function fe(e) {
232
- return te(e), null;
233
- }
234
- function te({ order: e, placements: t }) {
235
- const { renderCampaigns: n } = l();
153
+ function Z({ order: e, placements: t }) {
154
+ const { renderCampaigns: n } = d();
236
155
  u(
237
156
  async (r) => {
238
157
  const o = await r.defaultSession().addOrder(w(e)).setPlacements(t || r.placements.getPlacements()).load();
@@ -242,37 +161,100 @@ function te({ order: e, placements: t }) {
242
161
  { deep: !0 }
243
162
  );
244
163
  }
245
- function we(e) {
246
- return ne(e), null;
164
+ function le(e) {
165
+ return Z(e), null;
166
+ }
167
+ function K(e) {
168
+ const { renderCampaigns: t } = d();
169
+ u(async (n) => {
170
+ const r = await n.defaultSession().viewOther().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
171
+ t(r);
172
+ });
173
+ }
174
+ function me(e) {
175
+ return K(e), null;
176
+ }
177
+ function fe({ id: e, pageType: t }) {
178
+ return /* @__PURE__ */ v("div", { className: "nosto_element", id: e }, e + (t || ""));
247
179
  }
248
- function ne(e) {
249
- const { renderCampaigns: t } = l();
180
+ function Q({ product: e, tagging: t, placements: n }) {
181
+ const { renderCampaigns: r } = d();
182
+ if (t && !t.product_id)
183
+ throw new Error("The product object must contain a product_id property");
250
184
  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
- }
185
+ async (o) => {
186
+ const c = await o.defaultSession().viewProduct(t ?? e).setPlacements(n || o.placements.getPlacements()).load();
187
+ r(c);
188
+ },
189
+ [e, t == null ? void 0 : t.selected_sku_id]
255
190
  );
256
191
  }
257
- function Ce({ id: e, pageType: t }) {
258
- return /* @__PURE__ */ v("div", { className: "nosto_element", id: e }, e + (t || ""));
192
+ function we(e) {
193
+ return Q(e), null;
259
194
  }
260
- function pe(e) {
195
+ function X() {
196
+ return typeof window.nosto < "u";
197
+ }
198
+ function ee(e, t) {
199
+ return new Promise((n, r) => {
200
+ const o = document.createElement("script");
201
+ 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);
202
+ });
203
+ }
204
+ function te(e) {
261
205
  const {
262
- account: t,
263
- multiCurrency: n = !1,
264
- children: r,
265
- recommendationComponent: o
266
- } = e, c = n ? e.currentVariation : "";
206
+ host: t = "connect.nosto.com",
207
+ scriptLoader: n = ee,
208
+ account: r,
209
+ shopifyMarkets: o,
210
+ loadScript: c = !0
211
+ } = e, [i, a] = q(!1);
212
+ return g(() => {
213
+ function l() {
214
+ var s;
215
+ "nostoReactTest" in window && ((s = window.nosto) == null || s.reload({
216
+ site: "localhost"
217
+ })), a(!0);
218
+ }
219
+ async function C(s, m = {}) {
220
+ const f = `//${t}${s}`, S = { "nosto-client-script": "", ...m };
221
+ await n(f, { attributes: S }), l();
222
+ }
223
+ function p() {
224
+ var R, j;
225
+ const s = document.querySelector("[nosto-client-script]"), m = String((o == null ? void 0 : o.marketId) || ""), f = (o == null ? void 0 : o.language) || "", S = (s == null ? void 0 : s.getAttribute("nosto-language")) !== f || (s == null ? void 0 : s.getAttribute("nosto-market-id")) !== m;
226
+ if (!s || S) {
227
+ i && a(!1);
228
+ const N = document.querySelector("#nosto-sandbox");
229
+ (R = s == null ? void 0 : s.parentNode) == null || R.removeChild(s), (j = N == null ? void 0 : N.parentNode) == null || j.removeChild(N);
230
+ const $ = `/script/shopify/market/nosto.js?merchant=${r}&market=${m}&locale=${f.toLowerCase()}`;
231
+ C($, { "nosto-language": f, "nosto-market-id": m });
232
+ }
233
+ }
234
+ if (window.nostojs || (window.nostojs = (s) => {
235
+ (window.nostojs.q = window.nostojs.q || []).push(s);
236
+ }, window.nostojs((s) => s.setAutoLoad(!1))), !c) {
237
+ window.nosto ? l() : window.nostojs(l);
238
+ return;
239
+ }
240
+ if (!X() && !o) {
241
+ const s = `/include/${r}`;
242
+ C(s);
243
+ }
244
+ o && p();
245
+ }, [o == null ? void 0 : o.marketId, o == null ? void 0 : o.language]), { clientScriptLoaded: i };
246
+ }
247
+ function Ce(e) {
248
+ const { account: t, multiCurrency: n = !1, children: r, recommendationComponent: o } = e, c = n ? e.currentVariation : "";
267
249
  if (o && !F(o))
268
250
  throw new Error(
269
251
  "The recommendationComponent prop must be a valid React element. Please provide a valid React element."
270
252
  );
271
- const i = o ? "JSON_ORIGINAL" : "HTML", { clientScriptLoaded: a } = B(e);
272
- return a && window.nostojs((d) => {
273
- d.defaultSession().setVariation(c).setResponseMode(i);
253
+ const i = o ? "JSON_ORIGINAL" : "HTML", { clientScriptLoaded: a } = te(e);
254
+ return a && window.nostojs((l) => {
255
+ l.defaultSession().setVariation(c).setResponseMode(i);
274
256
  }), /* @__PURE__ */ v(
275
- D.Provider,
257
+ T.Provider,
276
258
  {
277
259
  value: {
278
260
  account: t,
@@ -285,39 +267,52 @@ function pe(e) {
285
267
  }
286
268
  );
287
269
  }
288
- function Ne(e) {
289
- return oe(e), null;
270
+ function ne({ query: e, placements: t }) {
271
+ const { renderCampaigns: n } = d();
272
+ u(
273
+ async (r) => {
274
+ const o = await r.defaultSession().viewSearch(e).setPlacements(t || r.placements.getPlacements()).load();
275
+ n(o);
276
+ },
277
+ [e]
278
+ );
279
+ }
280
+ function pe(e) {
281
+ return ne(e), null;
290
282
  }
291
283
  function oe({ cart: e, customer: t } = {}) {
292
284
  const { clientScriptLoaded: n } = E();
293
- T(() => {
285
+ D(() => {
294
286
  const r = e ? w(e) : void 0, o = t ? w(t) : void 0;
295
287
  n && window.nostojs((c) => {
296
288
  c.defaultSession().setCart(r).setCustomer(o).viewOther().load({ skipPageViews: !0 });
297
289
  });
298
290
  }, [n, e, t]);
299
291
  }
292
+ function Ne(e) {
293
+ return oe(e), null;
294
+ }
300
295
  export {
301
296
  ae as Nosto404,
302
- de as NostoCategory,
297
+ ie as NostoCategory,
303
298
  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,
299
+ T as NostoContext,
300
+ de as NostoHome,
301
+ le as NostoOrder,
302
+ me as NostoOther,
303
+ fe as NostoPlacement,
304
+ we as NostoProduct,
305
+ Ce as NostoProvider,
306
+ pe as NostoSearch,
312
307
  Ne as NostoSession,
313
- G as useNosto404,
314
- K as useNostoCategory,
315
- Y as useNostoCheckout,
308
+ U as useNosto404,
309
+ W as useNostoCategory,
310
+ B as useNostoCheckout,
316
311
  E as useNostoContext,
317
- ne as useNostoHome,
318
- te as useNostoOrder,
319
- J as useNostoOther,
320
- Z as useNostoProduct,
321
- Q as useNostoSearch,
312
+ G as useNostoHome,
313
+ Z as useNostoOrder,
314
+ K as useNostoOther,
315
+ Q as useNostoProduct,
316
+ ne as useNostoSearch,
322
317
  oe as useNostoSession
323
318
  };
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,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,p,z){"use strict";const j=a.createContext({account:"",currentVariation:"",responseMode:"HTML",clientScriptLoaded:!1});function y(){return a.useContext(j)}const R=e=>String(e)==="[object Object]";function L(e){if(!R(e))return!1;const t=e.constructor;if(t===void 0)return!0;const n=t.prototype;return!(!R(n)||!n.hasOwnProperty("isPrototypeOf"))}function v(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)=>v(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])=>v(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 v(e,t.current)||(t.current=e,n.current+=1),a.useMemo(()=>t.current,[n.current])}function l(e,t,n){const{clientScriptLoaded:s}=y();(n!=null&&n.deep?_:a.useEffect)(()=>{s&&window.nostojs(e)},[s,...t??[]])}var E,S=z;if(process.env.NODE_ENV==="production")E=S.createRoot,S.hydrateRoot;else{var T=S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;E=function(e,t){T.usingClientEntryPoint=!0;try{return S.createRoot(e,t)}finally{T.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}=y(),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],h="#"+u,P=document.querySelector(h);P&&(n.current[u]||(n.current[u]=E(P)),n.current[u].render(p.jsx(W,{recommendationComponent:t,nostoRecommendation:f})))}}return{renderCampaigns:s}}function A(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 G(e){return A(e),null}function D({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 J(e){return D(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 Y(e){return k(e),null}function I(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 Z(e){return I(e),null}function w(e){return!e||typeof e!="object"||K(e)||Q(e)?e:Array.isArray(e)?e.map(w):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]=w(e[n]),t},{})}function K(e){return Object.prototype.toString.call(e)==="[object Date]"}function Q(e){return Object.prototype.toString.call(e)==="[object RegExp]"}function q({order:e,placements:t}){const{renderCampaigns:n}=m();l(async s=>{const o=await s.defaultSession().addOrder(w(e)).setPlacements(t||s.placements.getPlacements()).load();n(o)},[e],{deep:!0})}function X(e){return q(e),null}function H(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 x(e){return H(e),null}function ee({id:e,pageType:t}){return p.jsx("div",{className:"nosto_element",id:e},e+(t||""))}function V({product:e,tagging:t,placements:n}){const{renderCampaigns:s}=m();if(t&&!t.product_id)throw new Error("The product object must contain a product_id property");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 te(e){return V(e),null}function ne(){return typeof window.nosto<"u"}function oe(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 se(e){const{host:t="connect.nosto.com",scriptLoader:n=oe,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 h(c,N={}){const C=`//${t}${c}`,g={"nosto-client-script":"",...N};await n(C,{attributes:g}),f()}function P(){var M,F;const c=document.querySelector("[nosto-client-script]"),N=String((o==null?void 0:o.marketId)||""),C=(o==null?void 0:o.language)||"",g=(c==null?void 0:c.getAttribute("nosto-language"))!==C||(c==null?void 0:c.getAttribute("nosto-market-id"))!==N;if(!c||g){d&&u(!1);const O=document.querySelector("#nosto-sandbox");(M=c==null?void 0:c.parentNode)==null||M.removeChild(c),(F=O==null?void 0:O.parentNode)==null||F.removeChild(O);const ie=`/script/shopify/market/nosto.js?merchant=${s}&market=${N}&locale=${C.toLowerCase()}`;h(ie,{"nosto-language":C,"nosto-market-id":N})}}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(!ne()&&!o){const c=`/include/${s}`;h(c)}o&&P()},[o==null?void 0:o.marketId,o==null?void 0:o.language]),{clientScriptLoaded:d}}function re(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}=se(e);return u&&window.nostojs(f=>{f.defaultSession().setVariation(i).setResponseMode(d)}),p.jsx(j.Provider,{value:{account:t,clientScriptLoaded:u,currentVariation:i,responseMode:d,recommendationComponent:o},children:s})}function $({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 ce(e){return $(e),null}function b({cart:e,customer:t}={}){const{clientScriptLoaded:n}=y();_(()=>{const s=e?w(e):void 0,o=t?w(t):void 0;n&&window.nostojs(i=>{i.defaultSession().setCart(s).setCustomer(o).viewOther().load({skipPageViews:!0})})},[n,e,t])}function ae(e){return b(e),null}r.Nosto404=G,r.NostoCategory=J,r.NostoCheckout=Y,r.NostoContext=j,r.NostoHome=Z,r.NostoOrder=X,r.NostoOther=x,r.NostoPlacement=ee,r.NostoProduct=te,r.NostoProvider=re,r.NostoSearch=ce,r.NostoSession=ae,r.useNosto404=A,r.useNostoCategory=D,r.useNostoCheckout=k,r.useNostoContext=y,r.useNostoHome=I,r.useNostoOrder=q,r.useNostoOther=H,r.useNostoProduct=V,r.useNostoSearch=$,r.useNostoSession=b,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nosto/nosto-react",
3
3
  "description": "Component library to simply implementing Nosto on React.",
4
- "version": "2.2.1",
4
+ "version": "2.2.2",
5
5
  "author": "Mridang Agarwalla, Dominik Gilg",
6
6
  "license": "ISC",
7
7
  "repository": {