@nosto/nosto-react 0.1.0 → 0.1.4

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 (26) hide show
  1. package/README.md +6 -2
  2. package/dist/index.es.client.js +180 -119
  3. package/dist/index.umd.client.js +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Category/index.client.tsx +37 -0
  6. package/src/components/Checkout/index.client.tsx +34 -0
  7. package/src/components/Fohofo/index.client.tsx +34 -0
  8. package/src/components/Home/index.client.tsx +37 -0
  9. package/src/components/Order/index.client.tsx +43 -0
  10. package/src/components/Other/index.client.tsx +34 -0
  11. package/src/components/Placement/{index.tsx → index.client.tsx} +0 -0
  12. package/src/components/Product/{index.tsx → index.client.tsx} +53 -52
  13. package/src/components/Provider/context.client.ts +25 -0
  14. package/src/components/Provider/index.client.tsx +58 -0
  15. package/src/components/Search/index.client.tsx +37 -0
  16. package/src/components/Session/{index.tsx → index.client.tsx} +0 -0
  17. package/src/index.client.ts +17 -11
  18. package/src/components/Category/index.tsx +0 -32
  19. package/src/components/Checkout/index.tsx +0 -29
  20. package/src/components/Fohofo/index.tsx +0 -29
  21. package/src/components/Home/index.tsx +0 -29
  22. package/src/components/Order/index.tsx +0 -38
  23. package/src/components/Other/index.tsx +0 -29
  24. package/src/components/Provider/context.ts +0 -12
  25. package/src/components/Provider/index.tsx +0 -35
  26. package/src/components/Search/index.tsx +0 -32
package/README.md CHANGED
@@ -26,17 +26,21 @@ You should be using React Nosto if you want to:
26
26
  - ✘ No support for Nosto's Debug Toolbar.
27
27
  - ✘ No support for server-side rendering (SSR).
28
28
 
29
+ ### Building
29
30
 
31
+ #### Required versions
32
+ - npm: 8.5.5
33
+ - node: v16.15.0
30
34
 
31
35
  ### Installation
32
36
 
33
37
  ##### Yarn:
34
38
 
35
- yarn add react-nosto
39
+ yarn add @nosto/nosto-react
36
40
 
37
41
  ##### NPM:
38
42
 
39
- npm install --save react-nosto
43
+ npm install --save @nosto/nosto-react
40
44
 
41
45
 
42
46
 
package/dist/index.es.client.js CHANGED
@@ -1,5 +1,16 @@
1
1
  import * as React from "react";
2
- import React__default, { useEffect, createContext } from "react";
2
+ import React__default, { createContext, useContext, useEffect } from "react";
3
+ const NostoContext = createContext({
4
+ account: void 0,
5
+ currentVariation: ""
6
+ });
7
+ function useNostoContext() {
8
+ const context = useContext(NostoContext);
9
+ if (!context) {
10
+ throw new Error("No nosto context found");
11
+ }
12
+ return context;
13
+ }
3
14
  var jsxRuntime = { exports: {} };
4
15
  var reactJsxRuntime_production_min = {};
5
16
  /**
@@ -34,13 +45,19 @@ const jsx = jsxRuntime.exports.jsx;
34
45
  const jsxs = jsxRuntime.exports.jsxs;
35
46
  const Fragment = jsxRuntime.exports.Fragment;
36
47
  const NostoFohofo = () => {
48
+ const {
49
+ clientScriptLoaded,
50
+ currentVariation
51
+ } = useNostoContext();
37
52
  useEffect(() => {
38
- window.nostojs((api) => {
39
- api.defaultSession().setResponseMode("HTML").viewNotFound().setPlacements(api.placements.getPlacements()).load().then((data) => {
40
- api.placements.injectCampaigns(data.recommendations);
53
+ if (clientScriptLoaded) {
54
+ window.nostojs((api) => {
55
+ api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewNotFound().setPlacements(api.placements.getPlacements()).load().then((data) => {
56
+ api.placements.injectCampaigns(data.recommendations);
57
+ });
41
58
  });
42
- });
43
- }, []);
59
+ }
60
+ }, [clientScriptLoaded, currentVariation]);
44
61
  return /* @__PURE__ */ jsx(Fragment, {
45
62
  children: /* @__PURE__ */ jsx("div", {
46
63
  className: "nosto_page_type",
@@ -52,13 +69,19 @@ const NostoFohofo = () => {
52
69
  });
53
70
  };
54
71
  const NostoOther = () => {
72
+ const {
73
+ clientScriptLoaded,
74
+ currentVariation
75
+ } = useNostoContext();
55
76
  useEffect(() => {
56
- window.nostojs((api) => {
57
- api.defaultSession().setResponseMode("HTML").viewOther().setPlacements(api.placements.getPlacements()).load().then((data) => {
58
- api.placements.injectCampaigns(data.recommendations);
77
+ if (clientScriptLoaded) {
78
+ window.nostojs((api) => {
79
+ api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewOther().setPlacements(api.placements.getPlacements()).load().then((data) => {
80
+ api.placements.injectCampaigns(data.recommendations);
81
+ });
59
82
  });
60
- });
61
- }, []);
83
+ }
84
+ }, [clientScriptLoaded, currentVariation]);
62
85
  return /* @__PURE__ */ jsx(Fragment, {
63
86
  children: /* @__PURE__ */ jsx("div", {
64
87
  className: "nosto_page_type",
@@ -70,13 +93,19 @@ const NostoOther = () => {
70
93
  });
71
94
  };
72
95
  const NostoCheckout = () => {
96
+ const {
97
+ clientScriptLoaded,
98
+ currentVariation
99
+ } = useNostoContext();
73
100
  useEffect(() => {
74
- window.nostojs((api) => {
75
- api.defaultSession().setResponseMode("HTML").viewCart().setPlacements(api.placements.getPlacements()).load().then((data) => {
76
- api.placements.injectCampaigns(data.recommendations);
101
+ if (clientScriptLoaded) {
102
+ window.nostojs((api) => {
103
+ api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewCart().setPlacements(api.placements.getPlacements()).load().then((data) => {
104
+ api.placements.injectCampaigns(data.recommendations);
105
+ });
77
106
  });
78
- });
79
- }, []);
107
+ }
108
+ }, [clientScriptLoaded, currentVariation]);
80
109
  return /* @__PURE__ */ jsx(Fragment, {
81
110
  children: /* @__PURE__ */ jsx("div", {
82
111
  className: "nosto_page_type",
@@ -87,50 +116,23 @@ const NostoCheckout = () => {
87
116
  })
88
117
  });
89
118
  };
90
- function stringinate(obj) {
91
- Object.keys(obj).forEach((property) => {
92
- if (obj[property] instanceof URL) {
93
- obj[property] = obj[property].toString();
94
- }
95
- if (typeof obj[property] === "object") {
96
- stringinate(obj[property]);
97
- }
98
- obj[property] = obj[property];
99
- });
100
- return obj;
101
- }
102
- var snakeize = function walk(obj) {
103
- if (!obj || typeof obj !== "object")
104
- return obj;
105
- if (isDate(obj) || isRegex(obj))
106
- return obj;
107
- if (Array.isArray(obj))
108
- return obj.map(walk);
109
- return Object.keys(obj).reduce(function(acc, key) {
110
- var camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, function(m2, x) {
111
- return "_" + x.toLowerCase();
112
- });
113
- acc[camel] = walk(obj[key]);
114
- return acc;
115
- }, {});
116
- };
117
- var isDate = function(obj) {
118
- return Object.prototype.toString.call(obj) === "[object Date]";
119
- };
120
- var isRegex = function(obj) {
121
- return Object.prototype.toString.call(obj) === "[object RegExp]";
122
- };
123
119
  const NostoProduct = ({
124
120
  product,
125
121
  tagging
126
122
  }) => {
123
+ const {
124
+ clientScriptLoaded,
125
+ currentVariation
126
+ } = useNostoContext();
127
127
  useEffect(() => {
128
- window.nostojs((api) => {
129
- api.defaultSession().setResponseMode("HTML").viewProduct(snakeize(stringinate(tagging))).setPlacements(api.placements.getPlacements()).load().then((data) => {
130
- api.placements.injectCampaigns(data.recommendations);
128
+ if (clientScriptLoaded) {
129
+ window.nostojs((api) => {
130
+ api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewProduct(product).setPlacements(api.placements.getPlacements()).load().then((data) => {
131
+ api.placements.injectCampaigns(data.recommendations);
132
+ });
131
133
  });
132
- });
133
- }, []);
134
+ }
135
+ }, [clientScriptLoaded, currentVariation]);
134
136
  return /* @__PURE__ */ jsxs(Fragment, {
135
137
  children: [/* @__PURE__ */ jsx("div", {
136
138
  className: "nosto_page_type",
@@ -143,105 +145,105 @@ const NostoProduct = ({
143
145
  style: {
144
146
  display: "none"
145
147
  },
146
- children: [tagging.variationId && /* @__PURE__ */ jsx("span", {
148
+ children: [(tagging == null ? void 0 : tagging.variationId) && /* @__PURE__ */ jsx("span", {
147
149
  className: "variation_id",
148
150
  children: tagging.variationId
149
- }), tagging.productId && /* @__PURE__ */ jsx("span", {
151
+ }), product && /* @__PURE__ */ jsx("span", {
150
152
  className: "product_id",
151
- children: tagging.productId
152
- }), tagging.name && /* @__PURE__ */ jsx("span", {
153
+ children: product
154
+ }), (tagging == null ? void 0 : tagging.name) && /* @__PURE__ */ jsx("span", {
153
155
  className: "name",
154
156
  children: tagging.name
155
- }), tagging.url && /* @__PURE__ */ jsx("span", {
157
+ }), (tagging == null ? void 0 : tagging.url) && /* @__PURE__ */ jsx("span", {
156
158
  className: "url",
157
159
  children: tagging.url.toString()
158
- }), tagging.imageUrl && /* @__PURE__ */ jsx("span", {
160
+ }), (tagging == null ? void 0 : tagging.imageUrl) && /* @__PURE__ */ jsx("span", {
159
161
  className: "image_url",
160
162
  children: tagging.imageUrl.toString()
161
- }), tagging.availability && /* @__PURE__ */ jsx("span", {
163
+ }), (tagging == null ? void 0 : tagging.availability) && /* @__PURE__ */ jsx("span", {
162
164
  className: "availability",
163
165
  children: tagging.availability
164
- }), tagging.price && /* @__PURE__ */ jsx("span", {
166
+ }), (tagging == null ? void 0 : tagging.price) && /* @__PURE__ */ jsx("span", {
165
167
  className: "price",
166
168
  children: tagging.price
167
- }), tagging.listPrice && /* @__PURE__ */ jsx("span", {
169
+ }), (tagging == null ? void 0 : tagging.listPrice) && /* @__PURE__ */ jsx("span", {
168
170
  className: "list_price",
169
171
  children: tagging.listPrice
170
- }), tagging.priceCurrencyCode && /* @__PURE__ */ jsx("span", {
172
+ }), (tagging == null ? void 0 : tagging.priceCurrencyCode) && /* @__PURE__ */ jsx("span", {
171
173
  className: "price_currency_code",
172
174
  children: tagging.priceCurrencyCode
173
- }), tagging.brand && /* @__PURE__ */ jsx("span", {
175
+ }), (tagging == null ? void 0 : tagging.brand) && /* @__PURE__ */ jsx("span", {
174
176
  className: "brand",
175
177
  children: tagging.brand
176
- }), tagging.description && /* @__PURE__ */ jsx("span", {
178
+ }), (tagging == null ? void 0 : tagging.description) && /* @__PURE__ */ jsx("span", {
177
179
  className: "description",
178
180
  children: tagging.description
179
- }), tagging.googleCategory && /* @__PURE__ */ jsx("span", {
181
+ }), (tagging == null ? void 0 : tagging.googleCategory) && /* @__PURE__ */ jsx("span", {
180
182
  className: "description",
181
183
  children: tagging.googleCategory
182
- }), tagging.condition && /* @__PURE__ */ jsx("span", {
184
+ }), (tagging == null ? void 0 : tagging.condition) && /* @__PURE__ */ jsx("span", {
183
185
  className: "condition",
184
186
  children: tagging.condition
185
- }), tagging.gender && /* @__PURE__ */ jsx("span", {
187
+ }), (tagging == null ? void 0 : tagging.gender) && /* @__PURE__ */ jsx("span", {
186
188
  className: "gender",
187
189
  children: tagging.gender
188
- }), tagging.ageGroup && /* @__PURE__ */ jsx("span", {
190
+ }), (tagging == null ? void 0 : tagging.ageGroup) && /* @__PURE__ */ jsx("span", {
189
191
  className: "age_group",
190
192
  children: tagging.ageGroup
191
- }), tagging.gtin && /* @__PURE__ */ jsx("span", {
193
+ }), (tagging == null ? void 0 : tagging.gtin) && /* @__PURE__ */ jsx("span", {
192
194
  className: "gtin",
193
195
  children: tagging.gtin
194
- }), tagging.category && tagging.category.map((category, index) => /* @__PURE__ */ jsx("span", {
196
+ }), (tagging == null ? void 0 : tagging.category) && (tagging == null ? void 0 : tagging.category.map((category, index) => /* @__PURE__ */ jsx("span", {
195
197
  className: "category",
196
198
  children: category
197
- }, index)), tagging.tags1 && tagging.tags1.map((tag, index) => /* @__PURE__ */ jsx("span", {
199
+ }, index))), (tagging == null ? void 0 : tagging.tags1) && tagging.tags1.map((tag, index) => /* @__PURE__ */ jsx("span", {
198
200
  className: "tag1",
199
201
  children: tag
200
- }, index)), tagging.tags2 && tagging.tags2.map((tag, index) => /* @__PURE__ */ jsx("span", {
202
+ }, index)), (tagging == null ? void 0 : tagging.tags2) && tagging.tags2.map((tag, index) => /* @__PURE__ */ jsx("span", {
201
203
  className: "tag2",
202
204
  children: tag
203
- }, index)), tagging.tags3 && tagging.tags3.map((tag, index) => /* @__PURE__ */ jsx("span", {
205
+ }, index)), (tagging == null ? void 0 : tagging.tags3) && tagging.tags3.map((tag, index) => /* @__PURE__ */ jsx("span", {
204
206
  className: "tag3",
205
207
  children: tag
206
- }, index)), tagging.ratingValue && /* @__PURE__ */ jsx("span", {
208
+ }, index)), (tagging == null ? void 0 : tagging.ratingValue) && /* @__PURE__ */ jsx("span", {
207
209
  className: "rating_value",
208
210
  children: tagging.ratingValue
209
- }), tagging.reviewCount && /* @__PURE__ */ jsx("span", {
211
+ }), (tagging == null ? void 0 : tagging.reviewCount) && /* @__PURE__ */ jsx("span", {
210
212
  className: "review_count",
211
213
  children: tagging.reviewCount
212
- }), tagging.alternateImageUrls && tagging.alternateImageUrls.map((url, index) => /* @__PURE__ */ jsx("span", {
214
+ }), (tagging == null ? void 0 : tagging.alternateImageUrls) && tagging.alternateImageUrls.map((url, index) => /* @__PURE__ */ jsx("span", {
213
215
  className: "alternate_image_url",
214
216
  children: url.toString()
215
- }, index)), tagging.customFields && Object.keys(tagging.customFields).map((field, index) => tagging.customFields && tagging.customFields[field] && /* @__PURE__ */ jsx("span", {
217
+ }, index)), (tagging == null ? void 0 : tagging.customFields) && Object.keys(tagging.customFields).map((field, index) => tagging.customFields && tagging.customFields[field] && /* @__PURE__ */ jsx("span", {
216
218
  className: field,
217
219
  children: tagging.customFields[field]
218
- }, index)), tagging.skus && tagging.skus.map((sku, index) => /* @__PURE__ */ jsxs("span", {
220
+ }, index)), (tagging == null ? void 0 : tagging.skus) && tagging.skus.map((sku, index) => /* @__PURE__ */ jsxs("span", {
219
221
  className: "nosto_sku",
220
- children: [sku.id && /* @__PURE__ */ jsx("span", {
222
+ children: [(sku == null ? void 0 : sku.id) && /* @__PURE__ */ jsx("span", {
221
223
  className: "product_id",
222
224
  children: sku.id
223
- }), sku.name && /* @__PURE__ */ jsx("span", {
225
+ }), (sku == null ? void 0 : sku.name) && /* @__PURE__ */ jsx("span", {
224
226
  className: "name",
225
227
  children: sku.name
226
- }), sku.price && /* @__PURE__ */ jsx("span", {
228
+ }), (sku == null ? void 0 : sku.price) && /* @__PURE__ */ jsx("span", {
227
229
  className: "price",
228
230
  children: sku.price
229
- }), sku.listPrice && /* @__PURE__ */ jsx("span", {
231
+ }), (sku == null ? void 0 : sku.listPrice) && /* @__PURE__ */ jsx("span", {
230
232
  className: "list_price",
231
233
  children: sku.listPrice
232
- }), sku.url && /* @__PURE__ */ jsx("span", {
234
+ }), (sku == null ? void 0 : sku.url) && /* @__PURE__ */ jsx("span", {
233
235
  className: "url",
234
236
  children: sku.url.toString()
235
- }), sku.imageUrl && /* @__PURE__ */ jsx("span", {
237
+ }), (sku == null ? void 0 : sku.imageUrl) && /* @__PURE__ */ jsx("span", {
236
238
  className: "image_url",
237
239
  children: sku.imageUrl.toString()
238
- }), sku.gtin && /* @__PURE__ */ jsx("span", {
240
+ }), (sku == null ? void 0 : sku.gtin) && /* @__PURE__ */ jsx("span", {
239
241
  className: "gtin",
240
242
  children: sku.gtin
241
- }), sku.availability && /* @__PURE__ */ jsx("span", {
243
+ }), (sku == null ? void 0 : sku.availability) && /* @__PURE__ */ jsx("span", {
242
244
  className: "availability",
243
245
  children: sku.availability
244
- }), sku.customFields && Object.keys(sku.customFields).map((field, index2) => sku.customFields && sku.customFields[field] && /* @__PURE__ */ jsx("span", {
246
+ }), (sku == null ? void 0 : sku.customFields) && Object.keys(sku.customFields).map((field, index2) => sku.customFields && sku.customFields[field] && /* @__PURE__ */ jsx("span", {
245
247
  className: field,
246
248
  children: sku.customFields[field]
247
249
  }, index2))]
@@ -252,13 +254,19 @@ const NostoProduct = ({
252
254
  const NostoCategory = ({
253
255
  category
254
256
  }) => {
257
+ const {
258
+ clientScriptLoaded,
259
+ currentVariation
260
+ } = useNostoContext();
255
261
  useEffect(() => {
256
- window.nostojs((api) => {
257
- api.defaultSession().setResponseMode("HTML").viewCategory(category).setPlacements(api.placements.getPlacements()).load().then((data) => {
258
- api.placements.injectCampaigns(data.recommendations);
262
+ if (clientScriptLoaded) {
263
+ window.nostojs((api) => {
264
+ api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewCategory(category).setPlacements(api.placements.getPlacements()).load().then((data) => {
265
+ api.placements.injectCampaigns(data.recommendations);
266
+ });
259
267
  });
260
- });
261
- }, []);
268
+ }
269
+ }, [clientScriptLoaded, category, currentVariation]);
262
270
  return /* @__PURE__ */ jsxs(Fragment, {
263
271
  children: [/* @__PURE__ */ jsx("div", {
264
272
  className: "nosto_page_type",
@@ -278,13 +286,19 @@ const NostoCategory = ({
278
286
  const NostoSearch = ({
279
287
  query
280
288
  }) => {
289
+ const {
290
+ clientScriptLoaded,
291
+ currentVariation
292
+ } = useNostoContext();
281
293
  useEffect(() => {
282
- window.nostojs((api) => {
283
- api.defaultSession().setResponseMode("HTML").viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
284
- api.placements.injectCampaigns(data.recommendations);
294
+ if (clientScriptLoaded) {
295
+ window.nostojs((api) => {
296
+ api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
297
+ api.placements.injectCampaigns(data.recommendations);
298
+ });
285
299
  });
286
- });
287
- }, []);
300
+ }
301
+ }, [clientScriptLoaded, currentVariation, query]);
288
302
  return /* @__PURE__ */ jsxs(Fragment, {
289
303
  children: [/* @__PURE__ */ jsx("div", {
290
304
  className: "nosto_page_type",
@@ -301,16 +315,43 @@ const NostoSearch = ({
301
315
  })]
302
316
  });
303
317
  };
318
+ var snakeize = function walk(obj) {
319
+ if (!obj || typeof obj !== "object")
320
+ return obj;
321
+ if (isDate(obj) || isRegex(obj))
322
+ return obj;
323
+ if (Array.isArray(obj))
324
+ return obj.map(walk);
325
+ return Object.keys(obj).reduce(function(acc, key) {
326
+ var camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, function(m2, x) {
327
+ return "_" + x.toLowerCase();
328
+ });
329
+ acc[camel] = walk(obj[key]);
330
+ return acc;
331
+ }, {});
332
+ };
333
+ var isDate = function(obj) {
334
+ return Object.prototype.toString.call(obj) === "[object Date]";
335
+ };
336
+ var isRegex = function(obj) {
337
+ return Object.prototype.toString.call(obj) === "[object RegExp]";
338
+ };
304
339
  const NostoOrder = ({
305
340
  order
306
341
  }) => {
342
+ const {
343
+ clientScriptLoaded,
344
+ currentVariation
345
+ } = useNostoContext();
307
346
  useEffect(() => {
308
- window.nostojs((api) => {
309
- api.defaultSession().setResponseMode("HTML").addOrder(snakeize(order)).setPlacements(api.placements.getPlacements()).load().then((data) => {
310
- api.placements.injectCampaigns(data.recommendations);
347
+ if (clientScriptLoaded) {
348
+ window.nostojs((api) => {
349
+ api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").addOrder(snakeize(order)).setPlacements(api.placements.getPlacements()).load().then((data) => {
350
+ api.placements.injectCampaigns(data.recommendations);
351
+ });
311
352
  });
312
- });
313
- }, []);
353
+ }
354
+ }, [clientScriptLoaded, currentVariation]);
314
355
  return /* @__PURE__ */ jsxs(Fragment, {
315
356
  children: [/* @__PURE__ */ jsx("div", {
316
357
  className: "nosto_page_type",
@@ -328,13 +369,22 @@ const NostoOrder = ({
328
369
  });
329
370
  };
330
371
  const NostoHome = () => {
372
+ const {
373
+ clientScriptLoaded,
374
+ currentVariation
375
+ } = useNostoContext();
331
376
  useEffect(() => {
332
- window.nostojs((api) => {
333
- api.defaultSession().setResponseMode("HTML").viewFrontPage().setPlacements(api.placements.getPlacements()).load().then((data) => {
334
- api.placements.injectCampaigns(data.recommendations);
377
+ if (currentVariation) {
378
+ console.log("currentVariation: ", currentVariation);
379
+ }
380
+ if (clientScriptLoaded) {
381
+ window.nostojs((api) => {
382
+ api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewFrontPage().setPlacements(api.placements.getPlacements()).load().then((data) => {
383
+ api.placements.injectCampaigns(data.recommendations);
384
+ });
335
385
  });
336
- });
337
- }, []);
386
+ }
387
+ }, [clientScriptLoaded, currentVariation]);
338
388
  return /* @__PURE__ */ jsx(Fragment, {
339
389
  children: /* @__PURE__ */ jsx("div", {
340
390
  className: "nosto_page_type",
@@ -363,26 +413,37 @@ const NostoPlacement = ({
363
413
  id
364
414
  });
365
415
  };
366
- const NostoContext = createContext({
367
- account: void 0
368
- });
369
416
  const NostoProvider = ({
370
417
  account,
418
+ currentVariation = "",
419
+ multiCurrency = false,
371
420
  host,
372
421
  children
373
422
  }) => {
423
+ const [clientScriptLoadedState, setClientScriptLoadedState] = React__default.useState(false);
424
+ const clientScriptLoaded = React__default.useMemo(() => clientScriptLoadedState, [clientScriptLoadedState]);
425
+ currentVariation = multiCurrency ? currentVariation : "";
374
426
  useEffect(() => {
375
- const script = document.createElement("script");
376
- script.type = "text/javascript";
377
- script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
378
- script.async = true;
379
- document.head.appendChild(script);
427
+ if (!document.querySelectorAll("[nosto-client-script]").length) {
428
+ const script = document.createElement("script");
429
+ script.type = "text/javascript";
430
+ script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
431
+ script.async = true;
432
+ script.setAttribute("nosto-client-script", "");
433
+ script.onload = () => {
434
+ console.log("Nosto client script loaded");
435
+ setClientScriptLoadedState(true);
436
+ };
437
+ document.head.appendChild(script);
438
+ }
380
439
  window.nostojs = (cb) => (window.nostojs.q = window.nostojs.q || []).push(cb);
381
440
  window.nostojs((api) => api.setAutoLoad(false));
382
441
  }, []);
383
442
  return /* @__PURE__ */ jsx(NostoContext.Provider, {
384
443
  value: {
385
- account
444
+ account,
445
+ clientScriptLoaded,
446
+ currentVariation
386
447
  },
387
448
  children
388
449
  });
@@ -502,4 +563,4 @@ const NostoSession = ({
502
563
  }, [cart || [], customer || {}]);
503
564
  return /* @__PURE__ */ jsx("div", {});
504
565
  };
505
- export { NostoFohofo as Nosto404, NostoCategory, NostoCheckout, NostoHome, NostoOrder, NostoOther, NostoPlacement, NostoProduct, NostoProvider, NostoSearch, NostoSession };
566
+ export { NostoFohofo as Nosto404, NostoCategory, NostoCheckout, NostoContext, NostoHome, NostoOrder, NostoOther, NostoPlacement, NostoProduct, NostoProvider, NostoSearch, NostoSession, useNostoContext };
package/dist/index.umd.client.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(c,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],a):(c=typeof globalThis!="undefined"?globalThis:c||self,a(c["@nosto/nosto-react"]={},c.React))})(this,function(c,a){"use strict";function P(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}function j(t){if(t&&t.__esModule)return t;var e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return t&&Object.keys(t).forEach(function(s){if(s!=="default"){var n=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(e,s,n.get?n:{enumerable:!0,get:function(){return t[s]}})}}),e.default=t,Object.freeze(e)}var C=P(a),m=j(a),p={exports:{}},f={};/**
1
+ (function(l,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],i):(l=typeof globalThis!="undefined"?globalThis:l||self,i(l["@nosto/nosto-react"]={},l.React))})(this,function(l,i){"use strict";function L(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}function O(t){if(t&&t.__esModule)return t;var e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return t&&Object.keys(t).forEach(function(n){if(n!=="default"){var r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:function(){return t[n]}})}}),e.default=t,Object.freeze(e)}var v=L(i),h=O(i);const _=i.createContext({account:void 0,currentVariation:""});function m(){const t=i.useContext(_);if(!t)throw new Error("No nosto context found");return t}var y={exports:{}},N={};/**
2
2
  * @license React
3
3
  * react-jsx-runtime.production.min.js
4
4
  *
@@ -6,4 +6,4 @@
6
6
  *
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
- */var S=C.default,O=Symbol.for("react.element"),M=Symbol.for("react.fragment"),L=Object.prototype.hasOwnProperty,E=S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,T={key:!0,ref:!0,__self:!0,__source:!0};function N(t,e,s){var n,o={},d=null,h=null;s!==void 0&&(d=""+s),e.key!==void 0&&(d=""+e.key),e.ref!==void 0&&(h=e.ref);for(n in e)L.call(e,n)&&!T.hasOwnProperty(n)&&(o[n]=e[n]);if(t&&t.defaultProps)for(n in e=t.defaultProps,e)o[n]===void 0&&(o[n]=e[n]);return{$$typeof:O,type:t,key:d,ref:h,props:o,_owner:E.current}}f.Fragment=M,f.jsx=N,f.jsxs=N,p.exports=f;const r=p.exports.jsx,i=p.exports.jsxs,l=p.exports.Fragment,F=()=>(a.useEffect(()=>{window.nostojs(t=>{t.defaultSession().setResponseMode("HTML").viewNotFound().setPlacements(t.placements.getPlacements()).load().then(e=>{t.placements.injectCampaigns(e.recommendations)})})},[]),r(l,{children:r("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})),R=()=>(a.useEffect(()=>{window.nostojs(t=>{t.defaultSession().setResponseMode("HTML").viewOther().setPlacements(t.placements.getPlacements()).load().then(e=>{t.placements.injectCampaigns(e.recommendations)})})},[]),r(l,{children:r("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})),U=()=>(a.useEffect(()=>{window.nostojs(t=>{t.defaultSession().setResponseMode("HTML").viewCart().setPlacements(t.placements.getPlacements()).load().then(e=>{t.placements.injectCampaigns(e.recommendations)})})},[]),r(l,{children:r("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})}));function v(t){return Object.keys(t).forEach(e=>{t[e]instanceof URL&&(t[e]=t[e].toString()),typeof t[e]=="object"&&v(t[e]),t[e]=t[e]}),t}var y=function t(e){return!e||typeof e!="object"||x(e)||D(e)?e:Array.isArray(e)?e.map(t):Object.keys(e).reduce(function(s,n){var o=n[0].toLowerCase()+n.slice(1).replace(/([A-Z]+)/g,function(d,h){return"_"+h.toLowerCase()});return s[o]=t(e[n]),s},{})},x=function(t){return Object.prototype.toString.call(t)==="[object Date]"},D=function(t){return Object.prototype.toString.call(t)==="[object RegExp]"};const H=({product:t,tagging:e})=>(a.useEffect(()=>{window.nostojs(s=>{s.defaultSession().setResponseMode("HTML").viewProduct(y(v(e))).setPlacements(s.placements.getPlacements()).load().then(n=>{s.placements.injectCampaigns(n.recommendations)})})},[]),i(l,{children:[r("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),i("div",{className:"nosto_product",style:{display:"none"},children:[e.variationId&&r("span",{className:"variation_id",children:e.variationId}),e.productId&&r("span",{className:"product_id",children:e.productId}),e.name&&r("span",{className:"name",children:e.name}),e.url&&r("span",{className:"url",children:e.url.toString()}),e.imageUrl&&r("span",{className:"image_url",children:e.imageUrl.toString()}),e.availability&&r("span",{className:"availability",children:e.availability}),e.price&&r("span",{className:"price",children:e.price}),e.listPrice&&r("span",{className:"list_price",children:e.listPrice}),e.priceCurrencyCode&&r("span",{className:"price_currency_code",children:e.priceCurrencyCode}),e.brand&&r("span",{className:"brand",children:e.brand}),e.description&&r("span",{className:"description",children:e.description}),e.googleCategory&&r("span",{className:"description",children:e.googleCategory}),e.condition&&r("span",{className:"condition",children:e.condition}),e.gender&&r("span",{className:"gender",children:e.gender}),e.ageGroup&&r("span",{className:"age_group",children:e.ageGroup}),e.gtin&&r("span",{className:"gtin",children:e.gtin}),e.category&&e.category.map((s,n)=>r("span",{className:"category",children:s},n)),e.tags1&&e.tags1.map((s,n)=>r("span",{className:"tag1",children:s},n)),e.tags2&&e.tags2.map((s,n)=>r("span",{className:"tag2",children:s},n)),e.tags3&&e.tags3.map((s,n)=>r("span",{className:"tag3",children:s},n)),e.ratingValue&&r("span",{className:"rating_value",children:e.ratingValue}),e.reviewCount&&r("span",{className:"review_count",children:e.reviewCount}),e.alternateImageUrls&&e.alternateImageUrls.map((s,n)=>r("span",{className:"alternate_image_url",children:s.toString()},n)),e.customFields&&Object.keys(e.customFields).map((s,n)=>e.customFields&&e.customFields[s]&&r("span",{className:s,children:e.customFields[s]},n)),e.skus&&e.skus.map((s,n)=>i("span",{className:"nosto_sku",children:[s.id&&r("span",{className:"product_id",children:s.id}),s.name&&r("span",{className:"name",children:s.name}),s.price&&r("span",{className:"price",children:s.price}),s.listPrice&&r("span",{className:"list_price",children:s.listPrice}),s.url&&r("span",{className:"url",children:s.url.toString()}),s.imageUrl&&r("span",{className:"image_url",children:s.imageUrl.toString()}),s.gtin&&r("span",{className:"gtin",children:s.gtin}),s.availability&&r("span",{className:"availability",children:s.availability}),s.customFields&&Object.keys(s.customFields).map((o,d)=>s.customFields&&s.customFields[o]&&r("span",{className:o,children:s.customFields[o]},d))]},n))]})]})),I=({category:t})=>(a.useEffect(()=>{window.nostojs(e=>{e.defaultSession().setResponseMode("HTML").viewCategory(t).setPlacements(e.placements.getPlacements()).load().then(s=>{e.placements.injectCampaigns(s.recommendations)})})},[]),i(l,{children:[r("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),r("div",{className:"nosto_category",style:{display:"none"},children:t})]})),A=({query:t})=>(a.useEffect(()=>{window.nostojs(e=>{e.defaultSession().setResponseMode("HTML").viewSearch(t).setPlacements(e.placements.getPlacements()).load().then(s=>{e.placements.injectCampaigns(s.recommendations)})})},[]),i(l,{children:[r("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),r("div",{className:"nosto_search",style:{display:"none"},children:t})]})),z=({order:t})=>(a.useEffect(()=>{window.nostojs(e=>{e.defaultSession().setResponseMode("HTML").addOrder(y(t)).setPlacements(e.placements.getPlacements()).load().then(s=>{e.placements.injectCampaigns(s.recommendations)})})},[]),i(l,{children:[r("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),r("div",{className:"nosto_order",style:{display:"none"},children:t.purchase.number})]})),b=()=>(a.useEffect(()=>{window.nostojs(t=>{t.defaultSession().setResponseMode("HTML").viewFrontPage().setPlacements(t.placements.getPlacements()).load().then(e=>{t.placements.injectCampaigns(e.recommendations)})})},[]),r(l,{children:r("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})),q=({id:t})=>r("div",{className:"nosto_element",onClick:s=>{const n=s.target.closest("a");if(n)s.preventDefault(),location.href=n.href.toString().replace(new URL(n.href).origin,"");else return},id:t}),V=a.createContext({account:void 0}),B=({account:t,host:e,children:s})=>(a.useEffect(()=>{const n=document.createElement("script");n.type="text/javascript",n.src="//"+(e||"connect.nosto.com")+"/include/"+t,n.async=!0,document.head.appendChild(n),window.nostojs=o=>(window.nostojs.q=window.nostojs.q||[]).push(o),window.nostojs(o=>o.setAutoLoad(!1))},[]),r(V.Provider,{value:{account:t},children:s}));var _=Object.prototype.hasOwnProperty;function w(t,e,s){for(s of t.keys())if(u(s,e))return s}function u(t,e){var s,n,o;if(t===e)return!0;if(t&&e&&(s=t.constructor)===e.constructor){if(s===Date)return t.getTime()===e.getTime();if(s===RegExp)return t.toString()===e.toString();if(s===Array){if((n=t.length)===e.length)for(;n--&&u(t[n],e[n]););return n===-1}if(s===Set){if(t.size!==e.size)return!1;for(n of t)if(o=n,o&&typeof o=="object"&&(o=w(e,o),!o)||!e.has(o))return!1;return!0}if(s===Map){if(t.size!==e.size)return!1;for(n of t)if(o=n[0],o&&typeof o=="object"&&(o=w(e,o),!o)||!u(n[1],e.get(o)))return!1;return!0}if(s===ArrayBuffer)t=new Uint8Array(t),e=new Uint8Array(e);else if(s===DataView){if((n=t.byteLength)===e.byteLength)for(;n--&&t.getInt8(n)===e.getInt8(n););return n===-1}if(ArrayBuffer.isView(t)){if((n=t.byteLength)===e.byteLength)for(;n--&&t[n]===e[n];);return n===-1}if(!s||typeof t=="object"){n=0;for(s in t)if(_.call(t,s)&&++n&&!_.call(e,s)||!(s in e)||!u(t[s],e[s]))return!1;return Object.keys(e).length===n}}return t!==t&&e!==e}function G(t){var e=m.useRef(t),s=m.useRef(0);return u(t,e.current)||(e.current=t,s.current+=1),m.useMemo(function(){return e.current},[s.current])}function $(t,e){return m.useEffect(t,G(e))}const J=({cart:t,customer:e})=>($(()=>{console.debug(e||void 0);const n=t||void 0;console.debug(n),window.nostojs(o=>{o.defaultSession().setResponseMode("HTML").setCart(y(n)).viewOther().load()})},[t||[],e||{}]),r("div",{}));c.Nosto404=F,c.NostoCategory=I,c.NostoCheckout=U,c.NostoHome=b,c.NostoOrder=z,c.NostoOther=R,c.NostoPlacement=q,c.NostoProduct=H,c.NostoProvider=B,c.NostoSearch=A,c.NostoSession=J,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
9
+ */var M=v.default,E=Symbol.for("react.element"),V=Symbol.for("react.fragment"),T=Object.prototype.hasOwnProperty,F=M.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,x={key:!0,ref:!0,__self:!0,__source:!0};function S(t,e,n){var r,s={},c=null,a=null;n!==void 0&&(c=""+n),e.key!==void 0&&(c=""+e.key),e.ref!==void 0&&(a=e.ref);for(r in e)T.call(e,r)&&!x.hasOwnProperty(r)&&(s[r]=e[r]);if(t&&t.defaultProps)for(r in e=t.defaultProps,e)s[r]===void 0&&(s[r]=e[r]);return{$$typeof:E,type:t,key:c,ref:a,props:s,_owner:F.current}}N.Fragment=V,N.jsx=S,N.jsxs=S,y.exports=N;const o=y.exports.jsx,u=y.exports.jsxs,p=y.exports.Fragment,R=()=>{const{clientScriptLoaded:t,currentVariation:e}=m();return i.useEffect(()=>{t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewNotFound().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})},U=()=>{const{clientScriptLoaded:t,currentVariation:e}=m();return i.useEffect(()=>{t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewOther().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})},A=()=>{const{clientScriptLoaded:t,currentVariation:e}=m();return i.useEffect(()=>{t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewCart().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})})},b=({product:t,tagging:e})=>{const{clientScriptLoaded:n,currentVariation:r}=m();return i.useEffect(()=>{n&&window.nostojs(s=>{s.defaultSession().setVariation(r).setResponseMode("HTML").viewProduct(t).setPlacements(s.placements.getPlacements()).load().then(c=>{s.placements.injectCampaigns(c.recommendations)})})},[n,r]),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),u("div",{className:"nosto_product",style:{display:"none"},children:[(e==null?void 0:e.variationId)&&o("span",{className:"variation_id",children:e.variationId}),t&&o("span",{className:"product_id",children:t}),(e==null?void 0:e.name)&&o("span",{className:"name",children:e.name}),(e==null?void 0:e.url)&&o("span",{className:"url",children:e.url.toString()}),(e==null?void 0:e.imageUrl)&&o("span",{className:"image_url",children:e.imageUrl.toString()}),(e==null?void 0:e.availability)&&o("span",{className:"availability",children:e.availability}),(e==null?void 0:e.price)&&o("span",{className:"price",children:e.price}),(e==null?void 0:e.listPrice)&&o("span",{className:"list_price",children:e.listPrice}),(e==null?void 0:e.priceCurrencyCode)&&o("span",{className:"price_currency_code",children:e.priceCurrencyCode}),(e==null?void 0:e.brand)&&o("span",{className:"brand",children:e.brand}),(e==null?void 0:e.description)&&o("span",{className:"description",children:e.description}),(e==null?void 0:e.googleCategory)&&o("span",{className:"description",children:e.googleCategory}),(e==null?void 0:e.condition)&&o("span",{className:"condition",children:e.condition}),(e==null?void 0:e.gender)&&o("span",{className:"gender",children:e.gender}),(e==null?void 0:e.ageGroup)&&o("span",{className:"age_group",children:e.ageGroup}),(e==null?void 0:e.gtin)&&o("span",{className:"gtin",children:e.gtin}),(e==null?void 0:e.category)&&(e==null?void 0:e.category.map((s,c)=>o("span",{className:"category",children:s},c))),(e==null?void 0:e.tags1)&&e.tags1.map((s,c)=>o("span",{className:"tag1",children:s},c)),(e==null?void 0:e.tags2)&&e.tags2.map((s,c)=>o("span",{className:"tag2",children:s},c)),(e==null?void 0:e.tags3)&&e.tags3.map((s,c)=>o("span",{className:"tag3",children:s},c)),(e==null?void 0:e.ratingValue)&&o("span",{className:"rating_value",children:e.ratingValue}),(e==null?void 0:e.reviewCount)&&o("span",{className:"review_count",children:e.reviewCount}),(e==null?void 0:e.alternateImageUrls)&&e.alternateImageUrls.map((s,c)=>o("span",{className:"alternate_image_url",children:s.toString()},c)),(e==null?void 0:e.customFields)&&Object.keys(e.customFields).map((s,c)=>e.customFields&&e.customFields[s]&&o("span",{className:s,children:e.customFields[s]},c)),(e==null?void 0:e.skus)&&e.skus.map((s,c)=>u("span",{className:"nosto_sku",children:[(s==null?void 0:s.id)&&o("span",{className:"product_id",children:s.id}),(s==null?void 0:s.name)&&o("span",{className:"name",children:s.name}),(s==null?void 0:s.price)&&o("span",{className:"price",children:s.price}),(s==null?void 0:s.listPrice)&&o("span",{className:"list_price",children:s.listPrice}),(s==null?void 0:s.url)&&o("span",{className:"url",children:s.url.toString()}),(s==null?void 0:s.imageUrl)&&o("span",{className:"image_url",children:s.imageUrl.toString()}),(s==null?void 0:s.gtin)&&o("span",{className:"gtin",children:s.gtin}),(s==null?void 0:s.availability)&&o("span",{className:"availability",children:s.availability}),(s==null?void 0:s.customFields)&&Object.keys(s.customFields).map((a,w)=>s.customFields&&s.customFields[a]&&o("span",{className:a,children:s.customFields[a]},w))]},c))]})]})},D=({category:t})=>{const{clientScriptLoaded:e,currentVariation:n}=m();return i.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").viewCategory(t).setPlacements(r.placements.getPlacements()).load().then(s=>{r.placements.injectCampaigns(s.recommendations)})})},[e,t,n]),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),o("div",{className:"nosto_category",style:{display:"none"},children:t})]})},H=({query:t})=>{const{clientScriptLoaded:e,currentVariation:n}=m();return i.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").viewSearch(t).setPlacements(r.placements.getPlacements()).load().then(s=>{r.placements.injectCampaigns(s.recommendations)})})},[e,n,t]),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),o("div",{className:"nosto_search",style:{display:"none"},children:t})]})};var j=function t(e){return!e||typeof e!="object"||I(e)||z(e)?e:Array.isArray(e)?e.map(t):Object.keys(e).reduce(function(n,r){var s=r[0].toLowerCase()+r.slice(1).replace(/([A-Z]+)/g,function(c,a){return"_"+a.toLowerCase()});return n[s]=t(e[r]),n},{})},I=function(t){return Object.prototype.toString.call(t)==="[object Date]"},z=function(t){return Object.prototype.toString.call(t)==="[object RegExp]"};const q=({order:t})=>{const{clientScriptLoaded:e,currentVariation:n}=m();return i.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").addOrder(j(t)).setPlacements(r.placements.getPlacements()).load().then(s=>{r.placements.injectCampaigns(s.recommendations)})})},[e,n]),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),o("div",{className:"nosto_order",style:{display:"none"},children:t.purchase.number})]})},B=()=>{const{clientScriptLoaded:t,currentVariation:e}=m();return i.useEffect(()=>{e&&console.log("currentVariation: ",e),t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewFrontPage().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})},G=({id:t})=>o("div",{className:"nosto_element",onClick:n=>{const r=n.target.closest("a");if(r)n.preventDefault(),location.href=r.href.toString().replace(new URL(r.href).origin,"");else return},id:t}),$=({account:t,currentVariation:e="",multiCurrency:n=!1,host:r,children:s})=>{const[c,a]=v.default.useState(!1),w=v.default.useMemo(()=>c,[c]);return e=n?e:"",i.useEffect(()=>{if(!document.querySelectorAll("[nosto-client-script]").length){const d=document.createElement("script");d.type="text/javascript",d.src="//"+(r||"connect.nosto.com")+"/include/"+t,d.async=!0,d.setAttribute("nosto-client-script",""),d.onload=()=>{console.log("Nosto client script loaded"),a(!0)},document.head.appendChild(d)}window.nostojs=d=>(window.nostojs.q=window.nostojs.q||[]).push(d),window.nostojs(d=>d.setAutoLoad(!1))},[]),o(_.Provider,{value:{account:t,clientScriptLoaded:w,currentVariation:e},children:s})};var C=Object.prototype.hasOwnProperty;function P(t,e,n){for(n of t.keys())if(f(n,e))return n}function f(t,e){var n,r,s;if(t===e)return!0;if(t&&e&&(n=t.constructor)===e.constructor){if(n===Date)return t.getTime()===e.getTime();if(n===RegExp)return t.toString()===e.toString();if(n===Array){if((r=t.length)===e.length)for(;r--&&f(t[r],e[r]););return r===-1}if(n===Set){if(t.size!==e.size)return!1;for(r of t)if(s=r,s&&typeof s=="object"&&(s=P(e,s),!s)||!e.has(s))return!1;return!0}if(n===Map){if(t.size!==e.size)return!1;for(r of t)if(s=r[0],s&&typeof s=="object"&&(s=P(e,s),!s)||!f(r[1],e.get(s)))return!1;return!0}if(n===ArrayBuffer)t=new Uint8Array(t),e=new Uint8Array(e);else if(n===DataView){if((r=t.byteLength)===e.byteLength)for(;r--&&t.getInt8(r)===e.getInt8(r););return r===-1}if(ArrayBuffer.isView(t)){if((r=t.byteLength)===e.byteLength)for(;r--&&t[r]===e[r];);return r===-1}if(!n||typeof t=="object"){r=0;for(n in t)if(C.call(t,n)&&++r&&!C.call(e,n)||!(n in e)||!f(t[n],e[n]))return!1;return Object.keys(e).length===r}}return t!==t&&e!==e}function J(t){var e=h.useRef(t),n=h.useRef(0);return f(t,e.current)||(e.current=t,n.current+=1),h.useMemo(function(){return e.current},[n.current])}function W(t,e){return h.useEffect(t,J(e))}const Y=({cart:t,customer:e})=>(W(()=>{console.debug(e||void 0);const r=t||void 0;console.debug(r),window.nostojs(s=>{s.defaultSession().setResponseMode("HTML").setCart(j(r)).viewOther().load()})},[t||[],e||{}]),o("div",{}));l.Nosto404=R,l.NostoCategory=D,l.NostoCheckout=A,l.NostoContext=_,l.NostoHome=B,l.NostoOrder=q,l.NostoOther=U,l.NostoPlacement=G,l.NostoProduct=b,l.NostoProvider=$,l.NostoSearch=H,l.NostoSession=Y,l.useNostoContext=m,Object.defineProperties(l,{__esModule:{value:!0},[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": "0.1.0",
4
+ "version": "0.1.4",
5
5
  "author": "Mridang Agarwalla, Dominik Gilg",
6
6
  "license": "ISC",
7
7
  "repository": {
package/src/components/Category/index.client.tsx ADDED
@@ -0,0 +1,37 @@
1
+ import React, { useEffect } from "react";
2
+ import { useNostoContext } from "../Provider/context.client";
3
+
4
+ const NostoCategory: React.FC<{ category: string }> = ({ category }) => {
5
+ const { clientScriptLoaded, currentVariation } = useNostoContext();
6
+ useEffect(() => {
7
+ // @ts-ignore
8
+ if (clientScriptLoaded) {
9
+ window.nostojs((api: any) => {
10
+ api
11
+ .defaultSession()
12
+ .setVariation(currentVariation)
13
+ .setResponseMode("HTML")
14
+ .viewCategory(category)
15
+ .setPlacements(api.placements.getPlacements())
16
+ .load()
17
+ .then((data: object) => {
18
+ // @ts-ignore
19
+ api.placements.injectCampaigns(data.recommendations);
20
+ });
21
+ });
22
+ }
23
+ }, [clientScriptLoaded, category, currentVariation]);
24
+
25
+ return (
26
+ <>
27
+ <div className="nosto_page_type" style={{ display: "none" }}>
28
+ category
29
+ </div>
30
+ <div className="nosto_category" style={{ display: "none" }}>
31
+ {category}
32
+ </div>
33
+ </>
34
+ );
35
+ };
36
+
37
+ export default NostoCategory;
package/src/components/Checkout/index.client.tsx ADDED
@@ -0,0 +1,34 @@
1
+ import React, { useEffect } from "react";
2
+ import { useNostoContext } from "../Provider/context.client";
3
+
4
+ const NostoCheckout: React.FC = () => {
5
+ const { clientScriptLoaded, currentVariation } = useNostoContext();
6
+ useEffect(() => {
7
+ // @ts-ignore
8
+ if (clientScriptLoaded) {
9
+ window.nostojs((api: any) => {
10
+ api
11
+ .defaultSession()
12
+ .setVariation(currentVariation)
13
+ .setResponseMode("HTML")
14
+ .viewCart()
15
+ .setPlacements(api.placements.getPlacements())
16
+ .load()
17
+ .then((data: object) => {
18
+ // @ts-ignore
19
+ api.placements.injectCampaigns(data.recommendations);
20
+ });
21
+ });
22
+ }
23
+ }, [clientScriptLoaded, currentVariation]);
24
+
25
+ return (
26
+ <>
27
+ <div className="nosto_page_type" style={{ display: "none" }}>
28
+ cart
29
+ </div>
30
+ </>
31
+ );
32
+ };
33
+
34
+ export default NostoCheckout;