@nosto/nosto-react 0.4.0 → 0.4.3

package/src/utils/compare.ts

@@ -1,30 +1,30 @@
-import { isPlainObject } from "./object";
+import { isPlainObject } from "./object"
 
 export function deepCompare(a: unknown, b: unknown): boolean {
   if (a === b) {
-    return true;
+    return true
   }
 
   if (a instanceof Date && b instanceof Date) {
-    return a.getTime() === b.getTime();
+    return a.getTime() === b.getTime()
   }
 
   if (a instanceof Array && b instanceof Array) {
     if (a.length !== b.length) {
-      return false;
+      return false
     }
 
-    return a.every((v, i) => deepCompare(v, b[i]));
+    return a.every((v, i) => deepCompare(v, b[i]))
   }
 
   if (isPlainObject(a) && isPlainObject(b)) {
-    const entriesA = Object.entries(a);
+    const entriesA = Object.entries(a)
 
     if (entriesA.length !== Object.keys(b).length) {
-      return false;
+      return false
     }
-    return entriesA.every(([k, v]) => deepCompare(v, b[k]));
+    return entriesA.every(([k, v]) => deepCompare(v, b[k]))
   }
 
-  return false;
+  return false
 }

package/src/utils/hooks.ts

@@ -1,21 +1,41 @@
-import { useEffect, useRef, useMemo } from "react";
-import { deepCompare } from "./compare";
+import { useEffect, useRef, useMemo } from "react"
+import { useNostoContext } from "../components/context"
+import { deepCompare } from "./compare"
+import { NostoClient } from "../types"
 
 export function useDeepCompareEffect(
   callback: Parameters<typeof useEffect>[0],
   dependencies: Parameters<typeof useEffect>[1]
 ): ReturnType<typeof useEffect> {
-  return useEffect(callback, useDeepCompareMemoize(dependencies));
+  return useEffect(callback, useDeepCompareMemoize(dependencies))
 }
 
 function useDeepCompareMemoize<T>(value: T) {
-  const ref = useRef<T>(value);
-  const signalRef = useRef<number>(0);
+  const ref = useRef<T>(value)
+  const signalRef = useRef<number>(0)
 
   if (!deepCompare(value, ref.current)) {
-    ref.current = value;
-    signalRef.current += 1;
+    ref.current = value
+    signalRef.current += 1
   }
 
-  return useMemo(() => ref.current, [signalRef.current]);
+  return useMemo(() => ref.current, [signalRef.current])
+}
+
+export function useNostoApi(
+  cb: (api: NostoClient) => void,
+  deps?: React.DependencyList,
+  flags?: { deep?: boolean }
+): void {
+  const { clientScriptLoaded, currentVariation, responseMode } = useNostoContext()
+  const useEffectFn = flags?.deep ? useDeepCompareEffect : useEffect
+
+  useEffectFn(() => {
+    if (clientScriptLoaded) {
+      window.nostojs(api => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode)
+        cb(api)
+      })
+    }
+  }, [clientScriptLoaded, currentVariation, responseMode, ...(deps ?? [])])
 }

package/src/utils/object.ts

@@ -1,20 +1,19 @@
-export function isPlainObject<T = Record<keyof any, unknown>>(
-  value: unknown
-): value is T {
-  const isObject = (v: unknown): v is object => String(v) === "[object Object]";
+const isObject = (v: unknown): v is object => String(v) === "[object Object]"
 
-  if (!isObject(value)) return false;
+export function isPlainObject(value: unknown): value is Record<string, unknown> {
+  if (!isObject(value)) return false
 
-  const constructor = value.constructor;
-  if (constructor === undefined) return true;
+  const constructor = value.constructor
+  if (constructor === undefined) return true
 
-  const prototype = constructor.prototype;
-  if (!isObject(prototype)) return false;
+  const prototype = constructor.prototype
+  if (!isObject(prototype)) return false
 
   // Checks if it is not a class
+  // eslint-disable-next-line no-prototype-builtins
   if (!prototype.hasOwnProperty("isPrototypeOf")) {
-    return false;
+    return false
   }
 
-  return true;
+  return true
 }

package/src/utils/snakeize.ts

@@ -1,28 +1,28 @@
 export function snakeize<T>(obj: T): T {
   if (!obj || typeof obj !== "object") {
-    return obj;
+    return obj
   }
   if (isDate(obj) || isRegex(obj)) {
-    return obj;
+    return obj
   }
   if (Array.isArray(obj)) {
-    return obj.map(snakeize) as T;
+    return obj.map(snakeize) as T
   }
   return Object.keys(obj).reduce((acc, key) => {
-    var camel =
+    const camel =
       key[0].toLowerCase() +
       key.slice(1).replace(/([A-Z]+)/g, (_, x) => {
-        return "_" + x.toLowerCase();
-      });
-    acc[camel as keyof typeof acc] = snakeize(obj[key as keyof typeof acc]);
-    return acc;
-  }, {} as T);
+        return "_" + x.toLowerCase()
+      })
+    acc[camel as keyof typeof acc] = snakeize(obj[key as keyof typeof acc])
+    return acc
+  }, {}) as T
 }
 
 function isDate(obj: unknown) {
-  return Object.prototype.toString.call(obj) === "[object Date]";
+  return Object.prototype.toString.call(obj) === "[object Date]"
 }
 
 function isRegex(obj: unknown) {
-  return Object.prototype.toString.call(obj) === "[object RegExp]";
+  return Object.prototype.toString.call(obj) === "[object RegExp]"
 }

package/dist/index.umd.client.js

@@ -1,9 +0,0 @@
-(function(u,m){typeof exports=="object"&&typeof module!="undefined"?m(exports,require("react"),require("react-dom/client")):typeof define=="function"&&define.amd?define(["exports","react","react-dom/client"],m):(u=typeof globalThis!="undefined"?globalThis:u||self,m(u["@nosto/nosto-react"]={},u.React,u.ReactDOM))})(this,function(u,m,x){"use strict";function D(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var R=D(m);const V=m.createContext({account:"",currentVariation:"",pageType:"",responseMode:"HTML",clientScriptLoaded:!1,useRenderCampaigns:()=>{}});function h(){const t=m.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,c={},d=null,i=null;e!==void 0&&(d=""+e),n.key!==void 0&&(d=""+n.key),n.ref!==void 0&&(i=n.ref);for(r in n)z.call(n,r)&&!W.hasOwnProperty(r)&&(c[r]=n[r]);if(t&&t.defaultProps)for(r in n=t.defaultProps,n)c[r]===void 0&&(c[r]=n[r]);return{$$typeof:$,type:t,key:d,ref:i,props:c,_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(){const{clientScriptLoaded:t,currentVariation:n,responseMode:e,recommendationComponent:r,useRenderCampaigns:c}=h(),{renderCampaigns:d,pageTypeUpdated:i}=c("404");return m.useEffect(()=>{t&&i&&window.nostojs(a=>{a.defaultSession().setVariation(n).setResponseMode(e).viewNotFound().setPlacements(a.placements.getPlacements()).load().then(p=>{d(p,a)})})},[t,n,r,i]),s(_,{children:s("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})}function Y(){const{clientScriptLoaded:t,currentVariation:n,responseMode:e,recommendationComponent:r,useRenderCampaigns:c}=h(),{renderCampaigns:d,pageTypeUpdated:i}=c("other");return m.useEffect(()=>{t&&i&&window.nostojs(a=>{a.defaultSession().setVariation(n).setResponseMode(e).viewOther().setPlacements(a.placements.getPlacements()).load().then(p=>{d(p,a)})})},[t,n,r,i]),s(_,{children:s("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})}function Z(){const{clientScriptLoaded:t,currentVariation:n,responseMode:e,recommendationComponent:r,useRenderCampaigns:c}=h(),{renderCampaigns:d,pageTypeUpdated:i}=c("checkout");return m.useEffect(()=>{t&&i&&window.nostojs(a=>{a.defaultSession().setVariation(n).setResponseMode(e).viewCart().setPlacements(a.placements.getPlacements()).load().then(p=>{d(p,a)})})},[t,n,r,i]),s(_,{children:s("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})})}function F(t){const n=c=>String(c)==="[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,c])=>U(c,n[r]))}return!1}function I(t,n){return m.useEffect(t,K(n))}function K(t){const n=m.useRef(t),e=m.useRef(0);return U(t,n.current)||(n.current=t,e.current+=1),m.useMemo(()=>n.current,[e.current])}function Q(t){const{product:n,tagging:e}=t,{clientScriptLoaded:r,currentVariation:c,responseMode:d,recommendationComponent:i,useRenderCampaigns:a}=h(),{renderCampaigns:p,pageTypeUpdated:f}=a("product");return I(()=>{r&&f&&window.nostojs(o=>{o.defaultSession().setResponseMode(d).viewProduct(n).setPlacements(o.placements.getPlacements()).load().then(y=>{p(y,o)})})},[r,c,n,i,f]),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:c,recommendationComponent:d,useRenderCampaigns:i}=h(),{renderCampaigns:a,pageTypeUpdated:p}=i("home");return m.useEffect(()=>{e&&p&&window.nostojs(f=>{f.defaultSession().setVariation(r).setResponseMode(c).viewCategory(n).setPlacements(f.placements.getPlacements()).load().then(o=>{a(o,f)})})},[e,n,r,d,p]),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:c,recommendationComponent:d,useRenderCampaigns:i}=h(),{renderCampaigns:a,pageTypeUpdated:p}=i("search");return m.useEffect(()=>{e&&p&&window.nostojs(f=>{f.defaultSession().setVariation(r).setResponseMode(c).viewSearch(n).setPlacements(f.placements.getPlacements()).load().then(o=>{a(o,f)})})},[e,r,n,d,p]),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,(c,d)=>"_"+d.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:c,recommendationComponent:d,useRenderCampaigns:i}=h(),{renderCampaigns:a,pageTypeUpdated:p}=i("order");return m.useEffect(()=>{e&&p&&window.nostojs(f=>{f.defaultSession().setVariation(r).setResponseMode(c).addOrder(P(n)).setPlacements(f.placements.getPlacements()).load().then(o=>{a(o,f)})})},[e,r,d,p]),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(){const{clientScriptLoaded:t,currentVariation:n,responseMode:e,recommendationComponent:r,useRenderCampaigns:c}=h(),{renderCampaigns:d,pageTypeUpdated:i}=c("home");return m.useEffect(()=>{t&&i&&window.nostojs(a=>{a.defaultSession().setVariation(n).setResponseMode(e).viewFrontPage().setPlacements(a.placements.getPlacements()).load().then(p=>{d(p,a)})})},[t,n,r,i]),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:c,children:d,recommendationComponent:i,shopifyMarkets:a}=t;const[p,f]=R.default.useState(!1),o=R.default.useMemo(()=>p,[p]);e=r?e:"";const y=m.isValidElement(i)?"JSON_ORIGINAL":"HTML";function j(v){return R.default.cloneElement(i,{nostoRecommendation:v.nostoRecommendation})}const[O,ae]=m.useState(""),ce=function(v=""){const S=m.useRef({});m.useEffect(()=>{O!=v&&ae(v)},[]);const M=v==O;function l(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:l,pageTypeUpdated:M}};return m.useEffect(()=>{var v,S,M;if(window.nostojs||(window.nostojs=l=>{(window.nostojs.q=window.nostojs.q||[]).push(l)},window.nostojs(l=>l.setAutoLoad(!1))),!document.querySelectorAll("[nosto-client-script]").length&&!a){const l=document.createElement("script");l.type="text/javascript",l.src="//"+(c||"connect.nosto.com")+"/include/"+n,l.async=!0,l.setAttribute("nosto-client-script",""),l.onload=()=>{var N;typeof jest!="undefined"&&((N=window.nosto)==null||N.reload({site:"localhost"})),f(!0)},document.body.appendChild(l)}if(a){const l=document.querySelector("[nosto-client-script]"),N=document.querySelector("#nosto-sandbox");if(!l||(l==null?void 0:l.getAttribute("nosto-language"))!=(a==null?void 0:a.language)||(l==null?void 0:l.getAttribute("nosto-market-id"))!=(a==null?void 0:a.marketId)){p&&f(!1),(v=l==null?void 0:l.parentNode)==null||v.removeChild(l),(S=N==null?void 0:N.parentNode)==null||S.removeChild(N);const C=document.createElement("script");C.type="text/javascript",C.src="//"+(c||"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"})),f(!0)},document.body.appendChild(C)}}},[p,a]),s(V.Provider,{value:{account:n,clientScriptLoaded:o,currentVariation:e,responseMode:y,recommendationComponent:i,useRenderCampaigns:ce,pageType:O},children:d})}function re(t){const{cart:n,customer:e}=t,{clientScriptLoaded:r}=h();return I(()=>{const c=n?P(n):void 0,d=e?P(e):void 0;r&&window.nostojs(i=>{i.defaultSession().setResponseMode("HTML").setCart(c).setCustomer(d).viewOther().load()})},[r,n,e]),s(_,{})}u.Nosto404=B,u.NostoCategory=X,u.NostoCheckout=Z,u.NostoContext=V,u.NostoHome=ne,u.NostoOrder=te,u.NostoOther=Y,u.NostoPlacement=oe,u.NostoProduct=Q,u.NostoProvider=se,u.NostoSearch=g,u.NostoSession=re,u.useNostoContext=h,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

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

@@ -1,64 +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(): 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(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,64 +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(): 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(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/Other/index.client.tsx

@@ -1,63 +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(): 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(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>
-  );
-}