@nosto/nosto-react 1.0.0 → 2.0.0

package/src/hooks/useDeepCompareEffect.ts

@@ -0,0 +1,21 @@
+import { useEffect, useRef, useMemo } from "react"
+import { deepCompare } from "../utils/compare"
+
+export function useDeepCompareEffect(
+  callback: Parameters<typeof useEffect>[0],
+  dependencies: Parameters<typeof useEffect>[1]
+): ReturnType<typeof useEffect> {
+  return useEffect(callback, useDeepCompareMemoize(dependencies))
+}
+
+function useDeepCompareMemoize<T>(value: T) {
+  const ref = useRef<T>(value);
+  const signalRef = useRef<number>(0)
+
+  if (!deepCompare(value, ref.current)) {
+    ref.current = value
+    signalRef.current += 1
+  }
+
+  return useMemo(() => ref.current, [signalRef.current])
+}

package/src/hooks/useNostoApi.ts

@@ -0,0 +1,22 @@
+import { useEffect } from "react"
+import { useNostoContext } from "./useNostoContext"
+import { NostoClient } from "../types"
+import { useDeepCompareEffect } from "./useDeepCompareEffect"
+
+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/hooks/useNostoContext.ts

@@ -0,0 +1,18 @@
+import { useContext } from "react"
+import { NostoContext, NostoContextType } from "../context"
+
+/**
+ * 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/hooks/useRenderCampaigns.tsx

@@ -0,0 +1,60 @@
+import { useRef } from "react"
+import { createRoot, Root } from "react-dom/client"
+import { ActionResponse, Recommendation } from "../types"
+import { useNostoContext } from "./useNostoContext"
+import React from "react"
+import { RecommendationComponent } from "../context"
+
+// RecommendationComponent for client-side rendering:
+function RecommendationComponentWrapper(props: { 
+    recommendationComponent: RecommendationComponent,
+    nostoRecommendation: Recommendation }) {
+
+  return React.cloneElement(props.recommendationComponent, {
+    // eslint-disable-next-line react/prop-types
+    nostoRecommendation: props.nostoRecommendation,
+  })
+}
+
+function injectCampaigns(data: ActionResponse) {
+  if (!window.nostojs) {
+    throw new Error("Nosto has not yet been initialized")
+  }
+  window.nostojs(api => {
+    api.placements.injectCampaigns(data.recommendations)
+  })
+}
+
+export function useRenderCampaigns() {
+  const { responseMode, recommendationComponent } = useNostoContext()
+  const placementRefs = useRef<Record<string, Root>>({})
+
+  if (responseMode == "HTML") {
+    return { renderCampaigns: injectCampaigns }
+  }
+
+  function renderCampaigns(data: ActionResponse) {
+    // render recommendation component into placements:
+    const recommendations = data.campaigns?.recommendations ?? {}
+    for (const key in recommendations) {
+      const recommendation = recommendations[key] as Recommendation
+      const placementSelector = "#" + key
+      const placementElement = document.querySelector(placementSelector)
+
+      if (placementElement) {
+        if (!placementRefs.current[key]) {
+          placementRefs.current[key] = createRoot(placementElement)
+        }
+        const root = placementRefs.current[key]!
+        root.render(
+          <RecommendationComponentWrapper
+            recommendationComponent={recommendationComponent!}
+            nostoRecommendation={recommendation}
+          ></RecommendationComponentWrapper>
+        )
+      }
+    }
+  }
+
+  return { renderCampaigns }
+}

package/src/index.ts

@@ -1,2 +1,4 @@
 export type { Cart, Customer, Product, Order, Recommendation } from "./types"
 export * from "./components"
+export { NostoContext, type NostoContextType } from "./context"
+export { useNostoContext } from "./hooks/useNostoContext"

package/src/types.ts

@@ -17,6 +17,7 @@ declare global {
 export interface NostoClient {
   setAutoLoad(autoload: boolean): void
   defaultSession(): Session
+  listen(event: string, callback: (data: unknown) => void): void
   placements: {
     getPlacements(): string[]
     injectCampaigns(recommendations: Record<string, unknown>): void
@@ -28,7 +29,7 @@ export interface NostoClient {
  */
 export interface Recommendation {
   result_id: string
-  products: Product[]
+  products: PushedProduct[]
   result_type: string
   title: string
   div_id: string
@@ -36,6 +37,77 @@ export interface Recommendation {
   params: unknown
 }
 
+export interface PushedProduct {
+  age_group?: string
+  alternate_image_urls: string[]
+  availability: string
+  brand?: string
+  category: string[]
+  category_id: string[]
+  condition?: string
+  custom_fields: { [index: string]: string }
+  date_published?: Date
+  description?: string
+  gender?: string
+  google_category?: string
+  gtin?: string
+  image_url?: string
+  inventory_level?: number
+  list_price?: number
+  name: string
+  parent_category_id: string[]
+  price: number
+  price_currency_code: string
+  product_id: string
+  rating_value?: number
+  review_count?: number
+  skus: PushedProductSKU[]
+  source_updated?: Date
+  supplier_cost?: number
+  tags1: string[]
+  tags2: string[]
+  tags3: string[]
+  thumb_url?: string
+  unit_pricing_base_measure?: number
+  unit_pricing_measure?: number
+  unit_pricing_unit?: string
+  update_received?: Date
+  url: string
+  variation_id?: string
+  variations: { [index: string]: PushedVariation }
+}
+
+export interface PushedProductSKU extends NostoSku { }
+
+export interface PushedVariation extends NostoVariant { }
+
+
+export interface NostoSku extends Sku {
+  inventory_level?: number
+}
+
+export interface NostoVariant {
+  availability: string
+  available: boolean
+  discounted: boolean
+  list_price?: number
+  price: number
+  price_currency_code: string
+  price_text?: string
+}
+
+export interface Sku {
+  availability: string
+  custom_fields: { [index: string]: string }
+  gtin?: string
+  id: string
+  image_url?: string
+  list_price?: number
+  name: string
+  price: number
+  url?: string
+}
+
 // copied from client script d.ts export
 declare const eventTypes: readonly ["vp", "lp", "dp", "rp", "bp", "vc", "or", "is", "cp", "ec", "es", "gc", "src", "cpr", "pl", "cc", "con"]
 declare type EventType = typeof eventTypes[number]

package/src/components/context.ts

@@ -1,55 +0,0 @@
-import { createContext, useContext } from "react"
-import { NostoClient, Recommendation, RenderMode } from "../types"
-
-type AnyFunction = (...args: unknown[]) => unknown
-
-/**
- * @group Types
- */
-export interface NostoContextType {
-  account: string
-  clientScriptLoaded: boolean
-  currentVariation?: string
-  renderFunction?: AnyFunction
-  responseMode: RenderMode
-  recommendationComponent?: React.ReactElement<{
-    nostoRecommendation: Recommendation
-  }>
-  useRenderCampaigns(type: string): {
-    renderCampaigns(data: unknown, api: NostoClient): void
-    pageTypeUpdated: boolean
-  }
-  pageType: string
-}
-
-/**
- * @group Essential Functions
- */
-export const NostoContext = createContext<NostoContextType>({
-  account: "",
-  currentVariation: "",
-  pageType: "",
-  responseMode: "HTML",
-  clientScriptLoaded: false,
-  useRenderCampaigns: () => {
-    return {
-      renderCampaigns: () => {},
-      pageTypeUpdated: false,
-    }
-  },
-})
-
-/**
- * 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/utils/hooks.ts

@@ -1,41 +0,0 @@
-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))
-}
-
-function useDeepCompareMemoize<T>(value: T) {
-  const ref = useRef<T>(value)
-  const signalRef = useRef<number>(0)
-
-  if (!deepCompare(value, ref.current)) {
-    ref.current = value
-    signalRef.current += 1
-  }
-
-  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 ?? [])])
-}