@nosto/nosto-react/dist/index.umd.js

Component library to simply implementing Nosto on React.

(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`),require(`react-dom`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react`,`react-dom`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`@nosto/nosto-react`]={},e.React,e.ReactDOM,e[`react/jsx-runtime`]))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=(0,t.createContext)({account:``,currentVariation:``,responseMode:`HTML`,clientScriptLoaded:!1});function a(){return(0,t.useContext)(i)}var o=e=>String(e)===`[object Object]`;function s(e){if(!o(e))return!1;let t=e.constructor;if(t===void 0)return!0;let n=t.prototype;return!(!o(n)||!n.hasOwnProperty(`isPrototypeOf`))}function c(e,t){if(e===t)return!0;if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(e instanceof Array&&t instanceof Array)return e.length===t.length?e.every((e,n)=>c(e,t[n])):!1;if(s(e)&&s(t)){let n=Object.entries(e);return n.length===Object.keys(t).length?n.every(([e,n])=>c(n,t[e])):!1}return!1}function l(e,n){return(0,t.useEffect)(e,u(n))}function u(e){let n=(0,t.useRef)(e),r=(0,t.useRef)(0);return c(e,n.current)||(n.current=e,r.current+=1),(0,t.useMemo)(()=>n.current,[r.current])}function d(){window.nostojs=window.nostojs??function(e){(window.nostojs.q=window.nostojs.q??[]).push(e)}}async function f(e){return window.nostojs(e)}typeof window<`u`&&(d(),f(e=>{e.internal.getSettings()}));function p(){return typeof window.nosto<`u`}var m={production:`https://connect.nosto.com/`,staging:`https://connect.staging.nosto.com/`,local:`https://connect.nosto.com/`};function h(e){return m[e??`production`]}function g({merchantId:e,env:t,options:n,shopifyInternational:r,scriptLoader:i}){let a=document.querySelector(`script[nosto-language], script[nosto-market-id]`),o=String(r?.marketId||``),s=r?.language||``,c=a?.getAttribute(`nosto-language`)!==s||a?.getAttribute(`nosto-market-id`)!==o;if(!a||c){let r=document.querySelector(`#nosto-sandbox`);a?.parentNode?.removeChild(a),r?.parentNode?.removeChild(r);let c=new URL(`/script/shopify/market/nosto.js`,h(t));c.searchParams.append(`merchant`,e),c.searchParams.append(`market`,o),c.searchParams.append(`locale`,s.toLowerCase());let l={...n?.attributes,"nosto-language":s,"nosto-market-id":o};return(i??v)(c.toString(),{...n,attributes:l})}return Promise.resolve()}function _(e){if(e.shopifyInternational)return g(e);let{merchantId:t,env:n,options:r,scriptLoader:i}=e;return(i??v)(new URL(`/include/${t}`,h(n)).toString(),r)}function v(e,t){return new Promise((n,r)=>{let i=document.createElement(`script`);i.src=e,i.async=!0,i.type=`text/javascript`,i.onload=()=>n(),i.onerror=()=>r(),Object.entries(t?.attributes??{}).forEach(([e,t])=>i.setAttribute(e,t)),t?.position===`head`?document.head.appendChild(i):document.body.appendChild(i)})}typeof window<`u`&&d();function y(e,n,r){let{clientScriptLoaded:i}=a();(r?.deep?l:t.useEffect)(()=>{i&&f(e)},[i,...n??[]])}function b(e){return(0,t.cloneElement)(e.recommendationComponent,{nostoRecommendation:e.nostoRecommendation})}function x(e){f(t=>t.placements.injectCampaigns(e))}function S(e){if(!window.nostojs)throw Error(`Nosto has not yet been initialized`);x(e.recommendations)}function C(){let{responseMode:e,recommendationComponent:i,setPortals:o}=a();if((0,t.useEffect)(()=>()=>o?.([]),[o]),e==`HTML`)return{renderCampaigns:S};if(!i)throw Error(`recommendationComponent is required for client-side rendering using hook`);function s(e){x(e.campaigns?.content??{});let t=e.campaigns?.recommendations??{},a=[];for(let e in t){let o=t[e],s=`#`+e,c=document.querySelector(s);c&&a.push((0,n.createPortal)((0,r.jsx)(b,{recommendationComponent:i,nostoRecommendation:o}),c,e))}o?.(a)}return{renderCampaigns:s}}function w(e){let{renderCampaigns:t}=C();y(async n=>{t(await n.defaultSession().viewNotFound().setPlacements(e?.placements||n.placements.getPlacements()).load())})}function T(e){return w(e),null}function E({category:e,placements:t}){let{renderCampaigns:n}=C();y(async r=>{n(await r.defaultSession().viewCategory(e).setPlacements(t||r.placements.getPlacements()).load())},[e])}function D(e){return E(e),null}function O(e){let{renderCampaigns:t}=C();y(async n=>{t(await n.defaultSession().viewCart().setPlacements(e?.placements||n.placements.getPlacements()).load())})}function k(e){return O(e),null}function A(e){let{renderCampaigns:t}=C();y(async n=>{t(await n.defaultSession().viewFrontPage().setPlacements(e?.placements||n.placements.getPlacements()).load())})}function j(e){return A(e),null}function M(e){return!e||typeof e!=`object`||N(e)||P(e)?e:Array.isArray(e)?e.map(M):Object.keys(e).reduce((t,n)=>{let r=n[0].toLowerCase()+n.slice(1).replace(/([A-Z]+)/g,(e,t)=>`_`+t.toLowerCase());return t[r]=M(e[n]),t},{})}function N(e){return Object.prototype.toString.call(e)===`[object Date]`}function P(e){return Object.prototype.toString.call(e)===`[object RegExp]`}function F({order:e,placements:t}){let{renderCampaigns:n}=C();y(async r=>{n(await r.defaultSession().addOrder(M(e)).setPlacements(t||r.placements.getPlacements()).load())},[e],{deep:!0})}function I(e){return F(e),null}function L(e){let{renderCampaigns:t}=C();y(async n=>{t(await n.defaultSession().viewOther().setPlacements(e?.placements||n.placements.getPlacements()).load())})}function R(e){return L(e),null}function z({id:e,pageType:t,children:n}){return(0,r.jsx)(`div`,{className:`nosto_element`,id:e,children:n},e+(t||``))}function B({product:e,tagging:t,placements:n,reference:r}){let{renderCampaigns:i}=C();if(t&&!t.product_id)throw Error(`The product object must contain a product_id property`);let a=t?.product_id??e;y(async o=>{let s=o.defaultSession().viewProduct(t??e).setPlacements(n||o.placements.getPlacements());r&&s.setRef(a,r),i(await s.load())},[a,t?.selected_sku_id])}function V(e){return B(e),null}function H(e,t){return new Promise((n,r)=>{let i=document.createElement(`script`);i.type=`text/javascript`,i.src=e,i.async=!0,i.onload=()=>n(),i.onerror=()=>r(),Object.entries(t?.attributes??{}).forEach(([e,t])=>i.setAttribute(e,t)),t?.position===`head`?document.head.appendChild(i):document.body.appendChild(i)})}var U={"nosto-client-script":``};function W(e){let{scriptLoader:n=H,account:r,shopifyMarkets:i,loadScript:a=!0}=e,[o,s]=(0,t.useState)(!1);return(0,t.useEffect)(()=>{function e(){s(!0)}if(d(),f(e=>e.setAutoLoad(!1)),!a){f(e);return}async function t(){await _({merchantId:r,shopifyInternational:i,options:{attributes:U},scriptLoader:n}),e()}(!p()||i)&&t()},[i?.marketId,i?.language]),{clientScriptLoaded:o}}function G({setPortalsRef:e}){let[n,i]=(0,t.useState)([]);return e.current=i,(0,r.jsx)(r.Fragment,{children:n})}function K(){let e=(0,t.useRef)(null);return{setPortalsRef:e,setPortals:(0,t.useCallback)(t=>{e.current?.(t)},[])}}function q(e){let{account:n,multiCurrency:a=!1,children:o,recommendationComponent:s,renderMode:c}=e,{setPortalsRef:l,setPortals:u}=K(),d=a?e.currentVariation:``;if(s&&!(0,t.isValidElement)(s))throw Error(`The recommendationComponent prop must be a valid React element. Please provide a valid React element.`);let p=c||(s?`JSON_ORIGINAL`:`HTML`),{clientScriptLoaded:m}=W(e);return m&&f(e=>{e.defaultSession().setVariation(d).setResponseMode(p)}),(0,r.jsxs)(i.Provider,{value:{account:n,clientScriptLoaded:m,currentVariation:d,responseMode:p,recommendationComponent:s,setPortals:u},children:[o,(0,r.jsx)(G,{setPortalsRef:l})]})}function J({query:e,placements:t}){let{renderCampaigns:n}=C();y(async r=>{n(await r.defaultSession().viewSearch(e).setPlacements(t||r.placements.getPlacements()).load())},[e])}function Y(e){return J(e),null}function X({cart:e,customer:t}={}){let{clientScriptLoaded:n}=a();l(()=>{let r=e?M(e):void 0,i=t?M(t):void 0;n&&f(e=>{e.defaultSession().setCart(r).setCustomer(i).viewOther().load({skipPageViews:!0})})},[n,e,t])}function Z(e){return X(e),null}e.Nosto404=T,e.NostoCategory=D,e.NostoCheckout=k,e.NostoContext=i,e.NostoHome=j,e.NostoOrder=I,e.NostoOther=R,e.NostoPlacement=z,e.NostoProduct=V,e.NostoProvider=q,e.NostoSearch=Y,e.NostoSession=Z,e.useNosto404=w,e.useNostoCategory=E,e.useNostoCheckout=O,e.useNostoContext=a,e.useNostoHome=A,e.useNostoOrder=F,e.useNostoOther=L,e.useNostoProduct=B,e.useNostoSearch=J,e.useNostoSession=X});