@nosto/nosto-react 2.2.2 → 2.4.0

package/src/components/NostoProvider.tsx

@@ -3,6 +3,7 @@ import { NostoContext, RecommendationComponent } from "../context"
 import type { ReactNode } from "react"
 import { ScriptLoadOptions } from "../hooks/scriptLoader"
 import { useLoadClientScript } from "../hooks/useLoadClientScript"
+import { nostojs } from "@nosto/nosto-js"
 
 /**
  * @group Components
@@ -88,7 +89,7 @@ export function NostoProvider(props: NostoProviderProps) {
   const { clientScriptLoaded } = useLoadClientScript(props)
 
   if (clientScriptLoaded) {
-    window.nostojs(api => {
+    nostojs(api => {
       api.defaultSession().setVariation(currentVariation!).setResponseMode(responseMode)
     })
   }

package/src/context.ts

@@ -1,5 +1,6 @@
 import { createContext, ReactElement } from "react"
-import { Recommendation, RenderMode } from "./types"
+import { Recommendation } from "./types"
+import { RenderMode } from "@nosto/nosto-js/client"
 
 type AnyFunction = (...args: unknown[]) => unknown
 

package/src/hooks/useLoadClientScript.ts

@@ -1,11 +1,12 @@
 import { useState, useEffect } from "react"
-import { isNostoLoaded } from "../components/helpers"
-import type { NostoClient } from "../types"
 import type { NostoProviderProps } from "../components/NostoProvider"
 import scriptLoaderFn from "./scriptLoader"
+import { init, initNostoStub, isNostoLoaded, nostojs } from "@nosto/nosto-js"
 
 type NostoScriptProps = Pick<NostoProviderProps, "account" | "host" | "shopifyMarkets" | "loadScript" | "scriptLoader">
 
+const defaultAttributes = { "nosto-client-script": "" }
+
 export function useLoadClientScript(props: NostoScriptProps) {
   const {
     host = "connect.nosto.com",
@@ -18,19 +19,13 @@ export function useLoadClientScript(props: NostoScriptProps) {
 
   useEffect(() => {
     function scriptOnload() {
-      // Override for production scripts to work in unit tests
-      if ("nostoReactTest" in window) {
-        window.nosto?.reload({
-          site: "localhost"
-        })
-      }
       setClientScriptLoaded(true)
     }
 
     // Create and append script element
     async function injectScriptElement(urlPartial: string, extraAttributes: Record<string, string> = {}) {
       const scriptSrc = `//${host}${urlPartial}`
-      const attributes = { "nosto-client-script": "", ...extraAttributes }
+      const attributes = { ...defaultAttributes, ...extraAttributes }
       await scriptLoader(scriptSrc, { attributes })
       scriptOnload()
     }
@@ -60,23 +55,27 @@ export function useLoadClientScript(props: NostoScriptProps) {
       }
     }
 
-    // Load Nosto API stub
-    if (!window.nostojs) {
-      window.nostojs = (cb: (api: NostoClient) => void) => {
-        (window.nostojs.q = window.nostojs.q || []).push(cb)
-      }
-      window.nostojs(api => api.setAutoLoad(false))
-    }
+    initNostoStub()
 
     if (!loadScript) {
-      window.nosto ? scriptOnload() : window.nostojs(scriptOnload)
+      nostojs(scriptOnload)
       return
     }
 
+    async function initClientScript() {
+      await init({
+        merchantId: account,
+        options: {
+          attributes: defaultAttributes
+        },
+        scriptLoader
+      })
+      scriptOnload()
+    }
+
     // Load Nosto client script if not already loaded externally
     if (!isNostoLoaded() && !shopifyMarkets) {
-      const urlPartial = `/include/${account}`
-      injectScriptElement(urlPartial)
+      initClientScript()
     }
 
     // Load Shopify Markets scripts

package/src/hooks/useNostoApi.ts

@@ -1,15 +1,16 @@
 import { DependencyList, useEffect } from "react"
 import { useNostoContext } from "./useNostoContext"
-import { NostoClient } from "../types"
 import { useDeepCompareEffect } from "./useDeepCompareEffect"
+import { nostojs } from "@nosto/nosto-js"
+import { API } from "@nosto/nosto-js/client"
 
-export function useNostoApi(cb: (api: NostoClient) => void, deps?: DependencyList, flags?: { deep?: boolean }): void {
+export function useNostoApi(cb: (api: API) => void, deps?: DependencyList, flags?: { deep?: boolean }): void {
   const { clientScriptLoaded } = useNostoContext()
   const useEffectFn = flags?.deep ? useDeepCompareEffect : useEffect
 
   useEffectFn(() => {
     if (clientScriptLoaded) {
-      window.nostojs(cb)
+      nostojs(cb)
     }
   }, [clientScriptLoaded, ...(deps ?? [])])
 }

package/src/hooks/useNostoOrder.tsx

@@ -1,8 +1,8 @@
 import { snakeize } from "../utils/snakeize"
-import { Order } from "../types"
 import { useRenderCampaigns } from "./useRenderCampaigns"
 import { useNostoApi } from "./useNostoApi"
 import { ToCamelCase } from "../utils/types"
+import { WebsiteOrder as Order } from "@nosto/nosto-js/client"
 
 /**
  * @group Hooks

package/src/hooks/useNostoProduct.tsx

@@ -1,12 +1,13 @@
-import { Product } from "../types"
 import { useNostoApi } from "./useNostoApi"
 import { useRenderCampaigns } from "./useRenderCampaigns"
+import { Product } from "@nosto/nosto-js/client"
 
 /**
  * @group Hooks
  */
 export type NostoProductProps = {
   product: string
+  reference?: string
   tagging?: Product
   placements?: string[]
 }
@@ -16,22 +17,27 @@ export type NostoProductProps = {
  *
  * @group Hooks
  */
-export function useNostoProduct({ product, tagging, placements }: NostoProductProps) {
+export function useNostoProduct({ product, tagging, placements, reference }: NostoProductProps) {
   const { renderCampaigns } = useRenderCampaigns()
 
   if (tagging && !tagging.product_id) {
     throw new Error("The product object must contain a product_id property")
   }
 
+  const productId = tagging?.product_id ?? product
+
   useNostoApi(
     async api => {
-      const data = await api
+      const action = api
         .defaultSession()
         .viewProduct(tagging ?? product)
         .setPlacements(placements || api.placements.getPlacements())
-        .load()
+      if (reference) {
+        action.setRef(productId, reference)
+      }
+      const data = await action.load()
       renderCampaigns(data)
     },
-    [product, tagging?.selected_sku_id]
+    [productId, tagging?.selected_sku_id]
   )
 }

package/src/hooks/useNostoSession.tsx

@@ -1,8 +1,9 @@
 import { snakeize } from "../utils/snakeize"
-import { Cart as CartSnakeCase, Customer as CustomerSnakeCase } from "../types"
+import { PushedCustomer as CustomerSnakeCase, Cart as CartSnakeCase } from "@nosto/nosto-js/client"
 import { ToCamelCase } from "../utils/types"
 import { useNostoContext } from "./useNostoContext"
 import { useDeepCompareEffect } from "./useDeepCompareEffect"
+import { nostojs } from "@nosto/nosto-js"
 
 /**
  * @group Hooks
@@ -25,7 +26,7 @@ export function useNostoSession({ cart, customer }: NostoSessionProps = {}) {
     const currentCustomer = customer ? snakeize(customer) : undefined
 
     if (clientScriptLoaded) {
-      window.nostojs(api => {
+      nostojs(api => {
         api.defaultSession().setCart(currentCart).setCustomer(currentCustomer).viewOther().load({ skipPageViews: true })
       })
     }

package/src/hooks/useRenderCampaigns.tsx

@@ -1,8 +1,10 @@
 import { cloneElement, useRef } from "react"
 import { createRoot, Root } from "react-dom/client"
-import { ActionResponse, Recommendation } from "../types"
+import { Recommendation } from "../types"
 import { useNostoContext } from "./useNostoContext"
 import { RecommendationComponent } from "../context"
+import { ActionResponse, API } from "@nosto/nosto-js/client"
+import { nostojs } from "@nosto/nosto-js"
 
 type CampaignData = Pick<ActionResponse, "campaigns" | "recommendations">
 
@@ -17,13 +19,16 @@ function RecommendationComponentWrapper(props: {
   })
 }
 
+function injectPlacements(data: Record<string, unknown>) {
+  nostojs(api => api.placements.injectCampaigns(data as Parameters<API['placements']['injectCampaigns']>[0]))
+}
+
 function injectCampaigns(data: CampaignData) {
+  // @ts-expect-error not defined
   if (!window.nostojs) {
     throw new Error("Nosto has not yet been initialized")
   }
-  window.nostojs(api => {
-    api.placements.injectCampaigns(data.recommendations)
-  })
+  injectPlacements(data.recommendations)
 }
 
 export function useRenderCampaigns() {
@@ -35,6 +40,9 @@ export function useRenderCampaigns() {
   }
 
   function renderCampaigns(data: CampaignData) {
+    // inject Onsite content campaigns directly
+    injectPlacements(data.campaigns?.content ?? {})
+
     // render recommendation component into placements:
     const recommendations = data.campaigns?.recommendations ?? {}
     for (const key in recommendations) {

package/src/index.ts

@@ -1,4 +1,5 @@
-export type { Cart, Customer, Product, Order, Recommendation } from "./types"
+export type { Product, PushedCustomer as Customer, Cart, WebsiteOrder as Order } from "@nosto/nosto-js/client"
+export type { Recommendation } from "./types"
 export { type ScriptLoadOptions } from "./hooks/scriptLoader"
 export { NostoContext, type NostoContextType } from "./context"
 export { useNostoContext } from "./hooks/useNostoContext"