@nosto/nosto-react 0.4.1 → 0.5.0

package/dist/index.umd.client.js

@@ -1,9 +0,0 @@
-(function(f,u){typeof exports=="object"&&typeof module!="undefined"?u(exports,require("react"),require("react-dom/client")):typeof define=="function"&&define.amd?define(["exports","react","react-dom/client"],u):(f=typeof globalThis!="undefined"?globalThis:f||self,u(f["@nosto/nosto-react"]={},f.React,f.ReactDOM))})(this,function(f,u,x){"use strict";function D(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var R=D(u);const V=u.createContext({account:"",currentVariation:"",pageType:"",responseMode:"HTML",clientScriptLoaded:!1,useRenderCampaigns:()=>{}});function h(){const t=u.useContext(V);if(!t)throw new Error("No nosto context found");return t}var E={exports:{}},b={};/**
- * @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 H=R.default,$=Symbol.for("react.element"),G=Symbol.for("react.fragment"),z=Object.prototype.hasOwnProperty,J=H.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,W={key:!0,ref:!0,__self:!0,__source:!0};function A(t,n,e){var r,i={},l=null,m=null;e!==void 0&&(l=""+e),n.key!==void 0&&(l=""+n.key),n.ref!==void 0&&(m=n.ref);for(r in n)z.call(n,r)&&!W.hasOwnProperty(r)&&(i[r]=n[r]);if(t&&t.defaultProps)for(r in n=t.defaultProps,n)i[r]===void 0&&(i[r]=n[r]);return{$$typeof:$,type:t,key:l,ref:m,props:i,_owner:J.current}}b.Fragment=G,b.jsx=A,b.jsxs=A,E.exports=b;const s=E.exports.jsx,w=E.exports.jsxs,_=E.exports.Fragment;function B(t){const{clientScriptLoaded:n,currentVariation:e,responseMode:r,recommendationComponent:i,useRenderCampaigns:l}=h(),{renderCampaigns:m,pageTypeUpdated:a}=l("404");return u.useEffect(()=>{n&&a&&window.nostojs(c=>{c.defaultSession().setVariation(e).setResponseMode(r).viewNotFound().setPlacements(t.placements||c.placements.getPlacements()).load().then(d=>{m(d,c)})})},[n,e,i,a]),s(_,{children:s("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})}function Y(t){const{clientScriptLoaded:n,currentVariation:e,responseMode:r,recommendationComponent:i,useRenderCampaigns:l}=h(),{renderCampaigns:m,pageTypeUpdated:a}=l("other");return u.useEffect(()=>{n&&a&&window.nostojs(c=>{c.defaultSession().setVariation(e).setResponseMode(r).viewOther().setPlacements(t.placements||c.placements.getPlacements()).load().then(d=>{m(d,c)})})},[n,e,i,a]),s(_,{children:s("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})}function Z(t){const{clientScriptLoaded:n,currentVariation:e,responseMode:r,recommendationComponent:i,useRenderCampaigns:l}=h(),{renderCampaigns:m,pageTypeUpdated:a}=l("checkout");return u.useEffect(()=>{n&&a&&window.nostojs(c=>{c.defaultSession().setVariation(e).setResponseMode(r).viewCart().setPlacements(t.placements||c.placements.getPlacements()).load().then(d=>{m(d,c)})})},[n,e,i,a]),s(_,{children:s("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})})}function F(t){const n=i=>String(i)==="[object Object]";if(!n(t))return!1;const e=t.constructor;if(e===void 0)return!0;const r=e.prototype;return!(!n(r)||!r.hasOwnProperty("isPrototypeOf"))}function U(t,n){if(t===n)return!0;if(t instanceof Date&&n instanceof Date)return t.getTime()===n.getTime();if(t instanceof Array&&n instanceof Array)return t.length!==n.length?!1:t.every((e,r)=>U(e,n[r]));if(F(t)&&F(n)){const e=Object.entries(t);return e.length!==Object.keys(n).length?!1:e.every(([r,i])=>U(i,n[r]))}return!1}function I(t,n){return u.useEffect(t,K(n))}function K(t){const n=u.useRef(t),e=u.useRef(0);return U(t,n.current)||(n.current=t,e.current+=1),u.useMemo(()=>n.current,[e.current])}function Q(t){const{product:n,tagging:e}=t,{clientScriptLoaded:r,currentVariation:i,responseMode:l,recommendationComponent:m,useRenderCampaigns:a}=h(),{renderCampaigns:c,pageTypeUpdated:d}=a("product");return I(()=>{r&&d&&window.nostojs(o=>{o.defaultSession().setResponseMode(l).viewProduct(n).setPlacements(t.placements||o.placements.getPlacements()).load().then(y=>{c(y,o)})})},[r,i,n,m,d]),w(_,{children:[s("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),w("div",{className:"nosto_product",style:{display:"none"},children:[(e==null?void 0:e.variationId)&&s("span",{className:"variation_id",children:e.variationId}),n&&s("span",{className:"product_id",children:n}),(e==null?void 0:e.name)&&s("span",{className:"name",children:e.name}),(e==null?void 0:e.url)&&s("span",{className:"url",children:e.url.toString()}),(e==null?void 0:e.imageUrl)&&s("span",{className:"image_url",children:e.imageUrl.toString()}),(e==null?void 0:e.availability)&&s("span",{className:"availability",children:e.availability}),(e==null?void 0:e.price)&&s("span",{className:"price",children:e.price}),(e==null?void 0:e.listPrice)&&s("span",{className:"list_price",children:e.listPrice}),(e==null?void 0:e.priceCurrencyCode)&&s("span",{className:"price_currency_code",children:e.priceCurrencyCode}),(e==null?void 0:e.brand)&&s("span",{className:"brand",children:e.brand}),(e==null?void 0:e.description)&&s("span",{className:"description",children:e.description}),(e==null?void 0:e.googleCategory)&&s("span",{className:"description",children:e.googleCategory}),(e==null?void 0:e.condition)&&s("span",{className:"condition",children:e.condition}),(e==null?void 0:e.gender)&&s("span",{className:"gender",children:e.gender}),(e==null?void 0:e.ageGroup)&&s("span",{className:"age_group",children:e.ageGroup}),(e==null?void 0:e.gtin)&&s("span",{className:"gtin",children:e.gtin}),(e==null?void 0:e.category)&&(e==null?void 0:e.category.map((o,y)=>s("span",{className:"category",children:o},y))),(e==null?void 0:e.tags1)&&e.tags1.map((o,y)=>s("span",{className:"tag1",children:o},y)),(e==null?void 0:e.tags2)&&e.tags2.map((o,y)=>s("span",{className:"tag2",children:o},y)),(e==null?void 0:e.tags3)&&e.tags3.map((o,y)=>s("span",{className:"tag3",children:o},y)),(e==null?void 0:e.ratingValue)&&s("span",{className:"rating_value",children:e.ratingValue}),(e==null?void 0:e.reviewCount)&&s("span",{className:"review_count",children:e.reviewCount}),(e==null?void 0:e.alternateImageUrls)&&e.alternateImageUrls.map((o,y)=>s("span",{className:"alternate_image_url",children:o.toString()},y)),(e==null?void 0:e.customFields)&&Object.keys(e.customFields).map((o,y)=>e.customFields&&e.customFields[o]&&s("span",{className:o,children:e.customFields[o]},y)),(e==null?void 0:e.skus)&&e.skus.map((o,y)=>w("span",{className:"nosto_sku",children:[(o==null?void 0:o.id)&&s("span",{className:"product_id",children:o.id}),(o==null?void 0:o.name)&&s("span",{className:"name",children:o.name}),(o==null?void 0:o.price)&&s("span",{className:"price",children:o.price}),(o==null?void 0:o.listPrice)&&s("span",{className:"list_price",children:o.listPrice}),(o==null?void 0:o.url)&&s("span",{className:"url",children:o.url.toString()}),(o==null?void 0:o.imageUrl)&&s("span",{className:"image_url",children:o.imageUrl.toString()}),(o==null?void 0:o.gtin)&&s("span",{className:"gtin",children:o.gtin}),(o==null?void 0:o.availability)&&s("span",{className:"availability",children:o.availability}),(o==null?void 0:o.customFields)&&Object.keys(o.customFields).map((j,O)=>o.customFields&&o.customFields[j]&&s("span",{className:j,children:o.customFields[j]},O))]},y))]})]})}function X(t){const{category:n}=t,{clientScriptLoaded:e,currentVariation:r,responseMode:i,recommendationComponent:l,useRenderCampaigns:m}=h(),{renderCampaigns:a,pageTypeUpdated:c}=m("home");return u.useEffect(()=>{e&&c&&window.nostojs(d=>{d.defaultSession().setVariation(r).setResponseMode(i).viewCategory(n).setPlacements(t.placements||d.placements.getPlacements()).load().then(o=>{a(o,d)})})},[e,n,r,l,c]),w(_,{children:[s("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),s("div",{className:"nosto_category",style:{display:"none"},children:n})]})}function g(t){const{query:n}=t,{clientScriptLoaded:e,currentVariation:r,responseMode:i,recommendationComponent:l,useRenderCampaigns:m}=h(),{renderCampaigns:a,pageTypeUpdated:c}=m("search");return u.useEffect(()=>{e&&c&&window.nostojs(d=>{d.defaultSession().setVariation(r).setResponseMode(i).viewSearch(n).setPlacements(t.placements||d.placements.getPlacements()).load().then(o=>{a(o,d)})})},[e,r,n,l,c]),w(_,{children:[s("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),s("div",{className:"nosto_search",style:{display:"none"},children:n})]})}function P(t){return!t||typeof t!="object"||k(t)||ee(t)?t:Array.isArray(t)?t.map(P):Object.keys(t).reduce((n,e)=>{var r=e[0].toLowerCase()+e.slice(1).replace(/([A-Z]+)/g,(i,l)=>"_"+l.toLowerCase());return n[r]=P(t[e]),n},{})}function k(t){return Object.prototype.toString.call(t)==="[object Date]"}function ee(t){return Object.prototype.toString.call(t)==="[object RegExp]"}function te(t){const{order:n}=t,{clientScriptLoaded:e,currentVariation:r,responseMode:i,recommendationComponent:l,useRenderCampaigns:m}=h(),{renderCampaigns:a,pageTypeUpdated:c}=m("order");return u.useEffect(()=>{e&&c&&window.nostojs(d=>{d.defaultSession().setVariation(r).setResponseMode(i).addOrder(P(n)).setPlacements(t.placements||d.placements.getPlacements()).load().then(o=>{a(o,d)})})},[e,r,l,c]),w(_,{children:[s("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),s("div",{className:"nosto_order",style:{display:"none"},children:n.purchase.number})]})}function ne(t){const{clientScriptLoaded:n,currentVariation:e,responseMode:r,recommendationComponent:i,useRenderCampaigns:l}=h(),{renderCampaigns:m,pageTypeUpdated:a}=l("home");return u.useEffect(()=>{n&&a&&window.nostojs(c=>{c.defaultSession().setVariation(e).setResponseMode(r).viewFrontPage().setPlacements(t.placements||c.placements.getPlacements()).load().then(d=>{m(d,c)})})},[n,e,i,a]),s(_,{children:s("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})}function oe(t){const{id:n,pageType:e}=t;return s("div",{className:"nosto_element",id:n},n+(e||""))}function se(t){let{account:n,currentVariation:e="",multiCurrency:r=!1,host:i,children:l,recommendationComponent:m,shopifyMarkets:a}=t;const[c,d]=R.default.useState(!1),o=R.default.useMemo(()=>c,[c]);e=r?e:"";const y=u.isValidElement(m)?"JSON_ORIGINAL":"HTML";function j(v){return R.default.cloneElement(m,{nostoRecommendation:v.nostoRecommendation})}const[O,ae]=u.useState(""),ce=function(v=""){const S=u.useRef({});u.useEffect(()=>{O!=v&&ae(v)},[]);const M=v==O;function p(N,C){if(y=="HTML")C.placements.injectCampaigns(N.recommendations);else{const L=N.campaigns.recommendations;for(const T in L){let ie=L[T],de="#"+T,q=()=>document.querySelector(de);q()&&(S.current[T]||(S.current[T]=x.createRoot(q())),S.current[T].render(s(j,{nostoRecommendation:ie})))}}}return{renderCampaigns:p,pageTypeUpdated:M}};return u.useEffect(()=>{var v,S,M;if(window.nostojs||(window.nostojs=p=>{(window.nostojs.q=window.nostojs.q||[]).push(p)},window.nostojs(p=>p.setAutoLoad(!1))),!document.querySelectorAll("[nosto-client-script]").length&&!a){const p=document.createElement("script");p.type="text/javascript",p.src="//"+(i||"connect.nosto.com")+"/include/"+n,p.async=!0,p.setAttribute("nosto-client-script",""),p.onload=()=>{var N;typeof jest!="undefined"&&((N=window.nosto)==null||N.reload({site:"localhost"})),d(!0)},document.body.appendChild(p)}if(a){const p=document.querySelector("[nosto-client-script]"),N=document.querySelector("#nosto-sandbox");if(!p||(p==null?void 0:p.getAttribute("nosto-language"))!=(a==null?void 0:a.language)||(p==null?void 0:p.getAttribute("nosto-market-id"))!=(a==null?void 0:a.marketId)){c&&d(!1),(v=p==null?void 0:p.parentNode)==null||v.removeChild(p),(S=N==null?void 0:N.parentNode)==null||S.removeChild(N);const C=document.createElement("script");C.type="text/javascript",C.src="//"+(i||"connect.nosto.com")+`/script/shopify/market/nosto.js?merchant=${n}&market=${a.marketId||""}&locale=${((M=a==null?void 0:a.language)==null?void 0:M.toLowerCase())||""}`,C.async=!0,C.setAttribute("nosto-client-script",""),C.setAttribute("nosto-language",(a==null?void 0:a.language)||""),C.setAttribute("nosto-market-id",String(a==null?void 0:a.marketId)),C.onload=()=>{var L;typeof jest!="undefined"&&((L=window.nosto)==null||L.reload({site:"localhost"})),d(!0)},document.body.appendChild(C)}}},[c,a]),s(V.Provider,{value:{account:n,clientScriptLoaded:o,currentVariation:e,responseMode:y,recommendationComponent:m,useRenderCampaigns:ce,pageType:O},children:l})}function re(t){const{cart:n,customer:e}=t,{clientScriptLoaded:r}=h();return I(()=>{const i=n?P(n):void 0,l=e?P(e):void 0;r&&window.nostojs(m=>{m.defaultSession().setResponseMode("HTML").setCart(i).setCustomer(l).viewOther().load()})},[r,n,e]),s(_,{})}f.Nosto404=B,f.NostoCategory=X,f.NostoCheckout=Z,f.NostoContext=V,f.NostoHome=ne,f.NostoOrder=te,f.NostoOther=Y,f.NostoPlacement=oe,f.NostoProduct=Q,f.NostoProvider=se,f.NostoSearch=g,f.NostoSession=re,f.useNostoContext=h,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

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

@@ -1,66 +0,0 @@
-import { useEffect } from "react";
-import { useNostoContext } from "../Provider/context.client";
-
-/**
- * You can personalise your cart and checkout pages by using the NostoCheckout component.
- * The component does not require any props.
- *
- * By default, your account, when created, has two cart-page placements named `categorypage-nosto-1` and `categorypage-nosto-2`.
- * You may omit these and use any identifier you need.
- * The identifiers used here are simply provided to illustrate the example.
- *
- * @example
- * ```
- * <div className="checkout-page">
- *   <NostoPlacement id="checkout-nosto-1" />
- *   <NostoPlacement id="checkout-nosto-2" />
- *   <NostoCheckout />
- * </div>
- * ```
- *
- * @group Personalisation Components
- */
-
-export default function NostoCheckout(props: {
-  placements?: string[];
-}): JSX.Element {
-  const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
-    recommendationComponent,
-    useRenderCampaigns,
-  } = useNostoContext();
-
-  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("checkout");
-
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api
-          .defaultSession()
-          .setVariation(currentVariation)
-          .setResponseMode(responseMode)
-          .viewCart()
-          .setPlacements(props.placements || api.placements.getPlacements())
-          .load()
-          .then((data) => {
-            renderCampaigns(data, api);
-          });
-      });
-    }
-  }, [
-    clientScriptLoaded,
-    currentVariation,
-    recommendationComponent,
-    pageTypeUpdated,
-  ]);
-
-  return (
-    <>
-      <div className="nosto_page_type" style={{ display: "none" }}>
-        cart
-      </div>
-    </>
-  );
-}

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

@@ -1,66 +0,0 @@
-import { useEffect } from "react";
-import { useNostoContext } from "../Provider/context.client";
-
-/**
- * You can personalise your cart and checkout pages by using the `Nosto404` component.
- * The component does not require any props.
- *
- * By default, your account, when created, has three 404-page placements named `notfound-nosto-1`, `notfound-nosto-2` and `notfound-nosto-3`.
- * You may omit these and use any identifier you need.
- * The identifiers used here are simply provided to illustrate the example.
- *
- * @example
- * ```
- * <div className="notfound-page">
- *   <NostoPlacement id="notfound-nosto-1" />
- *   <NostoPlacement id="notfound-nosto-2" />
- *   <NostoPlacement id="notfound-nosto-3" />
- *   <Nosto404 />
- * </div>
- * ```
- *
- * @group Personalisation Components
- */
-export default function Nosto404(props: {
-  placements?: string[];
-}): JSX.Element {
-  const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
-    recommendationComponent,
-    useRenderCampaigns,
-  } = useNostoContext();
-
-  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("404");
-
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api
-          .defaultSession()
-          .setVariation(currentVariation)
-          .setResponseMode(responseMode)
-          .viewNotFound()
-          .setPlacements(props.placements || api.placements.getPlacements())
-          .load()
-          .then((data) => {
-            renderCampaigns(data, api);
-          });
-      });
-    }
-  }, [
-    clientScriptLoaded,
-    currentVariation,
-    recommendationComponent,
-    pageTypeUpdated,
-  ]);
-
-  return (
-    <>
-      <div className="nosto_page_type" style={{ display: "none" }}>
-        notfound
-      </div>
-    </>
-  );
-}

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

@@ -1,72 +0,0 @@
-import { Purchase } from "../../types";
-import { useEffect } from "react";
-import { useNostoContext } from "../Provider/context.client";
-import { snakeize } from "../../utils/snakeize";
-
-/**
- * You can personalise your order-confirmation/thank-you page by using the `NostoOrder` component.
- * The component requires that you provide it with the details of the order.
- *
- * By default, your account, when created, has one other-page placement named `thankyou-nosto-1`.
- * You may omit this and use any identifier you need. The identifier used here is simply provided to illustrate the example.
- *
- * The order prop requires a value that adheres to the type `Purchase`.
- *
- * @example
- * ```
- * <div className="thankyou-page">
- *     <NostoPlacement id="thankyou-nosto-1" />
- *     <NostoOrder order={{ purchase: toOrder(order) }} />
- * </div>
- * ```
- *
- * @group Personalisation Components
- */
-export default function NostoOrder(props: {
-  order: { purchase: Purchase };
-  placements?: string[];
-}): JSX.Element {
-  const { order } = props;
-  const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
-    recommendationComponent,
-    useRenderCampaigns,
-  } = useNostoContext();
-
-  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("order");
-
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api
-          .defaultSession()
-          .setVariation(currentVariation)
-          .setResponseMode(responseMode)
-          .addOrder(snakeize(order))
-          .setPlacements(props.placements || api.placements.getPlacements())
-          .load()
-          .then((data) => {
-            renderCampaigns(data, api);
-          });
-      });
-    }
-  }, [
-    clientScriptLoaded,
-    currentVariation,
-    recommendationComponent,
-    pageTypeUpdated,
-  ]);
-
-  return (
-    <>
-      <div className="nosto_page_type" style={{ display: "none" }}>
-        order
-      </div>
-      <div className="nosto_order" style={{ display: "none" }}>
-        {order.purchase.number}
-      </div>
-    </>
-  );
-}

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

@@ -1,64 +0,0 @@
-import React, { useEffect } from "react";
-import { useNostoContext } from "../Provider/context.client";
-
-/**
- * You can personalise your miscellaneous pages by using the NostoOther component.
- * The component does not require any props.
- *
- * By default, your account, when created, has two other-page placements named `other-nosto-1` and `other-nosto-2`.
- * You may omit these and use any identifier you need.
- * The identifiers used here are simply provided to illustrate the example.
- *
- * @example
- * ```
- * <div className="other-page">
- *     <NostoPlacement id="other-nosto-1" />
- *     <NostoPlacement id="other-nosto-2" />
- *     <NostoOther />
- * </div>;
- * ```
- *
- * @group Personalisation Components
- */
-export default function NostoOther(props: {
-    placements?: string[];
-}): JSX.Element {
-  const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
-    recommendationComponent,
-    useRenderCampaigns,
-  } = useNostoContext();
-
-  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("other");
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api
-          .defaultSession()
-          .setVariation(currentVariation)
-          .setResponseMode(responseMode)
-          .viewOther()
-          .setPlacements(props.placements || api.placements.getPlacements())
-          .load()
-          .then((data) => {
-            renderCampaigns(data, api);
-          });
-      });
-    }
-  }, [
-    clientScriptLoaded,
-    currentVariation,
-    recommendationComponent,
-    pageTypeUpdated,
-  ]);
-
-  return (
-    <>
-      <div className="nosto_page_type" style={{ display: "none" }}>
-        other
-      </div>
-    </>
-  );
-}

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

@@ -1,45 +0,0 @@
-import { createContext, useContext } from "react";
-import { Recommendation } from "../../types";
-
-/**
- * @group Types
- */
-export interface NostoContextType {
-  account: string;
-  clientScriptLoaded: boolean;
-  currentVariation: string;
-  renderFunction?: Function;
-  responseMode: string;
-  recommendationComponent?: React.ReactElement<{
-    nostoRecommendation: Recommendation;
-  }>;
-  useRenderCampaigns: Function;
-  pageType: string;
-}
-
-/**
- * @group Essential Functions
- */
-export const NostoContext = createContext<NostoContextType>({
-  account: "",
-  currentVariation: "",
-  pageType: "",
-  responseMode: "HTML",
-  clientScriptLoaded: false,
-  useRenderCampaigns: () => undefined,
-});
-
-/**
- * A hook that allows you to access the NostoContext and retrieve Nosto-related data from it in React components.
- *
- * @group Essential Functions
- */
-export function useNostoContext(): NostoContextType {
-  const context = useContext(NostoContext);
-
-  if (!context) {
-    throw new Error("No nosto context found");
-  }
-
-  return context;
-}

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

@@ -1,222 +0,0 @@
-import React, { useEffect, isValidElement, useState, useRef } from "react";
-import { NostoContext } from "./context.client";
-import { createRoot } from "react-dom/client";
-import { Recommendation } from "../../types";
-
-/**
- * This widget is what we call the Nosto root widget, which is responsible for adding the actual Nosto script and the JS API stub.
- * This widget wraps all other React Nosto widgets.
- *
- * ```
- * <NostoProvider account="your-nosto-account-id" recommendationComponent={<NostoSlot />}>
- *   <App />
- * </NostoProvider>
- * ```
- *
- * **Note:** the component also accepts a prop to configure the host `host="connect.nosto.com"`.
- * In advanced use-cases, the need to configure the host may surface.
- *
- * In order to implement client-side rendering, the requires a designated component to render the recommendations provided by Nosto.
- * This component should be capable of processing the JSON response received from our backend.
- * Notice the `recommendationComponent` prop passed to `<NostoProvider>` above.
- *
- * Learn more [here](https://github.com/Nosto/shopify-hydrogen/blob/main/README.md#client-side-rendering-for-recommendations) and see a [live example](https://github.com/Nosto/shopify-hydrogen-demo) on our demo store.
- *
- * @group Essential Functions
- */
-export default function NostoProvider(props: {
-  /**
-   * Indicates merchant id
-   */
-  account: string;
-  /**
-   * Indicates currency
-   */
-  currentVariation?: string;
-  /**
-   * Indicates an url of a server
-   */
-  host?: string;
-  children: React.ReactElement;
-  /**
-   * Indicates if merchant uses multiple currencies
-   */
-  multiCurrency?: boolean;
-  /**
-   * Recommendation component which holds nostoRecommendation object
-   */
-  recommendationComponent?: any;
-  /**
-  * Enables Shopify markets with language and market id
-  */
-  shopifyMarkets?: {
-    language?: string;
-    marketId?: string | number;
-  }
-}): JSX.Element {
-  let {
-    account,
-    currentVariation = "",
-    multiCurrency = false,
-    host,
-    children,
-    recommendationComponent,
-    shopifyMarkets
-  } = props;
-  const [clientScriptLoadedState, setClientScriptLoadedState] =
-    React.useState(false);
-  const clientScriptLoaded = React.useMemo(
-    () => clientScriptLoadedState,
-    [clientScriptLoadedState]
-  );
-
-  //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: {
-    nostoRecommendation: Recommendation;
-  }) {
-    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: {
-        recommendations: any;
-        campaigns: {
-          recommendations: {
-            [key: string]: any;
-          };
-        };
-      },
-      api: {
-        placements: {
-          injectCampaigns: (recommendations: any) => void;
-        };
-      }
-    ) {
-      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 (!window.nostojs) {
-      window.nostojs = (cb: Function) => {
-        (window.nostojs.q = window.nostojs.q || []).push(cb);
-      };
-      window.nostojs((api) => api.setAutoLoad(false));
-    }
-
-    if (!document.querySelectorAll("[nosto-client-script]").length && !shopifyMarkets) {
-      const script = document.createElement("script");
-      script.type = "text/javascript";
-      script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
-      script.async = true;
-      script.setAttribute("nosto-client-script", "");
-
-      script.onload = () => {
-        if (typeof jest !== "undefined") {
-          window.nosto?.reload({
-            site: "localhost",
-          });
-        }
-        setClientScriptLoadedState(true);
-      };
-      document.body.appendChild(script);
-    }
-
-    //Enable Shopify markets functionality:
-    if (!!shopifyMarkets) {
-
-      const existingScript = document.querySelector("[nosto-client-script]");
-      const nostoSandbox = document.querySelector('#nosto-sandbox');
-
-      if (!existingScript || existingScript?.getAttribute('nosto-language') != shopifyMarkets?.language || existingScript?.getAttribute('nosto-market-id') != shopifyMarkets?.marketId) {
-        if (clientScriptLoadedState) { setClientScriptLoadedState(false) };
-
-        existingScript?.parentNode?.removeChild(existingScript)
-        nostoSandbox?.parentNode?.removeChild(nostoSandbox)
-
-        const script = document.createElement("script");
-        script.type = "text/javascript";
-        script.src = "//" + (host || "connect.nosto.com") + `/script/shopify/market/nosto.js?merchant=${account}&market=${shopifyMarkets.marketId || ''}&locale=${shopifyMarkets?.language?.toLowerCase() || ''}`
-        script.async = true;
-        script.setAttribute("nosto-client-script", "");
-        script.setAttribute("nosto-language", shopifyMarkets?.language || '');
-        script.setAttribute("nosto-market-id", String(shopifyMarkets?.marketId));
-
-        script.onload = () => {
-          if (typeof jest !== "undefined") {
-            window.nosto?.reload({
-              site: "localhost",
-            });
-          }
-          setClientScriptLoadedState(true);
-        };
-        document.body.appendChild(script);
-      }
-
-    }
-
-  }, [clientScriptLoadedState, shopifyMarkets]);
-
-  return (
-    <NostoContext.Provider
-      value={{
-        account,
-        clientScriptLoaded,
-        currentVariation,
-        responseMode,
-        recommendationComponent,
-        useRenderCampaigns,
-        pageType,
-      }}
-    >
-      {children}
-    </NostoContext.Provider>
-  );
-}

package/src/index.client.ts

@@ -1,33 +0,0 @@
-export type {
-  Buyer, Cart, Customer, Item, Product, Purchase, Recommendation, SKU
-} from "./types";
-// noinspection JSUnusedGlobalSymbols
-export { default as Nosto404 } from "./components/Fohofo/index.client";
-// noinspection JSUnusedGlobalSymbols
-export { default as NostoOther } from "./components/Other/index.client";
-// noinspection JSUnusedGlobalSymbols
-export { default as NostoCheckout } from "./components/Checkout/index.client";
-// noinspection JSUnusedGlobalSymbols
-export { default as NostoProduct } from "./components/Product/index.client";
-// noinspection JSUnusedGlobalSymbols
-export { default as NostoCategory } from "./components/Category/index.client";
-// noinspection JSUnusedGlobalSymbols
-export { default as NostoSearch } from "./components/Search/index.client";
-// noinspection JSUnusedGlobalSymbols
-export { default as NostoOrder } from "./components/Order/index.client";
-// noinspection JSUnusedGlobalSymbols
-export { default as NostoHome } from "./components/Home/index.client";
-// noinspection JSUnusedGlobalSymbols
-export { default as NostoPlacement } from "./components/Placement/index.client";
-// noinspection JSUnusedGlobalSymbols
-export { default as NostoProvider } from "./components/Provider/index.client";
-// noinspection JSUnusedGlobalSymbols
-export {
-  NostoContext,
-  useNostoContext,
-} from "./components/Provider/context.client";
-export type {
-  NostoContextType,
-} from "./components/Provider/context.client";
-// noinspection JSUnusedGlobalSymbols
-export { default as NostoSession } from "./components/Session/index.client";