@nosto/nosto-react 0.4.1 → 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(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;
-}