@nosto/nosto-react 0.2.0 → 0.3.0

package/dist/index.es.client.js

@@ -1,8 +1,10 @@
 import * as React from "react";
-import React__default, { createContext, useContext, useEffect } from "react";
+import React__default, { createContext, useContext, useEffect, isValidElement, useState, useRef } from "react";
+import { createRoot } from "react-dom/client";
 const NostoContext = createContext({
   account: void 0,
-  currentVariation: ""
+  currentVariation: "",
+  renderFunction: void 0
 });
 function useNostoContext() {
   const context = useContext(NostoContext);
@@ -47,17 +49,24 @@ const Fragment = jsxRuntime.exports.Fragment;
 const NostoFohofo = () => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("404");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewNotFound().setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewNotFound().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -71,17 +80,24 @@ const NostoFohofo = () => {
 const NostoOther = () => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("other");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewOther().setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewOther().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -95,17 +111,24 @@ const NostoOther = () => {
 const NostoCheckout = () => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("checkout");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewCart().setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewCart().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -122,15 +145,22 @@ const NostoProduct = ({
 }) => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("product");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewProduct(product).setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setResponseMode(responseMode).viewProduct(product).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          renderCampaigns(data, api);
         });
-      }, [clientScriptLoaded, currentVariation, product]);
+      }, [clientScriptLoaded, currentVariation, product, recommendationComponent, pageTypeUpdated]);
     }
   });
   return /* @__PURE__ */ jsxs(Fragment, {
@@ -256,17 +286,24 @@ const NostoCategory = ({
 }) => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("home");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewCategory(category).setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewCategory(category).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, category, currentVariation]);
+  }, [clientScriptLoaded, category, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -288,17 +325,24 @@ const NostoSearch = ({
 }) => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("search");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation, query]);
+  }, [clientScriptLoaded, currentVariation, query, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -341,17 +385,24 @@ const NostoOrder = ({
 }) => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("order");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").addOrder(snakeize(order)).setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).addOrder(snakeize(order)).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -371,20 +422,24 @@ const NostoOrder = ({
 const NostoHome = () => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("home");
   useEffect(() => {
-    if (currentVariation) {
-      console.log("currentVariation: ", currentVariation);
-    }
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewFrontPage().setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewFrontPage().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -396,23 +451,65 @@ const NostoHome = () => {
   });
 };
 const NostoPlacement = ({
-  id
+  id,
+  pageType
 }) => {
   return /* @__PURE__ */ jsx("div", {
     className: "nosto_element",
     id
-  });
+  }, id + pageType);
 };
 const NostoProvider = ({
   account,
   currentVariation = "",
   multiCurrency = false,
   host,
-  children
+  children,
+  recommendationComponent
 }) => {
   const [clientScriptLoadedState, setClientScriptLoadedState] = React__default.useState(false);
   const clientScriptLoaded = React__default.useMemo(() => clientScriptLoadedState, [clientScriptLoadedState]);
   currentVariation = multiCurrency ? currentVariation : "";
+  const responseMode = isValidElement(recommendationComponent) ? "JSON_ORIGINAL" : "HTML";
+  function RecommendationComponentWrapper(props) {
+    return React__default.cloneElement(recommendationComponent, {
+      nostoRecommendation: props.nostoRecommendation
+    });
+  }
+  const [pageType, setPageType] = useState("");
+  const useRenderCampaigns = function(type = "") {
+    const placementRefs = useRef({});
+    useEffect(() => {
+      if (pageType != type) {
+        setPageType(type);
+      }
+    }, []);
+    const pageTypeUpdated = type == pageType;
+    function renderCampaigns(data, api) {
+      if (responseMode == "HTML") {
+        api.placements.injectCampaigns(data.recommendations);
+      } else {
+        const recommendations = data.campaigns.recommendations;
+        for (const key in recommendations) {
+          let recommendation = recommendations[key];
+          let placementSelector = "#" + key;
+          let placement = () => document.querySelector(placementSelector);
+          if (!!placement()) {
+            if (!placementRefs.current[key])
+              placementRefs.current[key] = createRoot(placement());
+            const root = placementRefs.current[key];
+            root.render(/* @__PURE__ */ jsx(RecommendationComponentWrapper, {
+              nostoRecommendation: recommendation
+            }));
+          }
+        }
+      }
+    }
+    return {
+      renderCampaigns,
+      pageTypeUpdated
+    };
+  };
   useEffect(() => {
     if (!document.querySelectorAll("[nosto-client-script]").length) {
       const script = document.createElement("script");
@@ -433,7 +530,11 @@ const NostoProvider = ({
     value: {
       account,
       clientScriptLoaded,
-      currentVariation
+      currentVariation,
+      responseMode,
+      recommendationComponent,
+      useRenderCampaigns,
+      pageType
     },
     children
   });

package/dist/index.umd.client.js

@@ -1,4 +1,4 @@
-(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={};/**
+(function(m,p){typeof exports=="object"&&typeof module!="undefined"?p(exports,require("react"),require("react-dom/client")):typeof define=="function"&&define.amd?define(["exports","react","react-dom/client"],p):(m=typeof globalThis!="undefined"?globalThis:m||self,p(m["@nosto/nosto-react"]={},m.React,m.ReactDOM))})(this,function(m,p,A){"use strict";function D(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}function I(t){if(t&&t.__esModule)return t;var e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return t&&Object.keys(t).forEach(function(r){if(r!=="default"){var n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:function(){return t[r]}})}}),e.default=t,Object.freeze(e)}var w=D(p),S=I(p);const O=p.createContext({account:void 0,currentVariation:"",renderFunction:void 0});function h(){const t=p.useContext(O);if(!t)throw new Error("No nosto context found");return t}var P={exports:{}},j={};/**
  * @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=_.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 j(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=j,N.jsxs=j,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"})})},H=()=>{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"})})},D=({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",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 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})=>{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=H,l.NostoContext=v,l.NostoHome=B,l.NostoOrder=q,l.NostoOther=A,l.NostoPlacement=G,l.NostoProduct=D,l.NostoProvider=$,l.NostoSearch=b,l.NostoSession=Y,l.useNostoContext=a,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+ */var b=w.default,z=Symbol.for("react.element"),q=Symbol.for("react.fragment"),H=Object.prototype.hasOwnProperty,B=b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,G={key:!0,ref:!0,__self:!0,__source:!0};function E(t,e,r){var n,c={},a=null,d=null;r!==void 0&&(a=""+r),e.key!==void 0&&(a=""+e.key),e.ref!==void 0&&(d=e.ref);for(n in e)H.call(e,n)&&!G.hasOwnProperty(n)&&(c[n]=e[n]);if(t&&t.defaultProps)for(n in e=t.defaultProps,e)c[n]===void 0&&(c[n]=e[n]);return{$$typeof:z,type:t,key:a,ref:d,props:c,_owner:B.current}}j.Fragment=q,j.jsx=E,j.jsxs=E,P.exports=j;const o=P.exports.jsx,_=P.exports.jsxs,y=P.exports.Fragment,J=()=>{const{clientScriptLoaded:t,currentVariation:e,responseMode:r,recommendationComponent:n,useRenderCampaigns:c}=h(),{renderCampaigns:a,pageTypeUpdated:d}=c("404");return p.useEffect(()=>{t&&d&&window.nostojs(l=>{l.defaultSession().setVariation(e).setResponseMode(r).viewNotFound().setPlacements(l.placements.getPlacements()).load().then(i=>{a(i,l)})})},[t,e,n,d]),o(y,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})},W=()=>{const{clientScriptLoaded:t,currentVariation:e,responseMode:r,recommendationComponent:n,useRenderCampaigns:c}=h(),{renderCampaigns:a,pageTypeUpdated:d}=c("other");return p.useEffect(()=>{t&&d&&window.nostojs(l=>{l.defaultSession().setVariation(e).setResponseMode(r).viewOther().setPlacements(l.placements.getPlacements()).load().then(i=>{a(i,l)})})},[t,e,n,d]),o(y,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})},$=()=>{const{clientScriptLoaded:t,currentVariation:e,responseMode:r,recommendationComponent:n,useRenderCampaigns:c}=h(),{renderCampaigns:a,pageTypeUpdated:d}=c("checkout");return p.useEffect(()=>{t&&d&&window.nostojs(l=>{l.defaultSession().setVariation(e).setResponseMode(r).viewCart().setPlacements(l.placements.getPlacements()).load().then(i=>{a(i,l)})})},[t,e,n,d]),o(y,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})})},Y=({product:t,tagging:e})=>{const{clientScriptLoaded:r,currentVariation:n,responseMode:c,recommendationComponent:a,useRenderCampaigns:d}=h(),{renderCampaigns:l,pageTypeUpdated:i}=d("product");return p.useEffect(()=>{r&&i&&window.nostojs(s=>{s.defaultSession().setResponseMode(c).viewProduct(t).setPlacements(s.placements.getPlacements()).load().then(u=>{l(u,s)})},[r,n,t,a,i])}),_(y,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),_("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,u)=>o("span",{className:"category",children:s},u))),(e==null?void 0:e.tags1)&&e.tags1.map((s,u)=>o("span",{className:"tag1",children:s},u)),(e==null?void 0:e.tags2)&&e.tags2.map((s,u)=>o("span",{className:"tag2",children:s},u)),(e==null?void 0:e.tags3)&&e.tags3.map((s,u)=>o("span",{className:"tag3",children:s},u)),(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,u)=>o("span",{className:"alternate_image_url",children:s.toString()},u)),(e==null?void 0:e.customFields)&&Object.keys(e.customFields).map((s,u)=>e.customFields&&e.customFields[s]&&o("span",{className:s,children:e.customFields[s]},u)),(e==null?void 0:e.skus)&&e.skus.map((s,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((N,L)=>s.customFields&&s.customFields[N]&&o("span",{className:N,children:s.customFields[N]},L))]},u))]})]})},Z=({category:t})=>{const{clientScriptLoaded:e,currentVariation:r,responseMode:n,recommendationComponent:c,useRenderCampaigns:a}=h(),{renderCampaigns:d,pageTypeUpdated:l}=a("home");return p.useEffect(()=>{e&&l&&window.nostojs(i=>{i.defaultSession().setVariation(r).setResponseMode(n).viewCategory(t).setPlacements(i.placements.getPlacements()).load().then(s=>{d(s,i)})})},[e,t,r,c,l]),_(y,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),o("div",{className:"nosto_category",style:{display:"none"},children:t})]})},K=({query:t})=>{const{clientScriptLoaded:e,currentVariation:r,responseMode:n,recommendationComponent:c,useRenderCampaigns:a}=h(),{renderCampaigns:d,pageTypeUpdated:l}=a("search");return p.useEffect(()=>{e&&l&&window.nostojs(i=>{i.defaultSession().setVariation(r).setResponseMode(n).viewSearch(t).setPlacements(i.placements.getPlacements()).load().then(s=>{d(s,i)})})},[e,r,t,c,l]),_(y,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),o("div",{className:"nosto_search",style:{display:"none"},children:t})]})};var M=function t(e){return!e||typeof e!="object"||Q(e)||X(e)?e:Array.isArray(e)?e.map(t):Object.keys(e).reduce(function(r,n){var c=n[0].toLowerCase()+n.slice(1).replace(/([A-Z]+)/g,function(a,d){return"_"+d.toLowerCase()});return r[c]=t(e[n]),r},{})},Q=function(t){return Object.prototype.toString.call(t)==="[object Date]"},X=function(t){return Object.prototype.toString.call(t)==="[object RegExp]"};const k=({order:t})=>{const{clientScriptLoaded:e,currentVariation:r,responseMode:n,recommendationComponent:c,useRenderCampaigns:a}=h(),{renderCampaigns:d,pageTypeUpdated:l}=a("order");return p.useEffect(()=>{e&&l&&window.nostojs(i=>{i.defaultSession().setVariation(r).setResponseMode(n).addOrder(M(t)).setPlacements(i.placements.getPlacements()).load().then(s=>{d(s,i)})})},[e,r,c,l]),_(y,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),o("div",{className:"nosto_order",style:{display:"none"},children:t.purchase.number})]})},g=()=>{const{clientScriptLoaded:t,currentVariation:e,responseMode:r,recommendationComponent:n,useRenderCampaigns:c}=h(),{renderCampaigns:a,pageTypeUpdated:d}=c("home");return p.useEffect(()=>{t&&d&&window.nostojs(l=>{l.defaultSession().setVariation(e).setResponseMode(r).viewFrontPage().setPlacements(l.placements.getPlacements()).load().then(i=>{a(i,l)})})},[t,e,n,d]),o(y,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})},ee=({id:t,pageType:e})=>o("div",{className:"nosto_element",id:t},t+e),te=({account:t,currentVariation:e="",multiCurrency:r=!1,host:n,children:c,recommendationComponent:a})=>{const[d,l]=w.default.useState(!1),i=w.default.useMemo(()=>d,[d]);e=r?e:"";const s=p.isValidElement(a)?"JSON_ORIGINAL":"HTML";function u(f){return w.default.cloneElement(a,{nostoRecommendation:f.nostoRecommendation})}const[N,L]=p.useState(""),oe=function(f=""){const R=p.useRef({});p.useEffect(()=>{N!=f&&L(f)},[]);const ce=f==N;function le(V,de){if(s=="HTML")de.placements.injectCampaigns(V.recommendations);else{const F=V.campaigns.recommendations;for(const C in F){let ae=F[C],ie="#"+C,x=()=>document.querySelector(ie);x()&&(R.current[C]||(R.current[C]=A.createRoot(x())),R.current[C].render(o(u,{nostoRecommendation:ae})))}}}return{renderCampaigns:le,pageTypeUpdated:ce}};return p.useEffect(()=>{if(!document.querySelectorAll("[nosto-client-script]").length){const f=document.createElement("script");f.type="text/javascript",f.src="//"+(n||"connect.nosto.com")+"/include/"+t,f.async=!0,f.setAttribute("nosto-client-script",""),f.onload=()=>{console.log("Nosto client script loaded"),l(!0)},document.head.appendChild(f)}window.nostojs=f=>(window.nostojs.q=window.nostojs.q||[]).push(f),window.nostojs(f=>f.setAutoLoad(!1))},[]),o(O.Provider,{value:{account:t,clientScriptLoaded:i,currentVariation:e,responseMode:s,recommendationComponent:a,useRenderCampaigns:oe,pageType:N},children:c})};var T=Object.prototype.hasOwnProperty;function U(t,e,r){for(r of t.keys())if(v(r,e))return r}function v(t,e){var r,n,c;if(t===e)return!0;if(t&&e&&(r=t.constructor)===e.constructor){if(r===Date)return t.getTime()===e.getTime();if(r===RegExp)return t.toString()===e.toString();if(r===Array){if((n=t.length)===e.length)for(;n--&&v(t[n],e[n]););return n===-1}if(r===Set){if(t.size!==e.size)return!1;for(n of t)if(c=n,c&&typeof c=="object"&&(c=U(e,c),!c)||!e.has(c))return!1;return!0}if(r===Map){if(t.size!==e.size)return!1;for(n of t)if(c=n[0],c&&typeof c=="object"&&(c=U(e,c),!c)||!v(n[1],e.get(c)))return!1;return!0}if(r===ArrayBuffer)t=new Uint8Array(t),e=new Uint8Array(e);else if(r===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(!r||typeof t=="object"){n=0;for(r in t)if(T.call(t,r)&&++n&&!T.call(e,r)||!(r in e)||!v(t[r],e[r]))return!1;return Object.keys(e).length===n}}return t!==t&&e!==e}function se(t){var e=S.useRef(t),r=S.useRef(0);return v(t,e.current)||(e.current=t,r.current+=1),S.useMemo(function(){return e.current},[r.current])}function ne(t,e){return S.useEffect(t,se(e))}const re=({cart:t,customer:e})=>{const{clientScriptLoaded:r}=h();return ne(()=>{const n=t?M(t):void 0,c=e?M(e):void 0;r&&window.nostojs(a=>{a.defaultSession().setResponseMode("HTML").setCart(n).setCustomer(c).viewOther().load()})},[r,t||[],e||{}]),o(y,{})};m.Nosto404=J,m.NostoCategory=Z,m.NostoCheckout=$,m.NostoContext=O,m.NostoHome=g,m.NostoOrder=k,m.NostoOther=W,m.NostoPlacement=ee,m.NostoProduct=Y,m.NostoProvider=te,m.NostoSearch=K,m.NostoSession=re,m.useNostoContext=h,Object.defineProperties(m,{__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.2.0",
+  "version": "0.3.0",
   "author": "Mridang Agarwalla, Dominik Gilg",
   "license": "ISC",
   "repository": {

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

@@ -2,25 +2,39 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoCategory: React.FC<{ category: string }> = ({ category }) => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("home");
+
   useEffect(() => {
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api: any) => {
         api
           .defaultSession()
           .setVariation(currentVariation)
-          .setResponseMode("HTML")
+          .setResponseMode(responseMode)
           .viewCategory(category)
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            // @ts-ignore
-            api.placements.injectCampaigns(data.recommendations);
+            renderCampaigns(data, api);
           });
       });
     }
-  }, [clientScriptLoaded, category, currentVariation]);
+  }, [
+    clientScriptLoaded,
+    category,
+    currentVariation,
+    recommendationComponent,
+    pageTypeUpdated,
+  ]);
 
   return (
     <>

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

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

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

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

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

@@ -2,28 +2,38 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoHome: React.FC = () => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("home");
+
   useEffect(() => {
-    if (currentVariation) {
-      console.log("currentVariation: ", currentVariation);
-    }
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api: any) => {
         api
           .defaultSession()
           .setVariation(currentVariation)
-          .setResponseMode("HTML")
+          .setResponseMode(responseMode)
           .viewFrontPage()
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            // @ts-ignore
-            api.placements.injectCampaigns(data.recommendations);
+            renderCampaigns(data, api);
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [
+    clientScriptLoaded,
+    currentVariation,
+    recommendationComponent,
+    pageTypeUpdated,
+  ]);
 
   return (
     <>

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

@@ -8,25 +8,38 @@ export interface OrderProps {
 }
 
 const NostoOrder: React.FC<{ order: OrderProps }> = ({ order }) => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("order");
+
   useEffect(() => {
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api: any) => {
         api
           .defaultSession()
           .setVariation(currentVariation)
-          .setResponseMode("HTML")
+          .setResponseMode(responseMode)
           .addOrder(snakeize(order))
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            // @ts-ignore
-            api.placements.injectCampaigns(data.recommendations);
+            renderCampaigns(data, api);
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [
+    clientScriptLoaded,
+    currentVariation,
+    recommendationComponent,
+    pageTypeUpdated,
+  ]);
 
   return (
     <>

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

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

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

@@ -2,10 +2,11 @@ import React from "react";
 
 export interface PlacementProps {
   id: string;
+  pageType: string;
 }
 
-const NostoPlacement: React.FC<PlacementProps> = ({ id }) => {
-  return <div className="nosto_element" id={id} />;
+const NostoPlacement: React.FC<PlacementProps> = ({ id, pageType }) => {
+  return <div className="nosto_element" id={id} key={id + pageType} />;
 };
 
 export default NostoPlacement;

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

@@ -6,25 +6,38 @@ const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
   product,
   tagging,
 }) => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("product");
+
   useEffect(() => {
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs(
         (api: any) => {
           api
             .defaultSession()
-            .setVariation(currentVariation)
-            .setResponseMode("HTML")
+            .setResponseMode(responseMode)
             .viewProduct(product)
             .setPlacements(api.placements.getPlacements())
             .load()
             .then((data: object) => {
-              // @ts-ignore
-              api.placements.injectCampaigns(data.recommendations);
+              renderCampaigns(data, api);
             });
         },
-        [clientScriptLoaded, currentVariation, product]
+        [
+          clientScriptLoaded,
+          currentVariation,
+          product,
+          recommendationComponent,
+          pageTypeUpdated,
+        ]
       );
     }
   });

package/src/components/Provider/context.client.ts

@@ -1,9 +1,14 @@
-import { createContext, useContext } from "react";
+import { createContext, useContext, ReactComponentElement } from "react";
 
 export interface NostoInterface {
   account: string;
   clientScriptLoaded: boolean;
   currentVariation: string;
+  renderFunction?: Function;
+  responseMode: string;
+  recommendationComponent?: any;
+  useRenderCampaigns: Function;
+  pageType: string;
 }
 
 /* tslint:disable:no-empty */
@@ -11,6 +16,7 @@ export const NostoContext = createContext<NostoInterface>({
   // @ts-ignore
   account: undefined,
   currentVariation: "",
+  renderFunction: undefined,
 });
 
 /* tslint:enable:no-empty */

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

@@ -1,5 +1,6 @@
-import React, { useEffect } from "react";
+import React, { useEffect, isValidElement, useState, useRef } from "react";
 import { NostoContext } from "./context.client";
+import { createRoot } from "react-dom/client";
 
 interface NostoProviderProps {
   account: string;
@@ -7,6 +8,7 @@ interface NostoProviderProps {
   host: string;
   children: React.ReactElement;
   multiCurrency: boolean;
+  recommendationComponent?: any;
 }
 
 const NostoProvider: React.FC<NostoProviderProps> = ({
@@ -15,6 +17,7 @@ const NostoProvider: React.FC<NostoProviderProps> = ({
   multiCurrency = false,
   host,
   children,
+  recommendationComponent,
 }) => {
   const [clientScriptLoadedState, setClientScriptLoadedState] =
     React.useState(false);
@@ -26,6 +29,58 @@ const NostoProvider: React.FC<NostoProviderProps> = ({
   //Pass currentVariation as empty string if multiCurrency is disabled
   currentVariation = multiCurrency ? currentVariation : "";
 
+  // Set responseMode for loading campaigns:
+  const responseMode = isValidElement(recommendationComponent)
+    ? "JSON_ORIGINAL"
+    : "HTML";
+
+  // RecommendationComponent for client-side rendering:
+  function RecommendationComponentWrapper(props: any) {
+    return React.cloneElement(recommendationComponent, {
+      nostoRecommendation: props.nostoRecommendation,
+    });
+  }
+
+  // custom hook for rendering campaigns (CSR/SSR):
+  const [pageType, setPageType] = useState("");
+  const useRenderCampaigns: any = function (type: string = "") {
+    const placementRefs: any = useRef({});
+    useEffect(() => {
+      if (pageType != type) {
+        setPageType(type);
+      }
+    }, []);
+
+    const pageTypeUpdated = type == pageType;
+
+    function renderCampaigns(data: any, api: any) {
+      if (responseMode == "HTML") {
+        // inject content campaigns as usual:
+        api.placements.injectCampaigns(data.recommendations);
+      } else {
+        // render recommendation component into placements:
+        const recommendations = data.campaigns.recommendations;
+        for (const key in recommendations) {
+          let recommendation = recommendations[key];
+          let placementSelector = "#" + key;
+          let placement: Function = () =>
+            document.querySelector(placementSelector);
+          if (!!placement()) {
+            if (!placementRefs.current[key])
+              placementRefs.current[key] = createRoot(placement());
+            const root = placementRefs.current[key];
+            root.render(
+              <RecommendationComponentWrapper
+                nostoRecommendation={recommendation}
+              ></RecommendationComponentWrapper>
+            );
+          }
+        }
+      }
+    }
+    return { renderCampaigns, pageTypeUpdated };
+  };
+
   useEffect(() => {
     if (!document.querySelectorAll("[nosto-client-script]").length) {
       const script = document.createElement("script");
@@ -48,7 +103,15 @@ const NostoProvider: React.FC<NostoProviderProps> = ({
 
   return (
     <NostoContext.Provider
-      value={{ account, clientScriptLoaded, currentVariation }}
+      value={{
+        account,
+        clientScriptLoaded,
+        currentVariation,
+        responseMode,
+        recommendationComponent,
+        useRenderCampaigns,
+        pageType,
+      }}
     >
       {children}
     </NostoContext.Provider>

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

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

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

@@ -13,7 +13,7 @@ interface NostoSessionProps {
 const NostoSession: React.FC<NostoSessionProps> = ({ cart, customer }) => {
   const { clientScriptLoaded } = useNostoContext();
   useDeepCompareEffect(() => {
-    const currentCart = cart ? snakeize(cart) : undefined;    
+    const currentCart = cart ? snakeize(cart) : undefined;
     const currentCustomer = customer ? snakeize(customer) : undefined;
 
     // @ts-ignore

package/src/index.client.ts

@@ -34,4 +34,3 @@ export {
 } from "./components/Provider/context.client";
 // noinspection JSUnusedGlobalSymbols
 export { default as NostoSession } from "./components/Session/index.client";
-//