@nosto/nosto-react 0.1.3 → 0.1.6

package/dist/index.es.client.js

@@ -1,5 +1,16 @@
 import * as React from "react";
-import React__default, { useEffect, createContext, useContext } from "react";
+import React__default, { createContext, useContext, useEffect } from "react";
+const NostoContext = createContext({
+  account: void 0,
+  currentVariation: ""
+});
+function useNostoContext() {
+  const context = useContext(NostoContext);
+  if (!context) {
+    throw new Error("No nosto context found");
+  }
+  return context;
+}
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -14,14 +25,14 @@ var reactJsxRuntime_production_min = {};
 var f = React__default, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: true, ref: true, __self: true, __source: true };
 function q(c, a, g) {
   var b, d = {}, e = null, h = null;
-  g !== void 0 && (e = "" + g);
-  a.key !== void 0 && (e = "" + a.key);
-  a.ref !== void 0 && (h = a.ref);
+  void 0 !== g && (e = "" + g);
+  void 0 !== a.key && (e = "" + a.key);
+  void 0 !== a.ref && (h = a.ref);
   for (b in a)
     m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
   if (c && c.defaultProps)
     for (b in a = c.defaultProps, a)
-      d[b] === void 0 && (d[b] = a[b]);
+      void 0 === d[b] && (d[b] = a[b]);
   return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
 }
 reactJsxRuntime_production_min.Fragment = l;
@@ -34,13 +45,19 @@ const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
 const NostoFohofo = () => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").viewNotFound().setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewNotFound().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          api.placements.injectCampaigns(data.recommendations);
+        });
       });
-    });
-  }, []);
+    }
+  }, [clientScriptLoaded, currentVariation]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -52,13 +69,19 @@ const NostoFohofo = () => {
   });
 };
 const NostoOther = () => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").viewOther().setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewOther().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          api.placements.injectCampaigns(data.recommendations);
+        });
       });
-    });
-  }, []);
+    }
+  }, [clientScriptLoaded, currentVariation]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -70,13 +93,19 @@ const NostoOther = () => {
   });
 };
 const NostoCheckout = () => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").viewCart().setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewCart().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          api.placements.injectCampaigns(data.recommendations);
+        });
       });
-    });
-  }, []);
+    }
+  }, [clientScriptLoaded, currentVariation]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -87,17 +116,6 @@ const NostoCheckout = () => {
     })
   });
 };
-const NostoContext = createContext({
-  account: void 0,
-  currentVariation: ""
-});
-function useNostoContext() {
-  const context = useContext(NostoContext);
-  if (!context) {
-    throw new Error("No nosto context found");
-  }
-  return context;
-}
 const NostoProduct = ({
   product,
   tagging
@@ -112,9 +130,9 @@ const NostoProduct = ({
         api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewProduct(product).setPlacements(api.placements.getPlacements()).load().then((data) => {
           api.placements.injectCampaigns(data.recommendations);
         });
-      });
+      }, [clientScriptLoaded, currentVariation, product]);
     }
-  }, [clientScriptLoaded, currentVariation]);
+  });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -268,13 +286,19 @@ const NostoCategory = ({
 const NostoSearch = ({
   query
 }) => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          api.placements.injectCampaigns(data.recommendations);
+        });
       });
-    });
-  }, []);
+    }
+  }, [clientScriptLoaded, currentVariation, query]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -315,13 +339,19 @@ var isRegex = function(obj) {
 const NostoOrder = ({
   order
 }) => {
+  const {
+    clientScriptLoaded,
+    currentVariation
+  } = useNostoContext();
   useEffect(() => {
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").addOrder(snakeize(order)).setPlacements(api.placements.getPlacements()).load().then((data) => {
-        api.placements.injectCampaigns(data.recommendations);
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").addOrder(snakeize(order)).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          api.placements.injectCampaigns(data.recommendations);
+        });
       });
-    });
-  }, []);
+    }
+  }, [clientScriptLoaded, currentVariation]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -522,15 +552,18 @@ const NostoSession = ({
   cart,
   customer
 }) => {
+  const {
+    clientScriptLoaded
+  } = useNostoContext();
   useDeepCompareEffect(() => {
-    const currentUser = customer ? customer : void 0;
-    console.debug(currentUser);
-    const currentCart = cart ? cart : void 0;
-    console.debug(currentCart);
-    window.nostojs((api) => {
-      api.defaultSession().setResponseMode("HTML").setCart(snakeize(currentCart)).viewOther().load();
-    });
-  }, [cart || [], customer || {}]);
-  return /* @__PURE__ */ jsx("div", {});
+    const currentCart = cart ? snakeize(cart) : void 0;
+    const currentCustomer = customer ? snakeize(customer) : void 0;
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setResponseMode("HTML").setCart(currentCart).setCustomer(currentCustomer).viewOther().load();
+      });
+    }
+  }, [clientScriptLoaded, cart || [], customer || {}]);
+  return /* @__PURE__ */ jsx(Fragment, {});
 };
 export { NostoFohofo as Nosto404, NostoCategory, NostoCheckout, NostoContext, NostoHome, NostoOrder, NostoOther, NostoPlacement, NostoProduct, NostoProvider, NostoSearch, NostoSession, useNostoContext };

package/dist/index.umd.client.js

@@ -1,4 +1,4 @@
-(function(l,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],a):(l=typeof globalThis!="undefined"?globalThis:l||self,a(l["@nosto/nosto-react"]={},l.React))})(this,function(l,a){"use strict";function O(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}function L(s){if(s&&s.__esModule)return s;var e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return s&&Object.keys(s).forEach(function(n){if(n!=="default"){var r=Object.getOwnPropertyDescriptor(s,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:function(){return s[n]}})}}),e.default=s,Object.freeze(e)}var v=O(a),f=L(a),h={exports:{}},y={};/**
+(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 _=L(i),h=O(i);const v=i.createContext({account:void 0,currentVariation:""});function a(){const t=i.useContext(v);if(!t)throw new Error("No nosto context found");return t}var y={exports:{}},N={};/**
  * @license React
  * react-jsx-runtime.production.min.js
  *
@@ -6,4 +6,4 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var M=v.default,E=Symbol.for("react.element"),T=Symbol.for("react.fragment"),F=Object.prototype.hasOwnProperty,x=M.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,R={key:!0,ref:!0,__self:!0,__source:!0};function S(s,e,n){var r,t={},c=null,d=null;n!==void 0&&(c=""+n),e.key!==void 0&&(c=""+e.key),e.ref!==void 0&&(d=e.ref);for(r in e)F.call(e,r)&&!R.hasOwnProperty(r)&&(t[r]=e[r]);if(s&&s.defaultProps)for(r in e=s.defaultProps,e)t[r]===void 0&&(t[r]=e[r]);return{$$typeof:E,type:s,key:c,ref:d,props:t,_owner:x.current}}y.Fragment=T,y.jsx=S,y.jsxs=S,h.exports=y;const o=h.exports.jsx,p=h.exports.jsxs,m=h.exports.Fragment,U=()=>(a.useEffect(()=>{window.nostojs(s=>{s.defaultSession().setResponseMode("HTML").viewNotFound().setPlacements(s.placements.getPlacements()).load().then(e=>{s.placements.injectCampaigns(e.recommendations)})})},[]),o(m,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})),A=()=>(a.useEffect(()=>{window.nostojs(s=>{s.defaultSession().setResponseMode("HTML").viewOther().setPlacements(s.placements.getPlacements()).load().then(e=>{s.placements.injectCampaigns(e.recommendations)})})},[]),o(m,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})),b=()=>(a.useEffect(()=>{window.nostojs(s=>{s.defaultSession().setResponseMode("HTML").viewCart().setPlacements(s.placements.getPlacements()).load().then(e=>{s.placements.injectCampaigns(e.recommendations)})})},[]),o(m,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})})),_=a.createContext({account:void 0,currentVariation:""});function N(){const s=a.useContext(_);if(!s)throw new Error("No nosto context found");return s}const D=({product:s,tagging:e})=>{const{clientScriptLoaded:n,currentVariation:r}=N();return a.useEffect(()=>{n&&window.nostojs(t=>{t.defaultSession().setVariation(r).setResponseMode("HTML").viewProduct(s).setPlacements(t.placements.getPlacements()).load().then(c=>{t.placements.injectCampaigns(c.recommendations)})})},[n,r]),p(m,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),p("div",{className:"nosto_product",style:{display:"none"},children:[(e==null?void 0:e.variationId)&&o("span",{className:"variation_id",children:e.variationId}),s&&o("span",{className:"product_id",children:s}),(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((t,c)=>o("span",{className:"category",children:t},c))),(e==null?void 0:e.tags1)&&e.tags1.map((t,c)=>o("span",{className:"tag1",children:t},c)),(e==null?void 0:e.tags2)&&e.tags2.map((t,c)=>o("span",{className:"tag2",children:t},c)),(e==null?void 0:e.tags3)&&e.tags3.map((t,c)=>o("span",{className:"tag3",children:t},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((t,c)=>o("span",{className:"alternate_image_url",children:t.toString()},c)),(e==null?void 0:e.customFields)&&Object.keys(e.customFields).map((t,c)=>e.customFields&&e.customFields[t]&&o("span",{className:t,children:e.customFields[t]},c)),(e==null?void 0:e.skus)&&e.skus.map((t,c)=>p("span",{className:"nosto_sku",children:[(t==null?void 0:t.id)&&o("span",{className:"product_id",children:t.id}),(t==null?void 0:t.name)&&o("span",{className:"name",children:t.name}),(t==null?void 0:t.price)&&o("span",{className:"price",children:t.price}),(t==null?void 0:t.listPrice)&&o("span",{className:"list_price",children:t.listPrice}),(t==null?void 0:t.url)&&o("span",{className:"url",children:t.url.toString()}),(t==null?void 0:t.imageUrl)&&o("span",{className:"image_url",children:t.imageUrl.toString()}),(t==null?void 0:t.gtin)&&o("span",{className:"gtin",children:t.gtin}),(t==null?void 0:t.availability)&&o("span",{className:"availability",children:t.availability}),(t==null?void 0:t.customFields)&&Object.keys(t.customFields).map((d,w)=>t.customFields&&t.customFields[d]&&o("span",{className:d,children:t.customFields[d]},w))]},c))]})]})},H=({category:s})=>{const{clientScriptLoaded:e,currentVariation:n}=N();return a.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").viewCategory(s).setPlacements(r.placements.getPlacements()).load().then(t=>{r.placements.injectCampaigns(t.recommendations)})})},[e,s,n]),p(m,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),o("div",{className:"nosto_category",style:{display:"none"},children:s})]})},V=({query:s})=>(a.useEffect(()=>{window.nostojs(e=>{e.defaultSession().setResponseMode("HTML").viewSearch(s).setPlacements(e.placements.getPlacements()).load().then(n=>{e.placements.injectCampaigns(n.recommendations)})})},[]),p(m,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),o("div",{className:"nosto_search",style:{display:"none"},children:s})]}));var j=function s(e){return!e||typeof e!="object"||I(e)||z(e)?e:Array.isArray(e)?e.map(s):Object.keys(e).reduce(function(n,r){var t=r[0].toLowerCase()+r.slice(1).replace(/([A-Z]+)/g,function(c,d){return"_"+d.toLowerCase()});return n[t]=s(e[r]),n},{})},I=function(s){return Object.prototype.toString.call(s)==="[object Date]"},z=function(s){return Object.prototype.toString.call(s)==="[object RegExp]"};const q=({order:s})=>(a.useEffect(()=>{window.nostojs(e=>{e.defaultSession().setResponseMode("HTML").addOrder(j(s)).setPlacements(e.placements.getPlacements()).load().then(n=>{e.placements.injectCampaigns(n.recommendations)})})},[]),p(m,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),o("div",{className:"nosto_order",style:{display:"none"},children:s.purchase.number})]})),B=()=>{const{clientScriptLoaded:s,currentVariation:e}=N();return a.useEffect(()=>{e&&console.log("currentVariation: ",e),s&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewFrontPage().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[s,e]),o(m,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})},G=({id:s})=>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:s}),$=({account:s,currentVariation:e="",multiCurrency:n=!1,host:r,children:t})=>{const[c,d]=v.default.useState(!1),w=v.default.useMemo(()=>c,[c]);return e=n?e:"",a.useEffect(()=>{if(!document.querySelectorAll("[nosto-client-script]").length){const i=document.createElement("script");i.type="text/javascript",i.src="//"+(r||"connect.nosto.com")+"/include/"+s,i.async=!0,i.setAttribute("nosto-client-script",""),i.onload=()=>{console.log("Nosto client script loaded"),d(!0)},document.head.appendChild(i)}window.nostojs=i=>(window.nostojs.q=window.nostojs.q||[]).push(i),window.nostojs(i=>i.setAutoLoad(!1))},[]),o(_.Provider,{value:{account:s,clientScriptLoaded:w,currentVariation:e},children:t})};var C=Object.prototype.hasOwnProperty;function P(s,e,n){for(n of s.keys())if(u(n,e))return n}function u(s,e){var n,r,t;if(s===e)return!0;if(s&&e&&(n=s.constructor)===e.constructor){if(n===Date)return s.getTime()===e.getTime();if(n===RegExp)return s.toString()===e.toString();if(n===Array){if((r=s.length)===e.length)for(;r--&&u(s[r],e[r]););return r===-1}if(n===Set){if(s.size!==e.size)return!1;for(r of s)if(t=r,t&&typeof t=="object"&&(t=P(e,t),!t)||!e.has(t))return!1;return!0}if(n===Map){if(s.size!==e.size)return!1;for(r of s)if(t=r[0],t&&typeof t=="object"&&(t=P(e,t),!t)||!u(r[1],e.get(t)))return!1;return!0}if(n===ArrayBuffer)s=new Uint8Array(s),e=new Uint8Array(e);else if(n===DataView){if((r=s.byteLength)===e.byteLength)for(;r--&&s.getInt8(r)===e.getInt8(r););return r===-1}if(ArrayBuffer.isView(s)){if((r=s.byteLength)===e.byteLength)for(;r--&&s[r]===e[r];);return r===-1}if(!n||typeof s=="object"){r=0;for(n in s)if(C.call(s,n)&&++r&&!C.call(e,n)||!(n in e)||!u(s[n],e[n]))return!1;return Object.keys(e).length===r}}return s!==s&&e!==e}function J(s){var e=f.useRef(s),n=f.useRef(0);return u(s,e.current)||(e.current=s,n.current+=1),f.useMemo(function(){return e.current},[n.current])}function W(s,e){return f.useEffect(s,J(e))}const Y=({cart:s,customer:e})=>(W(()=>{console.debug(e||void 0);const r=s||void 0;console.debug(r),window.nostojs(t=>{t.defaultSession().setResponseMode("HTML").setCart(j(r)).viewOther().load()})},[s||[],e||{}]),o("div",{}));l.Nosto404=U,l.NostoCategory=H,l.NostoCheckout=b,l.NostoContext=_,l.NostoHome=B,l.NostoOrder=q,l.NostoOther=A,l.NostoPlacement=G,l.NostoProduct=D,l.NostoProvider=$,l.NostoSearch=V,l.NostoSession=Y,l.useNostoContext=N,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+ */var M=_.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 C(t,e,n){var r,s={},c=null,d=null;n!==void 0&&(c=""+n),e.key!==void 0&&(c=""+e.key),e.ref!==void 0&&(d=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:d,props:s,_owner:F.current}}N.Fragment=V,N.jsx=C,N.jsxs=C,y.exports=N;const o=y.exports.jsx,u=y.exports.jsxs,p=y.exports.Fragment,R=()=>{const{clientScriptLoaded:t,currentVariation:e}=a();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"})})},A=()=>{const{clientScriptLoaded:t,currentVariation:e}=a();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"})})},D=()=>{const{clientScriptLoaded:t,currentVariation:e}=a();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"})})},H=({product:t,tagging:e})=>{const{clientScriptLoaded:n,currentVariation:r}=a();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,t])}),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((d,S)=>s.customFields&&s.customFields[d]&&o("span",{className:d,children:s.customFields[d]},S))]},c))]})]})},U=({category:t})=>{const{clientScriptLoaded:e,currentVariation:n}=a();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})]})},b=({query:t})=>{const{clientScriptLoaded:e,currentVariation:n}=a();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 w=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,d){return"_"+d.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}=a();return i.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").addOrder(w(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}=a();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,d]=_.default.useState(!1),S=_.default.useMemo(()=>c,[c]);return e=n?e:"",i.useEffect(()=>{if(!document.querySelectorAll("[nosto-client-script]").length){const m=document.createElement("script");m.type="text/javascript",m.src="//"+(r||"connect.nosto.com")+"/include/"+t,m.async=!0,m.setAttribute("nosto-client-script",""),m.onload=()=>{console.log("Nosto client script loaded"),d(!0)},document.head.appendChild(m)}window.nostojs=m=>(window.nostojs.q=window.nostojs.q||[]).push(m),window.nostojs(m=>m.setAutoLoad(!1))},[]),o(v.Provider,{value:{account:t,clientScriptLoaded:S,currentVariation:e},children:s})};var j=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(j.call(t,n)&&++r&&!j.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})=>{const{clientScriptLoaded:n}=a();return W(()=>{const r=t?w(t):void 0,s=e?w(e):void 0;n&&window.nostojs(c=>{c.defaultSession().setResponseMode("HTML").setCart(r).setCustomer(s).viewOther().load()})},[n,t||[],e||{}]),o(p,{})};l.Nosto404=R,l.NostoCategory=U,l.NostoCheckout=D,l.NostoContext=v,l.NostoHome=B,l.NostoOrder=q,l.NostoOther=A,l.NostoPlacement=G,l.NostoProduct=H,l.NostoProvider=$,l.NostoSearch=b,l.NostoSession=Y,l.useNostoContext=a,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nosto/nosto-react",
   "description": "Component library to simply implementing Nosto on React.",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "author": "Mridang Agarwalla, Dominik Gilg",
   "license": "ISC",
   "repository": {

package/src/components/Checkout/index.client.tsx

@@ -1,21 +1,26 @@
 import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
 
 const NostoCheckout: React.FC = () => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   useEffect(() => {
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .viewCart()
-        .setPlacements(api.placements.getPlacements())
-        .load()
-        .then((data: object) => {
-          // @ts-ignore
-          api.placements.injectCampaigns(data.recommendations);
-        });
-    });
-  }, []);
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .viewCart()
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
 
   return (
     <>

package/src/components/Fohofo/index.client.tsx

@@ -1,21 +1,26 @@
 import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
 
 const NostoFohofo: React.FC = () => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   useEffect(() => {
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .viewNotFound()
-        .setPlacements(api.placements.getPlacements())
-        .load()
-        .then((data: object) => {
-          // @ts-ignore
-          api.placements.injectCampaigns(data.recommendations);
-        });
-    });
-  }, []);
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .viewNotFound()
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
 
   return (
     <>

package/src/components/Order/index.client.tsx

@@ -1,27 +1,32 @@
 import { Purchase } from "../../types";
 import React, { useEffect } from "react";
 import snakeize from "snakeize";
+import { useNostoContext } from "../Provider/context.client";
 
 export interface OrderProps {
   purchase: Purchase;
 }
 
 const NostoOrder: React.FC<{ order: OrderProps }> = ({ order }) => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   useEffect(() => {
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .addOrder(snakeize(order))
-        .setPlacements(api.placements.getPlacements())
-        .load()
-        .then((data: object) => {
-          // @ts-ignore
-          api.placements.injectCampaigns(data.recommendations);
-        });
-    });
-  }, []);
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .addOrder(snakeize(order))
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
 
   return (
     <>

package/src/components/Other/index.client.tsx

@@ -1,21 +1,26 @@
 import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
 
 const NostoOther: React.FC = () => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   useEffect(() => {
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .viewOther()
-        .setPlacements(api.placements.getPlacements())
-        .load()
-        .then((data: object) => {
-          // @ts-ignore
-          api.placements.injectCampaigns(data.recommendations);
-        });
-    });
-  }, []);
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .viewOther()
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation]);
 
   return (
     <>

package/src/components/Product/index.client.tsx

@@ -10,21 +10,24 @@ const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
   useEffect(() => {
     // @ts-ignore
     if (clientScriptLoaded) {
-      window.nostojs((api: any) => {
-        api
-          .defaultSession()
-          .setVariation(currentVariation)
-          .setResponseMode("HTML")
-          .viewProduct(product)
-          .setPlacements(api.placements.getPlacements())
-          .load()
-          .then((data: object) => {
-            // @ts-ignore
-            api.placements.injectCampaigns(data.recommendations);
-          });
-      });
+      window.nostojs(
+        (api: any) => {
+          api
+            .defaultSession()
+            .setVariation(currentVariation)
+            .setResponseMode("HTML")
+            .viewProduct(product)
+            .setPlacements(api.placements.getPlacements())
+            .load()
+            .then((data: object) => {
+              // @ts-ignore
+              api.placements.injectCampaigns(data.recommendations);
+            });
+        },
+        [clientScriptLoaded, currentVariation, product]
+      );
     }
-  }, [clientScriptLoaded, currentVariation]);
+  });
 
   return (
     <>

package/src/components/Search/index.client.tsx

@@ -1,21 +1,26 @@
 import React, { useEffect } from "react";
+import { useNostoContext } from "../Provider/context.client";
 
 const NostoSearch: React.FC<{ query: string }> = ({ query }) => {
+  const { clientScriptLoaded, currentVariation } = useNostoContext();
   useEffect(() => {
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .viewSearch(query)
-        .setPlacements(api.placements.getPlacements())
-        .load()
-        .then((data: object) => {
-          // @ts-ignore
-          api.placements.injectCampaigns(data.recommendations);
-        });
-    });
-  }, []);
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setVariation(currentVariation)
+          .setResponseMode("HTML")
+          .viewSearch(query)
+          .setPlacements(api.placements.getPlacements())
+          .load()
+          .then((data: object) => {
+            // @ts-ignore
+            api.placements.injectCampaigns(data.recommendations);
+          });
+      });
+    }
+  }, [clientScriptLoaded, currentVariation, query]);
 
   return (
     <>

package/src/components/Session/index.client.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import snakeize from "snakeize";
+import { useNostoContext } from "../Provider/context.client";
 
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { Cart, Customer } from "../../types";
@@ -10,24 +11,26 @@ interface NostoSessionProps {
 }
 
 const NostoSession: React.FC<NostoSessionProps> = ({ cart, customer }) => {
+  const { clientScriptLoaded } = useNostoContext();
   useDeepCompareEffect(() => {
-    const currentUser = customer ? customer : undefined;
-    console.debug(currentUser);
-    const currentCart = cart ? cart : undefined;
-    console.debug(currentCart);
+    const currentCart = cart ? snakeize(cart) : undefined;    
+    const currentCustomer = customer ? snakeize(customer) : undefined;
 
     // @ts-ignore
-    window.nostojs((api) => {
-      api
-        .defaultSession()
-        .setResponseMode("HTML")
-        .setCart(snakeize(currentCart))
-        .viewOther()
-        .load();
-    });
-  }, [cart || [], customer || {}]);
+    if (clientScriptLoaded) {
+      window.nostojs((api: any) => {
+        api
+          .defaultSession()
+          .setResponseMode("HTML")
+          .setCart(currentCart)
+          .setCustomer(currentCustomer)
+          .viewOther()
+          .load();
+      });
+    }
+  }, [clientScriptLoaded, cart || [], customer || {}]);
 
-  return <div />;
+  return <></>;
 };
 
 export default NostoSession;