@nosto/nosto-react 0.1.0

package/dist/index.es.client.js

@@ -0,0 +1,505 @@
+import * as React from "react";
+import React__default, { useEffect, createContext } from "react";
+var jsxRuntime = { exports: {} };
+var reactJsxRuntime_production_min = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+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);
+  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]);
+  return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
+}
+reactJsxRuntime_production_min.Fragment = l;
+reactJsxRuntime_production_min.jsx = q;
+reactJsxRuntime_production_min.jsxs = q;
+{
+  jsxRuntime.exports = reactJsxRuntime_production_min;
+}
+const jsx = jsxRuntime.exports.jsx;
+const jsxs = jsxRuntime.exports.jsxs;
+const Fragment = jsxRuntime.exports.Fragment;
+const NostoFohofo = () => {
+  useEffect(() => {
+    window.nostojs((api) => {
+      api.defaultSession().setResponseMode("HTML").viewNotFound().setPlacements(api.placements.getPlacements()).load().then((data) => {
+        api.placements.injectCampaigns(data.recommendations);
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsx("div", {
+      className: "nosto_page_type",
+      style: {
+        display: "none"
+      },
+      children: "notfound"
+    })
+  });
+};
+const NostoOther = () => {
+  useEffect(() => {
+    window.nostojs((api) => {
+      api.defaultSession().setResponseMode("HTML").viewOther().setPlacements(api.placements.getPlacements()).load().then((data) => {
+        api.placements.injectCampaigns(data.recommendations);
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsx("div", {
+      className: "nosto_page_type",
+      style: {
+        display: "none"
+      },
+      children: "other"
+    })
+  });
+};
+const NostoCheckout = () => {
+  useEffect(() => {
+    window.nostojs((api) => {
+      api.defaultSession().setResponseMode("HTML").viewCart().setPlacements(api.placements.getPlacements()).load().then((data) => {
+        api.placements.injectCampaigns(data.recommendations);
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsx("div", {
+      className: "nosto_page_type",
+      style: {
+        display: "none"
+      },
+      children: "cart"
+    })
+  });
+};
+function stringinate(obj) {
+  Object.keys(obj).forEach((property) => {
+    if (obj[property] instanceof URL) {
+      obj[property] = obj[property].toString();
+    }
+    if (typeof obj[property] === "object") {
+      stringinate(obj[property]);
+    }
+    obj[property] = obj[property];
+  });
+  return obj;
+}
+var snakeize = function walk(obj) {
+  if (!obj || typeof obj !== "object")
+    return obj;
+  if (isDate(obj) || isRegex(obj))
+    return obj;
+  if (Array.isArray(obj))
+    return obj.map(walk);
+  return Object.keys(obj).reduce(function(acc, key) {
+    var camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, function(m2, x) {
+      return "_" + x.toLowerCase();
+    });
+    acc[camel] = walk(obj[key]);
+    return acc;
+  }, {});
+};
+var isDate = function(obj) {
+  return Object.prototype.toString.call(obj) === "[object Date]";
+};
+var isRegex = function(obj) {
+  return Object.prototype.toString.call(obj) === "[object RegExp]";
+};
+const NostoProduct = ({
+  product,
+  tagging
+}) => {
+  useEffect(() => {
+    window.nostojs((api) => {
+      api.defaultSession().setResponseMode("HTML").viewProduct(snakeize(stringinate(tagging))).setPlacements(api.placements.getPlacements()).load().then((data) => {
+        api.placements.injectCampaigns(data.recommendations);
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      className: "nosto_page_type",
+      style: {
+        display: "none"
+      },
+      children: "product"
+    }), /* @__PURE__ */ jsxs("div", {
+      className: "nosto_product",
+      style: {
+        display: "none"
+      },
+      children: [tagging.variationId && /* @__PURE__ */ jsx("span", {
+        className: "variation_id",
+        children: tagging.variationId
+      }), tagging.productId && /* @__PURE__ */ jsx("span", {
+        className: "product_id",
+        children: tagging.productId
+      }), tagging.name && /* @__PURE__ */ jsx("span", {
+        className: "name",
+        children: tagging.name
+      }), tagging.url && /* @__PURE__ */ jsx("span", {
+        className: "url",
+        children: tagging.url.toString()
+      }), tagging.imageUrl && /* @__PURE__ */ jsx("span", {
+        className: "image_url",
+        children: tagging.imageUrl.toString()
+      }), tagging.availability && /* @__PURE__ */ jsx("span", {
+        className: "availability",
+        children: tagging.availability
+      }), tagging.price && /* @__PURE__ */ jsx("span", {
+        className: "price",
+        children: tagging.price
+      }), tagging.listPrice && /* @__PURE__ */ jsx("span", {
+        className: "list_price",
+        children: tagging.listPrice
+      }), tagging.priceCurrencyCode && /* @__PURE__ */ jsx("span", {
+        className: "price_currency_code",
+        children: tagging.priceCurrencyCode
+      }), tagging.brand && /* @__PURE__ */ jsx("span", {
+        className: "brand",
+        children: tagging.brand
+      }), tagging.description && /* @__PURE__ */ jsx("span", {
+        className: "description",
+        children: tagging.description
+      }), tagging.googleCategory && /* @__PURE__ */ jsx("span", {
+        className: "description",
+        children: tagging.googleCategory
+      }), tagging.condition && /* @__PURE__ */ jsx("span", {
+        className: "condition",
+        children: tagging.condition
+      }), tagging.gender && /* @__PURE__ */ jsx("span", {
+        className: "gender",
+        children: tagging.gender
+      }), tagging.ageGroup && /* @__PURE__ */ jsx("span", {
+        className: "age_group",
+        children: tagging.ageGroup
+      }), tagging.gtin && /* @__PURE__ */ jsx("span", {
+        className: "gtin",
+        children: tagging.gtin
+      }), tagging.category && tagging.category.map((category, index) => /* @__PURE__ */ jsx("span", {
+        className: "category",
+        children: category
+      }, index)), tagging.tags1 && tagging.tags1.map((tag, index) => /* @__PURE__ */ jsx("span", {
+        className: "tag1",
+        children: tag
+      }, index)), tagging.tags2 && tagging.tags2.map((tag, index) => /* @__PURE__ */ jsx("span", {
+        className: "tag2",
+        children: tag
+      }, index)), tagging.tags3 && tagging.tags3.map((tag, index) => /* @__PURE__ */ jsx("span", {
+        className: "tag3",
+        children: tag
+      }, index)), tagging.ratingValue && /* @__PURE__ */ jsx("span", {
+        className: "rating_value",
+        children: tagging.ratingValue
+      }), tagging.reviewCount && /* @__PURE__ */ jsx("span", {
+        className: "review_count",
+        children: tagging.reviewCount
+      }), tagging.alternateImageUrls && tagging.alternateImageUrls.map((url, index) => /* @__PURE__ */ jsx("span", {
+        className: "alternate_image_url",
+        children: url.toString()
+      }, index)), tagging.customFields && Object.keys(tagging.customFields).map((field, index) => tagging.customFields && tagging.customFields[field] && /* @__PURE__ */ jsx("span", {
+        className: field,
+        children: tagging.customFields[field]
+      }, index)), tagging.skus && tagging.skus.map((sku, index) => /* @__PURE__ */ jsxs("span", {
+        className: "nosto_sku",
+        children: [sku.id && /* @__PURE__ */ jsx("span", {
+          className: "product_id",
+          children: sku.id
+        }), sku.name && /* @__PURE__ */ jsx("span", {
+          className: "name",
+          children: sku.name
+        }), sku.price && /* @__PURE__ */ jsx("span", {
+          className: "price",
+          children: sku.price
+        }), sku.listPrice && /* @__PURE__ */ jsx("span", {
+          className: "list_price",
+          children: sku.listPrice
+        }), sku.url && /* @__PURE__ */ jsx("span", {
+          className: "url",
+          children: sku.url.toString()
+        }), sku.imageUrl && /* @__PURE__ */ jsx("span", {
+          className: "image_url",
+          children: sku.imageUrl.toString()
+        }), sku.gtin && /* @__PURE__ */ jsx("span", {
+          className: "gtin",
+          children: sku.gtin
+        }), sku.availability && /* @__PURE__ */ jsx("span", {
+          className: "availability",
+          children: sku.availability
+        }), sku.customFields && Object.keys(sku.customFields).map((field, index2) => sku.customFields && sku.customFields[field] && /* @__PURE__ */ jsx("span", {
+          className: field,
+          children: sku.customFields[field]
+        }, index2))]
+      }, index))]
+    })]
+  });
+};
+const NostoCategory = ({
+  category
+}) => {
+  useEffect(() => {
+    window.nostojs((api) => {
+      api.defaultSession().setResponseMode("HTML").viewCategory(category).setPlacements(api.placements.getPlacements()).load().then((data) => {
+        api.placements.injectCampaigns(data.recommendations);
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      className: "nosto_page_type",
+      style: {
+        display: "none"
+      },
+      children: "category"
+    }), /* @__PURE__ */ jsx("div", {
+      className: "nosto_category",
+      style: {
+        display: "none"
+      },
+      children: category
+    })]
+  });
+};
+const NostoSearch = ({
+  query
+}) => {
+  useEffect(() => {
+    window.nostojs((api) => {
+      api.defaultSession().setResponseMode("HTML").viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
+        api.placements.injectCampaigns(data.recommendations);
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      className: "nosto_page_type",
+      style: {
+        display: "none"
+      },
+      children: "search"
+    }), /* @__PURE__ */ jsx("div", {
+      className: "nosto_search",
+      style: {
+        display: "none"
+      },
+      children: query
+    })]
+  });
+};
+const NostoOrder = ({
+  order
+}) => {
+  useEffect(() => {
+    window.nostojs((api) => {
+      api.defaultSession().setResponseMode("HTML").addOrder(snakeize(order)).setPlacements(api.placements.getPlacements()).load().then((data) => {
+        api.placements.injectCampaigns(data.recommendations);
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      className: "nosto_page_type",
+      style: {
+        display: "none"
+      },
+      children: "order"
+    }), /* @__PURE__ */ jsx("div", {
+      className: "nosto_order",
+      style: {
+        display: "none"
+      },
+      children: order.purchase.number
+    })]
+  });
+};
+const NostoHome = () => {
+  useEffect(() => {
+    window.nostojs((api) => {
+      api.defaultSession().setResponseMode("HTML").viewFrontPage().setPlacements(api.placements.getPlacements()).load().then((data) => {
+        api.placements.injectCampaigns(data.recommendations);
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsx("div", {
+      className: "nosto_page_type",
+      style: {
+        display: "none"
+      },
+      children: "front"
+    })
+  });
+};
+const NostoPlacement = ({
+  id
+}) => {
+  const handleClick = (e) => {
+    const targetLink = e.target.closest("a");
+    if (!targetLink) {
+      return;
+    } else {
+      e.preventDefault();
+      location.href = targetLink.href.toString().replace(new URL(targetLink.href).origin, "");
+    }
+  };
+  return /* @__PURE__ */ jsx("div", {
+    className: "nosto_element",
+    onClick: handleClick,
+    id
+  });
+};
+const NostoContext = createContext({
+  account: void 0
+});
+const NostoProvider = ({
+  account,
+  host,
+  children
+}) => {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
+    script.async = true;
+    document.head.appendChild(script);
+    window.nostojs = (cb) => (window.nostojs.q = window.nostojs.q || []).push(cb);
+    window.nostojs((api) => api.setAutoLoad(false));
+  }, []);
+  return /* @__PURE__ */ jsx(NostoContext.Provider, {
+    value: {
+      account
+    },
+    children
+  });
+};
+var has = Object.prototype.hasOwnProperty;
+function find(iter, tar, key) {
+  for (key of iter.keys()) {
+    if (dequal(key, tar))
+      return key;
+  }
+}
+function dequal(foo, bar) {
+  var ctor, len, tmp;
+  if (foo === bar)
+    return true;
+  if (foo && bar && (ctor = foo.constructor) === bar.constructor) {
+    if (ctor === Date)
+      return foo.getTime() === bar.getTime();
+    if (ctor === RegExp)
+      return foo.toString() === bar.toString();
+    if (ctor === Array) {
+      if ((len = foo.length) === bar.length) {
+        while (len-- && dequal(foo[len], bar[len]))
+          ;
+      }
+      return len === -1;
+    }
+    if (ctor === Set) {
+      if (foo.size !== bar.size) {
+        return false;
+      }
+      for (len of foo) {
+        tmp = len;
+        if (tmp && typeof tmp === "object") {
+          tmp = find(bar, tmp);
+          if (!tmp)
+            return false;
+        }
+        if (!bar.has(tmp))
+          return false;
+      }
+      return true;
+    }
+    if (ctor === Map) {
+      if (foo.size !== bar.size) {
+        return false;
+      }
+      for (len of foo) {
+        tmp = len[0];
+        if (tmp && typeof tmp === "object") {
+          tmp = find(bar, tmp);
+          if (!tmp)
+            return false;
+        }
+        if (!dequal(len[1], bar.get(tmp))) {
+          return false;
+        }
+      }
+      return true;
+    }
+    if (ctor === ArrayBuffer) {
+      foo = new Uint8Array(foo);
+      bar = new Uint8Array(bar);
+    } else if (ctor === DataView) {
+      if ((len = foo.byteLength) === bar.byteLength) {
+        while (len-- && foo.getInt8(len) === bar.getInt8(len))
+          ;
+      }
+      return len === -1;
+    }
+    if (ArrayBuffer.isView(foo)) {
+      if ((len = foo.byteLength) === bar.byteLength) {
+        while (len-- && foo[len] === bar[len])
+          ;
+      }
+      return len === -1;
+    }
+    if (!ctor || typeof foo === "object") {
+      len = 0;
+      for (ctor in foo) {
+        if (has.call(foo, ctor) && ++len && !has.call(bar, ctor))
+          return false;
+        if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor]))
+          return false;
+      }
+      return Object.keys(bar).length === len;
+    }
+  }
+  return foo !== foo && bar !== bar;
+}
+function useDeepCompareMemoize(value) {
+  var ref = React.useRef(value);
+  var signalRef = React.useRef(0);
+  if (!dequal(value, ref.current)) {
+    ref.current = value;
+    signalRef.current += 1;
+  }
+  return React.useMemo(function() {
+    return ref.current;
+  }, [signalRef.current]);
+}
+function useDeepCompareEffect(callback, dependencies) {
+  return React.useEffect(callback, useDeepCompareMemoize(dependencies));
+}
+const NostoSession = ({
+  cart,
+  customer
+}) => {
+  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", {});
+};
+export { NostoFohofo as Nosto404, NostoCategory, NostoCheckout, NostoHome, NostoOrder, NostoOther, NostoPlacement, NostoProduct, NostoProvider, NostoSearch, NostoSession };

package/dist/index.umd.client.js

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

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@nosto/nosto-react",
+  "description": "Component library to simply implementing Nosto on React.",
+  "version": "0.1.0",
+  "author": "Mridang Agarwalla, Dominik Gilg",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nosto/nosto-react.git"
+  },
+  "keywords": [
+    "nosto",
+    "personalisation"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "prepare": "vite build",
+    "typecheck": "tsc",
+    "tslint": "tslint 'src/**/*.ts?(x)'",
+    "clean": "rimraf dist",
+    "prettier": "prettier '*/**/*.{ts,tsx,js,jsx,html,css,less}' --list-different",
+    "prettier:fix": "prettier '*/**/*.{ts,tsx,js,jsx,html,css,less}' --write"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "snakeize": "^0.1.0",
+    "use-deep-compare-effect": "^1.3.1",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
+    "@vitejs/plugin-react": "^1.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "vite": "^2.9.9",
+    "typescript": "^4.6.3",
+    "prettier": "^2.0.5",
+    "rimraf": "^3.0.2"
+  },
+  "main": "./dist/index.es.client.js",
+  "module": "./dist/index.es.client.js",
+  "types": "./src/types.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.client.js",
+      "require": "./dist/index.umd.client.js"
+    }
+  },
+  "bugs": {
+    "url": "https://github.com/Nosto/nosto-react/issues"
+  },
+  "homepage": "https://github.com/Nosto/nosto-react#readme"
+}

package/src/components/Category/index.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from "react";
+
+const NostoCategory: React.FC<{ category: string }> = ({ category }) => {
+  useEffect(() => {
+    // @ts-ignore
+    window.nostojs((api) => {
+      api
+        .defaultSession()
+        .setResponseMode("HTML")
+        .viewCategory(category)
+        .setPlacements(api.placements.getPlacements())
+        .load()
+        .then((data: object) => {
+          // @ts-ignore
+          api.placements.injectCampaigns(data.recommendations);
+        });
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        category
+      </div>
+      <div className="nosto_category" style={{ display: "none" }}>
+        {category}
+      </div>
+    </>
+  );
+};
+
+export default NostoCategory;

package/src/components/Checkout/index.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+
+const NostoCheckout: React.FC = () => {
+  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);
+        });
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        cart
+      </div>
+    </>
+  );
+};
+
+export default NostoCheckout;

package/src/components/Fohofo/index.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+
+const NostoFohofo: React.FC = () => {
+  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);
+        });
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        notfound
+      </div>
+    </>
+  );
+};
+
+export default NostoFohofo;